Merge pull request #470 from openedx/feanil/node24

build: Upgrade to node 24 and update package-lock.json

.env

@@ -33,3 +33,5 @@ ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
 ACCOUNT_SETTINGS_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -38,3 +38,5 @@ ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
 ACCOUNT_SETTINGS_URL=http://localhost:1997
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -36,3 +36,4 @@ ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 ACCOUNT_SETTINGS_URL=http://localhost:1997
+PARAGON_THEME_URLS={}

.eslintrc.js

@@ -7,20 +7,28 @@ const config = createConfig('eslint', {
     'import/no-named-as-default-member': 'off',
     'import/no-import-module-exports': 'off',
     'import/no-self-import': 'off',
-    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+    'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }],
     'react-hooks/rules-of-hooks': 'off',
-    "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
+    'react/forbid-prop-types': ['error', { forbid: ['any', 'array'] }], // arguable object proptype is use when I do not care about the shape of the object
     'no-import-assign': 'off',
     'no-promise-executor-return': 'off',
     'import/no-cycle': 'off',
   },
+  overrides: [
+    {
+      files: ['**/*.test.{js,jsx,ts,tsx}'],
+      rules: {
+        'react/prop-types': 'off',
+      },
+    },
+  ],
 });
 
 config.settings = {
-  "import/resolver": {
+  'import/resolver': {
     node: {
-      paths: ["src", "node_modules"],
-      extensions: [".js", ".jsx"],
+      paths: ['src', 'node_modules'],
+      extensions: ['.js', '.jsx'],
     },
   },
 };

.github/CODEOWNERS

@@ -1,6 +0,0 @@
-# Code owners for frontend-app-ora-grading
-
-# These owners will be the default owners for everything in
-# the repo. Unless a later match takes precedence, they will
-# be requested for review when someone opens a pull request.
-*       @edx/content-aurora

.nvmrc

@@ -1 +1 @@
-20
+24

package-lock.json

@@ -18,7 +18,7 @@
         "@fortawesome/free-brands-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@openedx/paragon": "^22.16.0",
+        "@openedx/paragon": "^23.4.5",
         "@redux-beacon/segment": "^1.1.0",
         "@redux-devtools/extension": "3.0.0",
         "@reduxjs/toolkit": "^1.6.1",
@@ -58,9 +58,7 @@
       },
       "devDependencies": {
         "@edx/browserslist-config": "^1.3.0",
-        "@edx/react-unit-test-utils": "^4.0.0",
-        "@edx/reactifex": "^2.1.1",
-        "@openedx/frontend-build": "^14.3.3",
+        "@openedx/frontend-build": "^14.6.2",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
         "axios-mock-adapter": "^1.20.0",
@@ -71,7 +69,6 @@
         "jest-expect-message": "^1.0.2",
         "react-dev-utils": "^12.0.1",
         "react-test-renderer": "^18.3.1",
-        "reactifex": "1.1.1",
         "redux-mock-store": "^1.5.5"
       }
     },
@@ -1941,6 +1938,215 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
+    "node_modules/@bundled-es-modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==",
+      "license": "ISC",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==",
+      "hasInstallScript": true,
+      "license": "ISC",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "glob": "^10.4.2",
+        "patch-package": "^8.0.0",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "string_decoder": "^1.3.0",
+        "url": "^0.11.3"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "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": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.17.0.tgz",
+      "integrity": "sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "assert": "^2.1.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "memfs": "^4.17.0",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "util": "^0.12.5"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "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": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs/node_modules/memfs": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.0.tgz",
+      "integrity": "sha512-4eirfZ7thblFmqFjywlTmuWVSvccHAJbn1r8qQLzmTO11qcqpohOjmY2mFce6x7x7WtskzRqApPD0hv+Oa74jg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/json-pack": "^1.0.3",
+        "@jsonjoy.com/util": "^1.3.0",
+        "tree-dump": "^1.0.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      }
+    },
+    "node_modules/@bundled-es-modules/postcss-calc-ast-parser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz",
+      "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==",
+      "license": "ISC",
+      "dependencies": {
+        "postcss-calc-ast-parser": "^0.1.4"
+      }
+    },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
+      "integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz",
+      "integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/regexp-to-ast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz",
+      "integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz",
+      "integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
+      "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@cospired/i18n-iso-languages": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-4.2.0.tgz",
@@ -2078,9 +2284,9 @@
       }
     },
     "node_modules/@edx/frontend-component-footer": {
-      "version": "14.6.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.6.0.tgz",
-      "integrity": "sha512-cgRhom6W/WErQ9yvLmfgB6ANBs+rBDLOH73NcvJIhfwWgAg67q+MLUscIbcX9N/9Yykk+kb7Ytr3CDefiKS7HA==",
+      "version": "14.7.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.7.0.tgz",
+      "integrity": "sha512-cnJT8MlxfT3QRgh3Jfn28dSBMvDpuARK4Z0sD45tBI9LMgtuaP0kDq2Etn/ueRQGgV1yB1r/EPb/m5R7EUvPLQ==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "6.7.2",
@@ -2233,16 +2439,16 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.3.4.tgz",
-      "integrity": "sha512-V3XtTo3KP8QSmId+Vvi4+qzpOVkxvTMNA6jH/i3Bfz+/jHjHBRnmp/Cc2pjTxiTgGNoKX4D1twiZkOBO+kWw1Q==",
+      "version": "8.3.7",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.3.7.tgz",
+      "integrity": "sha512-ya5ObMvtJlfQmoeL36OtzjFBh0hzJgXN/R2ppyIJ+IbCtY2BCfv5NqvmKD7CplwnSGJTBugpv5hQHeGmi+v97w==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@cospired/i18n-iso-languages": "4.2.0",
         "@formatjs/intl-pluralrules": "4.3.3",
         "@formatjs/intl-relativetimeformat": "10.0.1",
-        "axios": "1.8.4",
-        "axios-cache-interceptor": "1.6.2",
+        "axios": "1.9.0",
+        "axios-cache-interceptor": "1.8.0",
         "form-urlencoded": "4.1.4",
         "glob": "7.2.3",
         "history": "4.10.1",
@@ -2369,9 +2575,9 @@
       }
     },
     "node_modules/@edx/frontend-platform/node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -2380,9 +2586,9 @@
       }
     },
     "node_modules/@edx/frontend-platform/node_modules/axios-cache-interceptor": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.6.2.tgz",
-      "integrity": "sha512-YLbAODIHZZIcD4b3WYFVQOa5W2TY/WnJ6sBHqAg6Z+hx+RVj8/OcjQyRopO6awn7/kOkGL5X9TP16AucnlJ/lw==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.8.0.tgz",
+      "integrity": "sha512-cTNnPGJyQkxnWp0EWvE3NRvgURU5cWw/Qx3dIhXyHSM4Ip0c7EEe0I3an0Jwa549m1CAOg57ibj27YRNLmQCcg==",
       "license": "MIT",
       "dependencies": {
         "cache-parser": "1.2.5",
@@ -2470,68 +2676,6 @@
         "atlas": "atlas"
       }
     },
-    "node_modules/@edx/react-unit-test-utils": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-4.0.0.tgz",
-      "integrity": "sha512-QlVYhYD9L2bzx1eAtf8BbCJr00ek9rrHrG+/pW2bVSt+t0uvKHQpX1CNdMrDePv18DsMeC7IOB00t8ZIn4mi7w==",
-      "dev": true,
-      "license": "AGPL-3.0",
-      "dependencies": {
-        "@edx/browserslist-config": "^1.1.1",
-        "@reduxjs/toolkit": "^1.5.1",
-        "@testing-library/dom": "^10.4.0",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.2.0",
-        "classnames": "^2.2.6",
-        "core-js": "3.6.5",
-        "lodash": "^4.17.21",
-        "react-dev-utils": "^12.0.1",
-        "react-test-renderer": "^18.3.1"
-      },
-      "peerDependencies": {
-        "@edx/frontend-platform": "^8.3.1",
-        "@openedx/frontend-build": "^14.3.0",
-        "@openedx/paragon": "^22.0.0 || ^23.0.0",
-        "react": "^18.0.0"
-      }
-    },
-    "node_modules/@edx/react-unit-test-utils/node_modules/core-js": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
-      "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
-    "node_modules/@edx/reactifex": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/reactifex/-/reactifex-2.2.0.tgz",
-      "integrity": "sha512-vyGDtx3BwCr6Gjbm4y6gJ8Bzc2TOSNBlBa2hMerz59HoXaot14MihxxiDU+JDNybGLLcKDBiK511bOi/77i1lw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "axios": "^0.21.1",
-        "yargs": "^17.1.1"
-      },
-      "bin": {
-        "edx_reactifex": "main.js"
-      }
-    },
-    "node_modules/@edx/reactifex/node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.14.0"
-      }
-    },
     "node_modules/@edx/typescript-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.1.0.tgz",
@@ -2542,20 +2686,20 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.0.tgz",
-      "integrity": "sha512-H+N/FqT07NmLmt6OFFtDfwe8PNygprzBikrEMyQfgqSmT0vzE515Pz7R8izwB9q/zsH/MA64AKoul3sA6/CzVg==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
+      "integrity": "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/wasi-threads": "1.0.1",
+        "@emnapi/wasi-threads": "1.0.2",
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz",
-      "integrity": "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2563,9 +2707,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.1.tgz",
-      "integrity": "sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.2.tgz",
+      "integrity": "sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2573,9 +2717,9 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
-      "integrity": "sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.6.1.tgz",
+      "integrity": "sha512-KTsJMmobmbrFLe3LDh0PC2FXpcSYJt/MLjlkh/9LEnmKYLSYmT/0EW9JWANjeoemiuZrmogti0tW5Ch+qNUYDw==",
       "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
@@ -2689,9 +2833,9 @@
       }
     },
     "node_modules/@formatjs/cli": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-6.6.3.tgz",
-      "integrity": "sha512-vW9EQdHmxQg/+s9K39ZwKcIyyhmEMHOtsv1KyQFtjv+pbE3XmiB5ohoo4wAx3HDsrufrTsplGnQdQ+KB2wY/bA==",
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-6.6.4.tgz",
+      "integrity": "sha512-VSDPsT7AO/mtth1rEBwl97Us5dMgqZpI8v7QJXakB4f90pDJsqHBdBeTbjHYrlFr2WvBLVo3/6mGPw9DeX7PUg==",
       "license": "MIT",
       "bin": {
         "formatjs": "bin/formatjs"
@@ -3156,6 +3300,520 @@
       "deprecated": "Use @eslint/object-schema instead",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",
+      "integrity": "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.3.tgz",
+      "integrity": "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.0.tgz",
+      "integrity": "sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.0.tgz",
+      "integrity": "sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.0.tgz",
+      "integrity": "sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.0.tgz",
+      "integrity": "sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.0.tgz",
+      "integrity": "sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.0.tgz",
+      "integrity": "sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.0.tgz",
+      "integrity": "sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
+      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
+      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz",
+      "integrity": "sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.3.tgz",
+      "integrity": "sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.3.tgz",
+      "integrity": "sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.3.tgz",
+      "integrity": "sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.3.tgz",
+      "integrity": "sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
+      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
+      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.3.tgz",
+      "integrity": "sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.4.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
+      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.3.tgz",
+      "integrity": "sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz",
+      "integrity": "sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -3631,6 +4289,60 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jsonjoy.com/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/json-pack": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.2.0.tgz",
+      "integrity": "sha512-io1zEbbYcElht3tdlqEOFxZ0dMTYrHz9iMf0gqn1pPjZFTCgM5R4R5IMA20Chb2UPYYsxjzs8CgZ7Nb5n2K2rA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/base64": "^1.1.1",
+        "@jsonjoy.com/util": "^1.1.2",
+        "hyperdyperid": "^1.2.0",
+        "thingies": "^1.20.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/util": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.5.0.tgz",
+      "integrity": "sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -3715,9 +4427,9 @@
       }
     },
     "node_modules/@napi-rs/wasm-runtime": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.8.tgz",
-      "integrity": "sha512-OBlgKdX7gin7OIq4fadsjpg+cp2ZphvAIKucHsNfTdJiqdOmOEwQd/bHi0VwNrcw5xpBJyUw6cK/QilCqy1BSg==",
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.9.tgz",
+      "integrity": "sha512-OKRBiajrrxB9ATokgEQoG87Z25c67pCpYcCwmXYX8PBftC9pBfN18gnm/fh1wurSLEKIAt+QRFLFCQISrb66Jg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -3727,9 +4439,9 @@
       }
     },
     "node_modules/@newrelic/publish-sourcemap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/@newrelic/publish-sourcemap/-/publish-sourcemap-5.1.3.tgz",
-      "integrity": "sha512-CuHiYXRVU4kDJ4D0nZYVRlRKb8V+s8MFpIyA2D5UBNCOntf/8jv+rxJR1wJ8WYkTio7f+uBKXn/K4GzrhWvKUw==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@newrelic/publish-sourcemap/-/publish-sourcemap-5.1.4.tgz",
+      "integrity": "sha512-35Nm26FxnVi7Nrfrl7nMHObIrHlkCStIPul/fQnru7RBlZIZiYKeGA9eEKBuho1ccoFK783w12nuntSV6wohlg==",
       "license": "New Relic proprietary",
       "dependencies": {
         "superagent": "^10.1.0",
@@ -3812,6 +4524,18 @@
         "eslint-scope": "5.1.1"
       }
     },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3848,9 +4572,9 @@
       }
     },
     "node_modules/@openedx/frontend-build": {
-      "version": "14.4.2",
-      "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-14.4.2.tgz",
-      "integrity": "sha512-RWAsaYq88cGlqO4eDDo/ylY6dJsbeBsI+4LxmKPrW4MPh0rIFZILvH+X3z/t9SVTlGTx4UkUQV9LXPGLKdcA1g==",
+      "version": "14.6.2",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-14.6.2.tgz",
+      "integrity": "sha512-Iu4/GPq90Xr/MSWnonn2qX8VDhI89HN7KOYBZ0/sxmAQgvXXNc7OYNC7kumvzbYzKueJQTyZoUYS7UjKB/n1WA==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@babel/cli": "7.24.8",
@@ -3896,7 +4620,7 @@
         "file-loader": "6.2.0",
         "html-webpack-plugin": "5.6.3",
         "identity-obj-proxy": "3.0.0",
-        "image-minimizer-webpack-plugin": "3.8.3",
+        "image-minimizer-webpack-plugin": "4.1.4",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "mini-css-extract-plugin": "1.6.2",
@@ -3904,13 +4628,13 @@
         "postcss": "8.4.49",
         "postcss-custom-media": "10.0.8",
         "postcss-loader": "7.3.4",
-        "postcss-rtlcss": "5.1.2",
+        "postcss-rtlcss": "5.7.1",
         "react-dev-utils": "12.0.1",
         "react-refresh": "0.16.0",
         "resolve-url-loader": "5.0.0",
         "sass": "1.85.1",
         "sass-loader": "13.3.3",
-        "sharp": "0.32.6",
+        "sharp": "0.34.3",
         "source-map-loader": "4.0.2",
         "style-loader": "3.3.4",
         "ts-jest": "29.1.4",
@@ -4068,9 +4792,9 @@
       }
     },
     "node_modules/@openedx/paragon": {
-      "version": "22.17.0",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.17.0.tgz",
-      "integrity": "sha512-MzOLQ0myaOErwumPJwxVZXTw7zJKrARtu4YMSaISF5Sz6pE1/dYz9qfRcqaraYRcJGNdbPRzOG0v3iqbZo1uHQ==",
+      "version": "23.4.5",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-23.4.5.tgz",
+      "integrity": "sha512-baBTZDO6hdCjI+Jj3oSQaz5GkFTR2TEs94pPMOls7bc/Fsv4zQIN8xDPo4NzAVo/2+3eSuEzUz3xzBeb+94rtw==",
       "license": "Apache-2.0",
       "workspaces": [
         "example",
@@ -4080,20 +4804,32 @@
         "dependent-usage-analyzer"
       ],
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.1.1",
-        "@fortawesome/react-fontawesome": "^0.1.18",
         "@popperjs/core": "^2.11.4",
+        "@tokens-studio/sd-transforms": "^1.2.4",
+        "axios": "^0.27.2",
         "bootstrap": "^4.6.2",
         "chalk": "^4.1.2",
         "child_process": "^1.0.2",
+        "chroma-js": "^2.4.2",
         "classnames": "^2.3.1",
+        "cli-progress": "^3.12.0",
+        "commander": "^9.4.1",
         "email-prop-type": "^3.0.0",
         "file-selector": "^0.6.0",
-        "font-awesome": "^4.7.0",
         "glob": "^8.0.3",
         "inquirer": "^8.2.5",
+        "js-toml": "^1.0.0",
         "lodash.uniqby": "^4.7.0",
+        "log-update": "^4.0.0",
         "mailto-link": "^2.0.0",
+        "minimist": "^1.2.8",
+        "ora": "^5.4.1",
+        "postcss": "^8.4.21",
+        "postcss-combine-duplicated-selectors": "^10.0.3",
+        "postcss-custom-media": "^9.1.2",
+        "postcss-import": "^15.1.0",
+        "postcss-map": "^0.11.0",
+        "postcss-minify": "^1.1.0",
         "prop-types": "^15.8.1",
         "react-bootstrap": "^1.6.5",
         "react-colorful": "^5.6.1",
@@ -4106,6 +4842,8 @@
         "react-responsive": "^8.2.0",
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
+        "sass": "^1.58.3",
+        "style-dictionary": "^4.3.2",
         "tabbable": "^5.3.3",
         "uncontrollable": "^7.2.1",
         "uuid": "^9.0.0"
@@ -4119,38 +4857,14 @@
         "react-intl": "^5.25.1 || ^6.4.0"
       }
     },
-    "node_modules/@openedx/paragon/node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
-      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@openedx/paragon/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
-      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+    "node_modules/@openedx/paragon/node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
       "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.7.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "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": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-        "react": ">=16.x"
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
       }
     },
     "node_modules/@openedx/paragon/node_modules/brace-expansion": {
@@ -4162,6 +4876,15 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/@openedx/paragon/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
     "node_modules/@openedx/paragon/node_modules/glob": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
@@ -4194,6 +4917,43 @@
         "node": ">=10"
       }
     },
+    "node_modules/@openedx/paragon/node_modules/postcss-custom-media": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz",
+      "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.2",
+        "@csstools/css-parser-algorithms": "^2.2.0",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/media-query-list-parser": "^2.1.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@paralleldrive/cuid2": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.2.2.tgz",
+      "integrity": "sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/hashes": "^1.1.5"
+      }
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
@@ -4503,6 +5263,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz",
@@ -4552,9 +5322,9 @@
       }
     },
     "node_modules/@polka/url": {
-      "version": "1.0.0-next.28",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
-      "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
       "license": "MIT"
     },
     "node_modules/@popperjs/core": {
@@ -4934,6 +5704,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
       "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -5031,6 +5802,32 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tokens-studio/sd-transforms": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-1.3.0.tgz",
+      "integrity": "sha512-zVbiYjTGWpSuwzZwiuvcWf79CQEcTMKSxrOaQJ0zHXFxEmrpETWeIRxv2IO8rtMos/cS8mvnDwPngoHQOMs1SA==",
+      "license": "MIT",
+      "dependencies": {
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
+        "@tokens-studio/types": "^0.5.1",
+        "colorjs.io": "^0.5.2",
+        "expr-eval-fork": "^2.0.2",
+        "is-mergeable-object": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "style-dictionary": "^4.3.0 || ^5.0.0-rc.0"
+      }
+    },
+    "node_modules/@tokens-studio/types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.2.tgz",
+      "integrity": "sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==",
+      "license": "MIT"
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -5063,7 +5860,8 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -5385,9 +6183,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.14.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
-      "integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==",
+      "version": "22.15.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.2.tgz",
+      "integrity": "sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -5799,9 +6597,9 @@
       }
     },
     "node_modules/@unrs/resolver-binding-darwin-arm64": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.4.1.tgz",
-      "integrity": "sha512-8Tv+Bsd0BjGwfEedIyor4inw8atppRxM5BdUnIt+3mAm/QXUm7Dw74CHnXpfZKXkp07EXJGiA8hStqCINAWhdw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.7.2.tgz",
+      "integrity": "sha512-vxtBno4xvowwNmO/ASL0Y45TpHqmNkAaDtz4Jqb+clmcVSSl8XCG/PNFFkGsXXXS6AMjP+ja/TtNCFFa1QwLRg==",
       "cpu": [
         "arm64"
       ],
@@ -5812,9 +6610,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-darwin-x64": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.4.1.tgz",
-      "integrity": "sha512-X8c3PhWziEMKAzZz+YAYWfwawi5AEgzy/hmfizAB4C70gMHLKmInJcp1270yYAOs7z07YVFI220pp50z24Jk3A==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.7.2.tgz",
+      "integrity": "sha512-qhVa8ozu92C23Hsmv0BF4+5Dyyd5STT1FolV4whNgbY6mj3kA0qsrGPe35zNR3wAN7eFict3s4Rc2dDTPBTuFQ==",
       "cpu": [
         "x64"
       ],
@@ -5825,9 +6623,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-freebsd-x64": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.4.1.tgz",
-      "integrity": "sha512-UUr/nREy1UdtxXQnmLaaTXFGOcGxPwNIzeJdb3KXai3TKtC1UgNOB9s8KOA4TaxOUBR/qVgL5BvBwmUjD5yuVA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.7.2.tgz",
+      "integrity": "sha512-zKKdm2uMXqLFX6Ac7K5ElnnG5VIXbDlFWzg4WJ8CGUedJryM5A3cTgHuGMw1+P5ziV8CRhnSEgOnurTI4vpHpg==",
       "cpu": [
         "x64"
       ],
@@ -5838,9 +6636,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.4.1.tgz",
-      "integrity": "sha512-e3pII53dEeS8inkX6A1ad2UXE0nuoWCqik4kOxaDnls0uJUq0ntdj5d9IYd+bv5TDwf9DSge/xPOvCmRYH+Tsw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.7.2.tgz",
+      "integrity": "sha512-8N1z1TbPnHH+iDS/42GJ0bMPLiGK+cUqOhNbMKtWJ4oFGzqSJk/zoXFzcQkgtI63qMcUI7wW1tq2usZQSb2jxw==",
       "cpu": [
         "arm"
       ],
@@ -5851,9 +6649,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.4.1.tgz",
-      "integrity": "sha512-e/AKKd9gR+HNmVyDEPI/PIz2t0DrA3cyonHNhHVjrkxe8pMCiYiqhtn1+h+yIpHUtUlM6Y1FNIdivFa+r7wrEQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.7.2.tgz",
+      "integrity": "sha512-tjYzI9LcAXR9MYd9rO45m1s0B/6bJNuZ6jeOxo1pq1K6OBuRMMmfyvJYval3s9FPPGmrldYA3mi4gWDlWuTFGA==",
       "cpu": [
         "arm"
       ],
@@ -5864,9 +6662,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.4.1.tgz",
-      "integrity": "sha512-vtIu34luF1jRktlHtiwm2mjuE8oJCsFiFr8hT5+tFQdqFKjPhbJXn83LswKsOhy0GxAEevpXDI4xxEwkjuXIPA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.7.2.tgz",
+      "integrity": "sha512-jon9M7DKRLGZ9VYSkFMflvNqu9hDtOCEnO2QAryFWgT6o6AXU8du56V7YqnaLKr6rAbZBWYsYpikF226v423QA==",
       "cpu": [
         "arm64"
       ],
@@ -5877,9 +6675,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.4.1.tgz",
-      "integrity": "sha512-H3PaOuGyhFXiyJd+09uPhGl4gocmhyi1BRzvsP8Lv5AQO3p3/ZY7WjV4t2NkBksm9tMjf3YbOVHyPWi2eWsNYw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.7.2.tgz",
+      "integrity": "sha512-c8Cg4/h+kQ63pL43wBNaVMmOjXI/X62wQmru51qjfTvI7kmCy5uHTJvK/9LrF0G8Jdx8r34d019P1DVJmhXQpA==",
       "cpu": [
         "arm64"
       ],
@@ -5890,9 +6688,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.4.1.tgz",
-      "integrity": "sha512-4+GmJcaaFntCi1S01YByqp8wLMjV/FyQyHVGm0vedIhL1Vfx7uHkz/sZmKsidRwokBGuxi92GFmSzqT2O8KcNA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.7.2.tgz",
+      "integrity": "sha512-A+lcwRFyrjeJmv3JJvhz5NbcCkLQL6Mk16kHTNm6/aGNc4FwPHPE4DR9DwuCvCnVHvF5IAd9U4VIs/VvVir5lg==",
       "cpu": [
         "ppc64"
       ],
@@ -5902,10 +6700,36 @@
         "linux"
       ]
     },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.7.2.tgz",
+      "integrity": "sha512-hQQ4TJQrSQW8JlPm7tRpXN8OCNP9ez7PajJNjRD1ZTHQAy685OYqPrKjfaMw/8LiHCt8AZ74rfUVHP9vn0N69Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.7.2.tgz",
+      "integrity": "sha512-NoAGbiqrxtY8kVooZ24i70CjLDlUFI7nDj3I9y54U94p+3kPxwd2L692YsdLa+cqQ0VoqMWoehDFp21PKRUoIQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.4.1.tgz",
-      "integrity": "sha512-6RDQVCmtFYTlhy89D5ixTqo9bTQqFhvNN0Ey1wJs5r+01Dq15gPHRXv2jF2bQATtMrOfYwv+R2ZR9ew1N1N3YQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.7.2.tgz",
+      "integrity": "sha512-KaZByo8xuQZbUhhreBTW+yUnOIHUsv04P8lKjQ5otiGoSJ17ISGYArc+4vKdLEpGaLbemGzr4ZeUbYQQsLWFjA==",
       "cpu": [
         "s390x"
       ],
@@ -5916,9 +6740,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.4.1.tgz",
-      "integrity": "sha512-XpU9uzIkD86+19NjCXxlVPISMUrVXsXo5htxtuG+uJ59p5JauSRZsIxQxzzfKzkxEjdvANPM/lS1HFoX6A6QeA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.7.2.tgz",
+      "integrity": "sha512-dEidzJDubxxhUCBJ/SHSMJD/9q7JkyfBMT77Px1npl4xpg9t0POLvnWywSk66BgZS/b2Hy9Y1yFaoMTFJUe9yg==",
       "cpu": [
         "x64"
       ],
@@ -5929,9 +6753,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-linux-x64-musl": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.4.1.tgz",
-      "integrity": "sha512-3CDjG/spbTKCSHl66QP2ekHSD+H34i7utuDIM5gzoNBcZ1gTO0Op09Wx5cikXnhORRf9+HyDWzm37vU1PLSM1A==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.7.2.tgz",
+      "integrity": "sha512-RvP+Ux3wDjmnZDT4XWFfNBRVG0fMsc+yVzNFUqOflnDfZ9OYujv6nkh+GOr+watwrW4wdp6ASfG/e7bkDradsw==",
       "cpu": [
         "x64"
       ],
@@ -5942,25 +6766,25 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-wasm32-wasi": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.4.1.tgz",
-      "integrity": "sha512-50tYhvbCTnuzMn7vmP8IV2UKF7ITo1oihygEYq9wW2DUb/Y+QMqBHJUSCABRngATjZ4shOK6f2+s0gQX6ElENQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.7.2.tgz",
+      "integrity": "sha512-y797JBmO9IsvXVRCKDXOxjyAE4+CcZpla2GSoBQ33TVb3ILXuFnMrbR/QQZoauBYeOFuu4w3ifWLw52sdHGz6g==",
       "cpu": [
         "wasm32"
       ],
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^0.2.8"
+        "@napi-rs/wasm-runtime": "^0.2.9"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.4.1.tgz",
-      "integrity": "sha512-KyJiIne/AqV4IW0wyQO34wSMuJwy3VxVQOfIXIPyQ/Up6y/zi2P/WwXb78gHsLiGRUqCA9LOoCX+6dQZde0g1g==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.7.2.tgz",
+      "integrity": "sha512-gtYTh4/VREVSLA+gHrfbWxaMO/00y+34htY7XpioBTy56YN2eBjkPrY1ML1Zys89X3RJDKVaogzwxlM1qU7egg==",
       "cpu": [
         "arm64"
       ],
@@ -5971,9 +6795,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.4.1.tgz",
-      "integrity": "sha512-y2NUD7pygrBolN2NoXUrwVqBpKPhF8DiSNE5oB5/iFO49r2DpoYqdj5HPb3F42fPBH5qNqj6Zg63+xCEzAD2hw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.7.2.tgz",
+      "integrity": "sha512-Ywv20XHvHTDRQs12jd3MY8X5C8KLjDbg/jyaal/QLKx3fAShhJyD4blEANInsjxW3P7isHx1Blt56iUDDJO3jg==",
       "cpu": [
         "ia32"
       ],
@@ -5984,9 +6808,9 @@
       ]
     },
     "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.4.1.tgz",
-      "integrity": "sha512-hVXaObGI2lGFmrtT77KSbPQ3I+zk9IU500wobjk0+oX59vg/0VqAzABNtt3YSQYgXTC2a/LYxekLfND/wlt0yQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.7.2.tgz",
+      "integrity": "sha512-friS8NEQfHaDbkThxopGk+LuE5v3iY0StruifjQEt7SLbA46OnfgMO15sOTkbpJkol6RB+1l1TYPXh0sCddpvA==",
       "cpu": [
         "x64"
       ],
@@ -6198,6 +7022,12 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "license": "Apache-2.0"
     },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/@zip.js/zip.js": {
       "version": "2.7.60",
       "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.60.tgz",
@@ -6678,6 +7508,19 @@
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
       "license": "MIT"
     },
+    "node_modules/assert": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-nan": "^1.3.2",
+        "object-is": "^1.1.5",
+        "object.assign": "^4.1.4",
+        "util": "^0.12.5"
+      }
+    },
     "node_modules/assert-ok": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-ok/-/assert-ok-1.0.0.tgz",
@@ -6690,6 +7533,15 @@
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
       "license": "ISC"
     },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -6823,12 +7675,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/b4a": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
-      "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -7102,78 +7948,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
-    "node_modules/bare-events": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz",
-      "integrity": "sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==",
-      "license": "Apache-2.0",
-      "optional": true
-    },
-    "node_modules/bare-fs": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.1.2.tgz",
-      "integrity": "sha512-8wSeOia5B7LwD4+h465y73KOdj5QHsbbuoUfPBi+pXgFJIPuG7SsiOdJuijWMyfid49eD+WivpfY7KT8gbAzBA==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "dependencies": {
-        "bare-events": "^2.5.4",
-        "bare-path": "^3.0.0",
-        "bare-stream": "^2.6.4"
-      },
-      "engines": {
-        "bare": ">=1.16.0"
-      },
-      "peerDependencies": {
-        "bare-buffer": "*"
-      },
-      "peerDependenciesMeta": {
-        "bare-buffer": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/bare-os": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.1.tgz",
-      "integrity": "sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "engines": {
-        "bare": ">=1.14.0"
-      }
-    },
-    "node_modules/bare-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz",
-      "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "dependencies": {
-        "bare-os": "^3.0.1"
-      }
-    },
-    "node_modules/bare-stream": {
-      "version": "2.6.5",
-      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.5.tgz",
-      "integrity": "sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "dependencies": {
-        "streamx": "^2.21.0"
-      },
-      "peerDependencies": {
-        "bare-buffer": "*",
-        "bare-events": "*"
-      },
-      "peerDependenciesMeta": {
-        "bare-buffer": {
-          "optional": true
-        },
-        "bare-events": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -7518,9 +8292,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001712",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001712.tgz",
-      "integrity": "sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==",
+      "version": "1.0.30001715",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001715.tgz",
+      "integrity": "sha512-7ptkFGMm2OAOgvZpwgA4yjQ5SQbrNVGdRjzH0pBdy1Fasvcr+KAeECmbCAECzTuDuoX0FCY8KzUxjf9+9kfZEw==",
       "funding": [
         {
           "type": "opencollective",
@@ -7584,6 +8358,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/change-case": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
+      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
+      "license": "MIT"
+    },
     "node_modules/char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -7599,6 +8379,20 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "license": "MIT"
     },
+    "node_modules/chevrotain": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
+      "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "11.0.3",
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/regexp-to-ast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "@chevrotain/utils": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
     "node_modules/child_process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -7639,6 +8433,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz",
+      "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==",
+      "license": "(BSD-3-Clause AND Apache-2.0)"
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -7723,6 +8523,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cli-spinners": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
@@ -7886,6 +8698,12 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "license": "MIT"
     },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -7914,10 +8732,13 @@
       "license": "ISC"
     },
     "node_modules/component-emitter": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
-      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz",
+      "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==",
       "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
@@ -8614,15 +9435,6 @@
       "integrity": "sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug==",
       "license": "MIT"
     },
-    "node_modules/deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -8805,9 +9617,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -8931,7 +9743,8 @@
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dom-converter": {
       "version": "0.2.0",
@@ -9098,6 +9911,12 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "license": "MIT"
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -9120,9 +9939,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.134",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.134.tgz",
-      "integrity": "sha512-zSwzrLg3jNP3bwsLqWHmS5z2nIOQ5ngMnfMZOWWtXnqqQkPVyOipxK98w+1beLw1TB+EImPNcG8wVP/cLVs2Og==",
+      "version": "1.5.143",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.143.tgz",
+      "integrity": "sha512-QqklJMOFBMqe46k8iIOwA9l2hz57V2OKMmP5eSWcUvwx+mASAsbU+wkF1pHjn9ZVSBPrsYWr4/W/95y5SwYg2g==",
       "license": "ISC"
     },
     "node_modules/email-prop-type": {
@@ -9160,6 +9979,15 @@
       "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-2.0.1.tgz",
+      "integrity": "sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -9178,15 +10006,6 @@
         "node": ">= 0.8"
       }
     },
-    "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==",
-      "license": "MIT",
-      "dependencies": {
-        "once": "^1.4.0"
-      }
-    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -9353,9 +10172,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
-      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
       "license": "MIT"
     },
     "node_modules/es-object-atoms": {
@@ -9605,17 +10424,17 @@
       }
     },
     "node_modules/eslint-import-resolver-typescript": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-4.3.2.tgz",
-      "integrity": "sha512-T2LqBXj87ndEC9t1LrDiPkzalSFzD4rrXr6BTzGdgMx1jdQM4T972guQvg7Ih+LNO51GURXI/qMHS5GF3h1ilw==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-4.3.4.tgz",
+      "integrity": "sha512-buzw5z5VtiQMysYLH9iW9BV04YyZebsw+gPi+c4FCjfS9i6COYOrEWw9t3m3wA9PFBfqcBCqWf32qrXLbwafDw==",
       "license": "ISC",
       "dependencies": {
         "debug": "^4.4.0",
         "get-tsconfig": "^4.10.0",
         "is-bun-module": "^2.0.0",
         "stable-hash": "^0.0.5",
-        "tinyglobby": "^0.2.12",
-        "unrs-resolver": "^1.4.1"
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.3"
       },
       "engines": {
         "node": "^16.17.0 || >=18.6.0"
@@ -10383,15 +11202,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/expand-template": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
-      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
-      "license": "(MIT OR WTFPL)",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/expect": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
@@ -10408,6 +11218,12 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/expr-eval-fork": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz",
+      "integrity": "sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ==",
+      "license": "MIT"
+    },
     "node_modules/express": {
       "version": "4.21.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
@@ -10495,12 +11311,6 @@
       "integrity": "sha512-lEJeOH5VL5R09j6AA0D4Uvq7AgsHw0dAImQQ+F3iSyHZuAxyQfWobsagGpTcOPvJr3urmKRHrs+Gs9hV+/Qm/Q==",
       "license": "MIT"
     },
-    "node_modules/fast-fifo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
-      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
-      "license": "MIT"
-    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -10845,6 +11655,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "node_modules/flat": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
@@ -10946,6 +11765,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
@@ -11040,6 +11887,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
@@ -11062,15 +11918,18 @@
       "license": "MIT"
     },
     "node_modules/formidable": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.2.tgz",
-      "integrity": "sha512-Jqc1btCy3QzRbJaICGwKcBfGWuLADRerLzDqi2NwSt/UkXLsHJw2TVResiaoBufHVHy9aSgClOHCeJsSsFLTbg==",
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.4.tgz",
+      "integrity": "sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==",
       "license": "MIT",
       "dependencies": {
+        "@paralleldrive/cuid2": "^2.2.2",
         "dezalgo": "^1.0.4",
-        "hexoid": "^2.0.0",
         "once": "^1.4.0"
       },
+      "engines": {
+        "node": ">=14.0.0"
+      },
       "funding": {
         "url": "https://ko-fi.com/tunnckoCore/commissions"
       }
@@ -11106,12 +11965,6 @@
         "node": ">= 0.6"
       }
     },
-    "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==",
-      "license": "MIT"
-    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -11366,12 +12219,6 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
-    "node_modules/github-from-package": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
-      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
-      "license": "MIT"
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -11666,15 +12513,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/hexoid": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-2.0.0.tgz",
-      "integrity": "sha512-qlspKUK7IlSQv2o+5I7yhUd7TxlOG2Vr5LTa3ve2XSNVKAL/n/u/7KLvKmFNimomDIKvZFXWHv0T12mv7rT8Aw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/history": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
@@ -11956,9 +12794,9 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
-      "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
+      "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
       "license": "MIT",
       "dependencies": {
         "@types/http-proxy": "^1.17.8",
@@ -11979,6 +12817,18 @@
         }
       }
     },
+    "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -12001,6 +12851,15 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyperdyperid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.18"
+      }
+    },
     "node_modules/hyphenate-style-name": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
@@ -12085,16 +12944,16 @@
       }
     },
     "node_modules/image-minimizer-webpack-plugin": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-3.8.3.tgz",
-      "integrity": "sha512-Ex0cjNJc2FUSuwN7WHNyxkIZINP0M9lrN+uWJznMcsehiM5Z7ELwk+SEkSGEookK1GUd2wf+09jy1PEH5a5XmQ==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-4.1.4.tgz",
+      "integrity": "sha512-A2DLYuCyu7icbGdv8OMGFQKPXvsztWAueBkT3yQ7KVW1YGnAJKtgLYELkN7/aUday05DzEdKRaLE5Bnh/9S2UQ==",
       "license": "MIT",
       "dependencies": {
         "schema-utils": "^4.2.0",
-        "serialize-javascript": "^6.0.1"
+        "serialize-javascript": "^6.0.2"
       },
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">= 18.12.0"
       },
       "funding": {
         "type": "opencollective",
@@ -12721,6 +13580,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-mergeable-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz",
+      "integrity": "sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==",
+      "license": "MIT"
+    },
+    "node_modules/is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -12789,12 +13670,12 @@
       }
     },
     "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==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
       "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -13158,6 +14039,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -14120,6 +15016,16 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-toml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/js-toml/-/js-toml-1.0.1.tgz",
+      "integrity": "sha512-rHd/IolpFm2V5BmHCEY8CckHs8NDsYZZ64H5RNgA6Opsr9vX4QyTiQPplgtqg7b3ztqYShZC38nl6CUg7QuhXg==",
+      "license": "MIT",
+      "dependencies": {
+        "chevrotain": "^11.0.3",
+        "xregexp": "^5.1.1"
+      }
+    },
     "node_modules/js-yaml": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
@@ -14234,13 +15140,13 @@
       "license": "MIT"
     },
     "node_modules/json-stable-stringify": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.2.1.tgz",
-      "integrity": "sha512-Lp6HbbBgosLmJbjx0pBLbgvx68FaFU1sdkmBuckmhhJ88kL13OA51CDtR2yJB50eCNMH9wRqtQNNiAqQH4YXnA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
+      "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
+        "call-bound": "^1.0.4",
         "isarray": "^2.0.5",
         "jsonify": "^0.0.1",
         "object-keys": "^1.1.1"
@@ -14330,6 +15236,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.11"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -14471,6 +15386,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -14551,6 +15472,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/log-update": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^4.3.0",
+        "cli-cursor": "^3.1.0",
+        "slice-ansi": "^4.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -14586,6 +15525,7 @@
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -14931,7 +15871,6 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
       "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
       "license": "ISC",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -14983,12 +15922,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/mkdirp-classic": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
-      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-      "license": "MIT"
-    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -15057,11 +15990,20 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/napi-build-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
-      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
-      "license": "MIT"
+    "node_modules/napi-postinstall": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.2.2.tgz",
+      "integrity": "sha512-Wy1VI/hpKHwy1MsnFxHCJxqFwmmxD0RA/EKPL7e6mfbsY01phM2SZyJnRdU0bLvhu0Quby1DCcAZti3ghdl4/A==",
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
     },
     "node_modules/natural-compare": {
       "version": "1.4.0",
@@ -15100,30 +16042,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/node-abi": {
-      "version": "3.74.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.74.0.tgz",
-      "integrity": "sha512-c5XK0MjkGBrQPGYG24GBADZud0NCbznxNx0ZkS+ebUTrmV1qTDxPxSL8zEAPURXSbLRWVexxmP4986BziahL5w==",
-      "license": "MIT",
-      "dependencies": {
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/node-abi/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -15309,6 +16227,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -15636,6 +16570,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -15707,6 +16647,74 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/patch-package": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
+      "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^9.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "rimraf": "^2.6.3",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.0.33",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/patch-package/node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/patch-package/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -15746,6 +16754,28 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
@@ -15761,6 +16791,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-unified": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.2.0.tgz",
+      "integrity": "sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==",
+      "license": "MIT"
+    },
+    "node_modules/path/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "license": "ISC"
+    },
+    "node_modules/path/node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
     "node_modules/path2d-polyfill": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
@@ -16076,6 +17127,24 @@
         "postcss": "^8.2.2"
       }
     },
+    "node_modules/postcss-calc-ast-parser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz",
+      "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^3.3.1"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/postcss-calc-ast-parser/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "license": "MIT"
+    },
     "node_modules/postcss-colormin": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.1.0.tgz",
@@ -16094,6 +17163,21 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-combine-duplicated-selectors": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz",
+      "integrity": "sha512-IP0BmwFloCskv7DV7xqvzDXqMHpwdczJa6ZvIW8abgHdcIHs9mCJX2ltFhu3EwA51ozp13DByng30+Ke+eIExA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-convert-values": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.1.0.tgz",
@@ -16186,6 +17270,23 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
@@ -16220,6 +17321,52 @@
         "node": ">=10"
       }
     },
+    "node_modules/postcss-map": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/postcss-map/-/postcss-map-0.11.0.tgz",
+      "integrity": "sha512-cgHYZrH9aAMds90upYUPhYz8xnAcRD45SwuNns/nQHONIrPQDhpwk3JLsAQGOndQxnRVXfB6nB+3WqSMy8fqlA==",
+      "license": "Unlicense",
+      "dependencies": {
+        "js-yaml": "^3.12.0",
+        "postcss": "^7.0.2",
+        "reduce-function-call": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-map/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss-map/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-map/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/postcss-merge-longhand": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.5.tgz",
@@ -16254,6 +17401,19 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-minify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify/-/postcss-minify-1.1.0.tgz",
+      "integrity": "sha512-9D64ueIW0DL2FdLajQTlXrnTN8Ox9NjuXqigKMmB819RhdClNPYx5Zp3i5x0ghjjy3vGrLBBYEYvJjY/1eMNbw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0",
+        "postcss-value-parser": "^4.1"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0"
+      }
+    },
     "node_modules/postcss-minify-font-values": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz",
@@ -16584,12 +17744,12 @@
       }
     },
     "node_modules/postcss-rtlcss": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-5.1.2.tgz",
-      "integrity": "sha512-cmcgRoO1wL7IJyVHw0RneWI/5Oe75NLC2NLlQLsNI7hcui+yRcW4RrILfQa4FqKQRLTU4r5eF0YPi1qZpMzQpA==",
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-5.7.1.tgz",
+      "integrity": "sha512-zE68CuARv5StOG/UQLa0W1Y/raUTzgJlfjtas43yh3/G1BFmoPEaHxPRHgeowXRFFhW33FehrNgsljxRLmPVWw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "rtlcss": "4.1.1"
+        "rtlcss": "4.3.0"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -16648,118 +17808,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
-    "node_modules/prebuild-install": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
-      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
-      "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": "^2.0.0",
-        "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": ">=10"
-      }
-    },
-    "node_modules/prebuild-install/node_modules/chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "license": "ISC"
-    },
-    "node_modules/prebuild-install/node_modules/decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "mimic-response": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/prebuild-install/node_modules/mimic-response": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/prebuild-install/node_modules/simple-get": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
-      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
-      "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/prebuild-install/node_modules/tar-fs": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.2.tgz",
-      "integrity": "sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==",
-      "license": "MIT",
-      "dependencies": {
-        "chownr": "^1.1.1",
-        "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",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-      "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": ">=6"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -16769,6 +17817,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-error": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -16784,6 +17847,7 @@
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -16798,6 +17862,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -16805,6 +17870,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -16897,16 +17971,6 @@
       "integrity": "sha512-5MZ0I9i5JWVO7SizvOviKvZU2qaBbl2KQX150FAA+fJBwYpwOUId7aNygURWSdPzlsA/xZ/InUKXqBbzM0czTA==",
       "license": "MIT"
     },
-    "node_modules/pump": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
-      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
-      "license": "MIT",
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -17100,30 +18164,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
-      "dependencies": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "bin": {
-        "rc": "cli.js"
-      }
-    },
-    "node_modules/rc/node_modules/strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -17884,14 +18924,22 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "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,
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
       "license": "MIT",
-      "bin": {
-        "reactifex": "main.js"
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/read-cache/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/readable-stream": {
@@ -17958,6 +19006,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/reduce-function-call": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
+      "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -18366,9 +19423,9 @@
       }
     },
     "node_modules/rtlcss": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.1.tgz",
-      "integrity": "sha512-/oVHgBtnPNcggP2aVXQjSy6N1mMAfHg4GSag0QtZBlD5bdDgAHwr4pydqJGd+SUCu9260+Pjqbjwtvu7EMH1KQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.3.0.tgz",
+      "integrity": "sha512-FI+pHEn7Wc4NqKXMXFM+VAYKEj/mRIcW4h24YVwVtyjI+EqGrLc2Hx/Ny0lrZ21cBWU2goLy36eqMcNj3AQJig==",
       "license": "MIT",
       "dependencies": {
         "escalade": "^3.1.1",
@@ -18609,9 +19666,9 @@
       }
     },
     "node_modules/schema-utils": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
-      "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
+      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
@@ -18917,65 +19974,51 @@
       "license": "MIT"
     },
     "node_modules/sharp": {
-      "version": "0.32.6",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
-      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
+      "integrity": "sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
         "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"
+        "detect-libc": "^2.0.4",
+        "semver": "^7.7.2"
       },
       "engines": {
-        "node": ">=14.15.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/sharp/node_modules/decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "mimic-response": "^3.1.0"
       },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.3",
+        "@img/sharp-darwin-x64": "0.34.3",
+        "@img/sharp-libvips-darwin-arm64": "1.2.0",
+        "@img/sharp-libvips-darwin-x64": "1.2.0",
+        "@img/sharp-libvips-linux-arm": "1.2.0",
+        "@img/sharp-libvips-linux-arm64": "1.2.0",
+        "@img/sharp-libvips-linux-ppc64": "1.2.0",
+        "@img/sharp-libvips-linux-s390x": "1.2.0",
+        "@img/sharp-libvips-linux-x64": "1.2.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.0",
+        "@img/sharp-linux-arm": "0.34.3",
+        "@img/sharp-linux-arm64": "0.34.3",
+        "@img/sharp-linux-ppc64": "0.34.3",
+        "@img/sharp-linux-s390x": "0.34.3",
+        "@img/sharp-linux-x64": "0.34.3",
+        "@img/sharp-linuxmusl-arm64": "0.34.3",
+        "@img/sharp-linuxmusl-x64": "0.34.3",
+        "@img/sharp-wasm32": "0.34.3",
+        "@img/sharp-win32-arm64": "0.34.3",
+        "@img/sharp-win32-ia32": "0.34.3",
+        "@img/sharp-win32-x64": "0.34.3"
       }
     },
-    "node_modules/sharp/node_modules/mimic-response": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/sharp/node_modules/node-addon-api": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
-      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
-      "license": "MIT"
-    },
     "node_modules/sharp/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -18984,31 +20027,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/sharp/node_modules/simple-get": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
-      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
-      "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/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -19138,7 +20156,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/simple-get": {
       "version": "3.1.1",
@@ -19196,6 +20215,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
     "node_modules/snake-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
@@ -19388,17 +20424,13 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/streamx": {
-      "version": "2.22.0",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz",
-      "integrity": "sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==",
+    "node_modules/stream": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz",
+      "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==",
       "license": "MIT",
       "dependencies": {
-        "fast-fifo": "^1.3.2",
-        "text-decoder": "^1.1.0"
-      },
-      "optionalDependencies": {
-        "bare-events": "^2.2.0"
+        "component-emitter": "^2.0.0"
       }
     },
     "node_modules/strict-uri-encode": {
@@ -19446,6 +20478,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -19547,6 +20600,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -19590,6 +20656,55 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-dictionary": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.4.0.tgz",
+      "integrity": "sha512-+xU0IA1StzqAqFs/QtXkK+XJa7wpS4X5H+JQccRKsRCElgeLGocFU1U/UMvMUylKFw6vwGV+Y/a2wb2pm5rFFQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/glob": "^10.4.2",
+        "@bundled-es-modules/memfs": "^4.9.4",
+        "@zip.js/zip.js": "^2.7.44",
+        "chalk": "^5.3.0",
+        "change-case": "^5.3.0",
+        "commander": "^12.1.0",
+        "is-plain-obj": "^4.1.0",
+        "json5": "^2.2.2",
+        "patch-package": "^8.0.0",
+        "path-unified": "^0.2.0",
+        "prettier": "^3.3.3",
+        "tinycolor2": "^1.6.0"
+      },
+      "bin": {
+        "style-dictionary": "bin/style-dictionary.js"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/chalk": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
@@ -19660,6 +20775,15 @@
         "node": ">=14.18.0"
       }
     },
+    "node_modules/superagent/node_modules/component-emitter": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
+      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/superagent/node_modules/mime": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
@@ -19834,31 +20958,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/tar-fs": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz",
-      "integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==",
-      "license": "MIT",
-      "dependencies": {
-        "pump": "^3.0.0",
-        "tar-stream": "^3.1.5"
-      },
-      "optionalDependencies": {
-        "bare-fs": "^4.0.1",
-        "bare-path": "^3.0.0"
-      }
-    },
-    "node_modules/tar-stream": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
-      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
-      "license": "MIT",
-      "dependencies": {
-        "b4a": "^1.6.4",
-        "fast-fifo": "^1.2.0",
-        "streamx": "^2.15.0"
-      }
-    },
     "node_modules/tar/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -19986,21 +21085,24 @@
         "node": ">=8"
       }
     },
-    "node_modules/text-decoder": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
-      "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "b4a": "^1.6.4"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "license": "MIT"
     },
+    "node_modules/thingies": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
+      "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "tslib": "^2"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -20025,13 +21127,19 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
       "license": "MIT"
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
-      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
+      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2"
       },
       "engines": {
@@ -20042,9 +21150,9 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -20149,6 +21257,22 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/tree-dump": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
+      "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
@@ -20162,9 +21286,9 @@
       }
     },
     "node_modules/ts-jest": {
-      "version": "29.3.1",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.3.1.tgz",
-      "integrity": "sha512-FT2PIRtZABwl6+ZCry8IY7JZ3xMuppsEV9qFVHOVe8jDzggwUZ9TsM4chyJxL9yi6LvkqcZYU3LmapEE454zBQ==",
+      "version": "29.3.2",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.3.2.tgz",
+      "integrity": "sha512-bJJkrWc6PjFVz5g2DGCNUo8z7oFEYaz1xP1NpeDU7KNLMWPpEyV8Chbpkn8xjzgRDpQhnGMyvyldoL7h8JXyug==",
       "license": "MIT",
       "dependencies": {
         "bs-logger": "^0.2.6",
@@ -20175,7 +21299,7 @@
         "lodash.memoize": "^4.1.2",
         "make-error": "^1.3.6",
         "semver": "^7.7.1",
-        "type-fest": "^4.38.0",
+        "type-fest": "^4.39.1",
         "yargs-parser": "^21.1.1"
       },
       "bin": {
@@ -20223,9 +21347,9 @@
       }
     },
     "node_modules/ts-jest/node_modules/type-fest": {
-      "version": "4.39.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.39.1.tgz",
-      "integrity": "sha512-uW9qzd66uyHYxwyVBYiwS4Oi0qZyUqwjU+Oevr6ZogYiXt99EOYtwvzMSLw1c3lYo2HzJsep/NB23iEVEgjG/w==",
+      "version": "4.40.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.40.1.tgz",
+      "integrity": "sha512-9YvLNnORDpI+vghLU/Nf+zSv0kL47KbVJ1o3sKgoTefl6i+zebxbiDQWoe/oWWqPhIgQdRZRT1KA9sCPL810SA==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=16"
@@ -20332,18 +21456,6 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "license": "0BSD"
     },
-    "node_modules/tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -20526,20 +21638,14 @@
       }
     },
     "node_modules/unicode-emoji-utils": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-emoji-utils/-/unicode-emoji-utils-1.2.0.tgz",
-      "integrity": "sha512-djUB91p/6oYpgps4W5K/MAvM+UspoAANHSUW495BrxeLRoned3iNPEDQgrKx9LbLq93VhNz0NWvI61vcfrwYoA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/unicode-emoji-utils/-/unicode-emoji-utils-1.3.1.tgz",
+      "integrity": "sha512-6PiQxmnlsOsqzZCZz0sykSyMy/r1HiJiOWWXV98+BDva583DU4CtBeyDNsi4wMYUIbjUtMs4RgAuyft0EKLoVw==",
       "license": "MIT",
       "dependencies": {
-        "emoji-regex": "10.3.0"
+        "emoji-regex-xs": "^2.0.0"
       }
     },
-    "node_modules/unicode-emoji-utils/node_modules/emoji-regex": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
-      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
-      "license": "MIT"
-    },
     "node_modules/unicode-match-property-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
@@ -20609,29 +21715,35 @@
       }
     },
     "node_modules/unrs-resolver": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.4.1.tgz",
-      "integrity": "sha512-MhPB3wBI5BR8TGieTb08XuYlE8oFVEXdSAgat3psdlRyejl8ojQ8iqPcjh094qCZ1r+TnkxzP6BeCd/umfHckQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.7.2.tgz",
+      "integrity": "sha512-BBKpaylOW8KbHsu378Zky/dGh4ckT/4NW/0SHRABdqRLcQJ2dAOjDo9g97p04sWflm0kqPqpUatxReNV/dqI5A==",
+      "hasInstallScript": true,
       "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.2.2"
+      },
       "funding": {
         "url": "https://github.com/sponsors/JounQin"
       },
       "optionalDependencies": {
-        "@unrs/resolver-binding-darwin-arm64": "1.4.1",
-        "@unrs/resolver-binding-darwin-x64": "1.4.1",
-        "@unrs/resolver-binding-freebsd-x64": "1.4.1",
-        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.4.1",
-        "@unrs/resolver-binding-linux-arm-musleabihf": "1.4.1",
-        "@unrs/resolver-binding-linux-arm64-gnu": "1.4.1",
-        "@unrs/resolver-binding-linux-arm64-musl": "1.4.1",
-        "@unrs/resolver-binding-linux-ppc64-gnu": "1.4.1",
-        "@unrs/resolver-binding-linux-s390x-gnu": "1.4.1",
-        "@unrs/resolver-binding-linux-x64-gnu": "1.4.1",
-        "@unrs/resolver-binding-linux-x64-musl": "1.4.1",
-        "@unrs/resolver-binding-wasm32-wasi": "1.4.1",
-        "@unrs/resolver-binding-win32-arm64-msvc": "1.4.1",
-        "@unrs/resolver-binding-win32-ia32-msvc": "1.4.1",
-        "@unrs/resolver-binding-win32-x64-msvc": "1.4.1"
+        "@unrs/resolver-binding-darwin-arm64": "1.7.2",
+        "@unrs/resolver-binding-darwin-x64": "1.7.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.7.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.7.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.7.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.7.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.7.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.7.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.7.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.7.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.7.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.7.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.7.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.7.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.7.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.7.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.7.2"
       }
     },
     "node_modules/update-browserslist-db": {
@@ -20673,6 +21785,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz",
+      "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^1.4.1",
+        "qs": "^6.12.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/url-loader": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
@@ -20728,6 +21853,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/url/node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+      "license": "MIT"
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
@@ -20927,13 +22058,14 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.99.5",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.5.tgz",
-      "integrity": "sha512-q+vHBa6H9qwBLUlHL4Y7L0L1/LlyBKZtS9FHNCQmtayxjI5RKC9yD8gpvLeqGv5lCQp1Re04yi0MF40pf30Pvg==",
+      "version": "5.99.7",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.7.tgz",
+      "integrity": "sha512-CNqKBRMQjwcmKR0idID5va1qlhrqVUKpovi+Ec79ksW8ux7iS1+A6VqzfZXgVYCFRKl7XL5ap3ZoMpwBJxcg0w==",
       "license": "MIT",
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
         "@webassemblyjs/ast": "^1.14.1",
         "@webassemblyjs/wasm-edit": "^1.14.1",
         "@webassemblyjs/wasm-parser": "^1.14.1",
@@ -20950,7 +22082,7 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.0",
+        "schema-utils": "^4.3.2",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.3.11",
         "watchpack": "^2.4.1",
@@ -21470,6 +22602,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -21525,6 +22675,15 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "license": "MIT"
     },
+    "node_modules/xregexp": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-5.1.2.tgz",
+      "integrity": "sha512-6hGgEMCGhqCTFEJbqmWrNIPqfpdirdGWkqshu7fFZddmTSfgv5Sn9D2SaKloR79s5VUiUlpwzg3CM3G6D3VIlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.26.9"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -21541,12 +22700,15 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
+      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
       "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/yargs": {

package.json

@@ -36,7 +36,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/paragon": "^23.4.5",
     "@redux-beacon/segment": "^1.1.0",
     "@redux-devtools/extension": "3.0.0",
     "@reduxjs/toolkit": "^1.6.1",
@@ -76,9 +76,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.3.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
-    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "^14.3.3",
+    "@openedx/frontend-build": "^14.6.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "axios-mock-adapter": "^1.20.0",
@@ -89,7 +87,6 @@
     "jest-expect-message": "^1.0.2",
     "react-dev-utils": "^12.0.1",
     "react-test-renderer": "^18.3.1",
-    "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.5"
   }
 }

src/App.jsx

@@ -9,7 +9,6 @@ import { LearningHeader as Header } from '@edx/frontend-component-header';
 import { selectors } from 'data/redux';
 
 import DemoWarning from 'containers/DemoWarning';
-import NotificationsBanner from 'containers/NotificationsBanner';
 import ListView from 'containers/ListView';
 
 import './App.scss';
@@ -26,7 +25,6 @@ export const App = ({ courseMetadata, isEnabled }) => (
         data-testid="header"
       />
       {!isEnabled && <DemoWarning />}
-      <NotificationsBanner />
       <main data-testid="main">
         <ListView />
       </main>

src/App.scss

@@ -1,13 +1,10 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
 @import "~@edx/frontend-component-footer/dist/_footer";
 @import "~@edx/frontend-component-header/dist/index";
@@ -49,7 +46,22 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
       right: 1rem !important;
     }
   }
+
   .confirm-modal .pgn__modal-body {
     overflow: hidden;
   }
+
+  .pgn__modal-body-content {
+    & img {
+      object-fit: contain;
+      max-width: 100%;
+      height: auto;
+    }
+
+    & blockquote > p {
+      border-left: 2px solid var(--pgn-color-gray-200);
+      margin-left: 1.5rem;
+      padding-left: 1rem;
+    }
+  }
 }

src/App.test.jsx

@@ -1,63 +1,101 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { screen } from '@testing-library/react';
+import { selectors } from 'data/redux';
 
-import { App } from './App';
+import { renderWithIntl } from './testUtils';
+import { App, mapStateToProps } from './App';
+
+// we want to scope these tests to the App component, so we mock some child components to reduce complexity
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+  getLoginRedirectUrl: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-component-footer', () => ({
+  FooterSlot: () => <div data-testid="footer">Footer</div>,
+}));
+
+jest.mock('containers/ListView', () => function ListView() {
+  return <div data-testid="list-view">List View</div>;
+});
+
+jest.mock('containers/DemoWarning', () => function DemoWarning() {
+  return <div role="alert" data-testid="demo-warning">Demo Warning</div>;
+});
+
+jest.mock('@edx/frontend-component-header', () => ({
+  LearningHeader: ({ courseTitle, courseNumber, courseOrg }) => (
+    <div data-testid="header">
+      Header - {courseTitle} {courseNumber} {courseOrg}
+    </div>
+  ),
+}));
 
 jest.mock('data/redux', () => ({
-  app: {
-    selectors: {
-      courseMetadata: (state) => ({ courseMetadata: state }),
-      isEnabled: (state) => ({ isEnabled: state }),
+  selectors: {
+    app: {
+      courseMetadata: jest.fn((state) => state.courseMetadata || {
+        org: 'test-org',
+        number: 'test-101',
+        title: 'Test Course',
+      }),
+      isEnabled: jest.fn((state) => (state.isEnabled !== undefined ? state.isEnabled : true)),
     },
   },
 }));
 
-jest.mock('@edx/frontend-component-header', () => ({
-  LearningHeader: 'Header',
-}));
-jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
-
-jest.mock('containers/DemoWarning', () => 'DemoWarning');
-jest.mock('containers/ListView', () => 'ListView');
-jest.mock('components/Head', () => 'Head');
-
-let el;
-
-describe('App router component', () => {
-  const props = {
+describe('App component', () => {
+  const defaultProps = {
     courseMetadata: {
-      org: 'course-org',
-      number: 'course-number',
-      title: 'course-title',
+      org: 'test-org',
+      number: 'test-101',
+      title: 'Test Course',
     },
     isEnabled: true,
   };
-  test('snapshot: enabled', () => {
-    expect(shallow(<App {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('snapshot: disabled (show demo warning)', () => {
-    expect(shallow(<App {...props} isEnabled={false} />).snapshot).toMatchSnapshot();
-  });
-  describe('component', () => {
-    beforeEach(() => {
-      el = shallow(<App {...props} />);
-    });
-    describe('Router', () => {
-      test('Routing - ListView is only route', () => {
-        expect(el.instance.findByTestId('main')[0].children).toHaveLength(1);
-        expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
-      });
-    });
 
-    test('Header to use courseMetadata props', () => {
-      const {
-        courseTitle,
-        courseNumber,
-        courseOrg,
-      } = el.instance.findByTestId('header')[0].props;
-      expect(courseTitle).toEqual(props.courseMetadata.title);
-      expect(courseNumber).toEqual(props.courseMetadata.number);
-      expect(courseOrg).toEqual(props.courseMetadata.org);
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders header with course metadata', () => {
+    renderWithIntl(<App {...defaultProps} />);
+    const org = screen.getByText((text) => text.includes('test-org'));
+    expect(org).toBeInTheDocument();
+    const title = screen.getByText((content) => content.includes('Test Course'));
+    expect(title).toBeInTheDocument();
+  });
+
+  it('renders main content', () => {
+    renderWithIntl(<App {...defaultProps} />);
+
+    const main = screen.getByTestId('main');
+    expect(main).toBeInTheDocument();
+  });
+
+  it('does not render demo warning when enabled', () => {
+    renderWithIntl(<App {...defaultProps} />);
+
+    const demoWarning = screen.queryByRole('alert');
+    expect(demoWarning).not.toBeInTheDocument();
+  });
+
+  it('renders demo warning when disabled', () => {
+    renderWithIntl(<App {...defaultProps} isEnabled={false} />);
+
+    const demoWarning = screen.getByRole('alert');
+    expect(demoWarning).toBeInTheDocument();
+  });
+
+  describe('mapStateToProps', () => {
+    it('maps state properties correctly', () => {
+      const testState = { arbitraryState: 'some data' };
+      const mapped = mapStateToProps(testState);
+
+      expect(selectors.app.courseMetadata).toHaveBeenCalledWith(testState);
+      expect(selectors.app.isEnabled).toHaveBeenCalledWith(testState);
+      expect(mapped.courseMetadata).toEqual(selectors.app.courseMetadata(testState));
+      expect(mapped.isEnabled).toEqual(selectors.app.isEnabled(testState));
     });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`App router component snapshot: disabled (show demo warning) 1`] = `
-<BrowserRouter>
-  <div>
-    <Head />
-    <Header
-      courseNumber="course-number"
-      courseOrg="course-org"
-      courseTitle="course-title"
-      data-testid="header"
-    />
-    <DemoWarning />
-    <NotificationsBanner />
-    <main
-      data-testid="main"
-    >
-      <ListView />
-    </main>
-    <FooterSlot />
-  </div>
-</BrowserRouter>
-`;
-
-exports[`App router component snapshot: enabled 1`] = `
-<BrowserRouter>
-  <div>
-    <Head />
-    <Header
-      courseNumber="course-number"
-      courseOrg="course-org"
-      courseTitle="course-title"
-      data-testid="header"
-    />
-    <NotificationsBanner />
-    <main
-      data-testid="main"
-    >
-      <ListView />
-    </main>
-    <FooterSlot />
-  </div>
-</BrowserRouter>
-`;

src/__snapshots__/index.test.jsx.snap

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<React Strict Mode>
-  <ErrorPage
-    message="test-error-message"
-  />
-</React Strict Mode>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<React Strict Mode>
-  <AppProvider
-    store={
-      {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(Symbol.observable): [Function],
-      }
-    }
-    wrapWithRouter={false}
-  >
-    <App />
-  </AppProvider>
-</React Strict Mode>
-`;

src/components/ConfirmModal.test.jsx

@@ -1,5 +1,6 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { ConfirmModal } from './ConfirmModal';
 
 describe('ConfirmModal', () => {
@@ -12,10 +13,48 @@ describe('ConfirmModal', () => {
     onCancel: jest.fn().mockName('this.props.onCancel'),
     onConfirm: jest.fn().mockName('this.props.onConfirm'),
   };
-  test('snapshot: closed', () => {
-    expect(shallow(<ConfirmModal {...props} />).snapshot).toMatchSnapshot();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-  test('snapshot: open', () => {
-    expect(shallow(<ConfirmModal {...props} isOpen />).snapshot).toMatchSnapshot();
+
+  it('should not render content when modal is closed', () => {
+    render(
+      <IntlProvider locale="en">
+        <ConfirmModal {...props} />
+      </IntlProvider>,
+    );
+    expect(screen.queryByText(props.content)).toBeNull();
+  });
+
+  it('should display content when modal is open', () => {
+    render(
+      <IntlProvider locale="en">
+        <ConfirmModal {...props} isOpen />
+      </IntlProvider>,
+    );
+    expect(screen.getByText(props.content)).toBeInTheDocument();
+  });
+
+  it('should call onCancel when cancel button is clicked', async () => {
+    render(
+      <IntlProvider locale="en">
+        <ConfirmModal {...props} isOpen />
+      </IntlProvider>,
+    );
+    const user = userEvent.setup();
+    await user.click(screen.getByText(props.cancelText));
+    expect(props.onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onConfirm when confirm button is clicked', async () => {
+    render(
+      <IntlProvider locale="en">
+        <ConfirmModal {...props} isOpen />
+      </IntlProvider>,
+    );
+    const user = userEvent.setup();
+    await user.click(screen.getByText(props.confirmText));
+    expect(props.onConfirm).toHaveBeenCalledTimes(1);
   });
 });

src/components/DemoAlert/__snapshots__/index.test.jsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DemoAlert component snapshot 1`] = `
-<AlertModal
-  footerNode={
-    <ActionRow>
-      <Button
-        onClick={[MockFunction props.onClose]}
-        variant="primary"
-      >
-        Confirm
-      </Button>
-    </ActionRow>
-  }
-  isOpen={true}
-  onClose={[MockFunction props.onClose]}
-  title="Demo submit prevented"
->
-  <p>
-    Grade submission is disabled in the Demo mode of the new ORA Staff Grader.
-  </p>
-</AlertModal>
-`;

src/components/DemoAlert/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   AlertModal,
@@ -11,29 +11,30 @@ import {
 import messages from './messages';
 
 export const DemoAlert = ({
-  intl: { formatMessage },
   isOpen,
   onClose,
-}) => (
-  <AlertModal
-    title={formatMessage(messages.title)}
-    isOpen={isOpen}
-    onClose={onClose}
-    footerNode={(
-      <ActionRow>
-        <Button variant="primary" onClick={onClose}>
-          {formatMessage(messages.confirm)}
-        </Button>
-      </ActionRow>
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <AlertModal
+      title={formatMessage(messages.title)}
+      isOpen={isOpen}
+      onClose={onClose}
+      footerNode={(
+        <ActionRow>
+          <Button variant="primary" onClick={onClose}>
+            {formatMessage(messages.confirm)}
+          </Button>
+        </ActionRow>
     )}
-  >
-    <p>{formatMessage(messages.warningMessage)}</p>
-  </AlertModal>
-);
+    >
+      <p>{formatMessage(messages.warningMessage)}</p>
+    </AlertModal>
+  );
+};
 DemoAlert.propTypes = {
-  intl: intlShape.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(DemoAlert);
+export default DemoAlert;

src/components/DemoAlert/index.test.jsx

@@ -1,16 +1,32 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '../../testUtils';
 
-import { formatMessage } from 'testUtils';
+import messages from './messages';
 import { DemoAlert } from '.';
 
 describe('DemoAlert component', () => {
-  test('snapshot', () => {
-    const props = {
-      intl: { formatMessage },
-      isOpen: true,
-      onClose: jest.fn().mockName('props.onClose'),
-    };
-    expect(shallow(<DemoAlert {...props} />).snapshot).toMatchSnapshot();
+  const props = {
+    isOpen: true,
+    onClose: jest.fn().mockName('props.onClose'),
+  };
+
+  it('does not render when isOpen is false', () => {
+    renderWithIntl(<DemoAlert {...props} isOpen={false} />);
+    expect(screen.queryByText(messages.title.defaultMessage)).toBeNull();
+  });
+
+  it('renders with correct title and message when isOpen is true', () => {
+    renderWithIntl(<DemoAlert {...props} />);
+    expect(screen.getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.warningMessage.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls onClose when confirmation button is clicked', async () => {
+    renderWithIntl(<DemoAlert {...props} />);
+    const user = userEvent.setup();
+    const confirmButton = screen.getByText(messages.confirm.defaultMessage);
+    await user.click(confirmButton);
+    expect(props.onClose).toHaveBeenCalled();
   });
 });

src/components/FilePopoverContent/__snapshots__/index.test.jsx.snap

@@ -1,89 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilePopoverContent component snapshot default 1`] = `
-<Fragment>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Name"
-        description="Popover title for file name"
-        id="ora-grading.FilePopoverContent.filePopoverNameTitle"
-      />
-    </strong>
-    <br />
-    some file name
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Description"
-        description="Popover title for file description"
-        id="ora-grading.FilePopoverCellContent.filePopoverDescriptionTitle"
-      />
-    </strong>
-    <br />
-    long descriptive text...
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Size"
-        description="Popover title for file size"
-        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
-      />
-    </strong>
-    <br />
-    filesize(6000)
-  </div>
-</Fragment>
-`;
-
-exports[`FilePopoverContent component snapshot invalid size 1`] = `
-<Fragment>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Name"
-        description="Popover title for file name"
-        id="ora-grading.FilePopoverContent.filePopoverNameTitle"
-      />
-    </strong>
-    <br />
-    some file name
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Description"
-        description="Popover title for file description"
-        id="ora-grading.FilePopoverCellContent.filePopoverDescriptionTitle"
-      />
-    </strong>
-    <br />
-    long descriptive text...
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Size"
-        description="Popover title for file size"
-        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
-      />
-    </strong>
-    <br />
-    Unknown
-  </div>
-</Fragment>
-`;

src/components/FilePopoverContent/index.test.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
 import filesize from 'filesize';
+import { renderWithIntl } from '../../testUtils';
+
 import FilePopoverContent from '.';
 
 jest.mock('filesize', () => (size) => `filesize(${size})`);
@@ -14,24 +14,26 @@ describe('FilePopoverContent', () => {
       downloadURL: 'this-url-is.working',
       size: 6000,
     };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FilePopoverContent {...props} />);
-    });
-    describe('snapshot', () => {
-      test('default', () => expect(el.snapshot).toMatchSnapshot());
-      test('invalid size', () => {
-        el = shallow(<FilePopoverContent {...props} size={null} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
 
     describe('behavior', () => {
-      test('content', () => {
-        const childElements = el.instance.children;
-        expect(childElements[0].children[2].el).toContain(props.name);
-        expect(childElements[1].children[2].el).toContain(props.description);
-        expect(childElements[2].children[2].el).toContain(filesize(props.size));
+      it('renders file name correctly', () => {
+        renderWithIntl(<FilePopoverContent {...props} />);
+        expect(screen.getByText(props.name)).toBeInTheDocument();
+      });
+
+      it('renders file description correctly', () => {
+        renderWithIntl(<FilePopoverContent {...props} />);
+        expect(screen.getByText(props.description)).toBeInTheDocument();
+      });
+
+      it('renders file size correctly', () => {
+        renderWithIntl(<FilePopoverContent {...props} />);
+        expect(screen.getByText(filesize(props.size))).toBeInTheDocument();
+      });
+
+      it('renders "Unknown" when size is null', () => {
+        renderWithIntl(<FilePopoverContent {...props} size={null} />);
+        expect(screen.getByText('Unknown')).toBeInTheDocument();
       });
     });
   });

src/components/FilePreview/Banners/ErrorBanner.test.jsx

@@ -1,8 +1,6 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '../../../testUtils';
 import ErrorBanner from './ErrorBanner';
-
 import messages from '../messages';
 
 describe('Error Banner component', () => {
@@ -25,39 +23,29 @@ describe('Error Banner component', () => {
     children,
   };
 
-  let el;
-  beforeEach(() => {
-    el = shallow(<ErrorBanner {...props} />);
-  });
-
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
-
-  describe('component', () => {
-    test('children node', () => {
-      const childElement = el.instance.children[1];
-      const child = shallow(children);
-
-      expect(childElement.type).toEqual(child.type);
-      expect(childElement.children[0].el).toEqual(child.children[0].el);
+  describe('behavior', () => {
+    it('renders children content', () => {
+      renderWithIntl(<ErrorBanner {...props} />);
+      const childText = screen.getByText('Abitary Child');
+      expect(childText).toBeInTheDocument();
     });
 
-    test('verify actions', () => {
-      const { actions } = el.instance.findByType('Alert')[0].props;
-      expect(actions).toHaveLength(props.actions.length);
-
-      actions.forEach((action, index) => {
-        expect(action.type).toEqual('Button');
-        expect(action.props.onClick).toEqual(props.actions[index].onClick);
-        // action message
-        expect(action.props.children.props).toEqual(props.actions[index].message);
-      });
+    it('renders the correct number of action buttons', () => {
+      renderWithIntl(<ErrorBanner {...props} />);
+      const buttons = screen.getAllByText(messages.retryButton.defaultMessage);
+      expect(buttons).toHaveLength(2);
     });
 
-    test('verify heading', () => {
-      const heading = el.instance.findByType('FormattedMessage')[0];
-      expect(heading.props).toEqual(props.headingMessage);
+    it('renders error heading with correct message', () => {
+      renderWithIntl(<ErrorBanner {...props} />);
+      const heading = screen.getAllByText(messages.unknownError.defaultMessage)[0];
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('renders with danger variant', () => {
+      renderWithIntl(<ErrorBanner {...props} />);
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('alert-danger');
     });
   });
 });

src/components/FilePreview/Banners/LoadingBanner.test.jsx

@@ -1,11 +1,19 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
 import LoadingBanner from './LoadingBanner';
 
 describe('Loading Banner component', () => {
-  test('snapshot', () => {
-    const el = shallow(<LoadingBanner />);
-    expect(el.snapshot).toMatchSnapshot();
+  describe('behavior', () => {
+    it('renders an info alert', () => {
+      render(<LoadingBanner />);
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('alert-info');
+    });
+
+    it('renders a spinner', () => {
+      const { container } = render(<LoadingBanner />);
+      const spinner = container.querySelector('.pgn__spinner');
+      expect(spinner).toBeInTheDocument();
+      expect(spinner).toHaveClass('spinner-border');
+    });
   });
 });

src/components/FilePreview/Banners/__snapshots__/ErrorBanner.test.jsx.snap

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Error Banner component snapshot 1`] = `
-<Alert
-  actions={
-    [
-      <Button
-        onClick={[MockFunction action1.onClick]}
-        variant="outline-primary"
-      >
-        <FormattedMessage
-          defaultMessage="Retry"
-          description="Retry button for error in file renderer"
-          id="ora-grading.ResponseDisplay.FileRenderer.retryButton"
-        />
-      </Button>,
-      <Button
-        onClick={[MockFunction action2.onClick]}
-        variant="outline-primary"
-      >
-        <FormattedMessage
-          defaultMessage="Retry"
-          description="Retry button for error in file renderer"
-          id="ora-grading.ResponseDisplay.FileRenderer.retryButton"
-        />
-      </Button>,
-    ]
-  }
-  variant="danger"
->
-  <Alert.Heading>
-    <FormattedMessage
-      defaultMessage="Unknown errors"
-      description="Unknown errors message"
-      id="ora-grading.ResponseDisplay.FileRenderer.unknownError"
-    />
-  </Alert.Heading>
-  <p>
-    Abitary Child
-  </p>
-</Alert>
-`;

src/components/FilePreview/Banners/__snapshots__/LoadingBanner.test.jsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Loading Banner component snapshot 1`] = `
-<Alert
-  variant="info"
->
-  <Spinner
-    animation="border"
-    className="d-flex m-auto"
-  />
-</Alert>
-`;

src/components/FilePreview/BaseRenderers/ImageRenderer.test.jsx

@@ -1,21 +1,40 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import ImageRenderer from './ImageRenderer';
 
 describe('Image Renderer Component', () => {
   const props = {
     url: 'some_url.jpg',
+    fileName: 'test-image.jpg',
+    onError: jest.fn().mockName('this.props.onError'),
+    onSuccess: jest.fn().mockName('this.props.onSuccess'),
   };
 
-  props.onError = jest.fn().mockName('this.props.onError');
-  props.onSuccess = jest.fn().mockName('this.props.onSuccess');
-
-  let el;
-  beforeEach(() => {
-    el = shallow(<ImageRenderer {...props} />);
+  it('renders an image with the correct src and alt attributes', () => {
+    render(<ImageRenderer {...props} />);
+    const imgElement = screen.getByRole('img');
+    expect(imgElement).toBeInTheDocument();
+    expect(imgElement).toHaveAttribute('src', props.url);
+    expect(imgElement).toHaveAttribute('alt', props.fileName);
+    expect(imgElement).toHaveClass('image-renderer');
   });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
+
+  it('calls onSuccess when image loads successfully', () => {
+    render(<ImageRenderer {...props} />);
+
+    const imgElement = screen.getByRole('img');
+    imgElement.dispatchEvent(new Event('load'));
+
+    expect(props.onSuccess).toHaveBeenCalled();
+  });
+
+  it('calls onError when image fails to load', () => {
+    render(<ImageRenderer {...props} />);
+
+    const imgElement = screen.getByRole('img');
+    imgElement.dispatchEvent(new Event('error'));
+
+    expect(props.onError).toHaveBeenCalled();
   });
 });

src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx

@@ -1,16 +1,22 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { Document, Page } from 'react-pdf';
+import { render } from '@testing-library/react';
+import PropTypes from 'prop-types';
 import PDFRenderer from './PDFRenderer';
-
 import * as hooks from './pdfHooks';
 
 jest.mock('react-pdf', () => ({
   pdfjs: { GlobalWorkerOptions: {} },
-  Document: () => 'Document',
-  Page: () => 'Page',
+  Document: jest.fn(),
+  Page: jest.fn(),
 }));
 
+Document.mockImplementation((props) => <div data-testid="pdf-document">{props.children}</div>);
+Document.propTypes = {
+  children: PropTypes.node,
+};
+
+Page.mockImplementation(() => <div data-testid="pdf-page">Page Content</div>);
+
 jest.mock('./pdfHooks', () => ({
   rendererHooks: jest.fn(),
 }));
@@ -33,25 +39,45 @@ describe('PDF Renderer Component', () => {
     onNextPageButtonClick: jest.fn().mockName('hooks.onNextPageButtonClick'),
     onPrevPageButtonClick: jest.fn().mockName('hooks.onPrevPageButtonClick'),
     hasNext: true,
-    hasPref: false,
+    hasPrev: false,
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  describe('snapshots', () => {
-    test('first page, prev is disabled', () => {
+
+  describe('rendering', () => {
+    it('should render the PDF document with navigation controls', () => {
       hooks.rendererHooks.mockReturnValue(hookProps);
-      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
+      const { getByTestId, getAllByText, container } = render(<PDFRenderer {...props} />);
+      expect(getByTestId('pdf-document')).toBeInTheDocument();
+      expect(getByTestId('pdf-page')).toBeInTheDocument();
+      expect(container.querySelector('input[type="number"]')).toBeInTheDocument();
+      expect(getAllByText(/Page/).length).toBeGreaterThan(0);
+      expect(getAllByText(`of ${hookProps.numPages}`).length).toBeGreaterThan(0);
     });
-    test('on last page, next is disabled', () => {
+
+    it('should have disabled previous button when on the first page', () => {
+      hooks.rendererHooks.mockReturnValue({
+        ...hookProps,
+        hasPrev: false,
+      });
+
+      const { container } = render(<PDFRenderer {...props} />);
+      const prevButton = container.querySelector('button[aria-label="previous pdf page"]');
+      expect(prevButton).toBeDisabled();
+    });
+
+    it('should have disabled next button when on the last page', () => {
       hooks.rendererHooks.mockReturnValue({
         ...hookProps,
-        pageNumber: hookProps.numPages,
         hasNext: false,
         hasPrev: true,
       });
-      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
+
+      const { container } = render(<PDFRenderer {...props} />);
+      const nextButton = container.querySelector('button[aria-label="next pdf page"]');
+      expect(nextButton).toBeDisabled();
     });
   });
 });

src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx

@@ -1,23 +1,38 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
 import TXTRenderer from './TXTRenderer';
 
 jest.mock('./textHooks', () => {
-  const content = 'test-content';
+  const mockRendererHooks = jest.fn().mockReturnValue({ content: 'test-content' });
   return {
-    content,
-    rendererHooks: (args) => ({ content, rendererHooks: args }),
+    rendererHooks: mockRendererHooks,
   };
 });
 
+const textHooks = require('./textHooks');
+
 describe('TXT Renderer Component', () => {
   const props = {
     url: 'some_url.txt',
     onError: jest.fn().mockName('this.props.onError'),
     onSuccess: jest.fn().mockName('this.props.onSuccess'),
   };
-  test('snapshot', () => {
-    expect(shallow(<TXTRenderer {...props} />).snapshot).toMatchSnapshot();
+
+  beforeEach(() => {
+    textHooks.rendererHooks.mockClear();
+  });
+
+  it('renders the text content in a pre element', () => {
+    const { getByText, container } = render(<TXTRenderer {...props} />);
+    expect(getByText('test-content')).toBeInTheDocument();
+    expect(container.querySelector('pre')).toHaveClass('txt-renderer');
+  });
+
+  it('passes the correct props to rendererHooks', () => {
+    render(<TXTRenderer {...props} />);
+    expect(textHooks.rendererHooks).toHaveBeenCalledWith({
+      url: props.url,
+      onError: props.onError,
+      onSuccess: props.onSuccess,
+    });
   });
 });

src/components/FilePreview/BaseRenderers/__snapshots__/ImageRenderer.test.jsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image Renderer Component snapshot 1`] = `
-<img
-  alt=""
-  className="image-renderer"
-  onError={[MockFunction this.props.onError]}
-  onLoad={[MockFunction this.props.onSuccess]}
-  src="some_url.jpg"
-/>
-`;

src/components/FilePreview/BaseRenderers/__snapshots__/PDFRenderer.test.jsx.snap

@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PDF Renderer Component snapshots first page, prev is disabled 1`] = `
-<div
-  className="pdf-renderer"
->
-  <Document
-    file="some_url.pdf"
-    onLoadError={[MockFunction hooks.onDocumentLoadError]}
-    onLoadSuccess={[MockFunction hooks.onDocumentLoadSuccess]}
-  >
-    <div
-      className="page-wrapper"
-      style={
-        {
-          "height": 200,
-        }
-      }
-    >
-      <Page
-        onLoadSuccess={[MockFunction hooks.onLoadPageSuccess]}
-        pageNumber={1}
-      />
-    </div>
-  </Document>
-  <ActionRow
-    className="d-flex justify-content-center m-0"
-  >
-    <IconButton
-      alt="previous pdf page"
-      disabled={true}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onPrevPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronLeft]}
-    />
-    <Form.Group
-      className="d-flex align-items-center m-0"
-    >
-      <Form.Label
-        isInline={true}
-      >
-        Page 
-      </Form.Label>
-      <Form.Control
-        max={10}
-        min={0}
-        onChange={[MockFunction hooks.onInputPageChange]}
-        type="number"
-        value={1}
-      />
-      <Form.Label
-        isInline={true}
-      >
-         of 
-        10
-      </Form.Label>
-    </Form.Group>
-    <IconButton
-      alt="next pdf page"
-      disabled={false}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onNextPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronRight]}
-    />
-  </ActionRow>
-</div>
-`;
-
-exports[`PDF Renderer Component snapshots on last page, next is disabled 1`] = `
-<div
-  className="pdf-renderer"
->
-  <Document
-    file="some_url.pdf"
-    onLoadError={[MockFunction hooks.onDocumentLoadError]}
-    onLoadSuccess={[MockFunction hooks.onDocumentLoadSuccess]}
-  >
-    <div
-      className="page-wrapper"
-      style={
-        {
-          "height": 200,
-        }
-      }
-    >
-      <Page
-        onLoadSuccess={[MockFunction hooks.onLoadPageSuccess]}
-        pageNumber={10}
-      />
-    </div>
-  </Document>
-  <ActionRow
-    className="d-flex justify-content-center m-0"
-  >
-    <IconButton
-      alt="previous pdf page"
-      disabled={false}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onPrevPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronLeft]}
-    />
-    <Form.Group
-      className="d-flex align-items-center m-0"
-    >
-      <Form.Label
-        isInline={true}
-      >
-        Page 
-      </Form.Label>
-      <Form.Control
-        max={10}
-        min={0}
-        onChange={[MockFunction hooks.onInputPageChange]}
-        type="number"
-        value={10}
-      />
-      <Form.Label
-        isInline={true}
-      >
-         of 
-        10
-      </Form.Label>
-    </Form.Group>
-    <IconButton
-      alt="next pdf page"
-      disabled={true}
-      iconAs="Icon"
-      onClick={[MockFunction hooks.onNextPageButtonClick]}
-      size="inline"
-      src={[MockFunction icons.ChevronRight]}
-    />
-  </ActionRow>
-</div>
-`;

src/components/FilePreview/BaseRenderers/__snapshots__/TXTRenderer.test.jsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TXT Renderer Component snapshot 1`] = `
-<pre
-  className="txt-renderer"
->
-  test-content
-</pre>
-`;

src/components/FilePreview/BaseRenderers/pdfHooks.test.js

@@ -12,6 +12,11 @@ jest.mock('react-pdf', () => ({
   Page: () => 'Page',
 }));
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn((val) => ({ current: val, useRef: true })),
+}));
+
 const state = new MockUseState(hooks);
 const hookKeys = keyStore(hooks);
 

src/components/FilePreview/BaseRenderers/textHooks.test.js

@@ -10,6 +10,11 @@ jest.mock('axios', () => ({
   get: jest.fn(),
 }));
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+}));
+
 const hookKeys = keyStore(hooks);
 const state = new MockUseState(hooks);
 

src/components/FilePreview/FileCard.scss

@@ -1,7 +1,5 @@
-@import "@openedx/paragon/scss/core/core";
-
 .file-card {
-  margin: map-get($spacers, 1) 0;
+  margin: var(--pgn-spacing-spacer-1) 0;
 
   .file-card-title {
     text-overflow: ellipsis;
@@ -26,8 +24,8 @@
   white-space: pre-wrap;
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .file-card-title {
-    width: calc(map-get($container-max-widths, "sm")/2);
+    width: calc(var(--pgn-size-container-max-width-sm)/2);
   }
-}
+}

src/components/FilePreview/FileCard.test.jsx

@@ -1,10 +1,4 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Collapsible } from '@openedx/paragon';
-
-import FilePopoverContent from 'components/FilePopoverContent';
-import FileInfo from './FileInfo';
+import { render, screen } from '@testing-library/react';
 import FileCard from './FileCard';
 
 jest.mock('components/FilePopoverContent', () => 'FilePopoverContent');
@@ -19,24 +13,27 @@ describe('File Preview Card component', () => {
     },
   };
   const children = (<h1>some children</h1>);
-  let el;
-  beforeEach(() => {
-    el = shallow(<FileCard {...props}>{children}</FileCard>);
-  });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
+
   describe('Component', () => {
-    test('collapsible title is name header', () => {
-      const { title } = el.instance.findByType(Collapsible)[0].props;
-      expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
+    it('renders with the file name in the title', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      expect(screen.getByText(props.file.name)).toBeInTheDocument();
+      expect(screen.getByText(props.file.name)).toHaveClass('file-card-title');
     });
-    test('forwards children into preview-panel', () => {
-      const previewPanelChildren = el.instance.findByTestId('preview-panel')[0].children;
-      expect(previewPanelChildren[0].matches(
-        <FileInfo><FilePopoverContent file={props.file} /></FileInfo>,
-      ));
-      expect(previewPanelChildren[1].matches(shallow(children))).toEqual(true);
+
+    it('renders the preview panel with file info', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      const previewPanel = screen.getByTestId('preview-panel');
+      expect(previewPanel).toBeInTheDocument();
+      expect(document.querySelector('FileInfo')).toBeInTheDocument();
+      expect(document.querySelector('FilePopoverContent')).toBeInTheDocument();
+    });
+
+    it('renders children in the preview panel', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      const previewPanel = screen.getByTestId('preview-panel');
+      expect(previewPanel).toBeInTheDocument();
+      expect(screen.getByText('some children')).toBeInTheDocument();
     });
   });
 });

src/components/FilePreview/FileInfo.test.jsx

@@ -1,25 +1,29 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Popover } from '@openedx/paragon';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '../../testUtils';
 
 import FileInfo from './FileInfo';
+import messages from './messages';
 
-describe('File Preview Card component', () => {
+describe('FileInfo component', () => {
   const children = (<h1>some Children</h1>);
   const props = { onClick: jest.fn().mockName('this.props.onClick') };
-  let el;
+
   beforeEach(() => {
-    el = shallow(<FileInfo {...props}>{children}</FileInfo>);
+    jest.clearAllMocks();
   });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  describe('Component', () => {
-    test('overlay with passed children', () => {
-      const { overlay } = el.instance.props;
-      expect(overlay.type).toEqual(Popover);
-      expect(overlay.props.children).toEqual(<Popover.Content>{children}</Popover.Content>);
+
+  describe('Component rendering', () => {
+    it('renders the FileInfo button with correct text', () => {
+      renderWithIntl(<FileInfo {...props}>{children}</FileInfo>);
+      expect(screen.getByText(messages.fileInfo.defaultMessage)).toBeInTheDocument();
+    });
+
+    it('calls onClick when button is clicked', async () => {
+      renderWithIntl(<FileInfo {...props}>{children}</FileInfo>);
+      const user = userEvent.setup();
+      await user.click(screen.getByText(messages.fileInfo.defaultMessage));
+      expect(props.onClick).toHaveBeenCalledTimes(1);
     });
   });
 });

src/components/FilePreview/FileRenderer.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import FileCard from './FileCard';
 import { ErrorBanner, LoadingBanner } from './Banners';
@@ -12,8 +12,8 @@ import { renderHooks } from './hooks';
  */
 export const FileRenderer = ({
   file,
-  intl,
 }) => {
+  const intl = useIntl();
   const {
     Renderer,
     isLoading,
@@ -39,8 +39,6 @@ FileRenderer.propTypes = {
     name: PropTypes.string,
     downloadUrl: PropTypes.string,
   }).isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(FileRenderer);
+export default FileRenderer;

src/components/FilePreview/FileRenderer.test.jsx

@@ -1,53 +1,79 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
+import { screen } from '@testing-library/react';
 import { keyStore } from 'utils';
 import { ErrorStatuses } from 'data/constants/requests';
-
+import { renderWithIntl } from '../../testUtils';
 import { FileRenderer } from './FileRenderer';
 import * as hooks from './hooks';
 
-jest.mock('./FileCard', () => 'FileCard');
-jest.mock('./Banners', () => ({
-  ErrorBanner: () => 'ErrorBanner',
-  LoadingBanner: () => 'LoadingBanner',
-}));
-
 const hookKeys = keyStore(hooks);
 
 const props = {
   file: {
     downloadUrl: 'file download url',
     name: 'filename.txt',
+    description: 'A text file',
   },
-  intl: { formatMessage },
 };
 describe('FileRenderer', () => {
   describe('component', () => {
-    describe('snapshot', () => {
-      test('isLoading, no Error', () => {
-        const hookProps = {
-          Renderer: () => 'Renderer',
-          isloading: true,
-          errorStatus: null,
-          error: null,
-          rendererProps: { prop: 'hooks.rendererProps' },
-        };
-        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
-      });
-      test('is not loading, with error', () => {
-        const hookProps = {
-          Renderer: () => 'Renderer',
-          isloading: false,
-          errorStatus: ErrorStatuses.serverError,
-          error: { prop: 'hooks.errorProps' },
-          rendererProps: { prop: 'hooks.rendererProps' },
-        };
-        jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
-      });
+    it('renders loading banner when isLoading is true', () => {
+      const hookProps = {
+        Renderer: () => <div data-testid="mock-renderer">Renderer Component</div>,
+        isLoading: true,
+        errorStatus: null,
+        error: null,
+        rendererProps: { prop: 'hooks.rendererProps' },
+      };
+      jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
+      renderWithIntl(<FileRenderer {...props} />);
+
+      expect(screen.getByText('filename.txt')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();
+      const spinner = document.querySelector('.spinner-border');
+      expect(spinner).toBeInTheDocument();
+    });
+    it('renders error banner when there is an error status', () => {
+      const errorProps = {
+        headingMessage: { id: 'error.heading', defaultMessage: 'Error Heading' },
+        children: 'Error Message',
+        actions: [{ id: 'retry', onClick: jest.fn(), message: { id: 'retry', defaultMessage: 'Retry' } }],
+      };
+
+      const hookProps = {
+        Renderer: () => <div data-testid="mock-renderer">Renderer Component</div>,
+        isLoading: false,
+        errorStatus: ErrorStatuses.serverError,
+        error: errorProps,
+        rendererProps: { prop: 'hooks.rendererProps' },
+      };
+      jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
+
+      renderWithIntl(<FileRenderer {...props} />);
+
+      expect(screen.getByText('filename.txt')).toBeInTheDocument();
+      expect(screen.getByText('Error Message')).toBeInTheDocument();
+      expect(document.querySelector('.alert-heading')).toBeInTheDocument();
+      expect(document.querySelector('.btn.btn-outline-primary')).toBeInTheDocument();
+    });
+
+    it('renders renderer component when not loading and no error', () => {
+      const hookProps = {
+        Renderer: () => <div data-testid="mock-renderer">Renderer Component</div>,
+        isLoading: false,
+        errorStatus: null,
+        error: null,
+        rendererProps: { prop: 'hooks.rendererProps' },
+      };
+      jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
+
+      renderWithIntl(<FileRenderer {...props} />);
+
+      expect(screen.getByText('filename.txt')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();
+      expect(screen.getByText('Renderer Component')).toBeInTheDocument();
+
+      const spinner = document.querySelector('.spinner-border');
+      expect(spinner).not.toBeInTheDocument();
     });
   });
 });

src/components/FilePreview/__snapshots__/FileCard.test.jsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`File Preview Card component snapshot 1`] = `
-<Card
-  className="file-card"
-  key="test-file-name.pdf"
->
-  <Collapsible
-    className="file-collapsible"
-    defaultOpen={true}
-    title={
-      <h3
-        className="file-card-title"
-      >
-        test-file-name.pdf
-      </h3>
-    }
-  >
-    <div
-      className="preview-panel"
-      data-testid="preview-panel"
-    >
-      <FileInfo>
-        <FilePopoverContent
-          description="test-file description"
-          downloadUrl="destination/test-file-name.pdf"
-          name="test-file-name.pdf"
-        />
-      </FileInfo>
-      <h1>
-        some children
-      </h1>
-    </div>
-  </Collapsible>
-</Card>
-`;

src/components/FilePreview/__snapshots__/FileInfo.test.jsx.snap

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`File Preview Card component snapshot 1`] = `
-<OverlayTrigger
-  flip={true}
-  overlay={
-    <Popover
-      className="overlay-help-popover"
-      id="file-popover"
-    >
-      <Popover.Content>
-        <h1>
-          some Children
-        </h1>
-      </Popover.Content>
-    </Popover>
-  }
-  placement="right-end"
-  trigger="focus"
->
-  <Button
-    iconAfter={[MockFunction icons.InfoOutline]}
-    onClick={[MockFunction this.props.onClick]}
-    size="sm"
-    variant="tertiary"
-  >
-    <FormattedMessage
-      defaultMessage="File info"
-      description="Popover trigger button text for file preview card"
-      id="ora-grading.InfoPopover.fileInfo"
-    />
-  </Button>
-</OverlayTrigger>
-`;

src/components/FilePreview/__snapshots__/FileRenderer.test.jsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileRenderer component snapshot is not loading, with error 1`] = `
-<FileCard
-  file={
-    {
-      "downloadUrl": "file download url",
-      "name": "filename.txt",
-    }
-  }
-  key="file download url"
->
-  <ErrorBanner
-    prop="hooks.errorProps"
-  />
-</FileCard>
-`;
-
-exports[`FileRenderer component snapshot isLoading, no Error 1`] = `
-<FileCard
-  file={
-    {
-      "downloadUrl": "file download url",
-      "name": "filename.txt",
-    }
-  }
-  key="file download url"
->
-  <Renderer
-    prop="hooks.rendererProps"
-  />
-</FileCard>
-`;

src/components/Head/__snapshots__/index.test.jsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Head snapshot 1`] = `
-<Helmet>
-  <title>
-    ORA staff grading | site-name
-  </title>
-  <link
-    href="favicon-url"
-    rel="shortcut icon"
-    type="image/x-icon"
-  />
-</Helmet>
-`;

src/components/Head/index.test.jsx

@@ -1,25 +1,45 @@
-import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
 import Head from '.';
 
-jest.mock('react-helmet', () => ({
-  Helmet: 'Helmet',
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  useIntl: () => ({
+    formatMessage: (message, values) => {
+      if (message.defaultMessage && values) {
+        return message.defaultMessage.replace('{siteName}', values.siteName);
+      }
+      return message.defaultMessage || message.id;
+    },
+  }),
+  defineMessages: (messages) => messages,
 }));
 
+jest.mock('react-helmet', () => ({
+  Helmet: jest.fn(),
+}));
+
+Helmet.mockImplementation(({ children }) => <div data-testid="helmet-mock">{children}</div>);
+
 jest.mock('@edx/frontend-platform', () => ({
-  getConfig: () => ({
+  getConfig: jest.fn().mockReturnValue({
     SITE_NAME: 'site-name',
     FAVICON_URL: 'favicon-url',
   }),
 }));
 
 describe('Head', () => {
-  it('snapshot', () => {
-    const el = shallow(<Head />);
-    expect(el.snapshot).toMatchSnapshot();
+  it('should render page title with site name from config', () => {
+    const { container } = render(<Head />);
+    const titleElement = container.querySelector('title');
+    expect(titleElement).toBeInTheDocument();
+    expect(titleElement.textContent).toContain('ORA staff grading | site-name');
+  });
 
-    expect(el.instance.findByType('title')[0].el.children[0]).toContain(getConfig().SITE_NAME);
-    expect(el.instance.findByType('link')[0].props.href).toEqual(getConfig().FAVICON_URL);
+  it('should render favicon link with URL from config', () => {
+    const { container } = render(<Head />);
+    const faviconLink = container.querySelector('link[rel="shortcut icon"]');
+    expect(faviconLink).toBeInTheDocument();
+    expect(faviconLink.getAttribute('href')).toEqual('favicon-url');
+    expect(faviconLink.getAttribute('type')).toEqual('image/x-icon');
   });
 });

src/components/InfoPopover/__snapshots__/index.test.jsx.snap

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Info Popover Component snapshot 1`] = `
-<OverlayTrigger
-  flip={true}
-  overlay={
-    <Popover
-      className="overlay-help-popover"
-      id="info-popover"
-    >
-      <Popover.Content>
-        <div>
-          Children component
-        </div>
-      </Popover.Content>
-    </Popover>
-  }
-  placement="right-end"
-  trigger="focus"
->
-  <IconButton
-    alt="Display more info"
-    className="esg-help-icon"
-    data-testid="esg-help-icon"
-    iconAs="Icon"
-    onClick={[MockFunction this.props.onClick]}
-    src={[MockFunction icons.InfoOutline]}
-  />
-</OverlayTrigger>
-`;

src/components/InfoPopover/index.jsx

@@ -8,7 +8,7 @@ import {
   IconButton,
 } from '@openedx/paragon';
 import { InfoOutline } from '@openedx/paragon/icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { nullMethod } from 'hooks';
 
@@ -17,27 +17,35 @@ import messages from './messages';
 /**
  * <InfoPopover />
  */
-export const InfoPopover = ({ onClick, children, intl }) => (
-  <OverlayTrigger
-    trigger="focus"
-    placement="right-end"
-    flip
-    overlay={(
-      <Popover id="info-popover" className="overlay-help-popover">
-        <Popover.Content>{children}</Popover.Content>
-      </Popover>
-    )}
-  >
-    <IconButton
-      className="esg-help-icon"
-      data-testid="esg-help-icon"
-      src={InfoOutline}
-      alt={intl.formatMessage(messages.altText)}
-      iconAs={Icon}
-      onClick={onClick}
-    />
-  </OverlayTrigger>
-);
+export const InfoPopover = (
+  {
+    onClick,
+    children,
+  },
+) => {
+  const intl = useIntl();
+  return (
+    <OverlayTrigger
+      trigger="focus"
+      placement="left-end"
+      flip
+      overlay={(
+        <Popover id="info-popover" className="overlay-help-popover">
+          <Popover.Content>{children}</Popover.Content>
+        </Popover>
+      )}
+    >
+      <IconButton
+        className="esg-help-icon"
+        data-testid="esg-help-icon"
+        src={InfoOutline}
+        alt={intl.formatMessage(messages.altText)}
+        iconAs={Icon}
+        onClick={onClick}
+      />
+    </OverlayTrigger>
+  );
+};
 
 InfoPopover.defaultProps = {
   onClick: nullMethod,
@@ -48,7 +56,6 @@ InfoPopover.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(InfoPopover);
+export default InfoPopover;

src/components/InfoPopover/index.test.jsx

@@ -1,23 +1,31 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '../../testUtils';
 import { InfoPopover } from '.';
 
 describe('Info Popover Component', () => {
   const child = <div>Children component</div>;
   const onClick = jest.fn().mockName('this.props.onClick');
-  let el;
-  beforeEach(() => {
-    el = shallow(<InfoPopover onClick={onClick} intl={{ formatMessage }}>{child}</InfoPopover>);
-  });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
+
   describe('Component', () => {
-    test('Test component render', () => {
-      expect(el.instance.children.length).toEqual(1);
-      expect(el.instance.findByTestId('esg-help-icon').length).toEqual(1);
+    it('renders the help icon button', () => {
+      renderWithIntl(
+        <InfoPopover onClick={onClick}>
+          {child}
+        </InfoPopover>,
+      );
+      expect(screen.getByTestId('esg-help-icon')).toBeInTheDocument();
+    });
+
+    it('calls onClick when the help icon is clicked', async () => {
+      renderWithIntl(
+        <InfoPopover onClick={onClick}>
+          {child}
+        </InfoPopover>,
+      );
+      const user = userEvent.setup();
+      await user.click(screen.getByTestId('esg-help-icon'));
+      expect(onClick).toHaveBeenCalled();
     });
   });
 });

src/components/StatusBadge.test.jsx

@@ -1,34 +1,36 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
 import { gradingStatuses } from 'data/services/lms/constants';
+import messages from '../data/services/lms/messages';
+import { renderWithIntl } from '../testUtils';
 import { StatusBadge } from './StatusBadge';
 
 const className = 'test-className';
 describe('StatusBadge component', () => {
-  const render = (status) => shallow(<StatusBadge className={className} status={status} />);
   describe('behavior', () => {
     it('does not render if status does not have configured variant', () => {
-      const el = render('arbitrary');
-      expect(el.snapshot).toMatchSnapshot();
-      expect(el.isEmptyRender()).toEqual(true);
+      const { container } = renderWithIntl(<StatusBadge className={className} status="arbitrary" />);
+      expect(container.firstChild).toBeNull();
     });
-    describe('status snapshots: loads badge with configured variant and message.', () => {
-      test('`ungraded` shows primary button variant and message', () => {
-        const el = render(gradingStatuses.ungraded);
-        expect(el.snapshot).toMatchSnapshot();
+    describe('status rendering: loads badge with configured variant and message', () => {
+      it('`ungraded` shows primary button variant and message', () => {
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.ungraded} />);
+        const badge = screen.getByText(messages.ungraded.defaultMessage);
+        expect(badge).toHaveClass('badge-primary');
       });
-      test('`locked` shows light button variant and message', () => {
-        const el = render(gradingStatuses.locked);
-        expect(el.snapshot).toMatchSnapshot();
+      it('`locked` shows light button variant and message', () => {
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.locked} />);
+        const badge = screen.getByText(messages.locked.defaultMessage);
+        expect(badge).toHaveClass('badge-light');
       });
-      test('`graded` shows success button variant and message', () => {
-        const el = render(gradingStatuses.graded);
-        expect(el.snapshot).toMatchSnapshot();
+      it('`graded` shows success button variant and message', () => {
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.graded} />);
+        const badge = screen.getByText(messages.graded.defaultMessage);
+        expect(badge).toHaveClass('badge-success');
       });
-      test('`inProgress` shows warning button variant and message', () => {
-        const el = render(gradingStatuses.inProgress);
-        expect(el.snapshot).toMatchSnapshot();
+      it('`inProgress` shows warning button variant and message', () => {
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.inProgress} />);
+        const badge = screen.getByText(messages['in-progress'].defaultMessage);
+        expect(badge).toHaveClass('badge-warning');
       });
     });
   });

src/components/__snapshots__/ConfirmModal.test.jsx.snap

@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmModal snapshot: closed 1`] = `
-<AlertModal
-  className="confirm-modal"
-  footerNode={
-    <ActionRow>
-      <Button
-        onClick={[MockFunction this.props.onCancel]}
-        variant="tertiary"
-      >
-        test-cancel-text
-      </Button>
-      <Button
-        onClick={[MockFunction this.props.onConfirm]}
-        variant="primary"
-      >
-        test-confirm-text
-      </Button>
-    </ActionRow>
-  }
-  isOpen={false}
-  onClose={[MockFunction hooks.nullMethod]}
-  title="test-title"
->
-  <p>
-    test-content
-  </p>
-</AlertModal>
-`;
-
-exports[`ConfirmModal snapshot: open 1`] = `
-<AlertModal
-  className="confirm-modal"
-  footerNode={
-    <ActionRow>
-      <Button
-        onClick={[MockFunction this.props.onCancel]}
-        variant="tertiary"
-      >
-        test-cancel-text
-      </Button>
-      <Button
-        onClick={[MockFunction this.props.onConfirm]}
-        variant="primary"
-      >
-        test-confirm-text
-      </Button>
-    </ActionRow>
-  }
-  isOpen={true}
-  onClose={[MockFunction hooks.nullMethod]}
-  title="test-title"
->
-  <p>
-    test-content
-  </p>
-</AlertModal>
-`;

src/components/__snapshots__/StatusBadge.test.jsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `null`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`graded\` shows success button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="success"
->
-  <FormattedMessage
-    defaultMessage="Grading Completed"
-    description="Grading status label for graded submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.graded"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`inProgress\` shows warning button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="warning"
->
-  <FormattedMessage
-    defaultMessage="You are currently grading this response"
-    description="Grading status label for in-progress submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.inProgress"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`locked\` shows light button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="light"
->
-  <FormattedMessage
-    defaultMessage="Currently being graded by someone else"
-    description="Grading status label for locked submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.locked"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`ungraded\` shows primary button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="primary"
->
-  <FormattedMessage
-    defaultMessage="Ungraded"
-    description="Grading status label for ungraded submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.ungraded"
-  />
-</Badge>
-`;

src/containers/CriterionContainer/CriterionFeedback.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { Form } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { feedbackRequirement } from 'data/services/lms/constants';
 import { actions, selectors } from 'data/redux';
@@ -12,60 +12,56 @@ import messages from './messages';
 /**
  * <CriterionFeedback />
  */
-export class CriterionFeedback extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-  }
+export const CriterionFeedback = ({
+  orderNum,
+  isGrading,
+  config,
+  setValue,
+  value,
+  isInvalid,
+}) => {
+  const intl = useIntl();
 
-  onChange(event) {
-    this.props.setValue({
+  const onChange = (event) => {
+    setValue({
       value: event.target.value,
-      orderNum: this.props.orderNum,
+      orderNum,
     });
-  }
+  };
 
-  get commentMessage() {
-    const { config, isGrading } = this.props;
-    let commentMessage = this.translate(isGrading ? messages.addComments : messages.comments);
+  const translate = (msg) => intl.formatMessage(msg);
+
+  const getCommentMessage = () => {
+    let commentMessage = translate(isGrading ? messages.addComments : messages.comments);
     if (config === feedbackRequirement.optional) {
-      commentMessage += ` ${this.translate(messages.optional)}`;
+      commentMessage += ` ${translate(messages.optional)}`;
     }
     return commentMessage;
+  };
+
+  if (config === feedbackRequirement.disabled) {
+    return null;
   }
 
-  translate = (msg) => this.props.intl.formatMessage(msg);
-
-  render() {
-    const {
-      config,
-      isGrading,
-      value,
-      isInvalid,
-    } = this.props;
-    if (config === feedbackRequirement.disabled) {
-      return null;
-    }
-    return (
-      <Form.Group isInvalid={this.feedbackIsInvalid}>
-        <Form.Control
-          as="textarea"
-          className="criterion-feedback feedback-input"
-          data-testid="criterion-feedback-input"
-          floatingLabel={this.commentMessage}
-          value={value}
-          onChange={this.onChange}
-          disabled={!isGrading}
-        />
-        {isInvalid && (
-          <Form.Control.Feedback type="invalid" className="feedback-error-msg" data-testid="criterion-feedback-error-msg">
-            {this.translate(messages.criterionFeedbackError)}
-          </Form.Control.Feedback>
-        )}
-      </Form.Group>
-    );
-  }
-}
+  return (
+    <Form.Group isInvalid={isInvalid}>
+      <Form.Control
+        as="textarea"
+        className="criterion-feedback feedback-input"
+        data-testid="criterion-feedback-input"
+        floatingLabel={getCommentMessage()}
+        value={value}
+        onChange={onChange}
+        disabled={!isGrading}
+      />
+      {isInvalid && (
+        <Form.Control.Feedback type="invalid" className="feedback-error-msg" data-testid="criterion-feedback-error-msg">
+          {translate(messages.criterionFeedbackError)}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
 
 CriterionFeedback.defaultProps = {
   value: '',
@@ -74,8 +70,6 @@ CriterionFeedback.defaultProps = {
 CriterionFeedback.propTypes = {
   orderNum: PropTypes.number.isRequired,
   isGrading: PropTypes.bool.isRequired,
-  // injected
-  intl: intlShape.isRequired,
   // redux
   config: PropTypes.string.isRequired,
   setValue: PropTypes.func.isRequired,
@@ -93,6 +87,4 @@ export const mapDispatchToProps = {
   setValue: actions.grading.setCriterionFeedback,
 };
 
-export default injectIntl(
-  connect(mapStateToProps, mapDispatchToProps)(CriterionFeedback),
-);
+export default connect(mapStateToProps, mapDispatchToProps)(CriterionFeedback);

src/containers/CriterionContainer/CriterionFeedback.test.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { actions, selectors } from 'data/redux';
 import {
   feedbackRequirement,
   gradeStatuses,
 } from 'data/services/lms/constants';
-import { formatMessage } from 'testUtils';
 import {
   CriterionFeedback,
   mapStateToProps,
   mapDispatchToProps,
 } from './CriterionFeedback';
-import messages from './messages';
+import { renderWithIntl } from '../../testUtils';
 
 jest.mock('data/redux/app/selectors', () => ({
   rubric: {
@@ -36,7 +36,6 @@ jest.mock('data/redux/grading/selectors', () => ({
 
 describe('Criterion Feedback', () => {
   const props = {
-    intl: { formatMessage },
     orderNum: 1,
     config: 'config string',
     isGrading: true,
@@ -45,110 +44,50 @@ describe('Criterion Feedback', () => {
     setValue: jest.fn().mockName('this.props.setValue'),
     isInvalid: false,
   };
-  let el;
-  beforeEach(() => {
-    el = shallow(<CriterionFeedback {...props} />);
-    el.instance.onChange = jest.fn().mockName('this.onChange');
-  });
-  describe('snapshot', () => {
-    test('is grading', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-
-    test('is graded', () => {
-      el = shallow(<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
-      expect(el.snapshot).toMatchSnapshot();
-    });
-
-    test('feedback value is invalid', () => {
-      el = shallow(<CriterionFeedback {...props} isInvalid />);
-      expect(el.snapshot).toMatchSnapshot();
-    });
-
-    Object.values(feedbackRequirement).forEach((requirement) => {
-      test(`feedback is configured to ${requirement}`, () => {
-        el = shallow(<CriterionFeedback {...props} config={requirement} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
-  });
 
   describe('component', () => {
     describe('render', () => {
-      test('is grading (the feedback input is not disabled)', () => {
-        expect(el.isEmptyRender()).toEqual(false);
-        const controlEl = el.instance.findByTestId('criterion-feedback-input')[0];
-        expect(controlEl.props.disabled).toEqual(false);
-        expect(controlEl.props.value).toEqual(props.value);
+      it('shows a non-disabled input when grading', () => {
+        renderWithIntl(<CriterionFeedback {...props} />);
+        const input = screen.getByTestId('criterion-feedback-input');
+        expect(input).toBeInTheDocument();
+        expect(input).not.toBeDisabled();
+        expect(input).toHaveValue(props.value);
       });
-      test('is graded (the input is disabled)', () => {
-        el = shallow(<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
-        const controlEl = el.instance.findByTestId('criterion-feedback-input')[0];
-        expect(controlEl.props.disabled).toEqual(true);
-        expect(controlEl.props.value).toEqual(props.value);
+
+      it('shows a disabled input when not grading', () => {
+        renderWithIntl(
+          <CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />,
+        );
+        const input = screen.getByTestId('criterion-feedback-input');
+        expect(input).toBeInTheDocument();
+        expect(input).toBeDisabled();
+        expect(input).toHaveValue(props.value);
       });
-      test('is having invalid feedback (feedback get render)', () => {
-        el = shallow(<CriterionFeedback {...props} isInvalid />);
-        const feedbackErrorEl = el.instance.findByTestId('criterion-feedback-error-msg');
-        expect(feedbackErrorEl).toBeDefined();
+
+      it('displays an error message when feedback is invalid', () => {
+        renderWithIntl(<CriterionFeedback {...props} isInvalid />);
+        expect(screen.getByTestId('criterion-feedback-error-msg')).toBeInTheDocument();
       });
-      test('is configure to disabled (the input does not get render)', () => {
-        el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.disabled} />);
-        expect(el.isEmptyRender()).toEqual(true);
+
+      it('does not render anything when config is set to disabled', () => {
+        const { container } = renderWithIntl(
+          <CriterionFeedback {...props} config={feedbackRequirement.disabled} />,
+        );
+        expect(container.firstChild).toBeNull();
       });
     });
 
     describe('behavior', () => {
-      test('onChange call set value', () => {
-        el = shallow(<CriterionFeedback {...props} />);
-        el.instance.findByTestId('criterion-feedback-input')[0].props.onChange({
-          target: {
-            value: 'some value',
-          },
+      it('calls setValue when input value changes', async () => {
+        renderWithIntl(<CriterionFeedback {...props} />);
+        const user = userEvent.setup();
+        const input = screen.getByTestId('criterion-feedback-input');
+        await user.clear(input);
+        expect(props.setValue).toHaveBeenCalledWith({
+          value: '',
+          orderNum: props.orderNum,
         });
-        expect(props.setValue).toBeCalledTimes(1);
-      });
-    });
-
-    describe('getter commentMessage', () => {
-      test('is grading', () => {
-        let commentMessage;
-
-        el = shallow(<CriterionFeedback {...props} isGrading config={feedbackRequirement.optional} />);
-        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
-        expect(commentMessage).toContain(
-          messages.optional.defaultMessage,
-        );
-
-        el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.required} />);
-        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
-        expect(commentMessage).not.toContain(
-          messages.optional.defaultMessage,
-        );
-
-        expect(commentMessage).toContain(
-          messages.addComments.defaultMessage,
-        );
-      });
-
-      test('is not grading', () => {
-        let commentMessage;
-
-        el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.optional} />);
-        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
-        expect(commentMessage).toContain(
-          messages.optional.defaultMessage,
-        );
-
-        el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.required} />);
-        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
-        expect(commentMessage).not.toContain(
-          messages.optional.defaultMessage,
-        );
-
-        expect(commentMessage).toContain(
-          messages.comments.defaultMessage,
-        );
       });
     });
   });
@@ -160,17 +99,17 @@ describe('Criterion Feedback', () => {
     beforeEach(() => {
       mapped = mapStateToProps(testState, ownProps);
     });
-    test('selectors.app.rubric.criterionFeedbackConfig', () => {
+    it('gets config from selectors.app.rubric.criterionFeedbackConfig', () => {
       expect(mapped.config).toEqual(
         selectors.app.rubric.criterionFeedbackConfig(testState, ownProps),
       );
     });
-    test('selector.grading.selected.criterionFeedback', () => {
+    it('gets value from selectors.grading.selected.criterionFeedback', () => {
       expect(mapped.value).toEqual(
         selectors.grading.selected.criterionFeedback(testState, ownProps),
       );
     });
-    test('selector.grading.validation.criterionFeedbackIsInvalid', () => {
+    it('gets isInvalid from selectors.grading.validation.criterionFeedbackIsInvalid', () => {
       expect(mapped.isInvalid).toEqual(
         selectors.grading.validation.criterionFeedbackIsInvalid(
           testState,
@@ -181,7 +120,7 @@ describe('Criterion Feedback', () => {
   });
 
   describe('mapDispatchToProps', () => {
-    test('maps actions.grading.setCriterionFeedback to setValue prop', () => {
+    it('maps actions.grading.setCriterionFeedback to setValue prop', () => {
       expect(mapDispatchToProps.setValue).toEqual(
         actions.grading.setCriterionFeedback,
       );

src/containers/CriterionContainer/RadioCriterion.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { Form } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from 'data/redux';
 import messages from './messages';
@@ -11,51 +11,46 @@ import messages from './messages';
 /**
  * <RadioCriterion />
  */
-export class RadioCriterion extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-  }
+export const RadioCriterion = ({
+  orderNum,
+  isGrading,
+  config,
+  data,
+  setCriterionOption,
+  isInvalid,
+}) => {
+  const intl = useIntl();
 
-  onChange(event) {
-    this.props.setCriterionOption({
-      orderNum: this.props.orderNum,
+  const onChange = (event) => {
+    setCriterionOption({
+      orderNum,
       value: event.target.value,
     });
-  }
+  };
 
-  render() {
-    const {
-      config,
-      data,
-      intl,
-      isGrading,
-      isInvalid,
-    } = this.props;
-    return (
-      <Form.RadioSet name={config.name} value={data}>
-        {config.options.map((option) => (
-          <Form.Radio
-            className="criteria-option align-items-center"
-            key={option.name}
-            value={option.name}
-            description={intl.formatMessage(messages.optionPoints, { points: option.points })}
-            onChange={this.onChange}
-            disabled={!isGrading}
-            style={{ flexShrink: 0 }}
-          >
-            {option.label}
-          </Form.Radio>
-        ))}
-        {isInvalid && (
-        <Form.Control.Feedback type="invalid" className="feedback-error-msg">
-          {intl.formatMessage(messages.rubricSelectedError)}
-        </Form.Control.Feedback>
-        )}
-      </Form.RadioSet>
-    );
-  }
-}
+  return (
+    <Form.RadioSet name={config.name} value={data}>
+      {config.options.map((option) => (
+        <Form.Radio
+          className="criteria-option align-items-center"
+          key={option.name}
+          value={option.name}
+          description={intl.formatMessage(messages.optionPoints, { points: option.points })}
+          onChange={onChange}
+          disabled={!isGrading}
+          style={{ flexShrink: 0 }}
+        >
+          {option.label}
+        </Form.Radio>
+      ))}
+      {isInvalid && (
+      <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+        {intl.formatMessage(messages.rubricSelectedError)}
+      </Form.Control.Feedback>
+      )}
+    </Form.RadioSet>
+  );
+};
 
 RadioCriterion.defaultProps = {
   data: {
@@ -67,8 +62,6 @@ RadioCriterion.defaultProps = {
 RadioCriterion.propTypes = {
   orderNum: PropTypes.number.isRequired,
   isGrading: PropTypes.bool.isRequired,
-  // injected
-  intl: intlShape.isRequired,
   // redux
   config: PropTypes.shape({
     prompt: PropTypes.string,
@@ -99,4 +92,4 @@ export const mapDispatchToProps = {
   setCriterionOption: actions.grading.setCriterionOption,
 };
 
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(RadioCriterion));
+export default connect(mapStateToProps, mapDispatchToProps)(RadioCriterion);

src/containers/CriterionContainer/RadioCriterion.test.jsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { screen } from '@testing-library/react';
 
 import { actions, selectors } from 'data/redux';
-import { formatMessage } from 'testUtils';
 import {
   RadioCriterion,
   mapDispatchToProps,
   mapStateToProps,
 } from './RadioCriterion';
+import { renderWithIntl } from '../../testUtils';
 
 jest.mock('data/redux/app/selectors', () => ({
   rubric: {
@@ -31,7 +30,6 @@ jest.mock('data/redux/grading/selectors', () => ({
 
 describe('Radio Criterion Container', () => {
   const props = {
-    intl: { formatMessage },
     orderNum: 1,
     isGrading: true,
     config: {
@@ -55,70 +53,47 @@ describe('Radio Criterion Container', () => {
         },
       ],
     },
-    data: 'selected radio option',
+    data: 'option name',
     setCriterionOption: jest.fn().mockName('this.props.setCriterionOption'),
     isInvalid: false,
   };
 
-  let el;
-  beforeEach(() => {
-    el = shallow(<RadioCriterion {...props} />);
-    el.instance.onChange = jest.fn().mockName('this.onChange');
-  });
-  describe('snapshot', () => {
-    test('is grading', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
+  describe('component rendering', () => {
+    it('should render radio buttons that are enabled when in grading mode', () => {
+      const { container } = renderWithIntl(<RadioCriterion {...props} />);
 
-    test('is not grading', () => {
-      el = shallow(<RadioCriterion {...props} isGrading={false} />);
-      expect(el.snapshot).toMatchSnapshot();
-    });
+      const radioButtons = container.querySelectorAll('input[type="radio"]');
+      expect(radioButtons.length).toEqual(props.config.options.length);
 
-    test('radio contain invalid response', () => {
-      el = shallow(<RadioCriterion {...props} isInvalid />);
-      expect(el.snapshot).toMatchSnapshot();
-    });
-  });
-
-  describe('component', () => {
-    describe('rendering', () => {
-      test('is grading (all options are not disabled)', () => {
-        expect(el.isEmptyRender()).toEqual(false);
-        const optionsEl = el.instance.children;
-        expect(optionsEl.length).toEqual(props.config.options.length);
-        optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(false));
-      });
-
-      test('is not grading (all options are disabled)', () => {
-        el = shallow(<RadioCriterion {...props} isGrading={false} />);
-        expect(el.isEmptyRender()).toEqual(false);
-        const optionsEl = el.instance.children;
-        expect(optionsEl.length).toEqual(props.config.options.length);
-        optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(true));
-      });
-
-      test('radio contain invalid response (error response get render)', () => {
-        el = shallow(<RadioCriterion {...props} isInvalid />);
-        expect(el.isEmptyRender()).toEqual(false);
-        const radioErrorEl = el.instance.children[2];
-        expect(radioErrorEl.props.type).toBe('invalid');
-        expect(radioErrorEl.props.className).toBe('feedback-error-msg');
-        expect(radioErrorEl).toBeTruthy();
+      radioButtons.forEach(button => {
+        expect(button).not.toBeDisabled();
       });
     });
 
-    describe('behavior', () => {
-      test('onChange call set crition option', () => {
-        el = shallow(<RadioCriterion {...props} />);
-        el.instance.children[0].props.onChange({
-          target: {
-            value: 'some value',
-          },
-        });
-        expect(props.setCriterionOption).toBeCalledTimes(1);
+    it('should render radio buttons that are disabled when not in grading mode', () => {
+      renderWithIntl(<RadioCriterion {...props} isGrading={false} />);
+
+      const radioButtons = screen.queryAllByRole('radio');
+      expect(radioButtons.length).toEqual(props.config.options.length);
+
+      radioButtons.forEach(button => {
+        expect(button).toBeDisabled();
       });
     });
+
+    it('should render an error message when the criterion is invalid', () => {
+      const { container } = renderWithIntl(<RadioCriterion {...props} isInvalid />);
+
+      const errorMessage = container.querySelector('.feedback-error-msg');
+      expect(errorMessage).toBeInTheDocument();
+    });
+
+    it('should not render an error message when the criterion is valid', () => {
+      const { container } = renderWithIntl(<RadioCriterion {...props} />);
+
+      const errorMessage = container.querySelector('.feedback-error-msg');
+      expect(errorMessage).not.toBeInTheDocument();
+    });
   });
 
   describe('mapStateToProps', () => {
@@ -128,18 +103,20 @@ describe('Radio Criterion Container', () => {
     beforeEach(() => {
       mapped = mapStateToProps(testState, ownProps);
     });
-    test('selectors.app.rubric.criterionConfig', () => {
+
+    it('should properly map config from rubric criterion config selector', () => {
       expect(mapped.config).toEqual(
         selectors.app.rubric.criterionConfig(testState, ownProps),
       );
     });
 
-    test('selectors.grading.selected.criterionSelectedOption', () => {
+    it('should properly map data from selected criterion option selector', () => {
       expect(mapped.data).toEqual(
         selectors.grading.selected.criterionSelectedOption(testState, ownProps),
       );
     });
-    test('selectors.grading.validation.criterionSelectedOptionIsInvalid', () => {
+
+    it('should properly map isInvalid from criterion validation selector', () => {
       expect(mapped.isInvalid).toEqual(
         selectors.grading.validation.criterionSelectedOptionIsInvalid(testState, ownProps),
       );
@@ -147,7 +124,7 @@ describe('Radio Criterion Container', () => {
   });
 
   describe('mapDispatchToProps', () => {
-    test('maps actions.grading.setCriterionFeedback to setValue prop', () => {
+    it('should map setCriterionOption action to props', () => {
       expect(mapDispatchToProps.setCriterionOption).toEqual(
         actions.grading.setCriterionOption,
       );

src/containers/CriterionContainer/ReviewCriterion.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { screen } from '@testing-library/react';
 
 import { selectors } from 'data/redux';
+import { renderWithIntl } from '../../testUtils';
 import { ReviewCriterion, mapStateToProps } from './ReviewCriterion';
-import messages from './messages';
 
 jest.mock('data/redux/app/selectors', () => ({
   rubric: {
@@ -20,7 +20,7 @@ jest.mock('data/redux/grading/selectors', () => ({
   },
 }));
 
-describe('Review Crition Container', () => {
+describe('Review Criterion Container', () => {
   const props = {
     orderNum: 1,
     config: {
@@ -50,29 +50,20 @@ describe('Review Crition Container', () => {
     },
   };
 
-  let el;
-  beforeEach(() => {
-    el = shallow(<ReviewCriterion {...props} />);
-  });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
-
   describe('component', () => {
-    test('rendering (everything show up)', () => {
-      expect(el.isEmptyRender()).toEqual(false);
-      const optionsEl = el.instance.findByTestId('criteria-option');
-      expect(optionsEl.length).toEqual(props.config.options.length);
-      optionsEl.forEach((optionEl, i) => {
-        const option = props.config.options[i];
-        expect(optionEl.props.key).toEqual(option.name);
-        expect(optionEl.findByTestId('option-label')[0].children[0].el).toEqual(
-          option.label,
-        );
-        expect(optionEl.findByTestId('option-points')[0].children[0].props).toEqual({
-          ...messages.optionPoints,
-          values: { points: option.points },
-        });
+    it('renders all criteria options with correct labels and points', () => {
+      renderWithIntl(<ReviewCriterion {...props} />);
+
+      const optionsElements = screen.getAllByTestId('criteria-option');
+      expect(optionsElements.length).toEqual(props.config.options.length);
+
+      props.config.options.forEach((option, index) => {
+        const optionElement = optionsElements[index];
+        const labelElement = optionElement.querySelector('[data-testid="option-label"]');
+        const pointsElement = optionElement.querySelector('[data-testid="option-points"]');
+
+        expect(labelElement.textContent).toEqual(option.label);
+        expect(pointsElement.textContent).toEqual(`${props.config.options[index].points} points`);
       });
     });
   });
@@ -81,16 +72,18 @@ describe('Review Crition Container', () => {
     const testState = { arbitrary: 'some data' };
     const ownProps = { orderNum: props.orderNum };
     let mapped;
+
     beforeEach(() => {
       mapped = mapStateToProps(testState, ownProps);
     });
-    test('selectors.app.rubric.criterionConfig', () => {
+
+    it('should map criterion config from state', () => {
       expect(mapped.config).toEqual(
         selectors.app.rubric.criterionConfig(testState, ownProps),
       );
     });
 
-    test('selectors.grading.selected.criterionGradeData', () => {
+    it('should map criterion grade data from state', () => {
       expect(mapped.data).toEqual(
         selectors.grading.selected.criterionGradeData(testState, ownProps),
       );

src/containers/CriterionContainer/__snapshots__/CriterionFeedback.test.jsx.snap

@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Criterion Feedback snapshot feedback is configured to disabled 1`] = `null`;
-
-exports[`Criterion Feedback snapshot feedback is configured to optional 1`] = `
-<Form.Group>
-  <Form.Control
-    as="textarea"
-    className="criterion-feedback feedback-input"
-    data-testid="criterion-feedback-input"
-    disabled={false}
-    floatingLabel="Add comments (Optional)"
-    onChange={[Function]}
-    value="criterion value"
-  />
-</Form.Group>
-`;
-
-exports[`Criterion Feedback snapshot feedback is configured to required 1`] = `
-<Form.Group>
-  <Form.Control
-    as="textarea"
-    className="criterion-feedback feedback-input"
-    data-testid="criterion-feedback-input"
-    disabled={false}
-    floatingLabel="Add comments"
-    onChange={[Function]}
-    value="criterion value"
-  />
-</Form.Group>
-`;
-
-exports[`Criterion Feedback snapshot feedback value is invalid 1`] = `
-<Form.Group>
-  <Form.Control
-    as="textarea"
-    className="criterion-feedback feedback-input"
-    data-testid="criterion-feedback-input"
-    disabled={false}
-    floatingLabel="Add comments"
-    onChange={[Function]}
-    value="criterion value"
-  />
-  <Form.Control.Feedback
-    className="feedback-error-msg"
-    data-testid="criterion-feedback-error-msg"
-    type="invalid"
-  >
-    The feedback is required
-  </Form.Control.Feedback>
-</Form.Group>
-`;
-
-exports[`Criterion Feedback snapshot is graded 1`] = `
-<Form.Group>
-  <Form.Control
-    as="textarea"
-    className="criterion-feedback feedback-input"
-    data-testid="criterion-feedback-input"
-    disabled={true}
-    floatingLabel="Comments"
-    onChange={[Function]}
-    value="criterion value"
-  />
-</Form.Group>
-`;
-
-exports[`Criterion Feedback snapshot is grading 1`] = `
-<Form.Group>
-  <Form.Control
-    as="textarea"
-    className="criterion-feedback feedback-input"
-    data-testid="criterion-feedback-input"
-    disabled={false}
-    floatingLabel="Add comments"
-    onChange={[Function]}
-    value="criterion value"
-  />
-</Form.Group>
-`;

src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Radio Criterion Container snapshot is grading 1`] = `
-<Form.RadioSet
-  name="random name"
-  value="selected radio option"
->
-  <Form.Radio
-    className="criteria-option align-items-center"
-    description="1 points"
-    disabled={false}
-    key="option name"
-    onChange={[Function]}
-    style={
-      {
-        "flexShrink": 0,
-      }
-    }
-    value="option name"
-  >
-    this label
-  </Form.Radio>
-  <Form.Radio
-    className="criteria-option align-items-center"
-    description="2 points"
-    disabled={false}
-    key="option name 2"
-    onChange={[Function]}
-    style={
-      {
-        "flexShrink": 0,
-      }
-    }
-    value="option name 2"
-  >
-    this label 2
-  </Form.Radio>
-</Form.RadioSet>
-`;
-
-exports[`Radio Criterion Container snapshot is not grading 1`] = `
-<Form.RadioSet
-  name="random name"
-  value="selected radio option"
->
-  <Form.Radio
-    className="criteria-option align-items-center"
-    description="1 points"
-    disabled={true}
-    key="option name"
-    onChange={[Function]}
-    style={
-      {
-        "flexShrink": 0,
-      }
-    }
-    value="option name"
-  >
-    this label
-  </Form.Radio>
-  <Form.Radio
-    className="criteria-option align-items-center"
-    description="2 points"
-    disabled={true}
-    key="option name 2"
-    onChange={[Function]}
-    style={
-      {
-        "flexShrink": 0,
-      }
-    }
-    value="option name 2"
-  >
-    this label 2
-  </Form.Radio>
-</Form.RadioSet>
-`;
-
-exports[`Radio Criterion Container snapshot radio contain invalid response 1`] = `
-<Form.RadioSet
-  name="random name"
-  value="selected radio option"
->
-  <Form.Radio
-    className="criteria-option align-items-center"
-    description="1 points"
-    disabled={false}
-    key="option name"
-    onChange={[Function]}
-    style={
-      {
-        "flexShrink": 0,
-      }
-    }
-    value="option name"
-  >
-    this label
-  </Form.Radio>
-  <Form.Radio
-    className="criteria-option align-items-center"
-    description="2 points"
-    disabled={false}
-    key="option name 2"
-    onChange={[Function]}
-    style={
-      {
-        "flexShrink": 0,
-      }
-    }
-    value="option name 2"
-  >
-    this label 2
-  </Form.Radio>
-  <Form.Control.Feedback
-    className="feedback-error-msg"
-    type="invalid"
-  >
-    Rubric selection is required
-  </Form.Control.Feedback>
-</Form.RadioSet>
-`;

src/containers/CriterionContainer/__snapshots__/ReviewCriterion.test.jsx.snap

@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Review Crition Container snapshot 1`] = `
-<div
-  className="review-criterion"
->
-  <div
-    className="criteria-option"
-    data-testid="criteria-option"
-    key="option name"
-  >
-    <div>
-      <Form.Label
-        className="option-label"
-        data-testid="option-label"
-      >
-        this label
-      </Form.Label>
-      <FormControlFeedback
-        className="option-points"
-        data-testid="option-points"
-      >
-        <FormattedMessage
-          defaultMessage="{points} points"
-          description="criterion option point value display"
-          id="ora-grading.RadioCriterion.optionPoints"
-          values={
-            {
-              "points": 1,
-            }
-          }
-        />
-      </FormControlFeedback>
-    </div>
-  </div>
-  <div
-    className="criteria-option"
-    data-testid="criteria-option"
-    key="option name 2"
-  >
-    <div>
-      <Form.Label
-        className="option-label"
-        data-testid="option-label"
-      >
-        this label 2
-      </Form.Label>
-      <FormControlFeedback
-        className="option-points"
-        data-testid="option-points"
-      >
-        <FormattedMessage
-          defaultMessage="{points} points"
-          description="criterion option point value display"
-          id="ora-grading.RadioCriterion.optionPoints"
-          values={
-            {
-              "points": 2,
-            }
-          }
-        />
-      </FormControlFeedback>
-    </div>
-  </div>
-</div>
-`;

src/containers/CriterionContainer/__snapshots__/index.test.jsx.snap

@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Criterion Container snapshot is graded and is not grading 1`] = `
-<Form.Group>
-  <Form.Label
-    className="criteria-label"
-  >
-    <span
-      className="criteria-title"
-    >
-      prompt
-    </span>
-    <InfoPopover>
-      <div
-        className="help-popover-option"
-        data-testid="help-popover-option"
-        key="option name"
-      >
-        <strong>
-          this label
-        </strong>
-        <br />
-        explanation
-      </div>
-      <div
-        className="help-popover-option"
-        data-testid="help-popover-option"
-        key="option name 2"
-      >
-        <strong>
-          this label 2
-        </strong>
-        <br />
-        explanation 2
-      </div>
-    </InfoPopover>
-  </Form.Label>
-  <div
-    className="rubric-criteria"
-    data-testid="rubric-criteria"
-  >
-    <RadioCriterion
-      isGrading={false}
-      orderNum={1}
-    />
-  </div>
-  <CriterionFeedback
-    isGrading={false}
-    orderNum={1}
-  />
-</Form.Group>
-`;
-
-exports[`Criterion Container snapshot is ungraded and is grading 1`] = `
-<Form.Group>
-  <Form.Label
-    className="criteria-label"
-  >
-    <span
-      className="criteria-title"
-    >
-      prompt
-    </span>
-    <InfoPopover>
-      <div
-        className="help-popover-option"
-        data-testid="help-popover-option"
-        key="option name"
-      >
-        <strong>
-          this label
-        </strong>
-        <br />
-        explanation
-      </div>
-      <div
-        className="help-popover-option"
-        data-testid="help-popover-option"
-        key="option name 2"
-      >
-        <strong>
-          this label 2
-        </strong>
-        <br />
-        explanation 2
-      </div>
-    </InfoPopover>
-  </Form.Label>
-  <div
-    className="rubric-criteria"
-    data-testid="rubric-criteria"
-  >
-    <RadioCriterion
-      isGrading={true}
-      orderNum={1}
-    />
-  </div>
-  <CriterionFeedback
-    isGrading={true}
-    orderNum={1}
-  />
-</Form.Group>
-`;
-
-exports[`Criterion Container snapshot is ungraded and is not grading 1`] = `
-<Form.Group>
-  <Form.Label
-    className="criteria-label"
-  >
-    <span
-      className="criteria-title"
-    >
-      prompt
-    </span>
-    <InfoPopover>
-      <div
-        className="help-popover-option"
-        data-testid="help-popover-option"
-        key="option name"
-      >
-        <strong>
-          this label
-        </strong>
-        <br />
-        explanation
-      </div>
-      <div
-        className="help-popover-option"
-        data-testid="help-popover-option"
-        key="option name 2"
-      >
-        <strong>
-          this label 2
-        </strong>
-        <br />
-        explanation 2
-      </div>
-    </InfoPopover>
-  </Form.Label>
-  <div
-    className="rubric-criteria"
-    data-testid="rubric-criteria"
-  >
-    <ReviewCriterion
-      orderNum={1}
-    />
-  </div>
-  <CriterionFeedback
-    isGrading={false}
-    orderNum={1}
-  />
-</Form.Group>
-`;

src/containers/CriterionContainer/index.test.jsx

@@ -1,15 +1,50 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import PropTypes from 'prop-types';
 
 import { selectors } from 'data/redux';
 import { gradeStatuses } from 'data/services/lms/constants';
 
 import { CriterionContainer, mapStateToProps } from '.';
 
-jest.mock('components/InfoPopover', () => 'InfoPopover');
-jest.mock('./RadioCriterion', () => 'RadioCriterion');
-jest.mock('./CriterionFeedback', () => 'CriterionFeedback');
-jest.mock('./ReviewCriterion', () => 'ReviewCriterion');
+const MockRadioCriterion = ({ orderNum, isGrading }) => (
+  <div data-testid="radio-criterion-component">
+    RadioCriterion Component (orderNum={orderNum}, isGrading={String(isGrading)})
+  </div>
+);
+
+MockRadioCriterion.propTypes = {
+  orderNum: PropTypes.number.isRequired,
+  isGrading: PropTypes.bool.isRequired,
+};
+
+const MockReviewCriterion = ({ orderNum }) => (
+  <div data-testid="review-criterion-component">
+    ReviewCriterion Component (orderNum={orderNum})
+  </div>
+);
+
+MockReviewCriterion.propTypes = {
+  orderNum: PropTypes.number.isRequired,
+};
+
+const MockCriterionFeedback = ({ orderNum, isGrading }) => (
+  <div data-testid="criterion-feedback-component">
+    CriterionFeedback Component (orderNum={orderNum}, isGrading={String(isGrading)})
+  </div>
+);
+
+MockCriterionFeedback.propTypes = {
+  orderNum: PropTypes.number.isRequired,
+  isGrading: PropTypes.bool.isRequired,
+};
+
+const MockInfoPopover = ({ children }) => (
+  <div data-testid="info-popover">{children}</div>
+);
+
+MockInfoPopover.propTypes = {
+  children: PropTypes.node.isRequired,
+};
 
 jest.mock('data/redux/app/selectors', () => ({
   rubric: {
@@ -18,12 +53,18 @@ jest.mock('data/redux/app/selectors', () => ({
     })),
   },
 }));
+
 jest.mock('data/redux/grading/selectors', () => ({
   selected: {
     gradeStatus: jest.fn((...args) => ({ selectedGradeStatus: args })),
   },
 }));
 
+jest.mock('./RadioCriterion', () => jest.fn((props) => MockRadioCriterion(props)));
+jest.mock('./ReviewCriterion', () => jest.fn((props) => MockReviewCriterion(props)));
+jest.mock('./CriterionFeedback', () => jest.fn((props) => MockCriterionFeedback(props)));
+jest.mock('components/InfoPopover', () => jest.fn((props) => MockInfoPopover(props)));
+
 describe('Criterion Container', () => {
   const props = {
     isGrading: true,
@@ -51,53 +92,43 @@ describe('Criterion Container', () => {
     },
     gradeStatus: gradeStatuses.ungraded,
   };
-  let el;
-  beforeEach(() => {
-    el = shallow(<CriterionContainer {...props} />);
-  });
 
-  describe('snapshot', () => {
-    test('is ungraded and is grading', () => {
-      expect(el.snapshot).toMatchSnapshot();
+  describe('component rendering', () => {
+    it('displays the criterion prompt', () => {
+      render(<CriterionContainer {...props} />);
+      expect(screen.getByText('prompt')).toBeInTheDocument();
     });
 
-    test('is ungraded and is not grading', () => {
-      el = shallow(<CriterionContainer {...props} isGrading={false} />);
-      expect(el.snapshot).toMatchSnapshot();
+    it('displays all option explanations in the info popover', () => {
+      render(<CriterionContainer {...props} />);
+      const infoPopover = screen.getByTestId('info-popover');
+      expect(infoPopover).toHaveTextContent('explanation');
+      expect(infoPopover).toHaveTextContent('explanation 2');
+      expect(infoPopover).toHaveTextContent('this label');
+      expect(infoPopover).toHaveTextContent('this label 2');
     });
 
-    test('is graded and is not grading', () => {
-      el = shallow(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
-      expect(el.snapshot).toMatchSnapshot();
-    });
-  });
-
-  describe('component', () => {
-    test('rendering and all of the option show up', () => {
-      expect(el.isEmptyRender()).toEqual(false);
-      const optionsEl = el.instance.findByTestId('help-popover-option');
-      expect(optionsEl.length).toEqual(props.config.options.length);
-      optionsEl.forEach((optionEl, i) => {
-        expect(optionEl.props.key).toEqual(props.config.options[i].name);
-        expect(optionEl.children[2].el).toContain(props.config.options[i].explanation);
-      });
+    it('renders RadioCriterion when is ungraded and is grading', () => {
+      render(<CriterionContainer {...props} />);
+      expect(screen.getByTestId('radio-criterion-component')).toBeInTheDocument();
+      expect(screen.queryByTestId('review-criterion-component')).not.toBeInTheDocument();
     });
 
-    test('is ungraded and is grading (Radio criterion get render)', () => {
-      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
-      expect(rubricCriteria.children[0].el.type).toEqual('RadioCriterion');
+    it('renders ReviewCriterion when is ungraded and is not grading', () => {
+      render(<CriterionContainer {...props} isGrading={false} />);
+      expect(screen.getByTestId('review-criterion-component')).toBeInTheDocument();
+      expect(screen.queryByTestId('radio-criterion-component')).not.toBeInTheDocument();
     });
 
-    test('is ungraded and is not grading (Review criterion get render)', () => {
-      el = shallow(<CriterionContainer {...props} isGrading={false} />);
-      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
-      expect(rubricCriteria.children[0].el.type).toEqual('ReviewCriterion');
+    it('renders RadioCriterion when is graded and is not grading', () => {
+      render(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+      expect(screen.getByTestId('radio-criterion-component')).toBeInTheDocument();
+      expect(screen.queryByTestId('review-criterion-component')).not.toBeInTheDocument();
     });
 
-    test('is graded and is not grading (Radio criterion get render)', () => {
-      el = shallow(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
-      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
-      expect(rubricCriteria.children[0].el.type).toEqual('RadioCriterion');
+    it('renders CriterionFeedback component', () => {
+      render(<CriterionContainer {...props} />);
+      expect(screen.getByTestId('criterion-feedback-component')).toBeInTheDocument();
     });
   });
 
@@ -105,16 +136,18 @@ describe('Criterion Container', () => {
     const testState = { arbitraryState: 'some data' };
     const ownProps = { orderNum: props.orderNum };
     let mapped;
+
     beforeEach(() => {
       mapped = mapStateToProps(testState, ownProps);
     });
-    test('selectors.app.rubric.criterionConfig', () => {
+
+    it('maps rubric criterion config to props', () => {
       expect(mapped.config).toEqual(
         selectors.app.rubric.criterionConfig(testState, ownProps),
       );
     });
 
-    test('selectors.grading.selected.gradeStatus', () => {
+    it('maps grading status to props', () => {
       expect(mapped.gradeStatus).toEqual(
         selectors.grading.selected.gradeStatus(testState),
       );

src/containers/DemoWarning/DemoWarning.test.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors } from 'data/redux';
 import { DemoWarning, mapStateToProps } from '.';
+import messages from './messages';
 
 jest.mock('data/redux', () => ({
   selectors: {
@@ -10,24 +10,26 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-let el;
-
 describe('DemoWarning component', () => {
-  describe('snapshots', () => {
-    test('does not render if disabled flag is missing', () => {
-      el = shallow(<DemoWarning hide />);
-      expect(el.snapshot).toMatchSnapshot();
-      expect(el.isEmptyRender()).toEqual(true);
+  describe('behavior', () => {
+    it('does not render when hide prop is true', () => {
+      const { container } = render(<IntlProvider locale="en"><DemoWarning hide /></IntlProvider>);
+      expect(container.firstChild).toBeNull();
     });
-    test('snapshot: disabled flag is present', () => {
-      el = shallow(<DemoWarning hide={false} />);
-      expect(el.snapshot).toMatchSnapshot();
-      expect(el.isEmptyRender()).toEqual(false);
+
+    it('renders alert with warning message when hide prop is false', () => {
+      render(<IntlProvider locale="en"><DemoWarning hide={false} /></IntlProvider>);
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert).toHaveClass('alert-warning');
+      expect(alert).toHaveTextContent(messages.demoModeMessage.defaultMessage);
+      expect(alert).toHaveTextContent(messages.demoModeHeading.defaultMessage);
     });
   });
+
   describe('mapStateToProps', () => {
-    const testState = { some: 'test-state' };
-    test('hide is forwarded from app.isEnabled', () => {
+    it('maps hide prop from app.isEnabled selector', () => {
+      const testState = { some: 'test-state' };
       expect(mapStateToProps(testState).hide).toEqual(
         selectors.app.isEnabled(testState),
       );

src/containers/DemoWarning/__snapshots__/DemoWarning.test.jsx.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DemoWarning component snapshots does not render if disabled flag is missing 1`] = `null`;
-
-exports[`DemoWarning component snapshots snapshot: disabled flag is present 1`] = `
-<Alert
-  className="mb-0 rounded-0"
-  variant="warning"
->
-  <Alert.Heading>
-    <FormattedMessage
-      defaultMessage="Demo Mode"
-      description="Demo mode heading"
-      id="ora-grading.ReviewModal.demoHeading"
-    />
-  </Alert.Heading>
-  <p>
-    <FormattedMessage
-      defaultMessage="You are demoing the new ORA staff grading experience. You will be unable to submit grades until you activate the feature. This will become the default grading experience on May 9th (05/09/2022). To opt-in early, or opt-out, please contact Partner Support."
-      description="Demo mode message"
-      id="ora-grading.ReviewModal.demoMessage"
-    />
-  </p>
-</Alert>
-`;

src/containers/ListView/EmptySubmission.test.jsx

@@ -1,33 +1,38 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Hyperlink } from '@openedx/paragon';
-
+import { screen } from '@testing-library/react';
 import urls from 'data/services/lms/urls';
-
+import { renderWithIntl } from '../../testUtils';
 import EmptySubmission from './EmptySubmission';
 
 jest.mock('data/services/lms/urls', () => ({
   openResponse: (courseId) => `openResponseUrl(${courseId})`,
 }));
 
-jest.mock('./assets/emptyState.svg', () => './assets/emptyState.svg');
-
-let el;
+jest.mock('./assets/empty-state.svg', () => './assets/empty-state.svg');
 
 describe('EmptySubmission component', () => {
-  describe('component', () => {
-    const props = { courseId: 'test-course-id' };
-    beforeEach(() => {
-      el = shallow(<EmptySubmission {...props} />);
-    });
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('openResponse destination', () => {
-      expect(
-        el.instance.findByType(Hyperlink)[0].props.destination,
-      ).toEqual(urls.openResponse(props.courseId));
-    });
+  const props = { courseId: 'test-course-id' };
+
+  it('renders the empty state image with correct alt text', () => {
+    renderWithIntl(<EmptySubmission {...props} />);
+    expect(screen.getByAltText('empty state')).toBeInTheDocument();
+  });
+
+  it('renders the no results found title message', () => {
+    renderWithIntl(<EmptySubmission {...props} />);
+    expect(screen.getByText('Nothing here yet')).toBeInTheDocument();
+  });
+
+  it('renders hyperlink with correct destination URL', () => {
+    renderWithIntl(<EmptySubmission {...props} />);
+    const hyperlink = screen.getByRole('link');
+    expect(hyperlink).toHaveAttribute(
+      'href',
+      urls.openResponse(props.courseId),
+    );
+  });
+
+  it('renders the back to responses button', () => {
+    renderWithIntl(<EmptySubmission {...props} />);
+    expect(screen.getByText('Back to all open responses')).toBeInTheDocument();
   });
 });

src/containers/ListView/FilterStatusComponent.test.jsx

@@ -1,54 +1,18 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import PropTypes from 'prop-types';
+import { render } from '@testing-library/react';
+import { DataTableContext } from '@openedx/paragon';
 
 import * as module from './FilterStatusComponent';
 
-const fieldIds = [
-  'field-id-0',
-  'field-id-1',
-  'field-id-2',
-  'field-id-3',
-];
+const fieldIds = ['field-id-0', 'field-id-1', 'field-id-2', 'field-id-3'];
 const filterOrder = [1, 0, 3, 2];
-const filters = filterOrder.map(v => ({ id: fieldIds[v] }));
-const headers = [0, 1, 2, 3].map(v => ({
+const filters = filterOrder.map((v) => ({ id: fieldIds[v] }));
+const headers = [0, 1, 2, 3].map((v) => ({
   id: fieldIds[v],
   Header: `HeaDer-${v}`,
 }));
 
-describe('FilterStatusComponent hooks', () => {
-  const context = { headers, state: { filters } };
-  const mockTableContext = (newContext) => {
-    React.useContext.mockReturnValueOnce(newContext);
-  };
-  beforeEach(() => {
-    context.setAllFilters = jest.fn();
-  });
-  it('returns empty dict if setAllFilters or state.filters is falsey', () => {
-    mockTableContext({ ...context, setAllFilters: null });
-    expect(module.filterHooks()).toEqual({});
-    mockTableContext({ ...context, state: { filters: null } });
-    expect(module.filterHooks()).toEqual({});
-  });
-  describe('clearFilters', () => {
-    it('uses React.useCallback to clear filters, only once', () => {
-      mockTableContext(context);
-      const { cb, prereqs } = module.filterHooks().clearFilters.useCallback;
-      expect(prereqs).toEqual([context.setAllFilters]);
-      expect(context.setAllFilters).not.toHaveBeenCalled();
-      cb();
-      expect(context.setAllFilters).toHaveBeenCalledWith([]);
-    });
-  });
-  describe('filterNames', () => {
-    it('returns list of Header values by filter order', () => {
-      mockTableContext(context);
-      expect(module.filterHooks().filterNames).toEqual(
-        filterOrder.map(v => headers[v].Header),
-      );
-    });
-  });
-});
 describe('FilterStatusComponent component', () => {
   const props = {
     className: 'css-class-name',
@@ -58,34 +22,98 @@ describe('FilterStatusComponent component', () => {
     buttonClassName: 'css-class-name-for-button',
     showFilteredFields: true,
   };
-  const hookProps = {
-    clearFilters: jest.fn().mockName('hookProps.clearFilters'),
-    filterNames: ['filter-name-0', 'filter-name-1'],
-  };
   const { FilterStatusComponent } = module;
-  const mockHooks = (value) => {
-    jest.spyOn(module, 'filterHooks').mockReturnValueOnce(value);
+
+  const renderWithContext = (contextValue, componentProps = props) => {
+    const TestWrapper = ({ children }) => (
+      <DataTableContext.Provider value={contextValue}>
+        {children}
+      </DataTableContext.Provider>
+    );
+    TestWrapper.propTypes = {
+      children: PropTypes.node,
+    };
+    return render(
+      <TestWrapper>
+        <FilterStatusComponent {...componentProps} />
+      </TestWrapper>,
+    );
   };
-  describe('snapshot', () => {
-    describe('with filters', () => {
-      test('showFilteredFields', () => {
-        mockHooks(hookProps);
-        const el = shallow(<FilterStatusComponent {...props} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('showFilteredFields=false - hide filterTexts', () => {
-        mockHooks(hookProps);
-        const el = shallow(
-          <FilterStatusComponent {...props} showFilteredFields={false} />,
-        );
-        expect(el.snapshot).toMatchSnapshot();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('does not render when there are no filters', () => {
+      const contextValue = {
+        headers,
+        state: { filters: null },
+        setAllFilters: jest.fn(),
+      };
+      const { container } = renderWithContext(contextValue);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('does not render when setAllFilters is not available', () => {
+      const contextValue = { headers, state: { filters }, setAllFilters: null };
+      const { container } = renderWithContext(contextValue);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders clear filters button with correct text when filters exist', () => {
+      const contextValue = {
+        headers,
+        state: { filters },
+        setAllFilters: jest.fn(),
+      };
+      const { getByText } = renderWithContext(contextValue);
+      expect(getByText(props.clearFiltersText)).toBeInTheDocument();
+    });
+
+    it('displays filtered field names when showFilteredFields is true', () => {
+      const contextValue = {
+        headers,
+        state: { filters },
+        setAllFilters: jest.fn(),
+      };
+      const { getByText } = renderWithContext(contextValue);
+      const expectedFilterNames = filterOrder.map((v) => headers[v].Header);
+      expectedFilterNames.forEach((name) => {
+        expect(getByText(name, { exact: false })).toBeInTheDocument();
       });
     });
-    test('without filters', () => {
-      mockHooks({});
-      const el = shallow(<FilterStatusComponent {...props} />);
-      expect(el.snapshot).toMatchSnapshot();
-      expect(el.isEmptyRender()).toEqual(true);
+
+    it('does not display filtered field names when showFilteredFields is false', () => {
+      const contextValue = {
+        headers,
+        state: { filters },
+        setAllFilters: jest.fn(),
+      };
+      const { queryByText } = renderWithContext(contextValue, {
+        ...props,
+        showFilteredFields: false,
+      });
+      expect(queryByText(/Filtered by/)).not.toBeInTheDocument();
+    });
+
+    it('applies correct CSS classes to the component', () => {
+      const contextValue = {
+        headers,
+        state: { filters },
+        setAllFilters: jest.fn(),
+      };
+      const { container } = renderWithContext(contextValue);
+      expect(container.firstChild).toHaveClass(props.className);
+    });
+
+    it('calls setAllFilters with empty array when clear button is clicked', () => {
+      const setAllFilters = jest.fn();
+      const contextValue = { headers, state: { filters }, setAllFilters };
+      const { getByText } = renderWithContext(contextValue);
+      const clearButton = getByText(props.clearFiltersText);
+      clearButton.click();
+      expect(setAllFilters).toHaveBeenCalledWith([]);
     });
   });
 });

src/containers/ListView/ListError.test.jsx

@@ -1,19 +1,14 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { selectors, thunkActions } from 'data/redux';
-
-import { formatMessage } from 'testUtils';
-import {
-  ListError,
-  mapDispatchToProps,
-  mapStateToProps,
-} from './ListError';
+import { renderWithIntl } from '../../testUtils';
+import { ListError, mapDispatchToProps, mapStateToProps } from './ListError';
+import messages from './messages';
 
 jest.mock('data/redux', () => ({
   selectors: {
     app: {
-      courseId: (...args) => ({ courseId: args }),
+      courseId: jest.fn((state) => state.courseId || 'test-course-id'),
     },
   },
   thunkActions: {
@@ -27,41 +22,60 @@ jest.mock('data/services/lms/urls', () => ({
   openResponse: (courseId) => `api/openResponse/${courseId}`,
 }));
 
-let el;
-jest.useFakeTimers('modern');
-
 describe('ListError component', () => {
-  describe('component', () => {
-    const props = {
-      courseId: 'test-course-id',
-    };
-    beforeEach(() => {
-      props.loadSelectionForReview = jest.fn();
-      props.intl = { formatMessage };
-      props.initializeApp = jest.fn();
+  const props = {
+    courseId: 'test-course-id',
+    initializeApp: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('renders error alert with proper styling', () => {
+      renderWithIntl(<ListError {...props} />);
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert).toHaveClass('alert-danger');
     });
-    describe('render tests', () => {
-      beforeEach(() => {
-        el = shallow(<ListError {...props} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
+
+    it('displays error heading and message', () => {
+      renderWithIntl(<ListError {...props} />);
+      const heading = screen.getByRole('alert').querySelector('.alert-heading');
+      expect(heading).toBeInTheDocument();
+      expect(heading).toHaveTextContent(messages.loadErrorHeading.defaultMessage);
+    });
+
+    it('displays try again button', () => {
+      renderWithIntl(<ListError {...props} />);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveClass('btn-primary');
+    });
+
+    it('calls initializeApp when try again button is clicked', async () => {
+      renderWithIntl(<ListError {...props} />);
+      const user = userEvent.setup();
+      const button = screen.getByRole('button');
+      await user.click(button);
+      expect(props.initializeApp).toHaveBeenCalledTimes(1);
     });
   });
+
   describe('mapStateToProps', () => {
-    let mapped;
     const testState = { some: 'test-state' };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('courseId loads from app.courseId', () => {
+    it('maps courseId from app.courseId selector', () => {
+      const mapped = mapStateToProps(testState);
       expect(mapped.courseId).toEqual(selectors.app.courseId(testState));
     });
   });
+
   describe('mapDispatchToProps', () => {
-    it('loads initializeApp from thunkActions.app.initialize', () => {
-      expect(mapDispatchToProps.initializeApp).toEqual(thunkActions.app.initialize);
+    it('maps initializeApp from thunkActions.app.initialize', () => {
+      expect(mapDispatchToProps.initializeApp).toEqual(
+        thunkActions.app.initialize,
+      );
     });
   });
 });

src/containers/ListView/ListView.scss

@@ -1,12 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 span.pgn__icon.breadcrumb-arrow {
   width: 16px !important;
   height: 16px !important;
 };
 
 .empty-submission {
-  width: map-get($container-max-widths, "sm");
+  width: var(--pgn-size-container-max-width-sm);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,7 +13,7 @@ span.pgn__icon.breadcrumb-arrow {
   margin: auto;
 
   > img {
-    padding: map-get($spacers, 5);
+    padding: var(--pgn-spacing-spacer-5);
   }
 }
 
@@ -25,4 +23,14 @@ span.pgn__icon.breadcrumb-arrow {
       margin-bottom: 0;
     }
   }
+
+  @media (--pgn-size-breakpoint-max-width-xs) {
+    .badge {
+      white-space: normal;
+    }
+
+    .pgn__table-actions > div:first-of-type {
+      z-index: var(--pgn-elevation-modal-zindex) !important;
+    }
+  }
 }

src/containers/ListView/ListViewBreadcrumb.test.jsx

@@ -1,12 +1,6 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Hyperlink } from '@openedx/paragon';
-
-import * as constants from 'data/constants/app';
-import urls from 'data/services/lms/urls';
+import { screen } from '@testing-library/react';
 import { selectors } from 'data/redux';
-
+import { renderWithIntl } from '../../testUtils';
 import {
   ListViewBreadcrumb,
   mapStateToProps,
@@ -15,9 +9,9 @@ import {
 jest.mock('data/redux', () => ({
   selectors: {
     app: {
-      courseId: (...args) => ({ courseId: args }),
+      courseId: jest.fn((state) => state.courseId || 'test-course-id'),
       ora: {
-        name: (...args) => ({ oraName: args }),
+        name: jest.fn((state) => state.oraName || 'test-ora-name'),
       },
     },
   },
@@ -28,41 +22,60 @@ jest.mock('data/services/lms/urls', () => ({
   ora: (courseId, locationId) => `oraUrl(${courseId}, ${locationId})`,
 }));
 
-let el;
+jest.mock('data/constants/app', () => ({
+  locationId: () => 'test-location-id',
+}));
 
 describe('ListViewBreadcrumb component', () => {
-  describe('component', () => {
-    const props = {
-      courseId: 'test-course-id',
-      oraName: 'fake-ora-name',
-    };
-    beforeEach(() => {
-      el = shallow(<ListViewBreadcrumb {...props} />);
+  const props = {
+    courseId: 'test-course-id',
+    oraName: 'fake-ora-name',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('renders back to responses link with correct destination', () => {
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
+      const backLink = screen.getAllByRole('link').find(
+        link => link.getAttribute('href') === `openResponseUrl(${props.courseId})`,
+      );
+      expect(backLink).toBeInTheDocument();
     });
-    test('snapshot: empty (no list data)', () => {
-      expect(el.snapshot).toMatchSnapshot();
+
+    it('displays ORA name in heading', () => {
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
+      const heading = screen.getByText(props.oraName);
+      expect(heading).toBeInTheDocument();
+      expect(heading).toHaveClass('h3');
     });
-    test('openResponse destination', () => {
-      expect(
-        el.instance.findByType(Hyperlink)[0].props.destination,
-      ).toEqual(urls.openResponse(props.courseId));
+
+    it('renders ORA link with correct destination', () => {
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
+      const oraLink = screen.getAllByRole('link').find(
+        link => link.getAttribute('href') === `oraUrl(${props.courseId}, test-location-id)`,
+      );
+      expect(oraLink).toBeInTheDocument();
     });
-    test('ora destination', () => {
-      expect(
-        el.instance.findByType(Hyperlink)[1].props.destination,
-      ).toEqual(urls.ora(props.courseId, constants.locationId()));
+
+    it('displays back to responses text', () => {
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
+      expect(screen.getByText('Back to all open responses')).toBeInTheDocument();
     });
   });
+
   describe('mapStateToProps', () => {
-    let mapped;
     const testState = { some: 'test-state' };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('courseId loads from app.courseId', () => {
+
+    it('maps courseId from app.courseId selector', () => {
+      const mapped = mapStateToProps(testState);
       expect(mapped.courseId).toEqual(selectors.app.courseId(testState));
     });
-    test('oraName loads from app.ora.name', () => {
+
+    it('maps oraName from app.ora.name selector', () => {
+      const mapped = mapStateToProps(testState);
       expect(mapped.oraName).toEqual(selectors.app.ora.name(testState));
     });
   });

src/containers/ListView/SelectedBulkAction.test.jsx

@@ -1,20 +1,33 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '../../testUtils';
 import { SelectedBulkAction } from './SelectedBulkAction';
 
 describe('SelectedBulkAction component', () => {
   const props = {
     selectedFlatRows: [{ id: 1 }, { id: 2 }],
-    handleClick: jest.fn(),
+    handleClick: jest.fn(() => () => {}),
   };
-  test('snapshots', () => {
-    const el = shallow(<SelectedBulkAction {...props} handleClick={() => jest.fn()} />);
-    expect(el.snapshot).toMatchSnapshot();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  test('handleClick', () => {
-    shallow(<SelectedBulkAction {...props} />);
+  it('renders button with correct text and selected count', () => {
+    renderWithIntl(<SelectedBulkAction {...props} />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent(`View selected responses (${props.selectedFlatRows.length})`);
+  });
+
+  it('applies correct CSS class to button', () => {
+    renderWithIntl(<SelectedBulkAction {...props} />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('view-selected-responses-btn');
+    expect(button).toHaveClass('btn-primary');
+  });
+
+  it('calls handleClick with selectedFlatRows on render', () => {
+    renderWithIntl(<SelectedBulkAction {...props} />);
     expect(props.handleClick).toHaveBeenCalledWith(props.selectedFlatRows);
   });
 });

src/containers/ListView/SubmissionsTable.jsx

@@ -8,7 +8,7 @@ import {
   TextFilter,
   MultiSelectDropdownFilter,
 } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { gradingStatuses, submissionFields } from 'data/services/lms/constants';
 import lmsMessages from 'data/services/lms/messages';
@@ -25,113 +25,108 @@ import messages from './messages';
 /**
  * <SubmissionsTable />
  */
-export class SubmissionsTable extends React.Component {
-  get gradeStatusOptions() {
-    return Object.keys(gradingStatuses).map(statusKey => ({
-      name: this.translate(lmsMessages[gradingStatuses[statusKey]]),
-      value: gradingStatuses[statusKey],
-    }));
-  }
+export const SubmissionsTable = ({
+  isIndividual,
+  listData,
+  loadSelectionForReview,
+}) => {
+  const intl = useIntl();
 
-  get userLabel() {
-    return this.translate(this.props.isIndividual ? messages.username : messages.teamName);
-  }
+  const translate = (...args) => intl.formatMessage(...args);
 
-  get userAccessor() {
-    return this.props.isIndividual
-      ? submissionFields.username
-      : submissionFields.teamName;
-  }
+  const gradeStatusOptions = Object.keys(gradingStatuses).map(statusKey => ({
+    name: translate(lmsMessages[gradingStatuses[statusKey]]),
+    value: gradingStatuses[statusKey],
+  }));
 
-  get dateSubmittedLabel() {
-    return this.translate(this.props.isIndividual
-      ? messages.learnerSubmissionDate
-      : messages.teamSubmissionDate);
-  }
+  const userLabel = translate(isIndividual ? messages.username : messages.teamName);
 
-  formatDate = ({ value }) => {
+  const userAccessor = isIndividual
+    ? submissionFields.username
+    : submissionFields.teamName;
+
+  const dateSubmittedLabel = translate(isIndividual
+    ? messages.learnerSubmissionDate
+    : messages.teamSubmissionDate);
+
+  const formatDate = ({ value }) => {
     const date = new Date(moment(value));
     return date.toLocaleString();
   };
 
-  formatGrade = ({ value: score }) => (
+  const formatGrade = ({ value: score }) => (
     score === null ? '-' : `${score.pointsEarned}/${score.pointsPossible}`
   );
 
-  formatStatus = ({ value }) => (<StatusBadge status={value} />);
+  const formatStatus = ({ value }) => (<StatusBadge status={value} />);
 
-  translate = (...args) => this.props.intl.formatMessage(...args);
-
-  handleViewAllResponsesClick = (data) => () => {
+  const handleViewAllResponsesClick = (data) => () => {
     const getSubmissionUUID = (row) => row.original.submissionUUID;
-    this.props.loadSelectionForReview(data.map(getSubmissionUUID));
+    loadSelectionForReview(data.map(getSubmissionUUID));
   };
 
-  render() {
-    if (!this.props.listData.length) {
-      return null;
-    }
-    return (
-      <div className="submissions-table">
-        <DataTable
-          data-testid="data-table"
-          isFilterable
-          FilterStatusComponent={FilterStatusComponent}
-          numBreakoutFilters={2}
-          defaultColumnValues={{ Filter: TextFilter }}
-          isSelectable
-          isSortable
-          isPaginated
-          itemCount={this.props.listData.length}
-          initialState={{ pageSize: 10, pageIndex: 0 }}
-          data={this.props.listData}
-          tableActions={[
-            <TableAction handleClick={this.handleViewAllResponsesClick} />,
-          ]}
-          bulkActions={[
-            <SelectedBulkAction handleClick={this.handleViewAllResponsesClick} />,
-          ]}
-          columns={[
-            {
-              Header: this.userLabel,
-              accessor: this.userAccessor,
-            },
-            {
-              Header: this.dateSubmittedLabel,
-              accessor: submissionFields.dateSubmitted,
-              Cell: this.formatDate,
-              disableFilters: true,
-            },
-            {
-              Header: this.translate(messages.grade),
-              accessor: submissionFields.score,
-              Cell: this.formatGrade,
-              disableFilters: true,
-            },
-            {
-              Header: this.translate(messages.gradingStatus),
-              accessor: submissionFields.gradingStatus,
-              Cell: this.formatStatus,
-              Filter: MultiSelectDropdownFilter,
-              filter: 'includesValue',
-              filterChoices: this.gradeStatusOptions,
-            },
-          ]}
-        >
-          <DataTable.TableControlBar />
-          <DataTable.Table />
-          <DataTable.TableFooter />
-        </DataTable>
-      </div>
-    );
+  if (!listData.length) {
+    return null;
   }
-}
+
+  return (
+    <div className="submissions-table">
+      <DataTable
+        data-testid="data-table"
+        isFilterable
+        FilterStatusComponent={FilterStatusComponent}
+        numBreakoutFilters={2}
+        defaultColumnValues={{ Filter: TextFilter }}
+        isSelectable
+        isSortable
+        isPaginated
+        itemCount={listData.length}
+        initialState={{ pageSize: 10, pageIndex: 0 }}
+        data={listData}
+        tableActions={[
+          <TableAction handleClick={handleViewAllResponsesClick} />,
+        ]}
+        bulkActions={[
+          <SelectedBulkAction handleClick={handleViewAllResponsesClick} />,
+        ]}
+        columns={[
+          {
+            Header: userLabel,
+            accessor: userAccessor,
+          },
+          {
+            Header: dateSubmittedLabel,
+            accessor: submissionFields.dateSubmitted,
+            Cell: formatDate,
+            disableFilters: true,
+          },
+          {
+            Header: translate(messages.grade),
+            accessor: submissionFields.score,
+            Cell: formatGrade,
+            disableFilters: true,
+          },
+          {
+            Header: translate(messages.gradingStatus),
+            accessor: submissionFields.gradingStatus,
+            Cell: formatStatus,
+            Filter: MultiSelectDropdownFilter,
+            filter: 'includesValue',
+            filterChoices: gradeStatusOptions,
+          },
+        ]}
+      >
+        <DataTable.TableControlBar />
+        <DataTable.Table />
+        <DataTable.TableFooter />
+      </DataTable>
+    </div>
+  );
+};
 SubmissionsTable.defaultProps = {
   listData: [],
 };
 SubmissionsTable.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
   // redux
   isIndividual: PropTypes.bool.isRequired,
   listData: PropTypes.arrayOf(PropTypes.shape({
@@ -155,4 +150,4 @@ export const mapDispatchToProps = {
   loadSelectionForReview: thunkActions.grading.loadSelectionForReview,
 };
 
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SubmissionsTable));
+export default connect(mapStateToProps, mapDispatchToProps)(SubmissionsTable);

src/containers/ListView/SubmissionsTable.test.jsx

@@ -1,48 +1,31 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import {
-  MultiSelectDropdownFilter,
-  TextFilter,
-} from '@openedx/paragon';
-
+import { screen } from '@testing-library/react';
 import { selectors, thunkActions } from 'data/redux';
-import { gradingStatuses as statuses, submissionFields } from 'data/services/lms/constants';
-
-import StatusBadge from 'components/StatusBadge';
-import { formatMessage } from 'testUtils';
-import messages from './messages';
+import { gradingStatuses as statuses } from 'data/services/lms/constants';
+import { renderWithIntl } from '../../testUtils';
 import {
   SubmissionsTable,
   mapStateToProps,
   mapDispatchToProps,
 } from './SubmissionsTable';
 
-jest.mock('./FilterStatusComponent', () => jest.fn().mockName('FilterStatusComponent'));
-jest.mock('./TableAction', () => jest.fn().mockName('TableAction'));
-jest.mock('./SelectedBulkAction', () => jest.fn().mockName('SelectedBulkAction'));
-
 jest.mock('data/redux', () => ({
   selectors: {
     app: {
       ora: {
-        isIndividual: (...args) => ({ isIndividual: args }),
+        isIndividual: jest.fn((state) => state.isIndividual || true),
       },
     },
     submissions: {
-      listData: (...args) => ({ listData: args }),
+      listData: jest.fn((state) => state.listData || []),
     },
   },
   thunkActions: {
     grading: {
-      loadSelectionForReview: (...args) => ({ loadSelectionForReview: args }),
+      loadSelectionForReview: jest.fn(),
     },
   },
 }));
 
-let el;
-jest.useFakeTimers('modern');
-
 const dates = [
   '2021-12-08 09:06:15.319213+00:00',
   '2021-12-10 18:06:15.319213+00:00',
@@ -64,18 +47,15 @@ const individualData = [
     dateSubmitted: dates[1],
     gradingStatus: statuses.graded,
     score: {
-      pointsEarned: 2,
+      pointsEarned: 9,
       pointsPossible: 10,
     },
   },
   {
-    username: 'username-3',
-    dateSubmitted: dates[2],
-    gradingStatus: statuses.inProgress,
-    score: {
-      pointsEarned: 3,
-      pointsPossible: 10,
-    },
+    username: 'username-2',
+    dateSubmitted: dates[1],
+    gradingStatus: statuses.ungraded,
+    score: null,
   },
 ];
 
@@ -98,206 +78,88 @@ const teamData = [
       pointsPossible: 10,
     },
   },
-  {
-    teamName: 'teamName-3',
-    dateSubmitted: dates[2],
-    gradingStatus: statuses.inProgress,
-    score: {
-      pointsEarned: 3,
-      pointsPossible: 10,
-    },
-  },
 ];
 
 describe('SubmissionsTable component', () => {
-  describe('component', () => {
-    const props = {
-      isIndividual: true,
-      listData: [...individualData],
-    };
-    beforeEach(() => {
-      props.loadSelectionForReview = jest.fn();
-      props.intl = { formatMessage };
+  const defaultProps = {
+    isIndividual: true,
+    listData: [...individualData],
+    loadSelectionForReview: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('renders DataTable component', () => {
+      renderWithIntl(<SubmissionsTable {...defaultProps} />);
+      const submissionsTable = screen.getByRole('table');
+      expect(submissionsTable).toBeInTheDocument();
     });
-    describe('render tests', () => {
-      const mockMethod = (methodName) => {
-        el.instance[methodName] = jest.fn().mockName(`this.${methodName}`);
-      };
-      beforeEach(() => {
-        el = shallow(<SubmissionsTable {...props} />);
-      });
-      describe('snapshots', () => {
-        beforeEach(() => {
-          mockMethod('handleViewAllResponsesClick');
-          mockMethod('formatDate');
-          mockMethod('formatGrade');
-          mockMethod('formatStatus');
-        });
-        test('snapshot: empty (no list data)', () => {
-          el = shallow(<SubmissionsTable {...props} listData={[]} />);
-          expect(el.snapshot).toMatchSnapshot();
-          expect(el.isEmptyRender()).toEqual(true);
-        });
-        test('snapshot: happy path', () => {
-          expect(el.snapshot).toMatchSnapshot();
-        });
-        test('snapshot: team happy path', () => {
-          el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
-          expect(el.snapshot).toMatchSnapshot();
-        });
-      });
-      describe('DataTable', () => {
-        let tableProps;
-        beforeEach(() => {
-          tableProps = el.instance.findByTestId('data-table')[0].props;
-        });
-        test.each([
-          'isFilterable',
-          'isSelectable',
-          'isSortable',
-          'isPaginated',
-        ])('%s', key => expect(tableProps[key]).toEqual(true));
-        test.each([
-          ['numBreakoutFilters', 2],
-          ['defaultColumnValues', { Filter: TextFilter }],
-          ['itemCount', 3],
-          ['initialState', { pageSize: 10, pageIndex: 0 }],
-        ])('%s = %p', (key, value) => expect(tableProps[key]).toEqual(value));
-        describe('individual columns', () => {
-          let columns;
-          beforeEach(() => {
-            columns = tableProps.columns;
-          });
-          test('username column', () => {
-            expect(columns[0]).toEqual({
-              Header: messages.username.defaultMessage,
-              accessor: submissionFields.username,
-            });
-          });
-          test('submission date column', () => {
-            expect(columns[1]).toEqual({
-              Header: messages.learnerSubmissionDate.defaultMessage,
-              accessor: submissionFields.dateSubmitted,
-              Cell: el.instance.children[0].props.columns[1].Cell,
-              disableFilters: true,
-            });
-          });
-          test('grade column', () => {
-            expect(columns[2]).toEqual({
-              Header: messages.grade.defaultMessage,
-              accessor: submissionFields.score,
-              Cell: el.instance.children[0].props.columns[2].Cell,
-              disableFilters: true,
-            });
-          });
-          test('grading status column', () => {
-            expect(columns[3]).toEqual({
-              Header: messages.gradingStatus.defaultMessage,
-              accessor: submissionFields.gradingStatus,
-              Cell: el.instance.children[0].props.columns[3].Cell,
-              Filter: MultiSelectDropdownFilter,
-              filter: 'includesValue',
-              filterChoices: el.instance.children[0].props.columns[3].filterChoices,
-            });
-          });
-        });
-        describe('team columns', () => {
-          let columns;
-          beforeEach(() => {
-            el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
-            columns = el.instance.findByTestId('data-table')[0].props.columns;
-          });
-          test('teamName column', () => {
-            expect(columns[0]).toEqual({
-              Header: messages.teamName.defaultMessage,
-              accessor: submissionFields.teamName,
-            });
-          });
-          test('submission date column', () => {
-            expect(columns[1]).toEqual({
-              Header: messages.teamSubmissionDate.defaultMessage,
-              accessor: submissionFields.dateSubmitted,
-              Cell: el.instance.children[0].props.columns[1].Cell,
-              disableFilters: true,
-            });
-          });
-          test('grade column', () => {
-            expect(columns[2]).toEqual({
-              Header: messages.grade.defaultMessage,
-              accessor: submissionFields.score,
-              Cell: el.instance.children[0].props.columns[2].Cell,
-              disableFilters: true,
-            });
-          });
-          test('grading status column', () => {
-            expect(columns[3]).toEqual({
-              Header: messages.gradingStatus.defaultMessage,
-              accessor: submissionFields.gradingStatus,
-              Cell: el.instance.children[0].props.columns[3].Cell,
-              Filter: MultiSelectDropdownFilter,
-              filter: 'includesValue',
-              filterChoices: el.instance.children[0].props.columns[3].filterChoices,
-            });
-          });
-        });
-      });
+
+    it('returns empty render when no list data provided', () => {
+      const { container } = renderWithIntl(<SubmissionsTable {...defaultProps} listData={[]} />);
+      expect(container.firstChild).toBeNull();
     });
-    describe('behavior', () => {
-      describe('formatDate method', () => {
-        it('returns the date in locale time string', () => {
-          const fakeDate = 16131215154955;
-          const fakeDateString = 'test-date-string';
-          const mock = jest.spyOn(Date.prototype, 'toLocaleString').mockReturnValue(fakeDateString);
-          expect(el.instance.children[0].props.columns[1].Cell({ value: fakeDate })).toEqual(fakeDateString);
-          mock.mockRestore();
-        });
-      });
-      describe('formatGrade method', () => {
-        it('returns "-" if grade is null', () => {
-          expect(el.instance.children[0].props.columns[2].Cell({ value: null })).toEqual('-');
-        });
-        it('returns <pointsEarned>/<pointsPossible> if grade exists', () => {
-          expect(
-            el.instance.children[0].props.columns[2].Cell({ value: { pointsEarned: 1, pointsPossible: 10 } }),
-          ).toEqual('1/10');
-        });
-      });
-      describe('formatStatus method', () => {
-        it('returns a StatusBadge with the given status', () => {
-          const status = 'graded';
-          expect(el.instance.children[0].props.columns[3].Cell({ value: 'graded' })).toEqual(
-            <StatusBadge status={status} />,
-          );
-        });
-      });
-      describe('handleViewAllResponsesClick', () => {
-        it('calls loadSelectionForReview with submissionUUID from all rows if there are no selectedRows', () => {
-          const data = [
-            { original: { submissionUUID: '123' } },
-            { original: { submissionUUID: '456' } },
-            { original: { submissionUUID: '789' } },
-          ];
-          el.instance.children[0].props.tableActions[0].props.handleClick(data)();
-          expect(el.shallowRenderer._instance.props.loadSelectionForReview).toHaveBeenCalledWith(['123', '456', '789']); // eslint-disable-line no-underscore-dangle
-        });
-      });
+
+    it('renders individual columns for individual submissions', () => {
+      renderWithIntl(<SubmissionsTable {...defaultProps} />);
+      expect(screen.getByText('Username')).toBeInTheDocument();
+      expect(screen.getByText('Learner submission date')).toBeInTheDocument();
+    });
+
+    it('renders team columns for team submissions', () => {
+      renderWithIntl(<SubmissionsTable {...defaultProps} isIndividual={false} listData={teamData} />);
+      expect(screen.getByText('Team name')).toBeInTheDocument();
+      expect(screen.getByText('Team submission date')).toBeInTheDocument();
+    });
+
+    it('formats date correctly', () => {
+      renderWithIntl(<SubmissionsTable {...defaultProps} />);
+      const formattedDate = screen.getAllByText('12/10/2021, 6:06:15 PM');
+      expect(formattedDate.length).toBeGreaterThan(0);
+    });
+
+    it('formats grade as dash when null', () => {
+      renderWithIntl(<SubmissionsTable {...defaultProps} />);
+      const ungradedBadge = screen.getAllByText('Ungraded')[1].parentElement;
+      const score = ungradedBadge.previousSibling;
+      expect(score).toHaveTextContent('-');
+    });
+
+    it('formats grade as points earned over points possible', () => {
+      renderWithIntl(<SubmissionsTable {...defaultProps} />);
+      const scored = screen.getByText('9/10');
+      expect(scored).toBeInTheDocument();
+    });
+
+    it('formats status as StatusBadge component', () => {
+      renderWithIntl(<SubmissionsTable {...defaultProps} />);
+      const gradedBadge = screen.getByText('Grading Completed');
+      expect(gradedBadge).toHaveClass('badge-success');
+      const ungradedBadge = screen.getAllByText('Ungraded')[0];
+      expect(ungradedBadge).toHaveClass('badge-primary');
     });
   });
+
   describe('mapStateToProps', () => {
-    let mapped;
     const testState = { some: 'test-state' };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('listData loads from submissions.listData', () => {
+
+    it('maps listData from submissions.listData selector', () => {
+      const mapped = mapStateToProps(testState);
       expect(mapped.listData).toEqual(selectors.submissions.listData(testState));
     });
+
+    it('maps isIndividual from app.ora.isIndividual selector', () => {
+      const mapped = mapStateToProps(testState);
+      expect(mapped.isIndividual).toEqual(selectors.app.ora.isIndividual(testState));
+    });
   });
+
   describe('mapDispatchToProps', () => {
-    it('loads loadSelectionForReview from thunkActions.grading.loadSelectionForReview', () => {
-      expect(
-        mapDispatchToProps.loadSelectionForReview,
-      ).toEqual(thunkActions.grading.loadSelectionForReview);
+    it('maps loadSelectionForReview from thunkActions', () => {
+      expect(mapDispatchToProps.loadSelectionForReview).toEqual(thunkActions.grading.loadSelectionForReview);
     });
   });
 });

src/containers/ListView/TableAction.test.jsx

@@ -1,29 +1,50 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '../../testUtils';
 import { TableAction } from './TableAction';
+import messages from './messages';
 
 describe('TableAction component', () => {
   const props = {
     tableInstance: { rows: [{ id: 1 }, { id: 2 }] },
-    handleClick: jest.fn(),
+    handleClick: jest.fn(() => () => {}),
   };
-  test('snapshots', () => {
-    const el = shallow(<TableAction {...props} handleClick={() => jest.fn()} />);
-    expect(el.snapshot).toMatchSnapshot();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  test('Inactive Button "View All Responses"', () => {
+  it('renders button with correct text', () => {
+    renderWithIntl(<TableAction {...props} />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent(messages.viewAllResponses.defaultMessage);
+  });
+
+  it('applies correct CSS class to button', () => {
+    renderWithIntl(<TableAction {...props} />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('view-all-responses-btn');
+    expect(button).toHaveClass('btn-primary');
+  });
+
+  it('enables button when rows are present', () => {
+    renderWithIntl(<TableAction {...props} />);
+    const button = screen.getByRole('button');
+    expect(button).not.toBeDisabled();
+  });
+
+  it('disables button when no rows are present', () => {
     const emptyProps = {
       tableInstance: { rows: [] },
-      handleClick: jest.fn(),
+      handleClick: jest.fn(() => () => {}),
     };
-    const el = shallow(<TableAction {...emptyProps} />);
-    expect(el.snapshot).toMatchSnapshot();
+    renderWithIntl(<TableAction {...emptyProps} />);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
   });
 
-  test('handleClick', () => {
-    shallow(<TableAction {...props} />);
+  it('calls handleClick with table rows on render', () => {
+    renderWithIntl(<TableAction {...props} />);
     expect(props.handleClick).toHaveBeenCalledWith(props.tableInstance.rows);
   });
 });

src/containers/ListView/__snapshots__/EmptySubmission.test.jsx.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EmptySubmission component component snapshot 1`] = `
-<div
-  className="empty-submission"
->
-  <img
-    alt="empty state"
-    src="./assets/emptyState.svg"
-  />
-  <h3>
-    <FormattedMessage
-      defaultMessage="Nothing here yet"
-      description="Empty table for the submission table title"
-      id="ora-grading.ListView.noResultsFoundTitle"
-    />
-  </h3>
-  <p>
-    <FormattedMessage
-      defaultMessage="When learners submit responses, they will appear here"
-      description="Empty table messages"
-      id="ora-grading.ListView.noResultsFoundBody"
-    />
-  </p>
-  <Hyperlink
-    className="py-4"
-    destination="openResponseUrl(test-course-id)"
-  >
-    <Button
-      variant="outline-primary"
-    >
-      <FormattedMessage
-        defaultMessage="Back to all open responses"
-        description="Breadcrumbs link text to return to ORA list in LMS"
-        id="ora-grading.ListView.ListViewBreadcrumbs.backToResponses"
-      />
-    </Button>
-  </Hyperlink>
-</div>
-`;

src/containers/ListView/__snapshots__/FilterStatusComponent.test.jsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilterStatusComponent component snapshot with filters showFilteredFields 1`] = `
-<div
-  className="css-class-name"
->
-  <p>
-    Filtered by 
-    filter-name-0, filter-name-1
-  </p>
-  <Button
-    className="css-class-name-for-button"
-    onClick={[MockFunction hookProps.clearFilters]}
-    size="button-size"
-    variant="button-variant"
-  >
-    clear-filter-text
-  </Button>
-</div>
-`;
-
-exports[`FilterStatusComponent component snapshot with filters showFilteredFields=false - hide filterTexts 1`] = `
-<div
-  className="css-class-name"
->
-  <Button
-    className="css-class-name-for-button"
-    onClick={[MockFunction hookProps.clearFilters]}
-    size="button-size"
-    variant="button-variant"
-  >
-    clear-filter-text
-  </Button>
-</div>
-`;
-
-exports[`FilterStatusComponent component snapshot without filters 1`] = `null`;

src/containers/ListView/__snapshots__/ListError.test.jsx.snap

@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListError component component render tests snapshot 1`] = `
-<Alert
-  actions={
-    [
-      <Button
-        onClick={[MockFunction]}
-      >
-        <FormattedMessage
-          defaultMessage="Reload submissions"
-          description="Reload button text in case of network failure"
-          id="ora-grading.ListView.reloadSubmissions"
-        />
-      </Button>,
-    ]
-  }
-  variant="danger"
->
-  <Alert.Heading>
-    <FormattedMessage
-      defaultMessage="Error loading submissions"
-      description="Initialization failure alert header"
-      id="ora-grading.ListView.loadErrorHeading"
-    />
-  </Alert.Heading>
-  <p>
-    <FormattedMessage
-      defaultMessage="An error occurred while loading the submissions for this response. Try reloading the page or going {backToResponses}."
-      description="Initialization failure alert message line 2"
-      id="ora-grading.ListView.loadErrorMessage1"
-      values={
-        {
-          "backToResponses": <Hyperlink
-            destination="api/openResponse/test-course-id"
-          >
-            <FormattedMessage
-              defaultMessage="back to all Open Responses"
-              description="lowercase string for link to list of all open responses in lms"
-              id="ora-grading.ListView.backToResponsesLowercase"
-            />
-          </Hyperlink>,
-        }
-      }
-    />
-  </p>
-</Alert>
-`;

src/containers/ListView/__snapshots__/ListViewBreadcrumb.test.jsx.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListViewBreadcrumb component component snapshot: empty (no list data) 1`] = `
-<Fragment>
-  <Hyperlink
-    className="py-4"
-    destination="openResponseUrl(test-course-id)"
-  >
-    <Icon
-      className="d-inline-block mr-3 breadcrumb-arrow"
-      src={[MockFunction icons.ArrowBack]}
-    />
-    <FormattedMessage
-      defaultMessage="Back to all open responses"
-      description="Breadcrumbs link text to return to ORA list in LMS"
-      id="ora-grading.ListView.ListViewBreadcrumbs.backToResponses"
-    />
-  </Hyperlink>
-  <p
-    className="py-4"
-  >
-    <span
-      className="h3"
-    >
-      fake-ora-name
-    </span>
-    <Hyperlink
-      className="align-middle"
-      destination="oraUrl(test-course-id, fake-location-id)"
-    >
-      <Icon
-        className="d-inline-block"
-        src={[MockFunction icons.Launch]}
-      />
-    </Hyperlink>
-  </p>
-</Fragment>
-`;

src/containers/ListView/__snapshots__/SelectedBulkAction.test.jsx.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectedBulkAction component snapshots 1`] = `
-<Button
-  className="view-selected-responses-btn"
-  onClick={[MockFunction]}
-  variant="primary"
->
-  <FormattedMessage
-    defaultMessage="View selected responses ({value})"
-    description="Button text to load selected responses for review/grading"
-    id="ora-grading.ListView.viewSelectedResponses"
-    values={
-      {
-        "value": 2,
-      }
-    }
-  />
-</Button>
-`;

src/containers/ListView/__snapshots__/SubmissionsTable.test.jsx.snap

@@ -1,247 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SubmissionsTable component component render tests snapshots snapshot: empty (no list data) 1`] = `null`;
-
-exports[`SubmissionsTable component component render tests snapshots snapshot: happy path 1`] = `
-<div
-  className="submissions-table"
->
-  <DataTable
-    FilterStatusComponent={[MockFunction FilterStatusComponent]}
-    bulkActions={
-      [
-        <mockConstructor
-          handleClick={[Function]}
-        />,
-      ]
-    }
-    columns={
-      [
-        {
-          "Header": "Username",
-          "accessor": "username",
-        },
-        {
-          "Cell": [Function],
-          "Header": "Learner submission date",
-          "accessor": "dateSubmitted",
-          "disableFilters": true,
-        },
-        {
-          "Cell": [Function],
-          "Header": "Grade",
-          "accessor": "score",
-          "disableFilters": true,
-        },
-        {
-          "Cell": [Function],
-          "Filter": "MultiSelectDropdownFilter",
-          "Header": "Grading status",
-          "accessor": "gradingStatus",
-          "filter": "includesValue",
-          "filterChoices": [
-            {
-              "name": "Ungraded",
-              "value": "ungraded",
-            },
-            {
-              "name": "Grading Completed",
-              "value": "graded",
-            },
-            {
-              "name": "Currently being graded by someone else",
-              "value": "locked",
-            },
-            {
-              "name": "You are currently grading this response",
-              "value": "in-progress",
-            },
-          ],
-        },
-      ]
-    }
-    data={
-      [
-        {
-          "dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
-          "gradingStatus": "ungraded",
-          "score": {
-            "pointsEarned": 1,
-            "pointsPossible": 10,
-          },
-          "username": "username-1",
-        },
-        {
-          "dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
-          "gradingStatus": "graded",
-          "score": {
-            "pointsEarned": 2,
-            "pointsPossible": 10,
-          },
-          "username": "username-2",
-        },
-        {
-          "dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
-          "gradingStatus": "in-progress",
-          "score": {
-            "pointsEarned": 3,
-            "pointsPossible": 10,
-          },
-          "username": "username-3",
-        },
-      ]
-    }
-    data-testid="data-table"
-    defaultColumnValues={
-      {
-        "Filter": "TextFilter",
-      }
-    }
-    initialState={
-      {
-        "pageIndex": 0,
-        "pageSize": 10,
-      }
-    }
-    isFilterable={true}
-    isPaginated={true}
-    isSelectable={true}
-    isSortable={true}
-    itemCount={3}
-    numBreakoutFilters={2}
-    tableActions={
-      [
-        <mockConstructor
-          handleClick={[Function]}
-        />,
-      ]
-    }
-  >
-    <DataTable.TableControlBar />
-    <DataTable.Table />
-    <DataTable.TableFooter />
-  </DataTable>
-</div>
-`;
-
-exports[`SubmissionsTable component component render tests snapshots snapshot: team happy path 1`] = `
-<div
-  className="submissions-table"
->
-  <DataTable
-    FilterStatusComponent={[MockFunction FilterStatusComponent]}
-    bulkActions={
-      [
-        <mockConstructor
-          handleClick={[Function]}
-        />,
-      ]
-    }
-    columns={
-      [
-        {
-          "Header": "Team name",
-          "accessor": "teamName",
-        },
-        {
-          "Cell": [Function],
-          "Header": "Team submission date",
-          "accessor": "dateSubmitted",
-          "disableFilters": true,
-        },
-        {
-          "Cell": [Function],
-          "Header": "Grade",
-          "accessor": "score",
-          "disableFilters": true,
-        },
-        {
-          "Cell": [Function],
-          "Filter": "MultiSelectDropdownFilter",
-          "Header": "Grading status",
-          "accessor": "gradingStatus",
-          "filter": "includesValue",
-          "filterChoices": [
-            {
-              "name": "Ungraded",
-              "value": "ungraded",
-            },
-            {
-              "name": "Grading Completed",
-              "value": "graded",
-            },
-            {
-              "name": "Currently being graded by someone else",
-              "value": "locked",
-            },
-            {
-              "name": "You are currently grading this response",
-              "value": "in-progress",
-            },
-          ],
-        },
-      ]
-    }
-    data={
-      [
-        {
-          "dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
-          "gradingStatus": "ungraded",
-          "score": {
-            "pointsEarned": 1,
-            "pointsPossible": 10,
-          },
-          "teamName": "teamName-1",
-        },
-        {
-          "dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
-          "gradingStatus": "graded",
-          "score": {
-            "pointsEarned": 2,
-            "pointsPossible": 10,
-          },
-          "teamName": "teamName-2",
-        },
-        {
-          "dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
-          "gradingStatus": "in-progress",
-          "score": {
-            "pointsEarned": 3,
-            "pointsPossible": 10,
-          },
-          "teamName": "teamName-3",
-        },
-      ]
-    }
-    data-testid="data-table"
-    defaultColumnValues={
-      {
-        "Filter": "TextFilter",
-      }
-    }
-    initialState={
-      {
-        "pageIndex": 0,
-        "pageSize": 10,
-      }
-    }
-    isFilterable={true}
-    isPaginated={true}
-    isSelectable={true}
-    isSortable={true}
-    itemCount={3}
-    numBreakoutFilters={2}
-    tableActions={
-      [
-        <mockConstructor
-          handleClick={[Function]}
-        />,
-      ]
-    }
-  >
-    <DataTable.TableControlBar />
-    <DataTable.Table />
-    <DataTable.TableFooter />
-  </DataTable>
-</div>
-`;

src/containers/ListView/__snapshots__/TableAction.test.jsx.snap

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TableAction component Inactive Button "View All Responses" 1`] = `
-<Button
-  className="view-all-responses-btn"
-  disabled={true}
-  variant="primary"
->
-  <FormattedMessage
-    defaultMessage="View all responses"
-    description="Button text to load all responses for review/grading"
-    id="ora-grading.ListView.viewAllResponses"
-  />
-</Button>
-`;
-
-exports[`TableAction component snapshots 1`] = `
-<Button
-  className="view-all-responses-btn"
-  disabled={false}
-  onClick={[MockFunction]}
-  variant="primary"
->
-  <FormattedMessage
-    defaultMessage="View all responses"
-    description="Button text to load all responses for review/grading"
-    id="ora-grading.ListView.viewAllResponses"
-  />
-</Button>
-`;

src/containers/ListView/__snapshots__/index.test.jsx.snap

@@ -1,56 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListView component component snapshots error 1`] = `
-<Container
-  className="py-4"
->
-  <ListError />
-  <ReviewModal />
-</Container>
-`;
-
-exports[`ListView component component snapshots loaded has data 1`] = `
-<Container
-  className="py-4"
->
-  <Fragment>
-    <ListViewBreadcrumb />
-    <SubmissionsTable />
-  </Fragment>
-  <ReviewModal />
-</Container>
-`;
-
-exports[`ListView component component snapshots loaded with no data 1`] = `
-<Container
-  className="py-4"
->
-  <EmptySubmission
-    courseId="test-course-id"
-  />
-  <ReviewModal />
-</Container>
-`;
-
-exports[`ListView component component snapshots loading 1`] = `
-<Container
-  className="py-4"
->
-  <div
-    className="w-100 h-100 text-center"
-  >
-    <Spinner
-      animation="border"
-      variant="primary"
-    />
-    <h4>
-      <FormattedMessage
-        defaultMessage="Loading responses"
-        description="loading text for submission response list"
-        id="ora-grading.ListView.loadingResponses"
-      />
-    </h4>
-  </div>
-  <ReviewModal />
-</Container>
-`;

src/containers/ListView/index.test.jsx

@@ -1,47 +1,93 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { screen } from '@testing-library/react';
 
 import { selectors, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
 
 import { formatMessage } from 'testUtils';
+import { renderWithIntl } from '../../testUtils';
 import { ListView, mapStateToProps, mapDispatchToProps } from '.';
+import messages from './messages';
 
-jest.mock('components/StatusBadge', () => 'StatusBadge');
-jest.mock('containers/ReviewModal', () => 'ReviewModal');
-jest.mock('./ListViewBreadcrumb', () => 'ListViewBreadcrumb');
-jest.mock('./ListError', () => 'ListError');
-jest.mock('./SubmissionsTable', () => 'SubmissionsTable');
-jest.mock('./EmptySubmission', () => 'EmptySubmission');
+jest.mock('containers/ReviewModal', () => {
+  const ReviewModal = () => <div data-testid="review-modal">ReviewModal</div>;
+  return ReviewModal;
+});
+
+jest.mock('./ListViewBreadcrumb', () => {
+  const ListViewBreadcrumb = () => (
+    <div data-testid="breadcrumb">Back to all open responses</div>
+  );
+  return ListViewBreadcrumb;
+});
+
+jest.mock('./ListError', () => {
+  const ListError = () => (
+    <div data-testid="list-error">
+      <button type="button">Reload submissions</button>
+    </div>
+  );
+  return ListError;
+});
+
+jest.mock('./SubmissionsTable', () => {
+  const SubmissionsTable = () => (
+    <div data-testid="submissions-table">SubmissionsTable</div>
+  );
+  return SubmissionsTable;
+});
+
+jest.mock('./EmptySubmission', () => {
+  const EmptySubmission = () => (
+    <div data-testid="empty-submission">
+      <h3>Nothing here yet</h3>
+      <p>When learners submit responses, they will appear here</p>
+    </div>
+  );
+  return EmptySubmission;
+});
 
 jest.mock('data/redux', () => ({
   selectors: {
     app: {
       courseId: (...args) => ({ courseId: args }),
+      isEnabled: () => false,
+      oraName: () => 'Test ORA Name',
     },
     requests: {
       isCompleted: (...args) => ({ isCompleted: args }),
       isFailed: (...args) => ({ isFailed: args }),
+      allowNavigation: () => true,
     },
     submissions: {
       isEmptySubmissionData: (...args) => ({ isEmptySubmissionData: args }),
     },
+    grading: {
+      activeIndex: () => 0,
+      selectionLength: () => 1,
+      selected: {
+        submissionUUID: () => null,
+        overallFeedback: () => '',
+        criteria: () => [],
+      },
+      next: {
+        doesExist: () => false,
+      },
+      prev: {
+        doesExist: () => false,
+      },
+    },
   },
   thunkActions: {
     app: {
       initialize: (...args) => ({ initialize: args }),
     },
+    grading: {
+      submitGrade: () => jest.fn(),
+    },
   },
 }));
 
-jest.mock('@openedx/paragon', () => ({
-  Container: 'Container',
-  Spinner: 'Spinner',
-}));
-
-let el;
-jest.useFakeTimers('modern');
-
 describe('ListView component', () => {
   describe('component', () => {
     const props = {
@@ -49,37 +95,75 @@ describe('ListView component', () => {
       isLoaded: false,
       hasError: false,
       isEmptySubmissionData: false,
+      initializeApp: jest.fn(),
+      intl: { formatMessage },
     };
-    beforeEach(() => {
-      props.initializeApp = jest.fn();
-      props.intl = { formatMessage };
-    });
-    describe('snapshots', () => {
-      beforeEach(() => {
-        el = shallow(<ListView {...props} />);
-      });
-      test('loading', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('loaded has data', () => {
-        el = shallow(<ListView {...props} isLoaded />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
 
-      test('loaded with no data', () => {
-        el = shallow(<ListView {...props} isLoaded isEmptySubmissionData />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('error', () => {
-        el = shallow(<ListView {...props} hasError />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
+    beforeEach(() => {
+      jest.clearAllMocks();
     });
-    describe('behavior', () => {
-      it('calls initializeApp on load', () => {
-        el = shallow(<ListView {...props} />);
-        expect(props.initializeApp).toHaveBeenCalled();
-      });
+
+    it('displays loading spinner and message when not loaded and no error', () => {
+      renderWithIntl(<ListView {...props} />);
+
+      // Check for loading message
+      expect(screen.getByText(messages.loadingResponses.defaultMessage)).toBeInTheDocument();
+
+      // Check for spinner by finding element with spinner class
+      const spinner = document.querySelector('.pgn__spinner');
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it('displays ListViewBreadcrumb and SubmissionsTable when loaded with data', () => {
+      renderWithIntl(<ListView {...props} isLoaded />);
+
+      expect(
+        screen.getByText('Back to all open responses'),
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('submissions-table')).toBeInTheDocument();
+      expect(screen.queryByText('FormattedMessage')).not.toBeInTheDocument();
+    });
+
+    it('displays EmptySubmission component when loaded but has no submission data', () => {
+      renderWithIntl(<ListView {...props} isLoaded isEmptySubmissionData />);
+
+      expect(
+        screen.getByRole('heading', { name: 'Nothing here yet' }),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByText(
+          'When learners submit responses, they will appear here',
+        ),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByText('Back to all open responses'),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('submissions-table')).not.toBeInTheDocument();
+    });
+
+    it('displays ListError component when there is an error', () => {
+      renderWithIntl(<ListView {...props} hasError />);
+
+      expect(
+        screen.getByRole('button', { name: 'Reload submissions' }),
+      ).toBeInTheDocument();
+      expect(screen.queryByText('FormattedMessage')).not.toBeInTheDocument();
+    });
+
+    it('always displays ReviewModal component regardless of state', () => {
+      const { rerender } = renderWithIntl(<ListView {...props} />);
+      expect(screen.getByText('ReviewModal')).toBeInTheDocument();
+
+      rerender(<ListView {...props} isLoaded />);
+      expect(screen.getByText('ReviewModal')).toBeInTheDocument();
+
+      rerender(<ListView {...props} hasError />);
+      expect(screen.getByText('ReviewModal')).toBeInTheDocument();
+    });
+
+    it('calls initializeApp on component mount', () => {
+      renderWithIntl(<ListView {...props} />);
+      expect(props.initializeApp).toHaveBeenCalledTimes(1);
     });
   });
   describe('mapStateToProps', () => {
@@ -89,27 +173,27 @@ describe('ListView component', () => {
     beforeEach(() => {
       mapped = mapStateToProps(testState);
     });
-    test('courseId loads from app.courseId', () => {
+    it('maps courseId from app.courseId selector', () => {
       expect(mapped.courseId).toEqual(selectors.app.courseId(testState));
     });
-    test('isLoaded loads from requests.isCompleted', () => {
+    it('maps isLoaded from requests.isCompleted selector', () => {
       expect(mapped.isLoaded).toEqual(
         selectors.requests.isCompleted(testState, { requestKey }),
       );
     });
-    test('hasError loads from requests.isFailed', () => {
+    it('maps hasError from requests.isFailed selector', () => {
       expect(mapped.hasError).toEqual(
         selectors.requests.isFailed(testState, { requestKey }),
       );
     });
-    test('isEmptySubmissionData loads from submissions.isEmptySubmissionData', () => {
+    it('maps isEmptySubmissionData from submissions.isEmptySubmissionData selector', () => {
       expect(mapped.isEmptySubmissionData).toEqual(
         selectors.submissions.isEmptySubmissionData(testState),
       );
     });
   });
   describe('mapDispatchToProps', () => {
-    it('loads initializeApp from thunkActions.app.initialize', () => {
+    it('maps initializeApp to thunkActions.app.initialize', () => {
       expect(mapDispatchToProps.initializeApp).toEqual(
         thunkActions.app.initialize,
       );

src/containers/NotificationsBanner/NotificationsBanner.test.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { getConfig } from '@edx/frontend-platform';
-
-import { NotificationsBanner } from '.';
-
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(),
-}));
-
-describe('NotificationsBanner component', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('snapshots with empty ACCOUNT_SETTINGS_URL', () => {
-    getConfig.mockReturnValue({
-      ACCOUNT_SETTINGS_URL: '',
-    });
-    const el = shallow(<NotificationsBanner hide />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-
-  test('snapshots with ACCOUNT_SETTINGS_URL', () => {
-    getConfig.mockReturnValue({
-      ACCOUNT_SETTINGS_URL: 'http://localhost:1997',
-    });
-    const el = shallow(<NotificationsBanner hide />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-});

src/containers/NotificationsBanner/__snapshots__/NotificationsBanner.test.jsx.snap

@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationsBanner component snapshots with ACCOUNT_SETTINGS_URL 1`] = `
-<PageBanner
-  variant="accentB"
->
-  <span>
-    <FormattedMessage
-      defaultMessage="You can now enable notifications for ORA assignments that require staff grading, from the "
-      description="user info message that user can enable notifications for ORA assignments"
-      id="ora-grading.NotificationsBanner.Message"
-    />
-    <Hyperlink
-      destination="http://localhost:1997/#notifications"
-      isInline={true}
-      rel="noopener noreferrer"
-      showLaunchIcon={false}
-      target="_blank"
-      variant="muted"
-    >
-      <FormattedMessage
-        defaultMessage="preferences center."
-        description="placeholder for the preferences center link"
-        id="ora-grading.NotificationsBanner.linkMessage"
-      />
-    </Hyperlink>
-  </span>
-</PageBanner>
-`;
-
-exports[`NotificationsBanner component snapshots with empty ACCOUNT_SETTINGS_URL 1`] = `
-<PageBanner
-  variant="accentB"
->
-  <span>
-    <FormattedMessage
-      defaultMessage="You can now enable notifications for ORA assignments that require staff grading, from the "
-      description="user info message that user can enable notifications for ORA assignments"
-      id="ora-grading.NotificationsBanner.Message"
-    />
-    <FormattedMessage
-      defaultMessage="preferences center."
-      description="placeholder for the preferences center link"
-      id="ora-grading.NotificationsBanner.linkMessage"
-    />
-  </span>
-</PageBanner>
-`;

src/containers/NotificationsBanner/index.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { PageBanner, Hyperlink } from '@openedx/paragon';
-
-import messages from './messages';
-
-export const NotificationsBanner = () => (
-  <PageBanner variant="accentB">
-    <span>
-      <FormattedMessage {...messages.infoMessage} />
-      {
-        (
-          getConfig().ACCOUNT_SETTINGS_URL === null
-            || getConfig().ACCOUNT_SETTINGS_URL === undefined
-            || getConfig().ACCOUNT_SETTINGS_URL.trim().length === 0
-        ) ? (
-          <FormattedMessage {...messages.notificationsBannerPreferencesCenterMessage} />
-          ) : (
-            <Hyperlink
-              isInline
-              variant="muted"
-              destination={`${getConfig().ACCOUNT_SETTINGS_URL}/#notifications`}
-              target="_blank"
-              rel="noopener noreferrer"
-              showLaunchIcon={false}
-            >
-              <FormattedMessage {...messages.notificationsBannerPreferencesCenterMessage} />
-            </Hyperlink>
-          )
-        }
-    </span>
-  </PageBanner>
-);
-
-export default NotificationsBanner;

src/containers/NotificationsBanner/messages.js

@@ -1,18 +0,0 @@
-/* eslint-disable quotes */
-import { defineMessages } from '@edx/frontend-platform/i18n';
-import { StrictDict } from 'utils';
-
-const messages = defineMessages({
-  infoMessage: {
-    id: 'ora-grading.NotificationsBanner.Message',
-    defaultMessage: 'You can now enable notifications for ORA assignments that require staff grading, from the ',
-    description: 'user info message that user can enable notifications for ORA assignments',
-  },
-  notificationsBannerPreferencesCenterMessage: {
-    id: 'ora-grading.NotificationsBanner.linkMessage',
-    defaultMessage: 'preferences center.',
-    description: 'placeholder for the preferences center link',
-  },
-});
-
-export default StrictDict(messages);

src/containers/ResponseDisplay/FileDownload.test.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { RequestKeys, RequestStates } from 'data/constants/requests';
 import { selectors, thunkActions } from 'data/redux';
 import {
@@ -9,10 +8,12 @@ import {
   FileDownload,
   statusMapping,
 } from './FileDownload';
+import messages from './messages';
+import { renderWithIntl } from '../../testUtils';
 
 jest.mock('data/redux', () => ({
   selectors: {
-    requests: { requestStatus: (...args) => ({ requestStatus: args }) },
+    requests: { requestStatus: jest.fn((state, { requestKey }) => ({ status: 'inactive', requestKey })) },
   },
   thunkActions: {
     download: { downloadFiles: jest.fn() },
@@ -20,50 +21,76 @@ jest.mock('data/redux', () => ({
 }));
 
 describe('FileDownload', () => {
-  describe('component', () => {
-    const props = {
-      requestStatus: { status: RequestStates.inactive },
-    };
-    let el;
-    beforeEach(() => {
-      props.downloadFiles = jest.fn().mockName('this.props.downloadFiles');
-      el = shallow(<FileDownload {...props} />);
+  const defaultProps = {
+    requestStatus: { status: RequestStates.inactive },
+    downloadFiles: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('renders StatefulButton with default state when inactive', () => {
+      renderWithIntl(<FileDownload {...defaultProps} />);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveTextContent(messages.downloadFiles.defaultMessage);
     });
-    describe('snapshot', () => {
-      test('download is inactive', () => {
-        expect(el.snapshot).toMatchSnapshot();
-        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.inactive]);
-      });
-      test('download is pending', () => {
-        el = shallow(<FileDownload {...props} requestStatus={{ status: RequestStates.pending }} />);
-        expect(el.snapshot).toMatchSnapshot();
-        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.pending]);
-      });
-      test('download is completed', () => {
-        el = shallow(<FileDownload {...props} requestStatus={{ status: RequestStates.completed }} />);
-        expect(el.snapshot).toMatchSnapshot();
-        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.completed]);
-      });
-      test('download is failed', () => {
-        el = shallow(<FileDownload {...props} requestStatus={{ status: RequestStates.failed }} />);
-        expect(el.snapshot).toMatchSnapshot();
-        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.failed]);
-      });
+
+    it('renders with pending state when download is pending', () => {
+      const props = { ...defaultProps, requestStatus: { status: RequestStates.pending } };
+      renderWithIntl(<FileDownload {...props} />);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('pgn__stateful-btn-state-pending');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toHaveTextContent(messages.downloading.defaultMessage);
+    });
+
+    it('renders with completed state when download is completed', () => {
+      const props = { ...defaultProps, requestStatus: { status: RequestStates.completed } };
+      renderWithIntl(<FileDownload {...props} />);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('pgn__stateful-btn-state-completed');
+    });
+
+    it('renders with failed state when download fails', () => {
+      const props = { ...defaultProps, requestStatus: { status: RequestStates.failed } };
+      renderWithIntl(<FileDownload {...props} />);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveClass('pgn__stateful-btn-state-failed');
+      expect(button).toHaveTextContent(messages.retryDownload.defaultMessage);
+    });
+
+    it('calls downloadFiles when button is clicked', async () => {
+      renderWithIntl(<FileDownload {...defaultProps} />);
+      const user = userEvent.setup();
+      const button = screen.getByRole('button');
+      await user.click(button);
+      expect(defaultProps.downloadFiles).toHaveBeenCalledTimes(1);
+    });
+
+    it('maps request states to button states correctly', () => {
+      expect(statusMapping[RequestStates.inactive]).toBe('default');
+      expect(statusMapping[RequestStates.pending]).toBe('pending');
+      expect(statusMapping[RequestStates.completed]).toBe('completed');
+      expect(statusMapping[RequestStates.failed]).toBe('failed');
     });
   });
+
   describe('mapStateToProps', () => {
-    let mapped;
-    const requestKey = RequestKeys.downloadFiles;
     const testState = { some: 'test-state' };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('requestStatus loads from requests.requestStatus(downloadFiles)', () => {
-      expect(mapped.requestStatus).toEqual(selectors.requests.requestStatus(testState, { requestKey }));
+
+    it('maps requestStatus from requests.requestStatus selector', () => {
+      const mapped = mapStateToProps(testState);
+      const expectedResult = selectors.requests.requestStatus(testState, { requestKey: RequestKeys.downloadFiles });
+      expect(mapped.requestStatus).toEqual(expectedResult);
     });
   });
+
   describe('mapDispatchToProps', () => {
-    it('loads downloadFiles from thunkActions.download.downloadFiles', () => {
+    it('maps downloadFiles from thunkActions', () => {
       expect(mapDispatchToProps.downloadFiles).toEqual(thunkActions.download.downloadFiles);
     });
   });

src/containers/ResponseDisplay/PreviewDisplay.test.jsx

@@ -1,56 +1,56 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
 import { FileTypes } from 'data/constants/files';
-import { FileRenderer } from 'components/FilePreview';
+import { renderWithIntl } from '../../testUtils';
 import { PreviewDisplay } from './PreviewDisplay';
 
-jest.mock('components/FilePreview', () => ({
-  FileRenderer: () => 'FileRenderer',
-}));
-
 describe('PreviewDisplay', () => {
-  describe('component', () => {
-    const supportedTypes = Object.values(FileTypes);
-    const props = {
-      files: [
-        ...supportedTypes.map((fileType, index) => ({
-          name: `fake_file_${index}.${fileType}`,
-          description: `file description ${index}`,
-          downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
-        })),
-        {
-          name: 'bad_ext_fake_file.other',
-          description: 'bad_ext file description',
-          downloadUrl: 'bad_ext.other',
-        },
-      ],
+  const supportedTypes = Object.values(FileTypes);
+  const props = {
+    files: [
+      ...supportedTypes.map((fileType, index) => ({
+        name: `fake_file_${index}.${fileType}`,
+        description: `file description ${index}`,
+        downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
+      })),
+      {
+        name: 'bad_ext_fake_file.other',
+        description: 'bad_ext file description',
+        downloadUrl: 'bad_ext.other',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders preview display container', () => {
+    renderWithIntl(<PreviewDisplay {...props} />);
+    const previewDisplay = screen.getByRole('button', { name: 'fake_file_0.pdf' });
+    expect(previewDisplay).toBeInTheDocument();
+  });
+
+  it('renders empty container when no files provided', () => {
+    renderWithIntl(<PreviewDisplay files={[]} />);
+    const previewDisplay = document.querySelector('.preview-display');
+    expect(previewDisplay).toBeInTheDocument();
+    expect(previewDisplay.children.length).toBe(0);
+  });
+
+  it('only renders supported file types', () => {
+    renderWithIntl(<PreviewDisplay {...props} />);
+    const previewDisplay = document.querySelector('.preview-display');
+    expect(previewDisplay.children.length).toBe(supportedTypes.length);
+  });
+
+  it('filters out unsupported file types', () => {
+    const unsupportedFile = {
+      name: 'unsupported.xyz',
+      description: 'unsupported file',
+      downloadUrl: '/unsupported.xyz',
     };
-    let el;
-    beforeEach(() => {
-      el = shallow(<PreviewDisplay {...props} />);
-    });
-
-    describe('snapshot', () => {
-      test('files render with props', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('files does not exist', () => {
-        el = shallow(<PreviewDisplay {...props} files={[]} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
-
-    describe('component', () => {
-      test('only renders compatible files', () => {
-        const cards = el.instance.findByType(FileRenderer);
-        expect(cards.length).toEqual(supportedTypes.length);
-        cards.forEach((_, index) => {
-          expect(
-            cards[index].props.file,
-          ).toEqual(props.files[index]);
-        });
-      });
-    });
+    renderWithIntl(<PreviewDisplay files={[unsupportedFile]} />);
+    const previewDisplay = document.querySelector('.preview-display');
+    expect(previewDisplay.children.length).toBe(0);
   });
 });

src/containers/ResponseDisplay/ResponseDisplay.scss

@@ -1,14 +1,12 @@
-@import "@openedx/paragon/scss/core/core";
-
 .response-display {
-  padding: map-get($spacers, 0);
-  width: map-get($container-max-widths, "md");
+  padding: var(--pgn-spacing-spacer-0);
+  width: var(--pgn-size-container-max-width-md);
   overflow-y: hidden;
   height: fit-content;
 
   .submission-files {
     .submission-files-title {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       border-radius: calc(0.375rem - 1px);
       border-bottom: 1px solid transparent;
       transition: border-color 100ms ease 150ms;
@@ -25,13 +23,13 @@
         cursor: initial;
 
         > h3 {
-          color: $gray-300;
+          color: var(--pgn-color-gray-300);
         }
       }
     }
 
     .submission-files-body {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       padding-top: 0;
 
       .submission-files-table thead {
@@ -41,7 +39,7 @@
   }
 
   .preview-display {
-    padding: map-get($spacers, 3) 0;
+    padding: var(--pgn-spacing-spacer-3) 0;
   }
 
   .response-display-text-content {
@@ -50,12 +48,12 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .response-display {
     width: 100%;
 
     .preview-display {
-      padding: map-get($spacers, 1) 0;
+      padding: var(--pgn-spacing-spacer-1) 0;
     }
   }
-}
+}

src/containers/ResponseDisplay/SubmissionFiles.jsx

@@ -5,7 +5,7 @@ import {
   Card, Collapsible, Icon, DataTable, Button,
 } from '@openedx/paragon';
 import { ArrowDropDown, ArrowDropUp, WarningFilled } from '@openedx/paragon/icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
 
@@ -19,93 +19,91 @@ import messages from './messages';
 /**
  * <SubmissionFiles />
  */
-export class SubmissionFiles extends React.Component {
-  get title() {
-    return `${this.props.intl.formatMessage(messages.submissionFiles)} (${this.props.files.length})`;
-  }
+export const SubmissionFiles = ({ files }) => {
+  const intl = useIntl();
 
-  get canDownload() {
+  const getTitle = () => `${intl.formatMessage(messages.submissionFiles)} (${files.length})`;
+
+  const getCanDownload = () => {
     let totalFileSize = 0;
-    const exceedFileSize = this.props.files.some(file => {
+    const exceedFileSize = files.some(file => {
       totalFileSize += file.size;
       return file.size > downloadSingleLimit;
     });
 
     return !exceedFileSize && totalFileSize < downloadAllLimit;
-  }
+  };
 
-  render() {
-    const { files, intl } = this.props;
-    return (
-      <Card className="submission-files">
-        {files.length ? (
-          <>
-            <Collapsible.Advanced defaultOpen>
-              <Collapsible.Trigger className="submission-files-title">
-                <h3 data-testid="submission-files-title">{this.title}</h3>
-                <Collapsible.Visible whenClosed>
-                  <Icon src={ArrowDropDown} />
-                </Collapsible.Visible>
-                <Collapsible.Visible whenOpen>
-                  <Icon src={ArrowDropUp} />
-                </Collapsible.Visible>
-              </Collapsible.Trigger>
-              <Collapsible.Body className="submission-files-body">
-                <div className="submission-files-table">
-                  <DataTable
-                    columns={[
-                      {
-                        Header: intl.formatMessage(messages.tableNameHeader),
-                        accessor: 'name',
-                        Cell: FileNameCell,
-                      },
-                      {
-                        Header: intl.formatMessage(
-                          messages.tableExtensionHeader,
-                        ),
-                        accessor: 'name',
-                        id: 'extension',
-                        Cell: FileExtensionCell,
-                      },
-                      {
-                        Header: intl.formatMessage(messages.tablePopoverHeader),
-                        accessor: '',
-                        Cell: FilePopoverCell,
-                      },
-                    ]}
-                    data={files}
-                    itemCount={files.length}
-                  >
-                    <DataTable.Table />
-                  </DataTable>
+  return (
+    <Card className="submission-files">
+      {files.length ? (
+        <>
+          <Collapsible.Advanced defaultOpen>
+            <Collapsible.Trigger className="submission-files-title">
+              <h3 data-testid="submission-files-title">{getTitle()}</h3>
+              <Collapsible.Visible whenClosed>
+                <Icon src={ArrowDropDown} />
+              </Collapsible.Visible>
+              <Collapsible.Visible whenOpen>
+                <Icon src={ArrowDropUp} />
+              </Collapsible.Visible>
+            </Collapsible.Trigger>
+            <Collapsible.Body className="submission-files-body">
+              <div className="submission-files-table">
+                <DataTable
+                  columns={[
+                    {
+                      Header: intl.formatMessage(messages.tableNameHeader),
+                      accessor: 'name',
+                      Cell: FileNameCell,
+                    },
+                    {
+                      Header: intl.formatMessage(
+                        messages.tableExtensionHeader,
+                      ),
+                      accessor: 'name',
+                      id: 'extension',
+                      Cell: FileExtensionCell,
+                    },
+                    {
+                      Header: intl.formatMessage(messages.tablePopoverHeader),
+                      accessor: '',
+                      Cell: FilePopoverCell,
+                    },
+                  ]}
+                  data={files}
+                  itemCount={files.length}
+                >
+                  <DataTable.Table />
+                </DataTable>
+              </div>
+            </Collapsible.Body>
+          </Collapsible.Advanced>
+          <Card.Footer className="text-right">
+            {
+              getCanDownload() ? <FileDownload files={files} data-testid="file-download" /> : (
+                <div>
+                  <Icon className="d-inline-block align-middle" src={WarningFilled} />
+                  <span className="exceed-download-text" data-testid="exceed-download-text"> {intl.formatMessage(messages.exceedFileSize)} </span>
+                  <Button disabled>{intl.formatMessage(messages.downloadFiles)}</Button>
                 </div>
-              </Collapsible.Body>
-            </Collapsible.Advanced>
-            <Card.Footer className="text-right">
-              {
-                this.canDownload ? <FileDownload files={files} data-testid="file-download" /> : (
-                  <div>
-                    <Icon className="d-inline-block align-middle" src={WarningFilled} />
-                    <span className="exceed-download-text" data-testid="exceed-download-text"> {intl.formatMessage(messages.exceedFileSize)} </span>
-                    <Button disabled>{intl.formatMessage(messages.downloadFiles)}</Button>
-                  </div>
-                )
-              }
-            </Card.Footer>
-          </>
-        ) : (
-          <div className="submission-files-title no-submissions">
-            <h3>{this.title}</h3>
-          </div>
-        )}
-      </Card>
-    );
-  }
-}
+              )
+            }
+          </Card.Footer>
+        </>
+      ) : (
+        <div className="submission-files-title no-submissions">
+          <h3>{getTitle()}</h3>
+        </div>
+      )}
+    </Card>
+  );
+};
 
 SubmissionFiles.defaultProps = {
   files: [],
 };
+
 SubmissionFiles.propTypes = {
   files: PropTypes.arrayOf(
     PropTypes.shape({
@@ -114,7 +112,6 @@ SubmissionFiles.propTypes = {
       downloadURL: PropTypes.string,
     }),
   ),
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(SubmissionFiles);
+export default SubmissionFiles;

src/containers/ResponseDisplay/SubmissionFiles.test.jsx

@@ -1,99 +1,94 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { screen } from '@testing-library/react';
 import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
-
-import { formatMessage } from 'testUtils';
+import { renderWithIntl } from '../../testUtils';
 import { SubmissionFiles } from './SubmissionFiles';
-import messages from './messages';
 
-jest.mock('./components/FileNameCell', () => jest.fn().mockName('FileNameCell'));
-jest.mock('./components/FileExtensionCell', () => jest.fn().mockName('FileExtensionCell'));
-jest.mock('./components/FilePopoverCell', () => jest.fn().mockName('FilePopoverCell'));
-jest.mock('./FileDownload', () => 'FileDownload');
+jest.mock('./components/FileNameCell', () => jest.fn(({ value }) => <div>Name: {value}</div>));
+jest.mock('./components/FileExtensionCell', () => jest.fn(({ value }) => <div>Extension: {value}</div>));
+jest.mock('./components/FilePopoverCell', () => jest.fn(() => <div>Popover</div>));
+jest.mock('./FileDownload', () => jest.fn(({ files }) => <div data-testid="file-download">Download {files.length} files</div>));
 
 describe('SubmissionFiles', () => {
-  describe('component', () => {
-    const props = {
-      files: [
-        {
-          name: 'some file name.jpg',
-          description: 'description for the file',
-          downloadURL: '/valid-url-wink-wink',
-          size: 0,
-        },
-        {
-          name: 'file number 2.jpg',
-          description: 'description for this file',
-          downloadURL: '/url-2',
-          size: 0,
-        },
-      ],
-    };
-    let el;
-    beforeEach(() => {
-      el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} />);
+  const defaultProps = {
+    files: [
+      {
+        name: 'some file name.jpg',
+        description: 'description for the file',
+        downloadURL: '/valid-url-wink-wink',
+        size: 100,
+      },
+      {
+        name: 'file number 2.jpg',
+        description: 'description for this file',
+        downloadURL: '/url-2',
+        size: 200,
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('displays submission files title with file count', () => {
+      renderWithIntl(<SubmissionFiles {...defaultProps} />);
+      const title = screen.getByTestId('submission-files-title');
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent(`Submission Files (${defaultProps.files.length})`);
     });
 
-    describe('snapshot', () => {
-      test('files existed for props', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-
-      test('files does not exist', () => {
-        el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={[]} />);
-
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('files size exceed', () => {
-        const files = props.files.map(file => ({ ...file, size: downloadSingleLimit + 1 }));
-        el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={files} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
+    it('renders file download component when files can be downloaded', () => {
+      renderWithIntl(<SubmissionFiles {...defaultProps} />);
+      const downloadComponent = screen.getByTestId('file-download');
+      expect(downloadComponent).toBeInTheDocument();
+      expect(downloadComponent).toHaveTextContent('Download 2 files');
     });
 
-    describe('behavior', () => {
-      test('title', () => {
-        const titleEl = el.instance.findByTestId('submission-files-title')[0].children[0];
-        expect(titleEl.el).toEqual(
-          `${formatMessage(messages.submissionFiles)} (${props.files.length})`,
-        );
-      });
+    it('displays warning when individual file exceeds size limit', () => {
+      const largeFileProps = {
+        ...defaultProps,
+        files: [
+          { ...defaultProps.files[0], size: downloadSingleLimit + 1 },
+          defaultProps.files[1],
+        ],
+      };
+      renderWithIntl(<SubmissionFiles {...largeFileProps} />);
 
-      describe('canDownload', () => {
-        test('normal file size', () => {
-          expect(el.instance.findByTestId('file-download')).toHaveLength(1);
-        });
+      expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
+      const warningText = screen.getByTestId('exceed-download-text');
+      expect(warningText).toBeInTheDocument();
+      expect(warningText).toHaveTextContent('Exceeded the allow download size');
+    });
 
-        test('one of the file exceed the limit', () => {
-          const oneFileExceed = [{ ...props.files[0], size: downloadSingleLimit + 1 }, props.files[1]];
+    it('displays warning when total file size exceeds limit', () => {
+      const largeFileSize = (downloadAllLimit + 1) / 20;
+      const largeFilesProps = {
+        ...defaultProps,
+        files: Array(20).fill({
+          name: 'large file.jpg',
+          description: 'large file description',
+          downloadURL: '/large-file-url',
+          size: largeFileSize,
+        }),
+      };
+      renderWithIntl(<SubmissionFiles {...largeFilesProps} />);
 
-          oneFileExceed.forEach(file => expect(file.size < downloadAllLimit).toEqual(true));
+      expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
+    });
 
-          el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={oneFileExceed} />);
-          expect(el.instance.findByTestId('file-download')).toHaveLength(0);
+    it('displays title only when no files are provided', () => {
+      renderWithIntl(<SubmissionFiles {...defaultProps} files={[]} />);
+      const title = screen.getByRole('heading', { level: 3 });
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent('Submission Files (0)');
+      expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
+    });
 
-          const warningEl = el.instance.findByTestId('exceed-download-text')[0];
-          expect(warningEl.el.children[1]).toEqual(formatMessage(messages.exceedFileSize));
-        });
-
-        test('total file size exceed the limit', () => {
-          const length = 20;
-          const totalFilesExceed = new Array(length).fill({
-            name: 'some file name.jpg',
-            description: 'description for the file',
-            downloadURL: '/valid-url-wink-wink',
-            size: (downloadAllLimit + 1) / length,
-          });
-          totalFilesExceed.forEach(file => {
-            expect(file.size < downloadAllLimit).toEqual(true);
-            expect(file.size < downloadSingleLimit).toEqual(true);
-          });
-
-          el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={totalFilesExceed} />);
-          expect(el.instance.findByTestId('file-download')).toHaveLength(0);
-        });
-      });
+    it('renders data table with correct file information', () => {
+      const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} />);
+      const dataTable = container.querySelector('.submission-files-table');
+      expect(dataTable).toBeInTheDocument();
     });
   });
 });

src/containers/ResponseDisplay/__snapshots__/FileDownload.test.jsx.snap

@@ -1,213 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileDownload component snapshot download is completed 1`] = `
-<StatefulButton
-  disabledStates={
-    [
-      "pending",
-      "complete",
-    ]
-  }
-  icons={
-    {
-      "complete": <Icon
-        className="fa fa-check"
-      />,
-      "default": <Icon
-        className="fa fa-download"
-      />,
-      "failed": <Icon
-        className="fa fa-refresh"
-      />,
-      "pending": <Icon
-        className="fa fa-spinner fa-spin"
-      />,
-    }
-  }
-  labels={
-    {
-      "complete": <FormattedMessage
-        defaultMessage="Downloaded!"
-        description="Download files completed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloaded"
-      />,
-      "default": <FormattedMessage
-        defaultMessage="Download files"
-        description="Download files inactive state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloadFiles"
-      />,
-      "failed": <FormattedMessage
-        defaultMessage="Retry download"
-        description="Download files failed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.retryDownload"
-      />,
-      "pending": <FormattedMessage
-        defaultMessage="Downloading"
-        description="Download files pending state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
-      />,
-    }
-  }
-  onClick={[MockFunction this.props.downloadFiles]}
-  state="completed"
-/>
-`;
-
-exports[`FileDownload component snapshot download is failed 1`] = `
-<StatefulButton
-  disabledStates={
-    [
-      "pending",
-      "complete",
-    ]
-  }
-  icons={
-    {
-      "complete": <Icon
-        className="fa fa-check"
-      />,
-      "default": <Icon
-        className="fa fa-download"
-      />,
-      "failed": <Icon
-        className="fa fa-refresh"
-      />,
-      "pending": <Icon
-        className="fa fa-spinner fa-spin"
-      />,
-    }
-  }
-  labels={
-    {
-      "complete": <FormattedMessage
-        defaultMessage="Downloaded!"
-        description="Download files completed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloaded"
-      />,
-      "default": <FormattedMessage
-        defaultMessage="Download files"
-        description="Download files inactive state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloadFiles"
-      />,
-      "failed": <FormattedMessage
-        defaultMessage="Retry download"
-        description="Download files failed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.retryDownload"
-      />,
-      "pending": <FormattedMessage
-        defaultMessage="Downloading"
-        description="Download files pending state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
-      />,
-    }
-  }
-  onClick={[MockFunction this.props.downloadFiles]}
-  state="failed"
-/>
-`;
-
-exports[`FileDownload component snapshot download is inactive 1`] = `
-<StatefulButton
-  disabledStates={
-    [
-      "pending",
-      "complete",
-    ]
-  }
-  icons={
-    {
-      "complete": <Icon
-        className="fa fa-check"
-      />,
-      "default": <Icon
-        className="fa fa-download"
-      />,
-      "failed": <Icon
-        className="fa fa-refresh"
-      />,
-      "pending": <Icon
-        className="fa fa-spinner fa-spin"
-      />,
-    }
-  }
-  labels={
-    {
-      "complete": <FormattedMessage
-        defaultMessage="Downloaded!"
-        description="Download files completed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloaded"
-      />,
-      "default": <FormattedMessage
-        defaultMessage="Download files"
-        description="Download files inactive state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloadFiles"
-      />,
-      "failed": <FormattedMessage
-        defaultMessage="Retry download"
-        description="Download files failed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.retryDownload"
-      />,
-      "pending": <FormattedMessage
-        defaultMessage="Downloading"
-        description="Download files pending state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
-      />,
-    }
-  }
-  onClick={[MockFunction this.props.downloadFiles]}
-  state="default"
-/>
-`;
-
-exports[`FileDownload component snapshot download is pending 1`] = `
-<StatefulButton
-  disabledStates={
-    [
-      "pending",
-      "complete",
-    ]
-  }
-  icons={
-    {
-      "complete": <Icon
-        className="fa fa-check"
-      />,
-      "default": <Icon
-        className="fa fa-download"
-      />,
-      "failed": <Icon
-        className="fa fa-refresh"
-      />,
-      "pending": <Icon
-        className="fa fa-spinner fa-spin"
-      />,
-    }
-  }
-  labels={
-    {
-      "complete": <FormattedMessage
-        defaultMessage="Downloaded!"
-        description="Download files completed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloaded"
-      />,
-      "default": <FormattedMessage
-        defaultMessage="Download files"
-        description="Download files inactive state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloadFiles"
-      />,
-      "failed": <FormattedMessage
-        defaultMessage="Retry download"
-        description="Download files failed state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.retryDownload"
-      />,
-      "pending": <FormattedMessage
-        defaultMessage="Downloading"
-        description="Download files pending state label"
-        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
-      />,
-    }
-  }
-  onClick={[MockFunction this.props.downloadFiles]}
-  state="pending"
-/>
-`;

src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap

@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PreviewDisplay component snapshot files does not exist 1`] = `
-<div
-  className="preview-display"
-/>
-`;
-
-exports[`PreviewDisplay component snapshot files render with props 1`] = `
-<div
-  className="preview-display"
->
-  <FileRenderer
-    file={
-      {
-        "description": "file description 0",
-        "downloadUrl": "/url-path/fake_file_0.pdf",
-        "name": "fake_file_0.pdf",
-      }
-    }
-    key="fake_file_0.pdf"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 1",
-        "downloadUrl": "/url-path/fake_file_1.jpg",
-        "name": "fake_file_1.jpg",
-      }
-    }
-    key="fake_file_1.jpg"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 2",
-        "downloadUrl": "/url-path/fake_file_2.jpeg",
-        "name": "fake_file_2.jpeg",
-      }
-    }
-    key="fake_file_2.jpeg"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 3",
-        "downloadUrl": "/url-path/fake_file_3.png",
-        "name": "fake_file_3.png",
-      }
-    }
-    key="fake_file_3.png"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 4",
-        "downloadUrl": "/url-path/fake_file_4.bmp",
-        "name": "fake_file_4.bmp",
-      }
-    }
-    key="fake_file_4.bmp"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 5",
-        "downloadUrl": "/url-path/fake_file_5.txt",
-        "name": "fake_file_5.txt",
-      }
-    }
-    key="fake_file_5.txt"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 6",
-        "downloadUrl": "/url-path/fake_file_6.gif",
-        "name": "fake_file_6.gif",
-      }
-    }
-    key="fake_file_6.gif"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 7",
-        "downloadUrl": "/url-path/fake_file_7.jfif",
-        "name": "fake_file_7.jfif",
-      }
-    }
-    key="fake_file_7.jfif"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 8",
-        "downloadUrl": "/url-path/fake_file_8.pjpeg",
-        "name": "fake_file_8.pjpeg",
-      }
-    }
-    key="fake_file_8.pjpeg"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 9",
-        "downloadUrl": "/url-path/fake_file_9.pjp",
-        "name": "fake_file_9.pjp",
-      }
-    }
-    key="fake_file_9.pjp"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 10",
-        "downloadUrl": "/url-path/fake_file_10.svg",
-        "name": "fake_file_10.svg",
-      }
-    }
-    key="fake_file_10.svg"
-  />
-</div>
-`;

src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap

@@ -1,230 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SubmissionFiles component snapshot files does not exist 1`] = `
-<Card
-  className="submission-files"
->
-  <div
-    className="submission-files-title no-submissions"
-  >
-    <h3>
-      Submission Files (0)
-    </h3>
-  </div>
-</Card>
-`;
-
-exports[`SubmissionFiles component snapshot files existed for props 1`] = `
-<Card
-  className="submission-files"
->
-  <Fragment>
-    <Collapsible.Advanced
-      defaultOpen={true}
-    >
-      <Collapsible.Trigger
-        className="submission-files-title"
-      >
-        <h3
-          data-testid="submission-files-title"
-        >
-          Submission Files (2)
-        </h3>
-        <Collapsible.Visible
-          whenClosed={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropDown]}
-          />
-        </Collapsible.Visible>
-        <Collapsible.Visible
-          whenOpen={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropUp]}
-          />
-        </Collapsible.Visible>
-      </Collapsible.Trigger>
-      <Collapsible.Body
-        className="submission-files-body"
-      >
-        <div
-          className="submission-files-table"
-        >
-          <DataTable
-            columns={
-              [
-                {
-                  "Cell": [MockFunction FileNameCell],
-                  "Header": "Name",
-                  "accessor": "name",
-                },
-                {
-                  "Cell": [MockFunction FileExtensionCell],
-                  "Header": "File Extension",
-                  "accessor": "name",
-                  "id": "extension",
-                },
-                {
-                  "Cell": [MockFunction FilePopoverCell],
-                  "Header": "File Metadata",
-                  "accessor": "",
-                },
-              ]
-            }
-            data={
-              [
-                {
-                  "description": "description for the file",
-                  "downloadURL": "/valid-url-wink-wink",
-                  "name": "some file name.jpg",
-                  "size": 0,
-                },
-                {
-                  "description": "description for this file",
-                  "downloadURL": "/url-2",
-                  "name": "file number 2.jpg",
-                  "size": 0,
-                },
-              ]
-            }
-            itemCount={2}
-          >
-            <DataTable.Table />
-          </DataTable>
-        </div>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-    <Card.Footer
-      className="text-right"
-    >
-      <FileDownload
-        data-testid="file-download"
-        files={
-          [
-            {
-              "description": "description for the file",
-              "downloadURL": "/valid-url-wink-wink",
-              "name": "some file name.jpg",
-              "size": 0,
-            },
-            {
-              "description": "description for this file",
-              "downloadURL": "/url-2",
-              "name": "file number 2.jpg",
-              "size": 0,
-            },
-          ]
-        }
-      />
-    </Card.Footer>
-  </Fragment>
-</Card>
-`;
-
-exports[`SubmissionFiles component snapshot files size exceed 1`] = `
-<Card
-  className="submission-files"
->
-  <Fragment>
-    <Collapsible.Advanced
-      defaultOpen={true}
-    >
-      <Collapsible.Trigger
-        className="submission-files-title"
-      >
-        <h3
-          data-testid="submission-files-title"
-        >
-          Submission Files (2)
-        </h3>
-        <Collapsible.Visible
-          whenClosed={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropDown]}
-          />
-        </Collapsible.Visible>
-        <Collapsible.Visible
-          whenOpen={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropUp]}
-          />
-        </Collapsible.Visible>
-      </Collapsible.Trigger>
-      <Collapsible.Body
-        className="submission-files-body"
-      >
-        <div
-          className="submission-files-table"
-        >
-          <DataTable
-            columns={
-              [
-                {
-                  "Cell": [MockFunction FileNameCell],
-                  "Header": "Name",
-                  "accessor": "name",
-                },
-                {
-                  "Cell": [MockFunction FileExtensionCell],
-                  "Header": "File Extension",
-                  "accessor": "name",
-                  "id": "extension",
-                },
-                {
-                  "Cell": [MockFunction FilePopoverCell],
-                  "Header": "File Metadata",
-                  "accessor": "",
-                },
-              ]
-            }
-            data={
-              [
-                {
-                  "description": "description for the file",
-                  "downloadURL": "/valid-url-wink-wink",
-                  "name": "some file name.jpg",
-                  "size": 1610612737,
-                },
-                {
-                  "description": "description for this file",
-                  "downloadURL": "/url-2",
-                  "name": "file number 2.jpg",
-                  "size": 1610612737,
-                },
-              ]
-            }
-            itemCount={2}
-          >
-            <DataTable.Table />
-          </DataTable>
-        </div>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-    <Card.Footer
-      className="text-right"
-    >
-      <div>
-        <Icon
-          className="d-inline-block align-middle"
-        />
-        <span
-          className="exceed-download-text"
-          data-testid="exceed-download-text"
-        >
-           
-          Exceeded the allow download size
-           
-        </span>
-        <Button
-          disabled={true}
-        >
-          Download files
-        </Button>
-      </div>
-    </Card.Footer>
-  </Fragment>
-</Card>
-`;

src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap

@@ -1,99 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResponseDisplay component snapshot file upload disable with valid response 1`] = `
-<div
-  className="response-display"
->
-  <Card
-    key="0"
-  >
-    <Card.Section
-      className="response-display-text-content"
-      data-testid="response-display-text-content"
-    >
-      parsed html (sanitized (some text response here))
-    </Card.Section>
-  </Card>
-</div>
-`;
-
-exports[`ResponseDisplay component snapshot file upload disabled without response 1`] = `
-<div
-  className="response-display"
->
-  <SubmissionFiles
-    data-testid="submission-files"
-    files={[]}
-  />
-  <PreviewDisplay
-    data-testid="allow-file-upload"
-    files={[]}
-  />
-</div>
-`;
-
-exports[`ResponseDisplay component snapshot file upload enable with valid response 1`] = `
-<div
-  className="response-display"
->
-  <SubmissionFiles
-    data-testid="submission-files"
-    files={
-      [
-        {
-          "description": "description for the file",
-          "downloadURL": "/valid-url-wink-wink",
-          "name": "some file name.jpg",
-        },
-        {
-          "description": "description for this file",
-          "downloadURL": "/url-2",
-          "name": "file number 2.jpg",
-        },
-      ]
-    }
-  />
-  <PreviewDisplay
-    data-testid="allow-file-upload"
-    files={
-      [
-        {
-          "description": "description for the file",
-          "downloadURL": "/valid-url-wink-wink",
-          "name": "some file name.jpg",
-        },
-        {
-          "description": "description for this file",
-          "downloadURL": "/url-2",
-          "name": "file number 2.jpg",
-        },
-      ]
-    }
-  />
-  <Card
-    key="0"
-  >
-    <Card.Section
-      className="response-display-text-content"
-      data-testid="response-display-text-content"
-    >
-      parsed html (sanitized (some text response here))
-    </Card.Section>
-  </Card>
-</div>
-`;
-
-exports[`ResponseDisplay component snapshot file upload enable without response 1`] = `
-<div
-  className="response-display"
->
-  <SubmissionFiles
-    data-testid="submission-files"
-    files={[]}
-  />
-  <PreviewDisplay
-    data-testid="allow-file-upload"
-    files={[]}
-  />
-</div>
-`;

src/containers/ResponseDisplay/components/FileExtensionCell.test.jsx

@@ -1,25 +1,39 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
 import FileExtensionCell from './FileExtensionCell';
 
 describe('FileExtensionCell', () => {
-  describe('component', () => {
-    const props = {
-      value: 'file_name.with_extension.pdf',
-    };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FileExtensionCell {...props} />);
-    });
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
+  const props = {
+    value: 'file_name.with_extension.pdf',
+  };
 
-    describe('behavior', () => {
-      test('content', () => {
-        expect(el.instance.children[0].el).toEqual('PDF');
-      });
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders file extension in uppercase', () => {
+    render(<FileExtensionCell {...props} />);
+    expect(screen.getByText('PDF')).toBeInTheDocument();
+  });
+
+  it('applies correct CSS class', () => {
+    const { container } = render(<FileExtensionCell {...props} />);
+    const element = container.firstChild;
+    expect(element).toHaveClass('text-truncate');
+  });
+
+  it('extracts extension from file with multiple dots', () => {
+    render(<FileExtensionCell value="my.file.name.docx" />);
+    expect(screen.getByText('DOCX')).toBeInTheDocument();
+  });
+
+  it('handles file without extension', () => {
+    render(<FileExtensionCell value="filename" />);
+    expect(screen.getByText('FILENAME')).toBeInTheDocument();
+  });
+
+  it('handles empty file extension', () => {
+    const { container } = render(<FileExtensionCell value="filename." />);
+    const element = container.firstChild;
+    expect(element).toHaveTextContent('');
   });
 });

src/containers/ResponseDisplay/components/FileNameCell.test.jsx

@@ -1,25 +1,21 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import FileNameCell from './FileNameCell';
 
 describe('FileNameCell', () => {
-  describe('component', () => {
-    const props = {
-      value: 'some test text value',
-    };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FileNameCell {...props} />);
-    });
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
+  const props = {
+    value: 'some test text value',
+  };
 
-    describe('behavior', () => {
-      test('content', () => {
-        expect(el.instance.children[0].el).toEqual(props.value);
-      });
-    });
+  it('renders the value text', () => {
+    render(<FileNameCell {...props} />);
+    expect(screen.getByText('some test text value')).toBeInTheDocument();
+  });
+
+  it('applies text truncation class', () => {
+    const { container } = render(<FileNameCell {...props} />);
+    const divElement = container.querySelector('div');
+    expect(divElement).toHaveClass('text-truncate');
   });
 });

src/containers/ResponseDisplay/components/FilePopoverCell.test.jsx

@@ -1,37 +1,39 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '../../../testUtils';
 
-import FilePopoverContent from 'components/FilePopoverContent';
 import FilePopoverCell from './FilePopoverCell';
 
-jest.mock('components/InfoPopover', () => 'InfoPopover');
-jest.mock('components/FilePopoverContent', () => 'FilePopoverContent');
-
 describe('FilePopoverCell', () => {
-  describe('component', () => {
-    const props = {
+  const props = {
+    row: {
+      original: {
+        name: 'some file name',
+        description: 'long descriptive text...',
+        downloadURL: 'this-url-is.working',
+        size: 1024,
+      },
+    },
+  };
+
+  it('renders info button has correct alt text', () => {
+    renderWithIntl(<FilePopoverCell {...props} />);
+    const button = screen.getByRole('button', { name: /display more info/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('handles empty row.original object', () => {
+    const emptyProps = {
       row: {
-        original: {
-          name: 'some file name',
-          description: 'long descriptive text...',
-          downloadURL: 'this-url-is.working',
-        },
+        original: {},
       },
     };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FilePopoverCell {...props} />);
-    });
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
 
-    describe('behavior', () => {
-      test('content', () => {
-        const { original } = props.row;
-        const content = el.instance.findByType(FilePopoverContent)[0];
-        expect(content.props).toEqual({ ...original });
-      });
-    });
+    const { container } = renderWithIntl(<FilePopoverCell {...emptyProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('handles missing row prop', () => {
+    const { container } = renderWithIntl(<FilePopoverCell />);
+    expect(container.firstChild).toBeInTheDocument();
   });
 });

src/containers/ResponseDisplay/components/__snapshots__/FileExtensionCell.test.jsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileExtensionCell component snapshot 1`] = `
-<div
-  className="text-truncate"
->
-  PDF
-</div>
-`;

src/containers/ResponseDisplay/components/__snapshots__/FileNameCell.test.jsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileNameCell component snapshot 1`] = `
-<div
-  className="text-truncate"
->
-  some test text value
-</div>
-`;

src/containers/ResponseDisplay/components/__snapshots__/FilePopoverCell.test.jsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilePopoverCell component snapshot 1`] = `
-<InfoPopover>
-  <FilePopoverContent
-    description="long descriptive text..."
-    downloadURL="this-url-is.working"
-    name="some file name"
-  />
-</InfoPopover>
-`;

src/containers/ResponseDisplay/index.jsx

@@ -11,6 +11,7 @@ import parse from 'html-react-parser';
 import { selectors } from 'data/redux';
 import { fileUploadResponseOptions } from 'data/services/lms/constants';
 
+import { getConfig } from '@edx/frontend-platform';
 import SubmissionFiles from './SubmissionFiles';
 import PreviewDisplay from './PreviewDisplay';
 
@@ -26,7 +27,13 @@ export class ResponseDisplay extends React.Component {
   }
 
   get textContents() {
-    return this.props.response.text.map(text => parse(this.purify.sanitize(text)));
+    const { text } = this.props.response;
+
+    const formattedText = text
+      .map((item) => item.replaceAll(/\.\.\/asset/g, `${getConfig().LMS_BASE_URL}/asset`))
+      .map((item) => parse(this.purify.sanitize(item)));
+
+    return formattedText;
   }
 
   get submittedFiles() {

src/containers/ResponseDisplay/index.test.jsx

@@ -1,121 +1,124 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import createDOMPurify from 'dompurify';
-import parse from 'html-react-parser';
-
+import { render, screen } from '@testing-library/react';
 import { fileUploadResponseOptions } from 'data/services/lms/constants';
 import { selectors } from 'data/redux';
-
 import { ResponseDisplay, mapStateToProps } from '.';
 
 jest.mock('data/redux', () => ({
   selectors: {
     grading: {
       selected: {
-        response: (state) => ({ response: state }),
+        response: jest.fn((state) => state.response || { text: [], files: [] }),
       },
     },
     app: {
       ora: {
-        fileUploadResponseConfig: (state) => ({ config: state }),
+        fileUploadResponseConfig: jest.fn((state) => state.fileUploadResponseConfig || 'optional'),
       },
     },
   },
 }));
-jest.mock('./SubmissionFiles', () => 'SubmissionFiles');
+
+jest.mock('./SubmissionFiles', () => jest.fn(({ files }) => (
+  <div data-testid="submission-files">Files: {files.length}</div>
+)));
+
+jest.mock('./PreviewDisplay', () => jest.fn(({ files }) => (
+  <div data-testid="preview-display">Preview: {files.length}</div>
+)));
+
 jest.mock('dompurify', () => () => ({
-  sanitize: (text) => `sanitized (${text})`,
+  sanitize: (text) => text,
 }));
-jest.mock('html-react-parser', () => (text) => `parsed html (${text})`);
+
+jest.mock('html-react-parser', () => (text) => text);
 
 describe('ResponseDisplay', () => {
-  describe('component', () => {
-    const props = {
-      response: {
-        text: ['some text response here'],
-        files: [
-          {
-            name: 'some file name.jpg',
-            description: 'description for the file',
-            downloadURL: '/valid-url-wink-wink',
-          },
-          {
-            name: 'file number 2.jpg',
-            description: 'description for this file',
-            downloadURL: '/url-2',
-          },
-        ],
-      },
-      fileUploadResponseConfig: 'optional',
-    };
-    let el;
-    beforeAll(() => {
-      global.window = {};
-    });
-    beforeEach(() => {
-      el = shallow(<ResponseDisplay {...props} />);
-    });
-    describe('snapshot', () => {
-      test('file upload enable with valid response', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
+  const defaultProps = {
+    response: {
+      text: ['some text response here', 'another text response'],
+      files: [
+        {
+          name: 'some file name.jpg',
+          description: 'description for the file',
+          downloadURL: '/valid-url-wink-wink',
+        },
+        {
+          name: 'file number 2.jpg',
+          description: 'description for this file',
+          downloadURL: '/url-2',
+        },
+      ],
+    },
+    fileUploadResponseConfig: 'optional',
+  };
 
-      test('file upload enable without response', () => {
-        el = shallow(<ResponseDisplay {...props} response={{ text: [], files: [] }} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('file upload disable with valid response', () => {
-        el = shallow(<ResponseDisplay {...props} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
+  beforeAll(() => {
+    global.window = {};
+  });
 
-      test('file upload disabled without response', () => {
-        el = shallow(<ResponseDisplay {...props} response={{ text: [], files: [] }} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('renders response display container', () => {
+      const { container } = render(<ResponseDisplay {...defaultProps} />);
+      const responseDisplay = container.querySelector('.response-display');
+      expect(responseDisplay).toBeInTheDocument();
     });
-    describe('behavior', () => {
-      test('get textContents', () => {
-        const textContents = el.instance.findByTestId('response-display-text-content');
-        expect(textContents.length).toEqual(
-          props.response.text.length,
-        );
-        textContents.forEach((text, index) => {
-          expect(text.el.children[0]).toEqual(
-            parse(createDOMPurify(window).sanitize(props.response.text[index])),
-          );
-        });
-      });
 
-      test('get submittedFiles', () => {
-        expect(el.instance.findByTestId('submission-files')[0].props.files).toEqual(props.response.files);
-      });
-      test('get allowFileUpload', () => {
-        expect(el.instance.findByTestId('allow-file-upload').length > 0).toEqual(
-          props.fileUploadResponseConfig !== fileUploadResponseOptions.none,
-        );
-      });
+    it('displays text content in cards', () => {
+      const { container } = render(<ResponseDisplay {...defaultProps} />);
+      const textContents = container.querySelectorAll('.response-display-text-content');
+      expect(textContents).toHaveLength(defaultProps.response.text.length);
+      expect(textContents[0]).toHaveTextContent('some text response here');
+      expect(textContents[1]).toHaveTextContent('another text response');
+    });
+
+    it('displays submission files when file upload is allowed', () => {
+      render(<ResponseDisplay {...defaultProps} />);
+      const submissionFiles = screen.getByTestId('submission-files');
+      expect(submissionFiles).toBeInTheDocument();
+      expect(submissionFiles).toHaveTextContent('Files: 2');
+    });
+
+    it('displays preview display when file upload is allowed', () => {
+      render(<ResponseDisplay {...defaultProps} />);
+      const previewDisplay = screen.getByTestId('preview-display');
+      expect(previewDisplay).toBeInTheDocument();
+      expect(previewDisplay).toHaveTextContent('Preview: 2');
+    });
+
+    it('does not display file components when file upload is disabled', () => {
+      render(<ResponseDisplay {...defaultProps} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
+      expect(screen.queryByTestId('submission-files')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('preview-display')).not.toBeInTheDocument();
+    });
+
+    it('renders empty content when no text response provided', () => {
+      const { container } = render(<ResponseDisplay {...defaultProps} response={{ text: [], files: [] }} />);
+      const textContents = container.querySelectorAll('.response-display-text-content');
+      expect(textContents).toHaveLength(0);
     });
   });
+
   describe('mapStateToProps', () => {
-    let mapped;
     const testState = {
-      dummyText: ['text'],
-      dummyFiles: ['files', 'file-2'],
+      response: {
+        text: ['test text'],
+        files: ['file1', 'file2'],
+      },
+      fileUploadResponseConfig: 'required',
     };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
+
+    it('maps response from grading.selected.response selector', () => {
+      const mapped = mapStateToProps(testState);
+      expect(mapped.response).toEqual(selectors.grading.selected.response(testState));
     });
-    test('response loads from grading.selected.response', () => {
-      expect(mapped.response).toEqual(
-        selectors.grading.selected.response(testState),
-      );
-    });
-    test('response loads from grading.selected.response', () => {
-      expect(mapped.fileUploadResponseConfig).toEqual(
-        selectors.app.ora.fileUploadResponseConfig(testState),
-      );
+
+    it('maps fileUploadResponseConfig from app.ora.fileUploadResponseConfig selector', () => {
+      const mapped = mapStateToProps(testState);
+      expect(mapped.fileUploadResponseConfig).toEqual(selectors.app.ora.fileUploadResponseConfig(testState));
     });
   });
 });

src/containers/ReviewActions/ReviewActions.scss

@@ -1,16 +1,14 @@
-@import "@openedx/paragon/scss/core/core";
-
 // action reviews
 .review-actions {
-  padding: map_get($spacers, 3);
+  padding: var(--pgn-spacing-spacer-3);
   flex-direction: row;
-  background-color: $light-200;
+  background-color: var(--pgn-color-light-200);
 
   .review-actions-username {
     flex-grow: 1;
   }
   .review-actions-status {
-    margin-left: map_get($spacers, 3);
+    margin-left: var(--pgn-spacing-spacer-3);
     vertical-align: middle;
   }
   .review-actions-group {
@@ -20,18 +18,25 @@
 
     .submission-navigation {
       float: right;
-      padding: map-get($spacers, 1);
+      padding: var(--pgn-spacing-spacer-1);
     }
   }
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .review-actions {
     flex-direction: column;
     align-items: flex-start !important;
   }
 
   .review-actions-username {
-    padding-bottom: map-get($spacers, 3);
+    padding-bottom:var(--pgn-spacing-spacer-3);
   }
-}
+}
+
+
+@media (--pgn-size-breakpoint-max-width-xs) {
+  .overlay-help-popover {
+    max-width: calc(100% - 60px) !important;
+  }
+}

src/containers/ReviewActions/__snapshots__/index.test.jsx.snap

@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ReviewActions component component snapshot: do not show rubric 1`] = `
-<div>
-  <ActionRow
-    className="review-actions"
-  >
-    <span
-      className="review-actions-username"
-    >
-      <span
-        className="lead"
-      >
-        test-userDisplay
-      </span>
-      <StatusBadge
-        className="review-actions-status mr-3"
-        status="grading-status"
-      />
-      <span
-        className="small"
-      >
-        <FormattedMessage
-          defaultMessage="Score: {pointsEarned}/{pointsPossible}"
-          description="Review pane action bar score display"
-          id="ora-grading.ReviewActions.pointsDisplay"
-          values={
-            {
-              "pointsEarned": 3,
-              "pointsPossible": 10,
-            }
-          }
-        />
-      </span>
-    </span>
-    <div
-      className="review-actions-group"
-    >
-      <Fragment>
-        <Button
-          onClick={[MockFunction this.props.toggleShowRubric]}
-          variant="outline-primary mr-2"
-        >
-          <FormattedMessage
-            defaultMessage="Show Rubric"
-            description="Review pane action bar Show Rubric button text"
-            id="ora-grading.ReviewActions.showRubric"
-          />
-        </Button>
-        <StartGradingButton />
-      </Fragment>
-      <SubmissionNavigation />
-    </div>
-  </ActionRow>
-</div>
-`;
-
-exports[`ReviewActions component component snapshot: loading 1`] = `
-<div>
-  <ActionRow
-    className="review-actions"
-  >
-    <span
-      className="review-actions-username"
-    >
-      <span
-        className="lead"
-      >
-        test-userDisplay
-      </span>
-      <StatusBadge
-        className="review-actions-status mr-3"
-        status="grading-status"
-      />
-      <span
-        className="small"
-      >
-        <FormattedMessage
-          defaultMessage="Score: {pointsEarned}/{pointsPossible}"
-          description="Review pane action bar score display"
-          id="ora-grading.ReviewActions.pointsDisplay"
-          values={
-            {
-              "pointsEarned": 3,
-              "pointsPossible": 10,
-            }
-          }
-        />
-      </span>
-    </span>
-    <div
-      className="review-actions-group"
-    >
-      <SubmissionNavigation />
-    </div>
-  </ActionRow>
-</div>
-`;
-
-exports[`ReviewActions component component snapshot: show rubric, no score 1`] = `
-<div>
-  <ActionRow
-    className="review-actions"
-  >
-    <span
-      className="review-actions-username"
-    >
-      <span
-        className="lead"
-      >
-        test-userDisplay
-      </span>
-      <StatusBadge
-        className="review-actions-status mr-3"
-        status="grading-status"
-      />
-      <span
-        className="small"
-      />
-    </span>
-    <div
-      className="review-actions-group"
-    >
-      <Fragment>
-        <Button
-          onClick={[MockFunction this.props.toggleShowRubric]}
-          variant="outline-primary mr-2"
-        >
-          <FormattedMessage
-            defaultMessage="Hide Rubric"
-            description="Review pane action bar Hide Rubric button text"
-            id="ora-grading.ReviewActions.hideRubric"
-          />
-        </Button>
-        <StartGradingButton />
-      </Fragment>
-      <SubmissionNavigation />
-    </div>
-  </ActionRow>
-</div>
-`;