@khanacademy/perseus 0.4.3 → 1.1.0

package/dist/es/index.js

@@ -5,6 +5,7 @@ import { Rule, linterContextDefault, linterContextProps } from '@khanacademy/per
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import classNames from 'classnames';
 import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
 import _, { debounce } from 'underscore';
 import PropTypes from 'prop-types';
 import $ from 'jquery';
@@ -31,7 +32,7 @@ import Link from '@khanacademy/wonder-blocks-link';
 
 var version = {
   apiVersion: {
-    major: 11,
+    major: 12,
     minor: 0
   },
   itemDataVersion: {
@@ -493,38 +494,9 @@ var ApiOptions = {
     //     values. For now, though, you must either specify all fields
     //     of `styling`, or omit the `styling` option entirely.
     styling: PropTypes.shape({
-      // Which version of radio widget styles to use in non-SAT
-      // contexts.
-      //
-      // "legacy" was the version of the widget display after XOM but
-      // before we started adding MCR styles. It doesn't have support
-      // for rationales. It has since been removed.
-      //
-      // "intermediate" is a design which adds several new additions
-      // to the "legacy" styles such as:
-      //  1. Using the XOM "desktop" styles (with a visible check icon
-      //     and lines in between choices) on mobile devices.
-      //  2. Designs for rationales
-      //  3. Using the single-select styles for multi-select styles
-      //
-      // "final" is a design which will build off of the
-      // "intermediate" designs and adds some improved designs as well
-      // as:
-      //  1. a/b/c/d/etc. letters inside of the prompt check box
-      //  2. New iconography and styles to indicate choice correctness
-      //
-      // The "legacy" and "intermediate" designs will be A/B tested
-      // against each other to ensure that its changes don't cause
-      // problems due to the new designs. Once the "intermediate"
-      // designs are finished, they will be A/B tested against the
-      // "final" designs.
-      //
-      // If no flag is provided, "legacy" styles will be shown.
-      //
-      // TODO(emily): Remove this by Aug 1, 2017, at which point all
-      //   callsites should have been switched to using the "final"
-      //   designs.
-      radioStyleVersion: PropTypes.oneOf(["intermediate", "final"])
+      // TODO(Nicole): Remove this after landing wonderblock-ifying
+      // the radio widget
+      primaryProductColor: PropTypes.string
     }),
     // The color used for the hint progress indicator (eg. 1 / 3)
     hintProgressColor: PropTypes.string,
@@ -575,9 +547,7 @@ var ApiOptions = {
     },
     setDrawingAreaAvailable: function setDrawingAreaAvailable() {},
     useDraftEditor: false,
-    styling: {
-      radioStyleVersion: "final"
-    },
+    styling: {},
     canScrollPage: false,
     inModal: false,
     crossOutEnabled: false,
@@ -1506,8 +1476,7 @@ var KhanAnswerTypes = {
    */
   number: {
     convertToPredicate: function convertToPredicate(correctAnswer, options) {
-      // TODO(alpert): Don't think this $.trim is necessary
-      var correctFloat = parseFloat($.trim(correctAnswer));
+      var correctFloat = parseFloat(correctAnswer);
       return [function (guess, maxError) {
         return Math.abs(guess - correctFloat) < maxError;
       }, $.extend({}, options, {
@@ -1701,16 +1670,10 @@ function inputPathsEqual(a, b) {
   return a.length === b.length && a.every((item, index) => {
     return b[index] === item;
   });
-} // Keep `rWidgetRule` in sync with `WIDGET_RE`
-// in content_internal/perseus_traversal.py
-// sync-start:widget-id-regex 1271666319 services/content-editing/perseus/translation/content_traversal.go
-// sync-start:widget-id-regex 680240484 services/static/javascript/perseus-merged-editor-package/editor.jsx
-// sync-start:widget-id-regex 1400368396 content_internal/perseus_traversal.py
-
+}
 
 var rWidgetRule = /^\[\[\u2603 (([a-z-]+) ([0-9]+))\]\]/;
-var rTypeFromWidgetId = /^([a-z-]+) ([0-9]+)$/; // sync-end:widget-id-regex
-
+var rTypeFromWidgetId = /^([a-z-]+) ([0-9]+)$/;
 var rWidgetParts = new RegExp(rWidgetRule.source + "$");
 var snowman = "\u2603";
 var noScore = {
@@ -3143,11 +3106,10 @@ var warningColor = "#f86700";
 var warningColorHover = "#df5c00";
 var warningColorActive = "#c75300";
 var publishBlockingErrorColor = "#be2612";
-var radioBorderColor$2 = "#BABEC2";
-var checkedColor$1 = "#71B307"; // sync-start:article-max-width 986452807 services/static/javascript/perseus-all-package/styles/variables.less
-
+var radioBorderColor$1 = "#BABEC2";
+var checkedColor$1 = "#71B307";
 var articleMaxWidthInPx = 688;
-var articleMaxWidthTableInPx = 512; // sync-end:article-max-width
+var articleMaxWidthTableInPx = 512;
 
 var constants$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3212,7 +3174,7 @@ var constants$1 = /*#__PURE__*/Object.freeze({
     warningColorHover: warningColorHover,
     warningColorActive: warningColorActive,
     publishBlockingErrorColor: publishBlockingErrorColor,
-    radioBorderColor: radioBorderColor$2,
+    radioBorderColor: radioBorderColor$1,
     checkedColor: checkedColor$1,
     articleMaxWidthInPx: articleMaxWidthInPx,
     articleMaxWidthTableInPx: articleMaxWidthTableInPx
@@ -17996,17 +17958,17 @@ class Lint extends React.Component {
       var warningTextStyle;
 
       if (this.props.severity === 1) {
-        severityStyle = styles$w.indicatorError;
+        severityStyle = styles$A.indicatorError;
         warningText = "Error";
-        warningTextStyle = styles$w.publishBlockingError;
+        warningTextStyle = styles$A.publishBlockingError;
       } else if (this.props.severity === 2) {
-        severityStyle = styles$w.indicatorWarning;
+        severityStyle = styles$A.indicatorWarning;
         warningText = "Warning";
-        warningTextStyle = styles$w.warning;
+        warningTextStyle = styles$A.warning;
       } else {
-        severityStyle = styles$w.indicatorGuideline;
+        severityStyle = styles$A.indicatorGuideline;
         warningText = "Recommendation";
-        warningTextStyle = styles$w.warning;
+        warningTextStyle = styles$A.warning;
       }
 
       return /*#__PURE__*/React.createElement("a", {
@@ -18014,16 +17976,16 @@ class Lint extends React.Component {
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$w.indicator, severityStyle)
+        className: css(styles$A.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$w.tooltip, tooltipAbove && styles$w.tooltipAbove)
+        className: css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$w.tooltipParagraph)
+        className: css(styles$A.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$w.tail, tooltipAbove && styles$w.tailAbove)
+        className: css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
       })));
     });
   }
@@ -18071,19 +18033,19 @@ class Lint extends React.Component {
 
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$w.lintContainer, styles$w.lintContainerBlock)
-      }, this.renderLink(styles$w.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$A.lintContainer, styles$A.lintContainerBlock)
+      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
 
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$w.lintContainer)
-      }, this.renderLink(styles$w.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$A.lintContainer)
+      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$w.lintContainer)
-    }, this.renderLink(styles$w.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$A.lintContainer)
+    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 
 } // $FlowFixMe[prop-missing]
@@ -18108,7 +18070,7 @@ _defineProperty(Lint, "propTypes", {
   severity: PropTypes.number
 });
 
-var styles$w = StyleSheet.create({
+var styles$A = StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19998,7 +19960,7 @@ class Renderer extends React.Component {
             paddingRight: margin
           };
 
-          var mobileInnerStyle = _objectSpread2(_objectSpread2({}, innerStyle), styles$v.mobileZoomableParentFix);
+          var mobileInnerStyle = _objectSpread2(_objectSpread2({}, innerStyle), styles$z.mobileZoomableParentFix);
 
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
@@ -20136,7 +20098,7 @@ class Renderer extends React.Component {
           paddingRight: 0
         };
 
-        var _mobileInnerStyle = _objectSpread2(_objectSpread2({}, _innerStyle), styles$v.mobileZoomableParentFix);
+        var _mobileInnerStyle = _objectSpread2(_objectSpread2({}, _innerStyle), styles$z.mobileZoomableParentFix);
 
         var wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _objectSpread2(_objectSpread2({}, _mobileInnerStyle), {}, {
@@ -20815,7 +20777,7 @@ _defineProperty(Renderer, "defaultProps", {
   linterContext: PerseusLinter.linterContextDefault
 });
 
-var styles$v = {
+var styles$z = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -22991,36 +22953,37 @@ _defineProperty(PossibleAnswers, "propTypes", {
   answers: PropTypes.arrayOf(PropTypes.string)
 });
 
-var _excluded$2 = ["keypadElement", "onFocus", "value"];
-var SimpleKeypadInput = createReactClass({
-  displayName: "SimpleKeypadInput",
-  propTypes: {
-    keypadElement: keypadElementPropType,
-    onFocus: PropTypes.func,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  },
-  componentDidMount: function componentDidMount() {
+var _excluded$3 = ["keypadElement", "onFocus", "value"];
+class SimpleKeypadInput extends React.Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "_isMounted", false);
+  }
+
+  componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
     this._isMounted = true;
-  },
-  componentWillUnmount: function componentWillUnmount() {
+  }
+
+  componentWillUnmount() {
     this._isMounted = false;
-  },
+  }
 
   focus() {
     // $FlowFixMe[object-this-reference]
     this.refs.input.focus(); // eslint-disable-line react/no-string-refs
-  },
+  }
 
   blur() {
     // $FlowFixMe[object-this-reference]
     this.refs.input.blur(); // eslint-disable-line react/no-string-refs
-  },
+  }
 
-  getValue: function getValue() {
+  getValue() {
     return this.props.value;
-  },
+  }
 
   render() {
     // $FlowFixMe[object-this-reference]
@@ -23036,7 +22999,7 @@ var SimpleKeypadInput = createReactClass({
       onFocus: _onFocus,
       value
     } = _this$props,
-        rest = _objectWithoutProperties(_this$props, _excluded$2);
+        rest = _objectWithoutProperties(_this$props, _excluded$3);
 
     return /*#__PURE__*/React.createElement(KeypadInput // eslint-disable-next-line react/no-string-refs
     , _extends({
@@ -23059,7 +23022,12 @@ var SimpleKeypadInput = createReactClass({
     }, rest));
   }
 
-});
+}
+SimpleKeypadInput.propTypes = {
+  keypadElement: keypadElementPropType,
+  onFocus: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
 
 var ParseTex$1 = TexWrangler.parseTex;
 var answerTypes = {
@@ -23314,9 +23282,13 @@ class InputNumber extends React.Component {
 
     if (rubric.answerType == null) {
       rubric.answerType = "number";
-    }
+    } // note(matthewc): this will get immediately parsed again by
+    // `KhanAnswerTypes.number.convertToPredicate`, but a string is
+    // expected here
+
 
-    var val = KhanAnswerTypes.number.createValidatorFunctional(rubric.value, {
+    var stringValue = "".concat(rubric.value);
+    var val = KhanAnswerTypes.number.createValidatorFunctional(stringValue, {
       simplify: rubric.simplify,
       inexact: rubric.inexact || undefined,
       maxError: rubric.maxError,
@@ -23442,6 +23414,8 @@ class NumericInput extends React.Component {
   constructor() {
     super(...arguments);
 
+    _defineProperty(this, "inputRef", void 0);
+
     _defineProperty(this, "state", {
       // keeps track of the other set of values when switching
       // between 0 and finite solutions
@@ -23460,9 +23434,8 @@ class NumericInput extends React.Component {
         correct = score.type === "points" && score.earned === score.total;
 
         if (!correct) {
-          var correctAnswers = _.filter(rubric.answers, answer => answer.status === "correct");
-
-          var answerStrings = _.map(correctAnswers, answer => {
+          var correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
+          var answerStrings = correctAnswers.map(answer => {
             // Figure out how this answer is supposed to be
             // displayed
             var format = "decimal";
@@ -23483,7 +23456,6 @@ class NumericInput extends React.Component {
 
             return answerString;
           });
-
           answerBlurb = /*#__PURE__*/React.createElement(PossibleAnswers, {
             answers: answerStrings
           });
@@ -23497,7 +23469,7 @@ class NumericInput extends React.Component {
       var _this$props$answerFor;
 
       // if the set of specified forms are empty, allow all forms
-      var forms = ((_this$props$answerFor = this.props.answerForms) === null || _this$props$answerFor === void 0 ? void 0 : _this$props$answerFor.length) !== 0 ? this.props.answerForms : _.map(_.keys(formExamples), name => {
+      var forms = ((_this$props$answerFor = this.props.answerForms) === null || _this$props$answerFor === void 0 ? void 0 : _this$props$answerFor.length) !== 0 ? this.props.answerForms : Object.keys(formExamples).map(name => {
         return {
           name: name,
           simplify: "required"
@@ -23523,8 +23495,7 @@ class NumericInput extends React.Component {
 
       var answerFormNames = _.uniq((_this$props$answerFor3 = this.props.answerForms) === null || _this$props$answerFor3 === void 0 ? void 0 : _this$props$answerFor3.map(form => form.name));
 
-      var allFormsAccepted = answerFormNames.length >= _.size(formExamples);
-
+      var allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
       return !noFormsAccepted && !allFormsAccepted;
     });
 
@@ -23533,20 +23504,22 @@ class NumericInput extends React.Component {
     });
 
     _defineProperty(this, "focus", () => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.input.focus();
+      var _this$inputRef;
+
+      (_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.focus();
       return true;
     });
 
-    _defineProperty(this, "focusInputPath", inputPath => {
-      /* istanbul ignore next */
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.input.focus();
+    _defineProperty(this, "focusInputPath", () => {
+      var _this$inputRef2;
+
+      (_this$inputRef2 = this.inputRef) === null || _this$inputRef2 === void 0 ? void 0 : _this$inputRef2.focus();
     });
 
-    _defineProperty(this, "blurInputPath", inputPath => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.input.blur();
+    _defineProperty(this, "blurInputPath", () => {
+      var _this$inputRef3;
+
+      (_this$inputRef3 = this.inputRef) === null || _this$inputRef3 === void 0 ? void 0 : _this$inputRef3.blur();
     });
 
     _defineProperty(this, "getInputPaths", () => {
@@ -23614,9 +23587,8 @@ class NumericInput extends React.Component {
   }
 
   static getOneCorrectAnswerFromRubric(rubric) {
-    var correctAnswers = _.filter(rubric.answers, answer => answer.status === "correct");
-
-    var answerStrings = _.map(correctAnswers, answer => {
+    var correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
+    var answerStrings = correctAnswers.map(answer => {
       // Figure out how this answer is supposed to be
       // displayed
       var format = "decimal";
@@ -23646,31 +23618,30 @@ class NumericInput extends React.Component {
   }
 
   static validate(useInput, rubric) {
-    var allAnswerForms = _.pluck(answerFormButtons, "value");
-
-    var createValidator = answer => KhanAnswerTypes.number.createValidatorFunctional(answer.value, {
-      message: answer.message,
-      simplify: answer.status === "correct" ? answer.simplify : "optional",
-      inexact: true,
-      // TODO(merlob) backfill / delete
-      maxError: answer.maxError,
-      forms: answer.strict && answer.answerForms && answer.answerForms.length !== 0 ? answer.answerForms : allAnswerForms
-    }); // We may have received TeX; try to parse it before grading.
+    var allAnswerForms = answerFormButtons.map(e => e["value"]);
+
+    var createValidator = answer => {
+      var stringAnswer = "".concat(answer.value);
+      return KhanAnswerTypes.number.createValidatorFunctional(stringAnswer, {
+        message: answer.message,
+        simplify: answer.status === "correct" ? answer.simplify : "optional",
+        inexact: true,
+        // TODO(merlob) backfill / delete
+        maxError: answer.maxError,
+        forms: answer.strict && answer.answerForms && answer.answerForms.length !== 0 ? answer.answerForms : allAnswerForms
+      });
+    }; // We may have received TeX; try to parse it before grading.
     // If `currentValue` is not TeX, this should be a no-op.
 
 
     var currentValue = ParseTex(useInput.currentValue);
-
-    var correctAnswers = _.where(rubric.answers, {
-      status: "correct"
-    });
-
+    var correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
     var normalizedAnswerExpected = correctAnswers.every(answer => Math.abs(answer.value) <= 1); // Look through all correct answers for one that matches either
     // precisely or approximately and return the appropriate message:
     // - if precise, return the message that the answer came with
     // - if it needs to be simplified, etc., show that message
 
-    var result = _.find(_.map(correctAnswers, answer => {
+    var result = correctAnswers.map(answer => {
       // The coefficient is an attribute of the widget
       var localValue = currentValue;
 
@@ -23684,22 +23655,17 @@ class NumericInput extends React.Component {
 
       var validate = createValidator(answer);
       return validate(maybeParsePercentInput(localValue, normalizedAnswerExpected));
-    }), match => match.correct || match.empty);
+    }).find(match => match.correct || match.empty);
 
     if (!result) {
       // Otherwise, if the guess is not correct
-      var otherAnswers = [].concat(_.where(rubric.answers, {
-        status: "ungraded"
-      }), _.where(rubric.answers, {
-        status: "wrong"
-      })); // Look through all other answers and if one matches either
+      var otherAnswers = [].concat(rubric.answers.filter(answer => answer.status === "ungraded"), rubric.answers.filter(answer => answer.status === "wrong")); // Look through all other answers and if one matches either
       // precisely or approximately return the answer's message
 
-      var match = _.find(otherAnswers, answer => {
+      var match = otherAnswers.find(answer => {
         var validate = createValidator(answer);
         return validate(maybeParsePercentInput(currentValue, normalizedAnswerExpected)).correct;
       });
-
       result = {
         empty: match ? match.status === "ungraded" : false,
         correct: match ? match.status === "correct" : false,
@@ -23746,9 +23712,8 @@ class NumericInput extends React.Component {
 
     if (this.props.apiOptions.customKeypad) {
       // TODO(charlie): Support "Review Mode".
-      return maybeRightAlignKeypadInput( /*#__PURE__*/React.createElement(SimpleKeypadInput // eslint-disable-next-line react/no-string-refs
-      , {
-        ref: "input",
+      return maybeRightAlignKeypadInput( /*#__PURE__*/React.createElement(SimpleKeypadInput, {
+        ref: _ref => this.inputRef = _ref,
         value: this.props.currentValue,
         keypadElement: this.props.keypadElement,
         onChange: this.handleChange,
@@ -23757,9 +23722,8 @@ class NumericInput extends React.Component {
       }));
     }
 
-    var input = /*#__PURE__*/React.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "input",
+    var input = /*#__PURE__*/React.createElement(InputWithExamples, {
+      ref: _ref2 => this.inputRef = _ref2,
       value: this.props.currentValue,
       onChange: this.handleChange,
       className: classNames(classes),
@@ -23826,7 +23790,7 @@ var unionAnswerForms = function unionAnswerForms(answerFormsList) {
   // two elements are equal, and returns a list of unique elements. This is
   // just a helper function here, but works generally.
   var uniqueBy = function uniqueBy(list, iteratee) {
-    return _.reduce(list, (uniqueList, element) => {
+    return list.reduce((uniqueList, element) => {
       // For each element, decide whether it's already in the list of
       // unique items.
       var inList = _.find(uniqueList, iteratee.bind(null, element));
@@ -23840,13 +23804,13 @@ var unionAnswerForms = function unionAnswerForms(answerFormsList) {
   }; // Pull out all of the forms from the different lists.
 
 
-  var allForms = _.flatten(answerFormsList); // Pull out the unique forms using uniqueBy.
-
+  var allForms = answerFormsList.flat(); // Pull out the unique forms using uniqueBy.
 
   var uniqueForms = uniqueBy(allForms, _.isEqual); // Sort them by the order they appear in the `formExamples` list.
 
+  var formExampleKeys = Object.keys(formExamples);
   return _.sortBy(uniqueForms, form => {
-    return _.keys(formExamples).indexOf(form.name);
+    return formExampleKeys.indexOf(form.name);
   });
 };
 // This function checks if the user inputted a percent value, parsing
@@ -23855,7 +23819,7 @@ var unionAnswerForms = function unionAnswerForms(answerFormsList) {
 // can accept several input forms with or without "%", the decision
 // to parse based on the presence of "%" in the input, is so that we
 // don't accidently scale the user typed value before grading, CP-930.
-var maybeParsePercentInput = (inputValue, normalizedAnswerExpected) => {
+function maybeParsePercentInput(inputValue, normalizedAnswerExpected) {
   // If the input value is not a string ending with "%", then there's
   // nothing more to do. The value will be graded as inputted by user.
   if (!(typeof inputValue === "string" && inputValue.endsWith("%"))) {
@@ -23880,13 +23844,13 @@ var maybeParsePercentInput = (inputValue, normalizedAnswerExpected) => {
 
 
   return value;
-};
+}
 
 var propsTransform = function propsTransform(widgetOptions) {
   var rendererProps = _.extend(_.omit(widgetOptions, "answers"), {
     answerForms: unionAnswerForms( // Pull out the name of each form and whether that form has
     // required simplification.
-    _.map(widgetOptions.answers, answer => {
+    widgetOptions.answers.map(answer => {
       return _.map(answer.answerForms, form => {
         return {
           simplify: answer.simplify,
@@ -24122,7 +24086,7 @@ var mediaQueries = {
 var {
   zIndexAboveScratchpad,
   zIndexInteractiveComponent,
-  radioBorderColor: radioBorderColor$1,
+  radioBorderColor,
   checkedColor,
   circleSize,
   radioMarginWidth
@@ -24177,7 +24141,7 @@ var sharedStyles = StyleSheet.create({
     },
     backgroundColor: "#fff",
     border: "2px solid #fff",
-    boxShadow: "0 0px 0px 1px ".concat(radioBorderColor$1),
+    boxShadow: "0 0px 0px 1px ".concat(radioBorderColor),
     outline: "none",
     boxSizing: "border-box",
     flexShrink: 0,
@@ -24430,35 +24394,65 @@ _defineProperty(Icon, "defaultProps", {
   color: "currentColor"
 });
 
-class FocusRing extends React.Component {
-  render() {
-    var borderColor = this.props.visible ? this.props.color : "transparent";
-    var style = {
-      borderColor: borderColor
-    };
-    return /*#__PURE__*/React.createElement("span", {
-      className: css(styles$u.ring),
-      style: style
-    }, this.props.children);
+function getA11yText(letter, checked, correct, crossedOut, showCorrectness) {
+  // There are two pieces of metadata we want to add to each a11yText:
+  // whether the answer was checked/crossed-out/neither, and whether the
+  // answer is correct/incorrect/not-yet-revealed.
+  //
+  // Translation is tricky for cross-product situations like this, so
+  // we've just enumerated all 9 possibilities as separate strings.
+  if (showCorrectness && correct) {
+    if (checked) {
+      return i18n._("(Choice %(letter)s, Checked, Correct)", {
+        letter
+      });
+    }
+
+    if (crossedOut) {
+      return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
+        letter
+      });
+    }
+
+    return i18n._("(Choice %(letter)s, Correct)", {
+      letter
+    });
   }
 
-}
+  if (showCorrectness && !correct) {
+    if (checked) {
+      return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
+        letter
+      });
+    }
 
-_defineProperty(FocusRing, "defaultProps", {
-  visible: true,
-  color: kaGreen$1
-});
+    if (crossedOut) {
+      return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
+        letter
+      });
+    }
 
-var styles$u = StyleSheet.create({
-  ring: {
-    margin: "auto",
-    display: "inline-block",
-    borderRadius: "50%",
-    borderWidth: 2,
-    padding: 2,
-    borderStyle: "solid"
+    return i18n._("(Choice %(letter)s, Incorrect)", {
+      letter
+    });
   }
-});
+
+  if (checked) {
+    return i18n._("(Choice %(letter)s, Checked)", {
+      letter
+    });
+  }
+
+  if (crossedOut) {
+    return i18n._("(Choice %(letter)s, Crossed out)", {
+      letter
+    });
+  }
+
+  return i18n._("(Choice %(letter)s)", {
+    letter
+  });
+}
 
 /**
  * Given a choice's position in the radio widget, return the corresponding
@@ -24490,179 +24484,57 @@ function getChoiceLetter(pos) {
   return " ";
 }
 
-var SAT_ICON_SIZE = 25;
-
-class SATChoiceIcon extends React.Component {
-  // TODO(amy): figure out a better scheme for specifying these
-  // styles that isn't such a pain to grok. See some neat ideas
-  // from MDR in https://phabricator.khanacademy.org/D35249.
-  constructStyles(reviewMode, correct, checked) {
-    var backgroundColor;
-    var borderColor = satBlue;
-    var color = satBlue;
-
-    if (reviewMode) {
-      if (correct) {
-        borderColor = satCorrectColor;
-        color = checked ? white$1 : satCorrectColor;
-        backgroundColor = checked ? satCorrectColor : white$1;
-      } else if (checked) {
-        borderColor = satIncorrectColor;
-        color = white$1;
-        backgroundColor = satIncorrectColor;
-      }
-    } else if (checked) {
-      color = white$1;
-      backgroundColor = satBlue;
-    }
-
-    return {
-      color,
-      backgroundColor,
-      borderColor
-    };
-  }
-
-  render() {
-    var {
-      letter,
-      a11yText,
-      reviewMode,
-      checked,
-      correct,
-      crossedOut
-    } = this.props;
-    var {
-      color,
-      backgroundColor,
-      borderColor
-    } = this.constructStyles(reviewMode, correct, checked);
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$t.iconWrapper)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$t.satCircle),
-      style: {
-        backgroundColor,
-        borderColor
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        color
-      },
-      className: css(styles$t.letter)
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "perseus-sr-only"
-    }, a11yText), /*#__PURE__*/React.createElement("span", {
-      "aria-hidden": "true"
-    }, letter)), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
-      color: borderColor,
-      sat: true
-    }));
-  }
+/**
+ * Renders a circular selection ring around the child.
+ */
 
+function FocusRing(props) {
+  var {
+    visible,
+    color,
+    children,
+    multipleSelect
+  } = props;
+  var borderColor = visible ? color : "transparent";
+  var borderRadius = multipleSelect ? 5 : "50%";
+  var style = {
+    borderColor,
+    borderRadius
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    "data-test-id": "focus-ring",
+    className: css(styles$y.ring),
+    style: style
+  }, children);
 }
 
-var LIBRARY_ICON_SIZE = 24;
-
-class LibraryChoiceIcon extends React.Component {
-  getChoiceInner() {
-    var {
-      letter,
-      showCorrectness,
-      correct
-    } = this.props;
-
-    if (!showCorrectness) {
-      return letter;
-    }
-
-    if (correct) {
-      return /*#__PURE__*/React.createElement(InlineIcon, _extends({}, iconCheck, {
-        style: {
-          position: "relative",
-          top: -1
-        }
-      }));
-    }
-
-    return /*#__PURE__*/React.createElement(InlineIcon, iconMinus);
-  } // Handle dynamic styling of the multiple choice icon. Most
-  // MC icon styles are constant, but we do allow the caller
-  // to specify the selected color, and thus must control styles
-  // related to the selected state dynamically.
-
-
-  getDynamicStyles() {
-    var {
-      checked,
-      showCorrectness,
-      pressed,
-      primaryProductColor,
-      correct,
-      transparentBackground
-    } = this.props;
-
-    if (!showCorrectness && pressed) {
-      return {
-        borderColor: primaryProductColor,
-        color: primaryProductColor,
-        backgroundColor: transparentBackground ? "transparent" : white$1
-      };
-    }
-
-    if (checked) {
-      // Note: kaGreen is not only the default product color,
-      // but also the "correctness" color
-      var bg = showCorrectness && correct ? Color.green : primaryProductColor;
-      return {
-        color: white$1,
-        backgroundColor: bg,
-        borderColor: bg
-      };
-    }
-
-    return {
-      borderColor: Color.offBlack64,
-      color: Color.offBlack64
-    };
+FocusRing.defaultProps = {
+  visible: true,
+  color: kaGreen$1,
+  multipleSelect: false
+};
+var styles$y = StyleSheet.create({
+  ring: {
+    margin: "auto",
+    display: "inline-block",
+    borderWidth: 2,
+    padding: 2,
+    borderStyle: "solid"
   }
+});
 
-  render() {
-    var {
-      a11yText,
-      checked,
-      crossedOut,
-      showCorrectness,
-      correct,
-      focused,
-      primaryProductColor,
-      previouslyAnswered
-    } = this.props;
-    var dynamicStyles = this.getDynamicStyles();
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$t.iconWrapper)
-    }, /*#__PURE__*/React.createElement(FocusRing, {
-      color: primaryProductColor,
-      visible: focused
-    }, /*#__PURE__*/React.createElement("div", {
-      style: dynamicStyles,
-      className: css(styles$t.libraryCircle, showCorrectness && correct && styles$t.libraryCircleCorrect, showCorrectness && !correct && styles$t.libraryCircleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$t.libraryCircleIncorrectAnswered) // used in BaseRadio to check if we actually clicked on the
-      // radio icon
-      ,
-      "data-is-radio-icon": true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-sr-only"
-    }, a11yText), /*#__PURE__*/React.createElement("div", {
-      "aria-hidden": true
-    }, this.getChoiceInner()))), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
-      color: dynamicStyles.borderColor
-    }));
+var SAT_ICON_SIZE = 25;
+var LIBRARY_ICON_SIZE = 24;
+var styles$x = StyleSheet.create({
+  iconWrapper: {
+    display: "inline-block",
+    position: "relative"
   }
+});
 
-} // The "cross-out line" SVG is a bit bigger than the library icon, to provide
+/* Component for rendering a letter icon in radio choice */
 // extra space for the cute rounded line cap.
 
-
 var CROSS_OUT_LINE_PADDING = 2;
 var CROSS_OUT_LINE_SIZE = LIBRARY_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
 var SAT_CROSS_OUT_LINE_SIZE = SAT_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
@@ -24677,7 +24549,7 @@ function CrossOutLine(props) {
     width: crossOutLineSize,
     height: crossOutLineSize,
     viewBox: "0 0 ".concat(crossOutLineSize, " ").concat(crossOutLineSize),
-    className: css(styles$t.crossOutLine)
+    className: css(styles$w.crossOutLine)
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
     // We don't quite go to the _very_ corner, because the cute
@@ -24692,151 +24564,124 @@ function CrossOutLine(props) {
   }));
 }
 
-class ChoiceIcon extends React.Component {
-  a11yText(letter) {
-    var {
-      checked,
-      correct,
-      crossedOut,
-      showCorrectness
-    } = this.props; // There are two pieces of metadata we want to add to each a11yText:
-    // whether the answer was checked/crossed-out/neither, and whether the
-    // answer is correct/incorrect/not-yet-revealed.
-    //
-    // Translation is tricky for cross-product situations like this, so
-    // we've just enumerated all 9 possibilities as separate strings.
-
-    if (showCorrectness && correct) {
-      if (checked) {
-        return i18n._("(Choice %(letter)s, Checked, Correct)", {
-          letter
-        });
-      }
-
-      if (crossedOut) {
-        return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
-          letter
-        });
-      }
+var styles$w = StyleSheet.create({
+  crossOutLine: {
+    // Center the icon within the container.
+    position: "absolute",
+    top: "calc(50% - ".concat(CROSS_OUT_LINE_SIZE / 2, "px)"),
+    left: "calc(50% - ".concat(CROSS_OUT_LINE_SIZE / 2, "px)")
+  }
+});
 
-      return i18n._("(Choice %(letter)s, Correct)", {
-        letter
-      });
-    }
+function ChoiceInner(props) {
+  var {
+    letter,
+    showCorrectness,
+    correct
+  } = props;
 
-    if (showCorrectness && !correct) {
-      if (checked) {
-        return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
-          letter
-        });
-      }
+  if (!showCorrectness) {
+    return letter;
+  }
 
-      if (crossedOut) {
-        return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
-          letter
-        });
+  if (correct) {
+    return /*#__PURE__*/React.createElement(InlineIcon, _extends({}, iconCheck, {
+      style: {
+        position: "relative",
+        top: -1
       }
-
-      return i18n._("(Choice %(letter)s, Incorrect)", {
-        letter
-      });
-    }
-
-    if (checked) {
-      return i18n._("(Choice %(letter)s, Checked)", {
-        letter
-      });
-    }
-
-    if (crossedOut) {
-      return i18n._("(Choice %(letter)s, Crossed out)", {
-        letter
-      });
-    }
-
-    return i18n._("(Choice %(letter)s)", {
-      letter
-    });
+    }));
   }
 
-  render() {
-    var {
-      pos,
-      reviewMode,
-      checked,
-      crossedOut,
-      correct,
-      product,
-      showCorrectness,
-      pressed,
-      focused,
-      primaryProductColor,
-      previouslyAnswered,
-      transparentBackground
-    } = this.props;
-    var letter = getChoiceLetter(pos);
+  return /*#__PURE__*/React.createElement(InlineIcon, iconMinus);
+} // Handle dynamic styling of the multiple choice icon. Most
+// MC icon styles are constant, but we do allow the caller
+// to specify the selected color, and thus must control styles
+// related to the selected state dynamically.
+
+
+function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, primaryProductColor, correct, transparentBackground) {
+  var backgroundColor;
+  var borderColor;
+  var color;
+
+  if (!showCorrectness && pressed) {
+    borderColor = primaryProductColor;
+    color = primaryProductColor;
+    backgroundColor = transparentBackground ? "transparent" : white$1;
+  } else if (checked) {
+    // Note: kaGreen is not only the default product color,
+    // but also the "correctness" color
+    var bg = showCorrectness && correct ? Color.green : primaryProductColor;
+    color = white$1;
+    backgroundColor = bg;
+    borderColor = bg;
+  } else {
+    borderColor = Color.offBlack64;
+    color = Color.offBlack64;
+  } // define shape
 
-    if (product === "sat") {
-      return /*#__PURE__*/React.createElement(SATChoiceIcon, {
-        letter: letter,
-        a11yText: this.a11yText(letter),
-        reviewMode: reviewMode,
-        checked: checked,
-        correct: correct,
-        crossedOut: crossedOut
-      });
-    }
 
-    return /*#__PURE__*/React.createElement(LibraryChoiceIcon, {
-      letter: letter,
-      a11yText: this.a11yText(letter),
-      reviewMode: reviewMode,
-      checked: checked,
-      crossedOut: crossedOut,
-      pressed: pressed,
-      focused: focused,
-      correct: correct,
-      showCorrectness: showCorrectness,
-      primaryProductColor: primaryProductColor,
-      previouslyAnswered: previouslyAnswered,
-      transparentBackground: transparentBackground
-    });
+  var borderRadius;
+
+  if (multipleSelect) {
+    borderRadius = 3;
+  } else {
+    borderRadius = LIBRARY_ICON_SIZE;
   }
 
+  return {
+    backgroundColor,
+    borderColor,
+    color,
+    borderRadius
+  };
 }
 
-_defineProperty(ChoiceIcon, "defaultProps", {
-  primaryProductColor: Color.blue
-});
+function LibraryChoiceIcon(props) {
+  var {
+    checked,
+    crossedOut,
+    showCorrectness,
+    correct,
+    focused,
+    hovered,
+    multipleSelect,
+    primaryProductColor,
+    previouslyAnswered,
+    letter,
+    pressed,
+    transparentBackground
+  } = props;
+  var dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, primaryProductColor, correct, transparentBackground);
+  return /*#__PURE__*/React.createElement("div", {
+    className: css(styles$x.iconWrapper)
+  }, /*#__PURE__*/React.createElement(FocusRing, {
+    color: primaryProductColor,
+    visible: focused || hovered,
+    multipleSelect: multipleSelect
+  }, /*#__PURE__*/React.createElement("div", {
+    style: dynamicStyles,
+    "data-test-id": "choice-icon__library-choice-icon",
+    className: css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered) // used in BaseRadio to check if we actually clicked on the
+    // radio icon
+    ,
+    "data-is-radio-icon": true
+  }, /*#__PURE__*/React.createElement(ChoiceInner, {
+    letter: letter,
+    showCorrectness: showCorrectness,
+    correct: correct
+  }))), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
+    color: dynamicStyles.borderColor
+  }));
+}
 
-var styles$t = StyleSheet.create({
-  satCircle: {
-    display: "block",
-    borderRadius: SAT_ICON_SIZE,
-    borderStyle: "solid",
-    borderWidth: 2,
-    content: "''",
-    height: SAT_ICON_SIZE,
-    width: SAT_ICON_SIZE,
-    top: 1,
-    left: 1
-  },
-  iconWrapper: {
-    display: "inline-block",
-    position: "relative"
-  },
-  crossOutLine: {
-    // Center the icon within the container.
-    position: "absolute",
-    top: "calc(50% - ".concat(CROSS_OUT_LINE_SIZE / 2, "px)"),
-    left: "calc(50% - ".concat(CROSS_OUT_LINE_SIZE / 2, "px)")
-  },
-  libraryCircle: {
+var styles$v = StyleSheet.create({
+  circle: {
     // Make the circle
     width: LIBRARY_ICON_SIZE,
     height: LIBRARY_ICON_SIZE,
     boxSizing: "border-box",
-    borderRadius: LIBRARY_ICON_SIZE,
     borderStyle: "solid",
     borderWidth: 2,
     // The default icons have letters in them. Style those letters.
@@ -24857,18 +24702,108 @@ var styles$t = StyleSheet.create({
     // pixel so it is much better centered.
     lineHeight: "1px"
   },
-  libraryCircleCorrect: {
+  circleCorrect: {
     fontSize: LIBRARY_ICON_SIZE
   },
-  libraryCircleIncorrect: {
+  circleIncorrect: {
     fontSize: LIBRARY_ICON_SIZE,
     borderColor: gray68,
     color: gray68
   },
-  libraryCircleIncorrectAnswered: {
+  circleIncorrectAnswered: {
     backgroundColor: Color.red,
     borderColor: Color.red,
     color: Color.white
+  }
+});
+
+/* Component for rendering a letter icon in a SAT radio choice */
+
+// TODO(amy): figure out a better scheme for specifying these
+// styles that isn't such a pain to grok. See some neat ideas
+// from MDR in https://phabricator.khanacademy.org/D35249.
+function constructSATStyles(reviewMode, correct, checked, multipleSelect) {
+  var backgroundColor;
+  var borderColor = satBlue;
+  var color = satBlue;
+
+  if (reviewMode) {
+    if (correct) {
+      borderColor = satCorrectColor;
+      color = checked ? white$1 : satCorrectColor;
+      backgroundColor = checked ? satCorrectColor : white$1;
+    } else if (checked) {
+      borderColor = satIncorrectColor;
+      color = white$1;
+      backgroundColor = satIncorrectColor;
+    }
+  } else if (checked) {
+    color = white$1;
+    backgroundColor = satBlue;
+  }
+
+  var borderRadius;
+
+  if (multipleSelect) {
+    borderRadius = 3;
+  } else {
+    borderRadius = SAT_ICON_SIZE;
+  }
+
+  return {
+    color,
+    backgroundColor,
+    borderColor,
+    borderRadius
+  };
+}
+
+function SATChoiceIcon(props) {
+  var {
+    letter,
+    crossedOut,
+    reviewMode,
+    correct,
+    checked,
+    multipleSelect
+  } = props;
+  var {
+    color,
+    backgroundColor,
+    borderColor,
+    borderRadius
+  } = constructSATStyles(reviewMode, correct, checked, multipleSelect);
+  return /*#__PURE__*/React.createElement("div", {
+    className: css(styles$x.iconWrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css(styles$u.satCircle),
+    "data-test-id": "choice-icon__sat-choice-icon",
+    style: {
+      backgroundColor,
+      borderColor,
+      borderRadius
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      color
+    },
+    className: css(styles$u.letter)
+  }, /*#__PURE__*/React.createElement("span", null, letter)), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
+    color: borderColor,
+    sat: true
+  }));
+}
+
+var styles$u = StyleSheet.create({
+  satCircle: {
+    display: "block",
+    borderStyle: "solid",
+    borderWidth: 2,
+    content: "''",
+    height: SAT_ICON_SIZE,
+    width: SAT_ICON_SIZE,
+    top: 1,
+    left: 1
   },
   letter: {
     // These properties make sure that this element has the exact
@@ -24888,6 +24823,55 @@ var styles$t = StyleSheet.create({
   }
 });
 
+/* Component for rendering a letter icon in radio choice */
+
+function ChoiceIcon(props) {
+  var {
+    pos,
+    reviewMode,
+    checked,
+    crossedOut,
+    correct,
+    product,
+    multipleSelect,
+    showCorrectness,
+    focused,
+    hovered,
+    pressed,
+    primaryProductColor = Color.blue,
+    previouslyAnswered,
+    transparentBackground
+  } = props;
+  var letter = getChoiceLetter(pos);
+
+  if (product === "sat") {
+    return /*#__PURE__*/React.createElement(SATChoiceIcon, {
+      letter: letter,
+      reviewMode: reviewMode,
+      checked: checked,
+      correct: correct,
+      crossedOut: crossedOut,
+      multipleSelect: multipleSelect
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(LibraryChoiceIcon, {
+    letter: letter,
+    reviewMode: reviewMode,
+    checked: checked,
+    crossedOut: crossedOut,
+    focused: focused,
+    hovered: hovered,
+    pressed: pressed,
+    correct: correct,
+    showCorrectness: showCorrectness,
+    primaryProductColor: primaryProductColor,
+    previouslyAnswered: previouslyAnswered,
+    transparentBackground: transparentBackground,
+    multipleSelect: multipleSelect
+  });
+}
+
 /**
  * Renders text indicating whether the choice was correct or
  * not and whether the choice was selected or not.
@@ -24896,63 +24880,68 @@ var styles$t = StyleSheet.create({
  * between the states more immediately clear to users.
  */
 
-class OptionStatus extends React.Component {
-  _renderText() {
-    var {
-      checked,
-      correct,
-      crossedOut
-    } = this.props;
+function renderText(checked, correct, crossedOut) {
+  if (correct) {
+    // For correct answers, we surface checked _or_ crossedOut state,
+    // because any interaction with the correct answer is noteworthy!
+    if (checked) {
+      return i18n._("Correct (selected)");
+    }
 
-    if (correct) {
-      // For correct answers, we surface checked _or_ crossedOut state,
-      // because any interaction with the correct answer is noteworthy!
-      if (checked) {
-        return i18n._("Correct (selected)");
-      }
+    if (crossedOut) {
+      return i18n._("Correct (but you crossed it out)");
+    }
+
+    return i18n._("Correct");
+  } // But, for incorrect answers, we only surface checked state,
+  // because crossing out an incorrect answer is not noteworthy.
 
-      if (crossedOut) {
-        return i18n._("Correct (but you crossed it out)");
-      }
 
-      return i18n._("Correct");
-    } // But, for incorrect answers, we only surface checked state,
-    // because crossing out an incorrect answer is not noteworthy.
+  if (checked) {
+    return i18n._("Incorrect (selected)");
+  }
 
+  return i18n._("Incorrect");
+}
+
+function OptionStatus(props) {
+  var {
+    checked,
+    correct,
+    crossedOut,
+    previouslyAnswered,
+    reviewMode,
+    satStyling
+  } = props; // Option status is exclued for SAT
+
+  if (satStyling) {
+    return null;
+  } // Option status is shown only in review mode, or for incorrectly
+  // answered items.
 
-    if (checked) {
-      return i18n._("Incorrect (selected)");
-    }
 
-    return i18n._("Incorrect");
+  if (!reviewMode && !previouslyAnswered) {
+    return null;
   }
 
-  render() {
-    var {
-      checked,
-      correct,
-      previouslyAnswered
-    } = this.props;
-    var textStyle;
+  var textStyle;
 
-    if (correct) {
-      textStyle = styles$s.correct;
+  if (correct) {
+    textStyle = styles$t.correct;
+  } else {
+    if (checked || previouslyAnswered) {
+      textStyle = styles$t.incorrectAnswered;
     } else {
-      if (checked || previouslyAnswered) {
-        textStyle = styles$s.incorrectAnswered;
-      } else {
-        textStyle = styles$s.incorrect;
-      }
+      textStyle = styles$t.incorrect;
     }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$s.text, textStyle)
-    }, this._renderText());
   }
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: css(styles$t.text, textStyle)
+  }, renderText(checked, correct, crossedOut));
 }
 
-var styles$s = StyleSheet.create({
+var styles$t = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -24978,317 +24967,236 @@ var ellipsisHorizontalIcon = {
   width: 100,
   height: 27.284
 };
+// Note(TB): Received errors when using useUniqueIdWithMock
+// so created this workaround function. Will update when
+// useUniqueIdWithMock is available.
+// https://khanacademy.atlassian.net/browse/FEI-4861?atlOrigin=eyJpIjoiNDJlZWMwNjM1NWJhNDBkMWFjY2FmN2I0ZjcxZmQxOGUiLCJwIjoiaiJ9
+var id = 0;
 
-class Choice extends React.Component {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "justFinishedTouch", void 0);
-
-    _defineProperty(this, "justFinishedTimeoutID", void 0);
-
-    _defineProperty(this, "_input", void 0);
-
-    _defineProperty(this, "state", {
-      isInputFocused: false,
-      isInputActive: false
-    });
-
-    _defineProperty(this, "inputRef", ref => {
-      this._input = ref;
-    });
-
-    _defineProperty(this, "renderOptionStatus", () => {
-      var {
-        correct,
-        checked,
-        crossedOut,
-        reviewMode,
-        previouslyAnswered
-      } = this.props; // Option status is exclued for SAT
-
-      if (this.props.apiOptions.satStyling) {
-        return null;
-      } // Option status is shown only in review mode, or for incorrectly
-      // answered items.
+function uniqueId() {
+  return "choice-".concat(id++);
+}
 
+function Choice(props) {
+  var {
+    disabled,
+    checked,
+    content,
+    crossedOut,
+    showCorrectness,
+    multipleSelect,
+    onChange,
+    reviewMode,
+    correct,
+    apiOptions,
+    previouslyAnswered,
+    pos,
+    showRationale,
+    rationale,
+    forwardedRef
+  } = props;
+  var [isInputFocused, setIsInputFocused] = useState(false);
+  useEffect(() => {
+    if (isInputFocused && disabled) {
+      setIsInputFocused(false);
+    }
+  }, [disabled, isInputFocused, setIsInputFocused]); // Call `this.props.onChange` with the given values. Any keys that are not
+  // specified will be filled in with the current value. (For example, if
+  // `checked` is specified but `crossedOut` is not, then `crossedOut` will
+  // be filled in with `this.props.crossedOut`.)
+  //
+  // This enables us to use shorthand inside this component, while
+  // maintaining a consistent API for the parent.
 
-      if (!reviewMode && !previouslyAnswered) {
-        return null;
-      }
+  function sendChange(newValues) {
+    var _newValues$checked, _newValues$crossedOut;
 
-      return /*#__PURE__*/React.createElement(OptionStatus, {
-        checked: checked,
-        correct: correct,
-        crossedOut: crossedOut,
-        previouslyAnswered: previouslyAnswered
-      });
+    var updatedChecked = (_newValues$checked = newValues.checked) !== null && _newValues$checked !== void 0 ? _newValues$checked : checked;
+    var updatedCrossedOut = (_newValues$crossedOut = newValues.crossedOut) !== null && _newValues$crossedOut !== void 0 ? _newValues$crossedOut : crossedOut;
+    onChange({
+      checked: updatedChecked,
+      crossedOut: updatedCrossedOut
     });
+  } // HACK: while most of the styling for rendering SAT items is handled
+  // via aphrodite, we also need to assign normal CSS classnames here to
+  // special-case the coloring of MathJax formulas (see .MathJax .math in
+  // stylesheets/task-package/tasks.less)
 
-    _defineProperty(this, "renderChoiceIcon", _ref => {
-      var {
-        isFocused,
-        isPressed
-      } = _ref;
-      var {
-        radioStyleVersion,
-        primaryProductColor
-      } = this.props.apiOptions.styling;
-      var finalStyles = typeof radioStyleVersion === "undefined" ? false : radioStyleVersion === "final";
-
-      if (!finalStyles && !this.props.apiOptions.satStyling) {
-        return null;
-      }
 
-      return /*#__PURE__*/React.createElement(ChoiceIcon, {
-        pos: this.props.pos,
-        correct: this.props.correct,
-        crossedOut: this.props.crossedOut,
-        pressed: isPressed,
-        focused: isFocused,
-        checked: this.props.checked,
-        showCorrectness: this.props.showCorrectness,
-        reviewMode: this.props.reviewMode,
-        product: this.props.apiOptions.satStyling ? "sat" : "library",
-        primaryProductColor: primaryProductColor,
-        previouslyAnswered: this.props.previouslyAnswered
-      });
-    });
-
-    _defineProperty(this, "_sendChange", newValues => {
-      var _newValues$checked, _newValues$crossedOut;
+  var satCorrectChoice = apiOptions.satStyling && reviewMode && correct;
+  var satIncorrectChecked = apiOptions.satStyling && reviewMode && !correct && checked;
+  var descriptionClassName = classNames("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", css(!apiOptions.satStyling && styles$s.description, apiOptions.satStyling && styles$s.satDescription, satCorrectChoice && styles$s.satDescriptionCorrect, satCorrectChoice && checked && styles$s.satDescriptionCorrectChecked, satIncorrectChecked && styles$s.satDescriptionIncorrectChecked));
+  var rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$s.rationale, !apiOptions.satStyling && styles$s.nonSatRationale, apiOptions.satStyling && styles$s.satReviewRationale)); // We want to show the choices as dimmed out when the choices are
+  // disabled. However, we don't want to do this in the SAT product and
+  // we also don't want to do this when we're in review mode in the
+  // content library.
 
-      var checked = (_newValues$checked = newValues.checked) !== null && _newValues$checked !== void 0 ? _newValues$checked : this.props.checked;
-      var crossedOut = (_newValues$crossedOut = newValues.crossedOut) !== null && _newValues$crossedOut !== void 0 ? _newValues$crossedOut : this.props.crossedOut;
-      this.props.onChange({
-        checked,
-        crossedOut
+  var showDimmed = !apiOptions.satStyling && !reviewMode && apiOptions.readOnly || crossedOut;
+  var letter = getChoiceLetter(pos);
+  var a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
+  var choiceId = uniqueId();
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      dispay: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      opacity: showDimmed ? 0.5 : 1.0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "perseus-sr-only"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: multipleSelect ? "checkbox" : "radio",
+    id: choiceId,
+    checked: checked,
+    onClick: () => {
+      // If we're checking a crossed-out option, let's
+      // also uncross it.
+      sendChange({
+        checked: !checked,
+        crossedOut: false
       });
-    });
-
-    _defineProperty(this, "focusInput", () => {
-      var _this$_input;
-
-      (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
-    });
-  }
-
-  UNSAFE_componentWillUpdate(nextProps) {
-    if (this.state.isInputFocused && nextProps.disabled) {
-      this.setState({
-        isInputFocused: false
+    },
+    onChange: () => {},
+    disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: choiceId
+  }, a11yText, " \xA0 ", content)), /*#__PURE__*/React.createElement(Clickable, {
+    onClick: () => {
+      // If we're checking a crossed-out option, let's
+      // also uncross it.
+      sendChange({
+        checked: !checked,
+        crossedOut: false
       });
-    }
-  }
+    },
+    className: descriptionClassName,
+    disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
+    style: {
+      flex: 1
+    },
+    ref: forwardedRef,
+    "aria-hidden": "true"
+  }, _ref => {
+    var _apiOptions$styling;
 
-  render() {
-    var sat = this.props.apiOptions.satStyling;
     var {
-      reviewMode,
-      correct,
-      checked
-    } = this.props; // HACK: while most of the styling for rendering SAT items is handled
-    // via aphrodite, we also need to assign normal CSS classnames here to
-    // special-case the coloring of MathJax formulas (see .MathJax .math in
-    // stylesheets/task-package/tasks.less)
-
-    var satCorrectChoice = sat && reviewMode && correct;
-    var satIncorrectChecked = sat && reviewMode && !correct && checked;
-    var descriptionClassName = classNames("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", css(!sat && styles$r.description, sat && styles$r.satDescription, satCorrectChoice && styles$r.satDescriptionCorrect, satCorrectChoice && checked && styles$r.satDescriptionCorrectChecked, satIncorrectChecked && styles$r.satDescriptionIncorrectChecked));
-    var rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$r.rationale, !sat && styles$r.nonSatRationale, sat && styles$r.satReviewRationale)); // We want to show the choices as dimmed out when the choices are
-    // disabled. However, we don't want to do this in the SAT product and
-    // we also don't want to do this when we're in review mode in the
-    // content library.
-
-    var showDimmed = !sat && !reviewMode && this.props.apiOptions.readOnly || this.props.crossedOut;
+      hovered,
+      focused,
+      pressed
+    } = _ref;
     return /*#__PURE__*/React.createElement("div", {
-      style: {
-        dispay: "flex",
-        flexDirection: "column"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",
         flexDirection: "row",
-        width: "100%",
-        opacity: showDimmed ? 0.5 : 1.0
+        justifyContent: "center",
+        alignContent: "center",
+        paddingTop: Spacing.xSmall_8,
+        paddingBottom: Spacing.xSmall_8
       }
-    }, /*#__PURE__*/React.createElement(Clickable, {
-      onClick: () => {
-        // If we're checking a crossed-out option, let's
-        // also uncross it.
-        this._sendChange({
-          checked: true,
-          crossedOut: false
-        });
-      },
-      className: descriptionClassName,
-      disabled: this.props.disabled || this.props.apiOptions.staticRender || this.props.apiOptions.readOnly,
-      "aria-label": "Select Choice ".concat(getChoiceLetter(this.props.pos)),
-      "aria-checked": this.props.checked,
-      role: "checkbox",
+    }, /*#__PURE__*/React.createElement(ChoiceIcon, {
+      pos: pos,
+      correct: correct,
+      crossedOut: crossedOut,
+      pressed: pressed,
+      focused: focused,
+      checked: checked,
+      hovered: hovered,
+      showCorrectness: showCorrectness,
+      multipleSelect: multipleSelect,
+      reviewMode: reviewMode,
+      product: apiOptions.satStyling ? "sat" : "library",
+      primaryProductColor: (_apiOptions$styling = apiOptions.styling) === null || _apiOptions$styling === void 0 ? void 0 : _apiOptions$styling.primaryProductColor,
+      previouslyAnswered: previouslyAnswered
+    }), /*#__PURE__*/React.createElement("span", {
       style: {
-        flex: 1
+        paddingLeft: Spacing.small_12,
+        textAlign: "left",
+        flex: 1,
+        paddingTop: 4
       }
-    }, _ref2 => {
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OptionStatus, {
+      checked: checked,
+      correct: correct,
+      crossedOut: crossedOut,
+      previouslyAnswered: previouslyAnswered,
+      reviewMode: reviewMode,
+      satStyling: apiOptions.satStyling
+    })), /*#__PURE__*/React.createElement("div", null, content)));
+  }), apiOptions.crossOutEnabled && !reviewMode && /*#__PURE__*/React.createElement(Popover, {
+    dismissEnabled: true,
+    content: _ref2 => {
       var {
-        hovered,
-        focused,
-        pressed
+        close
       } = _ref2;
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "center",
-          alignContent: "center",
-          paddingTop: Spacing.xSmall_8,
-          paddingBottom: Spacing.xSmall_8
-        }
-      }, /*#__PURE__*/React.createElement("span", null, this.renderChoiceIcon({
-        isFocused: focused,
-        isPressed: pressed
-      })), /*#__PURE__*/React.createElement("span", {
-        style: {
-          paddingLeft: Spacing.small_12,
-          textAlign: "left",
-          flex: 1,
-          paddingTop: 4
-        }
-      }, /*#__PURE__*/React.createElement("div", null, this.renderOptionStatus()), /*#__PURE__*/React.createElement("div", null, this.props.content)));
-    }), this.props.apiOptions.crossOutEnabled && !reviewMode && /*#__PURE__*/React.createElement(Popover, {
-      dismissEnabled: true,
-      content: _ref3 => {
-        var {
-          close
-        } = _ref3;
-        return /*#__PURE__*/React.createElement(PopoverContent, {
-          title: "Cross out",
-          content: "Cross out option",
-          closeButtonVisible: true,
-          actions: /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Strut, {
-            size: Spacing.medium_16
-          }), /*#__PURE__*/React.createElement(Button, {
-            kind: "primary",
-            "aria-label": "Cross out Choice ".concat(getChoiceLetter(this.props.pos)),
-            disabled: this.props.apiOptions.readOnly || reviewMode,
-            onClick: () => {
-              if (!this.props.crossedOut) {
-                // If we're crossing
-                // out a checked
-                // option, let's also
-                // uncheck it.
-                this._sendChange({
-                  checked: false,
-                  crossedOut: true
-                });
-              } else {
-                this._sendChange({
-                  crossedOut: false
-                });
-              }
-
-              close();
+      return /*#__PURE__*/React.createElement(PopoverContent, {
+        title: "Cross out",
+        content: "Cross out option",
+        closeButtonVisible: true,
+        actions: /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Strut, {
+          size: Spacing.medium_16
+        }), /*#__PURE__*/React.createElement(Button, {
+          kind: "primary",
+          "aria-label": "Cross out Choice ".concat(getChoiceLetter(pos)),
+          disabled: apiOptions.readOnly || reviewMode,
+          onClick: () => {
+            if (!crossedOut) {
+              // If we're crossing
+              // out a checked
+              // option, let's also
+              // uncheck it.
+              sendChange({
+                checked: false,
+                crossedOut: true
+              });
+            } else {
+              sendChange({
+                crossedOut: false
+              });
             }
-          }, this.props.crossedOut ? "Bring back" : "Cross out"))
-        });
-      }
+
+            close();
+          }
+        }, crossedOut ? "Bring back" : "Cross out"))
+      });
+    }
+  }, _ref3 => {
+    var {
+      open
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(Clickable, {
+      onClick: open,
+      "aria-label": "Open menu for Choice ".concat(getChoiceLetter(pos)),
+      disabled: apiOptions.staticRender
     }, _ref4 => {
-      var {
-        open
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(Clickable, {
-        onClick: open,
-        "aria-label": "Open menu for Choice ".concat(getChoiceLetter(this.props.pos)),
-        disabled: this.props.apiOptions.staticRender
-      }, _ref5 => {
-        return /*#__PURE__*/React.createElement(Icon, {
-          icon: ellipsisHorizontalIcon,
-          size: 3,
-          color: Color.offBlack64
-        });
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: ellipsisHorizontalIcon,
+        size: 3,
+        color: Color.offBlack64
       });
-    })), this.props.showRationale && /*#__PURE__*/React.createElement("div", {
-      className: rationaleClassName,
-      "data-test-id": "perseus-radio-rationale-content-".concat(this.props.pos)
-    }, this.props.rationale));
-  }
-
+    });
+  })), showRationale && /*#__PURE__*/React.createElement("div", {
+    className: rationaleClassName,
+    "data-test-id": "perseus-radio-rationale-content-".concat(pos)
+  }, rationale));
 }
 
-_defineProperty(Choice, "propTypes", {
-  // TODO(kevinb) use Options.propTypes from perseus-api.jsx
-  // This change will also require make sure that item-renderer.jsx and
-  // server-item-renderer.jsx have appropriate defaults for apiOptions
-  // because many of the properties on Options.propTypes are required.
-  apiOptions: PropTypes.shape({
-    satStyling: PropTypes.bool,
-    isMobile: PropTypes.bool,
-    styling: PropTypes.shape({
-      radioStyleVersion: PropTypes.oneOf(["intermediate", "final"]),
-      primaryProductColor: PropTypes.string
-    }),
-    readOnly: PropTypes.bool
-  }),
-  checked: PropTypes.bool,
-  className: PropTypes.string,
-  rationale: PropTypes.node,
-  content: PropTypes.node,
-  correct: PropTypes.bool,
-  deselectEnabled: PropTypes.bool,
-  disabled: PropTypes.bool,
-  editMode: PropTypes.bool,
-  groupName: PropTypes.string,
-  isLastChoice: PropTypes.bool,
-  // Needed for border styling
-  // This indicates the position of the choice relative to others
-  // (so that we can display a nice little (A), (B), etc. next to it)
-  // Also used to generate an id for each input.
-  pos: PropTypes.number,
-  reviewMode: PropTypes.bool,
-  showRationale: PropTypes.bool,
-  showCorrectness: PropTypes.bool,
-  type: PropTypes.string,
-  // Indicates whether the user has "crossed out" this choice, meaning
-  // that they don't think it's correct. This value does not affect
-  // scoring or other behavior; it's just a note for the user's
-  // reference.
-  crossedOut: PropTypes.bool,
-  // Indicates that the user has previously selected this answer. These
-  // answers may be rendered orange in review, rather than grey if
-  // incorrect.
-  previouslyAnswered: PropTypes.bool,
-  // A callback indicating that this choice has changed. Its argument is
-  // an object with two keys: `checked` and `crossedOut`. Each contains a
-  // boolean value specifying the new checked and crossed-out value of
-  // this choice.
-  onChange: PropTypes.func,
-  // Callbacks for when the user presses the up arrow or down arrow
-  // (respectively) to navigate between choices. When called, the parent
-  // finds the prev/next choice, focuses the input, and checks the radio
-  // button if appropriate. (The reason we have custom behavior is that
-  // we actually _don't_ want to auto-select crossed-out choices!)
-  goToPrevChoice: PropTypes.func.isRequired,
-  goToNextChoice: PropTypes.func.isRequired
-});
-
-_defineProperty(Choice, "defaultProps", {
-  apiOptions: {
-    styling: {}
-  },
+Choice.defaultProps = {
+  disabled: false,
   checked: false,
-  classSet: {},
+  onChange: newValues => {},
   correct: false,
-  disabled: false,
-  editMode: false,
-  onChange: function onChange() {},
-  showRationale: false,
-  type: "radio",
+  apiOptions: ApiOptions.defaults,
+  previouslyAnswered: false,
   pos: 0,
-  previouslyAnswered: false
-});
-
-var styles$r = StyleSheet.create({
+  showRationale: false
+};
+var styles$s = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -25328,185 +25236,87 @@ var styles$r = StyleSheet.create({
     marginLeft: 45
   }
 });
+var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Choice, _extends({}, props, {
+  forwardedRef: ref
+})));
 
-class ChoiceNoneAbove extends React.Component {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "_choice", void 0);
-
-    _defineProperty(this, "focusInput", () => {
-      this._choice.focusInput();
-    });
-  }
+var _excluded$2 = ["showContent", "content", "forwardedRef"];
 
-  render() {
-    var choiceProps = _objectSpread2(_objectSpread2({}, this.props), {}, {
-      className: classNames(this.props.className, "none-of-above"),
-      content: this.props.showContent ? this.props.content :
-      /*#__PURE__*/
-      // We use a Renderer here because that is how
-      // `this.props.content` is wrapped otherwise.
-      // We pass in a key here so that we avoid a semi-spurious
-      // react warning when we render this in the same place
-      // as the previous choice content renderer.
-      // Note this destroys state, but since all we're doing
-      // is outputting "None of the above", that is okay.
-      React.createElement(Renderer, {
-        key: "noneOfTheAboveRenderer",
-        content: i18n._("None of the above")
-      }),
-      ref: el => this._choice = el
-    });
-
-    return /*#__PURE__*/React.createElement(Choice, choiceProps);
-  }
+function ChoiceNoneAbove(props) {
+  var {
+    showContent,
+    content,
+    forwardedRef
+  } = props,
+      rest = _objectWithoutProperties(props, _excluded$2);
+
+  var choiceProps = _objectSpread2(_objectSpread2({}, rest), {}, {
+    content: showContent ? content :
+    /*#__PURE__*/
+    // We use a Renderer here because that is how
+    // `this.props.content` is wrapped otherwise.
+    // We pass in a key here so that we avoid a semi-spurious
+    // react warning when we render this in the same place
+    // as the previous choice content renderer.
+    // Note this destroys state, but since all we're doing
+    // is outputting "None of the above", that is okay.
+    //
+    // todo(matthewc): this seems like way overkill
+    // just to render a string
+    React.createElement(Renderer, {
+      key: "noneOfTheAboveRenderer",
+      content: i18n._("None of the above")
+    })
+  });
 
+  return /*#__PURE__*/React.createElement(Choice$1, _extends({}, choiceProps, {
+    ref: forwardedRef
+  }));
 }
 
-_defineProperty(ChoiceNoneAbove, "propTypes", {
-  className: PropTypes.string,
-  content: PropTypes.node,
-  showContent: PropTypes.bool
-});
-
-_defineProperty(ChoiceNoneAbove, "defaultProps", {
+ChoiceNoneAbove.defaultProps = {
   showContent: true
-});
+};
+var ChoiceNoneAbove$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ChoiceNoneAbove, _extends({}, props, {
+  forwardedRef: ref
+})));
 
 var {
   captureScratchpadTouchStart: captureScratchpadTouchStart$2
-} = Util;
-var ChoicesType = PropTypes.arrayOf(PropTypes.shape({
-  // Indicates whether this choice is checked.
-  checked: PropTypes.bool,
-  // Indicates whether the user has "crossed out" this choice, meaning
-  // that they don't think it's correct. This value does not affect
-  // scoring or other behavior; it's just a note for the user's
-  // reference.
-  crossedOut: PropTypes.bool,
-  content: PropTypes.node,
-  rationale: PropTypes.node,
-  hasRationale: PropTypes.bool,
-  showRationale: PropTypes.bool,
-  showCorrectness: PropTypes.bool,
-  correct: PropTypes.bool,
-  originalIndex: PropTypes.number,
-  isNoneOfTheAbove: PropTypes.bool
-}));
-var radioBorderColor = radioBorderColor$2;
+} = Util; // exported for tests
 
-class BaseRadio extends React.Component {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "state", {
-      // TODO(mdr): This keeps the ID stable across re-renders on the
-      //     same machine, but, at time of writing, the server's state
-      //     isn't rehydrated to the client during SSR, so the server and
-      //     client will generate different IDs and cause a mismatch
-      //     during SSR :(
-      radioGroupName: _.uniqueId("perseus_radio_")
-    });
-
-    _defineProperty(this, "updateChoice", (choiceIndex, newValues) => {
-      // Get the baseline `checked` values. If we're checking a new answer
-      // and multiple-select is not on, we should clear all choices to be
-      // unchecked. Otherwise, we should copy the old checked values.
-      var newCheckedList;
-
-      if (newValues.checked && !this.props.multipleSelect) {
-        newCheckedList = this.props.choices.map(_ => false);
-      } else {
-        newCheckedList = this.props.choices.map(c => c.checked);
-      } // Get the baseline `crossedOut` values.
-
-
-      var newCrossedOutList = this.props.choices.map(c => c.crossedOut); // Update this choice's `checked` and `crossedOut` values.
-
-      newCheckedList[choiceIndex] = newValues.checked;
-      newCrossedOutList[choiceIndex] = newValues.crossedOut;
-      this.props.onChange({
-        checked: newCheckedList,
-        crossedOut: newCrossedOutList
+function getInstructionsText(multipleSelect, countChoices, numCorrect) {
+  if (multipleSelect) {
+    if (countChoices) {
+      return i18n._("Choose %(numCorrect)s answers:", {
+        numCorrect: numCorrect
       });
-    });
-
-    _defineProperty(this, "focus", i => {
-      // $FlowFixMe[incompatible-use]
-      // $FlowFixMe[prop-missing]
-      ReactDOM__default.findDOMNode(this.refs["radio" + (i || 0)]).focus(); // eslint-disable-line react/no-string-refs
-
-      return true;
-    });
-
-    _defineProperty(this, "getInstructionsText", () => {
-      if (this.props.multipleSelect) {
-        if (this.props.countChoices) {
-          return i18n._("Choose %(numCorrect)s answers:", {
-            numCorrect: this.props.numCorrect
-          });
-        }
-
-        return i18n._("Choose all answers that apply:");
-      }
-
-      return i18n._("Choose 1 answer:");
-    });
-
-    _defineProperty(this, "deselectEnabled", () => {
-      // We want to force enable deselect on mobile.
-      return this.props.apiOptions.isMobile || this.props.deselectEnabled;
-    });
-
-    _defineProperty(this, "goToChoice", newChoiceIndex => {
-      var numChoices = this.props.choices.length; // Wrap the newChoiceIndex around the start/end, if necessary.
-
-      if (newChoiceIndex < 0) {
-        newChoiceIndex += numChoices;
-      }
-
-      if (newChoiceIndex >= numChoices) {
-        newChoiceIndex -= numChoices;
-      } // Focus the new choice's input element.
-      // eslint-disable-next-line react/no-string-refs
-
-
-      var choiceInstance = this.refs["radio".concat(newChoiceIndex)];
-
-      if (!choiceInstance) {
-        Log.error("found no choice at index ".concat(newChoiceIndex, ", even after ") + "wrapping it to be within bounds", Errors.Internal, {
-          loggedMetadata: {
-            choices: JSON.stringify(this.props.choices)
-          }
-        });
-        return;
-      }
-
-      choiceInstance.focusInput(); // We aren't going to change any choices' crossed-out state, but we
-      // _are_ going to deselect all choices.
-
-      var newCrossedOutList = this.props.choices.map(c => c.crossedOut);
-      var newCheckedList = this.props.choices.map(c => false); // And, if the new choice isn't crossed out, we'll select it.
-
-      if (!this.props.choices[newChoiceIndex].crossedOut) {
-        newCheckedList[newChoiceIndex] = true;
-      }
+    }
 
-      this.props.onChange({
-        checked: newCheckedList,
-        crossedOut: newCrossedOutList
-      });
-    });
+    return i18n._("Choose all answers that apply:");
   }
 
-  componentDidUpdate(prevProps) {
-    var {
-      apiOptions,
-      choices,
-      isLastUsedWidget,
-      reviewModeRubric
-    } = this.props; // Switching into review mode can sometimes cause the selected answer
+  return i18n._("Choose 1 answer:");
+}
+
+function BaseRadio(props) {
+  var {
+    apiOptions,
+    reviewModeRubric,
+    choices,
+    editMode,
+    multipleSelect,
+    labelWrap,
+    countChoices,
+    numCorrect,
+    isLastUsedWidget,
+    registerFocusFunction
+  } = props; // useEffect doesn't have previous props
+
+  var prevReviewModeRubric = useRef();
+  var choiceRefs = useRef([]);
+  useEffect(() => {
+    // Switching into review mode can sometimes cause the selected answer
     // to scroll out of view - for example, when we reveal all those tall
     // rationales. This can be disorienting for the user.
     //
@@ -25519,17 +25329,25 @@ class BaseRadio extends React.Component {
     // the most recently used widget (because, if the user has since
     // touched something else, they're probably not trying to keep their
     // eye on this widget anymore).
-
-    if (apiOptions.canScrollPage && isLastUsedWidget && reviewModeRubric && !prevProps.reviewModeRubric) {
+    if (apiOptions.canScrollPage && isLastUsedWidget && reviewModeRubric && !prevReviewModeRubric.current) {
       var checkedIndex = choices.findIndex(c => c.checked);
 
       if (checkedIndex >= 0) {
-        var checkedNode = ReactDOM__default.findDOMNode( // eslint-disable-next-line react/no-string-refs
-        this.refs["radio" + checkedIndex]);
-        scrollElementIntoView(checkedNode);
+        var ref = choiceRefs.current[checkedIndex]; // note(matthew): we know this is only getting passed
+        // to a WB Clickable button, so we force it to be of
+        // type HTMLButtonElement
+
+        var anyNode = ReactDOM__default.findDOMNode(ref.current);
+        var buttonNode = anyNode;
+
+        if (buttonNode) {
+          scrollElementIntoView(buttonNode);
+        }
       }
     }
-  } // When a particular choice's `onChange` handler is called, indicating a
+
+    prevReviewModeRubric.current = reviewModeRubric;
+  }, [apiOptions, choices, isLastUsedWidget, reviewModeRubric]); // When a particular choice's `onChange` handler is called, indicating a
   // change in a single choice's values, we need to call our `onChange`
   // handler in order to notify our parent. However, our API with our parent
   // is that we always provide *all* values for *all* choices, even if just
@@ -25538,181 +25356,197 @@ class BaseRadio extends React.Component {
   // will usually cause the old answer to become unchecked.)
   //
   // So, given the new values for a particular choice, compute the new values
-  // for all choices, and pass them to `this.props.onChange`.
+  // for all choices, and pass them to `onChange`.
   //
   // `newValues` is an object with two keys: `checked` and `crossedOut`. Each
   // contains a boolean value specifying the new checked and crossed-out
   // value of this choice.
 
+  function updateChoice(choiceIndex, newValues) {
+    var {
+      multipleSelect,
+      choices,
+      onChange
+    } = props; // Get the baseline `checked` values. If we're checking a new answer
+    // and multiple-select is not on, we should clear all choices to be
+    // unchecked. Otherwise, we should copy the old checked values.
 
-  render() {
-    var inputType = this.props.multipleSelect ? "checkbox" : "radio";
-    var rubric = this.props.reviewModeRubric;
-    var reviewMode = !!rubric;
-    var styles = BaseRadio.styles;
-    var sat = this.props.apiOptions.satStyling;
-    var isMobile = this.props.apiOptions.isMobile;
-    var choices = this.props.choices;
-    var firstChoiceHighlighted = choices[0].highlighted;
-    var lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-    var className = classNames("perseus-widget-radio", !this.props.editMode && "perseus-rendered-radio", css(styles.radio, // SAT doesn't use the "responsive styling" as it conflicts
-    // with their custom theming.
-    !sat && styles.responsiveRadioContainer, !sat && firstChoiceHighlighted && isMobile && styles.radioContainerFirstHighlighted, !sat && lastChoiceHighlighted && isMobile && styles.radioContainerLastHighlighted, sat && styles.satRadio));
-    var instructionsClassName = classNames("instructions", css(styles.instructions, isMobile && styles.instructionsMobile));
-    var instructions = this.getInstructionsText();
-    var shouldShowInstructions = !sat;
-    var responsiveClassName = css(styles.responsiveFieldset);
-    var fieldset = /*#__PURE__*/React.createElement("fieldset", {
-      className: "perseus-widget-radio-fieldset ".concat(responsiveClassName)
-    }, /*#__PURE__*/React.createElement("legend", {
-      className: "perseus-sr-only"
-    }, instructions), shouldShowInstructions && /*#__PURE__*/React.createElement("div", {
-      className: instructionsClassName
-    }, instructions), /*#__PURE__*/React.createElement("ul", {
-      className: className,
-      style: {
-        listStyle: "none"
-      }
-    }, this.props.choices.map(function (choice, i) {
-      var Element = Choice;
-      var elementProps = {
-        ref: "radio".concat(i),
-        apiOptions: this.props.apiOptions,
-        checked: choice.checked,
-        crossedOut: choice.crossedOut,
-        previouslyAnswered: choice.previouslyAnswered,
-        reviewMode,
-        correct: choice.correct,
-        rationale: choice.rationale,
-        content: choice.content,
-        disabled: this.props.apiOptions.readOnly || choice.disabled,
-        editMode: this.props.editMode,
-        groupName: this.state.radioGroupName,
-        isLastChoice: i === this.props.choices.length - 1,
-        showCorrectness: reviewMode || !!choice.showCorrectness,
-        showRationale: choice.hasRationale && (reviewMode || choice.showRationale),
-        type: inputType,
-        pos: i,
-        deselectEnabled: this.deselectEnabled(),
-        onChange: newValues => {
-          this.updateChoice(i, newValues);
-        },
-        goToPrevChoice: () => this.goToChoice(i - 1),
-        goToNextChoice: () => this.goToChoice(i + 1)
-      };
+    var newCheckedList;
 
-      if (choice.isNoneOfTheAbove) {
-        Element = ChoiceNoneAbove;
+    if (newValues.checked && !multipleSelect) {
+      newCheckedList = choices.map(_ => false);
+    } else {
+      newCheckedList = choices.map(c => c.checked);
+    } // Get the baseline `crossedOut` values.
 
-        _.extend(elementProps, {
-          showContent: choice.revealNoneOfTheAbove
-        });
-      }
 
-      var nextChoice = this.props.choices[i + 1];
-      var nextChoiceHighlighted = !!nextChoice && nextChoice.highlighted;
-
-      var aphroditeClassName = checked => {
-        // Whether or not to show correctness borders
-        // for this choice and the next choice.
-        var satShowCorrectness = sat && reviewMode && checked;
-        var satShowCorrectnessNext = sat && reviewMode && nextChoice && nextChoice.checked;
-        return css(sharedStyles.aboveScratchpad, styles.item, !sat && styles.responsiveItem, !sat && checked && styles.selectedItem, !sat && checked && choice.highlighted && styles.aboveBackdrop, !sat && checked && choice.highlighted && this.props.apiOptions.isMobile && styles.aboveBackdropMobile, !sat && nextChoiceHighlighted && this.props.apiOptions.isMobile && styles.nextHighlighted, sat && styles.satRadioOption, satShowCorrectness && !choice.correct && styles.satRadioOptionIncorrect, satShowCorrectness && choice.correct && styles.satRadioOptionCorrect, satShowCorrectnessNext && !nextChoice.correct && styles.satRadioOptionNextIncorrect, satShowCorrectnessNext && nextChoice.correct && styles.satRadioOptionNextCorrect, sat && rubric && styles.satReviewRadioOption);
-      }; // HACK(abdulrahman): Preloads the selection-state
-      // css because of a bug that causes iOS to lag
-      // when selecting the button for the first time.
-
-
-      aphroditeClassName(true);
-      var className = classNames(aphroditeClassName(choice.checked), // TODO(aria): Make test case for these API
-      // classNames
-      ClassNames.RADIO.OPTION, choice.checked && ClassNames.RADIO.SELECTED, reviewMode && rubric.choices[i].correct && ClassNames.CORRECT, reviewMode && !rubric.choices[i].correct && ClassNames.INCORRECT); // In edit mode, the Choice renders a Div in order to
-      // allow for the contentEditable area to be selected
-      // (label forces any clicks inside to select the input
-      // element) We have to add some extra behavior to make
-      // sure that we can still check the choice.
-
-      var listElem = null;
-      var clickHandler = null;
-
-      if (this.props.editMode) {
-        clickHandler = e => {
-          // Traverse the parent nodes of the clicked
-          // element.
-          var elem = e.target;
-
-          while (elem && elem !== listElem) {
-            // If the clicked element is inside of the
-            // radio icon, then we want to trigger the
-            // check by flipping the choice of the icon.
-            if (elem.getAttribute("data-is-radio-icon")) {
-              this.updateChoice(i, {
-                checked: !choice.checked
-              });
-              return;
-            }
+    var newCrossedOutList = choices.map(c => c.crossedOut); // Update this choice's `checked` and `crossedOut` values.
+
+    newCheckedList[choiceIndex] = newValues.checked;
+    newCrossedOutList[choiceIndex] = newValues.crossedOut;
+    onChange({
+      checked: newCheckedList,
+      crossedOut: newCrossedOutList
+    });
+  } // register a callback with the parent that allows
+  // the parent to focus an individual choice
+
+
+  registerFocusFunction === null || registerFocusFunction === void 0 ? void 0 : registerFocusFunction(choiceIndex => {
+    var ref = choiceRefs.current[choiceIndex || 0]; // note(matthew): we know this is only getting passed
+    // to a WB Clickable button, so we force it to be of
+    // type HTMLButtonElement
+
+    var anyNode = ReactDOM__default.findDOMNode(ref.current);
+    var buttonNode = anyNode;
+
+    if (buttonNode) {
+      buttonNode.focus();
+    } else {
+      return false;
+    }
+
+    return true;
+  }); // some commonly used shorthands
+
+  var reviewMode = !!reviewModeRubric;
+  var sat = apiOptions.satStyling;
+  var isMobile = apiOptions.isMobile;
+  var firstChoiceHighlighted = choices[0].highlighted;
+  var lastChoiceHighlighted = choices[choices.length - 1].highlighted;
+  var className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$r.radio, // SAT doesn't use the "responsive styling" as it conflicts
+  // with their custom theming.
+  !sat && styles$r.responsiveRadioContainer, !sat && firstChoiceHighlighted && isMobile && styles$r.radioContainerFirstHighlighted, !sat && lastChoiceHighlighted && isMobile && styles$r.radioContainerLastHighlighted, sat && styles$r.satRadio));
+  var instructionsClassName = classNames("instructions", css(styles$r.instructions, isMobile && styles$r.instructionsMobile));
+  var instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
+  var shouldShowInstructions = !sat;
+  var responsiveClassName = css(styles$r.responsiveFieldset);
+  var fieldset = /*#__PURE__*/React.createElement("fieldset", {
+    className: "perseus-widget-radio-fieldset ".concat(responsiveClassName)
+  }, /*#__PURE__*/React.createElement("legend", {
+    className: "perseus-sr-only"
+  }, instructions), shouldShowInstructions && /*#__PURE__*/React.createElement("div", {
+    className: instructionsClassName,
+    "aria-hidden": "true"
+  }, instructions), /*#__PURE__*/React.createElement("ul", {
+    className: className,
+    style: {
+      listStyle: "none"
+    }
+  }, choices.map(function (choice, i) {
+    var Element = Choice$1;
+    var ref = /*#__PURE__*/React.createRef();
+    choiceRefs.current[i] = ref;
+    var elementProps = {
+      apiOptions: apiOptions,
+      multipleSelect: multipleSelect,
+      checked: choice.checked,
+      crossedOut: choice.crossedOut,
+      previouslyAnswered: choice.previouslyAnswered,
+      reviewMode,
+      correct: choice.correct,
+      rationale: choice.rationale,
+      content: choice.content,
+      disabled: apiOptions.readOnly || choice.disabled,
+      showCorrectness: reviewMode || !!choice.showCorrectness,
+      showRationale: choice.hasRationale && (reviewMode || choice.showRationale),
+      pos: i,
+      onChange: newValues => {
+        updateChoice(i, newValues);
+      },
+      ref
+    };
+
+    if (choice.isNoneOfTheAbove) {
+      Element = ChoiceNoneAbove$1;
+
+      _.extend(elementProps, {
+        showContent: choice.revealNoneOfTheAbove
+      });
+    }
+
+    var nextChoice = choices[i + 1];
+    var nextChoiceHighlighted = !!nextChoice && nextChoice.highlighted;
+
+    var aphroditeClassName = checked => {
+      // Whether or not to show correctness borders
+      // for this choice and the next choice.
+      var satShowCorrectness = sat && reviewMode && checked;
+      var satShowCorrectnessNext = sat && reviewMode && nextChoice && nextChoice.checked;
+      return css(sharedStyles.aboveScratchpad, styles$r.item, !sat && styles$r.responsiveItem, !sat && checked && styles$r.selectedItem, !sat && checked && choice.highlighted && styles$r.aboveBackdrop, !sat && checked && choice.highlighted && apiOptions.isMobile && styles$r.aboveBackdropMobile, !sat && nextChoiceHighlighted && apiOptions.isMobile && styles$r.nextHighlighted, sat && styles$r.satRadioOption, satShowCorrectness && !choice.correct && styles$r.satRadioOptionIncorrect, satShowCorrectness && choice.correct && styles$r.satRadioOptionCorrect, satShowCorrectnessNext && !nextChoice.correct && styles$r.satRadioOptionNextIncorrect, satShowCorrectnessNext && nextChoice.correct && styles$r.satRadioOptionNextCorrect, sat && reviewModeRubric && styles$r.satReviewRadioOption);
+    }; // HACK(abdulrahman): Preloads the selection-state
+    // css because of a bug that causes iOS to lag
+    // when selecting the button for the first time.
+
 
-            elem = elem.parentNode;
+    aphroditeClassName(true);
+    var correctnessClass; // reviewMode is only true if there's a rubric
+    // but Flow doesn't understand that
+
+    if (reviewMode && reviewModeRubric) {
+      correctnessClass = reviewModeRubric.choices[i].correct ? ClassNames.CORRECT : ClassNames.INCORRECT;
+    }
+
+    var className = classNames(aphroditeClassName(choice.checked), // TODO(aria): Make test case for these API
+    // classNames
+    ClassNames.RADIO.OPTION, choice.checked && ClassNames.RADIO.SELECTED, correctnessClass); // In edit mode, the Choice renders a Div in order to
+    // allow for the contentEditable area to be selected
+    // (label forces any clicks inside to select the input
+    // element) We have to add some extra behavior to make
+    // sure that we can still check the choice.
+
+    var listElem = null;
+    var clickHandler = null;
+
+    if (editMode) {
+      clickHandler = e => {
+        // Traverse the parent nodes of the clicked
+        // element.
+        var elem = e.target;
+
+        while (elem && elem !== listElem) {
+          // If the clicked element is inside of the
+          // radio icon, then we want to trigger the
+          // check by flipping the choice of the icon.
+          if (elem.getAttribute("data-is-radio-icon")) {
+            this.updateChoice(i, {
+              checked: !choice.checked,
+              crossedOut: choice.crossedOut
+            });
+            return;
           }
-        };
-      } // TODO(mattdr): Index isn't a *good* choice of key
-      // here; is there a better one? Can we use choice
-      // content somehow? Would changing our choice of key
-      // somehow break something happening inside a choice's
-      // child Renderers, by changing when we mount/unmount?
 
+          elem = elem.parentNode;
+        }
+      };
+    } // TODO(mattdr): Index isn't a *good* choice of key
+    // here; is there a better one? Can we use choice
+    // content somehow? Would changing our choice of key
+    // somehow break something happening inside a choice's
+    // child Renderers, by changing when we mount/unmount?
 
-      return /*#__PURE__*/React.createElement("li", {
-        key: i,
-        ref: e => listElem = e,
-        className: className,
-        onClick: clickHandler,
-        onTouchStart: !this.props.labelWrap ? null : captureScratchpadTouchStart$2
-      }, /*#__PURE__*/React.createElement(Element, elementProps));
-    }, this))); // Allow for horizontal scrolling if content is too wide, which may be
-    // an issue especially on phones.
-    // This is disabled in SAT, since it conflicts with their theming.
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(!sat && styles.responsiveContainer)
-    }, fieldset);
-  }
+    return /*#__PURE__*/React.createElement("li", {
+      key: i,
+      ref: e => listElem = e,
+      className: className,
+      onClick: clickHandler,
+      onTouchStart: !labelWrap ? null : captureScratchpadTouchStart$2
+    }, /*#__PURE__*/React.createElement(Element, elementProps));
+  }, this))); // Allow for horizontal scrolling if content is too wide, which may be
+  // an issue especially on phones.
+  // This is disabled in SAT, since it conflicts with their theming.
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: css(!sat && styles$r.responsiveContainer)
+  }, fieldset);
 }
 
-_defineProperty(BaseRadio, "propTypes", {
-  apiOptions: PropTypes.shape({
-    readOnly: PropTypes.bool,
-    satStyling: PropTypes.bool,
-    isMobile: PropTypes.bool,
-    styling: PropTypes.shape({
-      radioStyleVersion: PropTypes.oneOf(["intermediate", "final"])
-    }),
-    canScrollPage: PropTypes.bool
-  }),
-  choices: ChoicesType,
-  deselectEnabled: PropTypes.bool,
-  editMode: PropTypes.bool,
-  labelWrap: PropTypes.bool,
-  countChoices: PropTypes.bool,
-  numCorrect: PropTypes.number,
-  multipleSelect: PropTypes.bool,
-  reviewModeRubric: PropTypes.shape({
-    choices: ChoicesType
-  }),
-  // A callback indicating that this choice has changed. Its argument is
-  // an object with two keys: `checked` and `crossedOut`. Each contains
-  // an array of boolean values, specifying the new checked and
-  // crossed-out value of each choice.
-  onChange: PropTypes.func,
-  // Whether this widget was the most recently used widget in this
-  // Renderer. Determines whether we'll auto-scroll the page upon
-  // entering review mode.
-  isLastUsedWidget: PropTypes.bool
-});
-
-_defineProperty(BaseRadio, "styles", StyleSheet.create({
-  // eslint-disable-next-line react-native/no-unused-styles
+BaseRadio.defaultProps = {
+  editMode: false,
+  multipleSelect: false
+};
+var styles$r = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -25722,7 +25556,6 @@ _defineProperty(BaseRadio, "styles", StyleSheet.create({
     fontWeight: "bold",
     marginBottom: 16
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   instructionsMobile: {
     fontSize: 18,
     [mediaQueries.smOrSmaller]: {
@@ -25736,36 +25569,30 @@ _defineProperty(BaseRadio, "styles", StyleSheet.create({
       fontSize: 20
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   radio: {
     // Avoid centering
     width: "100%"
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   responsiveRadioContainer: {
-    borderBottom: "1px solid ".concat(radioBorderColor),
-    borderTop: "1px solid ".concat(radioBorderColor),
+    borderBottom: "1px solid ".concat(radioBorderColor$1),
+    borderTop: "1px solid ".concat(radioBorderColor$1),
     width: "auto",
     [mediaQueries.smOrSmaller]: {
       marginLeft: negativePhoneMargin,
       marginRight: negativePhoneMargin
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   radioContainerFirstHighlighted: {
     borderTop: "1px solid rgba(0, 0, 0, 0)"
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   radioContainerLastHighlighted: {
     borderBottom: "1px solid rgba(0, 0, 0, 0)"
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   satRadio: {
     background: "none",
     marginLeft: 0,
     userSelect: "none"
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   satRadioOption: {
     margin: 0,
     padding: 0,
@@ -25774,57 +25601,40 @@ _defineProperty(BaseRadio, "styles", StyleSheet.create({
       borderTop: "1px solid #ccc"
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   satRadioOptionCorrect: {
     borderBottomColor: satCorrectBorderColor,
     ":first-child": {
       borderTopColor: satCorrectBorderColor
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   satRadioOptionIncorrect: {
     borderBottomColor: satIncorrectBorderColor,
     ":first-child": {
       borderTopColor: satIncorrectBorderColor
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   satRadioOptionNextCorrect: {
     borderBottomColor: satCorrectBorderColor
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   satRadioOptionNextIncorrect: {
     borderBottomColor: satIncorrectBorderColor
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   satReviewRadioOption: {
     pointerEvents: "none"
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   item: {
     marginLeft: 20
   },
-  // eslint-disable-next-line react-native/no-unused-styles
-  inlineItem: {
-    display: "inline-block",
-    paddingLeft: 20,
-    verticalAlign: "middle" // See http://stackoverflow.com/q/8120466 for explanation of
-    // why vertical align property is needed
-
-  },
-  // eslint-disable-next-line react-native/no-unused-styles
   responsiveItem: {
     marginLeft: 0,
     padding: 0,
     ":not(:last-child)": {
-      borderBottom: "1px solid ".concat(radioBorderColor)
+      borderBottom: "1px solid ".concat(radioBorderColor$1)
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   selectedItem: {
     background: "white"
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   aboveBackdrop: {
     position: "relative",
     // HACK(emily): We want selected choices to show up above our
@@ -25833,20 +25643,17 @@ _defineProperty(BaseRadio, "styles", StyleSheet.create({
     // coordinated between here and webapp. :(
     zIndex: 1062
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   aboveBackdropMobile: {
     boxShadow: "0 0 4px 0 rgba(0, 0, 0, 0.2)," + "0 0 2px 0 rgba(0, 0, 0, 0.1)",
     ":not(:last-child)": {
       borderBottom: "1px solid rgba(0, 0, 0, 0)"
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   nextHighlighted: {
     ":not(:last-child)": {
       borderBottom: "1px solid rgba(0, 0, 0, 0)"
     }
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   responsiveContainer: {
     overflow: "auto",
     marginLeft: negativePhoneMargin,
@@ -25854,22 +25661,22 @@ _defineProperty(BaseRadio, "styles", StyleSheet.create({
     paddingLeft: phoneMargin // paddingRight is handled by responsiveFieldset
 
   },
-  // eslint-disable-next-line react-native/no-unused-styles
   responsiveFieldset: {
     paddingRight: phoneMargin
   }
-}));
-
-_defineProperty(BaseRadio, "defaultProps", {
-  editMode: false
 });
 
 class Radio$1 extends React.Component {
   constructor() {
+    var _this;
+
     super(...arguments);
+    _this = this;
+
+    _defineProperty(this, "focusFunction", void 0);
 
-    _defineProperty(this, "_renderRenderer", content => {
-      content = content || "";
+    _defineProperty(this, "_renderRenderer", function () {
+      var content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
       var nextPassageRefId = 1;
       var widgets = {};
       var modContent = content.replace(/\{\{passage-ref (\d+) (\d+)(?: "([^"]*)")?\}\}/g, (match, passageNum, refNum, summaryText) => {
@@ -25901,19 +25708,14 @@ class Radio$1 extends React.Component {
         key: "choiceContentRenderer",
         content: modContent,
         widgets: widgets,
-        findExternalWidgets: this.props.findWidgets,
+        findExternalWidgets: _this.props.findWidgets,
         alwaysUpdate: true,
-        linterContext: _objectSpread2(_objectSpread2({}, this.props.linterContext), {}, {
+        linterContext: _objectSpread2(_objectSpread2({}, _this.props.linterContext), {}, {
           blockHighlight: true
         })
       });
     });
 
-    _defineProperty(this, "focus", i => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.baseRadio.focus(i);
-    });
-
     _defineProperty(this, "updateChoices", newValueLists => {
       var {
         choiceStates,
@@ -25924,24 +25726,17 @@ class Radio$1 extends React.Component {
       // should clone the old `choiceStates` objects, in preparation to
       // mutate them.
 
-      var newChoiceStates;
-
-      if (choiceStates) {
-        newChoiceStates = choiceStates.map(state => _objectSpread2({}, state));
-      } else {
-        newChoiceStates = choices.map(() => ({
-          selected: false,
-          crossedOut: false,
-          highlighted: false,
-          rationaleShown: false,
-          correctnessShown: false,
-          previouslyAnswered: false,
-          readOnly: false
-        }));
-      } // Mutate the new `choiceState` objects, according to the new `checked`
+      var newChoiceStates = choiceStates ? choiceStates.map(state => _objectSpread2({}, state)) : choices.map(() => ({
+        selected: false,
+        crossedOut: false,
+        highlighted: false,
+        rationaleShown: false,
+        correctnessShown: false,
+        previouslyAnswered: false,
+        readOnly: false
+      })); // Mutate the new `choiceState` objects, according to the new `checked`
       // and `crossedOut` values provided in `newValueLists`.
 
-
       newChoiceStates.forEach((choiceState, i) => {
         choiceState.selected = newValueLists.checked[i];
         choiceState.crossedOut = newValueLists.crossedOut[i];
@@ -26005,14 +25800,47 @@ class Radio$1 extends React.Component {
     });
   }
 
+  // TODO(LP-10672): I think this might be unused right now. I can't find anywhere
+  // that we pass a value to `.focus()` and it seems to have been used for
+  // adding hints when editing.
+  // See: https://github.com/Khan/perseus/blame/e18582b4b69959270b90e237ef1813899711ddfa/src/widgets/radio.js#L169
+  focus(choiceIndex) {
+    if (this.focusFunction) {
+      return this.focusFunction(choiceIndex);
+    }
+
+    return false;
+  } // lets BaseRadio regiser a focus callback so widget
+  // can focus an individual choice
+
+
+  registerFocusFunction(fun) {
+    this.focusFunction = fun;
+  } // When `BaseRadio`'s `onChange` handler is called, indicating a change in
+  // our choices' state, we need to call our `onChange` handler in order to
+  // persist those changes in the item's Perseus state.
+  //
+  // So, given the new values for each choice, construct the new
+  // `choiceStates` objects, and pass them to `this.props.onChange`.
+  //
+  // `newValueLists` is an object with two keys: `checked` and `crossedOut`.
+  // Each contains an array of boolean values, specifying the new checked and
+  // crossed-out value of each choice.
+  //
+  // NOTE(mdr): This method expects to be auto-bound. If this component is
+  //     converted to an ES6 class, take care to auto-bind this method!
+
+
   render() {
-    var choices = this.props.choices;
+    var {
+      choices
+    } = this.props;
     var choiceStates;
 
     if (this.props.static) {
-      choiceStates = _.map(choices, val => ({
-        selected: val.correct,
-        crossedOut: val.crossedOut,
+      choiceStates = choices.map(choice => ({
+        selected: !!choice.correct,
+        crossedOut: false,
         readOnly: true,
         highlighted: false,
         rationaleShown: true,
@@ -26020,12 +25848,12 @@ class Radio$1 extends React.Component {
         previouslyAnswered: false
       }));
     } else if (this.props.choiceStates) {
-      choiceStates = this.props.choiceStates; // $FlowFixMe[prop-missing]
+      choiceStates = this.props.choiceStates;
     } else if (this.props.values) {
       // Support legacy choiceStates implementation
 
       /* istanbul ignore next - props.values is deprecated */
-      choiceStates = _.map(this.props.values, val => ({
+      choiceStates = this.props.values.map(val => ({
         selected: val,
         crossedOut: false,
         readOnly: false,
@@ -26035,7 +25863,7 @@ class Radio$1 extends React.Component {
         previouslyAnswered: false
       }));
     } else {
-      choiceStates = _.map(choices, () => ({
+      choiceStates = choices.map(() => ({
         selected: false,
         crossedOut: false,
         readOnly: false,
@@ -26046,7 +25874,7 @@ class Radio$1 extends React.Component {
       }));
     }
 
-    choices = _.map(choices, (choice, i) => {
+    var choicesProp = choices.map((choice, i) => {
       var content = choice.isNoneOfTheAbove && !choice.content ? // we use i18n._ instead of $_ here because the content
       // sent to a renderer needs to be a string, not a react
       // node (/renderable/fragment).
@@ -26074,37 +25902,36 @@ class Radio$1 extends React.Component {
         // TODO(emily): Come up with a more comprehensive way to solve
         // this sort of "serialized state breaks when internal
         // structure changes" problem.
-        correct: typeof choice.correct === "undefined" ? !!reviewChoice && reviewChoice.correct : choice.correct,
+        correct: choice.correct === undefined ? !!reviewChoice && !!reviewChoice.correct : choice.correct,
         disabled: readOnly,
         hasRationale: !!choice.clue,
         rationale: this._renderRenderer(choice.clue),
         showRationale: rationaleShown,
         showCorrectness: correctnessShown,
-        isNoneOfTheAbove: choice.isNoneOfTheAbove,
-        revealNoneOfTheAbove: this.props.questionCompleted && selected,
+        isNoneOfTheAbove: !!choice.isNoneOfTheAbove,
+        revealNoneOfTheAbove: !!(this.props.questionCompleted && selected),
         crossedOut,
         highlighted,
         previouslyAnswered: previouslyAnswered
       };
     });
-    return /*#__PURE__*/React.createElement(BaseRadio // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "baseRadio",
+    return /*#__PURE__*/React.createElement(BaseRadio, {
       labelWrap: true,
       multipleSelect: this.props.multipleSelect,
       countChoices: this.props.countChoices,
       numCorrect: this.props.numCorrect,
-      choices: choices,
+      choices: choicesProp,
       onChange: this.updateChoices,
       reviewModeRubric: this.props.reviewModeRubric,
       deselectEnabled: this.props.deselectEnabled,
       apiOptions: this.props.apiOptions,
-      isLastUsedWidget: this.props.isLastUsedWidget
+      isLastUsedWidget: this.props.isLastUsedWidget,
+      registerFocusFunction: i => this.registerFocusFunction(i)
     });
   }
 
   static validate(userInput, rubric) {
-    var numSelected = _.reduce(userInput.choicesSelected, (sum, selected) => {
+    var numSelected = userInput.choicesSelected.reduce((sum, selected) => {
       return sum + (selected ? 1 : 0);
     }, 0);
 
@@ -26113,10 +25940,9 @@ class Radio$1 extends React.Component {
         type: "invalid",
         message: null
       };
-    } // $FlowFixMe[invalid-compare]
-
+    }
 
-    if (userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
+    if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
       return {
         type: "invalid",
         message: i18n._("Please choose the correct number of answers.")
@@ -26129,14 +25955,12 @@ class Radio$1 extends React.Component {
         message: i18n._("'None of the above' may not be selected " + "when other answers are selected.")
       };
     }
-    /* jshint -W018 */
 
-
-    var correct = _.all(userInput.choicesSelected, (selected, i) => {
+    var correct = userInput.choicesSelected.every((selected, i) => {
       var isCorrect;
 
       if (userInput.noneOfTheAboveIndex === i) {
-        isCorrect = _.all(rubric.choices, (choice, j) => {
+        isCorrect = rubric.choices.every((choice, j) => {
           return i === j || !choice.correct;
         });
       } else {
@@ -26145,9 +25969,6 @@ class Radio$1 extends React.Component {
 
       return isCorrect === selected;
     });
-    /* jshint +W018 */
-
-
     return {
       type: "points",
       earned: correct ? 1 : 0,
@@ -26169,9 +25990,7 @@ class Radio$1 extends React.Component {
       var numCorrect = props.numCorrect;
 
       for (var i = 0; i < choicesSelected.length; i++) {
-        // $FlowFixMe[prop-missing]
-        var index = props.choices[i].originalIndex; // $FlowFixMe[incompatible-use]
-
+        var index = props.choices[i].originalIndex;
         choicesSelected[index] = choiceStates[i].selected;
 
         if (props.choices[i].isNoneOfTheAbove) {
@@ -26192,31 +26011,35 @@ class Radio$1 extends React.Component {
       }; // Support legacy choiceState implementation
     }
     /* istanbul ignore if - props.values is deprecated */
-    // $FlowFixMe[prop-missing]
 
 
-    if (props.values) {
+    var {
+      values
+    } = props;
+
+    if (values) {
       var _noneOfTheAboveIndex = null;
       var _noneOfTheAboveSelected = false;
-      var values = props.values.slice();
+      var _choicesSelected = [...values];
       var _countChoices = props.countChoices;
       var _numCorrect = props.numCorrect;
+      var valuesLength = values.length;
 
-      for (var _i = 0; _i < props.values.length; _i++) {
+      for (var _i = 0; _i < valuesLength; _i++) {
         var _index = props.choices[_i].originalIndex;
-        values[_index] = props.values[_i];
+        _choicesSelected[_index] = values[_i];
 
         if (props.choices[_i].isNoneOfTheAbove) {
           _noneOfTheAboveIndex = _index;
 
-          if (values[_i]) {
+          if (_choicesSelected[_i]) {
             _noneOfTheAboveSelected = true;
           }
         }
       }
 
       return {
-        choicesSelected: values,
+        choicesSelected: _choicesSelected,
         noneOfTheAboveIndex: _noneOfTheAboveIndex,
         noneOfTheAboveSelected: _noneOfTheAboveSelected,
         countChoices: _countChoices,
@@ -26226,15 +26049,14 @@ class Radio$1 extends React.Component {
 
 
     return {
-      choicesSelected: _.map(props.choices, () => false)
+      choicesSelected: props.choices.map(() => false)
     };
   }
 
 }
 
 _defineProperty(Radio$1, "defaultProps", {
-  choices: [{}],
-  displayCount: null,
+  choices: [],
   multipleSelect: false,
   countChoices: false,
   deselectEnabled: false,
@@ -26265,14 +26087,14 @@ var _choiceTransform = (widgetOptions, problemNum) => {
 
   var _addNoneOfAbove = function _addNoneOfAbove(choices) {
     var noneOfTheAbove = null;
-
-    var newChoices = _.reject(choices, function (choice, index) {
+    var newChoices = choices.filter((choice, index) => {
       if (choice.isNoneOfTheAbove) {
         noneOfTheAbove = choice;
-        return true;
+        return false;
       }
-    }); // Place the "None of the above" options last
 
+      return true;
+    }); // Place the "None of the above" options last
 
     if (noneOfTheAbove) {
       newChoices.push(noneOfTheAbove);
@@ -26292,9 +26114,8 @@ var _choiceTransform = (widgetOptions, problemNum) => {
   }; // Add meta-information to choices
 
 
-  var choices = widgetOptions.choices.slice();
-  choices = _.map(choices, (choice, i) => {
-    return _.extend({}, choice, {
+  var choices = widgetOptions.choices.map((choice, i) => {
+    return _objectSpread2(_objectSpread2({}, choice), {}, {
       originalIndex: i,
       correct: Boolean(choice.correct)
     });
@@ -26882,7 +26703,7 @@ class Definition extends React.Component {
       }, /*#__PURE__*/React.createElement("span", {
         className: "perseus-widget-definition"
       }, /*#__PURE__*/React.createElement(Button, {
-        size: "small",
+        size: "medium",
         kind: "tertiary",
         onClick: () => {
           this.props.trackInteraction();
@@ -29099,6 +28920,8 @@ class Group extends React.Component {
     super(...arguments);
     _this = this;
 
+    _defineProperty(this, "rendererRef", void 0);
+
     _defineProperty(this, "change", function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -29108,56 +28931,66 @@ class Group extends React.Component {
     });
 
     _defineProperty(this, "getUserInput", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.getUserInput();
+      var _this$rendererRef;
+
+      return (_this$rendererRef = this.rendererRef) === null || _this$rendererRef === void 0 ? void 0 : _this$rendererRef.getUserInput();
     });
 
     _defineProperty(this, "getSerializedState", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.getSerializedState();
+      var _this$rendererRef2;
+
+      return (_this$rendererRef2 = this.rendererRef) === null || _this$rendererRef2 === void 0 ? void 0 : _this$rendererRef2.getSerializedState();
     });
 
     _defineProperty(this, "restoreSerializedState", (state, callback) => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.restoreSerializedState(state, callback); // Tell our renderer that we have no props to change
+      var _this$rendererRef3;
+
+      (_this$rendererRef3 = this.rendererRef) === null || _this$rendererRef3 === void 0 ? void 0 : _this$rendererRef3.restoreSerializedState(state, callback); // Tell our renderer that we have no props to change
       // (all our changes were in state):
 
       return null;
     });
 
     _defineProperty(this, "simpleValidate", rubric => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.score();
+      var _this$rendererRef4;
+
+      return (_this$rendererRef4 = this.rendererRef) === null || _this$rendererRef4 === void 0 ? void 0 : _this$rendererRef4.score();
     });
 
     _defineProperty(this, "getInputPaths", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.getInputPaths();
+      var _this$rendererRef5;
+
+      return (_this$rendererRef5 = this.rendererRef) === null || _this$rendererRef5 === void 0 ? void 0 : _this$rendererRef5.getInputPaths();
     });
 
-    _defineProperty(this, "setInputValue", (path, newValue, cb) => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.setInputValue(path, newValue, cb);
+    _defineProperty(this, "setInputValue", (path, newValue, callback) => {
+      var _this$rendererRef6;
+
+      return (_this$rendererRef6 = this.rendererRef) === null || _this$rendererRef6 === void 0 ? void 0 : _this$rendererRef6.setInputValue(path, newValue, callback);
     });
 
     _defineProperty(this, "focus", () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.renderer.focus();
+      var _this$rendererRef7;
+
+      return (_this$rendererRef7 = this.rendererRef) === null || _this$rendererRef7 === void 0 ? void 0 : _this$rendererRef7.focus();
     });
 
     _defineProperty(this, "focusInputPath", path => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.focusPath(path);
+      var _this$rendererRef8;
+
+      (_this$rendererRef8 = this.rendererRef) === null || _this$rendererRef8 === void 0 ? void 0 : _this$rendererRef8.focusPath(path);
     });
 
     _defineProperty(this, "blurInputPath", path => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.blurPath(path);
+      var _this$rendererRef9;
+
+      (_this$rendererRef9 = this.rendererRef) === null || _this$rendererRef9 === void 0 ? void 0 : _this$rendererRef9.blurPath(path);
     });
 
     _defineProperty(this, "showRationalesForCurrentlySelectedChoices", () => {
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.renderer.showRationalesForCurrentlySelectedChoices();
+      var _this$rendererRef10;
+
+      (_this$rendererRef10 = this.rendererRef) === null || _this$rendererRef10 === void 0 ? void 0 : _this$rendererRef10.showRationalesForCurrentlySelectedChoices();
     });
   }
 
@@ -29169,7 +29002,9 @@ class Group extends React.Component {
   }
 
   render() {
-    var apiOptions = _.extend({}, ApiOptions.defaults, this.props.apiOptions, {
+    var _this$rendererRef11;
+
+    var apiOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, ApiOptions.defaults), this.props.apiOptions), {}, {
       // Api Rewriting to support correct onFocus/onBlur
       // events for the mobile API
       onFocusChange: (newFocus, oldFocus) => {
@@ -29191,8 +29026,8 @@ class Group extends React.Component {
     // really we should have a more unidirectional flow. TODO(marcia): fix.
 
 
-    var number = _.indexOf(this.props.findWidgets("group"), this);
-
+    var groupWidgets = this.props.findWidgets("group");
+    var number = groupWidgets.indexOf(this);
     var problemNumComponent = this.props.apiOptions.groupAnnotator(number, this.props.widgetId); // This is a little strange because the id of the widget that actually
     // changed is going to be lost in favor of the group widget's id. The
     // widgets prop also wasn't actually changed, and this only serves to
@@ -29200,15 +29035,12 @@ class Group extends React.Component {
     // has occurred.
 
     var onInteractWithWidget = id => {
-      // eslint-disable-next-line react/no-string-refs
-      if (this.refs.renderer) {
-        // eslint-disable-next-line react/no-string-refs
-        this.change("widgets", this.refs.renderer.props.widgets);
+      if (this.rendererRef) {
+        this.change("widgets", this.rendererRef.props.widgets);
       }
-    }; // eslint-disable-next-line react/no-string-refs
-
+    };
 
-    var score = this.refs.renderer && this.refs.renderer.score();
+    var score = (_this$rendererRef11 = this.rendererRef) === null || _this$rendererRef11 === void 0 ? void 0 : _this$rendererRef11.score();
     var isValid = score && score.type !== "invalid";
     var isInvalid = score && score.type === "invalid"; // TODO(mdr): Widgets inside this Renderer are not discoverable through
     //     the parent Renderer's `findWidgets` function.
@@ -29219,15 +29051,17 @@ class Group extends React.Component {
         "perseus-group-valid-answer": isValid,
         "perseus-group-invalid-answer": isInvalid
       })
-    }, problemNumComponent, /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "renderer",
+    }, problemNumComponent, /*#__PURE__*/React.createElement(Renderer, {
+      content: this.props.content,
+      widgets: this.props.widgets,
+      images: this.props.images,
+      ref: _ref => this.rendererRef = _ref,
       apiOptions: apiOptions,
       findExternalWidgets: this.props.findWidgets,
       reviewMode: !!this.props.reviewModeRubric,
       onInteractWithWidget: onInteractWithWidget,
       linterContext: this.props.linterContext
-    })), this.props.icon && /*#__PURE__*/React.createElement("div", {
+    }), this.props.icon && /*#__PURE__*/React.createElement("div", {
       className: "group-icon"
     }, this.props.icon));
   }
@@ -29242,7 +29076,7 @@ _defineProperty(Group, "defaultProps", {
 });
 
 var traverseChildWidgets$1 = function traverseChildWidgets(props, traverseRenderer) {
-  return _.extend({}, props, traverseRenderer(props));
+  return _objectSpread2(_objectSpread2({}, props), traverseRenderer(props));
 };
 
 var Group$1 = {
@@ -41132,43 +40966,23 @@ var styles$9 = StyleSheet.create({
   }
 });
 
-var getLineHeightForNode = ($line1, $line2) => {
-  return $line2.offset().top - $line1.offset().top;
+var getLineHeightForNode = (line1, line2) => {
+  return $(line2).offset().top - $(line1).offset().top;
 };
 
-var START_REF_PREFIX = "start-ref-";
-var END_REF_PREFIX = "end-ref-";
-var REF_STYLE = {
-  display: "inline-block",
-  width: 0,
-  visibility: "hidden"
-};
-var LABEL_OUTER_STYLE = {
-  // for some reason we need these to keep the nbsp from wrapping when the
-  // inner circle/square is display: inline-block
-  display: "inline",
-  whiteSpace: "nowrap"
-};
-var SQUARE_LABEL_STYLE = {
-  display: "inline-block",
-  color: "rgb(255, 255, 255)",
-  backgroundColor: "rgb(90, 90, 90)",
-  paddingLeft: 10,
-  paddingRight: 10,
-  userSelect: "none",
-  WebkitUserSelect: "none"
-};
-var CIRCLE_LABEL_STYLE = {
-  display: "inline-block",
-  color: "rgb(255, 255, 255)",
-  backgroundColor: "rgb(90, 90, 90)",
-  userSelect: "none",
-  WebkitUserSelect: "none",
-  width: 22,
-  height: 22,
-  borderRadius: "50%",
-  textAlign: "center"
-};
+function getInitialParseState() {
+  return {
+    currentRef: [],
+    useRefs: true,
+    lastRef: 0,
+    firstSentenceRef: null,
+    firstQuestionRef: null,
+    lastFootnote: {
+      id: 0,
+      text: ""
+    }
+  };
+}
 
 class RefStart extends React.Component {
   constructor() {
@@ -41187,10 +41001,6 @@ class RefStart extends React.Component {
 
 }
 
-_defineProperty(RefStart, "propTypes", {
-  refContent: PropTypes.node.isRequired
-});
-
 class RefEnd extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("span", {
@@ -41201,20 +41011,11 @@ class RefEnd extends React.Component {
 }
 
 var rules = {
-  // $FlowFixMe[prop-missing]
-  // $FlowFixMe[incompatible-use]
   newline: SimpleMarkdown.defaultRules.newline,
-  // $FlowFixMe[prop-missing]
-  // $FlowFixMe[incompatible-use]
   paragraph: SimpleMarkdown.defaultRules.paragraph,
-  // $FlowFixMe[prop-missing]
-  // $FlowFixMe[incompatible-use]
   escape: SimpleMarkdown.defaultRules.escape,
   passageFootnote: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.1,
-    // $FlowFixMe[prop-missing]
     match: SimpleMarkdown.inlineRegex(/^\^/),
     parse: (capture, _parse, state) => {
       // if no footnotes have been seen, we're id 1. otherwise,
@@ -41243,10 +41044,8 @@ var rules = {
     }
   },
   refStart: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.2,
-    match: function match(source, state) {
+    match: function match(source) {
       var capture = /^\{\{/.exec(source);
 
       if (capture) {
@@ -41277,12 +41076,14 @@ var rules = {
           }
 
           closeIndex++;
-        }
-
-        var refText = source.slice(2, closeIndex); // A "magic" capture that matches the opening {{
+        } // A "magic" capture that matches the opening {{
         // but captures the full ref text internally :D
+        // unfortunately the "magic" makes Flow upset,
+        // so there's this questionable workaround
 
-        return [capture[0], refText];
+
+        capture[1] = source.slice(2, closeIndex);
+        return capture;
       }
 
       return null;
@@ -41306,7 +41107,7 @@ var rules = {
         // to make those refs into react refs on the
         // passage, for instance!
         useRefs: false
-      }, INITIAL_PARSE_STATE));
+      }, getInitialParseState()));
 
       return {
         ref: ref,
@@ -41314,26 +41115,27 @@ var rules = {
       };
     },
     react: (node, output, state) => {
-      if (node.ref == null) {
+      var ref = node.ref;
+
+      if (ref == null) {
         return null;
       } // We don't pass state here because this is parsed
       // and output out-of-band. We don't want to affect
       // our state by the double-output here :).
 
 
-      var refContent = output(node.refContent, {});
+      var refContent = output(node.refContent, {}); // note(matthewc) the refs created here become the refs
+      // pulled from `this.refs` in passage.jsx
+
       return /*#__PURE__*/React.createElement(RefStart, {
-        ref: START_REF_PREFIX + node.ref,
-        key: START_REF_PREFIX + node.ref,
+        ref: START_REF_PREFIX + ref,
+        key: START_REF_PREFIX + ref,
         refContent: refContent
       });
     }
   },
   refEnd: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.3,
-    // $FlowFixMe[prop-missing]
     match: SimpleMarkdown.inlineRegex(/^\}\}/),
     parse: (capture, _parse3, state) => {
       if (!state.useRefs) {
@@ -41349,6 +41151,8 @@ var rules = {
     },
     react: (node, output, state) => {
       if (node.ref != null) {
+        // note(matthewc) the refs created here become the refs
+        // pulled from `this.refs` in passage.jsx
         return /*#__PURE__*/React.createElement(RefEnd, {
           ref: END_REF_PREFIX + node.ref,
           key: END_REF_PREFIX + node.ref
@@ -41362,10 +41166,7 @@ var rules = {
     }
   },
   squareLabel: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.4,
-    // $FlowFixMe[prop-missing]
     match: SimpleMarkdown.inlineRegex(/^\[\[(\w+)\]\]( *)/),
     parse: (capture, _parse4, state) => {
       if (!state.firstQuestionRef) {
@@ -41394,10 +41195,7 @@ var rules = {
     }
   },
   circleLabel: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.5,
-    // $FlowFixMe[prop-missing]
     match: SimpleMarkdown.inlineRegex(/^\(\((\w+)\)\)( *)/),
     parse: (capture, _parse5, state) => {
       return {
@@ -41422,10 +41220,7 @@ var rules = {
     }
   },
   squareBracketRef: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.6,
-    // $FlowFixMe[prop-missing]
     match: SimpleMarkdown.inlineRegex(/^\[(\d+)\]( *)/),
     parse: (capture, _parse6, state) => {
       if (!state.firstSentenceRef) {
@@ -41451,10 +41246,7 @@ var rules = {
     }
   },
   highlight: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.7,
-    // $FlowFixMe[prop-missing]
     match: SimpleMarkdown.inlineRegex(/^{highlighting.start}(.+?){highlighting.end}/),
     parse: (capture, _parse7, state) => {
       return {
@@ -41469,10 +41261,7 @@ var rules = {
     }
   },
   reviewHighlight: {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[incompatible-use]
     order: SimpleMarkdown.defaultRules.escape.order + 0.7,
-    // $FlowFixMe[prop-missing]
     match: SimpleMarkdown.inlineRegex(/^{review-highlighting.start}(.+?){review-highlighting.end}/),
     parse: (capture, _parse8, state) => {
       return {
@@ -41486,17 +41275,9 @@ var rules = {
       }, node.content)];
     }
   },
-  // $FlowFixMe[prop-missing]
-  // $FlowFixMe[incompatible-use]
   strong: SimpleMarkdown.defaultRules.strong,
-  // $FlowFixMe[prop-missing]
-  // $FlowFixMe[incompatible-use]
   u: SimpleMarkdown.defaultRules.u,
-  // $FlowFixMe[prop-missing]
-  // $FlowFixMe[incompatible-use]
   em: SimpleMarkdown.defaultRules.em,
-  // $FlowFixMe[prop-missing]
-  // $FlowFixMe[incompatible-use]
   del: SimpleMarkdown.defaultRules.del,
   text: _objectSpread2(_objectSpread2({}, SimpleMarkdown.defaultRules.text), {}, {
     react(node, output, state) {
@@ -41507,32 +41288,54 @@ var rules = {
 
   })
 };
-var INITIAL_PARSE_STATE = {
-  currentRef: [],
-  useRefs: true,
-  lastRef: 0,
-  lastFootnote: {
-    id: 0,
-    text: ""
-  }
-}; // $FlowFixMe[prop-missing]
-
+var START_REF_PREFIX = "start-ref-";
+var END_REF_PREFIX = "end-ref-";
+var REF_STYLE = {
+  display: "inline-block",
+  width: 0,
+  visibility: "hidden"
+};
+var LABEL_OUTER_STYLE = {
+  // for some reason we need these to keep the nbsp from wrapping when the
+  // inner circle/square is display: inline-block
+  display: "inline",
+  whiteSpace: "nowrap"
+};
+var SQUARE_LABEL_STYLE = {
+  display: "inline-block",
+  color: "rgb(255, 255, 255)",
+  backgroundColor: "rgb(90, 90, 90)",
+  paddingLeft: 10,
+  paddingRight: 10,
+  userSelect: "none",
+  WebkitUserSelect: "none"
+};
+var CIRCLE_LABEL_STYLE = {
+  display: "inline-block",
+  color: "rgb(255, 255, 255)",
+  backgroundColor: "rgb(90, 90, 90)",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  width: 22,
+  height: 22,
+  borderRadius: "50%",
+  textAlign: "center"
+};
 var builtParser = SimpleMarkdown.parserFor(rules);
 
 var parse = (source, state) => {
   state = state || {};
   var paragraphedSource = source + "\n\n";
-  return builtParser(paragraphedSource, _.extend(state, INITIAL_PARSE_STATE));
+  return builtParser(paragraphedSource, _.extend(state, getInitialParseState()));
 };
 
+var output = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, "react"));
 var PassageMarkdown = {
-  parse: parse,
-  // $FlowFixMe[prop-missing]
-  output: SimpleMarkdown.reactFor( // $FlowFixMe[prop-missing]
-  SimpleMarkdown.ruleOutput(rules, "react")),
-  START_REF_PREFIX: START_REF_PREFIX,
-  END_REF_PREFIX: END_REF_PREFIX,
-  _rulesForTesting: rules
+  parse,
+  output,
+  START_REF_PREFIX,
+  END_REF_PREFIX,
+  getInitialParseState
 };
 
 // A fake paragraph to measure the line height of the passage. In CSS we always
@@ -41545,9 +41348,9 @@ class LineHeightMeasurer extends React.Component {
 
     _defineProperty(this, "_cachedLineHeight", void 0);
 
-    _defineProperty(this, "$body", void 0);
+    _defineProperty(this, "body", void 0);
 
-    _defineProperty(this, "$end", void 0);
+    _defineProperty(this, "end", void 0);
   }
 
   measureLineHeight() {
@@ -41559,23 +41362,30 @@ class LineHeightMeasurer extends React.Component {
   }
 
   forceMeasureLineHeight() {
-    // Add some text which magically fills an entire line.
-    this.$body.text(" \u0080"); // Now, the line height is the difference between the top of the
+    var body = this.body;
+    var end = this.end;
+
+    if (!body || !end) {
+      return;
+    } // Add some text which magically fills an entire line.
+
+
+    body.textContent = " \u0080"; // Now, the line height is the difference between the top of the
     // second line and the top of the first line.
 
-    this._cachedLineHeight = getLineHeightForNode(this.$body, this.$end); // Clear out the first line so it doesn't overlap the passage.
+    this._cachedLineHeight = getLineHeightForNode(body, end); // Clear out the first line so it doesn't overlap the passage.
 
-    this.$body.text("");
+    body.textContent = "";
   }
 
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: css(styles$8.measurer)
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      ref: e => this.$body = $(e),
+      ref: _ref => this.body = _ref,
       className: "paragraph"
     }), /*#__PURE__*/React.createElement("div", {
-      ref: e => this.$end = $(e)
+      ref: _ref2 => this.end = _ref2
     })));
   }
 
@@ -41594,9 +41404,11 @@ class Passage extends React.Component {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "_onResize", void 0);
+    _defineProperty(this, "_contentRef", void 0);
 
-    _defineProperty(this, "_lineHeightMeasurer", void 0);
+    _defineProperty(this, "_lineHeightMeasurerRef", void 0);
+
+    _defineProperty(this, "_onResize", void 0);
 
     _defineProperty(this, "_stylesAppiedTimer", void 0);
 
@@ -41617,6 +41429,8 @@ class Passage extends React.Component {
     this._updateState();
 
     this._onResize = _.throttle(() => {
+      var _this$_lineHeightMeas;
+
       // If we're rendering JIPT text, we won't have line numbers or a
       // line height measurer, so skip handling this resize.
       if (this.shouldRenderJipt()) {
@@ -41627,7 +41441,7 @@ class Passage extends React.Component {
       // listen for resize events.
 
 
-      this._lineHeightMeasurer.forceMeasureLineHeight();
+      (_this$_lineHeightMeas = this._lineHeightMeasurerRef) === null || _this$_lineHeightMeas === void 0 ? void 0 : _this$_lineHeightMeas.forceMeasureLineHeight();
 
       this._updateState();
     }, 500);
@@ -41690,9 +41504,8 @@ class Passage extends React.Component {
   }
 
   _measureLines() {
-    // eslint-disable-next-line react/no-string-refs
-    var $renderer = $(ReactDOM__default.findDOMNode(this.refs.content));
-    var contentsHeight = $renderer.height();
+    var renderer = ReactDOM__default.findDOMNode(this._contentRef);
+    var contentsHeight = $(renderer).height();
 
     var lineHeight = this._getLineHeight();
 
@@ -41719,7 +41532,9 @@ class Passage extends React.Component {
   }
 
   _getLineHeight() {
-    return this._lineHeightMeasurer.measureLineHeight();
+    var _this$_lineHeightMeas2;
+
+    return ((_this$_lineHeightMeas2 = this._lineHeightMeasurerRef) === null || _this$_lineHeightMeas2 === void 0 ? void 0 : _this$_lineHeightMeas2.measureLineHeight()) || 0;
   }
 
   getLineCount() {
@@ -41735,12 +41550,16 @@ class Passage extends React.Component {
    * These are functions to support the passage refs inter-widgets feature
    * where other widgets can fetch the line numbers of a reference inside of
    * a passage.
+   *
+   * todo(matthewc): The refs are created by PassageMarkdown's refStart and refEnd,
+   * somehow bubbling up to Passage's `this.refs`. This runs against
+   * current best practices for refs by using string refs, but also
+   * by breaking our expectation of explicit data flow.
    */
 
 
   _getStartRefLineNumber(referenceNumber) {
-    var refRef = PassageMarkdown.START_REF_PREFIX + referenceNumber; // eslint-disable-next-line react/no-string-refs
-
+    var refRef = PassageMarkdown.START_REF_PREFIX + referenceNumber;
     var ref = this.refs[refRef];
 
     if (!ref) {
@@ -41763,8 +41582,7 @@ class Passage extends React.Component {
   }
 
   _getEndRefLineNumber(referenceNumber) {
-    var refRef = PassageMarkdown.END_REF_PREFIX + referenceNumber; // eslint-disable-next-line react/no-string-refs
-
+    var refRef = PassageMarkdown.END_REF_PREFIX + referenceNumber;
     var ref = this.refs[refRef];
 
     if (!ref) {
@@ -41801,9 +41619,8 @@ class Passage extends React.Component {
   }
 
   _convertPosToLineNumber(absoluteVPos) {
-    // eslint-disable-next-line react/no-string-refs
-    var $content = $(ReactDOM__default.findDOMNode(this.refs.content));
-    var relativeVPos = absoluteVPos - $content.offset().top;
+    var content = ReactDOM__default.findDOMNode(this._contentRef);
+    var relativeVPos = absoluteVPos - $(content).offset().top;
 
     var lineHeight = this._getLineHeight();
 
@@ -41812,8 +41629,7 @@ class Passage extends React.Component {
   }
 
   _getRefContent(referenceNumber) {
-    var refRef = PassageMarkdown.START_REF_PREFIX + referenceNumber; // eslint-disable-next-line react/no-string-refs
-
+    var refRef = PassageMarkdown.START_REF_PREFIX + referenceNumber;
     var ref = this.refs[refRef];
 
     if (!ref) {
@@ -41919,12 +41735,9 @@ class Passage extends React.Component {
       onSerializedHighlightsUpdate: this._handleSerializedHighlightsUpdate,
       serializedHighlights: this.props.highlights
     }, /*#__PURE__*/React.createElement("div", {
-      ref: "content"
-    }, /*#__PURE__*/React.createElement(LineHeightMeasurer // TODO(mdr): We found a new Flow error when upgrading:
-    //     "e (null) This type is incompatible with this._lineHeightMeasurer (LineHeightMeasurer)"
-    // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
-    , {
-      ref: e => this._lineHeightMeasurer = e
+      ref: _ref4 => this._contentRef = _ref4
+    }, /*#__PURE__*/React.createElement(LineHeightMeasurer, {
+      ref: _ref3 => this._lineHeightMeasurerRef = _ref3
     }), PassageMarkdown.output(parsed)));
   }
 
@@ -41967,10 +41780,7 @@ class Passage extends React.Component {
       });
     }
 
-    var parseState = {
-      firstSentenceRef: null,
-      firstQuestionRef: null
-    }; // Replace the vertical double quote characters quoting text with
+    var parseState = PassageMarkdown.getInitialParseState(); // Replace the vertical double quote characters quoting text with
     // an unicode left and right double quote characters. This would
     // avoid rendering right or left unicode double quotes on both
     // ends of a sentence wrapped by double quotes.