@khanacademy/perseus 1.4.0 → 2.0.0

package/dist/es/index.js

@@ -425,7 +425,6 @@ _defineProperty(StubTagEditor, "defaultProps", {
 var ApiOptions = {
   propTypes: PropTypes.shape({
     isArticle: PropTypes.bool.isRequired,
-    satStyling: PropTypes.bool.isRequired,
     onInputError: PropTypes.func.isRequired,
     onFocusChange: PropTypes.func.isRequired,
     staticRender: PropTypes.bool.isRequired,
@@ -487,18 +486,6 @@ var ApiOptions = {
     setDrawingAreaAvailable: PropTypes.func,
     // Whether to use the Draft.js editor or the legacy textarea
     useDraftEditor: PropTypes.bool,
-    // Styling options that control the visual behavior of Perseus
-    // items.
-    // TODO(mdr): If we adopt this pattern, we'll need to think about
-    //     how to make individual `styling` options be optional, and
-    //     how to set their default values without overwriting provided
-    //     values. For now, though, you must either specify all fields
-    //     of `styling`, or omit the `styling` option entirely.
-    styling: PropTypes.shape({
-      // 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,
     // Whether this Renderer is allowed to auto-scroll the rest of the
@@ -531,7 +518,6 @@ var ApiOptions = {
   defaults: {
     isArticle: false,
     isMobile: false,
-    satStyling: false,
     onInputError: function onInputError() {},
     onFocusChange: function onFocusChange() {},
     staticRender: false,
@@ -548,7 +534,6 @@ var ApiOptions = {
     },
     setDrawingAreaAvailable: function setDrawingAreaAvailable() {},
     useDraftEditor: false,
-    styling: {},
     canScrollPage: false,
     inModal: false,
     crossOutEnabled: false,
@@ -3058,28 +3043,7 @@ var pureMdMax$2 = "1023px"; // @pure-lg-max: (@pure-xl-min - 1);
 
 var pureLgMax$2 = "1279px"; // @tableBackgroundAccent: #f9f9f9; // for striping
 
-var tableBackgroundAccent$1 = "#F9F9F9";
-var gtpBlue = "#4c00ff";
-var gtpIncorrectColor = "#babec2";
-var gtpCorrectColor = "#ffbe26"; // @satBlue:               #0084ce;
-
-var satBlue = "#0084CE"; // @satSelectedBackgroundColor: #e4f3f9;
-
-var satSelectedBackgroundColor = "#E4F3F9"; // @satActiveBackgroundColor: #d0edf4;
-
-var satActiveBackgroundColor = "#D0EDF4"; // @satCorrectColor:       #009900;
-
-var satCorrectColor = "#009900"; // @satCorrectBorderColor: #00cc00;
-
-var satCorrectBorderColor = "#00CC00"; // @satCorrectBackgroundColor: #e4f7e4;
-
-var satCorrectBackgroundColor = "#E4F7E4"; // @satIncorrectColor:     #990000;
-
-var satIncorrectColor = "#990000"; // @satIncorrectBorderColor: #cc5252;
-
-var satIncorrectBorderColor = "#CC5252"; // @satIncorrectBackgroundColor: #f2ebeb;
-
-var satIncorrectBackgroundColor = "#F2EBEB"; // @zIndexScratchPad: 1;
+var tableBackgroundAccent$1 = "#F9F9F9"; // @zIndexScratchPad: 1;
 
 var zIndexScratchPad = 1; // @zIndexAboveScratchpad: @zIndexScratchPad + 1;
 
@@ -3147,18 +3111,6 @@ var constants$1 = /*#__PURE__*/Object.freeze({
     pureMdMax: pureMdMax$2,
     pureLgMax: pureLgMax$2,
     tableBackgroundAccent: tableBackgroundAccent$1,
-    gtpBlue: gtpBlue,
-    gtpIncorrectColor: gtpIncorrectColor,
-    gtpCorrectColor: gtpCorrectColor,
-    satBlue: satBlue,
-    satSelectedBackgroundColor: satSelectedBackgroundColor,
-    satActiveBackgroundColor: satActiveBackgroundColor,
-    satCorrectColor: satCorrectColor,
-    satCorrectBorderColor: satCorrectBorderColor,
-    satCorrectBackgroundColor: satCorrectBackgroundColor,
-    satIncorrectColor: satIncorrectColor,
-    satIncorrectBorderColor: satIncorrectBorderColor,
-    satIncorrectBackgroundColor: satIncorrectBackgroundColor,
     zIndexScratchPad: zIndexScratchPad,
     zIndexAboveScratchpad: zIndexAboveScratchpad$1,
     zIndexInteractiveComponent: zIndexInteractiveComponent$1,
@@ -17977,17 +17929,17 @@ class Lint extends React.Component {
       var warningTextStyle;
 
       if (this.props.severity === 1) {
-        severityStyle = styles$B.indicatorError;
+        severityStyle = styles$A.indicatorError;
         warningText = "Error";
-        warningTextStyle = styles$B.publishBlockingError;
+        warningTextStyle = styles$A.publishBlockingError;
       } else if (this.props.severity === 2) {
-        severityStyle = styles$B.indicatorWarning;
+        severityStyle = styles$A.indicatorWarning;
         warningText = "Warning";
-        warningTextStyle = styles$B.warning;
+        warningTextStyle = styles$A.warning;
       } else {
-        severityStyle = styles$B.indicatorGuideline;
+        severityStyle = styles$A.indicatorGuideline;
         warningText = "Recommendation";
-        warningTextStyle = styles$B.warning;
+        warningTextStyle = styles$A.warning;
       }
 
       return /*#__PURE__*/React.createElement("a", {
@@ -17995,16 +17947,16 @@ class Lint extends React.Component {
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.indicator, severityStyle)
+        className: css(styles$A.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tooltip, tooltipAbove && styles$B.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$B.tooltipParagraph)
+        className: css(styles$A.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+        className: css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
       })));
     });
   }
@@ -18052,19 +18004,19 @@ class Lint extends React.Component {
 
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.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$B.lintContainer)
-      }, this.renderLink(styles$B.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$B.lintContainer)
-    }, this.renderLink(styles$B.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]
@@ -18089,7 +18041,7 @@ _defineProperty(Lint, "propTypes", {
   severity: PropTypes.number
 });
 
-var styles$B = 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.
@@ -18328,14 +18280,8 @@ var rules$1 = _objectSpread2(_objectSpread2({}, pureMarkdownRules), {}, {
       }, output(node.col1, state))), /*#__PURE__*/React.createElement("div", {
         className: "perseus-column"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "sat-header-grafting-area"
-      }), /*#__PURE__*/React.createElement("div", {
         className: "perseus-column-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sat-skill-subscore-grafting-area"
-      }), output(node.col2, state), /*#__PURE__*/React.createElement("div", {
-        className: "sat-grafting-area"
-      }))));
+      }, output(node.col2, state))));
     }
   }),
   // Match paragraphs consisting solely of crowdin IDs
@@ -19979,7 +19925,7 @@ class Renderer extends React.Component {
             paddingRight: margin
           };
 
-          var mobileInnerStyle = _objectSpread2(_objectSpread2({}, innerStyle), styles$A.mobileZoomableParentFix);
+          var mobileInnerStyle = _objectSpread2(_objectSpread2({}, innerStyle), styles$z.mobileZoomableParentFix);
 
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
@@ -20117,7 +20063,7 @@ class Renderer extends React.Component {
           paddingRight: 0
         };
 
-        var _mobileInnerStyle = _objectSpread2(_objectSpread2({}, _innerStyle), styles$A.mobileZoomableParentFix);
+        var _mobileInnerStyle = _objectSpread2(_objectSpread2({}, _innerStyle), styles$z.mobileZoomableParentFix);
 
         var wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _objectSpread2(_objectSpread2({}, _mobileInnerStyle), {}, {
@@ -20796,7 +20742,7 @@ _defineProperty(Renderer, "defaultProps", {
   linterContext: PerseusLinter.linterContextDefault
 });
 
-var styles$A = {
+var styles$z = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -22941,31 +22887,6 @@ var Expression$1 = {
   isLintable: true
 };
 
-class PossibleAnswers extends React.Component {
-  render() {
-    // It's redundant to show duplicate answers.
-    // So, remove duplicates from the given list of answer strings.
-    var answers = _.uniq(this.props.answers);
-
-    var answerComponents = _.map(answers, answer => {
-      // Plus, now that our answers are distinct, we can safely use the
-      // answer string as a key.
-      return /*#__PURE__*/React.createElement("dd", {
-        key: answer
-      }, answer);
-    });
-
-    return /*#__PURE__*/React.createElement("dl", {
-      className: "perseus-possible-answers"
-    }, /*#__PURE__*/React.createElement("dt", null, i18n.doNotTranslate("Correct Answer")), answerComponents);
-  }
-
-}
-
-_defineProperty(PossibleAnswers, "propTypes", {
-  answers: PropTypes.arrayOf(PropTypes.string)
-});
-
 var _excluded$3 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor() {
@@ -23210,7 +23131,7 @@ class InputNumber extends React.Component {
   render() {
     if (this.props.apiOptions.customKeypad) {
       // TODO(charlie): Support "Review Mode".
-      var _input = /*#__PURE__*/React.createElement(SimpleKeypadInput // eslint-disable-next-line react/no-string-refs
+      var input = /*#__PURE__*/React.createElement(SimpleKeypadInput // eslint-disable-next-line react/no-string-refs
       , {
         ref: "input",
         value: this.props.currentValue,
@@ -23223,60 +23144,26 @@ class InputNumber extends React.Component {
       if (this.props.rightAlign) {
         return /*#__PURE__*/React.createElement("div", {
           className: "perseus-input-right-align"
-        }, _input);
+        }, input);
       }
 
-      return _input;
+      return input;
     } // HACK(johnsullivan): Create a function with shared logic between
     // this and NumericInput.
+    // TODO(jeremy): Deprecate this widget and prefer numeric-input.
 
 
-    var rubric = this.props.reviewModeRubric;
-    var correct = null;
-    var answerBlurb = null; // SAT is deprecated and not testable
-
-    /* c8 ignore if */
-
-    if (this.props.apiOptions.satStyling && rubric) {
-      var score = this.simpleValidate(rubric);
-      correct = score.type === "points" && score.earned === score.total;
-
-      if (!correct) {
-        // TODO(johnsullivan): Make this a little more
-        // human-friendly.
-        var answerString = String(rubric.value);
-
-        if (rubric.inexact && rubric.maxError) {
-          answerString += " \u00B1 " + rubric.maxError;
-        }
-
-        var answerStrings = [answerString];
-        answerBlurb = /*#__PURE__*/React.createElement(PossibleAnswers, {
-          answers: answerStrings
-        });
-      }
-    } // Note: This is _very_ similar to what `numeric-input.jsx` does. If
+    var rubric = this.props.reviewModeRubric; // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
 
-
-    var inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign]; // Correct
-
-    if (rubric && correct === true && this.props.currentValue) {
-      inputStyles.push(styles$z.answerStateCorrect);
-    } // Incorrect
-
-
-    if (rubric && correct === false && this.props.currentValue) {
-      inputStyles.push(styles$z.answerStateIncorrect);
-    } // Unanswered
-
+    var inputStyles = [styles$y.default, this.props.size === "small" ? styles$y.small : null, this.props.rightAlign ? styles$y.rightAlign : styles$y.leftAlign]; // Unanswered
 
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$z.answerStateUnanswered);
+      inputStyles.push(styles$y.answerStateUnanswered);
     }
 
-    var input = /*#__PURE__*/React.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
+    return /*#__PURE__*/React.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
     , {
       ref: "input",
       value: this.props.currentValue,
@@ -23290,17 +23177,7 @@ class InputNumber extends React.Component {
       id: this.props.widgetId,
       disabled: this.props.apiOptions.readOnly,
       linterContext: this.props.linterContext
-    }); // SAT is deprecated, answer blurb is an SAT feature
-
-    /* c8 ignore if */
-
-    if (answerBlurb) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "perseus-input-with-answer-blurb"
-      }, input, answerBlurb);
-    }
-
-    return input;
+    });
   }
 
   static validate(state, rubric) {
@@ -23377,7 +23254,7 @@ _defineProperty(InputNumber, "defaultProps", {
   linterContext: linterContextDefault
 });
 
-var styles$z = StyleSheet.create({
+var styles$y = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -23394,16 +23271,6 @@ var styles$z = StyleSheet.create({
     paddingLeft: 0,
     paddingRight: Spacing.xxxSmall_4
   },
-  answerStateCorrect: {
-    color: satCorrectColor,
-    backgroundColor: satCorrectBackgroundColor,
-    border: "solid 1px ".concat(satCorrectBorderColor)
-  },
-  answerStateIncorrect: {
-    color: satIncorrectColor,
-    backgroundColor: satIncorrectBackgroundColor,
-    border: "solid 1px ".concat(satIncorrectBorderColor)
-  },
   answerStateUnanswered: {
     backgroundColor: "#eee",
     border: "solid 1px #999"
@@ -23481,49 +23348,6 @@ class NumericInput extends React.Component {
       previousValues: [""]
     });
 
-    _defineProperty(this, "getAnswerBlurb", rubric => {
-      var correct;
-      var answerBlurb;
-      /* Ignore this block because SAT is deprecated */
-
-      /* c8 ignore next */
-
-      if (this.props.apiOptions.satStyling && rubric) {
-        var score = this.simpleValidate(rubric);
-        correct = score.type === "points" && score.earned === score.total;
-
-        if (!correct) {
-          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";
-
-            if (answer.answerForms && answer.answerForms[0]) {
-              // NOTE(johnsullivan): This isn't exactly ideal, but
-              // it does behave well for all the currently known
-              // problems. See D14742 for some discussion on
-              // alternate strategies.
-              format = answer.answerForms[0];
-            }
-
-            var answerString = KhanMath.toNumericString(answer.value, format);
-
-            if (answer.maxError) {
-              answerString += " \u00B1 " + KhanMath.toNumericString(answer.maxError, format);
-            }
-
-            return answerString;
-          });
-          answerBlurb = /*#__PURE__*/React.createElement(PossibleAnswers, {
-            answers: answerStrings
-          });
-        }
-      }
-
-      return [answerBlurb, !!correct];
-    });
-
     _defineProperty(this, "examples", () => {
       var _this$props$answerFor;
 
@@ -23752,9 +23576,6 @@ class NumericInput extends React.Component {
   }
 
   render() {
-    var rubric = this.props.reviewModeRubric;
-    var answers = this.getAnswerBlurb(rubric);
-    var answerBlurb = answers[0];
     var labelText = this.props.labelText;
 
     if (labelText == null || labelText === "") {
@@ -23791,7 +23612,7 @@ class NumericInput extends React.Component {
         height: "auto"
       }
     });
-    var input = /*#__PURE__*/React.createElement(InputWithExamples, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputWithExamples, {
       ref: _ref2 => this.inputRef = _ref2,
       value: this.props.currentValue,
       onChange: this.handleChange,
@@ -23804,30 +23625,7 @@ class NumericInput extends React.Component {
       id: this.props.widgetId,
       disabled: this.props.apiOptions.readOnly,
       style: styles.input
-    });
-    /* This only gets used with SAT Content */
-
-    /* c8 ignore next if */
-
-    if (answerBlurb) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "perseus-input-with-answer-blurb"
-      }, input, answerBlurb);
-    }
-
-    if (this.props.apiOptions.satStyling) {
-      // NOTE(amy): the input widgets themselves already have
-      // a default aria label of "Your Answer", so we hide this
-      // redundant label from screen-readers.
-      return /*#__PURE__*/React.createElement("label", {
-        className: "perseus-input-with-label"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "perseus-input-label",
-        "aria-hidden": "true"
-      }, i18n.doNotTranslate("Answer:")), input);
-    }
-
-    return /*#__PURE__*/React.createElement("div", null, input);
+    }));
   }
 
 } // TODO(thomas): Currently we receive a list of lists of acceptable answer types
@@ -24619,7 +24417,7 @@ class HighlightRenderer extends React.PureComponent {
     var rects = this.state.cachedHighlightRects;
     return /*#__PURE__*/React.createElement("div", null, rects.map((rect, index) => /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: css(styles$y.highlightRect),
+      className: css(styles$x.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -24640,7 +24438,7 @@ class HighlightRenderer extends React.PureComponent {
 
 }
 
-var styles$y = StyleSheet.create({
+var styles$x = StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
 
@@ -24722,7 +24520,7 @@ class HighlightTooltip extends React.PureComponent {
 
 
     var content = /*#__PURE__*/React.createElement("div", {
-      className: css(styles$x.tooltipLabel),
+      className: css(styles$w.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     var style = {
@@ -24744,7 +24542,7 @@ class HighlightTooltip extends React.PureComponent {
 
 }
 
-var styles$x = StyleSheet.create({
+var styles$w = StyleSheet.create({
   tooltipLabel: {
     // Unlike most tooltip contents, we don't want this label to be
     // selectable. Selecting it is not only unhelpful, but dangerous: if
@@ -25347,7 +25145,7 @@ class HighlightableContent extends React.PureComponent {
     var buildHighlight = r => this._buildHighlight(r);
 
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$w.container),
+      className: css(styles$v.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -25368,7 +25166,7 @@ class HighlightableContent extends React.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$w.content),
+      className: css(styles$v.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
@@ -25377,7 +25175,7 @@ class HighlightableContent extends React.PureComponent {
 
 }
 
-var styles$w = StyleSheet.create({
+var styles$v = StyleSheet.create({
   // We render content with z-index 1, and highlights with z-index 0, so that
   // content will receive the browser's native pointer events. (Highlights
   // have their own magic code to manage hover detection, despite being
@@ -25794,7 +25592,7 @@ class LineHeightMeasurer extends React.Component {
 
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$v.measurer),
+      className: css(styles$u.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
       ref: _ref => this._line = _ref,
@@ -25803,7 +25601,7 @@ class LineHeightMeasurer extends React.Component {
   }
 
 }
-var styles$v = StyleSheet.create({
+var styles$u = StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -26829,36 +26627,6 @@ function getA11yText(letter, checked, correct, crossedOut, showCorrectness) {
   });
 }
 
-/**
- * Given a choice's position in the radio widget, return the corresponding
- * "choice letter". (For example, in English, `getChoiceLetter(0)` is "A",
- * `getChoiceLetter(1)` is "B", etc.)
- */
-
-function getChoiceLetter(pos) {
-  /* I18N: This is a list of single-character labels that will appear in
-   * front of multiple-choice options. For instance, a multiple-choice
-   * question with three options would display
-   *  (A) first option
-   *  (B) second option
-   *  (C) third option
-   * There must be spaces between each of the different characters. The
-   * characters will show up next to options in the order that they are
-   * listed here. Most multiple choice questions have 5 or fewer options.
-   */
-  var lettersString = i18n._("A B C D E F G H I J K L M N O P Q R S T U V W X Y Z");
-
-  var letters = lettersString.split(" ");
-
-  if (pos < letters.length) {
-    // If the position we need is listed in the localized string, use that.
-    return letters[pos];
-  } // If we're out of letters, give up and return a space.
-
-
-  return " ";
-}
-
 /**
  * Renders a circular selection ring around the child.
  */
@@ -26878,7 +26646,7 @@ function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-test-id": "focus-ring",
-    className: css(styles$u.ring),
+    className: css(styles$t.ring),
     style: style
   }, children);
 }
@@ -26888,7 +26656,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-var styles$u = StyleSheet.create({
+var styles$t = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -26898,9 +26666,38 @@ var styles$u = StyleSheet.create({
   }
 });
 
-var SAT_ICON_SIZE = 25;
-var LIBRARY_ICON_SIZE = 24;
-var styles$t = StyleSheet.create({
+/**
+ * Given a choice's position in the radio widget, return the corresponding
+ * "choice letter". (For example, in English, `getChoiceLetter(0)` is "A",
+ * `getChoiceLetter(1)` is "B", etc.)
+ */
+
+function getChoiceLetter(pos) {
+  /* I18N: This is a list of single-character labels that will appear in
+   * front of multiple-choice options. For instance, a multiple-choice
+   * question with three options would display
+   *  (A) first option
+   *  (B) second option
+   *  (C) third option
+   * There must be spaces between each of the different characters. The
+   * characters will show up next to options in the order that they are
+   * listed here. Most multiple choice questions have 5 or fewer options.
+   */
+  var lettersString = i18n._("A B C D E F G H I J K L M N O P Q R S T U V W X Y Z");
+
+  var letters = lettersString.split(" ");
+
+  if (pos < letters.length) {
+    // If the position we need is listed in the localized string, use that.
+    return letters[pos];
+  } // If we're out of letters, give up and return a space.
+
+
+  return " ";
+}
+
+var CHOICE_ICON_SIZE = 24;
+var styles$s = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -26911,28 +26708,26 @@ var styles$t = StyleSheet.create({
 // 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;
+var CROSS_OUT_LINE_SIZE = CHOICE_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
 /**
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
 
 function CrossOutLine(props) {
-  var crossOutLineSize = props.sat ? SAT_CROSS_OUT_LINE_SIZE : CROSS_OUT_LINE_SIZE;
   return /*#__PURE__*/React.createElement("svg", {
-    width: crossOutLineSize,
-    height: crossOutLineSize,
-    viewBox: "0 0 ".concat(crossOutLineSize, " ").concat(crossOutLineSize),
-    className: css(styles$s.crossOutLine),
+    width: CROSS_OUT_LINE_SIZE,
+    height: CROSS_OUT_LINE_SIZE,
+    viewBox: "0 0 ".concat(CROSS_OUT_LINE_SIZE, " ").concat(CROSS_OUT_LINE_SIZE),
+    className: css(styles$r.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__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
     // rounded line cap needs to bleed into our padding.
     x1: CROSS_OUT_LINE_PADDING,
-    x2: crossOutLineSize - CROSS_OUT_LINE_PADDING,
-    y1: crossOutLineSize - CROSS_OUT_LINE_PADDING,
+    x2: CROSS_OUT_LINE_SIZE - CROSS_OUT_LINE_PADDING,
+    y1: CROSS_OUT_LINE_SIZE - CROSS_OUT_LINE_PADDING,
     y2: CROSS_OUT_LINE_PADDING,
     stroke: props.color,
     strokeWidth: "2",
@@ -26940,7 +26735,7 @@ function CrossOutLine(props) {
   }));
 }
 
-var styles$s = StyleSheet.create({
+var styles$r = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -26951,10 +26746,11 @@ var styles$s = StyleSheet.create({
 
 function ChoiceInner(props) {
   var {
-    letter,
+    pos,
     showCorrectness,
     correct
   } = props;
+  var letter = getChoiceLetter(pos);
 
   if (!showCorrectness) {
     return letter;
@@ -26976,19 +26772,17 @@ function ChoiceInner(props) {
 // related to the selected state dynamically.
 
 
-function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, primaryProductColor, correct, transparentBackground) {
+function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct) {
   var backgroundColor;
   var borderColor;
   var color;
 
   if (!showCorrectness && pressed) {
-    borderColor = primaryProductColor;
-    color = primaryProductColor;
-    backgroundColor = transparentBackground ? "transparent" : white$1;
+    borderColor = Color.blue;
+    color = Color.blue;
+    backgroundColor = "transparent";
   } else if (checked) {
-    // Note: kaGreen is not only the default product color,
-    // but also the "correctness" color
-    var bg = showCorrectness && correct ? Color.green : primaryProductColor;
+    var bg = showCorrectness && correct ? Color.green : Color.blue;
     color = white$1;
     backgroundColor = bg;
     borderColor = bg;
@@ -27003,7 +26797,7 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, pri
   if (multipleSelect) {
     borderRadius = 3;
   } else {
-    borderRadius = LIBRARY_ICON_SIZE;
+    borderRadius = CHOICE_ICON_SIZE;
   }
 
   return {
@@ -27014,7 +26808,7 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, pri
   };
 }
 
-function LibraryChoiceIcon(props) {
+function ChoiceIcon(props) {
   var {
     checked,
     crossedOut,
@@ -27023,30 +26817,28 @@ function LibraryChoiceIcon(props) {
     focused,
     hovered,
     multipleSelect,
-    primaryProductColor,
+    pos,
     previouslyAnswered,
-    letter,
-    pressed,
-    transparentBackground
+    pressed
   } = props;
-  var dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, primaryProductColor, correct, transparentBackground);
+  var dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$t.iconWrapper)
+    className: css(styles$s.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
-    color: primaryProductColor,
+    color: Color.blue,
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React.createElement("div", {
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.circleIncorrectAnswered) // used in BaseRadio editMode to check
+    className: css(styles$q.circle, showCorrectness && correct && styles$q.circleCorrect, showCorrectness && !correct && styles$q.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$q.circleIncorrectAnswered) // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.innerWrapper)
+    className: css(styles$q.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
-    letter: letter,
+    pos: pos,
     showCorrectness: showCorrectness,
     correct: correct
   })))), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
@@ -27054,10 +26846,10 @@ function LibraryChoiceIcon(props) {
   }));
 }
 
-var styles$r = StyleSheet.create({
+var styles$q = StyleSheet.create({
   innerWrapper: {
-    width: LIBRARY_ICON_SIZE,
-    height: LIBRARY_ICON_SIZE,
+    width: CHOICE_ICON_SIZE,
+    height: CHOICE_ICON_SIZE,
     // Center the contents of the icon.
     display: "flex",
     alignItems: "center",
@@ -27065,8 +26857,8 @@ var styles$r = StyleSheet.create({
   },
   circle: {
     // Make the circle
-    width: LIBRARY_ICON_SIZE,
-    height: LIBRARY_ICON_SIZE,
+    width: CHOICE_ICON_SIZE,
+    height: CHOICE_ICON_SIZE,
     boxSizing: "border-box",
     borderStyle: "solid",
     borderWidth: 2,
@@ -27089,10 +26881,10 @@ var styles$r = StyleSheet.create({
     lineHeight: "1px"
   },
   circleCorrect: {
-    fontSize: LIBRARY_ICON_SIZE
+    fontSize: CHOICE_ICON_SIZE
   },
   circleIncorrect: {
-    fontSize: LIBRARY_ICON_SIZE,
+    fontSize: CHOICE_ICON_SIZE,
     borderColor: gray68,
     color: gray68
   },
@@ -27103,161 +26895,6 @@ var styles$r = StyleSheet.create({
   }
 });
 
-/* 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$t.iconWrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$q.satCircle),
-    "data-test-id": "choice-icon__sat-choice-icon",
-    style: {
-      backgroundColor,
-      borderColor,
-      borderRadius
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      color
-    },
-    className: css(styles$q.letter)
-  }, /*#__PURE__*/React.createElement("span", null, letter)), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
-    color: borderColor,
-    sat: true
-  }));
-}
-
-var styles$q = 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
-    // same size as `circle` so that we can center things
-    // inside of it.
-    border: "2px solid transparent",
-    width: SAT_ICON_SIZE,
-    height: SAT_ICON_SIZE,
-    position: "absolute",
-    top: 1,
-    // Center contained items.
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontFamily: boldFontFamily,
-    fontSize: 13
-  }
-});
-
-/* 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.
@@ -27296,16 +26933,10 @@ function OptionStatus(props) {
     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
+    reviewMode
+  } = props; // Option status is shown only in review mode, or for incorrectly
   // answered items.
 
-
   if (!reviewMode && !previouslyAnswered) {
     return null;
   }
@@ -27403,21 +27034,14 @@ function Choice(props) {
       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)
-
+  }
 
-  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$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
-  var rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$o.rationale, !apiOptions.satStyling && styles$o.nonSatRationale, apiOptions.satStyling && styles$o.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
+  var descriptionClassName = classNames("description", css(styles$o.description));
+  var rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$o.rationale)); // We want to show the choices as dimmed out when the choices are disabled.
+  // However, we don't want to do this when we're in review mode in the
   // content library.
 
-  var showDimmed = !apiOptions.satStyling && !reviewMode && apiOptions.readOnly || crossedOut;
+  var showDimmed = !reviewMode && apiOptions.readOnly || crossedOut;
   var letter = getChoiceLetter(pos);
   var a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
   var choiceId = uniqueId();
@@ -27472,8 +27096,6 @@ function Choice(props) {
     ref: forwardedRef,
     "aria-hidden": "true"
   }, _ref => {
-    var _apiOptions$styling;
-
     var {
       hovered,
       focused,
@@ -27500,8 +27122,6 @@ function Choice(props) {
       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: {
@@ -27515,8 +27135,7 @@ function Choice(props) {
       correct: correct,
       crossedOut: crossedOut,
       previouslyAnswered: previouslyAnswered,
-      reviewMode: reviewMode,
-      satStyling: apiOptions.satStyling
+      reviewMode: reviewMode
     })), /*#__PURE__*/React.createElement("div", null, content)));
   }), apiOptions.crossOutEnabled && !reviewMode && /*#__PURE__*/React.createElement(Popover, {
     dismissEnabled: true,
@@ -27599,24 +27218,8 @@ var styles$o = StyleSheet.create({
     display: "inline-block",
     width: "100%"
   },
-  satDescription: {
-    display: "block",
-    position: "relative",
-    boxSizing: "border-box",
-    cursor: "pointer",
-    marginLeft: 0,
-    padding: "17px 14px 17px 0"
-  },
-  satDescriptionCorrectChecked: {
-    backgroundColor: satCorrectBackgroundColor
-  },
-  satDescriptionIncorrectChecked: {
-    backgroundColor: satIncorrectBackgroundColor
-  },
   rationale: {
-    display: "block"
-  },
-  nonSatRationale: {
+    display: "block",
     padding: intermediateCheckboxPadding,
     paddingTop: 0,
     marginLeft: 54,
@@ -27624,10 +27227,6 @@ var styles$o = StyleSheet.create({
       padding: intermediateCheckboxPaddingPhone,
       paddingTop: 0
     }
-  },
-  satReviewRationale: {
-    marginTop: 13,
-    marginLeft: 45
   }
 });
 var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Choice, _extends({}, props, {
@@ -27804,22 +27403,18 @@ function BaseRadio(props) {
   }); // 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$n.radio, // SAT doesn't use the "responsive styling" as it conflicts
-  // with their custom theming.
-  !sat && styles$n.responsiveRadioContainer, !sat && firstChoiceHighlighted && isMobile && styles$n.radioContainerFirstHighlighted, !sat && lastChoiceHighlighted && isMobile && styles$n.radioContainerLastHighlighted, sat && styles$n.satRadio));
+  var className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$n.radio, styles$n.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$n.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$n.radioContainerLastHighlighted));
   var instructionsClassName = classNames("instructions", css(styles$n.instructions, isMobile && styles$n.instructionsMobile));
   var instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  var shouldShowInstructions = !sat;
   var responsiveClassName = css(styles$n.responsiveFieldset);
   var fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: "perseus-widget-radio-fieldset ".concat(responsiveClassName)
-  }, shouldShowInstructions && /*#__PURE__*/React.createElement("legend", {
+  }, /*#__PURE__*/React.createElement("legend", {
     className: "perseus-sr-only"
-  }, instructions), shouldShowInstructions && /*#__PURE__*/React.createElement("div", {
+  }, instructions), /*#__PURE__*/React.createElement("div", {
     className: instructionsClassName,
     "aria-hidden": "true"
   }, instructions), /*#__PURE__*/React.createElement("ul", {
@@ -27870,9 +27465,7 @@ function BaseRadio(props) {
     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$n.item, !sat && styles$n.responsiveItem, !sat && checked && styles$n.selectedItem, !sat && checked && choice.highlighted && styles$n.aboveBackdrop, !sat && checked && choice.highlighted && apiOptions.isMobile && styles$n.aboveBackdropMobile, !sat && nextChoiceHighlighted && apiOptions.isMobile && styles$n.nextHighlighted, sat && styles$n.satRadioOption, satShowCorrectness && !choice.correct && styles$n.satRadioOptionIncorrect, satShowCorrectness && choice.correct && styles$n.satRadioOptionCorrect, satShowCorrectnessNext && !nextChoice.correct && styles$n.satRadioOptionNextIncorrect, satShowCorrectnessNext && nextChoice.correct && styles$n.satRadioOptionNextCorrect, sat && reviewModeRubric && styles$n.satReviewRadioOption);
+      return css(sharedStyles.aboveScratchpad, styles$n.item, styles$n.responsiveItem, checked && styles$n.selectedItem, checked && choice.highlighted && styles$n.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$n.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$n.nextHighlighted);
     }; // HACK(abdulrahman): Preloads the selection-state
     // css because of a bug that causes iOS to lag
     // when selecting the button for the first time.
@@ -27934,10 +27527,9 @@ function BaseRadio(props) {
     }, /*#__PURE__*/React.createElement(Element, elementProps));
   }))); // 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$n.responsiveContainer)
+    className: css(styles$n.responsiveContainer)
   }, fieldset);
 }
 
@@ -27986,40 +27578,6 @@ var styles$n = StyleSheet.create({
   radioContainerLastHighlighted: {
     borderBottom: "1px solid rgba(0, 0, 0, 0)"
   },
-  satRadio: {
-    background: "none",
-    marginLeft: 0,
-    userSelect: "none"
-  },
-  satRadioOption: {
-    margin: 0,
-    padding: 0,
-    borderBottom: "1px solid #ccc",
-    ":first-child": {
-      borderTop: "1px solid #ccc"
-    }
-  },
-  satRadioOptionCorrect: {
-    borderBottomColor: satCorrectBorderColor,
-    ":first-child": {
-      borderTopColor: satCorrectBorderColor
-    }
-  },
-  satRadioOptionIncorrect: {
-    borderBottomColor: satIncorrectBorderColor,
-    ":first-child": {
-      borderTopColor: satIncorrectBorderColor
-    }
-  },
-  satRadioOptionNextCorrect: {
-    borderBottomColor: satCorrectBorderColor
-  },
-  satRadioOptionNextIncorrect: {
-    borderBottomColor: satIncorrectBorderColor
-  },
-  satReviewRadioOption: {
-    pointerEvents: "none"
-  },
   item: {
     marginLeft: 20
   },
@@ -29120,16 +28678,24 @@ class Definition extends React.Component {
         opened: activeDefinitionId === this.props.widgetId,
         onClose: () => setActiveDefinitionId(null),
         placement: "top"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "perseus-widget-definition"
-      }, /*#__PURE__*/React.createElement(Button, {
-        size: "medium",
-        kind: "tertiary",
+      }, /*#__PURE__*/React.createElement(Clickable, {
         onClick: () => {
           this.props.trackInteraction();
           setActiveDefinitionId(this.props.widgetId);
         }
-      }, this.props.togglePrompt)));
+      }, _ref2 => {
+        var {
+          hovered,
+          focused,
+          pressed
+        } = _ref2;
+        return /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: Color.blue,
+            borderBottom: hovered || focused || pressed ? "2px solid ".concat(Color.blue) : "none"
+          }
+        }, this.props.togglePrompt);
+      }));
     });
   }
 
@@ -35519,12 +35085,6 @@ var collegeCareersMoreTopicColor = "#329A86";
 var collegeCareersMoreHoverColor = "#218270";
 var collegeCareersMoreLinkColor = "#218270";
 var collegeCareersMoreLinkHoverColor = "#329A86";
-var satDomainColor = "#0084CE";
-var satSubjectColor = "#0084CE";
-var satTopicColor = "#0084CE";
-var satHoverColor = "#0084CE";
-var satLinkColor = "#0084CE";
-var satLinkHoverColor = "#0084CE";
 var colorProficient = "#1C758A";
 var colorPracticed = "rgb(158, 221, 235)";
 var colorMastery1 = "rgb(90, 197, 221)";
@@ -35870,12 +35430,6 @@ var globalConstants = /*#__PURE__*/Object.freeze({
     collegeCareersMoreHoverColor: collegeCareersMoreHoverColor,
     collegeCareersMoreLinkColor: collegeCareersMoreLinkColor,
     collegeCareersMoreLinkHoverColor: collegeCareersMoreLinkHoverColor,
-    satDomainColor: satDomainColor,
-    satSubjectColor: satSubjectColor,
-    satTopicColor: satTopicColor,
-    satHoverColor: satHoverColor,
-    satLinkColor: satLinkColor,
-    satLinkHoverColor: satLinkHoverColor,
     colorProficient: colorProficient,
     colorPracticed: colorPracticed,
     colorMastery1: colorMastery1,
@@ -48727,7 +48281,7 @@ class HintRenderer extends React.Component {
       className: "perseus-sr-only"
     }, i18n._("Hint #%(pos)s", {
       pos: pos + 1
-    })), !apiOptions.isMobile && !apiOptions.satStyling && totalHints && pos != null && /*#__PURE__*/React.createElement("span", {
+    })), !apiOptions.isMobile && totalHints != null && pos != null && /*#__PURE__*/React.createElement("span", {
       className: "perseus-hint-label",
       style: {
         display: "block",