diff --git a/.changeset/curly-jobs-sit.md b/.changeset/curly-jobs-sit.md
deleted file mode 100644
index cc59fba023..0000000000
--- a/.changeset/curly-jobs-sit.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@khanacademy/perseus-editor": patch
----
-
-Add tests for RadioEditor
diff --git a/.changeset/fair-kids-prove.md b/.changeset/fair-kids-prove.md
deleted file mode 100644
index 2a62fbbdb1..0000000000
--- a/.changeset/fair-kids-prove.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@khanacademy/perseus-editor": patch
----
-
-Add tests for DropdownEditor
diff --git a/.changeset/perfect-eels-divide.md b/.changeset/perfect-eels-divide.md
new file mode 100644
index 0000000000..5506c856e5
--- /dev/null
+++ b/.changeset/perfect-eels-divide.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Update Perseus' Storybook to use MathJax instead of KaTeX
diff --git a/.changeset/red-boats-learn.md b/.changeset/red-boats-learn.md
deleted file mode 100644
index a845151cc8..0000000000
--- a/.changeset/red-boats-learn.md
+++ /dev/null
@@ -1,2 +0,0 @@
----
----
diff --git a/.changeset/tender-tomatoes-flow.md b/.changeset/tender-tomatoes-flow.md
deleted file mode 100644
index 28b746082a..0000000000
--- a/.changeset/tender-tomatoes-flow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@khanacademy/perseus-editor": patch
----
-
-Add tests for ExplanationEditor
diff --git a/.changeset/tricky-suns-sneeze.md b/.changeset/tricky-suns-sneeze.md
deleted file mode 100644
index 06796e1394..0000000000
--- a/.changeset/tricky-suns-sneeze.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@khanacademy/perseus-editor": patch
----
-
-Add tests for NumericInputEditor
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index c7d4d15921..8111fa6527 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,3 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-    "containerEnv": { "NODE_OPTIONS": "--openssl-legacy-provider" }
+	"name": "Node.js & TypeScript",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:16",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [6006],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "yarn install"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
 }
diff --git a/.github/actions/shared-node-cache/action.yml b/.github/actions/shared-node-cache/action.yml
new file mode 100644
index 0000000000..2ada46366c
--- /dev/null
+++ b/.github/actions/shared-node-cache/action.yml
@@ -0,0 +1,27 @@
+name: "Shared Node Cache"
+description: "Install & cache our npm dependencies"
+
+# The inputs this action expects.
+inputs:
+    node-version:
+        description: "Node version to use"
+        required: true
+    ssh-private-key:
+        description: "A private SSH key so that we can obtain private dependencies like our event schema package"
+        required: true
+
+# The steps this action runs.
+# The order of the two steps below needs to be maintained.
+# The ssh-agent step needs to be before the Node.js/Install step because our package.json uses
+# git+ssh. As this requires a valid SSH key, the ssh-agent action must be before the yarn install.
+runs:
+    using: "composite"
+    steps:
+        - uses: webfactory/ssh-agent@v0.7.0
+          with:
+              ssh-private-key: ${{ inputs.ssh-private-key }}
+
+        - name: Use Node.js ${{ inputs.node-version }} & Install & cache node_modules
+          uses: Khan/actions@shared-node-cache-v0
+          with:
+              node-version: ${{ inputs.node-version }}
diff --git a/.github/workflows/node-ci-main.yml b/.github/workflows/node-ci-main.yml
index ec878e025f..7c3e531fd4 100644
--- a/.github/workflows/node-ci-main.yml
+++ b/.github/workflows/node-ci-main.yml
@@ -25,11 +25,12 @@ jobs:
                 os: [ubuntu-latest]
                 node-version: [20.x]
         steps:
-            - uses: actions/checkout@v3
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - uses: actions/checkout@v4
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
     coverage:
         needs: [prime_cache_primary]
@@ -40,12 +41,13 @@ jobs:
                 os: [ubuntu-latest]
                 node-version: [20.x]
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Jest with coverage
               run: yarn coverage
@@ -66,12 +68,13 @@ jobs:
                 node-version: [20.x]
         steps:
             - name: Checking out latest commit
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Run test with coverage
               run: yarn cypress:ci
diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
index 97e985e43a..172e389cfc 100644
--- a/.github/workflows/node-ci.yml
+++ b/.github/workflows/node-ci.yml
@@ -1,6 +1,7 @@
 name: Node CI
 
 on:
+    workflow_dispatch:
     pull_request:
         # edited is needed because that's the trigger when the base branch is
         # changed on a PR
@@ -18,7 +19,7 @@ jobs:
                 node-version: [20.x]
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
               with:
                   fetch-depth: 0
 
@@ -36,6 +37,10 @@ jobs:
                   matchAllGlobs: true # Default is to match any of the globs, which ends up matching all files
                   conjunctive: true # Only match files that match all of the above
 
+            - uses: webfactory/ssh-agent@v0.7.0
+              with:
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
+
             - name: Verify changeset entries
               uses: Khan/changeset-per-package@v1.0.1
               with:
@@ -50,12 +55,13 @@ jobs:
                 node-version: [20.x]
         steps:
             - name: Checking out latest commit
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Get All Changed Files
               uses: Khan/actions@get-changed-files-v1
@@ -128,26 +134,27 @@ jobs:
                 node-version: [20.x]
         steps:
             - name: Checking out latest commit
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Run test with coverage
               run: yarn cypress:ci
 
             # Upload coverage report as an GitHub artifact so that it can be used
             # later in upload_coverage.
-            - name: Upload Artifact
-              uses: actions/upload-artifact@v2
+            - name: Upload Cypress Coverage
+              uses: actions/upload-artifact@v4
               with:
                   name: cypress-coverage
                   path: ./.nyc_output/out.json
 
             - name: Upload Cypress Screenshots
-              uses: actions/upload-artifact@v2
+              uses: actions/upload-artifact@v4
               if: failure()
               with:
                   name: cypress-screenshots
@@ -161,20 +168,21 @@ jobs:
                 os: [ubuntu-latest]
                 node-version: [20.x]
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Jest with coverage
               run: yarn coverage
 
             # Upload coverage report as an GitHub artifact so that it can be used
             # later in upload_coverage.
-            - name: Upload Artifact
-              uses: actions/upload-artifact@v2
+            - name: Upload Jest Coverage
+              uses: actions/upload-artifact@v4
               with:
                   name: jest-coverage
                   path: ./coverage/coverage-final.json
@@ -184,15 +192,16 @@ jobs:
         runs-on: ubuntu-latest
         needs: [cypress, coverage]
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Download Jest Coverage
-              uses: actions/download-artifact@v2
+              uses: actions/download-artifact@v4
               with:
                   name: jest-coverage
                   # path to decompress the artifact into, decompressed file
@@ -200,7 +209,7 @@ jobs:
                   path: ./
 
             - name: Download Cypress Coverage
-              uses: actions/download-artifact@v2
+              uses: actions/download-artifact@v4
               with:
                   name: cypress-coverage
                   # path to decompress the artifact into, decompressed file
@@ -225,15 +234,16 @@ jobs:
                 node-version: [20.x]
         steps:
             - name: Checking out latest commit
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
             # Make sure our packages aren't growing unexpectedly
             # This must come last as it builds the old code last and so leaves the
-            # wrong code in place for the next job.
+            # wrong code in place for the next job; in other words, it leaves the repo on a base branch.
             - name: Check Builds
               uses: preactjs/compressed-size-action@v2
               with:
@@ -246,6 +256,10 @@ jobs:
                   # Build production
                   build-script: "build:prodsizecheck"
 
+            #
+            # Do not place any steps after "Check Builds"
+            #
+
     extract_strings:
         name: Extract i18n strings
         runs-on: ${{ matrix.os }}
@@ -254,12 +268,13 @@ jobs:
                 os: [ubuntu-latest]
                 node-version: [20.x]
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Extract strings
               run: yarn extract-strings
@@ -279,19 +294,20 @@ jobs:
         steps:
             # We need to checkout all history, so that the changeseat tool can diff it
             - name: Checkout current commit
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
               with:
                   fetch-depth: "0"
-            - name: Ensure main branch is avaialble
+            - name: Ensure main branch is available
               run: |
                   REF=$(git rev-parse HEAD)
                   git checkout main
                   git checkout $REF
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Publish Snapshot Release to npm
               id: publish-snapshot
@@ -329,7 +345,7 @@ jobs:
                   body: |
                       # npm Snapshot: Published
 
-                      🎉 Good news!! We've packaged up the latest commit from this PR (${{
+                      Good news!! We've packaged up the latest commit from this PR (${{
                       steps.short-sha.outputs.short_sha }}) and published it to npm. You
                       can install it using the tag `${{
                       steps.publish-snapshot.outputs.npm_snapshot_tag }}`.
@@ -350,7 +366,7 @@ jobs:
                   body: |
                       # npm Snapshot: **NOT** Published
 
-                      🤕 Oh noes!! We couldn't find any changesets in this PR (${{
+                      Oh noes!! We couldn't find any changesets in this PR (${{
                       steps.short-sha.outputs.short_sha }}). As a result, we did not
                       publish an npm snapshot for you.
 
@@ -365,14 +381,15 @@ jobs:
             # chromaui/@action doesn't work with shallow checkouts which is the
             # default for actions/checkout so we need to force it to checkout
             # more stuff.
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
               with:
                   fetch-depth: 0
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Publish to Chromatic
               uses: chromaui/action@v1
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 533ad44fc1..9f0880bc19 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -37,21 +37,22 @@ jobs:
                 os: [ubuntu-latest]
                 node-version: [20.x]
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
               with:
                   fetch-depth: 0
 
-            - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules
-              uses: Khan/actions@shared-node-cache-v0
+            - name: Install & cache node_modules
+              uses: ./.github/actions/shared-node-cache
               with:
                   node-version: ${{ matrix.node-version }}
+                  ssh-private-key: ${{ secrets.KHAN_ACTIONS_BOT_SSH_PRIVATE_KEY }}
 
             - name: Build Storybook
               # Generate a static version of storybook inside "storybook-static/"
               run: yarn build-storybook
 
             - name: Deploy to GitHub pages
-              uses: JamesIves/github-pages-deploy-action@v4.4.2
+              uses: JamesIves/github-pages-deploy-action@v4.5.0
               with:
                   # The branch the action should deploy to.
                   branch: gh-pages
@@ -94,7 +95,7 @@ jobs:
                   SLACK_MSG_AUTHOR: ${{ github.event.pull_request.user.login }}
                   SLACK_USERNAME: GithubGoose
                   SLACK_ICON_EMOJI: ":goose:"
-                  SLACK_MESSAGE: "A new version of ${{ github.event.repository.name }} was published! 🎉 \nRelease notes → https://github.com/${{ github.repository }}/releases/"
+                  SLACK_MESSAGE: "A new version of ${{ github.event.repository.name }} was published! \nRelease notes → https://github.com/${{ github.repository }}/releases/"
                   SLACK_TITLE: "New Perseus release!"
                   SLACK_FOOTER: Perseus Slack Notification
                   MSG_MINIMAL: true
diff --git a/.gitignore b/.gitignore
index a089e9fa0d..ea8edd869c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ storybook-static
 .nyc_output
 *.tsbuildinfo
 /cypress/
+.idea
diff --git a/package.json b/package.json
index ddca045714..e2f00bb385 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@jest/globals": "^29.5.0",
     "@khanacademy/eslint-config": "^3.0.1",
     "@khanacademy/eslint-plugin": "^2.1.1",
-    "@khanacademy/wonder-blocks-button": "6.2.4",
+    "@khanacademy/wonder-blocks-button": "6.2.5",
     "@khanacademy/wonder-stuff-i18n": "^2.1.2",
     "@popperjs/core": "^2.10.1",
     "@rollup/plugin-alias": "^3.1.9",
diff --git a/packages/math-input/CHANGELOG.md b/packages/math-input/CHANGELOG.md
index 3de147b2dc..cff2ed1fb3 100644
--- a/packages/math-input/CHANGELOG.md
+++ b/packages/math-input/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @khanacademy/math-input
 
+## 16.5.0
+
+### Minor Changes
+
+-   [#921](https://github.com/Khan/perseus/pull/921) [`81b9a562`](https://github.com/Khan/perseus/commit/81b9a562d0fb8ff2cd82e708781432bff8437116) Thanks [@benchristel](https://github.com/benchristel)! - Make the Expression widget treat `sen` as equivalent to `sin`. The spelling
+    `sen` is used in Portuguese.
+
+## 16.4.1
+
+### Patch Changes
+
+-   [#881](https://github.com/Khan/perseus/pull/881) [`f02eb991`](https://github.com/Khan/perseus/commit/f02eb991cec37dcff02056c0d6b54fc6dfd96948) Thanks [@nedredmond](https://github.com/nedredmond)! - Swap out Label Image custom dropdown for WonderBlocks
+
 ## 16.4.0
 
 ### Minor Changes
diff --git a/packages/math-input/package.json b/packages/math-input/package.json
index fd0add8b0a..631551831b 100644
--- a/packages/math-input/package.json
+++ b/packages/math-input/package.json
@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "16.4.0",
+    "version": "16.5.0",
     "publishConfig": {
         "access": "public"
     },
@@ -25,11 +25,11 @@
         "performance-now": "^0.2.0"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-popover": "^3.0.19",
+        "@khanacademy/wonder-blocks-popover": "^3.0.22",
         "@khanacademy/wonder-blocks-timing": "^4.0.2",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
@@ -45,11 +45,11 @@
         "react-transition-group": "^4.4.1"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-popover": "^3.0.19",
+        "@khanacademy/wonder-blocks-popover": "^3.0.22",
         "@khanacademy/wonder-blocks-timing": "^4.0.2",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
diff --git a/packages/math-input/src/components/input/mathquill-instance.ts b/packages/math-input/src/components/input/mathquill-instance.ts
index eda6d64f24..cedc29a3fa 100644
--- a/packages/math-input/src/components/input/mathquill-instance.ts
+++ b/packages/math-input/src/components/input/mathquill-instance.ts
@@ -14,6 +14,46 @@ function createBaseConfig(): MathFieldConfig {
         // appropriate symbol. This does not include ln, log, or any of the
         // trig functions; those are always interpreted as commands.
         autoCommands: "pi theta phi sqrt nthroot",
+        // Most of these autoOperatorNames are simply the MathQuill defaults.
+        // We have to list them all in order to add the `sen` operator (see
+        // comment below).
+        autoOperatorNames: [
+            "arccos",
+            "arcsin",
+            "arctan",
+            "arg",
+            "cos",
+            "cosh",
+            "cot",
+            "coth",
+            "csc",
+            "deg",
+            "det",
+            "dim",
+            "exp",
+            "gcd",
+            "hom",
+            "inf",
+            "ker",
+            "lg",
+            "lim",
+            "liminf",
+            "limsup",
+            "ln",
+            "log",
+            "max",
+            "min",
+            "Pr",
+            "projlim",
+            "sec",
+            // sen is used instead of sin in e.g. Portuguese
+            "sen",
+            "sin",
+            "sinh",
+            "sup",
+            "tan",
+            "tanh",
+        ].join(" "),
 
         // Pop the cursor out of super/subscripts on arithmetic operators
         // or (in)equalities.
diff --git a/packages/perseus-editor/CHANGELOG.md b/packages/perseus-editor/CHANGELOG.md
index d2a2810c43..3a1270d0c2 100644
--- a/packages/perseus-editor/CHANGELOG.md
+++ b/packages/perseus-editor/CHANGELOG.md
@@ -1,5 +1,89 @@
 # @khanacademy/perseus-editor
 
+## 2.16.2
+
+### Patch Changes
+
+-   Updated dependencies [[`81b9a562`](https://github.com/Khan/perseus/commit/81b9a562d0fb8ff2cd82e708781432bff8437116)]:
+    -   @khanacademy/math-input@16.5.0
+    -   @khanacademy/perseus@17.7.0
+
+## 2.16.1
+
+### Patch Changes
+
+-   Updated dependencies [[`21222f55`](https://github.com/Khan/perseus/commit/21222f55b1efd46acbc0fe1dcc8aa0399b8555ee)]:
+    -   @khanacademy/perseus@17.6.2
+
+## 2.16.0
+
+### Minor Changes
+
+-   [#897](https://github.com/Khan/perseus/pull/897) [`e8020f58`](https://github.com/Khan/perseus/commit/e8020f58bb538372f77785a14a31dc11be2bc441) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Convert many string refs to React refs
+
+### Patch Changes
+
+-   [#881](https://github.com/Khan/perseus/pull/881) [`f02eb991`](https://github.com/Khan/perseus/commit/f02eb991cec37dcff02056c0d6b54fc6dfd96948) Thanks [@nedredmond](https://github.com/nedredmond)! - Swap out Label Image custom dropdown for WonderBlocks
+
+*   [#870](https://github.com/Khan/perseus/pull/870) [`9354fb55`](https://github.com/Khan/perseus/commit/9354fb55357f2441a2ca6198c52cca33edeba3c0) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Replace transformer widget with a deprecated-standin widget
+
+*   Updated dependencies [[`f02eb991`](https://github.com/Khan/perseus/commit/f02eb991cec37dcff02056c0d6b54fc6dfd96948), [`9354fb55`](https://github.com/Khan/perseus/commit/9354fb55357f2441a2ca6198c52cca33edeba3c0)]:
+    -   @khanacademy/math-input@16.4.1
+    -   @khanacademy/perseus@17.6.1
+
+## 2.15.7
+
+### Patch Changes
+
+-   Updated dependencies [[`83884550`](https://github.com/Khan/perseus/commit/83884550df8b394e9afa6e95947c987614e2d242)]:
+    -   @khanacademy/perseus@17.6.0
+
+## 2.15.6
+
+### Patch Changes
+
+-   [#905](https://github.com/Khan/perseus/pull/905) [`b18ddb28`](https://github.com/Khan/perseus/commit/b18ddb28d9b1f77b1263b3cf24b55a862998fb78) Thanks [@handeyeco](https://github.com/handeyeco)! - Convert interaction-editor components from PropTypes to TS
+
+*   [#911](https://github.com/Khan/perseus/pull/911) [`e9a8808d`](https://github.com/Khan/perseus/commit/e9a8808de00132db4cb992c1428d3ac3628e389c) Thanks [@handeyeco](https://github.com/handeyeco)! - Restructure interaction-editor subcomponents
+
+## 2.15.5
+
+### Patch Changes
+
+-   [#904](https://github.com/Khan/perseus/pull/904) [`ca241171`](https://github.com/Khan/perseus/commit/ca241171e5fa893fc114241ac1ebc0260c9d57c5) Thanks [@handeyeco](https://github.com/handeyeco)! - Restructure interaction-editor subcomponents
+
+-   Updated dependencies [[`29563723`](https://github.com/Khan/perseus/commit/29563723cf229a9169d0c78a0174a8dbc8029861), [`6c841f55`](https://github.com/Khan/perseus/commit/6c841f55027c87bfc8339816dac582f175a84193)]:
+    -   @khanacademy/perseus@17.5.0
+
+## 2.15.4
+
+### Patch Changes
+
+-   [#892](https://github.com/Khan/perseus/pull/892) [`22a8f42c`](https://github.com/Khan/perseus/commit/22a8f42c9e31cc74f1ab2f5a375ce5166353153f) Thanks [@handeyeco](https://github.com/handeyeco)! - add tests for NumberLineEditor
+
+*   [#887](https://github.com/Khan/perseus/pull/887) [`d09fdb98`](https://github.com/Khan/perseus/commit/d09fdb98963f23dbeb2009518513db671e0f09bb) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Add Storybook story for EditorPage component
+
+-   [#882](https://github.com/Khan/perseus/pull/882) [`6f1ddaa3`](https://github.com/Khan/perseus/commit/6f1ddaa3eae41d87aaf3514ab0f4cd7875b3125b) Thanks [@handeyeco](https://github.com/handeyeco)! - Add tests for RadioEditor
+
+*   [#893](https://github.com/Khan/perseus/pull/893) [`cbd51e81`](https://github.com/Khan/perseus/commit/cbd51e810cc6f6f406fa92b5faceb4fb3655bbb4) Thanks [@handeyeco](https://github.com/handeyeco)! - add tests for InputNumber
+
+-   [#884](https://github.com/Khan/perseus/pull/884) [`c2172fb9`](https://github.com/Khan/perseus/commit/c2172fb90f247b3a914eaf7eb01b7b15ceb1f0c0) Thanks [@handeyeco](https://github.com/handeyeco)! - Add tests for DropdownEditor
+
+*   [#891](https://github.com/Khan/perseus/pull/891) [`4fe720db`](https://github.com/Khan/perseus/commit/4fe720dbb388b71606bbf98c0606523b3eb3e395) Thanks [@handeyeco](https://github.com/handeyeco)! - add tests for DefinitionEditor
+
+-   [#890](https://github.com/Khan/perseus/pull/890) [`6607ed0d`](https://github.com/Khan/perseus/commit/6607ed0d81adedc84a201ddb4b55f32a78e92dc0) Thanks [@handeyeco](https://github.com/handeyeco)! - add tests for CategorizerEditor
+
+*   [#888](https://github.com/Khan/perseus/pull/888) [`68d8a766`](https://github.com/Khan/perseus/commit/68d8a766bfa769b8ab57c60e79be7080c6b32593) Thanks [@handeyeco](https://github.com/handeyeco)! - add tests for MatcherEditor
+
+-   [#886](https://github.com/Khan/perseus/pull/886) [`eeac31b7`](https://github.com/Khan/perseus/commit/eeac31b7be6ef2526f0f7ae20cc6bfa237581798) Thanks [@handeyeco](https://github.com/handeyeco)! - Add tests for SorterEditor
+
+*   [#885](https://github.com/Khan/perseus/pull/885) [`8e0eb5bc`](https://github.com/Khan/perseus/commit/8e0eb5bc7059c99054f9b13af9780c1103ebf5ee) Thanks [@handeyeco](https://github.com/handeyeco)! - Add tests for ExplanationEditor
+
+-   [#883](https://github.com/Khan/perseus/pull/883) [`0b90e681`](https://github.com/Khan/perseus/commit/0b90e681b7c81f76bca419c879c0985e3fa1226f) Thanks [@handeyeco](https://github.com/handeyeco)! - Add tests for NumericInputEditor
+
+-   Updated dependencies [[`c9db8185`](https://github.com/Khan/perseus/commit/c9db818510e2e0fd142c23298890dcad89a7549a), [`d09fdb98`](https://github.com/Khan/perseus/commit/d09fdb98963f23dbeb2009518513db671e0f09bb)]:
+    -   @khanacademy/perseus@17.4.0
+
 ## 2.15.3
 
 ### Patch Changes
diff --git a/packages/perseus-editor/package.json b/packages/perseus-editor/package.json
index 07f798ee80..6abe76d0d2 100644
--- a/packages/perseus-editor/package.json
+++ b/packages/perseus-editor/package.json
@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.15.3",
+    "version": "2.16.2",
     "publishConfig": {
         "access": "public"
     },
@@ -24,18 +24,19 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/perseus": "^17.3.3",
+        "@khanacademy/math-input": "^16.5.0",
+        "@khanacademy/perseus": "^17.7.0",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-icon": "4.0.0",
+        "@khanacademy/wonder-blocks-icon": "4.0.1",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
@@ -50,14 +51,14 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-icon": "4.0.0",
+        "@khanacademy/wonder-blocks-icon": "4.0.1",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
diff --git a/packages/perseus-editor/src/__stories__/editor-page.stories.tsx b/packages/perseus-editor/src/__stories__/editor-page.stories.tsx
new file mode 100644
index 0000000000..208bf80fda
--- /dev/null
+++ b/packages/perseus-editor/src/__stories__/editor-page.stories.tsx
@@ -0,0 +1,65 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import {EditorPage} from "..";
+import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
+
+import type {
+    DeviceType,
+    Hint,
+    PerseusAnswerArea,
+    PerseusRenderer,
+} from "@khanacademy/perseus";
+
+registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
+
+export default {
+    title: "Perseus/Editor/EditorPage",
+};
+
+const onChangeAction = action("onChange");
+
+export const Demo = (): React.ReactElement => {
+    const [previewDevice, setPreviewDevice] =
+        React.useState<DeviceType>("phone");
+    const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
+    const [answerArea, setAnswerArea] = React.useState<
+        PerseusAnswerArea | undefined | null
+    >();
+    const [question, setQuestion] = React.useState<
+        PerseusRenderer | undefined
+    >();
+    const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();
+
+    return (
+        <EditorPage
+            apiOptions={{isMobile: false}}
+            previewDevice={previewDevice}
+            onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
+            developerMode={true}
+            jsonMode={jsonMode}
+            answerArea={answerArea}
+            question={question}
+            hints={hints}
+            frameSource="about:blank"
+            previewURL="about:blank"
+            itemId="1"
+            onChange={(props) => {
+                onChangeAction(props);
+
+                if ("jsonMode" in props) {
+                    setJsonMode(props.jsonMode);
+                }
+                if ("answerArea" in props) {
+                    setAnswerArea(props.answerArea);
+                }
+                if ("question" in props) {
+                    setQuestion(props.question);
+                }
+                if ("hints" in props) {
+                    setHints(props.hints);
+                }
+            }}
+        />
+    );
+};
diff --git a/packages/perseus-editor/src/__stories__/editor.stories.tsx b/packages/perseus-editor/src/__stories__/editor.stories.tsx
index 5a89e04160..b691ea84aa 100644
--- a/packages/perseus-editor/src/__stories__/editor.stories.tsx
+++ b/packages/perseus-editor/src/__stories__/editor.stories.tsx
@@ -4,19 +4,17 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
+import {Editor} from "..";
 import SideBySide from "../../../../testing/side-by-side";
 import {question1} from "../__testdata__/input-number.testdata";
-import Editor from "../editor";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
 import type {PerseusRenderer} from "@khanacademy/perseus";
 
-import "../styles/perseus-editor.less";
-
 registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
 
 export default {
-    title: "Perseus/Editor",
+    title: "Perseus/Editor/Editor",
 };
 
 export const Demo = (): React.ReactElement => {
diff --git a/packages/perseus-editor/src/components/__tests__/blur-input.test.tsx b/packages/perseus-editor/src/components/__tests__/blur-input.test.tsx
new file mode 100644
index 0000000000..1c7fe676ea
--- /dev/null
+++ b/packages/perseus-editor/src/components/__tests__/blur-input.test.tsx
@@ -0,0 +1,67 @@
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import BlurInput from "../blur-input";
+
+import "@testing-library/jest-dom"; // Imports custom matchers
+
+describe("BlurInput", () => {
+    it("should render", () => {
+        render(<BlurInput value="Hello world!" onChange={() => {}} />);
+    });
+
+    it("should call onChange prop on blur", () => {
+        // Arrange
+        const onChange = jest.fn();
+        render(<BlurInput value="Hello world!" onChange={onChange} />);
+
+        // Act
+        userEvent.type(screen.getByRole("textbox"), "Hello Khan Academy!");
+        userEvent.tab();
+
+        // Assert
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onChange prop when typing into input", () => {
+        // Arrange
+        const onChange = jest.fn();
+        render(<BlurInput value="Hello world!" onChange={onChange} />);
+
+        // Act
+        userEvent.type(screen.getByRole("textbox"), "Hello Khan Academy!");
+        // NO TAB
+
+        // Assert
+        expect(onChange).not.toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onChange prop when pasting into input", () => {
+        // Arrange
+        const onChange = jest.fn();
+        render(<BlurInput value="Hello world!" onChange={onChange} />);
+
+        // Act
+        userEvent.paste(screen.getByRole("textbox"), "Hello Khan Academy!");
+        // NO TAB
+
+        // Assert
+        expect(onChange).not.toHaveBeenCalledTimes(1);
+    });
+
+    it("should focus input through focus function", () => {
+        const ref = React.createRef<BlurInput>();
+
+        // Arrange
+        render(
+            <BlurInput ref={ref} value="Hello world!" onChange={() => {}} />,
+        );
+
+        // Act
+        ref.current?.focus();
+
+        // Assert
+        expect(screen.getByRole("textbox")).toHaveFocus();
+    });
+});
diff --git a/packages/perseus-editor/src/components/blur-input.tsx b/packages/perseus-editor/src/components/blur-input.tsx
index 1412d44c06..e7a71a98c4 100644
--- a/packages/perseus-editor/src/components/blur-input.tsx
+++ b/packages/perseus-editor/src/components/blur-input.tsx
@@ -27,6 +27,8 @@ type State = {
  */
 // eslint-disable-next-line react/no-unsafe
 class BlurInput extends React.Component<Props, State> {
+    input = React.createRef<HTMLInputElement>();
+
     constructor(props: Props) {
         super(props);
         this.state = {value: this.props.value};
@@ -45,9 +47,14 @@ class BlurInput extends React.Component<Props, State> {
         this.props.onChange(e.target.value);
     };
 
+    focus() {
+        this.input.current?.focus();
+    }
+
     render(): React.ReactNode {
         return (
             <input
+                ref={this.input}
                 className={this.props.className}
                 style={this.props.style}
                 type="text"
diff --git a/packages/perseus-editor/src/editor-page.tsx b/packages/perseus-editor/src/editor-page.tsx
index 32ba6830bf..59b140e9f5 100644
--- a/packages/perseus-editor/src/editor-page.tsx
+++ b/packages/perseus-editor/src/editor-page.tsx
@@ -15,6 +15,7 @@ import type {
     Hint,
     ImageUploader,
     Version,
+    PerseusItem,
 } from "@khanacademy/perseus";
 import type {KEScore} from "@khanacademy/perseus-core";
 
@@ -25,7 +26,7 @@ type Props = {
     answerArea?: any; // related to the question,
     // TODO(CP-4838): Should this be a required prop?
     contentPaths?: ReadonlyArray<string>;
-    // Only used in the perseus demos. Consider removing.
+    // "Power user" mode. Shows the raw JSON of the question.
     developerMode: boolean;
     // Source HTML for the iframe to render
     frameSource: string;
@@ -53,15 +54,8 @@ type Props = {
     previewURL: string;
 };
 
-type PerseusJson = {
-    question: any;
-    answerArea: any;
-    hints: ReadonlyArray<Hint>;
-    itemDataVersion?: Version;
-};
-
 type State = {
-    json: PerseusJson;
+    json: PerseusItem;
     gradeMessage: string;
     wasAnswered: boolean;
     highlightLint: boolean;
@@ -69,10 +63,11 @@ type State = {
 
 class EditorPage extends React.Component<Props, State> {
     _isMounted: boolean;
-    // @ts-expect-error - TS2564 - Property 'rendererMountNode' has no initializer and is not definitely assigned in the constructor.
-    rendererMountNode: HTMLDivElement;
     renderer: any;
 
+    itemEditor = React.createRef<ItemEditor>();
+    hintsEditor = React.createRef<CombinedHintsEditor>();
+
     static defaultProps: {
         developerMode: boolean;
         jsonMode: boolean;
@@ -108,7 +103,6 @@ class EditorPage extends React.Component<Props, State> {
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;
 
-        this.rendererMountNode = document.createElement("div");
         this.updateRenderer();
     }
 
@@ -160,9 +154,7 @@ class EditorPage extends React.Component<Props, State> {
             isMobile: touch,
         };
 
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'triggerPreviewUpdate' does not exist on type 'ReactInstance'.
-        this.refs.itemEditor.triggerPreviewUpdate({
+        this.itemEditor.current?.triggerPreviewUpdate({
             type: "question",
             data: _({
                 item: this.serialize(),
@@ -176,9 +168,7 @@ class EditorPage extends React.Component<Props, State> {
                     paths: this.props.contentPaths || [],
                 },
                 reviewMode: true,
-                // eslint-disable-next-line react/no-string-refs
-                // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-                legacyPerseusLint: this.refs.itemEditor.getSaveWarnings(),
+                legacyPerseusLint: this.itemEditor.current?.getSaveWarnings(),
             }).extend(
                 _(this.props).pick(
                     "workAreaSelector",
@@ -198,25 +188,17 @@ class EditorPage extends React.Component<Props, State> {
     }
 
     getSaveWarnings(): any {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        const issues1 = this.refs.itemEditor.getSaveWarnings();
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        const issues2 = this.refs.hintsEditor.getSaveWarnings();
+        const issues1 = this.itemEditor.current?.getSaveWarnings();
+        const issues2 = this.hintsEditor.current?.getSaveWarnings();
         return issues1.concat(issues2);
     }
 
-    serialize(options?: {keepDeletedWidgets?: boolean}): any | PerseusJson {
+    serialize(options?: {keepDeletedWidgets?: boolean}): any | PerseusItem {
         if (this.props.jsonMode) {
             return this.state.json;
         }
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-        return _.extend(this.refs.itemEditor.serialize(options), {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-            hints: this.refs.hintsEditor.serialize(options),
+        return _.extend(this.itemEditor.current?.serialize(options), {
+            hints: this.hintsEditor.current?.serialize(options),
         });
     }
 
@@ -226,7 +208,7 @@ class EditorPage extends React.Component<Props, State> {
         this.props.onChange(newProps, cb, silent);
     };
 
-    changeJSON: (newJson: PerseusJson) => void = (newJson: PerseusJson) => {
+    changeJSON: (newJson: PerseusItem) => void = (newJson: PerseusItem) => {
         this.setState({
             json: newJson,
         });
@@ -308,8 +290,7 @@ class EditorPage extends React.Component<Props, State> {
 
                 {(!this.props.developerMode || !this.props.jsonMode) && (
                     <ItemEditor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="itemEditor"
+                        ref={this.itemEditor}
                         itemId={this.props.itemId}
                         question={this.props.question}
                         answerArea={this.props.answerArea}
@@ -325,8 +306,7 @@ class EditorPage extends React.Component<Props, State> {
 
                 {(!this.props.developerMode || !this.props.jsonMode) && (
                     <CombinedHintsEditor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="hintsEditor"
+                        ref={this.hintsEditor}
                         itemId={this.props.itemId}
                         hints={this.props.hints}
                         imageUploader={this.props.imageUploader}
diff --git a/packages/perseus-editor/src/editor.tsx b/packages/perseus-editor/src/editor.tsx
index 007b53fa7d..e734045107 100644
--- a/packages/perseus-editor/src/editor.tsx
+++ b/packages/perseus-editor/src/editor.tsx
@@ -18,7 +18,6 @@ import katex from "katex";
 // eslint-disable-next-line import/no-unassigned-import
 import "./katex-mhchem";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
 import DragTarget from "./components/drag-target";
@@ -88,8 +87,7 @@ const IMAGE_REGEX = /!\[[^\]]*\]\(([^\s)]+)[^)]*\)/g;
  * ignores captures. If you don't need captures, use String::match
  */
 const allMatches = function (regex: RegExp, str: string) {
-    // @ts-expect-error - TS2702 - 'RegExp' only refers to a type, but is being used as a namespace here.
-    const result: Array<any | RegExp.matchResult> = [];
+    const result: Array<RegExpExecArray> = [];
     // eslint-disable-next-line no-constant-condition
     while (true) {
         const match = regex.exec(str);
@@ -106,7 +104,7 @@ const allMatches = function (regex: RegExp, str: string) {
  * markdown.
  */
 const imageUrlsFromContent = function (content: string) {
-    return _.map(allMatches(IMAGE_REGEX, content), (capture) => capture[1]);
+    return allMatches(IMAGE_REGEX, content).map((capture) => capture[1]);
 };
 
 type Props = Readonly<{
@@ -157,6 +155,9 @@ class Editor extends React.Component<Props, State> {
     deferredChange: any | null | undefined;
     widgetIds: any | null | undefined;
 
+    underlay = React.createRef<HTMLDivElement>();
+    textarea = React.createRef<HTMLTextAreaElement>();
+
     static defaultProps: DefaultProps = {
         content: "",
         placeholder: "",
@@ -183,11 +184,14 @@ class Editor extends React.Component<Props, State> {
         // this.props.onChange during that, since it calls our parent's
         // setState
         this._sizeImages(this.props);
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        $(ReactDOM.findDOMNode(this.refs.textarea))
+        // NOTE(jeremy): We use the non-null assertion here (!) because refs
+        // are guaranteed to be up-to-date before componentDidMount or
+        // componentDidUpdate fires.
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        $(this.textarea.current!)
             // @ts-expect-error - TS2339 - Property 'on' does not exist on type 'JQueryStatic'.
             .on("copy cut", this._maybeCopyWidgets)
+            // @ts-expect-error - TS2769 - No overload matches this call.
             .on("paste", this._maybePasteWidgets);
     }
 
@@ -200,9 +204,7 @@ class Editor extends React.Component<Props, State> {
     }
 
     componentDidUpdate(prevProps: Props) {
-        // TODO(alpert): Maybe fix React so this isn't necessary
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = ReactDOM.findDOMNode(this.refs.textarea);
+        const textarea = this.textarea.current;
 
         // Slightly unorthodox method to ensure that programmatic text changes
         // are in the browser's undo stack.
@@ -211,20 +213,11 @@ class Editor extends React.Component<Props, State> {
         // will return false. However at least in Firefox setting `value` on a
         // textbox clears the undo stack so we don't get unexpected undo
         // behavior.
-        if (this.lastUserValue !== null && textarea) {
-            /**
-             * TODO(somewhatabstract, JIRA-XXXX):
-             * textarea should be refined with an instanceof check to
-             * HTMLTextAreaElement so that these props are available.
-             */
-            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+        if (this.lastUserValue != null && textarea) {
             textarea.focus();
-            // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
             textarea.value = this.lastUserValue;
-            // @ts-expect-error - TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
             textarea.selectionStart = 0;
-            // @ts-expect-error - TS2339 - Property 'select' does not exist on type 'Element | Text'.
-            textarea.select(0, prevProps.content.length);
+            textarea.setSelectionRange(0, prevProps.content.length);
             if (
                 document.execCommand(
                     "insertText",
@@ -234,7 +227,6 @@ class Editor extends React.Component<Props, State> {
             ) {
                 // This command is not implemented. Fall back to setting `value`
                 // directly.
-                // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
                 textarea.value = this.props.content;
             }
             this.lastUserValue = null;
@@ -298,11 +290,9 @@ class Editor extends React.Component<Props, State> {
             return;
         }
 
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = this.refs.textarea;
+        const textarea = this.textarea.current;
         const re = new RegExp(widgetRegExp.replace("{id}", id), "gm");
-        // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'ReactInstance'.
-        this.props.onChange({content: textarea.value.replace(re, "")});
+        this.props.onChange({content: textarea?.value.replace(re, "")});
     };
 
     /**
@@ -455,11 +445,12 @@ class Editor extends React.Component<Props, State> {
         // Tab-completion of widgets. For example, to insert an image:
         // type `[[im`, then tab.
         if (e.key === "Tab") {
-            // eslint-disable-next-line react/no-string-refs
-            const textarea = ReactDOM.findDOMNode(this.refs.textarea);
+            // We're in an event handler attached to the textarea, so the ref
+            // can't be empty/undefined! (which is why its safe to use the
+            // non-null-assertion here. aka the `!` suffix)
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const textarea = this.textarea.current!;
 
-            // findDOMNode can also return Text, but we know it's an element.
-            // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
             const word = Util.textarea.getWordBeforeCursor(textarea);
             const matches = word.string.toLowerCase().match(shortcutRegexp);
 
@@ -650,9 +641,6 @@ class Editor extends React.Component<Props, State> {
         cursorRange: ReadonlyArray<number>,
         widgetType: string,
     ) => {
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = ReactDOM.findDOMNode(this.refs.textarea);
-
         // Note: we have to use _.map here instead of Array::map
         // because the results of a .match might be null if no
         // widgets were found.
@@ -715,11 +703,13 @@ class Editor extends React.Component<Props, State> {
                 content: newContent,
                 widgets: newWidgets,
             },
-            function () {
+            () => {
+                if (!this.textarea.current) {
+                    return;
+                }
+
                 Util.textarea.moveCursor(
-                    // findDOMNode can return Text but we know this is Element
-                    // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
-                    textarea,
+                    this.textarea.current,
                     // We want to put the cursor after the widget
                     // and after any added newlines
                     newContent.length - postlude.length,
@@ -729,21 +719,21 @@ class Editor extends React.Component<Props, State> {
     };
 
     _addWidget: (widgetType: string) => void = (widgetType: string) => {
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = this.refs.textarea;
+        const textarea = this.textarea.current;
+        if (!textarea) {
+            return;
+        }
 
         this._addWidgetToContent(
             this.props.content,
-            // @ts-expect-error - TS2339 - Property 'selectionStart' does not exist on type 'ReactInstance'. | TS2339 - Property 'selectionEnd' does not exist on type 'ReactInstance'.
             [textarea.selectionStart, textarea.selectionEnd],
             widgetType,
         );
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         textarea.focus();
     };
 
-    addTemplate: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void = (
-        e: React.SyntheticEvent<HTMLTextAreaElement>,
+    addTemplate: (e: React.SyntheticEvent<HTMLSelectElement>) => void = (
+        e: React.SyntheticEvent<HTMLSelectElement>,
     ) => {
         const templateType = e.currentTarget.value;
         if (templateType === "") {
@@ -825,32 +815,17 @@ class Editor extends React.Component<Props, State> {
     };
 
     focus: () => void = () => {
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = ReactDOM.findDOMNode(this.refs.textarea);
+        const textarea = this.textarea.current;
         if (textarea) {
-            /**
-             * TODO(somewhatabstract, JIRA-XXXX):
-             * textarea should be refined with an instanceof check to
-             * HTMLTextAreaElement so that these props are available.
-             */
-            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
             textarea.focus();
         }
     };
 
     focusAndMoveToEnd: () => void = () => {
         this.focus();
-        // eslint-disable-next-line react/no-string-refs
-        const textarea = ReactDOM.findDOMNode(this.refs.textarea);
+        const textarea = this.textarea.current;
         if (textarea) {
-            /**
-             * TODO(somewhatabstract, JIRA-XXXX):
-             * textarea should be refined with an instanceof check to
-             * HTMLTextAreaElement so that these props are available.
-             */
-            // @ts-expect-error - TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
             textarea.selectionStart = textarea.value.length;
-            // @ts-expect-error - TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
             textarea.selectionEnd = textarea.value.length;
         }
     };
@@ -1010,7 +985,6 @@ class Editor extends React.Component<Props, State> {
 
             const insertTemplateString = "Insert template\u2026";
             templatesDropDown = (
-                // @ts-expect-error - TS2322 - Type '(e: SyntheticEvent<HTMLTextAreaElement, Event>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                 <select onChange={this.addTemplate}>
                     <option value="">{insertTemplateString}</option>
                     <option disabled>--</option>
@@ -1051,15 +1025,13 @@ class Editor extends React.Component<Props, State> {
         const completeTextarea = [
             <div
                 className="perseus-textarea-underlay"
-                // eslint-disable-next-line react/no-string-refs
-                ref="underlay"
+                ref={this.underlay}
                 key="underlay"
             >
                 {underlayPieces}
             </div>,
             <textarea
-                // eslint-disable-next-line react/no-string-refs
-                ref="textarea"
+                ref={this.textarea}
                 key="textarea"
                 onChange={this.handleChange}
                 onKeyDown={this._handleKeyDown}
diff --git a/packages/perseus-editor/src/hint-editor.tsx b/packages/perseus-editor/src/hint-editor.tsx
index 26033aff23..82d13f747c 100644
--- a/packages/perseus-editor/src/hint-editor.tsx
+++ b/packages/perseus-editor/src/hint-editor.tsx
@@ -74,6 +74,8 @@ export class HintEditor extends React.Component<HintEditorProps> {
         showRemoveButton: true,
     };
 
+    editor = React.createRef<Editor>();
+
     handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void = (
         e: React.ChangeEvent<HTMLInputElement>,
     ) => {
@@ -81,21 +83,15 @@ export class HintEditor extends React.Component<HintEditorProps> {
     };
 
     focus: () => void = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.editor.focus();
+        this.editor.current?.focus();
     };
 
     getSaveWarnings: () => any = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        return this.refs.editor.getSaveWarnings();
+        return this.editor.current?.getSaveWarnings();
     };
 
     serialize: (options?: any) => any = (options: any) => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-        return this.refs.editor.serialize(options);
+        return this.editor.current?.serialize(options);
     };
 
     render(): React.ReactNode {
@@ -103,8 +99,7 @@ export class HintEditor extends React.Component<HintEditorProps> {
             <div className={"perseus-hint-editor " + this.props.className}>
                 {this.props.showTitle && <div className="pod-title">Hint</div>}
                 <Editor
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="editor"
+                    ref={this.editor}
                     // Using the AssessmentItem content ID as the key
                     // ensures that when the user navigates to another
                     // item in the Sidebar, the question editor is
@@ -192,6 +187,9 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
         highlightLint: false,
     };
 
+    editor = React.createRef<HintEditor>();
+    frame = React.createRef<IframeContentRenderer>();
+
     componentDidMount() {
         this.updatePreview();
     }
@@ -204,9 +202,7 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
         const shouldBold =
             this.props.isLast && !/\*\*/.test(this.props.hint.content);
 
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'sendNewData' does not exist on type 'ReactInstance'.
-        this.refs.frame.sendNewData({
+        this.frame.current?.sendNewData({
             type: "hint",
             data: {
                 hint: this.props.hint,
@@ -223,21 +219,15 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
     };
 
     getSaveWarnings = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        return this.refs.editor.getSaveWarnings();
+        return this.editor.current?.getSaveWarnings();
     };
 
     serialize = (options: any) => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-        return this.refs.editor.serialize(options);
+        return this.editor.current?.serialize(options);
     };
 
     focus = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.editor.focus();
+        this.editor.current?.focus();
     };
 
     render(): React.ReactNode {
@@ -252,8 +242,7 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
             >
                 <div className="perseus-editor-left-cell">
                     <HintEditor
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="editor"
+                        ref={this.editor}
                         itemId={this.props.itemId}
                         isFirst={this.props.isFirst}
                         isLast={this.props.isLast}
@@ -274,8 +263,7 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
                         nochrome={true}
                     >
                         <IframeContentRenderer
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="frame"
+                            ref={this.frame}
                             datasetKey="mobile"
                             datasetValue={isMobile}
                             seamless={true}
diff --git a/packages/perseus-editor/src/iframe-content-renderer.tsx b/packages/perseus-editor/src/iframe-content-renderer.tsx
index 9ea1e407b8..a80a93950f 100644
--- a/packages/perseus-editor/src/iframe-content-renderer.tsx
+++ b/packages/perseus-editor/src/iframe-content-renderer.tsx
@@ -66,6 +66,8 @@ type Props = {
 
 class IframeContentRenderer extends React.Component<Props> {
     _frame: HTMLIFrameElement | null | undefined;
+    container = React.createRef<HTMLDivElement>();
+
     // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     _isMounted: boolean;
     _lastData: any;
@@ -89,10 +91,12 @@ class IframeContentRenderer extends React.Component<Props> {
 
         updateIframeHeight[this.iframeID] = (height: any) => {
             this._lastHeight = height;
-            if (this._isMounted && this.props.seamless) {
-                // eslint-disable-next-line react/no-string-refs
-                // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
-                this.refs.container.style.height = height + "px";
+            if (
+                this._isMounted &&
+                this.props.seamless &&
+                this.container.current
+            ) {
+                this.container.current.style.height = height + "px";
             }
         };
     }
@@ -105,14 +109,12 @@ class IframeContentRenderer extends React.Component<Props> {
     }
 
     componentDidUpdate(prevProps: Props) {
-        if (!this.props.seamless) {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
-            this.refs.container.style.height = "100%";
-        } else {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
-            this.refs.container.style.height = this._lastHeight + "px";
+        if (this.container.current) {
+            if (!this.props.seamless) {
+                this.container.current.style.height = "100%";
+            } else {
+                this.container.current.style.height = this._lastHeight + "px";
+            }
         }
 
         if (prevProps.datasetValue !== this.props.datasetValue) {
@@ -131,9 +133,7 @@ class IframeContentRenderer extends React.Component<Props> {
     _prepareFrame() {
         // Don't initialize the iframe until the page has loaded
         if (this._frame) {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'removeChild' does not exist on type 'ReactInstance'.
-            this.refs.container.removeChild(this._frame);
+            this.container.current?.removeChild(this._frame);
         }
 
         const frame = document.createElement("iframe");
@@ -159,9 +159,7 @@ class IframeContentRenderer extends React.Component<Props> {
             frame.dataset.lintGutter = "true";
         }
 
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'appendChild' does not exist on type 'ReactInstance'.
-        this.refs.container.appendChild(frame);
+        this.container.current?.appendChild(frame);
 
         this._frame = frame;
     }
@@ -181,8 +179,9 @@ class IframeContentRenderer extends React.Component<Props> {
     }
 
     render(): React.ReactNode {
-        // eslint-disable-next-line react/no-string-refs
-        return <div ref="container" style={{width: "100%", height: "100%"}} />;
+        return (
+            <div ref={this.container} style={{width: "100%", height: "100%"}} />
+        );
     }
 }
 
diff --git a/packages/perseus-editor/src/item-editor.tsx b/packages/perseus-editor/src/item-editor.tsx
index fc3a8fc4c8..53d42ecfc3 100644
--- a/packages/perseus-editor/src/item-editor.tsx
+++ b/packages/perseus-editor/src/item-editor.tsx
@@ -42,6 +42,10 @@ class ItemEditor extends React.Component<Props> {
         answerArea: {},
     };
 
+    frame = React.createRef<IframeContentRenderer>();
+    questionEditor = React.createRef<Editor>();
+    itemExtrasEditor = React.createRef<ItemExtrasEditor>();
+
     // Notify the parent that the question or answer area has been updated.
     updateProps: ChangeHandler = (newProps, cb, silent) => {
         const props = _(this.props).pick("question", "answerArea");
@@ -50,9 +54,7 @@ class ItemEditor extends React.Component<Props> {
     };
 
     triggerPreviewUpdate: (newData?: any) => void = (newData: any) => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'sendNewData' does not exist on type 'ReactInstance'.
-        this.refs.frame.sendNewData(newData);
+        this.frame.current?.sendNewData(newData);
     };
 
     handleEditorChange: ChangeHandler = (newProps, cb, silent) => {
@@ -66,9 +68,7 @@ class ItemEditor extends React.Component<Props> {
     };
 
     getSaveWarnings: () => any = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        return this.refs.questionEditor.getSaveWarnings();
+        return this.questionEditor.current?.getSaveWarnings();
     };
 
     serialize: (options?: any) => {
@@ -80,12 +80,8 @@ class ItemEditor extends React.Component<Props> {
         question: any;
     } = (options: any) => {
         return {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-            question: this.refs.questionEditor.serialize(options),
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-            answerArea: this.refs.itemExtrasEditor.serialize(options),
+            question: this.questionEditor.current?.serialize(options),
+            answerArea: this.itemExtrasEditor.current?.serialize(),
             itemDataVersion: ITEM_DATA_VERSION,
         };
     };
@@ -100,8 +96,7 @@ class ItemEditor extends React.Component<Props> {
                     <div className="perseus-editor-left-cell">
                         <div className="pod-title">Question</div>
                         <Editor
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="questionEditor"
+                            ref={this.questionEditor}
                             // Using the AssessmentItem content ID as the key
                             // ensures that when the user navigates to another
                             // item in the Sidebar, the question editor is
@@ -124,8 +119,7 @@ class ItemEditor extends React.Component<Props> {
                                 nochrome={true}
                             >
                                 <IframeContentRenderer
-                                    // eslint-disable-next-line react/no-string-refs
-                                    ref="frame"
+                                    ref={this.frame}
                                     key={this.props.deviceType}
                                     datasetKey="mobile"
                                     datasetValue={isMobile}
@@ -146,8 +140,7 @@ class ItemEditor extends React.Component<Props> {
                     <div className="perseus-editor-left-cell">
                         <div className="pod-title">Question extras</div>
                         <ItemExtrasEditor
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="itemExtrasEditor"
+                            ref={this.itemExtrasEditor}
                             onChange={this.handleItemExtrasChange}
                             {...this.props.answerArea}
                         />
diff --git a/packages/perseus-editor/src/util/register-all-widgets-and-editors-for-testing.test.ts b/packages/perseus-editor/src/util/register-all-widgets-and-editors-for-testing.test.ts
index 3697d8fa59..a3f53e5c1f 100644
--- a/packages/perseus-editor/src/util/register-all-widgets-and-editors-for-testing.test.ts
+++ b/packages/perseus-editor/src/util/register-all-widgets-and-editors-for-testing.test.ts
@@ -6,7 +6,9 @@ describe("Registering all widgets and editors", () => {
     it("should have an editor for every widget", () => {
         registerAllWidgetsAndEditorsForTesting();
 
-        const allWidgetsTypes = Widgets.getAllWidgetTypes();
+        const allWidgetsTypes = Widgets.getAllWidgetTypes()
+            // Auto correct is a special kind of widget, it DOES NOT need an editor
+            .filter((a) => a !== "deprecated-standin");
 
         expect(allWidgetsTypes).not.toContain("undefined");
 
diff --git a/packages/perseus-editor/src/widgets/__stories__/categorizer-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/categorizer-editor.stories.tsx
new file mode 100644
index 0000000000..cc96630454
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/categorizer-editor.stories.tsx
@@ -0,0 +1,24 @@
+import {ApiOptions} from "@khanacademy/perseus";
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import CategorizerEditor from "../categorizer-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Categorizer Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return (
+        <CategorizerEditor
+            onChange={action("onChange")}
+            apiOptions={ApiOptions.defaults}
+        />
+    );
+};
diff --git a/packages/perseus-editor/src/widgets/__stories__/definition-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/definition-editor.stories.tsx
new file mode 100644
index 0000000000..5d4349f486
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/definition-editor.stories.tsx
@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import DefinitionEditor from "../definition-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Definition Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <DefinitionEditor onChange={action("onChange")} />;
+};
diff --git a/packages/perseus-editor/src/widgets/__stories__/input-number-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/input-number-editor.stories.tsx
new file mode 100644
index 0000000000..83936c3fbe
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/input-number-editor.stories.tsx
@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import InputNumberEditor from "../input-number-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/InputNumber Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <InputNumberEditor onChange={action("onChange")} />;
+};
diff --git a/packages/perseus-editor/src/widgets/__stories__/interaction-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/interaction-editor.stories.tsx
new file mode 100644
index 0000000000..bd5ded6fd6
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/interaction-editor.stories.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import {useState} from "react";
+
+import InteractionEditor from "../interaction-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Interaction Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    const [elements, setElements] = useState();
+    const [graph, setGraph] = useState();
+
+    function handleChange(next) {
+        if (next.graph) {
+            setGraph(next.graph);
+        }
+
+        if (next.elements) {
+            setElements(next.elements);
+        }
+    }
+
+    return (
+        <InteractionEditor
+            onChange={handleChange}
+            elements={elements}
+            graph={graph}
+        />
+    );
+};
diff --git a/packages/perseus-editor/src/widgets/__stories__/matcher-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/matcher-editor.stories.tsx
new file mode 100644
index 0000000000..b1938497f8
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/matcher-editor.stories.tsx
@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import MatcherEditor from "../matcher-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Matcher Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <MatcherEditor onChange={action("onChange")} />;
+};
diff --git a/packages/perseus-editor/src/widgets/__stories__/number-line-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/number-line-editor.stories.tsx
new file mode 100644
index 0000000000..7eff3fe5a0
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/number-line-editor.stories.tsx
@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import NumberLineEditor from "../number-line-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Number Line Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <NumberLineEditor onChange={action("onChange")} />;
+};
diff --git a/packages/perseus-editor/src/widgets/__stories__/sorter-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/sorter-editor.stories.tsx
new file mode 100644
index 0000000000..52d9819f5f
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__stories__/sorter-editor.stories.tsx
@@ -0,0 +1,18 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import SorterEditor from "../sorter-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Sorter Editor",
+} as Story;
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <SorterEditor onChange={action("onChange")} />;
+};
diff --git a/packages/perseus-editor/src/widgets/__tests__/categorizer-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/categorizer-editor.test.tsx
new file mode 100644
index 0000000000..cc09e1c831
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__tests__/categorizer-editor.test.tsx
@@ -0,0 +1,51 @@
+import {ApiOptions, Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import CategorizerEditor from "../categorizer-editor";
+
+describe("categorizer-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(
+            <CategorizerEditor
+                onChange={() => undefined}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        expect(
+            await screen.findByText("Randomize item order"),
+        ).toBeInTheDocument();
+    });
+
+    it("should be possible to change randomize item order", async () => {
+        const onChangeMock = jest.fn();
+
+        render(
+            <CategorizerEditor
+                onChange={onChangeMock}
+                apiOptions={ApiOptions.defaults}
+            />,
+        );
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Randomize item order",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({randomizeItems: true}),
+        );
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/__tests__/definition-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/definition-editor.test.tsx
new file mode 100644
index 0000000000..003b233810
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__tests__/definition-editor.test.tsx
@@ -0,0 +1,41 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import DefinitionEditor from "../definition-editor";
+
+describe("definition-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<DefinitionEditor onChange={() => undefined} />);
+
+        expect(
+            await screen.findByText("Definition style guide"),
+        ).toBeInTheDocument();
+    });
+
+    it("should be possible to change the definition", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<DefinitionEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Word to be defined:",
+        });
+        userEvent.type(input, "a");
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({togglePrompt: "a"}),
+            undefined,
+        );
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/__tests__/explanation-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/explanation-editor.test.tsx
index 268d1ba08b..2e7465651a 100644
--- a/packages/perseus-editor/src/widgets/__tests__/explanation-editor.test.tsx
+++ b/packages/perseus-editor/src/widgets/__tests__/explanation-editor.test.tsx
@@ -8,7 +8,7 @@ import "@testing-library/jest-dom";
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import ExplanationEditor from "../explanation-editor";
 
-describe("dropdown-editor", () => {
+describe("explanation-editor", () => {
     beforeEach(() => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
diff --git a/packages/perseus-editor/src/widgets/__tests__/input-number-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/input-number-editor.test.tsx
new file mode 100644
index 0000000000..c3d03e454e
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__tests__/input-number-editor.test.tsx
@@ -0,0 +1,128 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import InputNumberEditor from "../input-number-editor";
+
+describe("input-number-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<InputNumberEditor onChange={() => undefined} />);
+
+        expect(await screen.findByText("Correct answer:")).toBeInTheDocument();
+    });
+
+    it("should be possible to change the correct answer", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<InputNumberEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {name: "Correct answer:"});
+        userEvent.type(input, "1");
+        input.blur();
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({value: 1}),
+        );
+    });
+
+    it("should be possible to change allow inexact answers", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<InputNumberEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Allow inexact answers"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({inexact: true}),
+        );
+    });
+
+    it("should be possible to change right alignment", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<InputNumberEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Right alignment"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith(
+            expect.objectContaining({rightAlign: true}),
+        );
+    });
+
+    const unsimplifiedOptions = ["required", "optional", "enforced"];
+    unsimplifiedOptions.forEach((opt) => {
+        it(`should be possible to set unsimplified answers to: ${opt}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<InputNumberEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Unsimplified answers",
+            });
+            userEvent.selectOptions(select, opt);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({simplify: opt}),
+            );
+        });
+    });
+
+    const answerTypeOptions = [
+        "number",
+        "decimal",
+        "integer",
+        "rational",
+        "improper",
+        "mixed",
+        "percent",
+        "pi",
+    ];
+    answerTypeOptions.forEach((opt) => {
+        it(`should be possible to set answer type to: ${opt}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<InputNumberEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Answer type",
+            });
+            userEvent.selectOptions(select, opt);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({answerType: opt}),
+            );
+        });
+    });
+
+    const sizeOptions = ["normal", "small"];
+    sizeOptions.forEach((opt) => {
+        it(`should be possible to set unsimplified answers to: ${opt}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<InputNumberEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Width",
+            });
+            userEvent.selectOptions(select, opt);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({size: opt}),
+            );
+        });
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/__tests__/matcher-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/matcher-editor.test.tsx
new file mode 100644
index 0000000000..7d5c16caa4
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__tests__/matcher-editor.test.tsx
@@ -0,0 +1,47 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import MatcherEditor from "../matcher-editor";
+
+describe("matcher-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("renders", async () => {
+        render(<MatcherEditor onChange={() => {}} />);
+
+        expect(screen.getByText("Correct answer:")).toBeInTheDocument();
+    });
+
+    it("is possible to change option: order of matched pairs matters", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<MatcherEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Order of the matched pairs matters:",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({orderMatters: true});
+    });
+
+    it("should be possible to change padding", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<MatcherEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("checkbox", {name: "Padding:"}));
+
+        expect(onChangeMock).toBeCalledWith({padding: false});
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/__tests__/number-line-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/number-line-editor.test.tsx
new file mode 100644
index 0000000000..c6f506de1e
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__tests__/number-line-editor.test.tsx
@@ -0,0 +1,144 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import NumberLineEditor from "../number-line-editor";
+
+describe("number-line-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<NumberLineEditor onChange={() => undefined} />);
+
+        expect(await screen.findByText("Correct x")).toBeInTheDocument();
+    });
+
+    const relationships = ["lt", "gt", "le", "ge", "eq"];
+    relationships.forEach((rel) => {
+        it(`should be possible to set relationship to: ${rel}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<NumberLineEditor onChange={onChangeMock} />);
+
+            const select = screen.getByRole("combobox", {
+                name: "Select relationship",
+            });
+            userEvent.selectOptions(select, rel);
+
+            expect(onChangeMock).toBeCalledWith(
+                expect.objectContaining({correctRel: rel}),
+            );
+        });
+    });
+
+    it("should be possible to update the answer", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByPlaceholderText("answer");
+        userEvent.type(input, "1");
+
+        expect(onChangeMock).toBeCalledWith({correctX: 1});
+    });
+
+    it("should be possible to update position", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {name: "Position: ∈"});
+        userEvent.type(input, "1");
+
+        expect(onChangeMock).toBeCalledWith({initialX: 1});
+    });
+
+    const styles = {
+        decimal: "Decimals",
+        improper: "Improper fractions",
+        mixed: "Mixed numbers",
+        "non-reduced": "Non-reduced",
+    };
+    Object.entries(styles).forEach(([key, title]) => {
+        it(`should be possible to update style: ${title}`, async () => {
+            const onChangeMock = jest.fn();
+
+            render(<NumberLineEditor onChange={onChangeMock} />);
+
+            userEvent.click(screen.getByTitle(title));
+
+            expect(onChangeMock).toBeCalledWith({labelStyle: key});
+        });
+    });
+
+    it("should be possible to change show tick controller", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Show tick controller"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith({isTickCtrl: true});
+    });
+
+    it("should be possible to change show label tickets", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        userEvent.click(
+            screen.getByRole("checkbox", {name: "Show label ticks"}),
+        );
+
+        expect(onChangeMock).toBeCalledWith({labelTicks: false});
+    });
+
+    it("should be possible to change show tooltips", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("checkbox", {name: "Show tooltips"}));
+
+        expect(onChangeMock).toBeCalledWith({showTooltips: true});
+    });
+
+    it("should be possible to update tick steps", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "or tick step:",
+        });
+        userEvent.type(input, "6");
+
+        expect(onChangeMock).toBeCalledWith({
+            numDivisions: null,
+            tickStep: 6,
+        });
+    });
+
+    it("should be possible to update snap divisions", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumberLineEditor onChange={onChangeMock} />);
+
+        const input = screen.getByRole("textbox", {
+            name: "Snap increments per tick:",
+        });
+        userEvent.type(input, "6");
+
+        expect(onChangeMock).toBeCalledWith({snapDivisions: 26});
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/__tests__/sorter-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/sorter-editor.test.tsx
new file mode 100644
index 0000000000..4ebc216ae7
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__tests__/sorter-editor.test.tsx
@@ -0,0 +1,55 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import SorterEditor from "../sorter-editor";
+
+describe("sorter-editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("renders", async () => {
+        render(<SorterEditor onChange={() => {}} />);
+
+        expect(screen.getByText("Correct answer:")).toBeInTheDocument();
+    });
+
+    it("should be possible to change layout to vertical", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<SorterEditor onChange={onChangeMock} />);
+
+        const select = screen.getByRole("combobox", {name: "Layout:"});
+        userEvent.selectOptions(select, "vertical");
+
+        expect(onChangeMock).toBeCalledWith({layout: "vertical"});
+    });
+
+    it("should be possible to change layout to horizontal", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<SorterEditor onChange={onChangeMock} />);
+
+        const select = screen.getByRole("combobox", {name: "Layout:"});
+        userEvent.selectOptions(select, "horizontal");
+
+        expect(onChangeMock).toBeCalledWith({layout: "horizontal"});
+    });
+
+    it("should be possible to change padding", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<SorterEditor onChange={onChangeMock} />);
+
+        userEvent.click(screen.getByRole("checkbox", {name: "Padding:"}));
+
+        expect(onChangeMock).toBeCalledWith({padding: false});
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/example-widget-editor.tsx b/packages/perseus-editor/src/widgets/example-widget-editor.tsx
index 7d39b75b8a..76f2d53c06 100644
--- a/packages/perseus-editor/src/widgets/example-widget-editor.tsx
+++ b/packages/perseus-editor/src/widgets/example-widget-editor.tsx
@@ -19,6 +19,8 @@ class ExampleWidgetEditor extends React.Component<Props> {
         correct: "",
     };
 
+    input = React.createRef<HTMLInputElement>();
+
     handleAnswerChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
         event,
     ) => {
@@ -36,8 +38,7 @@ class ExampleWidgetEditor extends React.Component<Props> {
                     <input
                         value={this.props.correct}
                         onChange={this.handleAnswerChange}
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="input"
+                        ref={this.input}
                     />
                 </label>
             </div>
@@ -49,9 +50,7 @@ class ExampleWidgetEditor extends React.Component<Props> {
     };
 
     focus: () => boolean = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.input.focus();
+        this.input.current?.focus();
         return true;
     };
 
diff --git a/packages/perseus-editor/src/widgets/example-widget.tsx b/packages/perseus-editor/src/widgets/example-widget.tsx
index 3365405f47..0076af8508 100644
--- a/packages/perseus-editor/src/widgets/example-widget.tsx
+++ b/packages/perseus-editor/src/widgets/example-widget.tsx
@@ -16,11 +16,12 @@ import _ from "underscore";
 import type {WidgetExports} from "@khanacademy/perseus";
 
 class TextInput extends React.Component<any> {
+    input = React.createRef<HTMLInputElement>();
+
     render(): React.ReactNode {
         return (
             <input
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
+                ref={this.input}
                 value={this.props.value || ""}
                 onChange={this.changeValue}
             />
@@ -28,9 +29,7 @@ class TextInput extends React.Component<any> {
     }
 
     focus = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.input.focus();
+        this.input.current?.focus();
         return true;
     };
 
@@ -56,6 +55,8 @@ class ExampleWidget extends React.Component<any> {
         value: "",
     };
 
+    input = React.createRef<TextInput>();
+
     /**
      * This is the widget's grading function. simpleValidate generally
      * defers to this function.
@@ -98,8 +99,7 @@ class ExampleWidget extends React.Component<any> {
     render(): React.ReactNode {
         return (
             <TextInput
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
+                ref={this.input}
                 value={this.props.value}
                 // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                 onChange={this.change("value")}
@@ -117,9 +117,7 @@ class ExampleWidget extends React.Component<any> {
      * focused on page load.
      */
     focus: () => boolean = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.input.focus();
+        this.input.current?.focus();
         return true;
     };
 
diff --git a/packages/perseus-editor/src/widgets/graded-group-editor.tsx b/packages/perseus-editor/src/widgets/graded-group-editor.tsx
index 1e9c97e36a..050d65dc44 100644
--- a/packages/perseus-editor/src/widgets/graded-group-editor.tsx
+++ b/packages/perseus-editor/src/widgets/graded-group-editor.tsx
@@ -33,6 +33,9 @@ class GradedGroupEditor extends React.Component<Props> {
         hint: null,
     };
 
+    editor = React.createRef<Editor>();
+    hintEditor = React.createRef<Editor>();
+
     change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
@@ -40,9 +43,7 @@ class GradedGroupEditor extends React.Component<Props> {
     handleAddHint: () => void = () => {
         const hint = {content: ""} as const;
         this.props.onChange({hint}, () => {
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-            this.refs["hint-editor"].focus();
+            this.hintEditor.current?.focus();
         });
     };
 
@@ -65,8 +66,7 @@ class GradedGroupEditor extends React.Component<Props> {
                     </label>
                 </div>
                 <Editor
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="editor"
+                    ref={this.editor}
                     content={this.props.content}
                     widgets={this.props.widgets}
                     apiOptions={this.props.apiOptions}
@@ -91,8 +91,7 @@ class GradedGroupEditor extends React.Component<Props> {
                     <div className="perseus-hint-editor">
                         <div className={css(styles.hintsTitle)}>Hint</div>
                         <Editor
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="hint-editor"
+                            ref={this.hintEditor}
                             content={
                                 this.props.hint ? this.props.hint.content : ""
                             }
@@ -127,9 +126,7 @@ class GradedGroupEditor extends React.Component<Props> {
     }
 
     getSaveWarnings: () => any = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        return this.refs.editor.getSaveWarnings();
+        return this.editor.current?.getSaveWarnings();
     };
 
     serialize: () => {
@@ -138,15 +135,8 @@ class GradedGroupEditor extends React.Component<Props> {
     } = () => {
         return {
             title: this.props.title,
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-            ...this.refs.editor.serialize(),
-            hint:
-                // eslint-disable-next-line react/no-string-refs
-                this.refs["hint-editor"] &&
-                // eslint-disable-next-line react/no-string-refs
-                // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-                this.refs["hint-editor"].serialize(),
+            ...this.editor.current?.serialize(),
+            hint: this.hintEditor.current?.serialize(),
         };
     };
 }
diff --git a/packages/perseus-editor/src/widgets/group-editor.tsx b/packages/perseus-editor/src/widgets/group-editor.tsx
index a33c2346e4..1b5f6b4dc5 100644
--- a/packages/perseus-editor/src/widgets/group-editor.tsx
+++ b/packages/perseus-editor/src/widgets/group-editor.tsx
@@ -30,6 +30,8 @@ class GroupEditor extends React.Component<Props> {
         metadata: undefined,
     };
 
+    editor = React.createRef<Editor>();
+
     render(): React.ReactNode {
         return (
             <div className="perseus-group-editor">
@@ -39,8 +41,7 @@ class GroupEditor extends React.Component<Props> {
                     {this._renderMetadataEditor()}
                 </div>
                 <Editor
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="editor"
+                    ref={this.editor}
                     content={this.props.content}
                     widgets={this.props.widgets}
                     apiOptions={this.props.apiOptions}
@@ -69,15 +70,11 @@ class GroupEditor extends React.Component<Props> {
     };
 
     getSaveWarnings: () => ReadonlyArray<any> = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        return this.refs.editor.getSaveWarnings();
+        return this.editor.current?.getSaveWarnings();
     };
 
     serialize: () => any = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-        return _.extend({}, this.refs.editor.serialize(), {
+        return _.extend({}, this.editor.current?.serialize(), {
             metadata: this.props.metadata,
         });
     };
diff --git a/packages/perseus-editor/src/widgets/input-number-editor.tsx b/packages/perseus-editor/src/widgets/input-number-editor.tsx
index 363ac0c67d..90e79423cc 100644
--- a/packages/perseus-editor/src/widgets/input-number-editor.tsx
+++ b/packages/perseus-editor/src/widgets/input-number-editor.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react/sort-comp */
 import {components, Util} from "@khanacademy/perseus";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
@@ -90,6 +89,8 @@ class InputNumberEditor extends React.Component<Props> {
         rightAlign: false,
     };
 
+    input = React.createRef<BlurInput>();
+
     handleAnswerChange: (arg1: string) => void = (str) => {
         const value = Util.firstNumericalParse(str) || 0;
         this.props.onChange({value: value});
@@ -116,8 +117,7 @@ class InputNumberEditor extends React.Component<Props> {
                         <BlurInput
                             value={"" + this.props.value}
                             onChange={this.handleAnswerChange}
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="input"
+                            ref={this.input}
                         />
                     </label>
                 </div>
@@ -186,6 +186,7 @@ class InputNumberEditor extends React.Component<Props> {
                             type="text"
                             disabled={!this.props.inexact}
                             defaultValue={this.props.maxError}
+                            aria-label="Max error"
                             onBlur={(e) => {
                                 const ans =
                                     "" +
@@ -206,6 +207,7 @@ class InputNumberEditor extends React.Component<Props> {
                             // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"number" | "integer" | "mixed" | "decimal" | "improper" | "percent" | "pi" | "rational" | undefined'.
                             this.props.onChange({answerType: e.target.value});
                         }}
+                        aria-label="Answer type"
                     >
                         {answerTypeOptions}
                     </select>
@@ -260,8 +262,7 @@ class InputNumberEditor extends React.Component<Props> {
     }
 
     focus: () => boolean = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+        this.input.current?.focus();
         return true;
     };
 
diff --git a/packages/perseus-editor/src/widgets/interaction/constraint-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/constraint-editor.tsx
similarity index 82%
rename from packages/perseus-editor/src/widgets/interaction/constraint-editor.tsx
rename to packages/perseus-editor/src/widgets/interaction-editor/constraint-editor.tsx
index 8841e388df..084ca4473c 100644
--- a/packages/perseus-editor/src/widgets/interaction/constraint-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interaction-editor/constraint-editor.tsx
@@ -1,7 +1,9 @@
 import {components, Changeable, Dependencies} from "@khanacademy/perseus";
 import * as React from "react";
 
-const {ButtonGroup, MathInput, NumberInput} = components;
+import MathquillInput from "./mathquill-input";
+
+const {ButtonGroup, NumberInput} = components;
 
 type Props = Changeable.ChangeableProps & {
     constraint: string;
@@ -45,8 +47,6 @@ class ConstraintEditor extends React.Component<Props> {
     render(): React.ReactNode {
         const {TeX} = Dependencies.getDependencies();
 
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
         return (
             <div>
                 <div className="perseus-widget-row">
@@ -77,11 +77,9 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="graph-settings">
                         <div className="perseus-widget-row">
                             <TeX>x=</TeX>{" "}
-                            <MathInput
-                                buttonsVisible="never"
+                            <MathquillInput
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
-                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -90,11 +88,9 @@ class ConstraintEditor extends React.Component<Props> {
                     <div className="graph-settings">
                         <div className="perseus-widget-row">
                             <TeX>y=</TeX>{" "}
-                            <MathInput
-                                buttonsVisible="never"
+                            <MathquillInput
                                 value={this.props.constraintFn}
                                 onChange={this.change("constraintFn")}
-                                analytics={analyticsStub}
                             />
                         </div>
                     </div>
@@ -103,18 +99,14 @@ class ConstraintEditor extends React.Component<Props> {
                 <div className="perseus-widget-row">
                     <div className="perseus-widget-row">
                         <TeX>x \in \Large[</TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintXMin}
                             onChange={this.change("constraintXMin")}
-                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintXMax}
                             onChange={this.change("constraintXMax")}
-                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>
@@ -122,18 +114,14 @@ class ConstraintEditor extends React.Component<Props> {
                 <div className="perseus-widget-row">
                     <div className="perseus-widget-row">
                         <TeX>y \in \Large[</TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintYMin}
                             onChange={this.change("constraintYMin")}
-                            analytics={analyticsStub}
                         />
                         <TeX>, </TeX>{" "}
-                        <MathInput
-                            buttonsVisible="never"
+                        <MathquillInput
                             value={this.props.constraintYMax}
                             onChange={this.change("constraintYMax")}
-                            analytics={analyticsStub}
                         />{" "}
                         <TeX>\Large]</TeX>
                     </div>
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx
new file mode 100644
index 0000000000..04a4ae6fcb
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx
@@ -0,0 +1,108 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    value: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
+
+type DefaultProps = {
+    value: Props["value"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
+
+// Editor for function plots
+class FunctionEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        value: "x",
+        rangeMin: "-10",
+        rangeMax: "10",
+        color: KhanColors.BLUE,
+        strokeDasharray: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    {/* @ts-expect-error - TS2339 - Property 'funcName' does not exist on type props. */}
+                    <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.value}
+                        onChange={this.change("value")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Range: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.rangeMin}
+                        onChange={this.change("rangeMin")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.rangeMax}
+                        onChange={this.change("rangeMax")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default FunctionEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/index.ts b/packages/perseus-editor/src/widgets/interaction-editor/index.ts
new file mode 100644
index 0000000000..00c8f5909a
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/index.ts
@@ -0,0 +1,3 @@
+import InteractionEditor from "./interaction-editor";
+
+export default InteractionEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
similarity index 60%
rename from packages/perseus-editor/src/widgets/interaction-editor.tsx
rename to packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
index 7c0b553c1b..649dac38a7 100644
--- a/packages/perseus-editor/src/widgets/interaction-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
@@ -1,26 +1,26 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
+/* eslint-disable @babel/no-invalid-this, react/no-unsafe */
 import {
-    components,
     Changeable,
     Dependencies,
     EditorJsonify,
-    KhanColors,
     Util,
-    ArrowPicker,
-    ColorPicker,
-    DashPicker,
     ElementContainer,
 } from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import GraphSettings from "../components/graph-settings";
+import GraphSettings from "../../components/graph-settings";
 
-import ConstraintEditor from "./interaction/constraint-editor";
+import FunctionEditor from "./function-editor";
+import LabelEditor from "./label-editor";
+import LineEditor from "./line-editor";
+import MovableLineEditor from "./movable-line-editor";
+import MovablePointEditor from "./movable-point-editor";
+import ParametricEditor from "./parametric-editor";
+import PointEditor from "./point-editor";
+import RectangleEditor from "./rectangle-editor";
 
-const {MathInput, NumberInput, TextInput} = components;
 const {getDependencies} = Dependencies;
 const {unescapeMathMode} = Util;
 
@@ -39,785 +39,38 @@ const defaultInteractionProps = {
     elements: [],
 } as const;
 
-type PointEditorProps = any;
-
-//
-// Editor for non-interactive points
-//
-// TODO(eater): Factor this out
-//
-class PointEditor extends React.Component<PointEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        color: PropTypes.string,
-    };
-
-    static defaultProps = {
-        coordX: "0",
-        coordY: "0",
-        color: KhanColors.BLACK,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Coordinate: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type LineEditorProps = any;
-
-//
-// Editor for non-interactive line segments
-//
-// TODO(eater): Factor this out
-//
-class LineEditor extends React.Component<LineEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        endX: PropTypes.string,
-        endY: PropTypes.string,
-        color: PropTypes.string,
-        strokeDasharray: PropTypes.string,
-        arrows: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
-
-    static defaultProps = {
-        startX: "-5",
-        startY: "5",
-        endX: "5",
-        endY: "5",
-        color: KhanColors.BLACK,
-        strokeDasharray: "",
-        arrows: "",
-        strokeWidth: 2,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Start: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("startX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("startY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    End: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("endX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("endY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                    &nbsp; &nbsp;
-                    <ArrowPicker
-                        value={this.props.arrows}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("arrows")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type MovablePointEditorProps = any;
-
-//
-// Editor for interactive movable points
-//
-// TODO(eater): Factor this out
-// TODO(eater): Rethink how constraints are represented
-//
-class MovablePointEditor extends React.Component<MovablePointEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        constraint: PropTypes.string,
-        snap: PropTypes.number,
-        constraintFn: PropTypes.string,
-    };
-
-    static defaultProps = {
-        startX: "0",
-        startY: "0",
-        constraint: "none",
-        snap: 0.5,
-        constraintFn: "0",
-        constraintXMin: "-10",
-        constraintXMax: "10",
-        constraintYMin: "-10",
-        constraintYMax: "10",
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Start: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startX}
-                        onChange={this.change("startX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startY}
-                        onChange={this.change("startY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    Update <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>{" "}
-                    <NumberInput
-                        value={this.props.varSubscript}
-                        placeholder={0}
-                        onChange={this.change("varSubscript")}
-                    />
-                </div>
-                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
-                <ConstraintEditor {...this.props} />
-            </div>
-        );
-    }
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type MovableLineEditorProps = any;
-
-//
-// Editor for interactive movable line segments
-//
-// TODO(eater): Factor this out
-// TODO(eater): Rethink how constraints are represented
-//
-class MovableLineEditor extends React.Component<MovableLineEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        endX: PropTypes.string,
-        endY: PropTypes.string,
-        constraint: PropTypes.string,
-        snap: PropTypes.number,
-        constraintFn: PropTypes.string,
-    };
-
-    static defaultProps = {
-        startX: "-5",
-        startY: "5",
-        endX: "5",
-        endY: "5",
-        constraint: "none",
-        snap: 0.5,
-        constraintFn: "0",
-        constraintXMin: "-10",
-        constraintXMax: "10",
-        constraintYMin: "-10",
-        constraintYMax: "10",
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                Initial position:
-                <div className="perseus-widget-row">
-                    Start: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startX}
-                        onChange={this.change("startX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startY}
-                        onChange={this.change("startY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    End: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endX}
-                        onChange={this.change("endX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endY}
-                        onChange={this.change("endY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    Start updates <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>
-                    <NumberInput
-                        value={this.props.startSubscript}
-                        placeholder={0}
-                        onChange={this.change("startSubscript")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    End updates <TeX>(x_m, y_m)</TeX> for <TeX>m =</TeX>
-                    <NumberInput
-                        value={this.props.endSubscript}
-                        placeholder={0}
-                        onChange={this.change("endSubscript")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    All constraints are applied to the start point.
-                </div>
-                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
-                <ConstraintEditor {...this.props} />
-            </div>
-        );
-    }
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type FunctionEditorProps = any;
-
-//
-// Editor for function plots
-//
-// TODO(eater): Factor this out
-//
-class FunctionEditor extends React.Component<FunctionEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        value: PropTypes.string,
-        rangeMin: PropTypes.string,
-        rangeMax: PropTypes.string,
-        color: PropTypes.string,
-        strokeDashArray: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
-
-    static defaultProps = {
-        value: "x",
-        rangeMin: "-10",
-        rangeMax: "10",
-        color: KhanColors.BLUE,
-        strokeDasharray: "",
-        strokeWidth: 2,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.value}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("value")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMin}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMax}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type ParametricEditorProps = any;
-
-//
-// Editor for parametric plots
-//
-// TODO(eater): Factor this out
-//
-class ParametricEditor extends React.Component<ParametricEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        x: PropTypes.string,
-        y: PropTypes.string,
-        rangeMin: PropTypes.string,
-        rangeMax: PropTypes.string,
-        color: PropTypes.string,
-        strokeDashArray: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
-
-    static defaultProps = {
-        x: "cos(t)",
-        y: "sin(t)",
-        rangeMin: "0",
-        rangeMax: "2\\pi",
-        color: KhanColors.BLUE,
-        strokeDasharray: "",
-        strokeWidth: 2,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    <TeX>X(t) =</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.x}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("x")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <TeX>Y(t) =</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.y}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("y")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMin}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMax}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type LabelEditorProps = any;
-
-//
-// Editor for labels
-//
-// TODO(eater): Factor this out maybe?
-// TODO(eater): Add text direction
-//
-class LabelEditor extends React.Component<LabelEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        color: PropTypes.string,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        label: PropTypes.string,
-    };
-
-    static defaultProps = {
-        coordX: "0",
-        coordY: "0",
-        color: KhanColors.BLACK,
-        label: "\\phi",
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    <TextInput
-                        value={this.props.label}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("label")}
-                        style={{
-                            width: "100%",
-                        }}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Location: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type RectangleEditorProps = any;
-
-//
-// Editor for rectangles
-//
-// TODO(eater): Factor this out maybe?
-//
-class RectangleEditor extends React.Component<RectangleEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        color: PropTypes.string,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        height: PropTypes.string,
-        width: PropTypes.string,
-    };
-
-    static defaultProps = {
-        coordX: "-5",
-        coordY: "5",
-        width: "2",
-        height: "3",
-        color: KhanColors.LIGHT_BLUE,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Bottom left: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    Width:{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.width}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("width")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Height:{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.height}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("height")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        lightColors={true}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    You want a border? Sorry, draw your own.
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type InteractionEditorProps = any;
-type InteractionEditorState = any;
-
-class InteractionEditor extends React.Component<
-    InteractionEditorProps,
-    InteractionEditorState
-> {
-    // TODO(eater): Make more better
-    static propTypes = {
-        ...Changeable.propTypes,
-        // eslint-disable-next-line react/forbid-prop-types
-        elements: PropTypes.arrayOf(PropTypes.object),
-        graph: PropTypes.objectOf(PropTypes.any),
-    };
-
+type Graph = {
+    box: ReadonlyArray<number>;
+    labels: ReadonlyArray<string>;
+    range: ReadonlyArray<ReadonlyArray<number>>;
+    tickStep: ReadonlyArray<number>;
+    gridStep: ReadonlyArray<number>;
+    markings: string;
+    valid?: boolean;
+};
+
+type Props = Changeable.ChangeableProps & {
+    elements: ReadonlyArray<any>;
+    graph: Graph;
+};
+
+type DefaultProps = {
+    elements: Props["elements"];
+    graph: Props["graph"];
+};
+
+type State = any;
+
+class InteractionEditor extends React.Component<Props, State> {
     static widgetName = "interaction" as const;
-    static defaultProps: InteractionEditorProps = defaultInteractionProps;
+    static defaultProps: DefaultProps = defaultInteractionProps;
 
-    state: InteractionEditorState = {
+    state: State = {
         usedVarSubscripts: this._getAllVarSubscripts(this.props.elements),
         usedFunctionNames: this._getAllFunctionNames(this.props.elements),
     };
 
-    UNSAFE_componentWillReceiveProps(nextProps: InteractionEditorProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this.setState({
             usedVarSubscripts: this._getAllVarSubscripts(nextProps.elements),
             usedFunctionNames: this._getAllFunctionNames(nextProps.elements),
@@ -956,6 +209,10 @@ class InteractionEditor extends React.Component<
         return Changeable.change.apply(this, args);
     };
 
+    serialize: () => any = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
     render(): React.ReactNode {
         const {TeX} = getDependencies();
 
@@ -1487,10 +744,6 @@ class InteractionEditor extends React.Component<
         );
         /* eslint-enable max-len */
     }
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
 }
 
 export default InteractionEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/label-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/label-editor.tsx
new file mode 100644
index 0000000000..abcaa5f130
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/label-editor.tsx
@@ -0,0 +1,87 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {TextInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    color: string;
+    coordX: string;
+    coordY: string;
+    label: string;
+};
+
+type DefaultProps = {
+    color: Props["color"];
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    label: Props["label"];
+};
+
+// Editor for labels
+// TODO(eater): Add text direction
+class LabelEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        coordX: "0",
+        coordY: "0",
+        color: KhanColors.BLACK,
+        label: "\\phi",
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TextInput
+                        value={this.props.label}
+                        onChange={this.change("label")}
+                        style={{
+                            width: "100%",
+                        }}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Location: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LabelEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/line-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/line-editor.tsx
new file mode 100644
index 0000000000..6d9e30d7e8
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/line-editor.tsx
@@ -0,0 +1,125 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ArrowPicker,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    color: string;
+    strokeDasharray: string;
+    arrows: string;
+    strokeWidth: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    arrows: Props["arrows"];
+    strokeWidth: Props["strokeWidth"];
+};
+
+// Editor for non-interactive line segments
+class LineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        startX: "-5",
+        startY: "5",
+        endX: "5",
+        endY: "5",
+        color: KhanColors.BLACK,
+        strokeDasharray: "",
+        arrows: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                    &nbsp; &nbsp;
+                    <ArrowPicker
+                        value={this.props.arrows}
+                        onChange={this.change("arrows")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LineEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
new file mode 100644
index 0000000000..1b99a761c8
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
@@ -0,0 +1,81 @@
+import {createMathField} from "@khanacademy/math-input";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+import {useRef, useEffect} from "react";
+
+import type {MathFieldInterface} from "@khanacademy/math-input";
+
+type Props = {
+    value: string;
+    onChange: (value: string) => void;
+};
+
+/**
+ * A simple Mathquill MathField input for the InteractionEditor.
+ * Unlike our other uses of Mathquill, we're not using a keypad here;
+ * it's just the input itself for use writing TeX.
+ */
+export default function MathquillInput(props: Props) {
+    const mathFieldWrapperRef = useRef<HTMLSpanElement>(null);
+    const mathFieldInstance = useRef<MathFieldInterface>();
+
+    useEffect(() => {
+        // If we have the mount for the input, but not the input
+        // make a new Mathquill input
+        if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
+            // Initialize MathQuill.MathField instance
+            mathFieldInstance.current = createMathField(
+                mathFieldWrapperRef.current,
+                (baseConfig) => ({
+                    ...baseConfig,
+                    handlers: {
+                        edit: (mathField) => {
+                            // This handler is guaranteed to be called on change, but
+                            // unlike React it sometimes generates false positives.
+                            // One of these is on initialization (with an empty string
+                            // value), so we have to guard against that below.
+                            let value = mathField.latex();
+
+                            // Provide a MathQuill-compatible way to generate the
+                            // not-equals sign without pasting unicode or typing TeX
+                            value = value.replace(/<>/g, "\\ne");
+
+                            if (props.value !== value) {
+                                props.onChange(value);
+                            }
+                        },
+                        upOutOf: (mathField) => {
+                            // This handler is called when the user presses the up
+                            // arrow key, but there is nowhere in the expression to go
+                            // up to (no numerator or exponent). For ease of use,
+                            // interpret this as an attempt to create an exponent.
+                            mathField.typedText("^");
+                        },
+                    },
+                }),
+            );
+        }
+    });
+
+    return (
+        <View style={styles.outerWrapper}>
+            <span
+                ref={mathFieldWrapperRef}
+                className="perseus-math-input mq-editable-field mq-math-mode"
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    outerWrapper: {
+        display: "inline-block",
+        borderStyle: "solid",
+        borderWidth: 1,
+        borderColor: Color.offBlack50,
+        borderRadius: 3,
+        background: Color.white,
+    },
+});
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx
new file mode 100644
index 0000000000..eb19854c30
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx
@@ -0,0 +1,121 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    endX: string;
+    endY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    startSubscript: number;
+    endSubscript: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    endX: Props["endX"];
+    endY: Props["endY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
+
+// Editor for interactive movable line segments
+// TODO(eater): Rethink how constraints are represented
+class MovableLineEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        startX: "-5",
+        startY: "5",
+        endX: "5",
+        endY: "5",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        // @ts-expect-error - TS2561
+        constraintXMin: "-10",
+        constraintXMax: "10",
+        constraintYMin: "-10",
+        constraintYMax: "10",
+    };
+
+    change = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                Initial position:
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Start updates <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>
+                    <NumberInput
+                        value={this.props.startSubscript}
+                        placeholder={0}
+                        onChange={this.change("startSubscript")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    End updates <TeX>(x_m, y_m)</TeX> for <TeX>m =</TeX>
+                    <NumberInput
+                        value={this.props.endSubscript}
+                        placeholder={0}
+                        onChange={this.change("endSubscript")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    All constraints are applied to the start point.
+                </div>
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovableLineEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx
new file mode 100644
index 0000000000..d6ba6671e7
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx
@@ -0,0 +1,89 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    startX: string;
+    startY: string;
+    constraint: string;
+    snap: number;
+    constraintFn: string;
+    varSubscript: number;
+};
+
+type DefaultProps = {
+    startX: Props["startX"];
+    startY: Props["startY"];
+    constraint: Props["constraint"];
+    snap: Props["snap"];
+    constraintFn: Props["constraintFn"];
+};
+
+// Editor for interactive movable points
+// TODO(eater): Rethink how constraints are represented
+class MovablePointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        startX: "0",
+        startY: "0",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        // @ts-expect-error - TS2561
+        constraintXMin: "-10",
+        constraintXMax: "10",
+        constraintYMin: "-10",
+        constraintYMax: "10",
+    };
+
+    change = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Update <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>{" "}
+                    <NumberInput
+                        value={this.props.varSubscript}
+                        placeholder={0}
+                        onChange={this.change("varSubscript")}
+                    />
+                </div>
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovablePointEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/parametric-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/parametric-editor.tsx
new file mode 100644
index 0000000000..18b5ad2a8e
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/parametric-editor.tsx
@@ -0,0 +1,117 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    x: string;
+    y: string;
+    rangeMin: string;
+    rangeMax: string;
+    color: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+};
+
+type DefaultProps = {
+    x: Props["x"];
+    y: Props["y"];
+    rangeMin: Props["rangeMin"];
+    rangeMax: Props["rangeMax"];
+    color: Props["color"];
+    strokeDasharray: Props["strokeDasharray"];
+    strokeWidth: Props["strokeWidth"];
+};
+
+// Editor for parametric plots
+class ParametricEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        x: "cos(t)",
+        y: "sin(t)",
+        rangeMin: "0",
+        rangeMax: "2\\pi",
+        color: KhanColors.BLUE,
+        strokeDasharray: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TeX>X(t) =</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.x}
+                        onChange={this.change("x")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <TeX>Y(t) =</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.y}
+                        onChange={this.change("y")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Range: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.rangeMin}
+                        onChange={this.change("rangeMin")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.rangeMax}
+                        onChange={this.change("rangeMax")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ParametricEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/point-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/point-editor.tsx
new file mode 100644
index 0000000000..c81e2c18b4
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/point-editor.tsx
@@ -0,0 +1,72 @@
+import {
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    coordX: string;
+    coordY: string;
+    color: string;
+};
+
+type DefaultProps = {
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    color: Props["color"];
+};
+
+// Editor for non-interactive points
+class PointEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        coordX: "0",
+        coordY: "0",
+        color: KhanColors.BLACK,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Coordinate: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PointEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/rectangle-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/rectangle-editor.tsx
new file mode 100644
index 0000000000..7c52a879b0
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/rectangle-editor.tsx
@@ -0,0 +1,96 @@
+import {
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import * as React from "react";
+import _ from "underscore";
+
+import MathquillInput from "./mathquill-input";
+
+const {getDependencies} = Dependencies;
+
+type Props = Changeable.ChangeableProps & {
+    color: string;
+    coordX: string;
+    coordY: string;
+    height: string;
+    width: string;
+};
+
+type DefaultProps = {
+    color: Props["color"];
+    coordX: Props["coordX"];
+    coordY: Props["coordY"];
+    height: Props["height"];
+    width: Props["width"];
+};
+
+// Editor for rectangles
+class RectangleEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        coordX: "-5",
+        coordY: "5",
+        width: "2",
+        height: "3",
+        color: KhanColors.LIGHT_BLUE,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Bottom left: <TeX>\Large(</TeX>
+                    <MathquillInput
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathquillInput
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Width:{" "}
+                    <MathquillInput
+                        value={this.props.width}
+                        onChange={this.change("width")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Height:{" "}
+                    <MathquillInput
+                        value={this.props.height}
+                        onChange={this.change("height")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        lightColors={true}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    You want a border? Sorry, draw your own.
+                </div>
+            </div>
+        );
+    }
+}
+
+export default RectangleEditor;
diff --git a/packages/perseus-editor/src/widgets/number-line-editor.tsx b/packages/perseus-editor/src/widgets/number-line-editor.tsx
index 34fb47a924..088b612b08 100644
--- a/packages/perseus-editor/src/widgets/number-line-editor.tsx
+++ b/packages/perseus-editor/src/widgets/number-line-editor.tsx
@@ -214,12 +214,23 @@ class NumberLineEditor extends React.Component<Props> {
                         value={this.props.correctRel}
                         // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                         onChange={this.onChangeRelation}
+                        aria-label="Select relationship"
                     >
-                        <option value="eq"> = </option>
-                        <option value="lt"> &lt; </option>
-                        <option value="gt"> &gt; </option>
-                        <option value="le"> &le; </option>
-                        <option value="ge"> &ge; </option>
+                        <option value="eq" aria-label="Equal">
+                            =
+                        </option>
+                        <option value="lt" aria-label="Less than">
+                            &lt;
+                        </option>
+                        <option value="gt" aria-label="Greater than">
+                            &gt;
+                        </option>
+                        <option value="le" aria-label="Less than or equal">
+                            &le;
+                        </option>
+                        <option value="ge" aria-label="Greater than or equal">
+                            &ge;
+                        </option>
                     </select>{" "}
                     <NumberInput
                         value={this.props.correctX}
diff --git a/packages/perseus-editor/src/widgets/simple-markdown-tester-editor.tsx b/packages/perseus-editor/src/widgets/simple-markdown-tester-editor.tsx
index bd86e64c42..db9bf05756 100644
--- a/packages/perseus-editor/src/widgets/simple-markdown-tester-editor.tsx
+++ b/packages/perseus-editor/src/widgets/simple-markdown-tester-editor.tsx
@@ -49,6 +49,8 @@ class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEdi
         value: "",
     };
 
+    input = React.createRef<TextArea>();
+
     render(): React.ReactNode {
         return (
             <div>
@@ -59,8 +61,7 @@ class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEdi
                             value={this.props.value}
                             // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("value")}
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="input"
+                            ref={this.input}
                         />
                     </div>
                 </label>
@@ -73,9 +74,7 @@ class SimpleMarkdownTesterEditor extends React.Component<SimpleMarkdownTesterEdi
     };
 
     focus: () => boolean = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        this.refs.input.focus();
+        this.input.current?.focus();
         return true;
     };
 
diff --git a/packages/perseus-editor/src/widgets/table-editor.tsx b/packages/perseus-editor/src/widgets/table-editor.tsx
index 58161bf060..b0c34587a8 100644
--- a/packages/perseus-editor/src/widgets/table-editor.tsx
+++ b/packages/perseus-editor/src/widgets/table-editor.tsx
@@ -2,7 +2,6 @@
 import {components, TableWidget, Util} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import Editor from "../editor";
@@ -36,9 +35,10 @@ class TableEditor extends React.Component<Props> {
         };
     })();
 
+    numberOfColumns = React.createRef<components.NumberInput>();
+
     focus: () => void = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.numberOfColumns).focus(); // eslint-disable-line react/no-string-refs
+        this.numberOfColumns.current?.focus();
     };
 
     render(): React.ReactNode {
@@ -63,8 +63,7 @@ class TableEditor extends React.Component<Props> {
                     <label>
                         Number of columns:{" "}
                         <NumberInput
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="numberOfColumns"
+                            ref={this.numberOfColumns}
                             value={this.props.columns}
                             onChange={(val) => {
                                 if (val) {
diff --git a/packages/perseus/CHANGELOG.md b/packages/perseus/CHANGELOG.md
index 03910d8280..166ce126a1 100644
--- a/packages/perseus/CHANGELOG.md
+++ b/packages/perseus/CHANGELOG.md
@@ -1,5 +1,65 @@
 # @khanacademy/perseus
 
+## 17.7.0
+
+### Minor Changes
+
+-   [#921](https://github.com/Khan/perseus/pull/921) [`81b9a562`](https://github.com/Khan/perseus/commit/81b9a562d0fb8ff2cd82e708781432bff8437116) Thanks [@benchristel](https://github.com/benchristel)! - Make the Expression widget treat `sen` as equivalent to `sin`. The spelling
+    `sen` is used in Portuguese.
+
+### Patch Changes
+
+-   Updated dependencies [[`81b9a562`](https://github.com/Khan/perseus/commit/81b9a562d0fb8ff2cd82e708781432bff8437116)]:
+    -   @khanacademy/math-input@16.5.0
+
+## 17.6.2
+
+### Patch Changes
+
+-   [#918](https://github.com/Khan/perseus/pull/918) [`21222f55`](https://github.com/Khan/perseus/commit/21222f55b1efd46acbc0fe1dcc8aa0399b8555ee) Thanks [@nedredmond](https://github.com/nedredmond)! - Fix bug that caused svg to be 300px wide
+
+## 17.6.1
+
+### Patch Changes
+
+-   [#881](https://github.com/Khan/perseus/pull/881) [`f02eb991`](https://github.com/Khan/perseus/commit/f02eb991cec37dcff02056c0d6b54fc6dfd96948) Thanks [@nedredmond](https://github.com/nedredmond)! - Swap out Label Image custom dropdown for WonderBlocks
+
+*   [#870](https://github.com/Khan/perseus/pull/870) [`9354fb55`](https://github.com/Khan/perseus/commit/9354fb55357f2441a2ca6198c52cca33edeba3c0) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Replace transformer widget with a deprecated-standin widget
+
+*   Updated dependencies [[`f02eb991`](https://github.com/Khan/perseus/commit/f02eb991cec37dcff02056c0d6b54fc6dfd96948)]:
+    -   @khanacademy/math-input@16.4.1
+
+## 17.6.0
+
+### Minor Changes
+
+-   [#907](https://github.com/Khan/perseus/pull/907) [`83884550`](https://github.com/Khan/perseus/commit/83884550df8b394e9afa6e95947c987614e2d242) Thanks [@nishasy](https://github.com/nishasy)! - Display names have been updated to better match type names
+
+## 17.5.0
+
+### Minor Changes
+
+-   [#909](https://github.com/Khan/perseus/pull/909) [`6c841f55`](https://github.com/Khan/perseus/commit/6c841f55027c87bfc8339816dac582f175a84193) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Reworked onFocusChange logic to solve a bug on initial render.
+
+### Patch Changes
+
+-   [#908](https://github.com/Khan/perseus/pull/908) [`29563723`](https://github.com/Khan/perseus/commit/29563723cf229a9169d0c78a0174a8dbc8029861) Thanks [@benchristel](https://github.com/benchristel)! - Lighten the background color for odd-numbered rows of Markdown tables on
+    desktop-sized screens. Previously, the color was `#ededed`; it is now
+    `#f7f8fa` (Wonder Blocks offWhite).
+
+    This change ensures that color-coded math expressions will have accessible
+    contrast with the background.
+
+## 17.4.0
+
+### Minor Changes
+
+-   [#902](https://github.com/Khan/perseus/pull/902) [`c9db8185`](https://github.com/Khan/perseus/commit/c9db818510e2e0fd142c23298890dcad89a7549a) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Updated OnFocusChange method to return the keypadHeight rather than the DOMNode
+
+### Patch Changes
+
+-   [#887](https://github.com/Khan/perseus/pull/887) [`d09fdb98`](https://github.com/Khan/perseus/commit/d09fdb98963f23dbeb2009518513db671e0f09bb) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Export `PerseusItem` type which represents an exercise question
+
 ## 17.3.3
 
 ### Patch Changes
diff --git a/packages/perseus/package.json b/packages/perseus/package.json
index 4ce2be7fc5..cc48c66221 100644
--- a/packages/perseus/package.json
+++ b/packages/perseus/package.json
@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "17.3.3",
+    "version": "17.7.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,31 +24,33 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/math-input": "^16.4.0",
+        "@khanacademy/math-input": "^16.5.0",
+        "@khanacademy/mathjax-renderer": "git+ssh://git@github.com:Khan/mathjax-renderer.git#v1.5.0",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",
-        "@khanacademy/simple-markdown": "^0.11.2"
+        "@khanacademy/simple-markdown": "^0.11.2",
+        "@khanacademy/wonder-blocks-banner": "^3.0.33"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
-        "@khanacademy/wonder-blocks-form": "^4.3.18",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
+        "@khanacademy/wonder-blocks-data": "^13.0.6",
+        "@khanacademy/wonder-blocks-dropdown": "^5.1.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.19",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.4",
-        "@khanacademy/wonder-blocks-modal": "^4.0.38",
-        "@khanacademy/wonder-blocks-pill": "^1.0.14",
-        "@khanacademy/wonder-blocks-popover": "^3.0.19",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-layout": "^2.0.25",
+        "@khanacademy/wonder-blocks-link": "^6.0.5",
+        "@khanacademy/wonder-blocks-modal": "^4.2.0",
+        "@khanacademy/wonder-blocks-pill": "^1.0.15",
+        "@khanacademy/wonder-blocks-popover": "^3.0.22",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.25",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-switch": "^1.1.8",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-switch": "^1.1.9",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.24",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "@popperjs/core": "^2.10.1",
@@ -70,24 +72,24 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
-        "@khanacademy/wonder-blocks-form": "^4.3.18",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
+        "@khanacademy/wonder-blocks-data": "^13.0.6",
+        "@khanacademy/wonder-blocks-dropdown": "^5.1.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.19",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.4",
-        "@khanacademy/wonder-blocks-modal": "^4.0.38",
-        "@khanacademy/wonder-blocks-pill": "^1.0.14",
-        "@khanacademy/wonder-blocks-popover": "^3.0.19",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-layout": "^2.0.25",
+        "@khanacademy/wonder-blocks-link": "^6.0.5",
+        "@khanacademy/wonder-blocks-modal": "^4.2.0",
+        "@khanacademy/wonder-blocks-pill": "^1.0.15",
+        "@khanacademy/wonder-blocks-popover": "^3.0.22",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.25",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-switch": "^1.1.8",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-switch": "^1.1.9",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.24",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "@popperjs/core": "^2.10.1",
diff --git a/packages/perseus/src/__stories__/article-renderer.stories.tsx b/packages/perseus/src/__stories__/article-renderer.stories.tsx
index d74ec3e0ae..b513dd568f 100644
--- a/packages/perseus/src/__stories__/article-renderer.stories.tsx
+++ b/packages/perseus/src/__stories__/article-renderer.stories.tsx
@@ -1,4 +1,5 @@
 import {KeypadContext} from "@khanacademy/math-input";
+import {action} from "@storybook/addon-actions";
 import React from "react";
 
 import {storybookDependenciesV2} from "../../../../testing/test-dependencies";
@@ -67,6 +68,7 @@ export const ExpressionArticle = ({useNewStyles}): any => (
                     apiOptions={{
                         isMobile: true,
                         customKeypad: true,
+                        onFocusChange: action("onFocusChange"),
                     }}
                     keypadElement={keypadElement}
                 />
diff --git a/packages/perseus/src/__tests__/server-item-renderer.test.tsx b/packages/perseus/src/__tests__/server-item-renderer.test.tsx
index 399c80d07b..065f8b3268 100644
--- a/packages/perseus/src/__tests__/server-item-renderer.test.tsx
+++ b/packages/perseus/src/__tests__/server-item-renderer.test.tsx
@@ -326,16 +326,16 @@ describe("server item renderer", () => {
 
             // Act
             const gotFocus = renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(gotFocus).toBeTrue();
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],
                 null,
-                undefined,
+                0,
                 expect.any(Object),
             );
         });
@@ -343,7 +343,15 @@ describe("server item renderer", () => {
         it("activates the keypadElement when focusing the renderer on mobile", () => {
             // Arranged
             const onFocusChange = jest.fn();
-            const keypadElementDOMNode = <div />;
+            const keypadElementDOMNode = document.createElement("div");
+
+            // We need to mock the getBoundingClientRect() method for our
+            // onFocusChange() callback to work properly.
+            keypadElementDOMNode.getBoundingClientRect = () =>
+                ({
+                    height: 250,
+                } as DOMRect);
+
             const keypadElement: KeypadAPI = {
                 getDOMNode: jest
                     .fn()
@@ -362,9 +370,9 @@ describe("server item renderer", () => {
 
             // Act
             const gotFocus = renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(keypadElement.activate).toHaveBeenCalled();
@@ -372,7 +380,7 @@ describe("server item renderer", () => {
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],
                 null,
-                keypadElementDOMNode,
+                250,
                 expect.any(Object),
             );
         });
@@ -384,22 +392,19 @@ describe("server item renderer", () => {
                 onFocusChange,
             });
             renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
 
             // Act
             renderer.blur();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(onFocusChange).toHaveBeenCalledTimes(2);
             expect(onFocusChange).toHaveBeenLastCalledWith(
                 null,
                 ["input-number 1"],
-                null,
+                0,
                 null,
             );
         });
@@ -407,7 +412,15 @@ describe("server item renderer", () => {
         it("dismisses the keypadElement when blurring the renderer on mobile", () => {
             // Arranged
             const onFocusChange = jest.fn();
-            const keypadElementDOMNode = <div />;
+            const keypadElementDOMNode = document.createElement("div");
+
+            // We need to mock the getBoundingClientRect() method for our
+            // onFocusChange() callback to work properly.
+            keypadElementDOMNode.getBoundingClientRect = () =>
+                ({
+                    height: 250,
+                } as DOMRect);
+
             const keypadElement: KeypadAPI = {
                 getDOMNode: jest
                     .fn()
@@ -424,15 +437,12 @@ describe("server item renderer", () => {
                 {keypadElement},
             );
             renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
 
             // Act
             renderer.blur();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(keypadElement.dismiss).toHaveBeenCalled();
@@ -440,7 +450,7 @@ describe("server item renderer", () => {
             expect(onFocusChange).toHaveBeenLastCalledWith(
                 null,
                 ["input-number 1"],
-                null,
+                0,
                 null,
             );
         });
@@ -455,11 +465,14 @@ describe("server item renderer", () => {
             // Act
             renderer.focusPath(["input-number 1"]);
 
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
+
             // Assert
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],
                 null,
-                undefined,
+                0,
                 expect.any(Object),
             );
         });
diff --git a/packages/perseus/src/__tests__/widgets.test.ts b/packages/perseus/src/__tests__/widgets.test.ts
index d6c2bbc18d..0692c7b488 100644
--- a/packages/perseus/src/__tests__/widgets.test.ts
+++ b/packages/perseus/src/__tests__/widgets.test.ts
@@ -1,3 +1,5 @@
+import {testDependencies} from "../../../../testing/test-dependencies";
+import {setDependencies} from "../dependencies";
 import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
 import * as Widgets from "../widgets";
 
@@ -10,6 +12,7 @@ describe("Widget API support", () => {
     // validate function. Not all widgets support this function so even though
     // this list looks exhaustive, it's not!
     it.each([
+        "deprecated-standin",
         "radio",
         "input-number",
         "numeric-input",
@@ -71,3 +74,20 @@ describe("Widget API support", () => {
         },
     );
 });
+
+describe("replaceWidget", () => {
+    beforeEach(() => {
+        setDependencies(testDependencies);
+        registerAllWidgetsForTesting();
+    });
+
+    it("replaces an existing widget", () => {
+        Widgets.replaceWidget("transformer", "radio");
+        expect(Widgets.getWidget("transformer")?.name).toBe("Radio");
+    });
+
+    it("Does nothing when the replacement isn't available", () => {
+        Widgets.replaceWidget("radio", "dog-cat");
+        expect(Widgets.getWidget("radio")?.name).toBe("Radio");
+    });
+});
diff --git a/packages/perseus/src/article-renderer.tsx b/packages/perseus/src/article-renderer.tsx
index 7ccca10504..34e71c8b76 100644
--- a/packages/perseus/src/article-renderer.tsx
+++ b/packages/perseus/src/article-renderer.tsx
@@ -104,13 +104,24 @@ class ArticleRenderer
                 );
         }
 
-        if (this.props.apiOptions.onFocusChange != null) {
-            this.props.apiOptions.onFocusChange(
-                this._currentFocus,
-                prevFocusPath,
-                didFocusInput ? keypadElement?.getDOMNode() : null,
-                didFocusInput ? focusedInput : null,
-            );
+        const {onFocusChange} = this.props.apiOptions;
+        if (onFocusChange) {
+            // Wait for the keypad to mount before getting the height
+            setTimeout(() => {
+                const keypadDomNode =
+                    keypadElement?.getDOMNode() as HTMLElement;
+                const keypadHeight =
+                    keypadDomNode && didFocusInput
+                        ? keypadDomNode.getBoundingClientRect().height
+                        : 0;
+
+                onFocusChange(
+                    this._currentFocus,
+                    prevFocusPath,
+                    keypadHeight,
+                    didFocusInput ? focusedInput : null,
+                );
+            }, 0);
         }
 
         if (keypadElement && isMobile) {
diff --git a/packages/perseus/src/extra-widgets.ts b/packages/perseus/src/extra-widgets.ts
index ac7ac655ee..9ee3b5cc72 100644
--- a/packages/perseus/src/extra-widgets.ts
+++ b/packages/perseus/src/extra-widgets.ts
@@ -5,6 +5,7 @@
 import Categorizer from "./widgets/categorizer";
 import CSProgram from "./widgets/cs-program";
 import Definition from "./widgets/definition";
+import DeprecatedStandin from "./widgets/deprecated-standin";
 import Dropdown from "./widgets/dropdown";
 import Explanation from "./widgets/explanation";
 import GradedGroup from "./widgets/graded-group";
@@ -72,4 +73,5 @@ export default [
     Transformer,
     Unit,
     Video,
+    DeprecatedStandin,
 ] as ReadonlyArray<WidgetExports>;
diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
index a63b6f24a0..825260e0cd 100644
--- a/packages/perseus/src/index.ts
+++ b/packages/perseus/src/index.ts
@@ -120,15 +120,16 @@ export type {
 } from "./types";
 export type {ParsedValue} from "./util";
 export type {
-    MathFormat,
     InputNumberWidget,
+    MathFormat,
+    PerseusAnswerArea,
+    PerseusExpressionWidgetOptions,
     PerseusImageBackground,
     PerseusInteractiveGraphWidgetOptions,
-    PerseusRadioWidgetOptions,
-    PerseusExpressionWidgetOptions,
+    PerseusItem,
     PerseusPlotterWidgetOptions,
+    PerseusRadioWidgetOptions,
     PerseusRenderer,
-    PerseusAnswerArea,
 } from "./perseus-types";
 export type {Coord} from "./interactive2/types";
 export type {MarkerType} from "./widgets/label-image/types";
diff --git a/packages/perseus/src/init.ts b/packages/perseus/src/init.ts
index 6d0197b158..9fee33e4cf 100644
--- a/packages/perseus/src/init.ts
+++ b/packages/perseus/src/init.ts
@@ -21,6 +21,11 @@ const init = function (options: PerseusOptions): Promise<undefined> {
     Widgets.registerWidgets(basicWidgets);
     Widgets.registerWidgets(extraWidgets);
 
+    // This section replaces widgets
+    // When it's time to replace the transformer widget
+    // uncomment this line
+    // Widgets.replaceWidget("transformer", "always-correct");
+
     // Pass skipMathJax: true if MathJax is already loaded and configured.
     const skipMathJax = options.skipMathJax;
 
diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
index 0ffd433a8f..a257dddd69 100644
--- a/packages/perseus/src/perseus-types.ts
+++ b/packages/perseus/src/perseus-types.ts
@@ -187,6 +187,8 @@ export type SimpleMarkdownTesterWidget = Widget<'simple-markdown-tester', Perseu
 export type UnitInputWidget = Widget<'unit-input', PerseusUnitInputWidgetOptions>;
 // prettier-ignore
 export type VideoWidget = Widget<'video', PerseusVideoWidgetOptions>;
+//prettier-ignore
+export type AutoCorrectWidget = Widget<'deprecated-standin', PerseusWidgetOptions>;
 
 export type PerseusWidget =
     | CategorizerWidget
@@ -228,7 +230,8 @@ export type PerseusWidget =
     | TableWidget
     | TransformerWidget
     | UnitInputWidget
-    | VideoWidget;
+    | VideoWidget
+    | AutoCorrectWidget;
 
 // A background image applied to various widgets.
 export type PerseusImageBackground = {
diff --git a/packages/perseus/src/server-item-renderer.tsx b/packages/perseus/src/server-item-renderer.tsx
index ccaed4d5a1..ea907351fb 100644
--- a/packages/perseus/src/server-item-renderer.tsx
+++ b/packages/perseus/src/server-item-renderer.tsx
@@ -181,14 +181,26 @@ export class ServerItemRenderer
             });
 
         if (onFocusChange != null) {
-            onFocusChange(
-                this._currentFocus,
-                prevFocus,
-                didFocusInput ? keypadElement?.getDOMNode() : null,
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
-                didFocusInput &&
-                    this.questionRenderer.getDOMNodeForPath(newFocus),
-            );
+            // Wait for the keypad to mount before getting the height
+            setTimeout(() => {
+                // First, calculate the current keypad height
+                const keypadDomNode: HTMLElement =
+                    keypadElement?.getDOMNode() as HTMLElement;
+                const keypadHeight =
+                    keypadDomNode && didFocusInput
+                        ? keypadDomNode.getBoundingClientRect().height
+                        : 0;
+
+                // Then call the callback
+                onFocusChange(
+                    this._currentFocus,
+                    prevFocus,
+                    keypadHeight,
+                    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
+                    didFocusInput &&
+                        this.questionRenderer.getDOMNodeForPath(newFocus),
+                );
+            }, 0);
         }
 
         if (keypadElement && isMobile) {
diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less
index c6fbb4b0d6..cf542324cf 100644
--- a/packages/perseus/src/styles/perseus-renderer.less
+++ b/packages/perseus/src/styles/perseus-renderer.less
@@ -314,7 +314,7 @@
         tr:nth-child(odd) {
             // Doesn't work in IE8 :(
             td {
-                background-color: #ededed;
+                background-color: @offWhite;
             }
         }
     }
diff --git a/packages/perseus/src/styles/variables.less b/packages/perseus/src/styles/variables.less
index bbfd5c1a4d..e782327206 100644
--- a/packages/perseus/src/styles/variables.less
+++ b/packages/perseus/src/styles/variables.less
@@ -15,6 +15,7 @@
 // TODO(charlie): DRY this up. How can we keep our global palette in sync across
 // repos?
 @white: #ffffff;
+@offWhite: #f7f8fa;
 @gray98: #fafafa;
 @gray97: #f6f7f7;
 @gray95: #f0f1f2;
diff --git a/packages/perseus/src/types.ts b/packages/perseus/src/types.ts
index c364b63e26..e78926463f 100644
--- a/packages/perseus/src/types.ts
+++ b/packages/perseus/src/types.ts
@@ -1,14 +1,17 @@
 import type {SerializedHighlightSet} from "./components/highlighting/types";
 import type {ILogger} from "./logging/log";
 import type {Item} from "./multi-items/item-types";
-import type {PerseusWidget} from "./perseus-types";
+import type {
+    PerseusAnswerArea,
+    PerseusRenderer,
+    PerseusWidget,
+} from "./perseus-types";
 import type {SizeClass} from "./util/sizing-utils";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 import type {Result} from "@khanacademy/wonder-blocks-data";
 import type * as React from "react";
-import type ReactDOM from "react-dom";
 
 export type FocusPath = ReadonlyArray<string> | null | undefined;
 
@@ -45,10 +48,7 @@ export type PerseusScore =
           message?: string | null | undefined;
       };
 
-export type Hint = {
-    widgets: WidgetDict;
-    content: string; // JSON string,
-    images: ImageDict;
+export type Hint = PerseusRenderer & {
     replace?: boolean;
 };
 
@@ -78,7 +78,7 @@ export type ChangeHandler = (
         images?: ImageDict;
         // used only in EditorPage
         question?: any;
-        answerArea?: any;
+        answerArea?: PerseusAnswerArea | null;
         itemDataVersion?: Version;
         // used in MutirenderEditor
         item?: Item;
@@ -144,7 +144,7 @@ export type APIOptions = Readonly<{
     onFocusChange?: (
         newFocusPath: FocusPath,
         oldFocusPath: FocusPath,
-        keypadElement?: ReturnType<typeof ReactDOM.findDOMNode>,
+        keypadHeight?: number,
         focusedElement?: HTMLElement,
     ) => unknown;
     GroupMetadataEditor?: React.ComponentType<StubTagEditorType>;
diff --git a/packages/perseus/src/util/register-all-widgets-for-testing.ts b/packages/perseus/src/util/register-all-widgets-for-testing.ts
index f555282788..3555bd3087 100644
--- a/packages/perseus/src/util/register-all-widgets-for-testing.ts
+++ b/packages/perseus/src/util/register-all-widgets-for-testing.ts
@@ -8,4 +8,8 @@ import * as Widgets from "../widgets";
 
 export const registerAllWidgetsForTesting = () => {
     Widgets.registerWidgets(allWidgets);
+
+    // When it's time to replace the transformer widget
+    // uncomment this line
+    // Widgets.replaceWidget("transformer", "deprecated-standin");
 };
diff --git a/packages/perseus/src/widgets.ts b/packages/perseus/src/widgets.ts
index 430295cc89..3634d6f73e 100644
--- a/packages/perseus/src/widgets.ts
+++ b/packages/perseus/src/widgets.ts
@@ -43,6 +43,30 @@ export const registerWidgets = (widgets: ReadonlyArray<WidgetExports>) => {
     validateAlignments();
 };
 
+/**
+ *
+ * @param name - the widget that you are trying to replace
+ * @param replacementName - the name of the widget that takes its place
+ *
+ * e.g. replaceWidget("transformer", "always-correct") will make it so the
+ * transformer widget is replaced by the always correct widget
+ */
+export const replaceWidget = (name: string, replacementName: string) => {
+    const substituteWidget = widgets[replacementName];
+
+    if (!substituteWidget && Log) {
+        const errorMsg = `Failed to replace ${name} with ${replacementName}`;
+        Log.error(errorMsg, Errors.Internal);
+        return;
+    }
+
+    registerWidget(name, substituteWidget);
+
+    if (Log) {
+        Log.log(`INFO: Replacing widget ${name} with ${replacementName}`);
+    }
+};
+
 export const registerEditors = (editorsToRegister: ReadonlyArray<Editor>) => {
     editorsToRegister.forEach((editor) => {
         if (!editor.widgetName) {
diff --git a/packages/perseus/src/widgets/__stories__/expression.stories.tsx b/packages/perseus/src/widgets/__stories__/expression.stories.tsx
index 10b996a8f3..421706ca88 100644
--- a/packages/perseus/src/widgets/__stories__/expression.stories.tsx
+++ b/packages/perseus/src/widgets/__stories__/expression.stories.tsx
@@ -1,4 +1,5 @@
 import {KeypadContext, KeypadType} from "@khanacademy/math-input";
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-item-renderer-with-debug-ui";
@@ -46,6 +47,7 @@ const WrappedKeypadContext = ({
                             apiOptions={{
                                 isMobile: isMobile,
                                 customKeypad: customKeypad,
+                                onFocusChange: action("onFocusChange"),
                             }}
                         />
                     );
diff --git a/packages/perseus/src/widgets/__stories__/orderer.stories.tsx b/packages/perseus/src/widgets/__stories__/orderer.stories.tsx
index 8bdfae14da..78c71034e2 100644
--- a/packages/perseus/src/widgets/__stories__/orderer.stories.tsx
+++ b/packages/perseus/src/widgets/__stories__/orderer.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/orderer.testdata";
+import {question1, questionWithImages} from "../__testdata__/orderer.testdata";
 
 export default {
     title: "Perseus/Widgets/Orderer",
@@ -12,3 +12,7 @@ type StoryArgs = Record<any, any>;
 export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const QuestionWithImages = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={questionWithImages} />;
+};
diff --git a/packages/perseus/src/widgets/__testdata__/expression.testdata.ts b/packages/perseus/src/widgets/__testdata__/expression.testdata.ts
index fea868352b..a3eb60bdd8 100644
--- a/packages/perseus/src/widgets/__testdata__/expression.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/expression.testdata.ts
@@ -48,6 +48,26 @@ const createItemJson = (
     };
 };
 
+export const expressionItemWithAnswer = (answer: string): PerseusItem => {
+    return createItemJson(
+        {
+            answerForms: [
+                {
+                    considered: "correct",
+                    form: false,
+                    simplify: false,
+                    value: answer,
+                },
+            ],
+            times: false,
+            buttonSets: ["basic"],
+            functions: [],
+            buttonsVisible: "always",
+        },
+        {major: 1, minor: 0},
+    );
+};
+
 export const expressionItem2: PerseusItem = createItemJson(
     {
         answerForms: [
diff --git a/packages/perseus/src/widgets/__testdata__/orderer.testdata.ts b/packages/perseus/src/widgets/__testdata__/orderer.testdata.ts
index 0b8ee4c358..e8eed37b51 100644
--- a/packages/perseus/src/widgets/__testdata__/orderer.testdata.ts
+++ b/packages/perseus/src/widgets/__testdata__/orderer.testdata.ts
@@ -55,3 +55,69 @@ export const question2: PerseusRenderer = {
         },
     },
 };
+
+export const questionWithImages: PerseusRenderer = {
+    content: "**Put $6$ flowers in the box.**\n\n[[☃ orderer 1]]",
+    images: {},
+    widgets: {
+        "orderer 1": {
+            graded: true,
+            options: {
+                correctOptions: [
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                ],
+                height: "auto",
+                layout: "horizontal",
+                options: [
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                ],
+                otherOptions: [],
+            },
+            type: "orderer",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
diff --git a/packages/perseus/src/widgets/__tests__/expression.test.tsx b/packages/perseus/src/widgets/__tests__/expression.test.tsx
index 99077e7947..8a582ab1f9 100644
--- a/packages/perseus/src/widgets/__tests__/expression.test.tsx
+++ b/packages/perseus/src/widgets/__tests__/expression.test.tsx
@@ -12,6 +12,7 @@ import {
     expressionItem2,
     expressionItem3,
     expressionItem3Options,
+    expressionItemWithAnswer,
 } from "../__testdata__/expression.testdata";
 import {Expression} from "../expression";
 
@@ -182,6 +183,33 @@ describe("Expression Widget", function () {
         });
     });
 
+    describe("when the question uses the sin function", () => {
+        it("allows parens", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertCorrect(item, "sin(x)");
+        });
+
+        it("allows no parens", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertCorrect(item, "sin x");
+        });
+
+        it("grades a wrong answer as incorrect", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertIncorrect(item, "2");
+        });
+
+        it("treats sen as equivalent to sin", () => {
+            const item = expressionItemWithAnswer("sin(x)");
+            assertCorrect(item, "sen x");
+        });
+
+        it("treats multiple usages of sen as equivalent to sin", () => {
+            const item = expressionItemWithAnswer("sin(sin(x))");
+            assertCorrect(item, "sen(sen(x))");
+        });
+    });
+
     describe("analytics", () => {
         const assertKeypadVersion = (
             apiOptions: APIOptions,
@@ -436,4 +464,21 @@ describe("error tooltip", () => {
             screen.getByText("Sorry, I don't understand that!"),
         ).toBeVisible();
     });
+
+    it("does not show error text when the sen() function is used (Portuguese for sin())", async () => {
+        // Arrange
+        const {renderer} = renderQuestion(expressionItem2.question);
+        const expression = renderer.findWidgets("expression 1")[0];
+
+        // Act
+        expression.insert("sen(x)");
+        screen.getByRole("textbox").blur();
+        renderer.guessAndScore();
+
+        // Assert
+        expect(screen.queryByText("Oops!")).toBeNull();
+        expect(
+            screen.queryByText("Sorry, I don't understand that!"),
+        ).toBeNull();
+    });
 });
diff --git a/packages/perseus/src/widgets/deprecated-standin/__stories__/deprecated-standin.stories.tsx b/packages/perseus/src/widgets/deprecated-standin/__stories__/deprecated-standin.stories.tsx
new file mode 100644
index 0000000000..71aee4087e
--- /dev/null
+++ b/packages/perseus/src/widgets/deprecated-standin/__stories__/deprecated-standin.stories.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../../testing/renderer-with-debug-ui";
+
+export default {
+    title: "Perseus/Widgets/Deprecated Standin",
+};
+
+const question1 = {
+    content:
+        "Read the excerpt and answer the question below. \n\nThe Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 definition 1]], upon these conditions.",
+    images: {},
+    widgets: {
+        "definition 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "deprecated-standin",
+            options: {
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+} as const;
+
+type StoryArgs = Record<any, any>;
+
+export const Question1 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question1} />;
+};
diff --git a/packages/perseus/src/widgets/deprecated-standin/__tests__/__snapshots__/deprecated-standin.test.ts.snap b/packages/perseus/src/widgets/deprecated-standin/__tests__/__snapshots__/deprecated-standin.test.ts.snap
new file mode 100644
index 0000000000..3347baa46f
--- /dev/null
+++ b/packages/perseus/src/widgets/deprecated-standin/__tests__/__snapshots__/deprecated-standin.test.ts.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Deprecated Standin widget should have a default snapshot: first render 1`] = `
+<div>
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
+  >
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="0"
+    >
+      <div
+        class="paragraph"
+      >
+        Read the excerpt and answer the question below. 
+      </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
+      <div
+        class="paragraph"
+      >
+        The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
+        <div
+          class="perseus-widget-container widget-nohighlight widget-block"
+        >
+          <div
+            style="padding-top: 8px; padding-bottom: 8px;"
+          >
+            <div
+              aria-live="polite"
+              class="default_xu2jcg-o_O-containerOuter_xu9ezy-o_O-inlineStyles_1ozd0sx"
+              role="alert"
+            >
+              <div
+                class="default_xu2jcg-o_O-backgroundColor_10s9e9d-o_O-inlineStyles_tkl0uy"
+              />
+              <div
+                class="default_xu2jcg-o_O-containerInner_mm2xcu"
+              >
+                <span
+                  aria-label="warning"
+                  class="svg_1q6jc65-o_O-icon_1521uiv-o_O-icon_16tp01m-o_O-inlineStyles_g0hdza"
+                  data-test-id="banner-kind-icon"
+                  role="img"
+                />
+                <div
+                  class="default_xu2jcg-o_O-labelAndButtonsContainer_14rogkt"
+                >
+                  <div
+                    class="default_xu2jcg-o_O-labelContainer_1fjq5ke"
+                  >
+                    <span
+                      class="text_f1191h-o_O-LabelSmall_hl4zs1"
+                    >
+                      This part of the question is no-longer available. You will not be graded on this part.
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        , upon these conditions.
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/perseus/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts b/packages/perseus/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts
new file mode 100644
index 0000000000..8906d01477
--- /dev/null
+++ b/packages/perseus/src/widgets/deprecated-standin/__tests__/deprecated-standin.test.ts
@@ -0,0 +1,93 @@
+import "@testing-library/jest-dom"; // Imports custom matchers
+
+import {testDependencies} from "../../../../../../testing/test-dependencies";
+import * as Dependencies from "../../../dependencies";
+import {renderQuestion} from "../../__tests__/renderQuestion";
+
+const question = {
+    content:
+        "Read the excerpt and answer the question below. \n\nThe Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 widget 1]], upon these conditions.",
+    images: {},
+    widgets: {
+        "widget 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "deprecated-standin",
+            options: {
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+} as const;
+
+describe("Deprecated Standin widget", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should have a default snapshot", () => {
+        // Arrange & Act
+        const {container} = renderQuestion(question);
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should be scorable and always give points", () => {
+        // Arrange and act
+        const {renderer} = renderQuestion(question);
+        const result = renderer.scoreWidgets();
+
+        // Assert
+        expect(result["widget 1"]).toMatchObject({
+            type: "points",
+            earned: 1,
+            total: 1,
+            message: null,
+        });
+    });
+
+    it("should return an empty object for getUserInput()", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question);
+
+        // Act
+        const userInput = renderer.getUserInput();
+
+        // Assert
+        expect(userInput).toMatchInlineSnapshot(`
+            [
+              {},
+            ]
+        `);
+    });
+
+    it("should return a correct answer score for simpleValidate()", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question);
+
+        // Act
+        const score = renderer.scoreWidgets();
+
+        // Assert
+        expect(score).toMatchInlineSnapshot(`
+            {
+              "widget 1": {
+                "earned": 1,
+                "message": null,
+                "total": 1,
+                "type": "points",
+              },
+            }
+        `);
+    });
+});
diff --git a/packages/perseus/src/widgets/deprecated-standin/index.tsx b/packages/perseus/src/widgets/deprecated-standin/index.tsx
new file mode 100644
index 0000000000..284d5689c5
--- /dev/null
+++ b/packages/perseus/src/widgets/deprecated-standin/index.tsx
@@ -0,0 +1,57 @@
+import Banner from "@khanacademy/wonder-blocks-banner";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import React from "react";
+
+import type {PerseusScore, WidgetExports} from "../../types";
+
+// The props are type `any` on purpose so that this can receive props
+// from any deprecated widget
+type AutoCorrectProps = any;
+type Rubric = any;
+type UserInput = Empty;
+
+class AutoCorrect extends React.Component<AutoCorrectProps> {
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        // Since this mean to replace an existing widget the learner
+        // WILL earn points for this widget
+        return {
+            type: "points",
+            earned: 1,
+            total: 1,
+            message: null,
+        };
+    }
+
+    getUserInput: () => UserInput = () => {
+        return {};
+    };
+
+    simpleValidate: (arg1: Rubric) => PerseusScore = (rubric) => {
+        return AutoCorrect.validate(this.getUserInput(), rubric);
+    };
+
+    render() {
+        return (
+            <div
+                style={{
+                    paddingTop: 8,
+                    paddingBottom: 8,
+                }}
+            >
+                <Banner
+                    text={i18n._(
+                        "This part of the question is no-longer available. You will not be graded on this part.",
+                    )}
+                    kind="warning"
+                    layout="full-width"
+                />
+            </div>
+        );
+    }
+}
+
+export default {
+    name: "deprecated-standin",
+    displayName: "Deprecated Standin",
+    widget: AutoCorrect,
+} as WidgetExports<typeof AutoCorrect>;
diff --git a/packages/perseus/src/widgets/expression.tsx b/packages/perseus/src/widgets/expression.tsx
index 48e9db45de..c33a5e9404 100644
--- a/packages/perseus/src/widgets/expression.tsx
+++ b/packages/perseus/src/widgets/expression.tsx
@@ -57,6 +57,17 @@ const insertBraces = (value) => {
     return value.replace(/([_^])([^{])/g, "$1{$2}");
 };
 
+const anglicizeOperators = (tex: string): string => {
+    // sen is used instead of sin in some languages, e.g. Portuguese.
+    // To ensure that answers in various languages are graded correctly, we
+    // convert operators to their Englishy forms.
+    return tex.replace(/\\operatorname{sen}/g, "\\sin ");
+};
+
+const normalizeTex = (tex: string): string => {
+    return anglicizeOperators(insertBraces(tex));
+};
+
 const deriveKeypadVersion = (apiOptions: APIOptions) => {
     // We can derive which version of the keypad is in use. This is
     // a bit tricky, but this code will be relatively short-lived
@@ -280,7 +291,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     }
 
     static getUserInputFromProps(props: Props): string {
-        return insertBraces(props.value);
+        return normalizeTex(props.value);
     }
 
     static getOneCorrectAnswerFromRubric(
@@ -410,7 +421,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
         _.extend(options, {
             decimal_separator: i18n.getDecimalSeparator(),
         });
-        return KAS.parse(insertBraces(value), options);
+        return KAS.parse(normalizeTex(value), options);
     };
 
     changeAndTrack: (e: any, cb: () => void) => void = (
diff --git a/packages/perseus/src/widgets/iframe.tsx b/packages/perseus/src/widgets/iframe.tsx
index f836a4a4c0..6f4ac94e97 100644
--- a/packages/perseus/src/widgets/iframe.tsx
+++ b/packages/perseus/src/widgets/iframe.tsx
@@ -188,7 +188,7 @@ _.extend(Iframe, {
 
 export default {
     name: "iframe",
-    displayName: "Iframe",
+    displayName: "Iframe (deprecated)",
     widget: Iframe,
     // Let's not expose it to all content creators yet
     hidden: true,
diff --git a/packages/perseus/src/widgets/input-number.tsx b/packages/perseus/src/widgets/input-number.tsx
index 133f305559..ccaa9d7d49 100644
--- a/packages/perseus/src/widgets/input-number.tsx
+++ b/packages/perseus/src/widgets/input-number.tsx
@@ -403,7 +403,7 @@ const propTransform = (
 
 export default {
     name: "input-number",
-    displayName: "Number text box (old)",
+    displayName: "Input number (deprecated - use numeric input instead)",
     defaultAlignment: "inline-block",
     hidden: true,
     widget: InputNumber,
diff --git a/packages/perseus/src/widgets/label-image.test.ts b/packages/perseus/src/widgets/label-image.test.ts
index f35fcc5547..22f587dfee 100644
--- a/packages/perseus/src/widgets/label-image.test.ts
+++ b/packages/perseus/src/widgets/label-image.test.ts
@@ -912,8 +912,6 @@ describe("LabelImage", function () {
             );
             userEvent.click(markerButton);
 
-            await screen.findByRole("dialog");
-
             // Select a choice
             const choices = await screen.findAllByText("Trucks");
             const choice = choices[choices.length - 1];
diff --git a/packages/perseus/src/widgets/label-image.tsx b/packages/perseus/src/widgets/label-image.tsx
index 60e2ac8380..82cfd65cfc 100644
--- a/packages/perseus/src/widgets/label-image.tsx
+++ b/packages/perseus/src/widgets/label-image.tsx
@@ -6,8 +6,9 @@
  * knowledge by directly interacting with the image.
  */
 
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import {View} from "@khanacademy/wonder-blocks-core";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
@@ -21,7 +22,6 @@ import {typography} from "../styles/global-styles";
 import mediaQueries from "../styles/media-queries";
 
 import AnswerChoices from "./label-image/answer-choices";
-import {AnswerPill} from "./label-image/answer-pill";
 import {HideAnswersToggle} from "./label-image/hide-answers-toggle";
 import Marker from "./label-image/marker";
 
@@ -96,8 +96,6 @@ type LabelImageState = {
     activeMarkerIndex: number;
     // Whether any of the markers were interacted with by the user.
     markersInteracted: boolean;
-    // The currently focused marker index; defaults to -1, no focus.
-    focusedMarkerIndex: number;
     // Hide answer pills.
     hideAnswers: boolean;
 };
@@ -109,12 +107,6 @@ export class LabelImage extends React.Component<
     // The rendered markers on the question image for labeling.
     _markers: Array<Marker | null | undefined>;
 
-    // The popup component containing the answer choices.
-    _selectedMarkerPopup: Popover | null | undefined;
-
-    // The rendered list of answer choices for the currently selected marker.
-    _answerChoices: AnswerChoices | null | undefined;
-
     static gradeMarker(marker: InteractiveMarkerType): InteractiveMarkerScore {
         const score = {
             hasAnswers: false,
@@ -375,7 +367,6 @@ export class LabelImage extends React.Component<
 
         this.state = {
             activeMarkerIndex: -1,
-            focusedMarkerIndex: -1,
             markersInteracted: false,
             hideAnswers: false,
         };
@@ -414,24 +405,6 @@ export class LabelImage extends React.Component<
         onChange({markers: updatedMarkers}, null, true);
     }
 
-    dismissMarkerPopup() {
-        const {activeMarkerIndex} = this.state;
-
-        // No popup should be open if there's no selected marker.
-        if (activeMarkerIndex === -1) {
-            return;
-        }
-
-        this.setState({activeMarkerIndex: -1}, () => {
-            const marker = this._markers[activeMarkerIndex];
-            // Set focus on the just-deselected-marker, to enable to resume
-            // navigating between the markers using the keyboard.
-            if (marker) {
-                (ReactDOM.findDOMNode(marker) as HTMLElement).focus();
-            }
-        });
-    }
-
     handleMarkerChange(index: number, marker: InteractiveMarkerType) {
         const {markers, onChange} = this.props;
 
@@ -451,33 +424,21 @@ export class LabelImage extends React.Component<
         onChange({markers: updatedMarkers});
     }
 
-    activateMarker(index: number) {
-        const {activeMarkerIndex} = this.state;
+    activateMarker(index: number, opened: boolean) {
+        this.props.analytics?.onAnalyticsEvent({
+            type: "perseus:label-image:marker-interacted-with",
+            payload: null,
+        });
 
-        // Select the marker, revealing answer choices.
-        if (activeMarkerIndex !== index) {
-            this.setState(
-                {
-                    activeMarkerIndex: index,
-                    markersInteracted: true,
-                },
-                () => {
-                    // A delay is required to allow answer choices to first render
-                    // before trying to set focus on the first choice.
-                    // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-                    // eslint-disable-next-line no-restricted-syntax
-                    setTimeout(() => {
-                        if (this._answerChoices) {
-                            this._answerChoices.focusAnswer();
-                        }
-                    }, 100);
-                },
-            );
+        const {activeMarkerIndex} = this.state;
+        // Set index of opened marker
+        if (activeMarkerIndex !== index && opened) {
+            this.setState({
+                activeMarkerIndex: index,
+                markersInteracted: true,
+            });
         } else {
-            // The answer choices are shown within a popup attached to the
-            // selected marker. Close the popup and set focus back to the
-            // marker.
-            this.dismissMarkerPopup();
+            this.setState({activeMarkerIndex: -1});
         }
     }
 
@@ -523,7 +484,7 @@ export class LabelImage extends React.Component<
         index: number,
         selection: ReadonlyArray<boolean>,
     ) {
-        const {choices, markers, multipleAnswers} = this.props;
+        const {choices, markers} = this.props;
 
         // Compile the user selected answer choices.
         const selected = choices.filter((_, index) => selection[index]);
@@ -532,48 +493,6 @@ export class LabelImage extends React.Component<
             ...markers[index],
             selected: selected.length ? selected : undefined,
         });
-
-        if (!multipleAnswers) {
-            this.dismissMarkerPopup();
-        }
-    }
-
-    renderAnswerChoicesForMarker(
-        index: number,
-        marker: InteractiveMarkerType,
-    ): React.ReactElement<React.ComponentProps<"div">> {
-        const {choices, multipleAnswers} = this.props;
-
-        // The user selected answer choices.
-        const selected = marker.selected;
-
-        return (
-            <div
-                className={classNames(
-                    "perseus-label-image-widget-answer-choices",
-                    css(styles.scrollableChoices),
-                )}
-            >
-                <AnswerChoices
-                    choices={choices.map((choice) => ({
-                        content: choice,
-                        checked: selected ? selected.includes(choice) : false,
-                    }))}
-                    multipleSelect={multipleAnswers}
-                    onChange={(selection) => {
-                        this.props.analytics?.onAnalyticsEvent({
-                            type: "perseus:label-image:choiced-interacted-with",
-                            payload: null,
-                        });
-                        this.handleAnswerChoicesChangeForMarker(
-                            index,
-                            selection,
-                        );
-                    }}
-                    ref={(node) => (this._answerChoices = node)}
-                />
-            </div>
-        );
     }
 
     renderMarkers(): ReadonlyArray<React.ReactNode> {
@@ -584,43 +503,6 @@ export class LabelImage extends React.Component<
 
         // Render all markers for widget.
         return markers.map((marker, index): React.ReactElement => {
-            const score = LabelImage.gradeMarker(marker);
-            // Once the question is answered, show markers
-            // with correct answers, otherwise passthrough
-            // the correctness state.
-            const showCorrectness =
-                questionCompleted && score.hasAnswers && score.isCorrect
-                    ? "correct"
-                    : marker.showCorrectness;
-
-            const element = (
-                <Marker
-                    {...marker}
-                    showCorrectness={showCorrectness}
-                    showSelected={index === activeMarkerIndex}
-                    showPulsate={!markersInteracted}
-                    key={`${marker.x}.${marker.y}`}
-                    onClick={() => {
-                        this.props.analytics?.onAnalyticsEvent({
-                            type: "perseus:label-image:marker-interacted-with",
-                            payload: null,
-                        });
-                        this.activateMarker(index);
-                    }}
-                    onKeyDown={(e) => this.handleMarkerKeyDown(index, e)}
-                    ref={(node) => (this._markers[index] = node)}
-                    focused={index === this.state.focusedMarkerIndex}
-                    onFocus={() => {
-                        this.setState({focusedMarkerIndex: index});
-                    }}
-                    onBlur={() => {
-                        if (index === this.state.focusedMarkerIndex) {
-                            this.setState({focusedMarkerIndex: -1});
-                        }
-                    }}
-                />
-            );
-
             // Determine whether page is rendered in a narrow browser window.
             const isNarrowPage = window.matchMedia(
                 mediaQueries.xsOrSmaller.replace("@media ", ""),
@@ -657,66 +539,98 @@ export class LabelImage extends React.Component<
                 }[markerPosition];
             }
 
-            const answerChoicesActive = index === activeMarkerIndex;
+            const score = LabelImage.gradeMarker(marker);
+            // Once the question is answered, show markers
+            // with correct answers, otherwise passthrough
+            // the correctness state.
+            const showCorrectness =
+                questionCompleted && score.hasAnswers && score.isCorrect
+                    ? "correct"
+                    : marker.showCorrectness;
 
-            const adjustPopoverDistance: CSSProperties = {
-                [side]: 15, // move the popover closer to the marker
-            };
+            // Disable marker interaction once the question is answered correctly.
+            const disabled = showCorrectness === "correct";
 
             const adjustPillDistance: CSSProperties = {
                 [`margin${
                     markerPosition.charAt(0).toUpperCase() +
                     markerPosition.slice(1)
-                }`]: 15, // move pill further from marker
+                }`]: 10, // move pill further from marker
             };
 
+            const answerChoicesActive = index === activeMarkerIndex;
+
             const showAnswerChoice =
-                !answerChoicesActive && !this.state.hideAnswers;
+                marker.selected &&
+                !answerChoicesActive &&
+                !this.state.hideAnswers;
 
             return (
-                <div key={`answers-${marker.x}.${marker.y}`}>
-                    <Popover
-                        content={() => (
-                            <PopoverContentCore
-                                style={[
-                                    adjustPopoverDistance,
-                                    styles.choicesPopover,
-                                ]}
+                <View
+                    style={{
+                        position: "absolute",
+                        left: `${marker.x}%`,
+                        top: `${marker.y}%`,
+                        // reset to allow child (answer pill) to control z-index
+                        zIndex: "unset",
+                    }}
+                >
+                    <AnswerChoices
+                        key={`answers-${marker.x}.${marker.y}`}
+                        choices={this.props.choices.map((choice) => ({
+                            content: choice,
+                            checked: marker.selected
+                                ? marker.selected.includes(choice)
+                                : false,
+                        }))}
+                        multipleSelect={this.props.multipleAnswers}
+                        onChange={(selection) => {
+                            this.props.analytics?.onAnalyticsEvent({
+                                type: "perseus:label-image:choiced-interacted-with",
+                                payload: null,
+                            });
+                            this.handleAnswerChoicesChangeForMarker(
+                                index,
+                                selection,
+                            );
+                        }}
+                        onToggle={(opened) =>
+                            this.activateMarker(index, opened)
+                        }
+                        // cannot change answer choices once question is answered
+                        disabled={disabled}
+                        opener={({opened, text}) => (
+                            <Clickable
+                                role="button"
+                                key={`marker-${marker.x}.${marker.y}`}
+                                aria-label={
+                                    // already translated in: /widgets/graded-group.tsx
+                                    showCorrectness === "correct"
+                                        ? i18n._("Correct!")
+                                        : marker.label
+                                }
                             >
-                                {this.renderAnswerChoicesForMarker(
-                                    index,
-                                    marker,
+                                {({hovered, focused, pressed}) => (
+                                    <Marker
+                                        {...marker}
+                                        showCorrectness={showCorrectness}
+                                        showSelected={opened}
+                                        showPulsate={!markersInteracted}
+                                        ref={(node) =>
+                                            (this._markers[index] = node)
+                                        }
+                                        showAnswer={showAnswerChoice}
+                                        answerSide={side}
+                                        answerStyles={adjustPillDistance}
+                                        analytics={this.props.analytics}
+                                        focused={focused || pressed}
+                                        hovered={hovered}
+                                    />
                                 )}
-                            </PopoverContentCore>
+                            </Clickable>
                         )}
-                        placement={side}
-                        onClose={() => this.dismissMarkerPopup()}
-                        opened={answerChoicesActive}
-                        ref={(node) => (this._selectedMarkerPopup = node)}
-                        showTail={false}
-                        dismissEnabled
-                    >
-                        {element}
-                    </Popover>
-                    {!!marker.selected && showAnswerChoice && (
-                        <AnswerPill
-                            selectedAnswers={marker.selected}
-                            showCorrectness={showCorrectness}
-                            markerRef={
-                                // this throws a warning because it's inadvisable to
-                                // call ReactDOM fns in render. we aren't storing
-                                // actual refs in this array, so not much I can do
-                                // outside of a refactor.
-                                ReactDOM.findDOMNode(
-                                    this._markers[index],
-                                ) as HTMLElement
-                            }
-                            side={side}
-                            onClick={() => this.activateMarker(index)}
-                            style={adjustPillDistance}
-                        />
-                    )}
-                </div>
+                    />
+                </View>
             );
         });
     }
@@ -883,21 +797,6 @@ const styles = StyleSheet.create({
     imageInteractionDisabled: {
         pointerEvents: "none",
     },
-
-    scrollableChoices: {
-        paddingTop: 8,
-        paddingBottom: 8,
-
-        // Enable scroll for answer choices within popup on mobile phones.
-        [mediaQueries.xsOrSmaller]: {
-            maxHeight: 250,
-            overflowY: "auto",
-        },
-    },
-
-    choicesPopover: {
-        padding: 0,
-    },
 });
 
 const LabelImageWithDependencies = React.forwardRef<
diff --git a/packages/perseus/src/widgets/label-image/__stories__/answer-choices.stories.tsx b/packages/perseus/src/widgets/label-image/__stories__/answer-choices.stories.tsx
index 45a8dc6f24..de11594693 100644
--- a/packages/perseus/src/widgets/label-image/__stories__/answer-choices.stories.tsx
+++ b/packages/perseus/src/widgets/label-image/__stories__/answer-choices.stories.tsx
@@ -1,9 +1,8 @@
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
 
 import AnswerChoices from "../answer-choices";
 
-import type {AnswerType} from "../answer-choices";
-
 type StoryArgs = Record<any, any>;
 
 type Story = {
@@ -45,47 +44,43 @@ const defaultChoices = [
     },
 ];
 
-class WithState extends React.Component<
-    {
-        multipleSelect: boolean;
-    },
-    {
-        choices: ReadonlyArray<AnswerType>;
-    }
-> {
-    static defaultProps = {
-        multipleSelect: false,
-    };
-
-    state = {
-        choices: [...defaultChoices],
-    };
-
-    handleChange(selection) {
-        const {choices} = this.state;
+const WithState = ({multipleSelect}) => {
+    const [choices, setChoices] = React.useState([...defaultChoices]);
+    const [isOpened, setIsOpened] = React.useState(false);
 
-        this.setState({
-            choices: choices.map((choice, index) => ({
+    const handleChange = (selection) => {
+        setChoices([
+            ...choices.map((choice, index) => ({
                 ...choice,
                 checked: selection[index],
             })),
-        });
-    }
-
-    render(): React.ReactNode {
-        const {multipleSelect} = this.props;
-
-        const {choices} = this.state;
+        ]);
+    };
 
-        return (
+    return (
+        <>
             <AnswerChoices
                 choices={choices}
                 multipleSelect={multipleSelect}
-                onChange={(selection) => this.handleChange(selection)}
+                onChange={(selection) => handleChange(selection)}
+                opener={() => <button>{isOpened ? "Close" : "Open"}</button>}
+                onToggle={(opened) => setIsOpened(opened)}
+                disabled={false}
             />
-        );
-    }
-}
+            <>
+                {choices
+                    .filter(({checked}) => checked)
+                    .map(({content}) => (
+                        <LabelLarge key={content}>{content}</LabelLarge>
+                    ))}
+            </>
+        </>
+    );
+};
+
+WithState.defaultProps = {
+    multipleSelect: false,
+};
 
 export const SingleSelect = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
diff --git a/packages/perseus/src/widgets/label-image/__tests__/answer-pill.test.tsx b/packages/perseus/src/widgets/label-image/__tests__/answer-pill.test.tsx
index efc473e1ff..08bdbb4415 100644
--- a/packages/perseus/src/widgets/label-image/__tests__/answer-pill.test.tsx
+++ b/packages/perseus/src/widgets/label-image/__tests__/answer-pill.test.tsx
@@ -17,11 +17,7 @@ describe("AnswerPill", () => {
     it("should display the correct answer string when there is only one selected answer", () => {
         const selectedAnswers = ["Answer 1"];
         const screen = render(
-            <AnswerPill
-                selectedAnswers={selectedAnswers}
-                side={"top"}
-                onClick={() => {}}
-            />,
+            <AnswerPill selectedAnswers={selectedAnswers} side={"top"} />,
             {wrapper: RenderStateRoot},
         );
         expect(screen.getByText("Answer 1")).toBeInTheDocument();
@@ -30,11 +26,7 @@ describe("AnswerPill", () => {
     it("should display the correct answer string when there are multiple selected answers", () => {
         const selectedAnswers = ["Answer 1", "Answer 2", "Answer 3"];
         const screen = render(
-            <AnswerPill
-                selectedAnswers={selectedAnswers}
-                side={"top"}
-                onClick={() => {}}
-            />,
+            <AnswerPill selectedAnswers={selectedAnswers} side={"top"} />,
             {wrapper: RenderStateRoot},
         );
         expect(screen.getByText("3 answers")).toBeInTheDocument();
diff --git a/packages/perseus/src/widgets/label-image/answer-choices.tsx b/packages/perseus/src/widgets/label-image/answer-choices.tsx
index fc8d14462e..13df31aa5c 100644
--- a/packages/perseus/src/widgets/label-image/answer-choices.tsx
+++ b/packages/perseus/src/widgets/label-image/answer-choices.tsx
@@ -1,19 +1,16 @@
 /**
- * Controlled list of answer choices, supports arrow key navigation.
- *
- * Enables single or multiple answers selection, using radio or checkbox input
- * types, respectively.
+ * Enables single or multiple answers selection using WonderBlocks dropdowns.
  */
 
-import Color from "@khanacademy/wonder-blocks-color";
-import {StyleSheet, css} from "aphrodite";
+import {
+    MultiSelect,
+    SingleSelect,
+    OptionItem,
+} from "@khanacademy/wonder-blocks-dropdown";
 import * as React from "react";
 import _ from "underscore";
 
-import Icon from "../../components/icon";
-import {iconCheckMedium} from "../../icon-paths";
 import Renderer from "../../renderer";
-import sharedStyles from "../../styles/shared";
 
 export type AnswerType = {
     // The answer string, can be plain text or a KaTeX expression.
@@ -22,25 +19,6 @@ export type AnswerType = {
     checked: boolean;
 };
 
-type AnswerProps = AnswerType & {
-    // The input control type to use.
-    inputType: "checkbox" | "radio";
-    // The radio group name.
-    groupName: string;
-    // The answer position within choices.
-    index: number;
-    // Callback to handle change to answer selection.
-    onChange: (checked: boolean) => void;
-    // Callbacks to handle navigating between adjacent answers.
-    onFocusPrevAnswer: () => void;
-    onFocusNextAnswer: () => void;
-};
-
-type AnswerState = {
-    // Whether answer is currently focused.
-    isInputFocused: boolean;
-};
-
 type AnswerChoicesProps = {
     // The list of possible answers in a specific order.
     choices: ReadonlyArray<AnswerType>;
@@ -48,259 +26,63 @@ type AnswerChoicesProps = {
     multipleSelect: boolean;
     // Callback to handle change to answer choices selection.
     onChange: (selection: ReadonlyArray<boolean>) => void;
+    // Callback to define custom opener.
+    opener: SingleSelect["props"]["opener"];
+    // Callback to handle toggle of dropdown.
+    onToggle: (opened: boolean) => unknown;
+    // Whether the answer choices are disabled.
+    disabled: boolean;
 };
 
-type AnswerChoicesState = {
-    // Globally unique radio group name.
-    groupName: string;
-};
-
-class AnswerChoice extends React.Component<AnswerProps, AnswerState> {
-    // The radio button or checkbox input control.
-    _input: HTMLInputElement | null | undefined;
-
-    state: AnswerState = {
-        isInputFocused: false,
+const AnswerChoices = (props: AnswerChoicesProps) => {
+    const onAnswerChange = (selected: string[]) => {
+        const {choices, onChange} = props;
+        onChange(choices.map((choice) => selected.includes(choice.content)));
     };
 
-    focusInput() {
-        if (this._input) {
-            this._input.focus();
-        }
-    }
-
-    handleClick(e: React.MouseEvent<HTMLDivElement>) {
-        const {checked, onChange} = this.props;
-
-        e.preventDefault();
-
-        // We manually handle clicks, setting focus on the input control.
-        this.focusInput();
-
-        // And toggling the answer selection state.
-        onChange(!checked);
-    }
-
-    handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
-        const {onFocusPrevAnswer, onFocusNextAnswer} = this.props;
-
-        // This may override built-in browser arrow key navigation for radio
-        // group. Checkbox fieldset does not have such built-in capability,
-        // thus we do this manually for both input types.
-        switch (e.key) {
-            case "ArrowUp":
-                e.preventDefault();
-                onFocusPrevAnswer();
-                break;
-
-            case "ArrowDown":
-                e.preventDefault();
-                onFocusNextAnswer();
-                break;
-        }
-    }
-
-    handleInputChange(e: React.SyntheticEvent<HTMLInputElement>) {
-        // Prevent answer selection from double-toggling, as `handleClick` is
-        // handling changes to selection state.
-        e.preventDefault();
-    }
-
-    handleInputFocus() {
-        this.setState({isInputFocused: true});
-    }
-
-    handleInputBlur() {
-        this.setState({isInputFocused: false});
-    }
-
-    renderCheckmark(): React.ReactNode {
-        const {checked} = this.props;
-
-        return (
-            <span className={css(styles.checkmarkContainer)}>
-                {checked && (
-                    <Icon
-                        icon={iconCheckMedium}
-                        size={16}
-                        color={Color.offBlack}
-                    />
-                )}
-            </span>
-        );
-    }
-
-    render(): React.ReactNode {
-        const {content, checked, groupName, index, inputType} = this.props;
-
-        const {isInputFocused} = this.state;
-
-        const answerId = `${groupName}-${index}`;
-
-        return (
-            <div
-                className={css(
-                    styles.answerChoice,
-                    isInputFocused && styles.answerFocused,
-                )}
-                onClick={(e) => this.handleClick(e)}
-                onKeyDown={(e) => this.handleKeyDown(e)}
-            >
-                <span className={css(styles.answerInputWrapper)}>
-                    <input
-                        className={css(sharedStyles.perseusSrOnly)}
-                        checked={checked}
-                        name={groupName}
-                        id={answerId}
-                        type={inputType}
-                        onChange={(e) => this.handleInputChange(e)}
-                        onFocus={() => this.handleInputFocus()}
-                        onBlur={() => this.handleInputBlur()}
-                        ref={(node) => (this._input = node)}
-                    />
-
-                    {this.renderCheckmark()}
-                </span>
-
-                <label htmlFor={answerId}>
-                    <Renderer content={content} />
-                </label>
-            </div>
-        );
-    }
-}
-
-export default class AnswerChoices extends React.Component<
-    AnswerChoicesProps,
-    AnswerChoicesState
-> {
-    // The rendered answers elements.
-    _choices: Array<AnswerChoice | null | undefined>;
-
-    constructor(props: AnswerChoicesProps) {
-        super(props);
-
-        this._choices = [];
-
-        this.state = {
-            groupName: _.uniqueId("answer_choices_"),
-        };
-    }
-
-    focusAnswer(index = 0) {
-        const numChoices = this.props.choices.length;
-
-        // Wrap the index if necessary.
-        if (index < 0) {
-            index += numChoices;
-        } else if (index >= numChoices) {
-            index -= numChoices;
-        }
-
-        const choice = this._choices[index];
-
-        if (choice) {
-            choice.focusInput();
-        }
-    }
-
-    onAnswerChange(index: number, checked: boolean) {
-        const {choices, multipleSelect, onChange} = this.props;
-
-        const selection: Array<boolean> = [];
-
-        // Compile the selection state of answer choices. In single selection
-        // mode (radio input type), only 0 or 1 answer may be chosen.
-        for (let i = 0; i < choices.length; i++) {
-            selection.push(
-                multipleSelect
-                    ? i === index
-                        ? checked
-                        : choices[i].checked
-                    : i === index
-                    ? checked
-                    : false,
-            );
-        }
-
-        onChange(selection);
-    }
-
-    onFocusAnswer(index: number) {
-        this.focusAnswer(index);
-    }
-
-    render(): React.ReactNode {
-        const {choices, multipleSelect} = this.props;
-
-        const {groupName} = this.state;
-
-        return (
-            <fieldset
-                style={{
-                    border: "none",
-                    margin: 0,
-                    padding: 0,
-                }}
-            >
-                {choices.map((choice, index) => (
-                    <AnswerChoice
-                        {...choice}
-                        key={choice.content}
-                        groupName={groupName}
-                        index={index}
-                        inputType={multipleSelect ? "checkbox" : "radio"}
-                        onChange={(checked) =>
-                            this.onAnswerChange(index, checked)
-                        }
-                        onFocusPrevAnswer={() => this.onFocusAnswer(index - 1)}
-                        onFocusNextAnswer={() => this.onFocusAnswer(index + 1)}
-                        ref={(node) => (this._choices[index] = node)}
-                    />
-                ))}
-            </fieldset>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    answerChoice: {
-        display: "flex",
-        alignItems: "center",
-
-        userSelect: "none",
-
-        padding: "10px 16px 10px 0px",
-
-        fontWeight: "bold",
-
-        border: "solid 2px transparent",
-        borderRadius: 2,
-
-        ":active": {
-            backgroundColor: "rgba(33, 36, 44, 0.08)",
-        },
-    },
-
-    answerFocused: {
-        borderColor: "#1865f2",
-
-        ":active": {
-            borderColor: "transparent",
-        },
-    },
-
-    answerInputWrapper: {
-        marginRight: 8,
-    },
-
-    checkmarkContainer: {
-        display: "flex",
-        position: "relative",
+    // WB Dropdown types only take an array of nodes, so we can't use a
+    // functional component, which can only return a single node.
+    const AnswerItems = (choices: readonly AnswerType[]) =>
+        choices.map(({content}) => (
+            <OptionItem
+                key={content}
+                value={content}
+                label={<Renderer content={content} inline />}
+            />
+        ));
+
+    const selectedValues = props.choices
+        .filter((choice) => choice.checked)
+        .map((choice) => choice.content);
+
+    const {opener, onToggle, disabled} = props;
+
+    const args: Partial<
+        React.ComponentProps<typeof MultiSelect> &
+            React.ComponentProps<typeof SingleSelect>
+    > = {
+        // reset to allow child (answer pill) to control z-index
+        style: {zIndex: "unset"},
+        children: AnswerItems(props.choices),
+        opener,
+        onToggle,
+        disabled,
+    };
 
-        width: 16,
-        height: 16,
+    return props.multipleSelect ? (
+        <MultiSelect
+            {...args}
+            selectedValues={selectedValues}
+            onChange={(selected) => onAnswerChange(selected)}
+        />
+    ) : (
+        <SingleSelect
+            {...args}
+            selectedValue={selectedValues[0]}
+            onChange={(selected) => onAnswerChange([selected])}
+            placeholder={props.choices[0].content} // not visible, but required
+        />
+    );
+};
 
-        marginLeft: 8,
-    },
-});
+export default AnswerChoices;
diff --git a/packages/perseus/src/widgets/label-image/answer-pill.tsx b/packages/perseus/src/widgets/label-image/answer-pill.tsx
index 028eaa8663..da7f993080 100644
--- a/packages/perseus/src/widgets/label-image/answer-pill.tsx
+++ b/packages/perseus/src/widgets/label-image/answer-pill.tsx
@@ -8,16 +8,31 @@ import {Popper} from "react-popper";
 
 import Renderer from "../../renderer";
 
+const BringToFront: CSSProperties = {
+    boxShadow: `0 8px 8px ${Color.offBlack64}`,
+    zIndex: 1000,
+};
+
 export const AnswerPill = (props: {
     selectedAnswers: readonly string[];
     showCorrectness?: "correct" | "incorrect";
     markerRef?: HTMLElement;
     side: "top" | "bottom" | "left" | "right";
-    onClick: () => void;
     style?: CSSProperties;
+    hovered?: boolean;
+    focused?: boolean;
+    onClick?: () => void;
 }) => {
-    const {selectedAnswers, showCorrectness, markerRef, side, onClick, style} =
-        props;
+    const {
+        selectedAnswers,
+        showCorrectness,
+        markerRef,
+        side,
+        onClick,
+        style,
+        focused,
+        hovered,
+    } = props;
 
     const idFactory = useUniqueIdWithMock();
 
@@ -36,11 +51,6 @@ export const AnswerPill = (props: {
     const correct = showCorrectness === "correct";
     const incorrect = showCorrectness === "incorrect";
 
-    const bringToFront = {
-        boxShadow: `0 8px 8px ${Color.offBlack64}`,
-        zIndex: 1000,
-    };
-
     return (
         <Popper
             placement={side}
@@ -64,12 +74,10 @@ export const AnswerPill = (props: {
                     style={[
                         style,
                         popperStyle,
-                        {
-                            ":hover": bringToFront,
-                            ":focus": bringToFront,
-                        },
+                        styles.relative,
                         correct && styles.correct,
                         incorrect && styles.incorrect,
+                        (focused || hovered) && BringToFront,
                     ]}
                 >
                     <Renderer content={answerString} inline />
@@ -81,7 +89,8 @@ export const AnswerPill = (props: {
 
 const styles = StyleSheet.create({
     correct: {
-        backgroundColor: "#00880b", // WB green darkened by 18%
+        // WB green darkened by 18%
+        backgroundColor: "#00880b",
     },
     incorrect: {
         backgroundColor: Color.offBlack64,
diff --git a/packages/perseus/src/widgets/label-image/marker.tsx b/packages/perseus/src/widgets/label-image/marker.tsx
index 0c5d17107e..0bd46512e0 100644
--- a/packages/perseus/src/widgets/label-image/marker.tsx
+++ b/packages/perseus/src/widgets/label-image/marker.tsx
@@ -7,25 +7,32 @@
 
 import Color from "@khanacademy/wonder-blocks-color";
 import {View, type StyleType} from "@khanacademy/wonder-blocks-core";
-import {StyleSheet, css} from "aphrodite";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import Icon from "../../components/icon";
 import {iconCheck, iconChevronDown, iconMinus} from "../../icon-paths";
 
+import {AnswerPill} from "./answer-pill";
+
 import type {InteractiveMarkerType} from "./types";
+import type {IconType} from "../../components/icon";
+import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
+import type {CSSProperties} from "aphrodite";
 
 type Props = InteractiveMarkerType & {
     // Whether this marker has been selected by user.
     showSelected: boolean;
     // Whether this marker should pulsate to draw user attention.
     showPulsate: boolean;
-    // Callbacks for when marker is interacted with using input device.
-    onClick: (e: React.MouseEvent) => void;
-    onKeyDown: (e: React.KeyboardEvent) => void;
-    onFocus: () => void;
-    onBlur: () => void;
+    answerSide: "top" | "bottom" | "left" | "right";
+    answerStyles?: CSSProperties;
+    showAnswer?: boolean;
+    analytics?: {
+        onAnalyticsEvent: AnalyticsEventHandlerFn;
+    };
     focused: boolean;
+    hovered: boolean;
 };
 
 function shouldReduceMotion(): boolean {
@@ -33,6 +40,8 @@ function shouldReduceMotion(): boolean {
     return !mediaQuery || mediaQuery.matches;
 }
 
+const MARKER_SIZE = 24;
+
 export default class Marker extends React.Component<Props> {
     // The marker icon element.
     _icon: HTMLElement | null | undefined;
@@ -43,57 +52,54 @@ export default class Marker extends React.Component<Props> {
         selected: [],
     };
 
-    renderIcon(): React.ReactElement<React.ComponentProps<"div">> {
-        const {selected, showCorrectness, showSelected, showPulsate, focused} =
+    renderIcon() {
+        const {selected, showCorrectness, showSelected, showPulsate} =
             this.props;
 
         // Only a single marker may be "selected" at a time.
         // `showSelected` is a controlled prop, that may be set to `true` for
         // one marker at a time.
-        // `focused` is a controlled state, driven by focus events, and may
-        // only be `true` when there's no answer choices popup visible, and
-        // keyboard focus is given to the marker.
-        const isSelected = showSelected || focused;
+        const isOpen = showSelected;
+
+        const selectedAnswers = selected;
 
-        let innerIcon: React.ReactElement | undefined;
         let iconStyles: StyleType;
 
+        const iconNull: IconType = {
+            path: "",
+            height: 1,
+            width: 1,
+        };
+
+        // default dot
+        let args: Icon["props"] = {
+            size: MARKER_SIZE,
+            color: Color.white,
+            icon: iconNull,
+        };
+
         if (showCorrectness) {
-            innerIcon = (
-                <Icon
-                    icon={showCorrectness === "correct" ? iconCheck : iconMinus}
-                    size={24}
-                    color={Color.white}
-                />
-            );
-
-            if (showCorrectness === "correct") {
-                iconStyles = [
-                    styles.markerGraded,
-                    styles.markerCorrect,
-                    isSelected && styles.markerSelected,
-                ];
-            } else {
-                iconStyles = [
-                    styles.markerGraded,
-                    styles.markerIncorrect,
-                    isSelected && styles.markerSelected,
-                ];
-            }
-        } else if (focused) {
-            iconStyles = [
-                styles.markerFocused,
-                selected && selected.length > 0 && styles.markerFilled,
-                showSelected && styles.markerSelected,
-            ];
-        } else if (selected && selected.length > 0) {
             iconStyles = [
-                styles.markerFilled,
-                isSelected && styles.markerSelected,
+                styles.markerGraded,
+                showCorrectness === "correct"
+                    ? styles.markerCorrect
+                    : styles.markerIncorrect,
+                isOpen && styles.markerSelected,
             ];
-        } else if (isSelected) {
+            args = {
+                ...args,
+                icon: showCorrectness === "correct" ? iconCheck : iconMinus,
+            };
+        } else if (selectedAnswers && selectedAnswers.length > 0) {
+            iconStyles = [styles.markerFilled, isOpen && styles.markerSelected];
+        } else if (isOpen) {
             iconStyles = [styles.markerSelected];
-        } else {
+            args = {
+                ...args,
+                icon: iconChevronDown,
+                size: 8,
+            };
+        } else if (showPulsate) {
             iconStyles = [
                 styles.markerPulsateBase,
                 shouldReduceMotion()
@@ -102,90 +108,73 @@ export default class Marker extends React.Component<Props> {
             ];
         }
 
-        if (isSelected && selected && selected.length === 0) {
-            innerIcon = (
-                <Icon icon={iconChevronDown} size={8} color={Color.white} />
-            );
-        }
-
         return (
             <View
                 style={[styles.markerIcon, iconStyles]}
                 ref={(node) => (this._icon = node)}
             >
-                {innerIcon}
+                <Icon {...args} />
             </View>
         );
     }
 
     render(): React.ReactNode {
-        const {label, x, y, showCorrectness} = this.props;
-
-        // It should no longer be possible to interact with a marker after it
-        // has been labeled (answered) correctly.
-        const isDisabled = showCorrectness === "correct";
+        const {
+            showCorrectness,
+            selected,
+            showAnswer,
+            answerSide,
+            answerStyles,
+            hovered,
+            focused,
+        } = this.props;
+
+        // We cannot make dropdown openers untabbable, so we isolate tabbing
+        // to answer pills when interaction is disabled.
+        const markerDisabled = showCorrectness === "correct";
+        const active = hovered || focused;
 
         return (
-            <button
-                aria-label={label}
-                className={css(
-                    styles.unstyledButton,
-                    styles.marker,
-                    isDisabled && styles.disabled,
+            <>
+                <View
+                    style={[
+                        styles.marker,
+                        active && !markerDisabled && styles.markerActive,
+                    ]}
+                >
+                    {this.renderIcon()}
+                </View>
+                {!!selected && showAnswer && (
+                    <AnswerPill
+                        selectedAnswers={selected}
+                        showCorrectness={showCorrectness}
+                        side={answerSide}
+                        style={answerStyles}
+                        markerRef={this._icon ?? undefined}
+                        hovered={hovered}
+                        focused={focused}
+                    />
                 )}
-                style={{
-                    left: `${x}%`,
-                    top: `${y}%`,
-                }}
-                tabIndex={isDisabled ? -1 : 0}
-                onFocus={this.props.onFocus}
-                onBlur={this.props.onBlur}
-                onClick={(e) => {
-                    e.preventDefault();
-                    this.props.onClick(e);
-                }}
-                onKeyDown={(e) => this.props.onKeyDown(e)}
-            >
-                {this.renderIcon()}
-            </button>
+            </>
         );
     }
 }
 
-const lightShadowColor = "rgba(33, 36, 44, 0.16)";
-
-const markerSize = 20;
-
 const styles = StyleSheet.create({
-    unstyledButton: {
-        padding: 0,
-
-        overflow: "visible",
-
-        color: "inherit",
-        font: "inherit",
-
-        lineHeight: "normal",
-
-        background: "none",
-        border: "none",
-    },
-
     marker: {
         position: "absolute",
-        outline: "none",
 
-        // Center marker position based on it's maximum size.
-        width: markerSize,
-        height: markerSize,
         backgroundColor: Color.white,
-        borderRadius: 30,
-        marginLeft: -15,
-        marginTop: -15,
-    },
+        borderRadius: MARKER_SIZE,
+
+        // Center marker position based on its maximum size.
+        width: MARKER_SIZE,
+        height: MARKER_SIZE,
+        marginLeft: MARKER_SIZE / -2,
+        marginTop: MARKER_SIZE / -2,
 
-    disabled: {
-        pointerEvents: "none",
+        // Add a shadow to the marker to make it stand out from the image.
+        boxShadow: `0 8px 8px ${Color.offBlack8}`,
     },
 
     // The base and unfilled marker style.
@@ -194,24 +183,13 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
 
-        boxSizing: "content-box",
-
-        width: markerSize,
-        height: markerSize,
+        boxSizing: "border-box",
 
-        marginLeft: 2,
-
-        cursor: "pointer",
+        width: MARKER_SIZE,
+        height: MARKER_SIZE,
 
         border: `2px solid ${Color.offBlack64}`,
-        borderRadius: markerSize,
-
-        boxShadow: `0 8px 8px ${Color.offBlack8}`,
-
-        ":hover": {
-            outline: `2px solid ${Color.blue}`,
-            outlineOffset: 2,
-        },
+        borderRadius: MARKER_SIZE,
     },
 
     // The animation that presents the marker to the learner
@@ -239,10 +217,6 @@ const styles = StyleSheet.create({
 
     markerUnfilledPulsateInfinite: {
         animationIterationCount: "infinite",
-
-        ":hover": {
-            outline: `0px solid ${Color.blue}`,
-        },
     },
 
     markerUnfilledPulsateOnce: {
@@ -250,7 +224,7 @@ const styles = StyleSheet.create({
         animationIterationCount: "2",
     },
 
-    markerFocused: {
+    markerActive: {
         outline: `2px solid ${Color.blue}`,
         outlineOffset: 2,
     },
@@ -261,40 +235,23 @@ const styles = StyleSheet.create({
 
         border: `solid 4px ${Color.white}`,
         backgroundColor: Color.blue,
-        borderRadius: markerSize,
+        borderRadius: MARKER_SIZE,
         transform: "rotate(180deg)",
-
-        ":hover": {
-            outline: `2px solid ${Color.blue}`,
-            outlineOffset: -2,
-        },
     },
 
     // The learner has made a selection
     markerFilled: {
-        width: markerSize - 2,
-        height: markerSize - 2,
-        borderRadius: markerSize - 2,
         backgroundColor: "#ECF3FE",
-
-        marginLeft: 3,
-        marginTop: 0,
-
         border: `4px solid ${Color.blue}`,
-
-        boxShadow: `0 1px 1px 0 ${lightShadowColor}`,
     },
 
     markerGraded: {
-        width: markerSize,
-        height: markerSize,
-        marginLeft: 1,
-        marginTop: 1,
+        width: MARKER_SIZE,
+        height: MARKER_SIZE,
 
         justifyContent: "center",
         alignItems: "center",
         border: `2px solid ${Color.white}`,
-        boxShadow: `0 8px 8px ${Color.offBlack8}`,
     },
 
     markerCorrect: {
diff --git a/packages/perseus/src/widgets/lights-puzzle.tsx b/packages/perseus/src/widgets/lights-puzzle.tsx
index bb5f927c9a..884e6ff8e0 100644
--- a/packages/perseus/src/widgets/lights-puzzle.tsx
+++ b/packages/perseus/src/widgets/lights-puzzle.tsx
@@ -352,7 +352,7 @@ const transformProps: (arg1: any) => any = function (editorProps) {
 
 export default {
     name: "lights-puzzle",
-    displayName: "Lights Puzzle",
+    displayName: "Lights puzzle (deprecated)",
     hidden: true,
     widget: LightsPuzzle,
     transform: transformProps,
diff --git a/packages/perseus/src/widgets/matcher.tsx b/packages/perseus/src/widgets/matcher.tsx
index 7a2570d175..bfc85f7d0d 100644
--- a/packages/perseus/src/widgets/matcher.tsx
+++ b/packages/perseus/src/widgets/matcher.tsx
@@ -292,7 +292,7 @@ const styles = StyleSheet.create({
 
 export default {
     name: "matcher",
-    displayName: "Two column matcher",
+    displayName: "Matcher (two column)",
     widget: Matcher,
     isLintable: true,
 } as WidgetExports<typeof Matcher>;
diff --git a/packages/perseus/src/widgets/numeric-input.tsx b/packages/perseus/src/widgets/numeric-input.tsx
index 49749bcb4d..f513a55aee 100644
--- a/packages/perseus/src/widgets/numeric-input.tsx
+++ b/packages/perseus/src/widgets/numeric-input.tsx
@@ -567,7 +567,7 @@ const propsTransform = function (
 
 export default {
     name: "numeric-input",
-    displayName: "Number text box",
+    displayName: "Numeric input",
     defaultAlignment: "inline-block",
     accessible: true,
     widget: NumericInput,
diff --git a/packages/perseus/src/widgets/radio.ts b/packages/perseus/src/widgets/radio.ts
index b6266da94b..3302e7f8d8 100644
--- a/packages/perseus/src/widgets/radio.ts
+++ b/packages/perseus/src/widgets/radio.ts
@@ -146,7 +146,7 @@ const propUpgrades = {
 
 export default {
     name: "radio",
-    displayName: "Multiple choice",
+    displayName: "Radio / Multiple choice",
     accessible: true,
     widget: Radio,
     transform: transform,
diff --git a/packages/perseus/src/widgets/reaction-diagram.tsx b/packages/perseus/src/widgets/reaction-diagram.tsx
index e0a5b4b795..d010a510b5 100644
--- a/packages/perseus/src/widgets/reaction-diagram.tsx
+++ b/packages/perseus/src/widgets/reaction-diagram.tsx
@@ -138,7 +138,7 @@ class ReactionDiagramWidget extends React.Component<any> {
 
 export default {
     name: "reaction-diagram",
-    displayName: "Chemical reaction",
+    displayName: "Chemical reaction diagram (deprecated)",
     hidden: true,
     widget: ReactionDiagramWidget,
 } as WidgetExports<typeof ReactionDiagramWidget>;
diff --git a/packages/perseus/src/widgets/sequence.tsx b/packages/perseus/src/widgets/sequence.tsx
index 7e0e9d400e..90a0c19734 100644
--- a/packages/perseus/src/widgets/sequence.tsx
+++ b/packages/perseus/src/widgets/sequence.tsx
@@ -133,7 +133,7 @@ const traverseChildWidgets = function (props: any, traverseRenderer: any): any {
 
 export default {
     name: "sequence",
-    displayName: "Graded Sequence",
+    displayName: "Graded sequence (deprecated)",
     widget: Sequence,
     traverseChildWidgets: traverseChildWidgets,
     tracking: "all",
diff --git a/packages/perseus/src/widgets/simulator.tsx b/packages/perseus/src/widgets/simulator.tsx
index 419c8b9163..eaf0bed296 100644
--- a/packages/perseus/src/widgets/simulator.tsx
+++ b/packages/perseus/src/widgets/simulator.tsx
@@ -822,7 +822,7 @@ const propTransform: (arg1: any) => any = (editorProps) => {
 
 export default {
     name: "simulator",
-    displayName: "Simulator",
+    displayName: "Simulator (deprecated)",
     widget: Simulator,
     transform: propTransform,
     hidden: true,
diff --git a/packages/perseus/src/widgets/table.tsx b/packages/perseus/src/widgets/table.tsx
index 40b9f6b3a5..6aaf913298 100644
--- a/packages/perseus/src/widgets/table.tsx
+++ b/packages/perseus/src/widgets/table.tsx
@@ -384,7 +384,7 @@ const propTransform: (arg1: any) => any = (editorProps) => {
 
 export default {
     name: "table",
-    displayName: "Table of values",
+    displayName: "Table (deprecated - use markdown table instead)",
     accessible: true,
     widget: Table,
     transform: propTransform,
diff --git a/packages/perseus/src/widgets/transformer.tsx b/packages/perseus/src/widgets/transformer.tsx
index ed3afc8e4a..d5d8159fce 100644
--- a/packages/perseus/src/widgets/transformer.tsx
+++ b/packages/perseus/src/widgets/transformer.tsx
@@ -2930,6 +2930,7 @@ class Transformer extends React.Component<Props> {
 
 export default {
     name: "transformer",
-    displayName: "Transformer",
+    displayName: "Transformer (deprecated)",
+    hidden: true,
     widget: Transformer,
 } as WidgetExports<typeof Transformer>;
diff --git a/packages/perseus/src/widgets/unit.tsx b/packages/perseus/src/widgets/unit.tsx
index 9c95e05242..453a406847 100644
--- a/packages/perseus/src/widgets/unit.tsx
+++ b/packages/perseus/src/widgets/unit.tsx
@@ -365,7 +365,7 @@ const primUnits = function (expr) {
 
 export default {
     name: "unit-input",
-    displayName: "Unit",
+    displayName: "Unit input",
     defaultAlignment: "inline-block",
     widget: OldUnitInput,
     transform: (x: any): any => lens(x).del(["value"]).freeze(),
diff --git a/testing/test-dependencies.tsx b/testing/test-dependencies.tsx
index 39a948c8ac..7cf38c594f 100644
--- a/testing/test-dependencies.tsx
+++ b/testing/test-dependencies.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 
 import {registerAllWidgetsForTesting} from "../packages/perseus/src/util/register-all-widgets-for-testing";
 
-import {TestTeX} from "./test-tex";
+import {TestMathjax} from "./test-mathjax";
 
 import type {ILogger} from "../packages/perseus/src/logging/log";
 import type {
@@ -121,7 +121,7 @@ export const testDependenciesV2: PerseusDependenciesV2 = {
 
 export const storybookTestDependencies: PerseusDependencies = {
     ...testDependencies,
-    TeX: TestTeX,
+    TeX: TestMathjax,
     // $FlowIgnore[incompatible-type]
     staticUrl: (str) => str,
 };
@@ -133,7 +133,7 @@ export const storybookDependenciesV2: PerseusDependenciesV2 = {
 
 export const cypressTestDependencies: PerseusDependencies = {
     ...testDependencies,
-    TeX: TestTeX,
+    TeX: TestMathjax,
     // $FlowIgnore[incompatible-type]
     staticUrl: (str) => str,
 };
diff --git a/testing/test-mathjax.tsx b/testing/test-mathjax.tsx
new file mode 100644
index 0000000000..4ba956d7b2
--- /dev/null
+++ b/testing/test-mathjax.tsx
@@ -0,0 +1,33 @@
+import {MathJaxRenderer} from "@khanacademy/mathjax-renderer";
+import * as React from "react";
+import "@khanacademy/mathjax-renderer/src/css/mathjax.css";
+
+// if you want \text{} to look good on Safari:
+import "@khanacademy/mathjax-renderer/src/css/safari-hacks.css";
+
+// if you want copy-paste support:
+import "@khanacademy/mathjax-renderer/src/css/selectable.css";
+
+const renderer = new MathJaxRenderer({
+    // shouldFixUnicodeLayout ensures that non-ASCII text is correctly
+    // measured and positioned in e.g. \overbrace and \underbrace expressions.
+    // Set shouldFixUnicodeLayout to false if you're rendering in an
+    // environment without a layout engine, e.g. jsdom.
+    shouldFixUnicodeLayout: true,
+    fontURL: "https://cdn.kastatic.org/fonts/mathjax",
+});
+
+type Props = {
+    children: string;
+    onRender?: (root?: any) => unknown;
+};
+
+export function TestMathjax({children: tex, onRender}: Props) {
+    const {domElement} = renderer.render(tex);
+
+    React.useEffect(() => {
+        renderer.updateStyles();
+        onRender?.();
+    }, [tex, onRender]);
+    return <span dangerouslySetInnerHTML={{__html: domElement.outerHTML}} />;
+}
diff --git a/testing/test-tex.tsx b/testing/test-tex.tsx
deleted file mode 100644
index b469f271c4..0000000000
--- a/testing/test-tex.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
-import katex from "katex";
-import renderA11yString from "katex/dist/contrib/render-a11y-string";
-import * as React from "react";
-import "katex/dist/katex.css";
-
-import type {PerseusDependencies} from "../packages/perseus/src/types";
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-
-type Props = PropsFor<PerseusDependencies["TeX"]>;
-
-/**
- * A test version of TeX that can be used in tests and doesn't rely on
- * any webapp/mobile dependencies.  Math is rendered synchronously using
- * renderToString/renderA11yString.  If KaTeX can't process `children`
- * an empty string is rendered instead.
- */
-export const TestTeX = (props: Props): React.ReactElement => {
-    const {children, katexOptions, onRender} = props;
-
-    const katexHtml = React.useMemo(() => {
-        try {
-            return katex.renderToString(children, katexOptions || {});
-        } catch (e: any) {
-            return "";
-        }
-    }, [children, katexOptions]);
-    const katexA11yHtml = React.useMemo(() => {
-        try {
-            return renderA11yString(children);
-        } catch (e: any) {
-            return "";
-        }
-    }, [children]);
-
-    const ids = useUniqueIdWithMock();
-    const describedById = `katex-${ids.get("described-by-id")}`;
-
-    React.useEffect(() => {
-        if (onRender) {
-            onRender();
-        }
-        // NOTE(kevinb): We intentionally leave the deps list empty here
-        // since we want this code to only run once on mount.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return (
-        <span style={props.style} onClick={props.onClick}>
-            <span
-                style={{
-                    // Disabling wrapping allows to measure the full
-                    // width of the rendered expression. Enabling to
-                    // scale it to fit to screen, see: zoomable-tex.jsx
-                    whiteSpace: "nowrap",
-                }}
-                dangerouslySetInnerHTML={{
-                    __html: katexHtml,
-                }}
-                aria-hidden={!!katexA11yHtml}
-                aria-describedby={describedById}
-            />
-            {/*
-             * If we generated readable english text, it goes here.
-             * The srOnly styles will prevent it from being displayed
-             * visually.
-             */}
-            <span
-                dangerouslySetInnerHTML={{
-                    __html: katexA11yHtml,
-                }}
-                id={describedById}
-                style={srOnly}
-            />
-        </span>
-    );
-};
-
-const srOnly = {
-    border: 0,
-    clip: "rect(0,0,0,0)",
-    height: "1px",
-    margin: "-1px",
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    width: "1px",
-} as const;
diff --git a/yarn.lock b/yarn.lock
index bd6069239a..2b363aefd9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2399,103 +2399,125 @@
     "@typescript-eslint/utils" "^5.60.1"
     checksync "^5.0.0"
 
-"@khanacademy/wonder-blocks-breadcrumbs@^2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-breadcrumbs/-/wonder-blocks-breadcrumbs-2.1.9.tgz#e108db17a44c0ad67800bf09495f544521d31fc6"
-  integrity sha512-v4iDPlPBsP6nM0vcjeRP629XOS1UrENEbLtvIAC5fRtoToFrFZQ8Gl66EqR6k9BJps1B6dKZG6byVldmO7OTKQ==
+"@khanacademy/mathjax-renderer@git+ssh://git@github.com:Khan/mathjax-renderer.git#v1.5.0":
+  version "1.5.0"
+  resolved "git+ssh://git@github.com:Khan/mathjax-renderer.git#3277aaa03f743942a2f585ea8be76384d723dbba"
+  dependencies:
+    mathjax-full "3.2.2"
+    mu-lambda "^0.0.3"
+
+"@khanacademy/wonder-blocks-banner@^3.0.33":
+  version "3.0.34"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-banner/-/wonder-blocks-banner-3.0.34.tgz#b19e7b6757d9ce94eb0882189a75f94d15b9aa16"
+  integrity sha512-QlpU4ko1TVupLe6KwkvLgFCZq8PJMCrJSthgX7n9bmtGr3aj8/G2sPzurGThhKQQNh46cpA3vth0FAx0+y/GAg==
+  dependencies:
+    "@babel/runtime" "^7.18.6"
+    "@khanacademy/wonder-blocks-button" "^6.2.5"
+    "@khanacademy/wonder-blocks-color" "^3.0.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
+    "@khanacademy/wonder-blocks-icon-button" "^5.1.8"
+    "@khanacademy/wonder-blocks-link" "^6.0.5"
+    "@khanacademy/wonder-blocks-spacing" "^4.0.1"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
+
+"@khanacademy/wonder-blocks-breadcrumbs@^2.1.10":
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-breadcrumbs/-/wonder-blocks-breadcrumbs-2.1.10.tgz#c09c65ee3eedc722c5398c07a967d22382df305f"
+  integrity sha512-qKzNqwQnAoiAl72xTwNrr1Zi4tIkV4KMlVmg7osEwQkH5KQe3k4rQhBZ3QLcZ4xzlLoNzfnAZuvfedjlcF+jDA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
 
-"@khanacademy/wonder-blocks-button@6.2.4", "@khanacademy/wonder-blocks-button@^6.2.4":
-  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-button/-/wonder-blocks-button-6.2.4.tgz#d0cf5c438db343dd0247cb84d3ddea116732adb9"
-  integrity sha512-WIfdl6AEyTNM9jk/78RfGXA+nlaHKz3Q/UM2lW6r7wqUw51HUGZcB2JI9fo/NMKLT+mgjqHPmnEG4nkwuT2mwA==
+"@khanacademy/wonder-blocks-button@6.2.5", "@khanacademy/wonder-blocks-button@^6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-button/-/wonder-blocks-button-6.2.5.tgz#d894e712650995ddcd349a149d5163854a9f2006"
+  integrity sha512-K0ol62/rpn4mXa9p2WEqBP79UYNwvSv+qejsd27uW54TkSEUm0k4IrnrAUNyKKbUWDnmVqitGMgQXYmWCrsvDA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-clickable" "^4.0.11"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon" "^4.0.0"
-    "@khanacademy/wonder-blocks-progress-spinner" "^2.0.24"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
+    "@khanacademy/wonder-blocks-progress-spinner" "^2.0.25"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
-"@khanacademy/wonder-blocks-cell@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-cell/-/wonder-blocks-cell-3.1.0.tgz#388ba70f89169d1443701f83338fcc29d9ac5e80"
-  integrity sha512-uJODYl8EBAKVNVJk3lGunDONAL9Ej9jFDsoOUEQP9XTAFDp8oaLBwwOoAOnLO+Q9xT+or1HWGfXVpv2/QPRpxA==
+"@khanacademy/wonder-blocks-cell@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-cell/-/wonder-blocks-cell-3.2.0.tgz#e16d853142036de472f39eda90a199ff405147c8"
+  integrity sha512-vImyzzRkepJuXG9y3+DoiYUnaQLBcX48psoVQ9fgQJ5mjpH4QkLS37u1EfsbM78DCBK043xsj8v61bzKQKnRJg==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-clickable" "^4.0.11"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-layout" "^2.0.24"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-layout" "^2.0.25"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
-"@khanacademy/wonder-blocks-clickable@^4.0.11":
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-clickable/-/wonder-blocks-clickable-4.0.11.tgz#6529b6d1f68b18c50e149db8a649cd94ba26414e"
-  integrity sha512-gIbaAMdk2E6cg7v9+D2JD7bLw74b8IK6YZyvVi87MSJ8b5rquZCUdAFA8rJfZsvIG5V3PZxSvc5BPmgLtKDv6A==
+"@khanacademy/wonder-blocks-clickable@^4.0.12":
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-clickable/-/wonder-blocks-clickable-4.0.12.tgz#f47c8daca15a34f5ace8cc9e502657786f3bb4ec"
+  integrity sha512-JfvTEJjIKYyHfF24D7RdQpM70gTqiNo9GDcUi+1ANlMCy80WLw/QDg3s8W9jEPBCgKS8hO4muu7vJMkdvRsq5g==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
 
 "@khanacademy/wonder-blocks-color@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-color/-/wonder-blocks-color-3.0.0.tgz#0742a6389920be1e59c3beec88093a189cec69b9"
   integrity sha512-WpJ1X1lLU0luGl0DUuNNKhInaqUiiYOLqbSxyWS2GViRrWv6tOmF2nDSe7kumAsN1qgjLh684e3Sb92l8oZhXQ==
 
-"@khanacademy/wonder-blocks-core@^6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-core/-/wonder-blocks-core-6.3.0.tgz#f49876acf66d8ce885b34fcf0e15f24108a8bcbb"
-  integrity sha512-8wfMOX5YvinA0vxIXKWlXPBzOmmqNCA2OtTCuqMs9gCkOB8kdahbkyTVoK49u9sUJHLcgrOiRA6ikZFPJFijyQ==
+"@khanacademy/wonder-blocks-core@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-core/-/wonder-blocks-core-6.3.1.tgz#7be9ee3a6505f5abc06ce62bb4649081eac3b613"
+  integrity sha512-T20WnRH2Ne7HbOEn6iBGdnca1rH+rqgVZPA6lfWCLiYN48e0kZDkM7uZBtTAWBCKXD0wD++/cYQ5mn5a9S63uQ==
   dependencies:
     "@babel/runtime" "^7.18.6"
 
-"@khanacademy/wonder-blocks-data@^13.0.5":
-  version "13.0.5"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-data/-/wonder-blocks-data-13.0.5.tgz#e24f1b7e979f848973ee6930d05b75142104e6ab"
-  integrity sha512-KwLcc9iyVzUNzmyy9xR9uJClLbu+YPj/3HoVoQJPEpAdo81+Fth2s+wieVnPz+QA4z7nXklNIG+SUpohzU0YTg==
+"@khanacademy/wonder-blocks-data@^13.0.6":
+  version "13.0.6"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-data/-/wonder-blocks-data-13.0.6.tgz#5eea792ca9eae20d15f175206196f8d9a07b2696"
+  integrity sha512-hOnIT8CyiB7O+pETq7pEG/Onerx15WgcMvgkLeQInjDiioXdYYkP70H3Pbnau0WpTUyye5L/3LaS7ckaeQprDA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
 
-"@khanacademy/wonder-blocks-dropdown@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-dropdown/-/wonder-blocks-dropdown-4.0.0.tgz#dbc9601fef3fa5216e0f71feab0eb14cd27ac216"
-  integrity sha512-/DT1qLuh291mW26a1jdYHVHB+vDpm3Kwl1EAilOUGGKV6s9omf6UdaoQrdTuotUnKTVaGu8CXZM3nq/WjXfa3A==
+"@khanacademy/wonder-blocks-dropdown@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-dropdown/-/wonder-blocks-dropdown-5.1.0.tgz#f591cd47c2425346d0220025f3d59660173fbe0b"
+  integrity sha512-d4iX5IGLe2S+/g7kZZ3apsnlsmKcFLn+Pj6bzr7ZACbaDoINaYtARdm4geN30zXtdFt1tED3XjJabFYsA0pERA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-cell" "^3.1.0"
-    "@khanacademy/wonder-blocks-clickable" "^4.0.11"
+    "@khanacademy/wonder-blocks-cell" "^3.2.0"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon" "^4.0.0"
-    "@khanacademy/wonder-blocks-layout" "^2.0.24"
-    "@khanacademy/wonder-blocks-modal" "^4.0.38"
-    "@khanacademy/wonder-blocks-search-field" "^2.1.25"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
+    "@khanacademy/wonder-blocks-layout" "^2.0.25"
+    "@khanacademy/wonder-blocks-modal" "^4.2.0"
+    "@khanacademy/wonder-blocks-search-field" "^2.1.26"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
     "@khanacademy/wonder-blocks-theming" "1.2.1"
     "@khanacademy/wonder-blocks-timing" "^4.0.2"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
-"@khanacademy/wonder-blocks-form@^4.3.18":
-  version "4.3.18"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-form/-/wonder-blocks-form-4.3.18.tgz#51f9ebfce7fce8db2303efbc6aacc375cbef00eb"
-  integrity sha512-o0RoIU7aDgLDC90SpCKsnp6zSEEm+8UbH6BGTxEk36APQVA6dUQ7wveba7Dq6ZqnZZIdY9xKJlWIyJEK2xRBPg==
+"@khanacademy/wonder-blocks-form@^4.3.19":
+  version "4.3.19"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-form/-/wonder-blocks-form-4.3.19.tgz#eb3396c33a5d0bcdcd67ee29f1263b31566a58da"
+  integrity sha512-T3VTRLjszVeONMIdB/Lk0wpINMRkmTDhpluwZZ/MrvtUXSDaseCpfD0swmk4CF0JNoP8ian7Ti8ZG3Aw2Q4JXA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-clickable" "^4.0.11"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon" "^4.0.0"
-    "@khanacademy/wonder-blocks-layout" "^2.0.24"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
+    "@khanacademy/wonder-blocks-layout" "^2.0.25"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
 "@khanacademy/wonder-blocks-i18n@^2.0.2":
   version "2.0.2"
@@ -2504,123 +2526,135 @@
   dependencies:
     "@babel/runtime" "^7.18.6"
 
-"@khanacademy/wonder-blocks-icon-button@^5.1.6":
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-icon-button/-/wonder-blocks-icon-button-5.1.6.tgz#b307e74eb38f5207c90396b19148ba35151e97c5"
-  integrity sha512-wfnDwrSdjs27ZdeKVSLIaJBD/aC4/qffi3ij5+eovUjSf86nlkmam8C58/JJxijIDJraDuua+5qtaqsQCYdbxg==
+"@khanacademy/wonder-blocks-icon-button@^5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-icon-button/-/wonder-blocks-icon-button-5.1.7.tgz#dc2548aec46ce7a04c4fb0dd39b70ff26a56eaeb"
+  integrity sha512-ywnXmVtmW2LTd16XROKK2Ah/LSTchteqsUtQkAiiR5WsMa1qOX3gqvGL7S3l1PzvV2UeqPX/s+UiWZ+rKRZGXA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-clickable" "^4.0.11"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon" "^4.0.0"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
     "@khanacademy/wonder-blocks-theming" "^1.2.1"
 
-"@khanacademy/wonder-blocks-icon@4.0.0", "@khanacademy/wonder-blocks-icon@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-icon/-/wonder-blocks-icon-4.0.0.tgz#5610e109b3fac414e4a1d40af5dac78908205a57"
-  integrity sha512-X4d21Fo110Q6+jphqIjyx44bDJEUbaWXr3yacSfexLYBk4h2UXypeqkCj4ttdw2f+w3gvBqnCKOZH+mclgT3fA==
+"@khanacademy/wonder-blocks-icon-button@^5.1.8":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-icon-button/-/wonder-blocks-icon-button-5.1.8.tgz#5652452b05e8bca9b5008af9a0c9063718da409a"
+  integrity sha512-ddhiwvEi7o5MSzMuZYbwJM2g0oPk6tX2opk6hFyXKQtgiXCqLIF3zPMzzPXLhfkWdfDQVDwGrpSCTZRI2VAYeQ==
+  dependencies:
+    "@babel/runtime" "^7.18.6"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
+    "@khanacademy/wonder-blocks-theming" "^1.3.0"
+
+"@khanacademy/wonder-blocks-icon@4.0.1", "@khanacademy/wonder-blocks-icon@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-icon/-/wonder-blocks-icon-4.0.1.tgz#2c72b2c6506309796f50b4f11a85f4f18e60b164"
+  integrity sha512-dKoxjAjevWBZ1QN7fcXEB7gwS20+sOuHAFNF2ogm8eBQe5rTT0b4oXunsQW5C4iNMGelW/FbVNscnV8Q9fXjiA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
 
-"@khanacademy/wonder-blocks-layout@^2.0.24":
-  version "2.0.24"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-layout/-/wonder-blocks-layout-2.0.24.tgz#70ffd3ca025690effac1fd400b83e2462cc75c88"
-  integrity sha512-kDfXMpGSVbRsigLXqyn5twGFDGoMRo0MnXhV7Xn5bpPKYQ6mPt49yCz1QeQ77bwfsPDsbm1hUSQANjr16LSkGg==
+"@khanacademy/wonder-blocks-layout@^2.0.25":
+  version "2.0.25"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-layout/-/wonder-blocks-layout-2.0.25.tgz#b3792634cbe35bbaed7c18b6f4a5e025fb04d4fd"
+  integrity sha512-7Csrc672F4fqWP1RGNG91fJoIyc1wdnL9YSDj6It8MD8NutQwaYYlgNyUFhTOe05kxY7tvXzuPUIsijy9oYm6g==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
 
-"@khanacademy/wonder-blocks-link@^6.0.4":
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-link/-/wonder-blocks-link-6.0.4.tgz#dc818b2263b8900ccc1387875745da4ef364a60d"
-  integrity sha512-aj/enYNCVBV1SKIelNEVCPmH/IIt2WNTK9SVltCFjrC6l5JMi2x1w9Qy/4QhnNQGVfM9zr0WIQFXPuiupGrcbw==
+"@khanacademy/wonder-blocks-link@^6.0.5":
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-link/-/wonder-blocks-link-6.0.5.tgz#f89fac54a7b941e9ed0a68c439feb960c5f44926"
+  integrity sha512-jrGeDn70M6A/HdgG+SploON8hWvG8bz1a18XEugPaDtOocV03tsRB1vsDbzHM4HJfiuTWBvP4UfcDOozqP57Sw==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-clickable" "^4.0.11"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon" "^4.0.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
 
-"@khanacademy/wonder-blocks-modal@^4.0.38":
-  version "4.0.38"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-modal/-/wonder-blocks-modal-4.0.38.tgz#10e366c74d455d23a38c03b28417fd8707bb20c0"
-  integrity sha512-OeIZbb/x/n6jP57OYd4HM2l0A9N9F+Smhb2x8nEtNGlVLcPlUbn2ISfNR0twu2sJe7LOzQ8O7/N49qWxRnjuvQ==
+"@khanacademy/wonder-blocks-modal@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-modal/-/wonder-blocks-modal-4.2.0.tgz#d84599113b6242d0ce3b43a3fd2fb957e2c0f4ea"
+  integrity sha512-jNLKg6bfvXoLDhHBUos8dASHt+yDeppnTYUOcXH92bzyIEfHX0Y9dp5Y9B1th3xRFdedOYokqoora7hCKPbEWQ==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-breadcrumbs" "^2.1.9"
+    "@khanacademy/wonder-blocks-breadcrumbs" "^2.1.10"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon-button" "^5.1.6"
-    "@khanacademy/wonder-blocks-layout" "^2.0.24"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon-button" "^5.1.7"
+    "@khanacademy/wonder-blocks-layout" "^2.0.25"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
+    "@khanacademy/wonder-blocks-theming" "^1.2.1"
     "@khanacademy/wonder-blocks-timing" "^4.0.2"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
-"@khanacademy/wonder-blocks-pill@^1.0.14":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-pill/-/wonder-blocks-pill-1.0.14.tgz#3d061b537596974dced1616ffa25fae18f79bb74"
-  integrity sha512-L2s5kXvu8c+dSxp5UF4PPLvKDAv/AEVA3ZXXUn3I+TPmhOwEynGuR+mSc+5qFptqooVhDEpqVdqoFzUUY3q8Ig==
+"@khanacademy/wonder-blocks-pill@^1.0.15":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-pill/-/wonder-blocks-pill-1.0.15.tgz#543804fce0baf7e7d8a8af0c9d2954e62523fb5f"
+  integrity sha512-TWV/aG9FAmcAhUcwhXSLChIeE8uPG17mzM3AEhG9Az3+LTipWfGuJBxSYcvQDFVUGDigniC5vUU1pikgUYeTWQ==
   dependencies:
-    "@khanacademy/wonder-blocks-clickable" "^4.0.11"
+    "@khanacademy/wonder-blocks-clickable" "^4.0.12"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-link" "^6.0.4"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-link" "^6.0.5"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
-"@khanacademy/wonder-blocks-popover@^3.0.19":
-  version "3.0.19"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-popover/-/wonder-blocks-popover-3.0.19.tgz#fa82021a0f66a88f9edeafa4b79eec0fb6e6cc9e"
-  integrity sha512-FGzV1QLTWdcZk8xBLmhPLOtVSPl5l4jN5cuUZG4+H7HPg8Xfd2njWFwZGHUoY7h77z62zLDVIgWLO5jCsT5ibw==
+"@khanacademy/wonder-blocks-popover@^3.0.22":
+  version "3.0.22"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-popover/-/wonder-blocks-popover-3.0.22.tgz#bf878c706aa237703a1db69b5376e701104d8ea6"
+  integrity sha512-9zirA8jVwIKGpKThpGItLTqV4n2eJbkR+bYPsw6gWR3bPshohaIglpAeSDFsRi0SzXbGJgHT1paxxcemlww8Ww==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon-button" "^5.1.6"
-    "@khanacademy/wonder-blocks-modal" "^4.0.38"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon-button" "^5.1.7"
+    "@khanacademy/wonder-blocks-modal" "^4.2.0"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
-    "@khanacademy/wonder-blocks-tooltip" "^2.1.21"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-tooltip" "^2.1.24"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
-"@khanacademy/wonder-blocks-progress-spinner@^2.0.24":
-  version "2.0.24"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-progress-spinner/-/wonder-blocks-progress-spinner-2.0.24.tgz#bc9028a0f4a71f5e6ed1f6e422a630a354d78c50"
-  integrity sha512-YWHFq6Y8rBeXj5uKScrYwYt+mrofafSFEzA04X2VwZ60p0BrAYi66hJcqTQfWoUA50aW1EPEDUwDMW910fO8+Q==
+"@khanacademy/wonder-blocks-progress-spinner@^2.0.25":
+  version "2.0.25"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-progress-spinner/-/wonder-blocks-progress-spinner-2.0.25.tgz#c9c66bced3f8a9a5549b2e6c1f2ab11993746c8b"
+  integrity sha512-cz8jJFtr0fdKsD1lAU1pPWNyaeZJmjjSnvdidlN6BAgZ/ptu2Jnex2vPHHR3bN5H4U9BFPDyg2wz4CWKCeGJBw==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
 
-"@khanacademy/wonder-blocks-search-field@^2.1.25":
-  version "2.1.25"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-search-field/-/wonder-blocks-search-field-2.1.25.tgz#56f68d86fb568e1c6315640bc0c28b54e923d40c"
-  integrity sha512-Rh1BU+JPAddfa6VX2RUeAohHul/pnMpDxD7ATCI45I+vuwQ9Tu3pypeQWcS4ljhXPzdadR06G7v6TqE3wgQ6bw==
+"@khanacademy/wonder-blocks-search-field@^2.1.26":
+  version "2.1.26"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-search-field/-/wonder-blocks-search-field-2.1.26.tgz#ce3c119140e278013a2d9b47ad45c4048cb16f80"
+  integrity sha512-4vCstRQIX15ixEUQZ3fKwMiBo+/UQ73nKoY5LcOOmSz8fjlrnINw6gpmJ6CGJlwva3cefVEASVPxzs5lhUdeCg==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-form" "^4.3.18"
-    "@khanacademy/wonder-blocks-icon" "^4.0.0"
-    "@khanacademy/wonder-blocks-icon-button" "^5.1.6"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-form" "^4.3.19"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
+    "@khanacademy/wonder-blocks-icon-button" "^5.1.7"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
 "@khanacademy/wonder-blocks-spacing@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-spacing/-/wonder-blocks-spacing-4.0.1.tgz#2c23ebe8dc4819910886be9db142df80e366bac9"
   integrity sha512-do4UUHxC1/YveLfEfuS36ehVlZi7wImASX3orrLpzGoYFZRTjbEmmW6gN46UdW9jEy3e5fv0f5WUpded3ZtWIw==
 
-"@khanacademy/wonder-blocks-switch@^1.1.8":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-switch/-/wonder-blocks-switch-1.1.8.tgz#a75995b82e5b8f32270311f56723bd90bbcf5ae2"
-  integrity sha512-imb/8f6TTztmOZ5nRchWQkIzJdZ6RYwcuglBBULV1lo85WCCOkFW4aUD9GQYA6MFgnP95RnVVpxBDv82yq10aw==
+"@khanacademy/wonder-blocks-switch@^1.1.9":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-switch/-/wonder-blocks-switch-1.1.9.tgz#d75b228226c472ef505568efbec7e65520aebe6c"
+  integrity sha512-DkQT4ZrmPFEHwYdYaoe6a/WGH9sWddlvFGfGIwi7q17grCdyaSZFORbWlO0s85RDSHw6RZ0K8GHIkjosy0IvoA==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-icon" "^4.0.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-icon" "^4.0.1"
     "@khanacademy/wonder-blocks-theming" "^1.2.1"
 
 "@khanacademy/wonder-blocks-theming@1.2.1", "@khanacademy/wonder-blocks-theming@^1.2.1":
@@ -2631,31 +2665,39 @@
     "@khanacademy/wonder-blocks-color" "^3.0.0"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
 
+"@khanacademy/wonder-blocks-theming@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-theming/-/wonder-blocks-theming-1.3.0.tgz#33b252780957e96cebe623eb0e7ec56574362647"
+  integrity sha512-N0UHn1B3ujeJDpwB5ph5896lKLjZM/Iyrt5FHDMPcLpN68m7gin3B8WghYK845mpE7jqiEY/j9XRYkbWmRVMeQ==
+  dependencies:
+    "@khanacademy/wonder-blocks-color" "^3.0.0"
+    "@khanacademy/wonder-blocks-spacing" "^4.0.1"
+
 "@khanacademy/wonder-blocks-timing@^4.0.2":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-timing/-/wonder-blocks-timing-4.0.2.tgz#84fa99a905f0558a70e493af44a3a6885ddb844c"
   integrity sha512-LIj31jodAXOi7Yj+QJyRLTCiO4/cPDCR8DSqZbNuA/vliRuePfOjX3ci4BMhnuSyEIu1bTorvcEeASTe/M52hw==
 
-"@khanacademy/wonder-blocks-tooltip@^2.1.21":
-  version "2.1.21"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-tooltip/-/wonder-blocks-tooltip-2.1.21.tgz#2151856a3131c96c9a0fce25a4b2f16f7ef5cc1d"
-  integrity sha512-DAJbPZU2DhrJcjJbAPNTqRpnv3jKn/8y9a4XJQrDngxUiz07NGrKbF/8UjjkJcczLEBO/XF4T16tOinH4q8hFg==
+"@khanacademy/wonder-blocks-tooltip@^2.1.24":
+  version "2.1.24"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-tooltip/-/wonder-blocks-tooltip-2.1.24.tgz#0fefb8c6acf08532e12a84ae862731d6e79cb2ab"
+  integrity sha512-V5O4BLKSlPH5EzH6gD+/EwiWGzYTGwtErZMmFTQKBADw9g/4R8AjqT8HCwi7wCfYPPILZ6K24Jwg8v8lbuuu9Q==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@khanacademy/wonder-blocks-color" "^3.0.0"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
-    "@khanacademy/wonder-blocks-layout" "^2.0.24"
-    "@khanacademy/wonder-blocks-modal" "^4.0.38"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
+    "@khanacademy/wonder-blocks-layout" "^2.0.25"
+    "@khanacademy/wonder-blocks-modal" "^4.2.0"
     "@khanacademy/wonder-blocks-spacing" "^4.0.1"
-    "@khanacademy/wonder-blocks-typography" "^2.1.9"
+    "@khanacademy/wonder-blocks-typography" "^2.1.10"
 
-"@khanacademy/wonder-blocks-typography@^2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-typography/-/wonder-blocks-typography-2.1.9.tgz#c4c1c5102e3e2e0b4d6c0f2b60f0b415f9b5e614"
-  integrity sha512-uEjq9nuYm/JETWiZOz2jYSySp/kf1uGIWzMDhZE7lPdnHIqFrE4d9QjP9cIeY3MDxGyEGMdCfAV76hvMgwPpAQ==
+"@khanacademy/wonder-blocks-typography@^2.1.10":
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/@khanacademy/wonder-blocks-typography/-/wonder-blocks-typography-2.1.10.tgz#25ebb306096c3ffbc32884de391aa528eb4c382c"
+  integrity sha512-vk5hq4NPzu+WAMmfSzkCozxLGLqH6dbvVaNBSF0o9nIWPPqvCikWLeThvD/G7u2LgKBXBHBPhirg5CW/Zt9Ccg==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@khanacademy/wonder-blocks-core" "^6.3.0"
+    "@khanacademy/wonder-blocks-core" "^6.3.1"
 
 "@khanacademy/wonder-stuff-core@^1.5.1":
   version "1.5.1"
@@ -6857,6 +6899,11 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.2.0.tgz#6e21014b2ed90d8b7c9647230d8b7a94a4a419a9"
+  integrity sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==
+
 commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -8567,6 +8614,11 @@ eslint@^8.40.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+esm@^3.2.25:
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
+  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
+
 espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
@@ -12297,6 +12349,16 @@ markdown-to-jsx@^7.1.8:
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz#f286b4d112dad3028acc1e77dfe1f653b347e131"
   integrity sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==
 
+mathjax-full@3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/mathjax-full/-/mathjax-full-3.2.2.tgz#43f02e55219db393030985d2b6537ceae82f1fa7"
+  integrity sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==
+  dependencies:
+    esm "^3.2.25"
+    mhchemparser "^4.1.0"
+    mj-context-menu "^0.6.1"
+    speech-rule-engine "^4.0.6"
+
 "mathquill@git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc":
   version "0.10.1"
   resolved "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc"
@@ -12393,6 +12455,11 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
+mhchemparser@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/mhchemparser/-/mhchemparser-4.2.1.tgz#d73982e66bc06170a85b1985600ee9dabe157cb0"
+  integrity sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ==
+
 micromatch@^3.1.10:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -12611,6 +12678,11 @@ mixme@^0.5.1:
   resolved "https://registry.yarnpkg.com/mixme/-/mixme-0.5.4.tgz#8cb3bd0cd32a513c161bf1ca99d143f0bcf2eff3"
   integrity sha512-3KYa4m4Vlqx98GPdOHghxSdNtTvcP8E0kkaJ5Dlh+h2DRzF7zpuVVcA8B0QpKd11YJeP9QQ7ASkKzOeu195Wzw==
 
+mj-context-menu@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/mj-context-menu/-/mj-context-menu-0.6.1.tgz#a043c5282bf7e1cf3821de07b13525ca6f85aa69"
+  integrity sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==
+
 mkdirp-classic@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
@@ -12648,6 +12720,11 @@ ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mu-lambda@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/mu-lambda/-/mu-lambda-0.0.3.tgz#3b4f1a5bc8f6cf3e6d3a3f3d35df91d4c09651ce"
+  integrity sha512-t5mnn/RizL/UCERDxqFQyIEMhjAbq+xohNW/hZzL40NRxkhmXIlDyjK59tj41ltPgXOtpE/w1wAiqvnOhF13og==
+
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
@@ -15661,6 +15738,15 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+speech-rule-engine@^4.0.6:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/speech-rule-engine/-/speech-rule-engine-4.0.7.tgz#b655dacbad3dae04acc0f7665e26ef258397dd09"
+  integrity sha512-sJrL3/wHzNwJRLBdf6CjJWIlxC04iYKkyXvYSVsWVOiC2DSkHmxsqOhEeMsBA9XK+CHuNcsdkbFDnoUfAsmp9g==
+  dependencies:
+    commander "9.2.0"
+    wicked-good-xpath "1.3.0"
+    xmldom-sre "0.1.31"
+
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
@@ -17172,6 +17258,11 @@ which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
 
+wicked-good-xpath@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz#81b0e95e8650e49c94b22298fff8686b5553cf6c"
+  integrity sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw==
+
 wide-align@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
@@ -17316,6 +17407,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmldom-sre@0.1.31:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/xmldom-sre/-/xmldom-sre-0.1.31.tgz#10860d5bab2c603144597d04bf2c4980e98067f4"
+  integrity sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==
+
 xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"