@khanacademy/perseus 21.5.0 → 22.0.0

package/dist/es/index.js

@@ -1,13 +1,12 @@
 import * as KAS from '@khanacademy/kas';
-import { keyTranslator, CursorContext, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
+import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
 import { View, RenderStateRoot, useUniqueIdWithMock, UniqueIDProvider, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
-import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, createContext, useImperativeHandle } from 'react';
+import React__default, { useContext, useState, useEffect, useRef, createContext, useImperativeHandle } from 'react';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
@@ -30,7 +29,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { Point as Point$2, useTransformContext, vec, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
+import { Line as Line$3, Point as Point$2, useTransformContext, vec, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -45,14 +44,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -63,16 +60,219 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
+/**
+ * The translated strings that are used to render Perseus.
+ */
+
+/**
+ * Mock strings for the Perseus package, to be used for tests and Storybook.
+ */
+const mockStrings = {
+  closeKeypad: "close math keypad",
+  openKeypad: "open math keypad",
+  removeHighlight: "Remove highlight",
+  addHighlight: "Add highlight",
+  hintPos: ({
+    pos
+  }) => `Hint #${pos}`,
+  errorRendering: ({
+    error
+  }) => `Error rendering: ${error}`,
+  APPROXIMATED_PI_ERROR: "Your answer is close, but you may " + "have approximated pi. Enter your " + "answer as a multiple of pi, like " + "<code>12\\ \\text{pi}</code> or " + "<code>2/3\\ \\text{pi}</code>",
+  EXTRA_SYMBOLS_ERROR: "We could not understand your " + "answer. Please check your answer for extra " + "text or symbols.",
+  NEEDS_TO_BE_SIMPLFIED_ERROR: "Your answer is almost correct, " + "but it needs to be simplified.",
+  MISSING_PERCENT_ERROR: "Your answer is almost correct, " + "but it is missing a " + "<code>\\%</code> at the end.",
+  MULTIPLICATION_SIGN_ERROR: "I'm a computer. I only understand " + "multiplication if you use an asterisk " + "(*) as the multiplication sign.",
+  WRONG_CASE_ERROR: "Your answer includes use of a variable with the wrong case.",
+  WRONG_LETTER_ERROR: "Your answer includes a wrong variable letter.",
+  invalidSelection: "Make sure you select something for every row.",
+  ERROR_TITLE: "Oops!",
+  ERROR_MESSAGE: "Sorry, I don't understand that!",
+  hints: "Hints",
+  getAnotherHint: "Get another hint",
+  deprecatedStandin: "Sorry, this part of the question is no longer available. 😅 Don't worry, you won't be graded on this part. Keep going!",
+  keepTrying: "Keep trying",
+  tryAgain: "Try again",
+  check: "Check",
+  correctExcited: "Correct!",
+  nextQuestion: "Next question",
+  skipToTitle: ({
+    title
+  }) => `Skip to ${title}`,
+  current: "Current",
+  correct: "Correct",
+  correctSelected: "Correct (selected)",
+  correctCrossedOut: "Correct (but you crossed it out)",
+  incorrect: "Incorrect",
+  incorrectSelected: "Incorrect (selected)",
+  hideExplanation: "Hide explanation",
+  explain: "Explain",
+  INVALID_MESSAGE_PREFIX: "We couldn't grade your answer.",
+  DEFAULT_INVALID_MESSAGE_1: "It looks like you left something blank or ",
+  DEFAULT_INVALID_MESSAGE_2: "entered in an invalid answer.",
+  integerExample: "an integer, like $6$",
+  properExample: "a *proper* fraction, like $1/2$ or $6/10$",
+  simplifiedProperExample: "a *simplified proper* fraction, like $3/5$",
+  improperExample: "an *improper* fraction, like $10/7$ or $14/8$",
+  simplifiedImproperExample: "a *simplified improper* fraction, like $7/4$",
+  mixedExample: "a mixed number, like $1\\ 3/4$",
+  decimalExample: "an *exact* decimal, like $0.75$",
+  percentExample: "a percent, like $12.34\\%$",
+  piExample: "a multiple of pi, like $12\\ \\text{pi}$ or $2/3\\ \\text{pi}$",
+  yourAnswer: "**Your answer should be** ",
+  yourAnswerLabel: "Your answer:",
+  addPoints: "Click to add points",
+  addVertices: "Click to add vertices",
+  tapMultiple: "Tap each dot on the image to select all answers that apply.",
+  tapSingle: "Tap each dot on the image to select an answer.",
+  clickMultiple: "Click each dot on the image to select all answers that apply.",
+  clickSingle: "Click each dot on the image to select an answer.",
+  choices: "Choices:",
+  answers: ({
+    num
+  }) => num === 1 ? `${num} answer` : `${num} answers`,
+  hideAnswersToggleLabel: "Hide answer choices",
+  moves: ({
+    num
+  }) => num === 1 ? `Moves: ${num}` : `Moves: ${num}`,
+  clickTiles: "Click on the tiles to change the lights.",
+  turnOffLights: "You must turn on all of the lights to continue.",
+  fillAllCells: "Make sure you fill in all cells in the matrix.",
+  molecularDrawing: ({
+    content
+  }) => `A molecular structure drawing. SMILES notation: ${content}`,
+  switchDirection: "Switch direction",
+  circleOpen: "Make circle open",
+  circleFilled: "Make circle filled",
+  numDivisions: "Number of divisions:",
+  divisions: ({
+    divRangeString
+  }) => `Please make sure the number of divisions is in the range ${divRangeString}.`,
+  lineRange: ({
+    lineRange
+  }) => `lines ${lineRange}`,
+  lineNumber: ({
+    lineNumber
+  }) => `line ${lineNumber}`,
+  symbolPassage: ({
+    questionSymbol,
+    questionNumber
+  }) => `The symbol ${questionSymbol} indicates that question ${questionNumber} references this portion of the passage.`,
+  symbolQuestion: ({
+    sentenceSymbol
+  }) => ` The symbol ${sentenceSymbol} indicates that the following sentence is referenced in a question.`,
+  lineLabel: "Line",
+  beginningPassage: "Beginning of reading passage.",
+  beginningFootnotes: "Beginning of reading passage footnotes.",
+  endPassage: "End of reading passage.",
+  questionMarker: ({
+    number
+  }) => `[Marker for question ${number}]`,
+  circleMarker: ({
+    number
+  }) => `[Circle marker ${number}]`,
+  sentenceMarker: ({
+    number
+  }) => `[Sentence ${number}]`,
+  dragHandles: "Drag handles to make graph",
+  tapAddPoints: "Tap to add points",
+  false: "False",
+  true: "True",
+  no: "No",
+  yes: "Yes",
+  chooseCorrectNum: "Please choose the correct number of answers.",
+  notNoneOfTheAbove: "'None of the above' may not be selected when other answers are selected.",
+  noneOfTheAbove: "None of the above",
+  chooseNumAnswers: ({
+    numCorrect
+  }) => `Choose ${numCorrect} answers:`,
+  chooseAllAnswers: "Choose all answers that apply:",
+  chooseOneAnswer: "Choose 1 answer:",
+  choiceCheckedCorrect: ({
+    letter
+  }) => `(Choice ${letter}, Checked, Correct)`,
+  choiceCrossedOutCorrect: ({
+    letter
+  }) => `(Choice ${letter}, Crossed out, Correct)`,
+  choiceCorrect: ({
+    letter
+  }) => `(Choice ${letter}, Correct)`,
+  choiceCheckedIncorrect: ({
+    letter
+  }) => `(Choice ${letter}, Checked, Incorrect)`,
+  choiceCrossedOutIncorrect: ({
+    letter
+  }) => `(Choice ${letter}, Crossed out, Incorrect)`,
+  choiceIncorrect: ({
+    letter
+  }) => `(Choice ${letter}, Incorrect)`,
+  choiceChecked: ({
+    letter
+  }) => `(Choice ${letter}, Checked)`,
+  choiceCrossedOut: ({
+    letter
+  }) => `(Choice ${letter}, Crossed out)`,
+  choice: ({
+    letter
+  }) => `(Choice ${letter})`,
+  crossOut: "Cross out",
+  crossOutOption: "Cross out option",
+  crossOutChoice: ({
+    letter
+  }) => `Cross out Choice ${letter}`,
+  bringBack: "Bring back",
+  openMenuForChoice: ({
+    letter
+  }) => `Open menu for Choice ${letter}`,
+  letters: "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",
+  rightArrow: "Reaction arrow pointing to the right.",
+  dontUnderstandUnits: "I couldn't understand those units.",
+  checkSigFigs: "Check your significant figures.",
+  answerNumericallyIncorrect: "That answer is numerically incorrect.",
+  checkUnits: "Check your units.",
+  dontUnderstand: "I don't understand that",
+  loading: "Loading...",
+  videoTranscript: "See video transcript",
+  somethingWrong: "Something went wrong.",
+  videoWrapper: "Khan Academy video wrapper"
+};
+
+/**
+ * PerseusI18nContext provides a way to set the strings and locale that are
+ * used inside the Perseus package.
+ *
+ */
+// @ts-expect-error - TS2322 - Type 'Context<{ strings: {}; locale: string; }>' is not assignable to type 'Context<I18nContextType>'.
+const PerseusI18nContext = /*#__PURE__*/React.createContext(process.env.NODE_ENV === "test" || process.env.STORYBOOK ? {
+  strings: mockStrings,
+  locale: "en"
+} :
+// We want to return null here, not an empty object, so that we
+// are will throw an error when attempting to access the
+// undefined locale or strings, making it easier to debug.
+null);
+function PerseusI18nContextProvider({
+  children,
+  strings,
+  locale
+}) {
+  return /*#__PURE__*/React.createElement(PerseusI18nContext.Provider, {
+    value: {
+      strings,
+      locale
+    }
+  }, children);
+}
+const usePerseusI18n = () => useContext(PerseusI18nContext);
+
 const debounce = (func, delay) => {
   let timer = null;
   return (...args) => {
@@ -85,21 +285,8 @@ const debounce = (func, delay) => {
   };
 };
 
-const customKeyTranslator = _extends({}, keyTranslator, {
-  // If there's something in the input that can become part of a
-  // fraction, typing "/" puts it in the numerator. If not, typing
-  // "/" does nothing. In that case, enter a \frac.
-  FRAC: mathQuill => {
-    const contents = mathQuill.latex();
-    mathQuill.typedText("/");
-    if (mathQuill.latex() === contents) {
-      mathQuill.cmd("\\frac");
-    }
-  }
-});
-
 // A WYSIWYG math input that calls `onChange(LaTeX-string)`
-class MathInput extends React.Component {
+class InnerMathInput extends React.Component {
   constructor(...args) {
     super(...args);
     // @ts-expect-error - TS2564 - Property 'mouseDown' has no initializer and is not definitely assigned in the constructor.
@@ -113,6 +300,21 @@ class MathInput extends React.Component {
     };
     this.insert = value => {
       const input = this.mathField();
+      const {
+        locale
+      } = this.context;
+      const customKeyTranslator = _extends({}, getKeyTranslator(locale), {
+        // If there's something in the input that can become part of a
+        // fraction, typing "/" puts it in the numerator. If not, typing
+        // "/" does nothing. In that case, enter a \frac.
+        FRAC: mathQuill => {
+          const contents = mathQuill.latex();
+          mathQuill.typedText("/");
+          if (mathQuill.latex() === contents) {
+            mathQuill.cmd("\\frac");
+          }
+        }
+      });
       const inputModifier = customKeyTranslator[value];
       if (inputModifier) {
         inputModifier(input, value);
@@ -135,8 +337,11 @@ class MathInput extends React.Component {
     };
     this.mathField = () => {
       if (!this.__mathField && this.__mathFieldWrapperRef) {
+        const {
+          locale
+        } = this.context;
         // Initialize MathQuill.MathField instance
-        this.__mathField = createMathField(this.__mathFieldWrapperRef, baseConfig => _extends({}, baseConfig, {
+        this.__mathField = createMathField(this.__mathFieldWrapperRef, this.props.mathInputStrings, baseConfig => _extends({}, baseConfig, {
           handlers: {
             edit: debounce(mathField => {
               // This handler is guaranteed to be called on change, but
@@ -152,7 +357,7 @@ class MathInput extends React.Component {
               // Use the specified symbol to represent multiplication
               // TODO(alex): Add an option to disallow variables, in
               // which case 'x' should get converted to '\\times'
-              if (convertDotToTimesByLocale(this.props.convertDotToTimes)) {
+              if (convertDotToTimesByLocale(locale, this.props.convertDotToTimes)) {
                 value = value.replace(/\\cdot/g, "\\times");
 
                 // Preserve cursor position in the common case:
@@ -212,7 +417,10 @@ class MathInput extends React.Component {
       focused: false
     });
     this.handleKeypadPress = (key, e) => {
-      const translator = keyTranslator[key];
+      const {
+        locale
+      } = this.context;
+      const translator = getKeyTranslator(locale)[key];
       const mathField = this.mathField();
       if (mathField) {
         if (translator) {
@@ -311,7 +519,7 @@ class MathInput extends React.Component {
       focused: false,
       active: false
     }) : /*#__PURE__*/React.createElement(Clickable, {
-      "aria-label": this.state.keypadOpen ? i18n._("close math keypad") : i18n._("open math keypad"),
+      "aria-label": this.state.keypadOpen ? this.context.strings.closeKeypad : this.context.strings.openKeypad,
       "aria-checked": this.state.keypadOpen,
       role: "switch",
       onClick: () => this.state.keypadOpen ? this.closeKeypad() : this.openKeypad()
@@ -320,10 +528,36 @@ class MathInput extends React.Component {
     }, props))))));
   }
 }
-MathInput.defaultProps = {
+
+// We need to have two contexts (one for Perseus and one for MathInput), so we
+// add a wrapper around the MathInput component to provide the MathInput context
+// to it.
+InnerMathInput.contextType = PerseusI18nContext;
+InnerMathInput.defaultProps = {
   value: "",
   convertDotToTimes: false
 };
+class MathInput extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.inputRef = /*#__PURE__*/React.createRef();
+  }
+  focus() {
+    var _this$inputRef$curren;
+    (_this$inputRef$curren = this.inputRef.current) == null || _this$inputRef$curren.focus();
+  }
+  insert(value) {
+    var _this$inputRef$curren2;
+    (_this$inputRef$curren2 = this.inputRef.current) == null || _this$inputRef$curren2.insert(value);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(InnerMathInput, _extends({}, this.props, {
+      ref: this.inputRef,
+      mathInputStrings: this.context.strings
+    }));
+  }
+}
+MathInput.contextType = MathInputI18nContext;
 const MathInputIcon = ({
   hovered,
   focused,
@@ -1239,16 +1473,6 @@ const MAXERROR_EPSILON = Math.pow(2, -42);
 // TOOD(kevinb): Figure out how this relates to KEScore in
 // perseus-all-package/types.js and see if there's a way to
 // unify these types.
-const errors = {
-  APPROXIMATED_PI_ERROR: i18n._("Your answer is close, but you may " + "have approximated pi. Enter your " + "answer as a multiple of pi, like " + "<code>12\\ \\text{pi}</code> or " + "<code>2/3\\ \\text{pi}</code>"),
-  EXTRA_SYMBOLS_ERROR: i18n._("We could not understand your " + "answer. Please check your answer for extra " + "text or symbols."),
-  NEEDS_TO_BE_SIMPLFIED_ERROR: i18n._("Your answer is almost correct, " + "but it needs to be simplified."),
-  MISSING_PERCENT_ERROR: i18n._("Your answer is almost correct, " + "but it is missing a " + "<code>\\%</code> at the end."),
-  MULTIPLICATION_SIGN_ERROR: i18n._("I'm a computer. I only understand " + "multiplication if you use an asterisk " + "(*) as the multiplication sign."),
-  WRONG_CASE_ERROR: i18n._("Your answer includes use of a variable with the wrong case."),
-  WRONG_LETTER_ERROR: i18n._("Your answer includes a wrong variable letter.")
-};
-
 /*
  * Answer types
  *
@@ -1321,7 +1545,7 @@ const KhanAnswerTypes = {
    */
   predicate: {
     defaultForms: "integer, proper, improper, mixed, decimal",
-    createValidatorFunctional: function (predicate, options) {
+    createValidatorFunctional: function (predicate, options, strings) {
       // Extract the options from the given solution object
       options = _.extend({
         simplify: "required",
@@ -1709,12 +1933,12 @@ const KhanAnswerTypes = {
               } else if (form === "percent") {
                 // Otherwise, an error was returned
                 score.empty = true;
-                score.message = errors.MISSING_PERCENT_ERROR;
+                score.message = strings.MISSING_PERCENT_ERROR;
               } else {
                 if (options.simplify !== "enforced") {
                   score.empty = true;
                 }
-                score.message = errors.NEEDS_TO_BE_SIMPLFIED_ERROR;
+                score.message = strings.NEEDS_TO_BE_SIMPLFIED_ERROR;
               }
               // The return false below stops the looping of the
               // callback since predicate check  succeeded.
@@ -1723,7 +1947,7 @@ const KhanAnswerTypes = {
             }
             if (piApprox && predicate(val, Math.abs(val * 0.001))) {
               score.empty = true;
-              score.message = errors.APPROXIMATED_PI_ERROR;
+              score.message = strings.APPROXIMATED_PI_ERROR;
             }
           }
         });
@@ -1739,7 +1963,7 @@ const KhanAnswerTypes = {
           });
           if (!interpretedGuess) {
             score.empty = true;
-            score.message = errors.EXTRA_SYMBOLS_ERROR;
+            score.message = strings.EXTRA_SYMBOLS_ERROR;
             return score;
           }
         }
@@ -1762,10 +1986,10 @@ const KhanAnswerTypes = {
         type: "predicate"
       })];
     },
-    createValidatorFunctional: function (correctAnswer, options) {
+    createValidatorFunctional: function (correctAnswer, options, strings) {
       return KhanAnswerTypes.predicate.createValidatorFunctional(
       // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-      ...KhanAnswerTypes.number.convertToPredicate(correctAnswer, options));
+      ...KhanAnswerTypes.number.convertToPredicate(correctAnswer, options), strings);
     }
   },
   /*
@@ -1830,7 +2054,7 @@ const KhanAnswerTypes = {
       }
       return solution;
     },
-    createValidatorFunctional: function (solution, options) {
+    createValidatorFunctional: function (solution, options, strings) {
       return function (guess) {
         const score = {
           empty: false,
@@ -1881,7 +2105,7 @@ const KhanAnswerTypes = {
           // @ts-expect-error - TS2540 - Cannot assign to 'ungraded' because it is a read-only property.
           score.ungraded = true;
           // @ts-expect-error - TS2540 - Cannot assign to 'message' because it is a read-only property.
-          score.message = result.wrongVariableCase ? errors.WRONG_CASE_ERROR : errors.WRONG_LETTER_ERROR;
+          score.message = result.wrongVariableCase ? strings.WRONG_CASE_ERROR : strings.WRONG_LETTER_ERROR;
           // Don't tell the use they're "almost there" in this case, that may not be true and isn't helpful.
           // @ts-expect-error - TS2339 - Property 'suppressAlmostThere' does not exist on type '{ readonly empty: false; readonly correct: false; readonly message: string | null | undefined; readonly guess: any; readonly ungraded: false; }'.
           score.suppressAlmostThere = true;
@@ -1907,7 +2131,7 @@ const KhanAnswerTypes = {
               // @ts-expect-error - TS2540 - Cannot assign to 'ungraded' because it is a read-only property.
               score.ungraded = true;
               // @ts-expect-error - TS2540 - Cannot assign to 'message' because it is a read-only property.
-              score.message = errors.MULTIPLICATION_SIGN_ERROR;
+              score.message = strings.MULTIPLICATION_SIGN_ERROR;
             } else if (resultX.message) {
               // TODO(aasmund): I18nize `score.message`
               // @ts-expect-error - TS2540 - Cannot assign to 'message' because it is a read-only property.
@@ -1922,9 +2146,6 @@ const KhanAnswerTypes = {
 };
 
 const _excluded$5 = ["scoring"];
-const ERROR_TITLE = i18n._("Oops!");
-const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
-
 // Map of international operator names to their English equivalents
 const englishOperators = {
   arctg: "arctan",
@@ -1954,6 +2175,32 @@ const deriveKeypadVersion = apiOptions => {
   // can remove this `virtualKeypadVersion` field entirely.
   return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : "MATH_INPUT_KEYPAD_V2";
 };
+/**
+ *  Get the character used for separating decimals.
+ */
+const getDecimalSeparator = locale => {
+  var _match$;
+  switch (locale) {
+    // TODO(somewhatabstract): Remove this when Chrome supports the `ka`
+    // locale properly.
+    // https://github.com/formatjs/formatjs/issues/1526#issuecomment-559891201
+    //
+    // Supported locales in Chrome:
+    // https://source.chromium.org/chromium/chromium/src/+/master:third_party/icu/scripts/chrome_ui_languages.list
+    case "ka":
+      return ",";
+    default:
+      const numberWithDecimalSeparator = 1.1;
+      // TODO(FEI-3647): Update to use .formatToParts() once we no longer have to
+      // support Safari 12.
+      const match = new Intl.NumberFormat(locale).format(numberWithDecimalSeparator)
+      // 0x661 is ARABIC-INDIC DIGIT ONE
+      // 0x6F1 is EXTENDED ARABIC-INDIC DIGIT ONE
+      .match(/[^\d\u0661\u06F1]/);
+      return (_match$ = match == null ? void 0 : match[0]) != null ? _match$ : ".";
+  }
+};
+
 // The new, MathQuill input expression widget
 class Expression extends React.Component {
   constructor(..._args) {
@@ -1986,7 +2233,7 @@ class Expression extends React.Component {
         if (!this.parse(this.props.value, this.props).parsed) {
           const apiResult = this.props.apiOptions.onInputError(null,
           // reserved for some widget identifier
-          this.props.value, ERROR_MESSAGE);
+          this.props.value, this.context.strings.ERROR_TITLE);
           if (apiResult !== false) {
             this.setState({
               invalid: true
@@ -2010,7 +2257,7 @@ class Expression extends React.Component {
           scoring
         } = _ref,
         rubric = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-      const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {});
+      const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {}, this.context.strings, this.context.locale);
 
       // "scoring" is a flag that indicates when we are checking answers.
       // otherwise, we may just be checking validity after changes.
@@ -2037,7 +2284,7 @@ class Expression extends React.Component {
       // make it so that solution answers with ','s or '.'s work
       const options = _.pick(props || this.props, "functions");
       _.extend(options, {
-        decimal_separator: i18n.getDecimalSeparator()
+        decimal_separator: getDecimalSeparator(this.context.locale)
       });
       return KAS.parse(normalizeTex(value), options);
     };
@@ -2115,10 +2362,10 @@ class Expression extends React.Component {
    */
   static validate(userInput, rubric,
   // @ts-expect-error - TS2322 - Type '() => void' is not assignable to type 'OnInputErrorFunctionType'.
-  onInputError = function () {}) {
+  onInputError = function () {}, strings, locale) {
     const options = _.clone(rubric);
     _.extend(options, {
-      decimal_separator: i18n.getDecimalSeparator()
+      decimal_separator: getDecimalSeparator(locale)
     });
     const createValidator = answer => {
       // We give options to KAS.parse here because it is parsing the
@@ -2141,7 +2388,7 @@ class Expression extends React.Component {
       return KhanAnswerTypes.expression.createValidatorFunctional(expression.expr, _({}).extend(options, {
         simplify: answer.simplify,
         form: answer.form
-      }));
+      }), strings);
     };
 
     // Find the first answer form that matches the user's input and that
@@ -2284,6 +2531,10 @@ class Expression extends React.Component {
       "perseus-widget-expression": true,
       "show-error-tooltip": this.state.showErrorTooltip
     });
+    const {
+      ERROR_MESSAGE,
+      ERROR_TITLE
+    } = this.context.strings;
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       onBlur: () => this.state.invalid && this.setState({
@@ -2332,6 +2583,7 @@ class Expression extends React.Component {
  *       to be included as keys on the keypad. These are scraped from the answer
  *       forms.
  */
+Expression.contextType = PerseusI18nContext;
 Expression.defaultProps = {
   value: "",
   times: false,
@@ -2719,7 +2971,7 @@ function keScoreFromPerseusScore(score, guess, state) {
  * Return the first valid interpretation of 'text' as a number, in the form
  * {value: 2.3, exact: true}.
  */
-function firstNumericalParse$1(text) {
+function firstNumericalParse$1(text, strings) {
   // TODO(alpert): This is sort of hacky...
   let first;
   const val = KhanAnswerTypes.predicate.createValidatorFunctional(function (ans) {
@@ -2729,7 +2981,7 @@ function firstNumericalParse$1(text) {
     simplify: "optional",
     inexact: true,
     forms: "integer, proper, improper, pi, log, mixed, decimal"
-  });
+  }, strings);
   val(text);
   return first;
 }
@@ -4255,7 +4507,6 @@ function _classPrivateFieldBase(receiver, privateKey) {
   if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
     throw new TypeError("attempted to use private field on non-instance");
   }
-
   return receiver;
 }
 
@@ -10282,8 +10533,6 @@ const getClipPoint = function getClipPoint(graph, coord, angle) {
 class WrappedDrawing {
   constructor(graphie, initialPoint) {
     this.graphie = void 0;
-    this.wrapper = void 0;
-    this.visibleShape = void 0;
     this.initialPoint = void 0;
     this.graphie = graphie;
     this.initialPoint = initialPoint;
@@ -18317,7 +18566,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
       // just a stub for testing.
       return /*#__PURE__*/React.createElement("em", {
         key: state.key
-      }, i18n.doNotTranslate("[Widget: ", node.id, "]"));
+      }, `[Widget: ${node.id}]`);
     }
   }),
   blockMath: _extends({}, pureMarkdownRules.blockMath, {
@@ -18790,6 +19039,7 @@ const replaceDeprecatedEditors = () => {
   replaceEditor("simulator", "deprecated-standin");
 };
 const getWidget = name => {
+  var _widgets$name;
   // TODO(alex): Consider referring to these as renderers to avoid
   // overloading "widget"
   if (!_.has(widgets, name)) {
@@ -18797,9 +19047,9 @@ const getWidget = name => {
   }
 
   // Allow widgets to specify a widget directly or via a function
-  if (widgets[name].getWidget) {
-    // @ts-expect-error - TS2722 - Cannot invoke an object which is possibly 'undefined'.
-    return widgets[name].getWidget();
+  if ((_widgets$name = widgets[name]) != null && _widgets$name.getWidget) {
+    var _widgets$name$getWidg, _widgets$name2;
+    return (_widgets$name$getWidg = (_widgets$name2 = widgets[name]).getWidget) == null ? void 0 : _widgets$name$getWidg.call(_widgets$name2);
   }
   return widgets[name].widget;
 };
@@ -18948,7 +19198,7 @@ const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
     options: newEditorProps
   });
 };
-const getRendererPropsForWidgetInfo = (widgetInfo, problemNum) => {
+const getRendererPropsForWidgetInfo = (widgetInfo, strings, problemNum) => {
   const type = widgetInfo.type;
   const widgetExports = widgets[type];
   if (widgetExports == null) {
@@ -18969,7 +19219,7 @@ const getRendererPropsForWidgetInfo = (widgetInfo, problemNum) => {
     transform = widgetExports.transform || _.identity;
   }
   // widgetInfo.options are the widgetEditor's props:
-  return transform(widgetInfo.options, problemNum);
+  return transform(widgetInfo.options, strings, problemNum);
 };
 const traverseChildWidgets$3 = (widgetInfo, traverseRenderer) => {
   if (!traverseRenderer) {
@@ -19368,8 +19618,11 @@ class Renderer extends React.Component {
         problemNum
       } = props;
       const widgetsStartProps = {};
+      const {
+        strings
+      } = this.props;
       entries(allWidgetInfo).forEach(([key, widgetInfo]) => {
-        widgetsStartProps[key] = getRendererPropsForWidgetInfo(widgetInfo, problemNum);
+        widgetsStartProps[key] = getRendererPropsForWidgetInfo(widgetInfo, strings, problemNum);
       });
 
       // Call the onWidgetStartProps callback if it exists
@@ -21429,10 +21682,12 @@ class InputWithExamples extends React.Component {
       id: this._getUniqueId()
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: examplesContent,
-      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "input-with-examples")
+      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "input-with-examples"),
+      strings: this.context.strings
     })));
   }
 }
+InputWithExamples.contextType = PerseusI18nContext;
 InputWithExamples.defaultProps = {
   type: "text",
   shouldShowExamples: true,
@@ -21554,32 +21809,32 @@ const answerTypes = {
   }
 };
 const formExamples$1 = {
-  integer: function (options) {
-    return i18n._("an integer, like $6$");
+  integer: function (options, strings) {
+    return strings.integerExample;
   },
-  proper: function (options) {
+  proper: function (options, strings) {
     if (options.simplify === "optional") {
-      return i18n._("a *proper* fraction, like $1/2$ or $6/10$");
+      return strings.properExample;
     }
-    return i18n._("a *simplified proper* fraction, like $3/5$");
+    return strings.simplifiedProperExample;
   },
-  improper: function (options) {
+  improper: function (options, strings) {
     if (options.simplify === "optional") {
-      return i18n._("an *improper* fraction, like $10/7$ or $14/8$");
+      return strings.improperExample;
     }
-    return i18n._("a *simplified improper* fraction, like $7/4$");
+    return strings.simplifiedImproperExample;
   },
-  mixed: function (options) {
-    return i18n._("a mixed number, like $1\\ 3/4$");
+  mixed: function (options, strings) {
+    return strings.mixedExample;
   },
-  decimal: function (options) {
-    return i18n._("an *exact* decimal, like $0.75$");
+  decimal: function (options, strings) {
+    return strings.decimalExample;
   },
-  percent: function (options) {
-    return i18n._("a percent, like $12.34\\%$");
+  percent: function (options, strings) {
+    return strings.percentExample;
   },
-  pi: function (options) {
-    return i18n._("a multiple of pi, like $12\\ \\text{pi}$ or " + "$2/3\\ \\text{pi}$");
+  pi: function (options, strings) {
+    return strings.piExample;
   }
 };
 class InputNumber extends React.Component {
@@ -21637,18 +21892,16 @@ class InputNumber extends React.Component {
     };
     this.simpleValidate = (rubric, onInputError) => {
       onInputError = onInputError || function () {};
-      return InputNumber.validate(this.getUserInput(), rubric, onInputError);
+      return InputNumber.validate(this.getUserInput(), rubric, this.context.strings, onInputError);
     };
     this.examples = () => {
+      const {
+        strings
+      } = this.context;
       const type = this.props.answerType;
       const forms = answerTypes[type].forms.split(/\s*,\s*/);
-      const examples = _.map(forms, function (form) {
-        // eslint-disable-next-line @babel/no-invalid-this
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        // eslint-disable-next-line @babel/no-invalid-this
-        return formExamples$1[form](this.props);
-      }, this);
-      return [i18n._("**Your answer should be** ")].concat(examples);
+      const examples = _.map(forms, form => formExamples$1[form](this.props, strings));
+      return [strings.yourAnswer].concat(examples);
     };
   }
   render() {
@@ -21701,7 +21954,7 @@ class InputNumber extends React.Component {
       linterContext: this.props.linterContext
     });
   }
-  static validate(state, rubric, onInputError = () => {}) {
+  static validate(state, rubric, strings, onInputError = () => {}) {
     if (rubric.answerType == null) {
       rubric.answerType = "number";
     }
@@ -21715,7 +21968,7 @@ class InputNumber extends React.Component {
       inexact: rubric.inexact || undefined,
       maxError: rubric.maxError,
       forms: answerTypes[rubric.answerType].forms
-    });
+    }, strings);
 
     // We may have received TeX; try to parse it before grading.
     // If `currentValue` is not TeX, this should be a no-op.
@@ -21757,6 +22010,7 @@ class InputNumber extends React.Component {
     return answerString;
   }
 }
+InputNumber.contextType = PerseusI18nContext;
 InputNumber.defaultProps = {
   currentValue: "",
   size: "normal",
@@ -21840,12 +22094,12 @@ const answerFormButtons = [{
   content: "\u03C0"
 }];
 const formExamples = {
-  integer: () => i18n._("an integer, like $6$"),
-  proper: form => form.simplify === "optional" ? i18n._("a *proper* fraction, like $1/2$ or $6/10$") : i18n._("a *simplified proper* fraction, like $3/5$"),
-  improper: form => form.simplify === "optional" ? i18n._("an *improper* fraction, like $10/7$ or $14/8$") : i18n._("a *simplified improper* fraction, like $7/4$"),
-  mixed: () => i18n._("a mixed number, like $1\\ 3/4$"),
-  decimal: () => i18n._("an *exact* decimal, like $0.75$"),
-  pi: () => i18n._("a multiple of pi, like $12\\ \\text{pi}$ or " + "$2/3\\ \\text{pi}$")
+  integer: (form, strings) => strings.integerExample,
+  proper: (form, strings) => form.simplify === "optional" ? strings.properExample : strings.simplifiedProperExample,
+  improper: (form, strings) => form.simplify === "optional" ? strings.improperExample : strings.simplifiedImproperExample,
+  mixed: (form, strings) => strings.mixedExample,
+  decimal: (form, strings) => strings.decimalExample,
+  pi: (form, strings) => strings.piExample
 };
 class NumericInput extends React.Component {
   constructor(...args) {
@@ -21867,13 +22121,12 @@ class NumericInput extends React.Component {
         };
       });
       let examples = _.map(forms, form => {
-        // @ts-expect-error - TS2345 - Argument of type 'PerseusNumericInputAnswerForm | { name: string; simplify: string; }' is not assignable to parameter of type 'PerseusNumericInputAnswerForm'.
-        return formExamples[form.name](form);
+        return formExamples[form.name](form, this.context.strings);
       });
       // Ensure no duplicate tooltip text from simplified and unsimplified
       // versions of the same format
       examples = _.uniq(examples);
-      return [i18n._("**Your answer should be** ")].concat(examples);
+      return [this.context.strings.yourAnswer].concat(examples);
     };
     this.shouldShowExamples = () => {
       var _this$props$answerFor2, _this$props$answerFor3;
@@ -21886,7 +22139,7 @@ class NumericInput extends React.Component {
       return !noFormsAccepted && !allFormsAccepted;
     };
     this.simpleValidate = rubric => {
-      return NumericInput.validate(this.getUserInput(), rubric);
+      return NumericInput.validate(this.getUserInput(), rubric, this.context.strings);
     };
     this.focus = () => {
       var _this$inputRef;
@@ -21966,7 +22219,7 @@ class NumericInput extends React.Component {
     }
     return answerStrings[0];
   }
-  static validate(userInput, rubric) {
+  static validate(userInput, rubric, strings) {
     const defaultAnswerForms = answerFormButtons.map(e => e["value"])
     // Don't default to validating the answer as a pi answer
     // if answerForm isn't set on the answer
@@ -21993,7 +22246,7 @@ class NumericInput extends React.Component {
         // TODO(merlob) backfill / delete
         maxError: answer.maxError,
         forms: validatorForms
-      });
+      }, strings);
     };
 
     // We may have received TeX; try to parse it before grading.
@@ -22063,7 +22316,7 @@ class NumericInput extends React.Component {
   render() {
     let labelText = this.props.labelText;
     if (labelText == null || labelText === "") {
-      labelText = i18n._("Your answer:");
+      labelText = this.context.strings.yourAnswerLabel;
     }
 
     // To right align a custom keypad we need to wrap it.
@@ -22118,6 +22371,7 @@ class NumericInput extends React.Component {
 // a given *problem* rather than for each possible [correct/wrong] *answer*.
 // When should two answers to a problem take different answer types?
 // See D27790 for more discussion.
+NumericInput.contextType = PerseusI18nContext;
 NumericInput.defaultProps = {
   currentValue: "",
   size: "normal",
@@ -22273,18 +22527,21 @@ class PassageRef extends React.Component {
     return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
   }
   render() {
+    const {
+      strings
+    } = this.context;
     const lineRange = this.state.lineRange;
     let lineRangeOutput;
     if (!lineRange) {
-      lineRangeOutput = i18n.$_("lines %(lineRange)s", {
+      lineRangeOutput = strings.lineRange({
         lineRange: `?${EN_DASH$1}?`
       });
     } else if (lineRange[0] === lineRange[1]) {
-      lineRangeOutput = i18n.$_("line %(lineNumber)s", {
-        lineNumber: lineRange[0]
+      lineRangeOutput = strings.lineNumber({
+        lineNumber: String(lineRange[0])
       });
     } else {
-      lineRangeOutput = i18n.$_("lines %(lineRange)s", {
+      lineRangeOutput = strings.lineRange({
         lineRange: lineRange[0] + EN_DASH$1 + lineRange[1]
       });
     }
@@ -22326,6 +22583,7 @@ class PassageRef extends React.Component {
     };
   }
 }
+PassageRef.contextType = PerseusI18nContext;
 PassageRef.defaultProps = {
   passageNumber: 1,
   referenceNumber: 1,
@@ -22689,7 +22947,7 @@ Icon.defaultProps = {
   color: "currentColor"
 };
 
-function getA11yText(letter, checked, correct, crossedOut, showCorrectness) {
+function getA11yText(letter, checked, correct, crossedOut, showCorrectness, strings) {
   // There are two pieces of metadata we want to add to each a11yText:
   // whether the answer was checked/crossed-out/neither, and whether the
   // answer is correct/incorrect/not-yet-revealed.
@@ -22698,45 +22956,45 @@ function getA11yText(letter, checked, correct, crossedOut, showCorrectness) {
   // we've just enumerated all 9 possibilities as separate strings.
   if (showCorrectness && correct) {
     if (checked) {
-      return i18n._("(Choice %(letter)s, Checked, Correct)", {
+      return strings.choiceCheckedCorrect({
         letter
       });
     }
     if (crossedOut) {
-      return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
+      return strings.choiceCrossedOutCorrect({
         letter
       });
     }
-    return i18n._("(Choice %(letter)s, Correct)", {
+    return strings.choiceCorrect({
       letter
     });
   }
   if (showCorrectness && !correct) {
     if (checked) {
-      return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
+      return strings.choiceCheckedIncorrect({
         letter
       });
     }
     if (crossedOut) {
-      return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
+      return strings.choiceCrossedOutIncorrect({
         letter
       });
     }
-    return i18n._("(Choice %(letter)s, Incorrect)", {
+    return strings.choiceIncorrect({
       letter
     });
   }
   if (checked) {
-    return i18n._("(Choice %(letter)s, Checked)", {
+    return strings.choiceChecked({
       letter
     });
   }
   if (crossedOut) {
-    return i18n._("(Choice %(letter)s, Crossed out)", {
+    return strings.choiceCrossedOut({
       letter
     });
   }
-  return i18n._("(Choice %(letter)s)", {
+  return strings.choice({
     letter
   });
 }
@@ -22758,7 +23016,7 @@ const FocusRing = function FocusRing(props) {
     borderRadius
   };
   return /*#__PURE__*/React.createElement("span", {
-    "data-test-id": "focus-ring",
+    "data-testid": "focus-ring",
     className: css(styles$z.ring),
     style: style
   }, children);
@@ -22783,18 +23041,8 @@ const styles$z = StyleSheet.create({
  * "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._("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");
+function getChoiceLetter(pos, strings) {
+  const lettersString = strings.letters;
   const letters = lettersString.split(" ");
   if (pos < letters.length) {
     // If the position we need is listed in the localized string, use that.
@@ -22829,7 +23077,7 @@ const CrossOutLine = function CrossOutLine(props) {
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
     className: css(styles$x.crossOutLine),
-    "data-test-id": "choice-icon__cross-out-line"
+    "data-testid": "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
@@ -22858,7 +23106,10 @@ function ChoiceInner(props) {
     showCorrectness,
     correct
   } = props;
-  const letter = getChoiceLetter(pos);
+  const {
+    strings
+  } = usePerseusI18n();
+  const letter = getChoiceLetter(pos, strings);
   if (!showCorrectness) {
     return letter;
   }
@@ -22932,7 +23183,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   }, /*#__PURE__*/React.createElement("div", {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
-    "data-test-id": "choice-icon__library-choice-icon",
+    "data-testid": "choice-icon__library-choice-icon",
     className: css(styles$w.circle, showCorrectness && correct && styles$w.circleCorrect, showCorrectness && !correct && styles$w.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$w.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
@@ -23004,24 +23255,24 @@ const styles$w = StyleSheet.create({
  * ChoiceIcon visualizations but is meant to make the distinctions
  * between the states more immediately clear to users.
  */
-function renderText(checked, correct, crossedOut) {
+function renderText(checked, correct, crossedOut, strings) {
   if (correct) {
     // For correct answers, we surface checked _or_ crossedOut state,
     // because any interaction with the correct answer is noteworthy!
     if (checked) {
-      return i18n._("Correct (selected)");
+      return strings.correctSelected;
     }
     if (crossedOut) {
-      return i18n._("Correct (but you crossed it out)");
+      return strings.correctCrossedOut;
     }
-    return i18n._("Correct");
+    return strings.correct;
   }
   // But, for incorrect answers, we only surface checked state,
   // because crossing out an incorrect answer is not noteworthy.
   if (checked) {
-    return i18n._("Incorrect (selected)");
+    return strings.incorrectSelected;
   }
-  return i18n._("Incorrect");
+  return strings.incorrect;
 }
 const OptionStatus = function OptionStatus(props) {
   const {
@@ -23031,6 +23282,9 @@ const OptionStatus = function OptionStatus(props) {
     previouslyAnswered,
     reviewMode
   } = props;
+  const {
+    strings
+  } = usePerseusI18n();
 
   // Option status is shown only in review mode, or for incorrectly
   // answered items.
@@ -23050,7 +23304,7 @@ const OptionStatus = function OptionStatus(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     className: css(styles$v.text, textStyle)
-  }, renderText(checked, correct, crossedOut));
+  }, renderText(checked, correct, crossedOut, strings));
 };
 const styles$v = StyleSheet.create({
   text: {
@@ -23097,6 +23351,9 @@ const Choice = function Choice(props) {
     forwardedRef
   } = props;
   const [isInputFocused, setIsInputFocused] = useState(false);
+  const {
+    strings
+  } = usePerseusI18n();
   useEffect(() => {
     if (isInputFocused && disabled) {
       setIsInputFocused(false);
@@ -23126,8 +23383,8 @@ const Choice = function Choice(props) {
   // However, we don't want to do this when we're in review mode in the
   // content library.
   const showDimmed = !reviewMode && apiOptions.readOnly || crossedOut;
-  const letter = getChoiceLetter(pos);
-  const a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
+  const letter = getChoiceLetter(pos, strings);
+  const a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness, strings);
   const idFactory = useUniqueIdWithMock(`choice`);
   const choiceId = idFactory.get(letter);
   return /*#__PURE__*/React.createElement("div", {
@@ -23227,15 +23484,15 @@ const Choice = function Choice(props) {
     content: ({
       close
     }) => /*#__PURE__*/React.createElement(PopoverContent, {
-      title: i18n._("Cross out"),
-      content: i18n._("Cross out option"),
+      title: strings.crossOut,
+      content: strings.crossOutOption,
       closeButtonVisible: true,
       actions: /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Strut, {
         size: spacing.medium_16
       }), /*#__PURE__*/React.createElement(Button, {
         kind: "primary",
-        "aria-label": i18n._("Cross out Choice %(letter)s", {
-          letter: getChoiceLetter(pos)
+        "aria-label": strings.crossOutChoice({
+          letter: getChoiceLetter(pos, strings)
         }),
         disabled: apiOptions.readOnly || reviewMode,
         onClick: () => {
@@ -23255,14 +23512,14 @@ const Choice = function Choice(props) {
           }
           close();
         }
-      }, crossedOut ? i18n._("Bring back") : i18n._("Cross out")))
+      }, crossedOut ? strings.bringBack : strings.crossOut))
     })
   }, ({
     open
   }) => /*#__PURE__*/React.createElement(Clickable, {
     onClick: open,
-    "aria-label": i18n._(`Open menu for Choice %(letter)s`, {
-      letter: getChoiceLetter(pos)
+    "aria-label": strings.openMenuForChoice({
+      letter: getChoiceLetter(pos, strings)
     }),
     style: {
       alignSelf: "center",
@@ -23282,7 +23539,7 @@ const Choice = function Choice(props) {
     color: color.offBlack64
   })))), showRationale && /*#__PURE__*/React.createElement("div", {
     className: rationaleClassName,
-    "data-test-id": `perseus-radio-rationale-content-${pos}`
+    "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
 const styles$u = StyleSheet.create({
@@ -23314,6 +23571,9 @@ const ChoiceNoneAbove = function ChoiceNoneAbove(props) {
       forwardedRef
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const {
+    strings
+  } = usePerseusI18n();
   const choiceProps = _extends({}, rest, {
     content: showContent ? content :
     /*#__PURE__*/
@@ -23329,7 +23589,8 @@ const ChoiceNoneAbove = function ChoiceNoneAbove(props) {
     // just to render a string
     React.createElement(Renderer, {
       key: "noneOfTheAboveRenderer",
-      content: i18n._("None of the above")
+      content: strings.noneOfTheAbove,
+      strings: strings
     })
   });
   return /*#__PURE__*/React.createElement(Choice$1, _extends({}, choiceProps, {
@@ -23349,16 +23610,16 @@ const {
 
 // exported for tests
 
-function getInstructionsText(multipleSelect, countChoices, numCorrect) {
+function getInstructionsText(multipleSelect, countChoices, numCorrect, strings) {
   if (multipleSelect) {
     if (countChoices) {
-      return i18n._("Choose %(numCorrect)s answers:", {
-        numCorrect: numCorrect
+      return strings.chooseNumAnswers({
+        numCorrect: String(numCorrect)
       });
     }
-    return i18n._("Choose all answers that apply:");
+    return strings.chooseAllAnswers;
   }
-  return i18n._("Choose 1 answer:");
+  return strings.chooseOneAnswer;
 }
 const BaseRadio = function BaseRadio(props) {
   const {
@@ -23373,6 +23634,9 @@ const BaseRadio = function BaseRadio(props) {
     isLastUsedWidget,
     registerFocusFunction
   } = props;
+  const {
+    strings
+  } = usePerseusI18n();
 
   // useEffect doesn't have previous props
   const prevReviewModeRubric = useRef();
@@ -23479,7 +23743,7 @@ const BaseRadio = function BaseRadio(props) {
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
   const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
   const instructionsClassName = classNames("instructions", css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
-  const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
+  const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
   const responsiveClassName = css(styles$t.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
@@ -23744,7 +24008,8 @@ class Radio$1 extends React.Component {
         linterContext: _extends({}, this.props.linterContext, {
           // @ts-expect-error - TS2322 - Type '{ blockHighlight: true; contentType: string; highlightLint: boolean; paths: readonly string[]; stack: readonly string[]; }' is not assignable to type 'LinterContextProps'.
           blockHighlight: true
-        })
+        }),
+        strings: this.context.strings
       });
     };
     // When `BaseRadio`'s `onChange` handler is called, indicating a change in
@@ -23796,7 +24061,7 @@ class Radio$1 extends React.Component {
       return Radio$1.getUserInputFromProps(this.props);
     };
     this.simpleValidate = rubric => {
-      return Radio$1.validate(this.getUserInput(), rubric);
+      return Radio$1.validate(this.getUserInput(), rubric, this.context.strings);
     };
     /**
      * Turn on rationale display for the currently selected choices. Note that
@@ -23857,7 +24122,7 @@ class Radio$1 extends React.Component {
       }
     };
   }
-  static validate(userInput, rubric) {
+  static validate(userInput, rubric, strings) {
     const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
       return sum + (selected ? 1 : 0);
     }, 0);
@@ -23870,7 +24135,7 @@ class Radio$1 extends React.Component {
     if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
       return {
         type: "invalid",
-        message: i18n._("Please choose the correct number of answers.")
+        message: strings.chooseCorrectNum
       };
       // If NOTA and some other answer are checked, ...
     }
@@ -23878,7 +24143,7 @@ class Radio$1 extends React.Component {
     if (userInput.noneOfTheAboveSelected && numSelected > 1) {
       return {
         type: "invalid",
-        message: i18n._("'None of the above' may not be selected " + "when other answers are selected.")
+        message: strings.notNoneOfTheAbove
       };
     }
     const correct = userInput.choicesSelected.every((selected, i) => {
@@ -23990,6 +24255,9 @@ class Radio$1 extends React.Component {
     const {
       choices
     } = this.props;
+    const {
+      strings
+    } = this.context;
     let choiceStates;
     if (this.props.static) {
       choiceStates = choices.map(choice => ({
@@ -24041,11 +24309,7 @@ class Radio$1 extends React.Component {
       }));
     }
     const choicesProp = choices.map((choice, i) => {
-      const content = choice.isNoneOfTheAbove && !choice.content ?
-      // we use i18n._ instead of $_ here because the content
-      // sent to a renderer needs to be a string, not a react
-      // node (/renderable/fragment).
-      i18n._("None of the above") : choice.content;
+      const content = choice.isNoneOfTheAbove && !choice.content ? strings.noneOfTheAbove : choice.content;
       const {
         selected,
         crossedOut,
@@ -24097,6 +24361,7 @@ class Radio$1 extends React.Component {
     });
   }
 }
+Radio$1.contextType = PerseusI18nContext;
 Radio$1.defaultProps = {
   choices: [],
   multipleSelect: false,
@@ -24111,14 +24376,8 @@ const {
   random
 } = Util;
 
-// Represents choices that we automatically re-order if encountered.
-// Note: these are in the reversed (incorrect) order that we will swap, if
-// found.
-// Note 2: these are internationalized when compared later on.
-const ReversedChoices = [[i18n._("False"), i18n._("True")], [i18n._("No"), i18n._("Yes")]];
-
 // Transforms the choices for display.
-const _choiceTransform = (widgetOptions, problemNum) => {
+const _choiceTransform = (widgetOptions, strings, problemNum) => {
   const _maybeRandomize = function _maybeRandomize(array) {
     const randomSeed = problemNum === undefined ? random : problemNum;
     // NOTE: `problemNum` will only be set when the radio widget is
@@ -24147,6 +24406,11 @@ const _choiceTransform = (widgetOptions, problemNum) => {
     return newChoices;
   };
   const enforceOrdering = choices => {
+    // Represents choices that we automatically re-order if encountered.
+    // Note: these are in the reversed (incorrect) order that we will swap, if
+    // found.
+    // Note 2: these are internationalized when compared later on.
+    const ReversedChoices = [[strings.false, strings.true], [strings.no, strings.yes]];
     const content = choices.map(c => c.content);
     if (ReversedChoices.some(reversed => _.isEqual(content, reversed))) {
       return [choices[1], choices[0]];
@@ -24172,8 +24436,8 @@ const _choiceTransform = (widgetOptions, problemNum) => {
   // 1) we randomize the order first
   _maybeRandomize(choices)));
 };
-const transform = (widgetOptions, problemNum) => {
-  const choices = _choiceTransform(widgetOptions, problemNum);
+const transform = (widgetOptions, strings, problemNum) => {
+  const choices = _choiceTransform(widgetOptions, strings, problemNum);
   const numCorrect = _.reduce(widgetOptions.choices, function (memo, choice) {
     return choice.correct ? memo + 1 : memo;
   }, 0);
@@ -24259,7 +24523,7 @@ class Categorizer extends React.Component {
       return Categorizer.getUserInputFromProps(this.props);
     };
     this.simpleValidate = rubric => {
-      return Categorizer.validate(this.getUserInput(), rubric);
+      return Categorizer.validate(this.getUserInput(), rubric, this.context.strings);
     };
   }
   render() {
@@ -24288,7 +24552,8 @@ class Categorizer extends React.Component {
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }))), /*#__PURE__*/React.createElement("tbody", null, indexedItems.map(indexedItem => {
       const item = indexedItem[0];
@@ -24300,7 +24565,8 @@ class Categorizer extends React.Component {
       // @ts-expect-error - TS2322 - Type 'string | number' is not assignable to type 'string | undefined'.
       , {
         content: item,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React.createElement("td", {
@@ -24343,7 +24609,7 @@ class Categorizer extends React.Component {
     this.change("values", values);
     this.props.trackInteraction();
   }
-  static validate(userInput, rubric) {
+  static validate(userInput, rubric, strings) {
     let completed = true;
     let allCorrect = true;
     rubric.values.forEach((value, i) => {
@@ -24357,7 +24623,7 @@ class Categorizer extends React.Component {
     if (!completed) {
       return {
         type: "invalid",
-        message: i18n._("Make sure you select something for every row.")
+        message: strings.invalidSelection
       };
     }
     return {
@@ -24373,6 +24639,7 @@ class Categorizer extends React.Component {
 }
 
 // TODO(benkomalo): inject page-margin into Perseus instead of hardcoding.
+Categorizer.contextType = PerseusI18nContext;
 Categorizer.defaultProps = {
   items: [],
   categories: [],
@@ -24698,7 +24965,8 @@ class Definition extends React.Component {
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
         content: this.props.definition,
-        widgets: this.props.widgets
+        widgets: this.props.widgets,
+        strings: this.context.strings
       })),
       opened: activeDefinitionId === this.props.widgetId,
       onClose: () => setActiveDefinitionId(null),
@@ -24720,6 +24988,7 @@ class Definition extends React.Component {
     }, this.props.togglePrompt))));
   }
 }
+Definition.contextType = PerseusI18nContext;
 Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
@@ -24770,12 +25039,13 @@ class DeprecatedStandin extends React__default.Component {
         paddingBottom: 8
       }
     }, /*#__PURE__*/React__default.createElement(Banner, {
-      text: i18n._("Sorry, this part of the question is no longer available. 😅 Don't worry, you won't be graded on this part. Keep going!"),
+      text: this.context.strings.deprecatedStandin,
       kind: "info",
       layout: "full-width"
     }));
   }
 }
+DeprecatedStandin.contextType = PerseusI18nContext;
 var DeprecatedStandin$1 = {
   name: "deprecated-standin",
   displayName: "Deprecated Standin",
@@ -24970,10 +25240,12 @@ class Explanation extends React.Component {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
       widgets: this.props.widgets,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })))));
   }
 }
+Explanation.contextType = PerseusI18nContext;
 Explanation.defaultProps = {
   showPrompt: "Explain",
   hidePrompt: "Hide explanation",
@@ -25041,6 +25313,13 @@ class GradedGroupAnswerBar extends React.Component {
       onCheckAnswer,
       onNextQuestion
     } = this.props;
+    const {
+      keepTrying,
+      tryAgain,
+      check,
+      correctExcited,
+      nextQuestion
+    } = this.context.strings;
     const answerBarStyle = _extends({}, styles$o.answerBar, {
       backgroundColor: answerBarState === "CORRECT" ? color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
@@ -25054,10 +25333,10 @@ class GradedGroupAnswerBar extends React.Component {
       style: {
         marginLeft: 8
       }
-    }, i18n._("Keep trying"))) : /*#__PURE__*/React.createElement("span", null); // empty span keeps the button on the right side
+    }, keepTrying)) : /*#__PURE__*/React.createElement("span", null); // empty span keeps the button on the right side
 
     if (answerBarState !== "CORRECT") {
-      const buttonLabel = answerBarState === "INCORRECT" ? i18n._("Try again") : i18n._("Check");
+      const buttonLabel = answerBarState === "INCORRECT" ? tryAgain : check;
       return /*#__PURE__*/React.createElement("div", {
         style: answerBarStyle
       }, message, /*#__PURE__*/React.createElement(Button, {
@@ -25080,15 +25359,16 @@ class GradedGroupAnswerBar extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement("span", {
       role: "alert",
-      "aria-label": i18n._("Correct!"),
+      "aria-label": correctExcited,
       style: {
         marginLeft: 8
       }
-    }, i18n._("Correct!"))), onNextQuestion && /*#__PURE__*/React.createElement(Button, {
+    }, correctExcited)), onNextQuestion && /*#__PURE__*/React.createElement(Button, {
       onClick: onNextQuestion
-    }, i18n._("Next question")));
+    }, nextQuestion));
   }
 }
+GradedGroupAnswerBar.contextType = PerseusI18nContext;
 const fontSize = 17;
 const styles$o = {
   answerBar: {
@@ -25142,10 +25422,6 @@ const getNextState = (currentState, answerable) => {
   }
 };
 
-// Prepended to all invalid messages to make the widget messages a bit clearer
-const INVALID_MESSAGE_PREFIX = i18n._("We couldn't grade your answer.");
-const DEFAULT_INVALID_MESSAGE = i18n._("It looks like you left something blank or ") + i18n._("entered in an invalid answer.");
-
 // exports has no 'transform'
 
 // A Graded Group is more or less a Group widget that displays a check
@@ -25197,8 +25473,13 @@ class GradedGroup extends React.Component {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'score' does not exist on type 'ReactInstance'.
       const score = this.refs.renderer.score();
+      const {
+        INVALID_MESSAGE_PREFIX,
+        DEFAULT_INVALID_MESSAGE_1,
+        DEFAULT_INVALID_MESSAGE_2
+      } = this.context.strings;
       const status = score.type === "points" ? score.total === score.earned ? GRADING_STATUSES.correct : GRADING_STATUSES.incorrect : GRADING_STATUSES.invalid;
-      const message = score.type === "points" ? score.message || "" : score.message ? `${INVALID_MESSAGE_PREFIX} ${score.message}` : `${INVALID_MESSAGE_PREFIX} ${DEFAULT_INVALID_MESSAGE}`;
+      const message = score.type === "points" ? score.message || "" : score.message ? `${INVALID_MESSAGE_PREFIX} ${score.message}` : `${INVALID_MESSAGE_PREFIX} ${DEFAULT_INVALID_MESSAGE_1}${DEFAULT_INVALID_MESSAGE_2}`;
       this.setState({
         status: status,
         message: message,
@@ -25263,8 +25544,7 @@ class GradedGroup extends React.Component {
           color: "#526f03"
         }
       }));
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      gradeStatus = i18n._("Correct");
+      gradeStatus = this.context.strings.correct;
     } else if (this.state.status === GRADING_STATUSES.incorrect) {
       // TODO(jeremy): update to a WB colour
       // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
@@ -25273,8 +25553,7 @@ class GradedGroup extends React.Component {
           color: "#ff5454"
         }
       }));
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      gradeStatus = i18n._("Incorrect");
+      gradeStatus = this.context.strings.incorrect;
     }
     const mobileClass = this.props.inGradedGroupSet ? css(styles$n.gradedGroupInSet) : css(styles$n.gradedGroup);
     const classes = classNames({
@@ -25303,7 +25582,8 @@ class GradedGroup extends React.Component {
         readOnly
       }),
       onInteractWithWidget: this._onInteractWithWidget,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })), !apiOptions.isMobile && icon && /*#__PURE__*/React.createElement("div", {
       className: "group-icon"
     }, icon), !apiOptions.isMobile && gradeStatus && /*#__PURE__*/React.createElement("div", {
@@ -25317,14 +25597,14 @@ class GradedGroup extends React.Component {
       kind: "secondary",
       disabled: this.props.apiOptions.readOnly,
       onClick: this._checkAnswer
-    }, i18n._("Check")), !apiOptions.isMobile && isCorrect && this.props.onNextQuestion && /*#__PURE__*/React.createElement(Button, {
+    }, this.context.strings.check), !apiOptions.isMobile && isCorrect && this.props.onNextQuestion && /*#__PURE__*/React.createElement(Button, {
       kind: "secondary",
       disabled: this.props.apiOptions.readOnly,
       onClick: this.props.onNextQuestion,
       style: {
         marginLeft: 5
       }
-    }, i18n._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    }, this.context.strings.nextQuestion), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
       className: css(styles$n.explanationTitle),
@@ -25338,11 +25618,12 @@ class GradedGroup extends React.Component {
           showHint: false
         });
       }
-    }, i18n._("Hide explanation")), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props.hint, {
+    }, this.context.strings.hideExplanation), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props.hint, {
       // eslint-disable-next-line react/no-string-refs
       ref: "hints-renderer",
       apiOptions: apiOptions,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     }))) :
     /*#__PURE__*/
     // Not using Button here bc the styles won't work.
@@ -25360,7 +25641,7 @@ class GradedGroup extends React.Component {
         });
       },
       className: css(styles$n.showHintLink)
-    }, i18n._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
+    }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
       onCheckAnswer: this._checkAnswer,
@@ -25368,6 +25649,7 @@ class GradedGroup extends React.Component {
     }));
   }
 }
+GradedGroup.contextType = PerseusI18nContext;
 GradedGroup.defaultProps = {
   title: "",
   content: "",
@@ -25461,7 +25743,7 @@ class Indicators extends React.Component {
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
-      "aria-label": i18n._("Skip to %(title)s", {
+      "aria-label": this.context.strings.skipToTitle({
         title
       }),
       style: styles$m.indicatorButton,
@@ -25477,12 +25759,10 @@ class Indicators extends React.Component {
       style: styles$m.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
-    }, i18n._("Current"))))))));
+    }, this.context.strings.current)))))));
   }
 }
-
-// no transform
-
+Indicators.contextType = PerseusI18nContext; // no transform
 // TODO(jared): find a better name for this :) and for GradedGroup; the names
 // are currently a little confusing.
 class GradedGroupSet extends React.Component {
@@ -25558,7 +25838,7 @@ class GradedGroupSet extends React.Component {
     }
     const currentGroup = this.props.gradedGroups[this.state.currentGroup];
     if (!currentGroup) {
-      return /*#__PURE__*/React.createElement("span", null, i18n.doNotTranslate("No current group..."));
+      return /*#__PURE__*/React.createElement("span", null, "No current group...");
     }
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
@@ -26853,7 +27133,8 @@ class Group extends React.Component {
       findExternalWidgets: this.props.findWidgets,
       reviewMode: !!this.props.reviewModeRubric,
       onInteractWithWidget: onInteractWithWidget,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     }), this.props.icon &&
     /*#__PURE__*/
     // @ts-expect-error - TS2339 - Property 'icon' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
@@ -26862,6 +27143,7 @@ class Group extends React.Component {
     }, this.props.icon));
   }
 }
+Group.contextType = PerseusI18nContext;
 Group.defaultProps = {
   content: "",
   widgets: {},
@@ -27127,7 +27409,8 @@ class ImageWidget extends React.Component {
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: this.props.alt,
         apiOptions: apiOptions,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }
 
@@ -27187,7 +27470,8 @@ class ImageWidget extends React.Component {
         }, /*#__PURE__*/React.createElement(Renderer, {
           content: _title + this.props.caption,
           apiOptions: apiOptions,
-          linterContext: this.props.linterContext
+          linterContext: this.props.linterContext,
+          strings: this.context.strings
         })));
       }
       return /*#__PURE__*/React.createElement("figure", {
@@ -27205,7 +27489,8 @@ class ImageWidget extends React.Component {
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: this.props.title,
         apiOptions: apiOptions,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }
     if (this.props.caption) {
@@ -27217,7 +27502,8 @@ class ImageWidget extends React.Component {
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: this.props.caption,
         apiOptions: apiOptions,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }
     return /*#__PURE__*/React.createElement("figure", {
@@ -27236,6 +27522,7 @@ class ImageWidget extends React.Component {
     };
   }
 }
+ImageWidget.contextType = PerseusI18nContext;
 ImageWidget.defaultProps = {
   alignment: DEFAULT_ALIGNMENT,
   title: "",
@@ -28168,43 +28455,216 @@ Graph.defaultProps = {
   isMobile: false
 };
 
-/**
- * Takes a style object with color names and converts them to actual
- * Wonder Blocks color values. This way, we can use colors and their
- * names in the editor UI without having to convert them back and forth.
- */
-function convertStyle(style) {
-  return _extends({}, style, {
-    stroke: color[(style == null ? void 0 : style.stroke) || "blue"],
-    fill: color[(style == null ? void 0 : style.fill) || "blue"]
+// TODO(FEI-4010): Remove `Perseus` prefix for all types here
+// TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
+
+// Range is replaced within this file with Interval, but it is used elsewhere
+// and exported from the package, so we need to keep it around.
+// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
+const ItemExtras = [
+// The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
+"calculator",
+// The user might benefit from using a statistics Chi Squared Table like https://people.richland.edu/james/lecture/m170/tbl-chi.html
+"chi2Table",
+// The user might benefit from a monthly payments calculator.  Provided on Khan Academy when true
+"financialCalculatorMonthlyPayment",
+// The user might benefit from a total amount calculator.  Provided on Khan Academy when true
+"financialCalculatorTotalAmount",
+// The user might benefit from a time to pay off calculator.  Provided on Khan Academy when true
+"financialCalculatorTimeToPayOff",
+// The user might benefit from using a Periodic Table of Elements.  Provided on Khan Academy when true
+"periodicTable",
+// The user might benefit from using a Periodic Table of Elements with key.  Provided on Khan Academy when true
+"periodicTableWithKey",
+// The user might benefit from using a statistics T Table like https://www.statisticshowto.com/tables/t-distribution-table/
+"tTable",
+// The user might benefit from using a statistics Z Table like https://www.ztable.net/
+"zTable"];
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+// prettier-ignore
+
+//prettier-ignore
+
+// A background image applied to various widgets.
+
+const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
+const lockedFigureColors = {
+  blue: "#3D7586",
+  green: "#447A53",
+  gray: "#5D5F66",
+  grayH: "#3B3D45",
+  grayI: "#21242C",
+  purple: "#594094",
+  purpleD: "#8351E8",
+  pink: "#B25071",
+  orange: "#946700",
+  red: "#D92916"
+};
+const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
+
+const LockedLine = props => {
+  const {
+    color: color$1,
+    lineStyle,
+    kind,
+    points,
+    showStartPoint,
+    showEndPoint
+  } = props;
+  const [point1, point2] = points;
+  let line;
+  if (kind === "line" || kind === "segment") {
+    const LineType = kind === "segment" ? Line$3.Segment : Line$3.ThroughPoints;
+    line = /*#__PURE__*/React.createElement(LineType, {
+      point1: point1.coord,
+      point2: point2.coord,
+      color: lockedFigureColors[color$1],
+      style: lineStyle
+    });
+  } else {
+    // TODO(LEMS-1928): Implement rays
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-line"
+  }, line, showStartPoint && /*#__PURE__*/React.createElement(Point$2, {
+    x: point1.coord[0],
+    y: point1.coord[1],
+    svgCircleProps: {
+      style: {
+        fill: point1.filled ? lockedFigureColors[point1.color] : color.white,
+        stroke: lockedFigureColors[point1.color],
+        strokeWidth: spacing.xxxxSmall_2
+      }
+    }
+  }), showEndPoint && /*#__PURE__*/React.createElement(Point$2, {
+    x: point2.coord[0],
+    y: point2.coord[1],
+    svgCircleProps: {
+      style: {
+        fill: point2.filled ? lockedFigureColors[point2.color] : color.white,
+        stroke: lockedFigureColors[point2.color],
+        strokeWidth: spacing.xxxxSmall_2
+      }
+    }
+  }));
+};
+
+const LockedPoint = props => {
+  const {
+    color: color$1,
+    coord,
+    filled
+  } = props;
+  const [x, y] = coord;
+  return /*#__PURE__*/React.createElement(Point$2, {
+    x: x,
+    y: y,
+    svgCircleProps: {
+      style: {
+        fill: filled ? lockedFigureColors[color$1] : color.white,
+        stroke: lockedFigureColors[color$1],
+        strokeWidth: spacing.xxxxSmall_2
+      }
+    }
   });
-}
+};
+
 const GraphLockedLayer = props => {
   const {
     lockedFigures
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, lockedFigures.map((figure, index) => {
+    let Figure;
     switch (figure.type) {
       case "point":
-        const [x, y] = figure.coord;
-        return /*#__PURE__*/React.createElement(Point$2, {
-          key: `${figure.type}-${index}`,
-          x: x,
-          y: y,
-          svgCircleProps: {
-            style: convertStyle(figure.style)
-          }
-        });
+        Figure = LockedPoint;
+        break;
+      case "line":
+        Figure = LockedLine;
+        break;
+      default:
+        /**
+         * Devlopment-time future-proofing: This should
+         * fail during type-checking if we add a new locked
+         * shape type and forget to handle it in any other
+         * switch case here.
+         */
+        throw new UnreachableCaseError(figure);
     }
-
-    /**
-     * Devlopment-time future-proofing: This `never` should
-     * fail during type-checking if we add a new locked
-     * shape type and forget to handle it in any other
-     * switch case here.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    throw new UnreachableCaseError(figure.type);
+    return /*#__PURE__*/React.createElement(Figure, _extends({
+      key: `${figure.type}-${index}`
+    }, figure));
   }));
 };
 
@@ -28353,7 +28813,7 @@ function SVGLine(props) {
     y2: end[1],
     style: style,
     className: `${className}`,
-    "data-test-id": testId
+    "data-testid": testId
   });
 }
 
@@ -28482,7 +28942,7 @@ const MovableLine = props => {
     ref: line,
     tabIndex: 0,
     className: "movable-line",
-    "data-test-id": "movable-line",
+    "data-testid": "movable-line",
     style: {
       cursor: dragging ? "grabbing" : "grab"
     }
@@ -28526,7 +28986,8 @@ const MovableLine = props => {
 const defaultGraphConfig = {
   range: [[0, 1], [0, 1]],
   snapStep: [1, 1],
-  markings: "none"
+  markings: "none",
+  showTooltips: false
 };
 const GraphConfigContext = /*#__PURE__*/createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -28537,10 +28998,12 @@ function useGraphConfig() {
 // graph.
 const hitboxSizePx = 48;
 const StyledMovablePoint = props => {
+  var _Object$entries$find$, _Object$entries$find;
   const {
     range,
     snapStep,
-    markings
+    markings,
+    showTooltips
   } = useGraphConfig();
   const hitboxRef = useRef(null);
   const {
@@ -28548,6 +29011,10 @@ const StyledMovablePoint = props => {
     onMove,
     color: color$1 = color.blue
   } = props;
+
+  // WB Tooltip requires a color name for the background color.
+  // Since the color in props is a hex value, a reverse lookup is needed.
+  const wbColorName = (_Object$entries$find$ = (_Object$entries$find = Object.entries(color).find(([_, value]) => value === color$1)) == null ? void 0 : _Object$entries$find[0]) != null ? _Object$entries$find$ : "blue";
   const {
     dragging
   } = useMovable({
@@ -28565,26 +29032,27 @@ const StyledMovablePoint = props => {
   const [[_, horizontalStartY]] = useTransform([0, yMin]);
   const [[__, horizontalEndY]] = useTransform([0, yMax]);
   const showHairlines = dragging && markings !== "none";
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+  const hairlines = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
     x1: verticalStartX,
     y1: y,
     x2: verticalEndX,
     y2: y,
-    stroke: color.green
+    stroke: color$1
   }), /*#__PURE__*/React.createElement("line", {
     x1: x,
     y1: horizontalStartY,
     x2: x,
     y2: horizontalEndY,
-    stroke: color.green
-  })), /*#__PURE__*/React.createElement("g", {
+    stroke: color$1
+  }));
+  const svgForPoint = /*#__PURE__*/React.createElement("g", {
     ref: hitboxRef,
     className: pointClasses,
     tabIndex: 0,
     style: {
       "--movable-point-color": color$1
     },
-    "data-test-id": "movable-point"
+    "data-testid": "movable-point"
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -28609,8 +29077,16 @@ const StyledMovablePoint = props => {
     style: {
       fill: color$1
     },
-    "data-test-id": "movable-point__center"
-  })));
+    "data-testid": "movable-point__center"
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
+    autoUpdate: true,
+    backgroundColor: wbColorName,
+    content: `(${point[0]}, ${point[1]})`,
+    contentStyle: {
+      color: "white"
+    }
+  }, svgForPoint) : svgForPoint);
 };
 
 const SegmentGraph = props => {
@@ -28628,8 +29104,7 @@ const SegmentGraph = props => {
     },
     onMovePoint: (endpointIndex, destination) => {
       dispatch(moveControlPoint(endpointIndex, destination, i));
-    },
-    "data-testid": "segment" + i
+    }
   })));
 };
 const SegmentView = props => {
@@ -28659,8 +29134,7 @@ const LinearGraph = props => {
     dispatch
   } = props;
   const {
-    coords: lines,
-    type
+    coords: lines
   } = props.graphState;
   const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
   return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(LineView, {
@@ -28669,10 +29143,7 @@ const LinearGraph = props => {
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i))
-    // "linear" or "linear-system" + index
-    ,
-    "data-testid": type + i,
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
     stroke: colors[i]
   })));
 };
@@ -28912,7 +29383,6 @@ const PolygonGraph = props => {
   } = props;
   const {
     coords,
-    type,
     showAngles,
     showSides,
     range,
@@ -28983,8 +29453,7 @@ const PolygonGraph = props => {
   }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
     point: point,
-    onMove: destination => dispatch(movePoint(i, destination)),
-    "data-testid": type + i
+    onMove: destination => dispatch(movePoint(i, destination))
   })));
 };
 
@@ -29543,7 +30012,7 @@ class NumberInput extends React.Component {
         const placeholder = this.props.placeholder;
         return _.isFinite(placeholder) ? +placeholder : null;
       }
-      const result = firstNumericalParse(value);
+      const result = firstNumericalParse(value, this.context.strings);
       return _.isFinite(result) ? result : this.props.value;
     };
     /* Set text input focus to this input */
@@ -29573,7 +30042,7 @@ class NumberInput extends React.Component {
       if (value == null) {
         return true;
       }
-      const val = firstNumericalParse(value);
+      const val = firstNumericalParse(value, this.context.strings);
       const checkValidity = this.props.checkValidity;
       return _.isFinite(val) && checkValidity(val);
     };
@@ -29669,6 +30138,7 @@ class NumberInput extends React.Component {
     }
   }
 }
+NumberInput.contextType = PerseusI18nContext;
 NumberInput.propTypes = {
   value: PropTypes.number,
   format: PropTypes.string,
@@ -30404,7 +30874,8 @@ const MafsGraph = props => {
     value: {
       range: state.range,
       snapStep: state.snapStep,
-      markings: props.markings
+      markings: props.markings,
+      showTooltips: !!props.showTooltips
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {
@@ -31666,9 +32137,9 @@ class LegacyInteractiveGraph extends React.Component {
     // isClickToAddPoints() only applies to points and polygons
     if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
       if (this.props.graph.type === "point") {
-        instructions = i18n._("Click to add points");
+        instructions = this.context.strings.addPoints;
       } else if (this.props.graph.type === "polygon") {
-        instructions = i18n._("Click to add vertices");
+        instructions = this.context.strings.addVertices;
       }
     } else {
       instructions = undefined;
@@ -31708,6 +32179,7 @@ class LegacyInteractiveGraph extends React.Component {
     }));
   }
 }
+LegacyInteractiveGraph.contextType = PerseusI18nContext;
 LegacyInteractiveGraph.defaultProps = {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
@@ -31754,7 +32226,8 @@ class InteractiveGraph extends React.Component {
         ref: this.mafsRef,
         gridStep: gridStep,
         snapStep: snapStep,
-        box: box
+        box: box,
+        showTooltips: !!this.props.showTooltips
       }));
     }
     return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
@@ -33296,6 +33769,9 @@ var globalStyles = /*#__PURE__*/Object.freeze({
 });
 
 const AnswerChoices = props => {
+  const {
+    strings
+  } = usePerseusI18n();
   const onAnswerChange = selected => {
     const {
       choices,
@@ -33313,6 +33789,7 @@ const AnswerChoices = props => {
     value: content,
     label: /*#__PURE__*/React.createElement(Renderer, {
       content: content,
+      strings: strings,
       inline: true
     })
   }));
@@ -33342,14 +33819,13 @@ const AnswerChoices = props => {
   }));
 };
 
-const strings = {
-  hideAnswersToggleLabel: i18n._("Hide answer choices")
-};
-
 const HideAnswersToggle = props => {
   const idFactory = useUniqueIdWithMock();
   const switchId = idFactory.get("hide-answers-toggle");
   const labelId = idFactory.get("hide-answers-label");
+  const {
+    strings
+  } = usePerseusI18n();
   return /*#__PURE__*/React.createElement(View, {
     style: styles$g.switchWrapper
   }, /*#__PURE__*/React.createElement(Switch, {
@@ -33390,9 +33866,12 @@ const AnswerPill = props => {
     hovered
   } = props;
   const idFactory = useUniqueIdWithMock();
-  const answerString = selectedAnswers.length > 1 ?
-  // always need `ngettext` for variable numbers even if we don't use the singular, see https://khanacademy.slack.com/archives/C0918TZ5G/p1700163024293079
-  i18n.ngettext("%(num)s answer", "%(num)s answers", selectedAnswers.length) : selectedAnswers[0];
+  const {
+    strings
+  } = usePerseusI18n();
+  const answerString = selectedAnswers.length > 1 ? strings.answers({
+    num: selectedAnswers.length
+  }) : selectedAnswers[0];
 
   // It should no longer be possible to interact with an answer after it
   // has been labeled (answered) correctly.
@@ -33419,6 +33898,7 @@ const AnswerPill = props => {
     style: [style, popperStyle, styles$f.pill, correct && styles$f.correct, incorrect && styles$f.incorrect, (focused || hovered) && BringToFront]
   }, /*#__PURE__*/React.createElement(Renderer, {
     content: answerString,
+    strings: strings,
     inline: true
   })));
 };
@@ -33513,10 +33993,8 @@ class Marker extends React.Component {
     const markerDisabled = showCorrectness === "correct";
     const active = hovered || focused;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-      style: [styles$e.marker, active && !markerDisabled && styles$e.markerActive]
-      // already translated in: /widgets/graded-group.tsx
-      ,
-      "aria-label": markerDisabled ? i18n._("Correct!") : label
+      style: [styles$e.marker, active && !markerDisabled && styles$e.markerActive],
+      "aria-label": markerDisabled ? this.context.strings.correctExcited : label
     }, this.renderIcon()), !!selected && showAnswer && /*#__PURE__*/React.createElement(AnswerPill, {
       selectedAnswers: selected,
       showCorrectness: showCorrectness,
@@ -33528,6 +34006,7 @@ class Marker extends React.Component {
     }));
   }
 }
+Marker.contextType = PerseusI18nContext;
 Marker.defaultProps = {
   selected: []
 };
@@ -34099,8 +34578,11 @@ class LabelImage extends React.Component {
       multipleAnswers,
       hideChoicesFromInstructions: hideChoices
     } = this.props;
-    const promptString = isMobile ? multipleAnswers ? i18n._("Tap each dot on the image to select all answers that apply.") : i18n._("Tap each dot on the image to select an answer.") : multipleAnswers ? i18n._("Click each dot on the image to select all answers that apply.") : i18n._("Click each dot on the image to select an answer.");
-    const choicesString = i18n._("Choices:");
+    const {
+      strings
+    } = this.context;
+    const promptString = isMobile ? multipleAnswers ? strings.tapMultiple : strings.tapSingle : multipleAnswers ? strings.clickMultiple : strings.clickSingle;
+    const choicesString = strings.choices;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames("perseus-label-image-widget-instructions", css(styles$d.instructions))
     }, /*#__PURE__*/React.createElement("div", {
@@ -34111,7 +34593,8 @@ class LabelImage extends React.Component {
       className: css(styles$d.instructionsChoice),
       key: index
     }, /*#__PURE__*/React.createElement(Renderer, {
-      content: choice
+      content: choice,
+      strings: strings
     })))));
   }
   render() {
@@ -34162,6 +34645,7 @@ class LabelImage extends React.Component {
     }));
   }
 }
+LabelImage.contextType = PerseusI18nContext;
 const styles$d = StyleSheet.create({
   instructions: {
     paddingBottom: 16
@@ -34475,7 +34959,8 @@ class Draggable extends React.Component {
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.content,
       linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "draggable"),
-      onRender: this.props.onRender
+      onRender: this.props.onRender,
+      strings: this.context.strings
     }));
   }
   componentDidUpdate(prevProps) {
@@ -34500,6 +34985,7 @@ class Draggable extends React.Component {
     }
   }
 }
+Draggable.contextType = PerseusI18nContext;
 Draggable.defaultProps = {
   includePadding: true,
   type: ItemState.STATIC,
@@ -35060,12 +35546,14 @@ class Matcher extends React.Component {
       className: css(styles$b.column, styles$b.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[0] || "...",
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })), /*#__PURE__*/React.createElement("th", {
       className: css(styles$b.column, styles$b.columnRight, styles$b.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[1] || "...",
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     }))), /*#__PURE__*/React.createElement("tr", {
       className: css(styles$b.row)
     }, /*#__PURE__*/React.createElement("td", {
@@ -35102,6 +35590,7 @@ class Matcher extends React.Component {
     })))));
   }
 }
+Matcher.contextType = PerseusI18nContext;
 Matcher.propTypes = {
   apiOptions: ApiOptions.propTypes,
   labels: PropTypes.array,
@@ -35387,8 +35876,58 @@ class Matrix extends React.Component {
       };
     };
     this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Matrix'.
-      return Matrix.validate(this.getUserInput(), rubric);
+      return Matrix.validate(this.getUserInput(), rubric, this.context.strings);
+    };
+  }
+  static validate(state, rubric, strings) {
+    const solution = rubric.answers;
+    const supplied = state.answers;
+    const solutionSize = getMatrixSize(solution);
+    const suppliedSize = getMatrixSize(supplied);
+    const incorrectSize = solutionSize[0] !== suppliedSize[0] || solutionSize[1] !== suppliedSize[1];
+    const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
+    let message = null;
+    let hasEmptyCell = false;
+    let incorrect = false;
+    _(suppliedSize[0]).times(row => {
+      _(suppliedSize[1]).times(col => {
+        if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
+          hasEmptyCell = true;
+        }
+        if (!incorrectSize) {
+          const validator = createValidator(solution[row][col], {
+            simplify: true
+          }, strings);
+          const result = validator(supplied[row][col]);
+          if (result.message) {
+            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
+            message = result.message;
+          }
+          if (!result.correct) {
+            incorrect = true;
+          }
+        }
+      });
+    });
+    if (hasEmptyCell) {
+      return {
+        type: "invalid",
+        message: strings.fillAllCells
+      };
+    }
+    if (incorrectSize) {
+      return {
+        type: "points",
+        earned: 0,
+        total: 1,
+        message: null
+      };
+    }
+    return {
+      type: "points",
+      earned: incorrect ? 0 : 1,
+      total: 1,
+      message: message
     };
   }
   componentDidMount() {
@@ -35430,7 +35969,8 @@ class Matrix extends React.Component {
       className: "matrix-prefix"
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.prefix,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })), /*#__PURE__*/React.createElement("div", {
       className: "matrix-input"
     }, /*#__PURE__*/React.createElement("div", {
@@ -35543,10 +36083,12 @@ class Matrix extends React.Component {
       className: "matrix-suffix"
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.suffix,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })));
   }
 }
+Matrix.contextType = PerseusI18nContext;
 Matrix.defaultProps = {
   matrixBoardSize: [3, 3],
   answers: [[]],
@@ -35556,59 +36098,6 @@ Matrix.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-_.extend(Matrix, {
-  validate: function (state, rubric) {
-    const solution = rubric.answers;
-    const supplied = state.answers;
-    const solutionSize = getMatrixSize(solution);
-    const suppliedSize = getMatrixSize(supplied);
-    const incorrectSize = solutionSize[0] !== suppliedSize[0] || solutionSize[1] !== suppliedSize[1];
-    const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
-    let message = null;
-    let hasEmptyCell = false;
-    let incorrect = false;
-    _(suppliedSize[0]).times(row => {
-      _(suppliedSize[1]).times(col => {
-        if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
-          hasEmptyCell = true;
-        }
-        if (!incorrectSize) {
-          const validator = createValidator(solution[row][col], {
-            simplify: true
-          });
-          const result = validator(supplied[row][col]);
-          if (result.message) {
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-            message = result.message;
-          }
-          if (!result.correct) {
-            incorrect = true;
-          }
-        }
-      });
-    });
-    if (hasEmptyCell) {
-      return {
-        type: "invalid",
-        message: i18n._("Make sure you fill in all cells in the matrix.")
-      };
-    }
-    if (incorrectSize) {
-      return {
-        type: "points",
-        earned: 0,
-        total: 1,
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: incorrect ? 0 : 1,
-      total: 1,
-      message: message
-    };
-  }
-});
 const propTransform$1 = editorProps => {
   // Remove answers before passing to widget
   const blankAnswers = _(editorProps.matrixBoardSize[0]).times(function () {
@@ -36646,8 +37135,8 @@ class Molecule extends React.Component {
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "canvas"
-    }, i18n.$_("A molecular structure drawing. SMILES notation: %(content)s", {
-      content: this.props.smiles
+    }, this.context.strings.molecularDrawing({
+      content: this.props.smiles || ""
     }));
     if (this.state.error) {
       content = /*#__PURE__*/React.createElement("div", {
@@ -36659,6 +37148,7 @@ class Molecule extends React.Component {
     }, content);
   }
 }
+Molecule.contextType = PerseusI18nContext;
 class MoleculeWidget extends React.Component {
   constructor(...args) {
     super(...args);
@@ -37121,18 +37611,21 @@ class NumberLine extends React.Component {
     };
   }
   render() {
+    const {
+      strings
+    } = this.context;
     const divisionRange = this.props.divisionRange;
     const divRangeString = divisionRange[0] + EN_DASH + divisionRange[1];
     const invalidNumDivisions = this.props.numDivisions < divisionRange[0] || this.props.numDivisions > divisionRange[1];
     const inequalityControls = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
       type: "button",
       className: "simple-button",
-      value: i18n._("Switch direction"),
+      value: strings.switchDirection,
       onClick: this.handleReverse
     }), /*#__PURE__*/React.createElement("input", {
       type: "button",
       className: "simple-button",
-      value: _(["le", "ge"]).contains(this.props.rel) ? i18n._("Make circle open") : i18n._("Make circle filled"),
+      value: _(["le", "ge"]).contains(this.props.rel) ? strings.circleOpen : strings.circleFilled,
       onClick: this.handleToggleStrict
     }));
     let tickCtrl;
@@ -37143,7 +37636,7 @@ class NumberLine extends React.Component {
       } else {
         Input = NumberInput;
       }
-      tickCtrl = /*#__PURE__*/React.createElement("label", null, i18n._("Number of divisions:"), " ", /*#__PURE__*/React.createElement(Input
+      tickCtrl = /*#__PURE__*/React.createElement("label", null, strings.numDivisions, " ", /*#__PURE__*/React.createElement(Input
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "tick-ctrl",
@@ -37160,13 +37653,14 @@ class NumberLine extends React.Component {
       className: "perseus-widget " + "perseus-widget-interactive-number-line"
     }, tickCtrl, !this.isValid() ? /*#__PURE__*/React.createElement("div", {
       className: "perseus-error"
-    }, i18n.doNotTranslate("Invalid number line configuration.")) : this.props.isTickCtrl && invalidNumDivisions ? /*#__PURE__*/React.createElement("div", {
+    }, "Invalid number line configuration.") : this.props.isTickCtrl && invalidNumDivisions ? /*#__PURE__*/React.createElement("div", {
       className: "perseus-error"
-    }, i18n.$_("Please make sure the number of divisions is " + "in the range %(divRangeString)s.", {
+    }, strings.divisions({
       divRangeString: divRangeString
     })) : this._renderGraphie(), !this.props.static && this.props.isInequality && inequalityControls);
   }
 }
+NumberLine.contextType = PerseusI18nContext;
 NumberLine.defaultProps = {
   range: [0, 10],
   labelStyle: "decimal",
@@ -37393,7 +37887,8 @@ class Card extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: className.join(" ")
     }, /*#__PURE__*/React.createElement(Renderer, _extends({}, rendererProps, {
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     }))));
   }
   shouldComponentUpdate(nextProps, nextState) {
@@ -37446,6 +37941,7 @@ class Card extends React.Component {
     document.removeEventListener("touchmove", this.onMouseMove);
   }
 }
+Card.contextType = PerseusI18nContext;
 Card.propTypes = {
   floating: PropTypes.bool.isRequired,
   animating: PropTypes.bool,
@@ -38735,7 +39231,7 @@ class HighlightSetRenderer extends React.PureComponent {
     }
     const hoveredHighlight = this.props.highlights[hoveredHighlightKey];
     return /*#__PURE__*/React.createElement(HighlightTooltip, {
-      label: i18n._("Remove highlight"),
+      label: this.context.strings.removeHighlight,
       focusNode: hoveredHighlight.domRange.endContainer,
       focusOffset: hoveredHighlight.domRange.endOffset,
       offsetParent: this.props.offsetParent,
@@ -38765,6 +39261,7 @@ class HighlightSetRenderer extends React.PureComponent {
     })), this.props.editable && this._renderTooltip());
   }
 }
+HighlightSetRenderer.contextType = PerseusI18nContext;
 
 /* eslint-disable react/no-unsafe */
 class SelectionTracker extends React.PureComponent {
@@ -38965,7 +39462,7 @@ class HighlightingUI extends React.PureComponent {
       onRemoveHighlight: this.props.onRemoveHighlight,
       zIndexes: this.props.zIndexes
     }), this._selectionIsValid(trackedSelection) && !userIsMouseSelecting && /*#__PURE__*/React.createElement(HighlightTooltip, {
-      label: i18n._("Add highlight"),
+      label: this.context.strings.addHighlight,
       onClick: () => this._handleAddHighlight(trackedSelection.proposedHighlight),
       focusNode: trackedSelection.focusNode,
       focusOffset: trackedSelection.focusOffset,
@@ -38973,6 +39470,7 @@ class HighlightingUI extends React.PureComponent {
     })));
   }
 }
+HighlightingUI.contextType = PerseusI18nContext;
 
 /**
  * This component, whenever its content updates, traverses the DOM to find
@@ -39263,16 +39761,30 @@ class RefStart extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("span", {
       style: REF_STYLE
-    }, i18n.doNotTranslate("_"));
+    }, "_");
   }
 }
 class RefEnd extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("span", {
       style: REF_STYLE
-    }, i18n.doNotTranslate("_"));
+    }, "_");
   }
 }
+const AltText = ({
+  id,
+  number
+}) => {
+  const {
+    strings
+  } = usePerseusI18n();
+  return /*#__PURE__*/React.createElement("span", {
+    key: "alt-text",
+    className: "perseus-sr-only"
+  }, strings[id]({
+    number
+  }));
+};
 const rules = {
   newline: SimpleMarkdown.defaultRules.newline,
   paragraph: SimpleMarkdown.defaultRules.paragraph,
@@ -39441,12 +39953,10 @@ const rules = {
         "aria-hidden": "true"
       }, /*#__PURE__*/React.createElement("span", {
         style: SQUARE_LABEL_STYLE
-      }, node.content)), /*#__PURE__*/React.createElement("span", {
-        key: "alt-text",
-        className: "perseus-sr-only"
-      }, i18n.$_("[Marker for question %(number)s]", {
+      }, node.content)), /*#__PURE__*/React.createElement(AltText, {
+        id: "questionMarker",
         number: node.content
-      })), node.space ? "\u00A0" : null];
+      }), node.space ? "\u00A0" : null];
     }
   },
   circleLabel: {
@@ -39467,12 +39977,10 @@ const rules = {
         "aria-hidden": true
       }, /*#__PURE__*/React.createElement("span", {
         style: CIRCLE_LABEL_STYLE
-      }, node.content)), /*#__PURE__*/React.createElement("span", {
-        key: "alt-text",
-        className: "perseus-sr-only"
-      }, i18n.$_("[Circle marker %(number)s]", {
+      }, node.content)), /*#__PURE__*/React.createElement(AltText, {
+        id: "circleMarker",
         number: node.content
-      })), node.space ? "\u00A0" : null];
+      }), node.space ? "\u00A0" : null];
     }
   },
   squareBracketRef: {
@@ -39492,12 +40000,10 @@ const rules = {
         key: "visual-brackets",
         className: "perseus-passage-bracket-label",
         "aria-hidden": "true"
-      }, "[", node.content, "]"), /*#__PURE__*/React.createElement("span", {
-        key: "alt-text",
-        className: "perseus-sr-only"
-      }, i18n.$_("[Sentence %(number)s]", {
+      }, "[", node.content, "]"), /*#__PURE__*/React.createElement(AltText, {
+        id: "sentenceMarker",
         number: node.content
-      })), node.space ? "\u00A0" : null];
+      }), node.space ? "\u00A0" : null];
     }
   },
   highlight: {
@@ -39888,15 +40394,18 @@ class Passage extends React.Component {
   _renderInstructions(parseState) {
     const firstQuestionNumber = parseState.firstQuestionRef;
     const firstSentenceRef = parseState.firstSentenceRef;
+    const {
+      strings
+    } = this.context;
     let instructions = "";
     if (firstQuestionNumber) {
-      instructions += i18n._("The symbol %(questionSymbol)s indicates that question " + "%(questionNumber)s references this portion of the " + "passage.", {
+      instructions += strings.symbolPassage({
         questionSymbol: "[[" + firstQuestionNumber + "]]",
         questionNumber: firstQuestionNumber
       });
     }
     if (firstSentenceRef) {
-      instructions += i18n._(" The symbol %(sentenceSymbol)s indicates that the " + "following sentence is referenced in a question.", {
+      instructions += strings.symbolQuestion({
         sentenceSymbol: "[" + firstSentenceRef + "]"
       });
     }
@@ -39942,6 +40451,9 @@ class Passage extends React.Component {
     return PassageMarkdown.output(parsed);
   }
   render() {
+    const {
+      strings
+    } = this.context;
     let lineNumbers;
     const nLines = this.state.nLines;
     if (this.props.showLineNumbers && nLines) {
@@ -39950,9 +40462,7 @@ class Passage extends React.Component {
       lineNumbers = _.range(1, nLines + 1).map(lineN => {
         const lineAt = lineN + this.state.startLineNumbersAfter;
         if (lineAt === 4) {
-          // we leave a space in i18n to disambiguate translations, see TP-5392
-          // I18N: a label next to a reading passage to denote the line number
-          const translatedLine = i18n._("Line ");
+          const translatedLine = strings.lineLabel;
           return /*#__PURE__*/React.createElement("span", {
             key: "line-marker",
             className: "line-marker"
@@ -39982,13 +40492,14 @@ class Passage extends React.Component {
       className: "passage-title"
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.passageTitle,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: strings
     })), lineNumbers && /*#__PURE__*/React.createElement("div", {
       className: "line-numbers",
       "aria-hidden": true
     }, lineNumbers), !hasTitle && /*#__PURE__*/React.createElement("h3", {
       className: "perseus-sr-only"
-    }, i18n._("Beginning of reading passage.")), /*#__PURE__*/React.createElement("div", {
+    }, strings.beginningPassage), /*#__PURE__*/React.createElement("div", {
       className: "passage-text"
     }, this.shouldRenderJipt() ?
     /*#__PURE__*/
@@ -39996,18 +40507,20 @@ class Passage extends React.Component {
     // content to a <Renderer /> which knows how
     // to handle rendering JIPT text.
     React.createElement(Renderer, {
-      content: this.props.passageText
+      content: this.props.passageText,
+      strings: strings
     }) : this._renderContent(parsedContent)), this._hasFootnotes() && [/*#__PURE__*/React.createElement("h4", {
       key: "footnote-start",
       className: "perseus-sr-only"
-    }, i18n._("Beginning of reading passage footnotes.")), /*#__PURE__*/React.createElement("div", {
+    }, strings.beginningFootnotes), /*#__PURE__*/React.createElement("div", {
       key: "footnotes",
       className: "footnotes"
     }, this._renderFootnotes())], /*#__PURE__*/React.createElement("div", {
       className: "perseus-sr-only"
-    }, i18n._("End of reading passage.")))));
+    }, strings.endPassage))));
   }
 }
+Passage.contextType = PerseusI18nContext;
 Passage.defaultProps = {
   passageTitle: "",
   passageText: "",
@@ -40058,10 +40571,12 @@ class PassageRefTarget extends React.Component {
       // inline={true}
       ,
       apiOptions: this.props.apiOptions,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     });
   }
 }
+PassageRefTarget.contextType = PerseusI18nContext;
 PassageRefTarget.defaultProps = {
   content: "",
   linterContext: linterContextDefault
@@ -40245,11 +40760,11 @@ class Plotter extends React.Component {
         }
       }
       if ((isBar || isLine) && isMobile && !this.props.static) {
-        self.graphie.dragPrompt = graphie.label([c.dimX / 2, c.dimY / 2], i18n._("Drag handles to make graph"), "center", false).css("font-weight", "bold").css("color", KhanColors.KA_GREEN).css("display", "none");
+        self.graphie.dragPrompt = graphie.label([c.dimX / 2, c.dimY / 2], this.context.strings.dragHandles, "center", false).css("font-weight", "bold").css("color", KhanColors.KA_GREEN).css("display", "none");
       }
       self.setupCategories(config);
       if (isTiledPlot && isMobile) {
-        self.graphie.dotPrompt = graphie.label([c.dimX / 2, c.dimY / 2], i18n._("Tap to add points"), "center", false).css("font-weight", "bold").css("color", KhanColors.KA_GREEN).css("display", "none");
+        self.graphie.dotPrompt = graphie.label([c.dimX / 2, c.dimY / 2], this.context.strings.tapAddPoints, "center", false).css("font-weight", "bold").css("color", KhanColors.KA_GREEN).css("display", "none");
       }
       if (isTiledPlot) {
         self.drawPicHeights(self.state.values, prevState.values);
@@ -40864,6 +41379,7 @@ class Plotter extends React.Component {
     });
   }
 }
+Plotter.contextType = PerseusI18nContext;
 Plotter.defaultProps = {
   type: "bar",
   labels: ["", ""],
@@ -41135,7 +41651,7 @@ class Table extends React.Component {
     };
     this.simpleValidate = rubric => {
       // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Table'.
-      return Table.validate(this.getUserInput(), rubric);
+      return Table.validate(this.getUserInput(), rubric, this.context.strings);
     };
     this._handleFocus = inputPath => {
       this.props.onFocus(inputPath);
@@ -41240,7 +41756,8 @@ class Table extends React.Component {
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: header,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }))), /*#__PURE__*/React.createElement("tbody", null, _(rows).times(r => {
       return /*#__PURE__*/React.createElement("tr", {
@@ -41262,6 +41779,7 @@ class Table extends React.Component {
     })));
   }
 }
+Table.contextType = PerseusI18nContext;
 Table.propTypes = {
   answers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
   editableHeaders: PropTypes.bool,
@@ -41289,7 +41807,7 @@ Table.defaultProps = function () {
   };
 }();
 _.extend(Table, {
-  validate: function (state, rubric) {
+  validate: function (state, rubric, strings) {
     const filterNonEmpty = function filterNonEmpty(table) {
       return _.filter(table, function (row) {
         // Check if row has a cell that is nonempty
@@ -41327,7 +41845,7 @@ _.extend(Table, {
           const cellSolution = rowSolution[i];
           const validator = createValidator(cellSolution, {
             simplify: true
-          });
+          }, strings);
           const result = validator(cellSupplied);
           if (result.message) {
             // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
@@ -42090,7 +42608,7 @@ class OldUnitInput extends React.Component {
       });
     };
     this.simpleValidate = (rubric, onInputError) => {
-      return OldUnitInput.validate(this.getUserInput(), rubric);
+      return OldUnitInput.validate(this.getUserInput(), rubric, this.context.strings);
     };
     this.getUserInput = () => {
       return this.props.value;
@@ -42143,13 +42661,13 @@ class OldUnitInput extends React.Component {
       return "unit";
     };
   }
-  static validate(userInput, rubric) {
+  static validate(userInput, rubric, strings) {
     const answer = KAS.unitParse(rubric.value).expr;
     const guess = KAS.unitParse(userInput);
     if (!guess.parsed) {
       return {
         type: "invalid",
-        message: i18n._("I couldn't understand those units.")
+        message: strings.dontUnderstandUnits
       };
     }
 
@@ -42164,8 +42682,7 @@ class OldUnitInput extends React.Component {
     const sigfigs = rubric.sigfigs;
     const sigfigsCorrect = countSigfigs(guess.coefficient) === sigfigs;
     if (!sigfigsCorrect) {
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      message = i18n._("Check your significant figures.");
+      message = strings.checkSigFigs;
     }
 
     // now we need to check that the answer is correct to the precision we
@@ -42184,8 +42701,7 @@ class OldUnitInput extends React.Component {
       numericallyCorrect = false;
     }
     if (!numericallyCorrect) {
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      message = i18n._("That answer is numerically incorrect.");
+      message = strings.answerNumericallyIncorrect;
     }
     let kasCorrect;
     const guessUnit = primUnits(guess.expr.simplify());
@@ -42205,8 +42721,7 @@ class OldUnitInput extends React.Component {
       });
     }
     if (!kasCorrect) {
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      message = i18n._("Check your units.");
+      message = strings.checkUnits;
     }
     const correct = kasCorrect && numericallyCorrect && sigfigsCorrect;
     return {
@@ -42255,12 +42770,13 @@ class OldUnitInput extends React.Component {
       style: {
         display: "none"
       }
-    }, i18n._("I don't understand that")));
+    }, this.context.strings.dontUnderstand));
   }
 }
 
 // Extract the primitive units from a unit expression. This first simplifies
 // `expr` to a `Mul` like "5 kg m / s^2" then removes the first term.
+OldUnitInput.contextType = PerseusI18nContext;
 OldUnitInput.defaultProps = {
   apiOptions: ApiOptions.defaults,
   value: ""
@@ -42311,9 +42827,12 @@ const VideoTranscriptLink = props => {
   // which is used by our GraphQL framework.
   // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'VideoKind'.
   const result = useVideo(id, kind);
+  const {
+    strings
+  } = usePerseusI18n();
   switch (result.status) {
     case "loading":
-      return /*#__PURE__*/React.createElement(View, null, i18n._("Loading..."));
+      return /*#__PURE__*/React.createElement(View, null, strings.loading);
     case "success":
       {
         var _result$data;
@@ -42326,14 +42845,14 @@ const VideoTranscriptLink = props => {
           href: "/transcript/" + ((video == null ? void 0 : video.contentId) || "videoNotFound"),
           target: "_blank",
           className: "visited-no-recolor"
-        }, i18n._("See video transcript")));
+        }, strings.videoTranscript));
       }
     case "error":
-      return /*#__PURE__*/React.createElement(View, null, i18n._("Something went wrong."));
+      return /*#__PURE__*/React.createElement(View, null, strings.somethingWrong);
     case "aborted":
-      return /*#__PURE__*/React.createElement(View, null, i18n._("Something went wrong."));
+      return /*#__PURE__*/React.createElement(View, null, strings.somethingWrong);
     default:
-      return /*#__PURE__*/React.createElement(View, null, i18n._("Something went wrong."));
+      return /*#__PURE__*/React.createElement(View, null, strings.somethingWrong);
   }
 };
 const styles$4 = StyleSheet.create({
@@ -42425,7 +42944,7 @@ class Video extends React.Component {
       key: location + this.props.alignment
     }, /*#__PURE__*/React.createElement(View, {
       style: a11y.srOnly
-    }, i18n._("Khan Academy video wrapper")), /*#__PURE__*/React.createElement("iframe", {
+    }, this.context.strings.videoWrapper), /*#__PURE__*/React.createElement("iframe", {
       // TODO(joshuan): Consider not using iframes when we're
       // loading this from webapp. This iframe is problematic
       // for screenreaders.
@@ -42440,6 +42959,7 @@ class Video extends React.Component {
     }));
   }
 }
+Video.contextType = PerseusI18nContext;
 var Video$1 = {
   name: "video",
   displayName: "Video",
@@ -42489,7 +43009,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "21.5.0";
+const libVersion = "22.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42655,8 +43175,9 @@ class ArticleRenderer extends React.Component {
           }
         }),
         linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "article"),
-        legacyPerseusLint: this.props.legacyPerseusLint
-      }, this.props.dependencies)));
+        legacyPerseusLint: this.props.legacyPerseusLint,
+        strings: this.context.strings
+      })));
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classes
@@ -42665,6 +43186,7 @@ class ArticleRenderer extends React.Component {
     }, sections));
   }
 }
+ArticleRenderer.contextType = PerseusI18nContext;
 ArticleRenderer.defaultProps = {
   apiOptions: ApiOptions.defaults,
   useNewStyles: false,
@@ -42717,7 +43239,7 @@ class HintRenderer extends React.Component {
         tabIndex: "-1"
       }, !apiOptions.isMobile && /*#__PURE__*/React.createElement("span", {
         className: "perseus-sr-only"
-      }, i18n._("Hint #%(pos)s", {
+      }, this.context.strings.hintPos({
         pos: pos + 1
       })), !apiOptions.isMobile && totalHints != null && pos != null && /*#__PURE__*/React.createElement("span", {
         className: "perseus-hint-label",
@@ -42734,11 +43256,13 @@ class HintRenderer extends React.Component {
         images: hint.images,
         apiOptions: rendererApiOptions,
         findExternalWidgets: this.props.findExternalWidgets,
-        linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "hint")
+        linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "hint"),
+        strings: this.context.strings
       }))
     );
   }
 }
+HintRenderer.contextType = PerseusI18nContext;
 HintRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
@@ -42920,7 +43444,7 @@ class HintsRenderer extends React.Component {
       className: classNames$1
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React.createElement("div", {
       className: css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
-    }, i18n._("Hints")), hints, showGetAnotherHint && /*#__PURE__*/React.createElement("button", {
+    }, this.context.strings.hints), hints, showGetAnotherHint && /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type '{ children: Element[]; rel: string; className: string; onClick: (evt: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
       rel: "button",
       className: css(styles$2.linkButton, styles$2.getAnotherHintButton, apiOptions.isMobile && styles$2.mobileHintStylesGetAnotherHintButton),
@@ -42935,9 +43459,10 @@ class HintsRenderer extends React.Component {
       className: css(styles$2.plusText, apiOptions.isMobile && styles$2.mobileHintStylesPlusText)
     }, "+"), /*#__PURE__*/React.createElement("span", {
       className: css(styles$2.getAnotherHintText)
-    }, i18n._("Get another hint"), " ", hintRatioCopy)));
+    }, this.context.strings.getAnotherHint, " ", hintRatioCopy)));
   }
 }
+HintsRenderer.contextType = PerseusI18nContext;
 HintsRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
@@ -43328,14 +43853,16 @@ class ServerItemRenderer extends React.Component {
       content: this.props.item.question.content,
       widgets: this.props.item.question.widgets,
       images: this.props.item.question.images,
-      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "question")
+      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "question"),
+      strings: this.context.strings
     }, this.props.dependencies)));
     const hintsRenderer = /*#__PURE__*/React.createElement(HintsRenderer, {
       hints: this.props.item.hints,
       hintsVisible: this.props.hintsVisible,
       apiOptions: apiOptions,
       ref: elem => this.hintsRenderer = elem,
-      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "hints")
+      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "hints"),
+      strings: this.context.strings
     });
     return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
       value: this.props.dependencies
@@ -43349,6 +43876,7 @@ class ServerItemRenderer extends React.Component {
     }, hintsRenderer)));
   }
 }
+ServerItemRenderer.contextType = PerseusI18nContext;
 ServerItemRenderer.defaultProps = {
   apiOptions: {},
   // a deep default is done in `this.update()`
@@ -43511,114 +44039,6 @@ var constants = /*#__PURE__*/Object.freeze({
   perseusFrameBorderWidth: perseusFrameBorderWidth
 });
 
-// TODO(FEI-4010): Remove `Perseus` prefix for all types here
-// TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
-
-// Range is replaced within this file with Interval, but it is used elsewhere
-// and exported from the package, so we need to keep it around.
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-const ItemExtras = [
-// The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
-"calculator",
-// The user might benefit from using a statistics Chi Squared Table like https://people.richland.edu/james/lecture/m170/tbl-chi.html
-"chi2Table",
-// The user might benefit from a monthly payments calculator.  Provided on Khan Academy when true
-"financialCalculatorMonthlyPayment",
-// The user might benefit from a total amount calculator.  Provided on Khan Academy when true
-"financialCalculatorTotalAmount",
-// The user might benefit from a time to pay off calculator.  Provided on Khan Academy when true
-"financialCalculatorTimeToPayOff",
-// The user might benefit from using a Periodic Table of Elements.  Provided on Khan Academy when true
-"periodicTable",
-// The user might benefit from using a Periodic Table of Elements with key.  Provided on Khan Academy when true
-"periodicTableWithKey",
-// The user might benefit from using a statistics T Table like https://www.statisticshowto.com/tables/t-distribution-table/
-"tTable",
-// The user might benefit from using a statistics Z Table like https://www.ztable.net/
-"zTable"];
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-//prettier-ignore
-
-// A background image applied to various widgets.
-
-const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
-
-// 2D range: xMin, xMax, yMin, yMax
-
-const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
-
 /**
  * Traverses a {content, widgets, images} renderer props object,
  * such as `itemData.question`
@@ -44227,7 +44647,9 @@ class MultiRenderer extends React.Component {
     // `<Renderer>`. I'm not sure how else to do this.
     const _this$props = this.props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-    return otherProps;
+    return _extends({}, otherProps, {
+      strings: this.context.strings
+    });
   }
 
   /**
@@ -44478,7 +44900,7 @@ class MultiRenderer extends React.Component {
     if (this.state.renderError) {
       return /*#__PURE__*/React.createElement("div", {
         className: css(styles.error)
-      }, i18n.$_("Error rendering: %(error)s", {
+      }, this.context.strings.errorRendering({
         error: String(this.state.renderError)
       }));
     }
@@ -44492,6 +44914,7 @@ class MultiRenderer extends React.Component {
     }));
   }
 }
+MultiRenderer.contextType = PerseusI18nContext;
 const styles = StyleSheet.create({
   error: {
     color: "red"
@@ -45587,5 +46010,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map