@khanacademy/perseus 1.4.0 → 2.0.0

package/dist/index.js

@@ -370,7 +370,6 @@ _defineProperty(StubTagEditor, "defaultProps", {
 const ApiOptions = {
   propTypes: PropTypes__default["default"].shape({
     isArticle: PropTypes__default["default"].bool.isRequired,
-    satStyling: PropTypes__default["default"].bool.isRequired,
     onInputError: PropTypes__default["default"].func.isRequired,
     onFocusChange: PropTypes__default["default"].func.isRequired,
     staticRender: PropTypes__default["default"].bool.isRequired,
@@ -432,18 +431,6 @@ const ApiOptions = {
     setDrawingAreaAvailable: PropTypes__default["default"].func,
     // Whether to use the Draft.js editor or the legacy textarea
     useDraftEditor: PropTypes__default["default"].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__default["default"].shape({
-      // TODO(Nicole): Remove this after landing wonderblock-ifying
-      // the radio widget
-      primaryProductColor: PropTypes__default["default"].string
-    }),
     // The color used for the hint progress indicator (eg. 1 / 3)
     hintProgressColor: PropTypes__default["default"].string,
     // Whether this Renderer is allowed to auto-scroll the rest of the
@@ -476,7 +463,6 @@ const ApiOptions = {
   defaults: {
     isArticle: false,
     isMobile: false,
-    satStyling: false,
     onInputError: function () {},
     onFocusChange: function () {},
     staticRender: false,
@@ -493,7 +479,6 @@ const ApiOptions = {
     },
     setDrawingAreaAvailable: function () {},
     useDraftEditor: false,
-    styling: {},
     canScrollPage: false,
     inModal: false,
     crossOutEnabled: false,
@@ -3000,28 +2985,7 @@ const pureMdMax$2 = "1023px"; // @pure-lg-max: (@pure-xl-min - 1);
 
 const pureLgMax$2 = "1279px"; // @tableBackgroundAccent: #f9f9f9; // for striping
 
-const tableBackgroundAccent$1 = "#F9F9F9";
-const gtpBlue = "#4c00ff";
-const gtpIncorrectColor = "#babec2";
-const gtpCorrectColor = "#ffbe26"; // @satBlue:               #0084ce;
-
-const satBlue = "#0084CE"; // @satSelectedBackgroundColor: #e4f3f9;
-
-const satSelectedBackgroundColor = "#E4F3F9"; // @satActiveBackgroundColor: #d0edf4;
-
-const satActiveBackgroundColor = "#D0EDF4"; // @satCorrectColor:       #009900;
-
-const satCorrectColor = "#009900"; // @satCorrectBorderColor: #00cc00;
-
-const satCorrectBorderColor = "#00CC00"; // @satCorrectBackgroundColor: #e4f7e4;
-
-const satCorrectBackgroundColor = "#E4F7E4"; // @satIncorrectColor:     #990000;
-
-const satIncorrectColor = "#990000"; // @satIncorrectBorderColor: #cc5252;
-
-const satIncorrectBorderColor = "#CC5252"; // @satIncorrectBackgroundColor: #f2ebeb;
-
-const satIncorrectBackgroundColor = "#F2EBEB"; // @zIndexScratchPad: 1;
+const tableBackgroundAccent$1 = "#F9F9F9"; // @zIndexScratchPad: 1;
 
 const zIndexScratchPad = 1; // @zIndexAboveScratchpad: @zIndexScratchPad + 1;
 
@@ -3089,18 +3053,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,
@@ -17869,17 +17821,17 @@ class Lint extends React__namespace.Component {
       let 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__namespace.createElement("a", {
@@ -17887,16 +17839,16 @@ class Lint extends React__namespace.Component {
         target: "lint-help-window",
         className: aphrodite.css(style)
       }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.indicator, severityStyle)
+        className: aphrodite.css(styles$A.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+        className: aphrodite.css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
         key: i,
-        className: aphrodite.css(styles$B.tooltipParagraph)
+        className: aphrodite.css(styles$A.tooltipParagraph)
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: aphrodite.css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+        className: aphrodite.css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
       })));
     });
   }
@@ -17944,19 +17896,19 @@ class Lint extends React__namespace.Component {
 
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$A.lintContainer, styles$A.lintContainerBlock)
+      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
 
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$A.lintContainer)
+      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
 
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$A.lintContainer)
+    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 
 } // $FlowFixMe[prop-missing]
@@ -17981,7 +17933,7 @@ _defineProperty(Lint, "propTypes", {
   severity: PropTypes__default["default"].number
 });
 
-const styles$B = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.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.
@@ -18221,14 +18173,8 @@ const rules$1 = { ...pureMarkdown.pureMarkdownRules,
       }, output(node.col1, state))), /*#__PURE__*/React__namespace.createElement("div", {
         className: "perseus-column"
       }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "sat-header-grafting-area"
-      }), /*#__PURE__*/React__namespace.createElement("div", {
         className: "perseus-column-content"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "sat-skill-subscore-grafting-area"
-      }), output(node.col2, state), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "sat-grafting-area"
-      }))));
+      }, output(node.col2, state))));
     }
   },
   // Match paragraphs consisting solely of crowdin IDs
@@ -19874,7 +19820,7 @@ class Renderer extends React__namespace.Component {
             paddingRight: margin
           };
           const mobileInnerStyle = { ...innerStyle,
-            ...styles$A.mobileZoomableParentFix
+            ...styles$z.mobileZoomableParentFix
           };
           return /*#__PURE__*/React__namespace.createElement("div", {
             key: state.key,
@@ -20014,7 +19960,7 @@ class Renderer extends React__namespace.Component {
           paddingRight: 0
         };
         const mobileInnerStyle = { ...innerStyle,
-          ...styles$A.mobileZoomableParentFix
+          ...styles$z.mobileZoomableParentFix
         };
         const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
           style: { ...mobileInnerStyle,
@@ -20695,7 +20641,7 @@ _defineProperty(Renderer, "defaultProps", {
   linterContext: PerseusLinter__namespace.linterContextDefault
 });
 
-const styles$A = {
+const styles$z = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -22839,31 +22785,6 @@ var Expression$1 = {
   isLintable: true
 };
 
-class PossibleAnswers extends React__namespace.Component {
-  render() {
-    // It's redundant to show duplicate answers.
-    // So, remove duplicates from the given list of answer strings.
-    const answers = ___default["default"].uniq(this.props.answers);
-
-    const answerComponents = ___default["default"].map(answers, answer => {
-      // Plus, now that our answers are distinct, we can safely use the
-      // answer string as a key.
-      return /*#__PURE__*/React__namespace.createElement("dd", {
-        key: answer
-      }, answer);
-    });
-
-    return /*#__PURE__*/React__namespace.createElement("dl", {
-      className: "perseus-possible-answers"
-    }, /*#__PURE__*/React__namespace.createElement("dt", null, i18n__namespace.doNotTranslate("Correct Answer")), answerComponents);
-  }
-
-}
-
-_defineProperty(PossibleAnswers, "propTypes", {
-  answers: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
-});
-
 class SimpleKeypadInput extends React__namespace.Component {
   constructor() {
     super(...arguments);
@@ -23124,54 +23045,20 @@ class InputNumber extends React__namespace.Component {
       return input;
     } // HACK(johnsullivan): Create a function with shared logic between
     // this and NumericInput.
+    // TODO(jeremy): Deprecate this widget and prefer numeric-input.
 
 
-    const rubric = this.props.reviewModeRubric;
-    let correct = null;
-    let answerBlurb = null; // SAT is deprecated and not testable
-
-    /* c8 ignore if */
-
-    if (this.props.apiOptions.satStyling && rubric) {
-      const score = this.simpleValidate(rubric);
-      correct = score.type === "points" && score.earned === score.total;
-
-      if (!correct) {
-        // TODO(johnsullivan): Make this a little more
-        // human-friendly.
-        let answerString = String(rubric.value);
-
-        if (rubric.inexact && rubric.maxError) {
-          answerString += " \u00B1 " + rubric.maxError;
-        }
-
-        const answerStrings = [answerString];
-        answerBlurb = /*#__PURE__*/React__namespace.createElement(PossibleAnswers, {
-          answers: answerStrings
-        });
-      }
-    } // Note: This is _very_ similar to what `numeric-input.jsx` does. If
+    const 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.
 
-
-    const 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
-
+    const 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);
     }
 
-    const input = /*#__PURE__*/React__namespace.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
+    return /*#__PURE__*/React__namespace.createElement(InputWithExamples // eslint-disable-next-line react/no-string-refs
     , {
       ref: "input",
       value: this.props.currentValue,
@@ -23185,17 +23072,7 @@ class InputNumber extends React__namespace.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__namespace.createElement("span", {
-        className: "perseus-input-with-answer-blurb"
-      }, input, answerBlurb);
-    }
-
-    return input;
+    });
   }
 
   static validate(state, rubric) {
@@ -23272,7 +23149,7 @@ _defineProperty(InputNumber, "defaultProps", {
   linterContext: PerseusLinter.linterContextDefault
 });
 
-const styles$z = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -23289,16 +23166,6 @@ const styles$z = aphrodite.StyleSheet.create({
     paddingLeft: 0,
     paddingRight: Spacing__default["default"].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"
@@ -23376,49 +23243,6 @@ class NumericInput extends React__namespace.Component {
       previousValues: [""]
     });
 
-    _defineProperty(this, "getAnswerBlurb", rubric => {
-      let correct;
-      let answerBlurb;
-      /* Ignore this block because SAT is deprecated */
-
-      /* c8 ignore next */
-
-      if (this.props.apiOptions.satStyling && rubric) {
-        const score = this.simpleValidate(rubric);
-        correct = score.type === "points" && score.earned === score.total;
-
-        if (!correct) {
-          const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
-          const answerStrings = correctAnswers.map(answer => {
-            // Figure out how this answer is supposed to be
-            // displayed
-            let 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];
-            }
-
-            let answerString = KhanMath.toNumericString(answer.value, format);
-
-            if (answer.maxError) {
-              answerString += " \u00B1 " + KhanMath.toNumericString(answer.maxError, format);
-            }
-
-            return answerString;
-          });
-          answerBlurb = /*#__PURE__*/React__namespace.createElement(PossibleAnswers, {
-            answers: answerStrings
-          });
-        }
-      }
-
-      return [answerBlurb, !!correct];
-    });
-
     _defineProperty(this, "examples", () => {
       var _this$props$answerFor;
 
@@ -23647,9 +23471,6 @@ class NumericInput extends React__namespace.Component {
   }
 
   render() {
-    const rubric = this.props.reviewModeRubric;
-    const answers = this.getAnswerBlurb(rubric);
-    const answerBlurb = answers[0];
     let labelText = this.props.labelText;
 
     if (labelText == null || labelText === "") {
@@ -23686,7 +23507,7 @@ class NumericInput extends React__namespace.Component {
         height: "auto"
       }
     });
-    const input = /*#__PURE__*/React__namespace.createElement(InputWithExamples, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(InputWithExamples, {
       ref: ref => this.inputRef = ref,
       value: this.props.currentValue,
       onChange: this.handleChange,
@@ -23699,30 +23520,7 @@ class NumericInput extends React__namespace.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__namespace.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__namespace.createElement("label", {
-        className: "perseus-input-with-label"
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: "perseus-input-label",
-        "aria-hidden": "true"
-      }, i18n__namespace.doNotTranslate("Answer:")), input);
-    }
-
-    return /*#__PURE__*/React__namespace.createElement("div", null, input);
+    }));
   }
 
 } // TODO(thomas): Currently we receive a list of lists of acceptable answer types
@@ -24518,7 +24316,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
     const rects = this.state.cachedHighlightRects;
     return /*#__PURE__*/React__namespace.createElement("div", null, rects.map((rect, index) => /*#__PURE__*/React__namespace.createElement("div", {
       key: index,
-      className: aphrodite.css(styles$y.highlightRect),
+      className: aphrodite.css(styles$x.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -24539,7 +24337,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
 
 }
 
-const styles$y = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
 
@@ -24621,7 +24419,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
 
 
     const content = /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$x.tooltipLabel),
+      className: aphrodite.css(styles$w.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -24643,7 +24441,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
 
 }
 
-const styles$x = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.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
@@ -25245,7 +25043,7 @@ class HighlightableContent extends React__namespace.PureComponent {
     const buildHighlight = r => this._buildHighlight(r);
 
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$w.container),
+      className: aphrodite.css(styles$v.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React__namespace.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React__namespace.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -25266,7 +25064,7 @@ class HighlightableContent extends React__namespace.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$w.content),
+      className: aphrodite.css(styles$v.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React__namespace.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
@@ -25275,7 +25073,7 @@ class HighlightableContent extends React__namespace.PureComponent {
 
 }
 
-const styles$w = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.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
@@ -25691,7 +25489,7 @@ class LineHeightMeasurer extends React__namespace.Component {
 
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$v.measurer),
+      className: aphrodite.css(styles$u.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       ref: ref => this._line = ref,
@@ -25700,7 +25498,7 @@ class LineHeightMeasurer extends React__namespace.Component {
   }
 
 }
-const styles$v = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -26725,36 +26523,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.
-   */
-  const lettersString = i18n__namespace._("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");
-
-  const 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.
  */
@@ -26774,7 +26542,7 @@ function FocusRing(props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-test-id": "focus-ring",
-    className: aphrodite.css(styles$u.ring),
+    className: aphrodite.css(styles$t.ring),
     style: style
   }, children);
 }
@@ -26784,7 +26552,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -26794,9 +26562,38 @@ const styles$u = aphrodite.StyleSheet.create({
   }
 });
 
-const SAT_ICON_SIZE = 25;
-const LIBRARY_ICON_SIZE = 24;
-const styles$t = aphrodite.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.
+   */
+  const lettersString = i18n__namespace._("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");
+
+  const 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 " ";
+}
+
+const CHOICE_ICON_SIZE = 24;
+const styles$s = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -26807,28 +26604,26 @@ const styles$t = aphrodite.StyleSheet.create({
 // extra space for the cute rounded line cap.
 
 const CROSS_OUT_LINE_PADDING = 2;
-const CROSS_OUT_LINE_SIZE = LIBRARY_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
-const SAT_CROSS_OUT_LINE_SIZE = SAT_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
+const 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) {
-  const crossOutLineSize = props.sat ? SAT_CROSS_OUT_LINE_SIZE : CROSS_OUT_LINE_SIZE;
   return /*#__PURE__*/React__namespace.createElement("svg", {
-    width: crossOutLineSize,
-    height: crossOutLineSize,
-    viewBox: "0 0 ".concat(crossOutLineSize, " ").concat(crossOutLineSize),
-    className: aphrodite.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: aphrodite.css(styles$r.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.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",
@@ -26836,7 +26631,7 @@ function CrossOutLine(props) {
   }));
 }
 
-const styles$s = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -26847,10 +26642,11 @@ const styles$s = aphrodite.StyleSheet.create({
 
 function ChoiceInner(props) {
   const {
-    letter,
+    pos,
     showCorrectness,
     correct
   } = props;
+  const letter = getChoiceLetter(pos);
 
   if (!showCorrectness) {
     return letter;
@@ -26872,19 +26668,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) {
   let backgroundColor;
   let borderColor;
   let color;
 
   if (!showCorrectness && pressed) {
-    borderColor = primaryProductColor;
-    color = primaryProductColor;
-    backgroundColor = transparentBackground ? "transparent" : white$1;
+    borderColor = Color__default["default"].blue;
+    color = Color__default["default"].blue;
+    backgroundColor = "transparent";
   } else if (checked) {
-    // Note: kaGreen is not only the default product color,
-    // but also the "correctness" color
-    const bg = showCorrectness && correct ? Color__default["default"].green : primaryProductColor;
+    const bg = showCorrectness && correct ? Color__default["default"].green : Color__default["default"].blue;
     color = white$1;
     backgroundColor = bg;
     borderColor = bg;
@@ -26899,7 +26693,7 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, pri
   if (multipleSelect) {
     borderRadius = 3;
   } else {
-    borderRadius = LIBRARY_ICON_SIZE;
+    borderRadius = CHOICE_ICON_SIZE;
   }
 
   return {
@@ -26910,7 +26704,7 @@ function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, pri
   };
 }
 
-function LibraryChoiceIcon(props) {
+function ChoiceIcon(props) {
   const {
     checked,
     crossedOut,
@@ -26919,30 +26713,28 @@ function LibraryChoiceIcon(props) {
     focused,
     hovered,
     multipleSelect,
-    primaryProductColor,
+    pos,
     previouslyAnswered,
-    letter,
-    pressed,
-    transparentBackground
+    pressed
   } = props;
-  const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, primaryProductColor, correct, transparentBackground);
+  const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$t.iconWrapper)
+    className: aphrodite.css(styles$s.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
-    color: primaryProductColor,
+    color: Color__default["default"].blue,
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React__namespace.createElement("div", {
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: aphrodite.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: aphrodite.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__namespace.createElement("div", {
-    className: aphrodite.css(styles$r.innerWrapper)
+    className: aphrodite.css(styles$q.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
-    letter: letter,
+    pos: pos,
     showCorrectness: showCorrectness,
     correct: correct
   })))), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
@@ -26950,10 +26742,10 @@ function LibraryChoiceIcon(props) {
   }));
 }
 
-const styles$r = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.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",
@@ -26961,8 +26753,8 @@ const styles$r = aphrodite.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,
@@ -26985,10 +26777,10 @@ const styles$r = aphrodite.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
   },
@@ -26999,161 +26791,6 @@ const styles$r = aphrodite.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) {
-  let backgroundColor;
-  let borderColor = satBlue;
-  let 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;
-  }
-
-  let borderRadius;
-
-  if (multipleSelect) {
-    borderRadius = 3;
-  } else {
-    borderRadius = SAT_ICON_SIZE;
-  }
-
-  return {
-    color,
-    backgroundColor,
-    borderColor,
-    borderRadius
-  };
-}
-
-function SATChoiceIcon(props) {
-  const {
-    letter,
-    crossedOut,
-    reviewMode,
-    correct,
-    checked,
-    multipleSelect
-  } = props;
-  const {
-    color,
-    backgroundColor,
-    borderColor,
-    borderRadius
-  } = constructSATStyles(reviewMode, correct, checked, multipleSelect);
-  return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$t.iconWrapper)
-  }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.satCircle),
-    "data-test-id": "choice-icon__sat-choice-icon",
-    style: {
-      backgroundColor,
-      borderColor,
-      borderRadius
-    }
-  }), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      color
-    },
-    className: aphrodite.css(styles$q.letter)
-  }, /*#__PURE__*/React__namespace.createElement("span", null, letter)), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
-    color: borderColor,
-    sat: true
-  }));
-}
-
-const styles$q = aphrodite.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) {
-  const {
-    pos,
-    reviewMode,
-    checked,
-    crossedOut,
-    correct,
-    product,
-    multipleSelect,
-    showCorrectness,
-    focused,
-    hovered,
-    pressed,
-    primaryProductColor = Color__default["default"].blue,
-    previouslyAnswered,
-    transparentBackground
-  } = props;
-  const letter = getChoiceLetter(pos);
-
-  if (product === "sat") {
-    return /*#__PURE__*/React__namespace.createElement(SATChoiceIcon, {
-      letter: letter,
-      reviewMode: reviewMode,
-      checked: checked,
-      correct: correct,
-      crossedOut: crossedOut,
-      multipleSelect: multipleSelect
-    });
-  }
-
-  return /*#__PURE__*/React__namespace.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.
@@ -27192,16 +26829,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;
   }
@@ -27299,21 +26930,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)
-
+  }
 
-  const satCorrectChoice = apiOptions.satStyling && reviewMode && correct;
-  const satIncorrectChecked = apiOptions.satStyling && reviewMode && !correct && checked;
-  const descriptionClassName = classNames__default["default"]("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", aphrodite.css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.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
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$o.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.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.
 
-  const showDimmed = !apiOptions.satStyling && !reviewMode && apiOptions.readOnly || crossedOut;
+  const showDimmed = !reviewMode && apiOptions.readOnly || crossedOut;
   const letter = getChoiceLetter(pos);
   const a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
   const choiceId = uniqueId();
@@ -27368,8 +26992,6 @@ function Choice(props) {
     ref: forwardedRef,
     "aria-hidden": "true"
   }, _ref => {
-    var _apiOptions$styling;
-
     let {
       hovered,
       focused,
@@ -27396,8 +27018,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__namespace.createElement("span", {
       style: {
@@ -27411,8 +27031,7 @@ function Choice(props) {
       correct: correct,
       crossedOut: crossedOut,
       previouslyAnswered: previouslyAnswered,
-      reviewMode: reviewMode,
-      satStyling: apiOptions.satStyling
+      reviewMode: reviewMode
     })), /*#__PURE__*/React__namespace.createElement("div", null, content)));
   }), apiOptions.crossOutEnabled && !reviewMode && /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
     dismissEnabled: true,
@@ -27495,24 +27114,8 @@ const styles$o = aphrodite.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,
@@ -27520,10 +27123,6 @@ const styles$o = aphrodite.StyleSheet.create({
       padding: intermediateCheckboxPaddingPhone,
       paddingTop: 0
     }
-  },
-  satReviewRationale: {
-    marginTop: 13,
-    marginLeft: 45
   }
 });
 var Choice$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__*/React__namespace.createElement(Choice, _extends({}, props, {
@@ -27696,22 +27295,18 @@ function BaseRadio(props) {
   }); // some commonly used shorthands
 
   const reviewMode = !!reviewModeRubric;
-  const sat = apiOptions.satStyling;
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.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));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$n.radio, styles$n.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$n.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$n.radioContainerLastHighlighted));
   const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$n.instructions, isMobile && styles$n.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const shouldShowInstructions = !sat;
   const responsiveClassName = aphrodite.css(styles$n.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: "perseus-widget-radio-fieldset ".concat(responsiveClassName)
-  }, shouldShowInstructions && /*#__PURE__*/React__namespace.createElement("legend", {
+  }, /*#__PURE__*/React__namespace.createElement("legend", {
     className: "perseus-sr-only"
-  }, instructions), shouldShowInstructions && /*#__PURE__*/React__namespace.createElement("div", {
+  }, instructions), /*#__PURE__*/React__namespace.createElement("div", {
     className: instructionsClassName,
     "aria-hidden": "true"
   }, instructions), /*#__PURE__*/React__namespace.createElement("ul", {
@@ -27762,9 +27357,7 @@ function BaseRadio(props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      const satShowCorrectness = sat && reviewMode && checked;
-      const satShowCorrectnessNext = sat && reviewMode && nextChoice && nextChoice.checked;
-      return aphrodite.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 aphrodite.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.
@@ -27826,10 +27419,9 @@ function BaseRadio(props) {
     }, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-    className: aphrodite.css(!sat && styles$n.responsiveContainer)
+    className: aphrodite.css(styles$n.responsiveContainer)
   }, fieldset);
 }
 
@@ -27878,40 +27470,6 @@ const styles$n = aphrodite.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
   },
@@ -29013,16 +28571,24 @@ class Definition extends React__namespace.Component {
         opened: activeDefinitionId === this.props.widgetId,
         onClose: () => setActiveDefinitionId(null),
         placement: "top"
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: "perseus-widget-definition"
-      }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
-        size: "medium",
-        kind: "tertiary",
+      }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         onClick: () => {
           this.props.trackInteraction();
           setActiveDefinitionId(this.props.widgetId);
         }
-      }, this.props.togglePrompt)));
+      }, _ref2 => {
+        let {
+          hovered,
+          focused,
+          pressed
+        } = _ref2;
+        return /*#__PURE__*/React__namespace.createElement("span", {
+          style: {
+            color: Color__default["default"].blue,
+            borderBottom: hovered || focused || pressed ? "2px solid ".concat(Color__default["default"].blue) : "none"
+          }
+        }, this.props.togglePrompt);
+      }));
     });
   }
 
@@ -35384,12 +34950,6 @@ const collegeCareersMoreTopicColor = "#329A86";
 const collegeCareersMoreHoverColor = "#218270";
 const collegeCareersMoreLinkColor = "#218270";
 const collegeCareersMoreLinkHoverColor = "#329A86";
-const satDomainColor = "#0084CE";
-const satSubjectColor = "#0084CE";
-const satTopicColor = "#0084CE";
-const satHoverColor = "#0084CE";
-const satLinkColor = "#0084CE";
-const satLinkHoverColor = "#0084CE";
 const colorProficient = "#1C758A";
 const colorPracticed = "rgb(158, 221, 235)";
 const colorMastery1 = "rgb(90, 197, 221)";
@@ -35735,12 +35295,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,
@@ -48579,7 +48133,7 @@ class HintRenderer extends React__namespace.Component {
       className: "perseus-sr-only"
     }, i18n__namespace._("Hint #%(pos)s", {
       pos: pos + 1
-    })), !apiOptions.isMobile && !apiOptions.satStyling && totalHints && pos != null && /*#__PURE__*/React__namespace.createElement("span", {
+    })), !apiOptions.isMobile && totalHints != null && pos != null && /*#__PURE__*/React__namespace.createElement("span", {
       className: "perseus-hint-label",
       style: {
         display: "block",