@khanacademy/perseus 21.6.0 → 22.0.0

package/dist/index.js

@@ -6,7 +6,6 @@ var KAS = require('@khanacademy/kas');
 var mathInput = require('@khanacademy/math-input');
 var PerseusLinter = require('@khanacademy/perseus-linter');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var i18n = require('@khanacademy/wonder-blocks-i18n');
 var Tooltip$1 = require('@khanacademy/wonder-blocks-tooltip');
 var classNames = require('classnames');
 var React = require('react');
@@ -64,7 +63,6 @@ function _interopNamespace(e) {
 
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var PerseusLinter__namespace = /*#__PURE__*/_interopNamespace(PerseusLinter);
-var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip$1);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
@@ -102,6 +100,290 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+/**
+ * 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: _ref => {
+    let {
+      pos
+    } = _ref;
+    return `Hint #${pos}`;
+  },
+  errorRendering: _ref2 => {
+    let {
+      error
+    } = _ref2;
+    return `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: _ref3 => {
+    let {
+      title
+    } = _ref3;
+    return `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: _ref4 => {
+    let {
+      num
+    } = _ref4;
+    return num === 1 ? `${num} answer` : `${num} answers`;
+  },
+  hideAnswersToggleLabel: "Hide answer choices",
+  moves: _ref5 => {
+    let {
+      num
+    } = _ref5;
+    return 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: _ref6 => {
+    let {
+      content
+    } = _ref6;
+    return `A molecular structure drawing. SMILES notation: ${content}`;
+  },
+  switchDirection: "Switch direction",
+  circleOpen: "Make circle open",
+  circleFilled: "Make circle filled",
+  numDivisions: "Number of divisions:",
+  divisions: _ref7 => {
+    let {
+      divRangeString
+    } = _ref7;
+    return `Please make sure the number of divisions is in the range ${divRangeString}.`;
+  },
+  lineRange: _ref8 => {
+    let {
+      lineRange
+    } = _ref8;
+    return `lines ${lineRange}`;
+  },
+  lineNumber: _ref9 => {
+    let {
+      lineNumber
+    } = _ref9;
+    return `line ${lineNumber}`;
+  },
+  symbolPassage: _ref10 => {
+    let {
+      questionSymbol,
+      questionNumber
+    } = _ref10;
+    return `The symbol ${questionSymbol} indicates that question ${questionNumber} references this portion of the passage.`;
+  },
+  symbolQuestion: _ref11 => {
+    let {
+      sentenceSymbol
+    } = _ref11;
+    return ` 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: _ref12 => {
+    let {
+      number
+    } = _ref12;
+    return `[Marker for question ${number}]`;
+  },
+  circleMarker: _ref13 => {
+    let {
+      number
+    } = _ref13;
+    return `[Circle marker ${number}]`;
+  },
+  sentenceMarker: _ref14 => {
+    let {
+      number
+    } = _ref14;
+    return `[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: _ref15 => {
+    let {
+      numCorrect
+    } = _ref15;
+    return `Choose ${numCorrect} answers:`;
+  },
+  chooseAllAnswers: "Choose all answers that apply:",
+  chooseOneAnswer: "Choose 1 answer:",
+  choiceCheckedCorrect: _ref16 => {
+    let {
+      letter
+    } = _ref16;
+    return `(Choice ${letter}, Checked, Correct)`;
+  },
+  choiceCrossedOutCorrect: _ref17 => {
+    let {
+      letter
+    } = _ref17;
+    return `(Choice ${letter}, Crossed out, Correct)`;
+  },
+  choiceCorrect: _ref18 => {
+    let {
+      letter
+    } = _ref18;
+    return `(Choice ${letter}, Correct)`;
+  },
+  choiceCheckedIncorrect: _ref19 => {
+    let {
+      letter
+    } = _ref19;
+    return `(Choice ${letter}, Checked, Incorrect)`;
+  },
+  choiceCrossedOutIncorrect: _ref20 => {
+    let {
+      letter
+    } = _ref20;
+    return `(Choice ${letter}, Crossed out, Incorrect)`;
+  },
+  choiceIncorrect: _ref21 => {
+    let {
+      letter
+    } = _ref21;
+    return `(Choice ${letter}, Incorrect)`;
+  },
+  choiceChecked: _ref22 => {
+    let {
+      letter
+    } = _ref22;
+    return `(Choice ${letter}, Checked)`;
+  },
+  choiceCrossedOut: _ref23 => {
+    let {
+      letter
+    } = _ref23;
+    return `(Choice ${letter}, Crossed out)`;
+  },
+  choice: _ref24 => {
+    let {
+      letter
+    } = _ref24;
+    return `(Choice ${letter})`;
+  },
+  crossOut: "Cross out",
+  crossOutOption: "Cross out option",
+  crossOutChoice: _ref25 => {
+    let {
+      letter
+    } = _ref25;
+    return `Cross out Choice ${letter}`;
+  },
+  bringBack: "Bring back",
+  openMenuForChoice: _ref26 => {
+    let {
+      letter
+    } = _ref26;
+    return `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__namespace.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(_ref) {
+  let {
+    children,
+    strings,
+    locale
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement(PerseusI18nContext.Provider, {
+    value: {
+      strings,
+      locale
+    }
+  }, children);
+}
+const usePerseusI18n = () => React.useContext(PerseusI18nContext);
+
 const debounce = (func, delay) => {
   let timer = null;
   return function () {
@@ -117,24 +399,11 @@ const debounce = (func, delay) => {
   };
 };
 
-const customKeyTranslator = {
-  ...mathInput.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__namespace.Component {
+class InnerMathInput extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'mouseDown' has no initializer and is not definitely assigned in the constructor.
-
+  mouseDown;
   __mathFieldWrapperRef = null;
   __mathField = null;
   static defaultProps = {
@@ -166,6 +435,22 @@ class MathInput extends React__namespace.Component {
   }
   insert = value => {
     const input = this.mathField();
+    const {
+      locale
+    } = this.context;
+    const customKeyTranslator = {
+      ...mathInput.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);
@@ -188,8 +473,11 @@ class MathInput extends React__namespace.Component {
   };
   mathField = () => {
     if (!this.__mathField && this.__mathFieldWrapperRef) {
+      const {
+        locale
+      } = this.context;
       // Initialize MathQuill.MathField instance
-      this.__mathField = mathInput.createMathField(this.__mathFieldWrapperRef, baseConfig => ({
+      this.__mathField = mathInput.createMathField(this.__mathFieldWrapperRef, this.props.mathInputStrings, baseConfig => ({
         ...baseConfig,
         handlers: {
           edit: debounce(mathField => {
@@ -206,7 +494,7 @@ class MathInput extends React__namespace.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 (mathInput.convertDotToTimesByLocale(this.props.convertDotToTimes)) {
+            if (mathInput.convertDotToTimesByLocale(locale, this.props.convertDotToTimes)) {
               value = value.replace(/\\cdot/g, "\\times");
 
               // Preserve cursor position in the common case:
@@ -266,7 +554,10 @@ class MathInput extends React__namespace.Component {
     focused: false
   });
   handleKeypadPress = (key, e) => {
-    const translator = mathInput.keyTranslator[key];
+    const {
+      locale
+    } = this.context;
+    const translator = mathInput.getKeyTranslator(locale)[key];
     const mathField = this.mathField();
     if (mathField) {
       if (translator) {
@@ -342,7 +633,7 @@ class MathInput extends React__namespace.Component {
       focused: false,
       active: false
     }) : /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-      "aria-label": this.state.keypadOpen ? i18n__namespace._("close math keypad") : i18n__namespace._("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()
@@ -351,6 +642,26 @@ class MathInput extends React__namespace.Component {
     }, props))))));
   }
 }
+
+// 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.
+class MathInput extends React__namespace.Component {
+  static contextType = mathInput.MathInputI18nContext;
+  inputRef = /*#__PURE__*/React__namespace.createRef();
+  focus() {
+    this.inputRef.current?.focus();
+  }
+  insert(value) {
+    this.inputRef.current?.insert(value);
+  }
+  render() {
+    return /*#__PURE__*/React__namespace.createElement(InnerMathInput, _extends({}, this.props, {
+      ref: this.inputRef,
+      mathInputStrings: this.context.strings
+    }));
+  }
+}
 const MathInputIcon = _ref => {
   let {
     hovered,
@@ -547,6 +858,8 @@ const Log = {
 };
 
 class PerseusError extends Error {
+  kind;
+  metadata;
   constructor(message, kind, options) {
     super(message);
     this.kind = kind;
@@ -1264,16 +1577,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__namespace._("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__namespace._("We could not understand your " + "answer. Please check your answer for extra " + "text or symbols."),
-  NEEDS_TO_BE_SIMPLFIED_ERROR: i18n__namespace._("Your answer is almost correct, " + "but it needs to be simplified."),
-  MISSING_PERCENT_ERROR: i18n__namespace._("Your answer is almost correct, " + "but it is missing a " + "<code>\\%</code> at the end."),
-  MULTIPLICATION_SIGN_ERROR: i18n__namespace._("I'm a computer. I only understand " + "multiplication if you use an asterisk " + "(*) as the multiplication sign."),
-  WRONG_CASE_ERROR: i18n__namespace._("Your answer includes use of a variable with the wrong case."),
-  WRONG_LETTER_ERROR: i18n__namespace._("Your answer includes a wrong variable letter.")
-};
-
 /*
  * Answer types
  *
@@ -1346,7 +1649,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 = ___default["default"].extend({
         simplify: "required",
@@ -1735,12 +2038,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.
@@ -1749,7 +2052,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;
             }
           }
         });
@@ -1765,7 +2068,7 @@ const KhanAnswerTypes = {
           });
           if (!interpretedGuess) {
             score.empty = true;
-            score.message = errors.EXTRA_SYMBOLS_ERROR;
+            score.message = strings.EXTRA_SYMBOLS_ERROR;
             return score;
           }
         }
@@ -1788,10 +2091,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);
     }
   },
   /*
@@ -1856,7 +2159,7 @@ const KhanAnswerTypes = {
       }
       return solution;
     },
-    createValidatorFunctional: function (solution, options) {
+    createValidatorFunctional: function (solution, options, strings) {
       return function (guess) {
         const score = {
           empty: false,
@@ -1907,7 +2210,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;
@@ -1933,7 +2236,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.
@@ -1947,9 +2250,6 @@ const KhanAnswerTypes = {
   }
 };
 
-const ERROR_TITLE = i18n__namespace._("Oops!");
-const ERROR_MESSAGE = i18n__namespace._("Sorry, I don't understand that!");
-
 // Map of international operator names to their English equivalents
 const englishOperators = {
   arctg: "arctan",
@@ -1976,8 +2276,34 @@ 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 => {
+  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?.[0] ?? ".";
+  }
+};
+
 // The new, MathQuill input expression widget
 class Expression extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   _isMounted = false;
 
   //#region Previously a class extension
@@ -2001,9 +2327,11 @@ class Expression extends React__namespace.Component {
    */
   static validate(userInput, rubric) {
     let onInputError = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
+    let strings = arguments.length > 3 ? arguments[3] : undefined;
+    let locale = arguments.length > 4 ? arguments[4] : undefined;
     const options = ___default["default"].clone(rubric);
     ___default["default"].extend(options, {
-      decimal_separator: i18n__namespace.getDecimalSeparator()
+      decimal_separator: getDecimalSeparator(locale)
     });
     const createValidator = answer => {
       // We give options to KAS.parse here because it is parsing the
@@ -2026,7 +2354,7 @@ class Expression extends React__namespace.Component {
       return KhanAnswerTypes.expression.createValidatorFunctional(expression.expr, ___default["default"]({}).extend(options, {
         simplify: answer.simplify,
         form: answer.form
-      }));
+      }), strings);
     };
 
     // Find the first answer form that matches the user's input and that
@@ -2173,7 +2501,7 @@ class Expression extends React__namespace.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
@@ -2197,7 +2525,7 @@ class Expression extends React__namespace.Component {
       scoring,
       ...rubric
     } = _ref;
-    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.
@@ -2229,7 +2557,7 @@ class Expression extends React__namespace.Component {
     // make it so that solution answers with ','s or '.'s work
     const options = ___default["default"].pick(props || this.props, "functions");
     ___default["default"].extend(options, {
-      decimal_separator: i18n__namespace.getDecimalSeparator()
+      decimal_separator: getDecimalSeparator(this.context.locale)
     });
     return KAS__namespace.parse(normalizeTex(value), options);
   };
@@ -2318,6 +2646,10 @@ class Expression extends React__namespace.Component {
       "perseus-widget-expression": true,
       "show-error-tooltip": this.state.showErrorTooltip
     });
+    const {
+      ERROR_MESSAGE,
+      ERROR_TITLE
+    } = this.context.strings;
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: className,
       onBlur: () => this.state.invalid && this.setState({
@@ -2744,7 +3076,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) {
@@ -2754,7 +3086,7 @@ function firstNumericalParse$1(text) {
     simplify: "optional",
     inexact: true,
     forms: "integer, proper, improper, pi, log, mixed, decimal"
-  });
+  }, strings);
   val(text);
   return first;
 }
@@ -8566,8 +8898,12 @@ const KhanColors = {
 // DrawingTransform is responsible for transforming from "math coordinates"
 // (on the Cartesian plane) to "canvas coordinates" in pixels.
 class DrawingTransform {
-  // Scale is measured in pixels per unit on the Cartesian plane.
+  raphael;
 
+  // Scale is measured in pixels per unit on the Cartesian plane.
+  xScale;
+  yScale;
+  bounds;
   constructor(raphael, initialScale, bounds) {
     this.raphael = raphael;
     this.bounds = bounds;
@@ -8632,6 +8968,10 @@ class DrawingTransform {
 // Defines the bounds of the visible area of a graph, in Cartesian coordinates.
 // GraphBounds is immutable.
 class GraphBounds {
+  xMin;
+  xMax;
+  yMin;
+  yMax;
   constructor(xRange, yRange) {
     this.xMin = xRange[0];
     this.xMax = xRange[1];
@@ -8735,26 +9075,35 @@ function polar(r, th) {
   return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
 }
 class Graphie$1 {
+  el;
   #bounds;
   #drawingTransform;
 
   // The primary drawing layer
-
+  raphael;
   // The layer that all visuals with mouse handlers are drawn into
-
+  mouselayer;
+  _mouselayerWrapper;
+  _visiblelayerWrapper;
   isMobile = false;
   // Set up some reasonable defaults
   currentStyle = {
     "stroke-width": 2,
     fill: "none"
   };
-
+  range;
+  scale;
+  dimensions;
   // TODO(benchristel): xpixels and ypixels are never used by this class, but
   // other code reaches in to access them :(
   // Refactor to accessor methods that look at this.dimensions.
+  xpixels;
+  ypixels;
+
   // set by Movables
   // TODO(benchristel): consider putting this state on the Movable instead of
   // on the Graphie
+  isDragging;
   constructor(el) {
     this.el = el;
     $__default["default"](el).css("position", "relative");
@@ -10286,6 +10635,8 @@ const getClipPoint = function (graph, coord, angle) {
  */
 
 class WrappedDrawing {
+  graphie;
+  initialPoint;
   constructor(graphie, initialPoint) {
     this.graphie = graphie;
     this.initialPoint = initialPoint;
@@ -10346,6 +10697,8 @@ const DEFAULT_OPTIONS$2 = {
   mouselayer: false
 };
 class WrappedPath extends WrappedDrawing {
+  wrapper;
+  visibleShape;
   constructor(graphie, points, options) {
     const initialPoint = graphie.scalePoint(___default["default"].head(points));
     super(graphie, initialPoint);
@@ -10368,6 +10721,7 @@ class WrappedPath extends WrappedDrawing {
 
 class Arrowhead$1 extends WrappedPath {
   static scale = 1.4;
+  center;
   constructor(graphie, style) {
     // Points that define the arrowhead
     const center = [0.75, 0];
@@ -10413,6 +10767,9 @@ const DEFAULT_OPTIONS$1 = {
   disableMouseEventsOnWrapper: false
 };
 class WrappedEllipse extends WrappedDrawing {
+  initialPoint;
+  wrapper;
+  visibleShape;
   constructor(graphie, center, radii, options) {
     super(graphie, center);
     options = ___default["default"].extend({}, DEFAULT_OPTIONS$1, options);
@@ -10460,6 +10817,9 @@ const DEFAULT_OPTIONS = {
   mouselayer: false
 };
 class WrappedLine extends WrappedDrawing {
+  initialLength;
+  wrapper;
+  visibleShape;
   constructor(graphie, start, end, options) {
     // Always make the line as large as possible and horizontal; this
     // simplifies a lot of the transforms, e.g., we can rotate by exactly the
@@ -13753,6 +14113,9 @@ const DEFAULT_STATE$3 = {
   mouseTarget: null
 };
 class Movable {
+  graphie;
+  state;
+  prevState;
   // TODO(benchristel): delete _listenerMap; it's unused
   _listenerMap = {};
   constructor(graphie, options) {
@@ -13878,12 +14241,12 @@ class Movable {
    * Fire an onSomething type event to all functions in listeners
    */
   _fireEvent(listeners) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
     if (listeners == null) {
       return;
     }
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
     for (const listener of listeners) {
       listener.call(this, ...args);
     }
@@ -15016,8 +15379,12 @@ const DEFAULT_STATE$1 = {
 // tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
 class MovablePoint$4 {
+  graphie;
+  movable;
+  state;
   // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
-
+  prevState;
+  _tooltip;
   _listenerMap = {};
   constructor(graphie, movable, options) {
     this.graphie = graphie;
@@ -16706,6 +17073,7 @@ const Status = {
   FAILED: "failed"
 };
 class ImageLoader extends React__namespace.Component {
+  img;
   constructor(props) {
     super(props);
     this.state = {
@@ -16942,6 +17310,7 @@ function defaultPreloader(dimensions) {
   }));
 }
 class SvgImage extends React__namespace.Component {
+  _isMounted;
   static defaultProps = {
     constrainHeight: false,
     onUpdate: () => {},
@@ -17387,6 +17756,7 @@ class SvgImage extends React__namespace.Component {
  * have been loaded.  This tracking is facilitated by the AssetContext.
  */
 class Tex extends React__namespace.Component {
+  _hasRendered;
   static defaultProps = {
     onRender: () => {},
     setAssetStatus: (src, status) => {}
@@ -17428,13 +17798,14 @@ class Tex extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class Zoomable extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-
+  _isMounted;
   // @ts-expect-error - TS2564 - Property '_observer' has no initializer and is not definitely assigned in the constructor.
-
+  _observer;
   // @ts-expect-error - TS2564 - Property '_measuringInitialized' has no initializer and is not definitely assigned in the constructor.
-
+  _measuringInitialized;
+  _originalWidth;
   // @ts-expect-error - TS2564 - Property '_node' has no initializer and is not definitely assigned in the constructor.
-
+  _node;
   static defaultProps = {
     animateHeight: false,
     readyToMeasure: true,
@@ -17793,13 +18164,15 @@ function _noop() {}
  */
 class InteractionTracker {
   // @ts-expect-error - TS2564 - Property '_tracked' has no initializer and is not definitely assigned in the constructor.
-
+  _tracked;
   // @ts-expect-error - TS2564 - Property 'setting' has no initializer and is not definitely assigned in the constructor.
-
+  setting;
+  track;
+  trackApi;
   // @ts-expect-error - TS2564 - Property 'widgetID' has no initializer and is not definitely assigned in the constructor.
-
+  widgetID;
   // @ts-expect-error - TS2564 - Property 'widgetType' has no initializer and is not definitely assigned in the constructor.
-
+  widgetType;
   constructor(trackApi, widgetType, widgetID, setting) {
     if (!trackApi) {
       this.track = _noop;
@@ -17911,6 +18284,7 @@ var Severity = /*#__PURE__*/function (Severity) {
  * to the left of where it belongs.  And if there is more
  **/
 class Lint extends React__namespace.Component {
+  _positionTimeout;
   state = {
     tooltipAbove: true
   };
@@ -18367,7 +18741,7 @@ const rules$1 = {
       // just a stub for testing.
       return /*#__PURE__*/React__namespace.createElement("em", {
         key: state.key
-      }, i18n__namespace.doNotTranslate("[Widget: ", node.id, "]"));
+      }, `[Widget: ${node.id}]`);
     }
   },
   blockMath: {
@@ -18855,9 +19229,8 @@ 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]?.getWidget) {
+    return widgets[name].getWidget?.();
   }
   return widgets[name].widget;
 };
@@ -19009,7 +19382,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) {
@@ -19030,7 +19403,7 @@ const getRendererPropsForWidgetInfo = (widgetInfo, problemNum) => {
     transform = widgetExports.transform || ___default["default"].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) {
@@ -19374,24 +19747,26 @@ const isIdPathPrefix = function (prefixArray, wholeArray) {
  * scoring, state serialization/deserialization, and focus management.
  */
 class Renderer extends React__namespace.Component {
+  _currentFocus;
   // @ts-expect-error - TS2564 - Property '_foundTextNodes' has no initializer and is not definitely assigned in the constructor.
-
+  _foundTextNodes;
   // @ts-expect-error - TS2564 - Property '_interactionTrackers' has no initializer and is not definitely assigned in the constructor.
-
+  _interactionTrackers;
   // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-
+  _isMounted;
   // @ts-expect-error - TS2564 - Property '_isTwoColumn' has no initializer and is not definitely assigned in the constructor.
+  _isTwoColumn;
 
   // The i18n linter.
-
+  _translationLinter;
   _widgetContainers = new Map();
-
+  lastRenderedMarkdown;
   // @ts-expect-error - TS2564 - Property 'reuseMarkdown' has no initializer and is not definitely assigned in the constructor.
-
+  reuseMarkdown;
   // @ts-expect-error - TS2564 - Property 'translationIndex' has no initializer and is not definitely assigned in the constructor.
-
+  translationIndex;
   // @ts-expect-error - TS2564 - Property 'widgetIds' has no initializer and is not definitely assigned in the constructor.
-
+  widgetIds;
   static defaultProps = {
     content: "",
     widgets: {},
@@ -19590,9 +19965,12 @@ class Renderer extends React__namespace.Component {
       problemNum
     } = props;
     const widgetsStartProps = {};
+    const {
+      strings
+    } = this.props;
     wonderStuffCore.entries(allWidgetInfo).forEach(_ref => {
       let [key, widgetInfo] = _ref;
-      widgetsStartProps[key] = getRendererPropsForWidgetInfo(widgetInfo, problemNum);
+      widgetsStartProps[key] = getRendererPropsForWidgetInfo(widgetInfo, strings, problemNum);
     });
 
     // Call the onWidgetStartProps callback if it exists
@@ -21058,6 +21436,7 @@ class TextInput extends React__namespace.Component {
     value: "",
     disabled: false
   };
+  id;
   constructor(props) {
     super(props);
     if (props.id) {
@@ -21383,6 +21762,7 @@ const {
   captureScratchpadTouchStart: captureScratchpadTouchStart$2
 } = Util;
 class InputWithExamples extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     type: "text",
     shouldShowExamples: true,
@@ -21505,7 +21885,8 @@ class InputWithExamples extends React__namespace.Component {
       id: this._getUniqueId()
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: examplesContent,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "input-with-examples")
+      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "input-with-examples"),
+      strings: this.context.strings
     })));
   }
   _handleFocus = () => {
@@ -21653,35 +22034,36 @@ const answerTypes = {
   }
 };
 const formExamples$1 = {
-  integer: function (options) {
-    return i18n__namespace._("an integer, like $6$");
+  integer: function (options, strings) {
+    return strings.integerExample;
   },
-  proper: function (options) {
+  proper: function (options, strings) {
     if (options.simplify === "optional") {
-      return i18n__namespace._("a *proper* fraction, like $1/2$ or $6/10$");
+      return strings.properExample;
     }
-    return i18n__namespace._("a *simplified proper* fraction, like $3/5$");
+    return strings.simplifiedProperExample;
   },
-  improper: function (options) {
+  improper: function (options, strings) {
     if (options.simplify === "optional") {
-      return i18n__namespace._("an *improper* fraction, like $10/7$ or $14/8$");
+      return strings.improperExample;
     }
-    return i18n__namespace._("a *simplified improper* fraction, like $7/4$");
+    return strings.simplifiedImproperExample;
   },
-  mixed: function (options) {
-    return i18n__namespace._("a mixed number, like $1\\ 3/4$");
+  mixed: function (options, strings) {
+    return strings.mixedExample;
   },
-  decimal: function (options) {
-    return i18n__namespace._("an *exact* decimal, like $0.75$");
+  decimal: function (options, strings) {
+    return strings.decimalExample;
   },
-  percent: function (options) {
-    return i18n__namespace._("a percent, like $12.34\\%$");
+  percent: function (options, strings) {
+    return strings.percentExample;
   },
-  pi: function (options) {
-    return i18n__namespace._("a multiple of pi, like $12\\ \\text{pi}$ or " + "$2/3\\ \\text{pi}$");
+  pi: function (options, strings) {
+    return strings.piExample;
   }
 };
 class InputNumber extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     currentValue: "",
     size: "normal",
@@ -21795,21 +22177,19 @@ class InputNumber extends React__namespace.Component {
   };
   simpleValidate = (rubric, onInputError) => {
     onInputError = onInputError || function () {};
-    return InputNumber.validate(this.getUserInput(), rubric, onInputError);
+    return InputNumber.validate(this.getUserInput(), rubric, this.context.strings, onInputError);
   };
   examples = () => {
+    const {
+      strings
+    } = this.context;
     const type = this.props.answerType;
     const forms = answerTypes[type].forms.split(/\s*,\s*/);
-    const examples = ___default["default"].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__namespace._("**Your answer should be** ")].concat(examples);
+    const examples = ___default["default"].map(forms, form => formExamples$1[form](this.props, strings));
+    return [strings.yourAnswer].concat(examples);
   };
-  static validate(state, rubric) {
-    let onInputError = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
+  static validate(state, rubric, strings) {
+    let onInputError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
     if (rubric.answerType == null) {
       rubric.answerType = "number";
     }
@@ -21823,7 +22203,7 @@ class InputNumber extends React__namespace.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.
@@ -21938,14 +22318,16 @@ const answerFormButtons = [{
   content: "\u03C0"
 }];
 const formExamples = {
-  integer: () => i18n__namespace._("an integer, like $6$"),
-  proper: form => form.simplify === "optional" ? i18n__namespace._("a *proper* fraction, like $1/2$ or $6/10$") : i18n__namespace._("a *simplified proper* fraction, like $3/5$"),
-  improper: form => form.simplify === "optional" ? i18n__namespace._("an *improper* fraction, like $10/7$ or $14/8$") : i18n__namespace._("a *simplified improper* fraction, like $7/4$"),
-  mixed: () => i18n__namespace._("a mixed number, like $1\\ 3/4$"),
-  decimal: () => i18n__namespace._("an *exact* decimal, like $0.75$"),
-  pi: () => i18n__namespace._("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__namespace.Component {
+  static contextType = PerseusI18nContext;
+  inputRef;
   static defaultProps = {
     currentValue: "",
     size: "normal",
@@ -21989,7 +22371,7 @@ class NumericInput extends React__namespace.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
@@ -22015,7 +22397,7 @@ class NumericInput extends React__namespace.Component {
         // TODO(merlob) backfill / delete
         maxError: answer.maxError,
         forms: validatorForms
-      });
+      }, strings);
     };
 
     // We may have received TeX; try to parse it before grading.
@@ -22098,13 +22480,12 @@ class NumericInput extends React__namespace.Component {
       };
     });
     let examples = ___default["default"].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 = ___default["default"].uniq(examples);
-    return [i18n__namespace._("**Your answer should be** ")].concat(examples);
+    return [this.context.strings.yourAnswer].concat(examples);
   };
   shouldShowExamples = () => {
     const noFormsAccepted = this.props.answerForms?.length === 0;
@@ -22116,7 +22497,7 @@ class NumericInput extends React__namespace.Component {
     return !noFormsAccepted && !allFormsAccepted;
   };
   simpleValidate = rubric => {
-    return NumericInput.validate(this.getUserInput(), rubric);
+    return NumericInput.validate(this.getUserInput(), rubric, this.context.strings);
   };
   focus = () => {
     this.inputRef?.focus();
@@ -22162,7 +22543,7 @@ class NumericInput extends React__namespace.Component {
   render() {
     let labelText = this.props.labelText;
     if (labelText == null || labelText === "") {
-      labelText = i18n__namespace._("Your answer:");
+      labelText = this.context.strings.yourAnswerLabel;
     }
 
     // To right align a custom keypad we need to wrap it.
@@ -22309,11 +22690,12 @@ var NumericInput$1 = {
 /* eslint-disable react/sort-comp */
 const EN_DASH$1 = "\u2013";
 class PassageRef extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   displayName = "PassageRef";
   // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-
+  _isMounted;
   // @ts-expect-error - TS2564 - Property '_throttledUpdateRange' has no initializer and is not definitely assigned in the constructor.
-
+  _throttledUpdateRange;
   static defaultProps = {
     passageNumber: 1,
     referenceNumber: 1,
@@ -22333,18 +22715,21 @@ class PassageRef extends React__namespace.Component {
     return removeDenylistProps(this.props);
   };
   render() {
+    const {
+      strings
+    } = this.context;
     const lineRange = this.state.lineRange;
     let lineRangeOutput;
     if (!lineRange) {
-      lineRangeOutput = i18n__namespace.$_("lines %(lineRange)s", {
+      lineRangeOutput = strings.lineRange({
         lineRange: `?${EN_DASH$1}?`
       });
     } else if (lineRange[0] === lineRange[1]) {
-      lineRangeOutput = i18n__namespace.$_("line %(lineNumber)s", {
-        lineNumber: lineRange[0]
+      lineRangeOutput = strings.lineNumber({
+        lineNumber: String(lineRange[0])
       });
     } else {
-      lineRangeOutput = i18n__namespace.$_("lines %(lineRange)s", {
+      lineRangeOutput = strings.lineRange({
         lineRange: lineRange[0] + EN_DASH$1 + lineRange[1]
       });
     }
@@ -22784,7 +23169,7 @@ class Icon extends React__namespace.Component {
   }
 }
 
-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.
@@ -22793,45 +23178,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__namespace._("(Choice %(letter)s, Checked, Correct)", {
+      return strings.choiceCheckedCorrect({
         letter
       });
     }
     if (crossedOut) {
-      return i18n__namespace._("(Choice %(letter)s, Crossed out, Correct)", {
+      return strings.choiceCrossedOutCorrect({
         letter
       });
     }
-    return i18n__namespace._("(Choice %(letter)s, Correct)", {
+    return strings.choiceCorrect({
       letter
     });
   }
   if (showCorrectness && !correct) {
     if (checked) {
-      return i18n__namespace._("(Choice %(letter)s, Checked, Incorrect)", {
+      return strings.choiceCheckedIncorrect({
         letter
       });
     }
     if (crossedOut) {
-      return i18n__namespace._("(Choice %(letter)s, Crossed out, Incorrect)", {
+      return strings.choiceCrossedOutIncorrect({
         letter
       });
     }
-    return i18n__namespace._("(Choice %(letter)s, Incorrect)", {
+    return strings.choiceIncorrect({
       letter
     });
   }
   if (checked) {
-    return i18n__namespace._("(Choice %(letter)s, Checked)", {
+    return strings.choiceChecked({
       letter
     });
   }
   if (crossedOut) {
-    return i18n__namespace._("(Choice %(letter)s, Crossed out)", {
+    return strings.choiceCrossedOut({
       letter
     });
   }
-  return i18n__namespace._("(Choice %(letter)s)", {
+  return strings.choice({
     letter
   });
 }
@@ -22878,18 +23263,8 @@ const styles$z = aphrodite.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__namespace._("A B C D E F G H I J K L M N O P Q R S T U V W X Y Z");
+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.
@@ -22953,7 +23328,10 @@ function ChoiceInner(props) {
     showCorrectness,
     correct
   } = props;
-  const letter = getChoiceLetter(pos);
+  const {
+    strings
+  } = usePerseusI18n();
+  const letter = getChoiceLetter(pos, strings);
   if (!showCorrectness) {
     return letter;
   }
@@ -23099,24 +23477,24 @@ const styles$w = aphrodite.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__namespace._("Correct (selected)");
+      return strings.correctSelected;
     }
     if (crossedOut) {
-      return i18n__namespace._("Correct (but you crossed it out)");
+      return strings.correctCrossedOut;
     }
-    return i18n__namespace._("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__namespace._("Incorrect (selected)");
+    return strings.incorrectSelected;
   }
-  return i18n__namespace._("Incorrect");
+  return strings.incorrect;
 }
 const OptionStatus = function (props) {
   const {
@@ -23126,6 +23504,9 @@ const OptionStatus = function (props) {
     previouslyAnswered,
     reviewMode
   } = props;
+  const {
+    strings
+  } = usePerseusI18n();
 
   // Option status is shown only in review mode, or for incorrectly
   // answered items.
@@ -23145,7 +23526,7 @@ const OptionStatus = function (props) {
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: aphrodite.css(styles$v.text, textStyle)
-  }, renderText(checked, correct, crossedOut));
+  }, renderText(checked, correct, crossedOut, strings));
 };
 const styles$v = aphrodite.StyleSheet.create({
   text: {
@@ -23192,6 +23573,9 @@ const Choice = function (props) {
     forwardedRef
   } = props;
   const [isInputFocused, setIsInputFocused] = React.useState(false);
+  const {
+    strings
+  } = usePerseusI18n();
   React.useEffect(() => {
     if (isInputFocused && disabled) {
       setIsInputFocused(false);
@@ -23220,8 +23604,8 @@ const Choice = function (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 = wonderBlocksCore.useUniqueIdWithMock(`choice`);
   const choiceId = idFactory.get(letter);
   return /*#__PURE__*/React__namespace.createElement("div", {
@@ -23326,15 +23710,15 @@ const Choice = function (props) {
         close
       } = _ref2;
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContent, {
-        title: i18n__namespace._("Cross out"),
-        content: i18n__namespace._("Cross out option"),
+        title: strings.crossOut,
+        content: strings.crossOutOption,
         closeButtonVisible: true,
         actions: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
           size: wonderBlocksTokens.spacing.medium_16
         }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
           kind: "primary",
-          "aria-label": i18n__namespace._("Cross out Choice %(letter)s", {
-            letter: getChoiceLetter(pos)
+          "aria-label": strings.crossOutChoice({
+            letter: getChoiceLetter(pos, strings)
           }),
           disabled: apiOptions.readOnly || reviewMode,
           onClick: () => {
@@ -23354,7 +23738,7 @@ const Choice = function (props) {
             }
             close();
           }
-        }, crossedOut ? i18n__namespace._("Bring back") : i18n__namespace._("Cross out")))
+        }, crossedOut ? strings.bringBack : strings.crossOut))
       });
     }
   }, _ref3 => {
@@ -23363,8 +23747,8 @@ const Choice = function (props) {
     } = _ref3;
     return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: open,
-      "aria-label": i18n__namespace._(`Open menu for Choice %(letter)s`, {
-        letter: getChoiceLetter(pos)
+      "aria-label": strings.openMenuForChoice({
+        letter: getChoiceLetter(pos, strings)
       }),
       style: {
         alignSelf: "center",
@@ -23414,6 +23798,9 @@ const ChoiceNoneAbove = function (props) {
     forwardedRef,
     ...rest
   } = props;
+  const {
+    strings
+  } = usePerseusI18n();
   const choiceProps = {
     ...rest,
     content: showContent ? content :
@@ -23430,7 +23817,8 @@ const ChoiceNoneAbove = function (props) {
     // just to render a string
     React__namespace.createElement(Renderer, {
       key: "noneOfTheAboveRenderer",
-      content: i18n__namespace._("None of the above")
+      content: strings.noneOfTheAbove,
+      strings: strings
     })
   };
   return /*#__PURE__*/React__namespace.createElement(Choice$1, _extends({}, choiceProps, {
@@ -23450,16 +23838,16 @@ const {
 
 // exported for tests
 
-function getInstructionsText(multipleSelect, countChoices, numCorrect) {
+function getInstructionsText(multipleSelect, countChoices, numCorrect, strings) {
   if (multipleSelect) {
     if (countChoices) {
-      return i18n__namespace._("Choose %(numCorrect)s answers:", {
-        numCorrect: numCorrect
+      return strings.chooseNumAnswers({
+        numCorrect: String(numCorrect)
       });
     }
-    return i18n__namespace._("Choose all answers that apply:");
+    return strings.chooseAllAnswers;
   }
-  return i18n__namespace._("Choose 1 answer:");
+  return strings.chooseOneAnswer;
 }
 const BaseRadio = function (props) {
   const {
@@ -23474,6 +23862,9 @@ const BaseRadio = function (props) {
     isLastUsedWidget,
     registerFocusFunction
   } = props;
+  const {
+    strings
+  } = usePerseusI18n();
 
   // useEffect doesn't have previous props
   const prevReviewModeRubric = React.useRef();
@@ -23580,7 +23971,7 @@ const BaseRadio = function (props) {
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
   const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
   const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
-  const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
+  const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
   const responsiveClassName = aphrodite.css(styles$t.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
@@ -23803,8 +24194,9 @@ const styles$t = aphrodite.StyleSheet.create({
 // RenderProps is the return type for radio.jsx#transform
 
 class Radio$1 extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'focusFunction' has no initializer and is not definitely assigned in the constructor.
-
+  focusFunction;
   static defaultProps = {
     choices: [],
     multipleSelect: false,
@@ -23813,7 +24205,7 @@ class Radio$1 extends React__namespace.Component {
     linterContext: PerseusLinter.linterContextDefault,
     showSolutions: "none"
   };
-  static validate(userInput, rubric) {
+  static validate(userInput, rubric, strings) {
     const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
       return sum + (selected ? 1 : 0);
     }, 0);
@@ -23826,7 +24218,7 @@ class Radio$1 extends React__namespace.Component {
     if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
       return {
         type: "invalid",
-        message: i18n__namespace._("Please choose the correct number of answers.")
+        message: strings.chooseCorrectNum
       };
       // If NOTA and some other answer are checked, ...
     }
@@ -23834,7 +24226,7 @@ class Radio$1 extends React__namespace.Component {
     if (userInput.noneOfTheAboveSelected && numSelected > 1) {
       return {
         type: "invalid",
-        message: i18n__namespace._("'None of the above' may not be selected " + "when other answers are selected.")
+        message: strings.notNoneOfTheAbove
       };
     }
     const correct = userInput.choicesSelected.every((selected, i) => {
@@ -23968,7 +24360,8 @@ class Radio$1 extends React__namespace.Component {
           ..._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
       });
     };
   })();
@@ -24041,7 +24434,7 @@ class Radio$1 extends React__namespace.Component {
     return Radio$1.getUserInputFromProps(this.props);
   };
   simpleValidate = rubric => {
-    return Radio$1.validate(this.getUserInput(), rubric);
+    return Radio$1.validate(this.getUserInput(), rubric, this.context.strings);
   };
 
   /**
@@ -24110,6 +24503,9 @@ class Radio$1 extends React__namespace.Component {
     const {
       choices
     } = this.props;
+    const {
+      strings
+    } = this.context;
     let choiceStates;
     if (this.props.static) {
       choiceStates = choices.map(choice => ({
@@ -24164,11 +24560,7 @@ class Radio$1 extends React__namespace.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__namespace._("None of the above") : choice.content;
+      const content = choice.isNoneOfTheAbove && !choice.content ? strings.noneOfTheAbove : choice.content;
       const {
         selected,
         crossedOut,
@@ -24226,14 +24618,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__namespace._("False"), i18n__namespace._("True")], [i18n__namespace._("No"), i18n__namespace._("Yes")]];
-
 // Transforms the choices for display.
-const _choiceTransform = (widgetOptions, problemNum) => {
+const _choiceTransform = (widgetOptions, strings, problemNum) => {
   const _maybeRandomize = function (array) {
     const randomSeed = problemNum === undefined ? random : problemNum;
     // NOTE: `problemNum` will only be set when the radio widget is
@@ -24262,6 +24648,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 => ___default["default"].isEqual(content, reversed))) {
       return [choices[1], choices[0]];
@@ -24288,8 +24679,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 = ___default["default"].reduce(widgetOptions.choices, function (memo, choice) {
     return choice.correct ? memo + 1 : memo;
   }, 0);
@@ -24362,6 +24753,7 @@ const WidgetJsonifyDeprecated = {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class Categorizer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     items: [],
     categories: [],
@@ -24410,7 +24802,8 @@ class Categorizer extends React__namespace.Component {
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }))), /*#__PURE__*/React__namespace.createElement("tbody", null, indexedItems.map(indexedItem => {
       const item = indexedItem[0];
@@ -24422,7 +24815,8 @@ class Categorizer extends React__namespace.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__namespace.createElement("td", {
@@ -24466,9 +24860,9 @@ class Categorizer extends React__namespace.Component {
     this.props.trackInteraction();
   }
   simpleValidate = rubric => {
-    return Categorizer.validate(this.getUserInput(), rubric);
+    return Categorizer.validate(this.getUserInput(), rubric, this.context.strings);
   };
-  static validate(userInput, rubric) {
+  static validate(userInput, rubric, strings) {
     let completed = true;
     let allCorrect = true;
     rubric.values.forEach((value, i) => {
@@ -24482,7 +24876,7 @@ class Categorizer extends React__namespace.Component {
     if (!completed) {
       return {
         type: "invalid",
-        message: i18n__namespace._("Make sure you select something for every row.")
+        message: strings.invalidSelection
       };
     }
     return {
@@ -24796,6 +25190,7 @@ var CSProgram$1 = {
 // TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
 
 class Definition extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     togglePrompt: "define me",
     definition: "definition goes here"
@@ -24828,7 +25223,8 @@ class Definition extends React__namespace.Component {
         }, /*#__PURE__*/React__namespace.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),
@@ -24874,6 +25270,7 @@ var Definition$1 = {
 // The props are type `any` on purpose so that this can receive props
 // from any deprecated widget
 class DeprecatedStandin extends React__default["default"].Component {
+  static contextType = PerseusI18nContext;
   static validate(userInput, rubric) {
     // Since this mean to replace an existing widget the learner
     // WILL earn points for this widget
@@ -24897,7 +25294,7 @@ class DeprecatedStandin extends React__default["default"].Component {
         paddingBottom: 8
       }
     }, /*#__PURE__*/React__default["default"].createElement(Banner__default["default"], {
-      text: i18n__namespace._("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"
     }));
@@ -25014,6 +25411,7 @@ function mediaQueryIsMatched(mediaQuery) {
   return window.matchMedia(mediaQuery).matches;
 }
 class Explanation extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     showPrompt: "Explain",
     hidePrompt: "Hide explanation",
@@ -25098,7 +25496,8 @@ class Explanation extends React__namespace.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
     })))));
   }
   getUserInput = () => {
@@ -25161,6 +25560,7 @@ var Explanation$1 = {
 };
 
 class GradedGroupAnswerBar extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   render() {
     const {
       apiOptions,
@@ -25168,6 +25568,13 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       onCheckAnswer,
       onNextQuestion
     } = this.props;
+    const {
+      keepTrying,
+      tryAgain,
+      check,
+      correctExcited,
+      nextQuestion
+    } = this.context.strings;
     const answerBarStyle = {
       ...styles$o.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? wonderBlocksTokens.color.offWhite : "white",
@@ -25182,10 +25589,10 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       style: {
         marginLeft: 8
       }
-    }, i18n__namespace._("Keep trying"))) : /*#__PURE__*/React__namespace.createElement("span", null); // empty span keeps the button on the right side
+    }, keepTrying)) : /*#__PURE__*/React__namespace.createElement("span", null); // empty span keeps the button on the right side
 
     if (answerBarState !== "CORRECT") {
-      const buttonLabel = answerBarState === "INCORRECT" ? i18n__namespace._("Try again") : i18n__namespace._("Check");
+      const buttonLabel = answerBarState === "INCORRECT" ? tryAgain : check;
       return /*#__PURE__*/React__namespace.createElement("div", {
         style: answerBarStyle
       }, message, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
@@ -25208,13 +25615,13 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       }
     }))), /*#__PURE__*/React__namespace.createElement("span", {
       role: "alert",
-      "aria-label": i18n__namespace._("Correct!"),
+      "aria-label": correctExcited,
       style: {
         marginLeft: 8
       }
-    }, i18n__namespace._("Correct!"))), onNextQuestion && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    }, correctExcited)), onNextQuestion && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
       onClick: onNextQuestion
-    }, i18n__namespace._("Next question")));
+    }, nextQuestion));
   }
 }
 const fontSize = 17;
@@ -25270,10 +25677,6 @@ const getNextState = (currentState, answerable) => {
   }
 };
 
-// Prepended to all invalid messages to make the widget messages a bit clearer
-const INVALID_MESSAGE_PREFIX = i18n__namespace._("We couldn't grade your answer.");
-const DEFAULT_INVALID_MESSAGE = i18n__namespace._("It looks like you left something blank or ") + i18n__namespace._("entered in an invalid answer.");
-
 // exports has no 'transform'
 
 // A Graded Group is more or less a Group widget that displays a check
@@ -25281,6 +25684,7 @@ const DEFAULT_INVALID_MESSAGE = i18n__namespace._("It looks like you left someth
 // the stuff inside and displays feedback about whether the inputted answer was
 // correct or not.
 class GradedGroup extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     title: "",
     content: "",
@@ -25342,8 +25746,13 @@ class GradedGroup extends React__namespace.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,
@@ -25405,8 +25814,7 @@ class GradedGroup extends React__namespace.Component {
           color: "#526f03"
         }
       }));
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      gradeStatus = i18n__namespace._("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'.
@@ -25415,8 +25823,7 @@ class GradedGroup extends React__namespace.Component {
           color: "#ff5454"
         }
       }));
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      gradeStatus = i18n__namespace._("Incorrect");
+      gradeStatus = this.context.strings.incorrect;
     }
     const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$n.gradedGroupInSet) : aphrodite.css(styles$n.gradedGroup);
     const classes = classNames__default["default"]({
@@ -25446,7 +25853,8 @@ class GradedGroup extends React__namespace.Component {
         readOnly
       },
       onInteractWithWidget: this._onInteractWithWidget,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })), !apiOptions.isMobile && icon && /*#__PURE__*/React__namespace.createElement("div", {
       className: "group-icon"
     }, icon), !apiOptions.isMobile && gradeStatus && /*#__PURE__*/React__namespace.createElement("div", {
@@ -25460,14 +25868,14 @@ class GradedGroup extends React__namespace.Component {
       kind: "secondary",
       disabled: this.props.apiOptions.readOnly,
       onClick: this._checkAnswer
-    }, i18n__namespace._("Check")), !apiOptions.isMobile && isCorrect && this.props.onNextQuestion && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    }, this.context.strings.check), !apiOptions.isMobile && isCorrect && this.props.onNextQuestion && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
       kind: "secondary",
       disabled: this.props.apiOptions.readOnly,
       onClick: this.props.onNextQuestion,
       style: {
         marginLeft: 5
       }
-    }, i18n__namespace._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
+    }, this.context.strings.nextQuestion), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
       className: aphrodite.css(styles$n.explanationTitle),
@@ -25481,11 +25889,12 @@ class GradedGroup extends React__namespace.Component {
           showHint: false
         });
       }
-    }, i18n__namespace._("Hide explanation")), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props.hint, {
+    }, this.context.strings.hideExplanation), /*#__PURE__*/React__namespace.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.
@@ -25503,7 +25912,7 @@ class GradedGroup extends React__namespace.Component {
         });
       },
       className: aphrodite.css(styles$n.showHintLink)
-    }, i18n__namespace._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
+    }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
       onCheckAnswer: this._checkAnswer,
@@ -25575,6 +25984,7 @@ var GradedGroup$1 = {
 };
 
 class Indicators extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   handleKeyDown = (e, i) => {
     if (e.key === "Enter" || e.key === " ") {
       this.props.onChangeCurrentGroup(i);
@@ -25594,7 +26004,7 @@ class Indicators extends React__namespace.Component {
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
-        "aria-label": i18n__namespace._("Skip to %(title)s", {
+        "aria-label": this.context.strings.skipToTitle({
           title
         }),
         style: styles$m.indicatorButton,
@@ -25612,7 +26022,7 @@ class Indicators extends React__namespace.Component {
           style: styles$m.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
-        }, i18n__namespace._("Current"))));
+        }, this.context.strings.current)));
       }));
     }));
   }
@@ -25624,7 +26034,7 @@ class Indicators extends React__namespace.Component {
 // are currently a little confusing.
 class GradedGroupSet extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property '_childGroup' has no initializer and is not definitely assigned in the constructor.
-
+  _childGroup;
   static defaultProps = {
     gradedGroups: [],
     linterContext: PerseusLinter.linterContextDefault
@@ -25703,7 +26113,7 @@ class GradedGroupSet extends React__namespace.Component {
     }
     const currentGroup = this.props.gradedGroups[this.state.currentGroup];
     if (!currentGroup) {
-      return /*#__PURE__*/React__namespace.createElement("span", null, i18n__namespace.doNotTranslate("No current group..."));
+      return /*#__PURE__*/React__namespace.createElement("span", null, "No current group...");
     }
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
@@ -25826,6 +26236,7 @@ const styles$m = aphrodite.StyleSheet.create({
  * ButtonGroup is an aesthetically pleasing group of buttons.
  */
 class ButtonGroup extends React__namespace.Component {
+  container;
   static defaultProps = {
     value: null,
     allowEmpty: true
@@ -26675,6 +27086,8 @@ class FunctionGrapher extends React__namespace.Component {
 
 /* Widget and editor. */
 class Grapher extends React__namespace.Component {
+  horizHairline;
+  vertHairline;
   static defaultProps = DEFAULT_GRAPHER_PROPS;
   render() {
     const type = this.props.plot.type;
@@ -26881,6 +27294,8 @@ var Grapher$1 = {
 // exports has no 'transform'
 
 class Group extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  rendererRef;
   static defaultProps = {
     content: "",
     widgets: {},
@@ -26997,7 +27412,8 @@ class Group extends React__namespace.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; }>'.
@@ -27202,6 +27618,7 @@ const DEFAULT_ALIGNMENT = "block";
 // there is no transform as part of exports
 
 class ImageWidget extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     alignment: DEFAULT_ALIGNMENT,
     title: "",
@@ -27290,7 +27707,8 @@ class ImageWidget extends React__namespace.Component {
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: this.props.alt,
         apiOptions: apiOptions,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }
 
@@ -27350,7 +27768,8 @@ class ImageWidget extends React__namespace.Component {
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           content: title + this.props.caption,
           apiOptions: apiOptions,
-          linterContext: this.props.linterContext
+          linterContext: this.props.linterContext,
+          strings: this.context.strings
         })));
       }
       return /*#__PURE__*/React__namespace.createElement("figure", {
@@ -27368,7 +27787,8 @@ class ImageWidget extends React__namespace.Component {
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: this.props.title,
         apiOptions: apiOptions,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }
     if (this.props.caption) {
@@ -27380,7 +27800,8 @@ class ImageWidget extends React__namespace.Component {
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: this.props.caption,
         apiOptions: apiOptions,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }
     return /*#__PURE__*/React__namespace.createElement("figure", {
@@ -28050,10 +28471,13 @@ function numSteps$1(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
 class Graph extends React__namespace.Component {
+  protractor;
+  ruler;
+  _graphie;
   // @ts-expect-error - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
-
+  _hasSetupGraphieThisUpdate;
   // @ts-expect-error - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
-
+  _shouldSetupGraphie;
   static defaultProps = {
     labels: ["x", "y"],
     range: [[-10, 10], [-10, 10]],
@@ -28322,6 +28746,123 @@ class Graph extends React__namespace.Component {
   }
 }
 
+// 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,
@@ -28338,7 +28879,7 @@ const LockedLine = props => {
     line = /*#__PURE__*/React__namespace.createElement(LineType, {
       point1: point1.coord,
       point2: point2.coord,
-      color: wonderBlocksTokens.color[color],
+      color: lockedFigureColors[color],
       style: lineStyle
     });
   } else {
@@ -28352,8 +28893,8 @@ const LockedLine = props => {
     y: point1.coord[1],
     svgCircleProps: {
       style: {
-        fill: point1.filled ? wonderBlocksTokens.color[point1.color] : wonderBlocksTokens.color.white,
-        stroke: wonderBlocksTokens.color[point1.color],
+        fill: point1.filled ? lockedFigureColors[point1.color] : wonderBlocksTokens.color.white,
+        stroke: lockedFigureColors[point1.color],
         strokeWidth: wonderBlocksTokens.spacing.xxxxSmall_2
       }
     }
@@ -28362,8 +28903,8 @@ const LockedLine = props => {
     y: point2.coord[1],
     svgCircleProps: {
       style: {
-        fill: point2.filled ? wonderBlocksTokens.color[point2.color] : wonderBlocksTokens.color.white,
-        stroke: wonderBlocksTokens.color[point2.color],
+        fill: point2.filled ? lockedFigureColors[point2.color] : wonderBlocksTokens.color.white,
+        stroke: lockedFigureColors[point2.color],
         strokeWidth: wonderBlocksTokens.spacing.xxxxSmall_2
       }
     }
@@ -28382,8 +28923,8 @@ const LockedPoint = props => {
     y: y,
     svgCircleProps: {
       style: {
-        fill: filled ? wonderBlocksTokens.color[color] : wonderBlocksTokens.color.white,
-        stroke: wonderBlocksTokens.color[color],
+        fill: filled ? lockedFigureColors[color] : wonderBlocksTokens.color.white,
+        stroke: lockedFigureColors[color],
         strokeWidth: wonderBlocksTokens.spacing.xxxxSmall_2
       }
     }
@@ -28739,7 +29280,8 @@ const MovableLine = props => {
 const defaultGraphConfig = {
   range: [[0, 1], [0, 1]],
   snapStep: [1, 1],
-  markings: "none"
+  markings: "none",
+  showTooltips: false
 };
 const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -28753,7 +29295,8 @@ const StyledMovablePoint = props => {
   const {
     range,
     snapStep,
-    markings
+    markings,
+    showTooltips
   } = useGraphConfig();
   const hitboxRef = React.useRef(null);
   const {
@@ -28761,6 +29304,13 @@ const StyledMovablePoint = props => {
     onMove,
     color = wonderBlocksTokens.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(wonderBlocksTokens.color).find(_ref => {
+    let [_, value] = _ref;
+    return value === color;
+  })?.[0] ?? "blue";
   const {
     dragging
   } = mafs.useMovable({
@@ -28778,19 +29328,20 @@ const StyledMovablePoint = props => {
   const [[_, horizontalStartY]] = useTransform([0, yMin]);
   const [[__, horizontalEndY]] = useTransform([0, yMax]);
   const showHairlines = dragging && markings !== "none";
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
+  const hairlines = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
     x1: verticalStartX,
     y1: y,
     x2: verticalEndX,
     y2: y,
-    stroke: wonderBlocksTokens.color.green
+    stroke: color
   }), /*#__PURE__*/React__namespace.createElement("line", {
     x1: x,
     y1: horizontalStartY,
     x2: x,
     y2: horizontalEndY,
-    stroke: wonderBlocksTokens.color.green
-  })), /*#__PURE__*/React__namespace.createElement("g", {
+    stroke: color
+  }));
+  const svgForPoint = /*#__PURE__*/React__namespace.createElement("g", {
     ref: hitboxRef,
     className: pointClasses,
     tabIndex: 0,
@@ -28823,7 +29374,15 @@ const StyledMovablePoint = props => {
       fill: color
     },
     "data-testid": "movable-point__center"
-  })));
+  }));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+    autoUpdate: true,
+    backgroundColor: wbColorName,
+    content: `(${point[0]}, ${point[1]})`,
+    contentStyle: {
+      color: "white"
+    }
+  }, svgForPoint) : svgForPoint);
 };
 
 const SegmentGraph = props => {
@@ -29727,6 +30286,7 @@ const getNumericFormat = KhanMath.getNumericFormat;
  * Optionally takes a size ("mini", "small", "normal")
  */
 class NumberInput extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static propTypes = {
     value: PropTypes__default["default"].number,
     format: PropTypes__default["default"].string,
@@ -29813,7 +30373,7 @@ class NumberInput extends React__namespace.Component {
       const placeholder = this.props.placeholder;
       return ___default["default"].isFinite(placeholder) ? +placeholder : null;
     }
-    const result = firstNumericalParse(value);
+    const result = firstNumericalParse(value, this.context.strings);
     return ___default["default"].isFinite(result) ? result : this.props.value;
   };
 
@@ -29844,7 +30404,7 @@ class NumberInput extends React__namespace.Component {
     if (value == null) {
       return true;
     }
-    const val = firstNumericalParse(value);
+    const val = firstNumericalParse(value, this.context.strings);
     const checkValidity = this.props.checkValidity;
     return ___default["default"].isFinite(val) && checkValidity(val);
   };
@@ -30643,7 +31203,8 @@ const MafsGraph = props => {
     value: {
       range: state.range,
       snapStep: state.snapStep,
-      markings: props.markings
+      markings: props.markings,
+      showTooltips: !!props.showTooltips
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -30744,10 +31305,25 @@ const makeInvalidTypeError = (functionName, graphType) => {
 // There's no transform function in exports
 
 class LegacyInteractiveGraph extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  angle;
+  circle;
+  graphie;
+  horizHairline;
+  line;
+  lines;
+  parabola;
+  pointA;
+  pointB;
+  pointC;
   // @ts-expect-error - TS2564 - Property 'points' has no initializer and is not definitely assigned in the constructor.
-
+  points;
+  polygon;
   // @ts-expect-error - TS2564 - Property 'shouldResetGraphie' has no initializer and is not definitely assigned in the constructor.
-
+  shouldResetGraphie;
+  sinusoid;
+  trashCan;
+  vertHairline;
   static defaultProps = {
     labels: ["x", "y"],
     range: [[-10, 10], [-10, 10]],
@@ -31885,9 +32461,9 @@ class LegacyInteractiveGraph extends React__namespace.Component {
     // isClickToAddPoints() only applies to points and polygons
     if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
       if (this.props.graph.type === "point") {
-        instructions = i18n__namespace._("Click to add points");
+        instructions = this.context.strings.addPoints;
       } else if (this.props.graph.type === "polygon") {
-        instructions = i18n__namespace._("Click to add vertices");
+        instructions = this.context.strings.addVertices;
       }
     } else {
       instructions = undefined;
@@ -31965,7 +32541,8 @@ class InteractiveGraph extends React__namespace.Component {
         ref: this.mafsRef,
         gridStep: gridStep,
         snapStep: snapStep,
-        box: box
+        box: box,
+        showTooltips: !!this.props.showTooltips
       }));
     }
     return /*#__PURE__*/React__namespace.createElement(LegacyInteractiveGraph, _extends({
@@ -33492,6 +34069,9 @@ var globalStyles = /*#__PURE__*/Object.freeze({
 });
 
 const AnswerChoices = props => {
+  const {
+    strings
+  } = usePerseusI18n();
   const onAnswerChange = selected => {
     const {
       choices,
@@ -33511,6 +34091,7 @@ const AnswerChoices = props => {
       value: content,
       label: /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: content,
+        strings: strings,
         inline: true
       })
     });
@@ -33541,14 +34122,13 @@ const AnswerChoices = props => {
   }));
 };
 
-const strings = {
-  hideAnswersToggleLabel: i18n__namespace._("Hide answer choices")
-};
-
 const HideAnswersToggle = props => {
   const idFactory = wonderBlocksCore.useUniqueIdWithMock();
   const switchId = idFactory.get("hide-answers-toggle");
   const labelId = idFactory.get("hide-answers-label");
+  const {
+    strings
+  } = usePerseusI18n();
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$g.switchWrapper
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
@@ -33589,9 +34169,12 @@ const AnswerPill = props => {
     hovered
   } = props;
   const idFactory = wonderBlocksCore.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__namespace.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.
@@ -33620,6 +34203,7 @@ const AnswerPill = props => {
       style: [style, popperStyle, styles$f.pill, correct && styles$f.correct, incorrect && styles$f.incorrect, (focused || hovered) && BringToFront]
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: answerString,
+      strings: strings,
       inline: true
     }));
   });
@@ -33646,8 +34230,9 @@ function shouldReduceMotion() {
 }
 const MARKER_SIZE = 24;
 class Marker extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // The marker icon element.
-
+  _icon;
   static defaultProps = {
     selected: []
   };
@@ -33717,10 +34302,8 @@ class Marker extends React__namespace.Component {
     const markerDisabled = showCorrectness === "correct";
     const active = hovered || focused;
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$e.marker, active && !markerDisabled && styles$e.markerActive]
-      // already translated in: /widgets/graded-group.tsx
-      ,
-      "aria-label": markerDisabled ? i18n__namespace._("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__namespace.createElement(AnswerPill, {
       selectedAnswers: selected,
       showCorrectness: showCorrectness,
@@ -33820,8 +34403,9 @@ const styles$e = aphrodite.StyleSheet.create({
  */
 
 class LabelImage extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // The rendered markers on the question image for labeling.
-
+  _markers;
   static gradeMarker(marker) {
     const score = {
       hasAnswers: false,
@@ -34307,8 +34891,11 @@ class LabelImage extends React__namespace.Component {
       multipleAnswers,
       hideChoicesFromInstructions: hideChoices
     } = this.props;
-    const promptString = isMobile ? multipleAnswers ? i18n__namespace._("Tap each dot on the image to select all answers that apply.") : i18n__namespace._("Tap each dot on the image to select an answer.") : multipleAnswers ? i18n__namespace._("Click each dot on the image to select all answers that apply.") : i18n__namespace._("Click each dot on the image to select an answer.");
-    const choicesString = i18n__namespace._("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__namespace.createElement("div", {
       className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$d.instructions))
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -34319,7 +34906,8 @@ class LabelImage extends React__namespace.Component {
       className: aphrodite.css(styles$d.instructionsChoice),
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-      content: choice
+      content: choice,
+      strings: strings
     })))));
   }
   render() {
@@ -34494,12 +35082,13 @@ class Placeholder extends React__namespace.Component {
 // Usual flow:      Static -> Dragging -> Animating -> Static
 // [Dis|en]abling:  Static|Dragging|Animating -> Disabled -> Static
 class Draggable extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // Handler returned by requestAnimationFrame.
   animationFrameRequest = null;
   // @ts-expect-error - TS2564 - Property 'isMouseMoveUpBound' has no initializer and is not definitely assigned in the constructor.
-
+  isMouseMoveUpBound;
   // @ts-expect-error - TS2564 - Property '_mounted' has no initializer and is not definitely assigned in the constructor.
-
+  _mounted;
   static defaultProps = {
     includePadding: true,
     type: ItemState.STATIC,
@@ -34602,7 +35191,8 @@ class Draggable extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.content,
       linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "draggable"),
-      onRender: this.props.onRender
+      onRender: this.props.onRender,
+      strings: this.context.strings
     }));
   }
   componentDidUpdate(prevProps) {
@@ -35156,6 +35746,7 @@ const {
 } = Util;
 const HACKY_CSS_CLASSNAME = "perseus-widget-matcher";
 class Matcher extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static propTypes = {
     apiOptions: ApiOptions.propTypes,
     labels: PropTypes__default["default"].array,
@@ -35235,12 +35826,14 @@ class Matcher extends React__namespace.Component {
       className: aphrodite.css(styles$b.column, styles$b.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[0] || "...",
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })), /*#__PURE__*/React__namespace.createElement("th", {
       className: aphrodite.css(styles$b.column, styles$b.columnRight, styles$b.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[1] || "...",
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     }))), /*#__PURE__*/React__namespace.createElement("tr", {
       className: aphrodite.css(styles$b.row)
     }, /*#__PURE__*/React__namespace.createElement("td", {
@@ -35452,8 +36045,9 @@ const getMatrixSize = function (matrix) {
   return matrixSize;
 };
 class Matrix extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'cursorPosition' has no initializer and is not definitely assigned in the constructor.
-
+  cursorPosition;
   static defaultProps = {
     matrixBoardSize: [3, 3],
     answers: [[]],
@@ -35463,6 +36057,57 @@ class Matrix extends React__namespace.Component {
     apiOptions: ApiOptions.defaults,
     linterContext: PerseusLinter.linterContextDefault
   };
+  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;
+    ___default["default"](suppliedSize[0]).times(row => {
+      ___default["default"](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
+    };
+  }
   state = {
     enterTheMatrix: 0
   };
@@ -35505,7 +36150,8 @@ class Matrix extends React__namespace.Component {
       className: "matrix-prefix"
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.prefix,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "matrix-input"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -35620,7 +36266,8 @@ class Matrix extends React__namespace.Component {
       className: "matrix-suffix"
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.suffix,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     })));
   }
   getInputPaths = () => {
@@ -35759,63 +36406,9 @@ class Matrix extends React__namespace.Component {
     };
   };
   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);
   };
 }
-___default["default"].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;
-    ___default["default"](suppliedSize[0]).times(row => {
-      ___default["default"](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__namespace._("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 = ___default["default"](editorProps.matrixBoardSize[0]).times(function () {
@@ -36779,6 +37372,7 @@ const parse$1 = SmilesParser.parse;
 const ParseError = SmilesParser.ParseError;
 const borderSize = 30;
 class Molecule extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   state = {
     parsedSmiles: null,
     error: null
@@ -36855,8 +37449,8 @@ class Molecule extends React__namespace.Component {
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "canvas"
-    }, i18n__namespace.$_("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__namespace.createElement("div", {
@@ -37035,6 +37629,7 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   return results;
 });
 class NumberLine extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     range: [0, 10],
     labelStyle: "decimal",
@@ -37347,18 +37942,21 @@ class NumberLine extends React__namespace.Component {
     return NumberLine.validate(this.getUserInput(), rubric);
   };
   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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "button",
       className: "simple-button",
-      value: i18n__namespace._("Switch direction"),
+      value: strings.switchDirection,
       onClick: this.handleReverse
     }), /*#__PURE__*/React__namespace.createElement("input", {
       type: "button",
       className: "simple-button",
-      value: ___default["default"](["le", "ge"]).contains(this.props.rel) ? i18n__namespace._("Make circle open") : i18n__namespace._("Make circle filled"),
+      value: ___default["default"](["le", "ge"]).contains(this.props.rel) ? strings.circleOpen : strings.circleFilled,
       onClick: this.handleToggleStrict
     }));
     let tickCtrl;
@@ -37369,7 +37967,7 @@ class NumberLine extends React__namespace.Component {
       } else {
         Input = NumberInput;
       }
-      tickCtrl = /*#__PURE__*/React__namespace.createElement("label", null, i18n__namespace._("Number of divisions:"), " ", /*#__PURE__*/React__namespace.createElement(Input
+      tickCtrl = /*#__PURE__*/React__namespace.createElement("label", null, strings.numDivisions, " ", /*#__PURE__*/React__namespace.createElement(Input
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "tick-ctrl",
@@ -37386,9 +37984,9 @@ class NumberLine extends React__namespace.Component {
       className: "perseus-widget " + "perseus-widget-interactive-number-line"
     }, tickCtrl, !this.isValid() ? /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-error"
-    }, i18n__namespace.doNotTranslate("Invalid number line configuration.")) : this.props.isTickCtrl && invalidNumDivisions ? /*#__PURE__*/React__namespace.createElement("div", {
+    }, "Invalid number line configuration.") : this.props.isTickCtrl && invalidNumDivisions ? /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-error"
-    }, i18n__namespace.$_("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);
   }
@@ -37520,8 +38118,9 @@ const PropTypePosition = PropTypes__default["default"].shape({
   top: PropTypes__default["default"].number
 });
 class Card extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'mouseMoveUpBound' has no initializer and is not definitely assigned in the constructor.
-
+  mouseMoveUpBound;
   static propTypes = {
     floating: PropTypes__default["default"].bool.isRequired,
     animating: PropTypes__default["default"].bool,
@@ -37580,7 +38179,8 @@ class Card extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: className.join(" ")
     }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     }))));
   }
   shouldComponentUpdate(nextProps, nextState) {
@@ -38853,6 +39453,7 @@ const styles$8 = aphrodite.StyleSheet.create({
 
 /* eslint-disable react/no-unsafe */
 class HighlightSetRenderer extends React__namespace.PureComponent {
+  static contextType = PerseusI18nContext;
   state = {
     hoveredHighlightKey: null,
     hoveringTooltipFor: null
@@ -38942,7 +39543,7 @@ class HighlightSetRenderer extends React__namespace.PureComponent {
     }
     const hoveredHighlight = this.props.highlights[hoveredHighlightKey];
     return /*#__PURE__*/React__namespace.createElement(HighlightTooltip, {
-      label: i18n__namespace._("Remove highlight"),
+      label: this.context.strings.removeHighlight,
       focusNode: hoveredHighlight.domRange.endContainer,
       focusOffset: hoveredHighlight.domRange.endOffset,
       offsetParent: this.props.offsetParent,
@@ -39113,6 +39714,7 @@ class SelectionTracker extends React__namespace.PureComponent {
  *     `HighlightingUI`.
  */
 class HighlightingUI extends React__namespace.PureComponent {
+  static contextType = PerseusI18nContext;
   _handleAddHighlight(highlightToAdd) {
     this.props.onAddHighlight(highlightToAdd);
 
@@ -39169,7 +39771,7 @@ class HighlightingUI extends React__namespace.PureComponent {
       onRemoveHighlight: this.props.onRemoveHighlight,
       zIndexes: this.props.zIndexes
     }), this._selectionIsValid(trackedSelection) && !userIsMouseSelecting && /*#__PURE__*/React__namespace.createElement(HighlightTooltip, {
-      label: i18n__namespace._("Add highlight"),
+      label: this.context.strings.addHighlight,
       onClick: () => this._handleAddHighlight(trackedSelection.proposedHighlight),
       focusNode: trackedSelection.focusNode,
       focusOffset: trackedSelection.focusOffset,
@@ -39192,6 +39794,7 @@ class HighlightingUI extends React__namespace.PureComponent {
  * them amenable to binary search - see `findBoundaryWordIndex` in ranges.js.
  */
 class WordIndexer extends React__namespace.PureComponent {
+  _container;
   /* eslint-enable react/sort-comp */
 
   componentDidMount() {
@@ -39311,7 +39914,8 @@ class WordIndexer extends React__namespace.PureComponent {
  */
 class HighlightableContent extends React__namespace.PureComponent {
   // References to the mounted container and content divs.
-
+  _container;
+  _content;
   state = {
     wordRanges: []
   };
@@ -39472,7 +40076,7 @@ class RefStart extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("span", {
       style: REF_STYLE
-    }, i18n__namespace.doNotTranslate("_"));
+    }, "_");
   }
 
   // @ts-expect-error - TS2322 - Type '() => React.ReactNode' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
@@ -39484,9 +40088,24 @@ class RefEnd extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("span", {
       style: REF_STYLE
-    }, i18n__namespace.doNotTranslate("_"));
+    }, "_");
   }
 }
+const AltText = _ref => {
+  let {
+    id,
+    number
+  } = _ref;
+  const {
+    strings
+  } = usePerseusI18n();
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    key: "alt-text",
+    className: "perseus-sr-only"
+  }, strings[id]({
+    number
+  }));
+};
 const rules = {
   newline: SimpleMarkdown__default["default"].defaultRules.newline,
   paragraph: SimpleMarkdown__default["default"].defaultRules.paragraph,
@@ -39655,12 +40274,10 @@ const rules = {
         "aria-hidden": "true"
       }, /*#__PURE__*/React__namespace.createElement("span", {
         style: SQUARE_LABEL_STYLE
-      }, node.content)), /*#__PURE__*/React__namespace.createElement("span", {
-        key: "alt-text",
-        className: "perseus-sr-only"
-      }, i18n__namespace.$_("[Marker for question %(number)s]", {
+      }, node.content)), /*#__PURE__*/React__namespace.createElement(AltText, {
+        id: "questionMarker",
         number: node.content
-      })), node.space ? "\u00A0" : null];
+      }), node.space ? "\u00A0" : null];
     }
   },
   circleLabel: {
@@ -39681,12 +40298,10 @@ const rules = {
         "aria-hidden": true
       }, /*#__PURE__*/React__namespace.createElement("span", {
         style: CIRCLE_LABEL_STYLE
-      }, node.content)), /*#__PURE__*/React__namespace.createElement("span", {
-        key: "alt-text",
-        className: "perseus-sr-only"
-      }, i18n__namespace.$_("[Circle marker %(number)s]", {
+      }, node.content)), /*#__PURE__*/React__namespace.createElement(AltText, {
+        id: "circleMarker",
         number: node.content
-      })), node.space ? "\u00A0" : null];
+      }), node.space ? "\u00A0" : null];
     }
   },
   squareBracketRef: {
@@ -39706,12 +40321,10 @@ const rules = {
         key: "visual-brackets",
         className: "perseus-passage-bracket-label",
         "aria-hidden": "true"
-      }, "[", node.content, "]"), /*#__PURE__*/React__namespace.createElement("span", {
-        key: "alt-text",
-        className: "perseus-sr-only"
-      }, i18n__namespace.$_("[Sentence %(number)s]", {
+      }, "[", node.content, "]"), /*#__PURE__*/React__namespace.createElement(AltText, {
+        id: "sentenceMarker",
         number: node.content
-      })), node.space ? "\u00A0" : null];
+      }), node.space ? "\u00A0" : null];
     }
   },
   highlight: {
@@ -39811,6 +40424,7 @@ var PassageMarkdown = {
 // A fake paragraph to measure the line height of the passage,
 // so we can adapt to browser zoom
 class LineHeightMeasurer extends React__namespace.Component {
+  _line;
   measureLineHeight() {
     if (!this._line) {
       return 0;
@@ -39843,10 +40457,13 @@ const styles$6 = aphrodite.StyleSheet.create({
 // Information about a passage reference, used in inter-widgets.
 
 class Passage extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  _contentRef;
+  _lineHeightMeasurerRef;
   // @ts-expect-error - TS2564 - Property '_onResize' has no initializer and is not definitely assigned in the constructor.
-
+  _onResize;
   // @ts-expect-error - TS2564 - Property '_stylesAppiedTimer' has no initializer and is not definitely assigned in the constructor.
-
+  _stylesAppiedTimer;
   static defaultProps = {
     passageTitle: "",
     passageText: "",
@@ -40101,15 +40718,18 @@ class Passage extends React__namespace.Component {
   _renderInstructions(parseState) {
     const firstQuestionNumber = parseState.firstQuestionRef;
     const firstSentenceRef = parseState.firstSentenceRef;
+    const {
+      strings
+    } = this.context;
     let instructions = "";
     if (firstQuestionNumber) {
-      instructions += i18n__namespace._("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__namespace._(" The symbol %(sentenceSymbol)s indicates that the " + "following sentence is referenced in a question.", {
+      instructions += strings.symbolQuestion({
         sentenceSymbol: "[" + firstSentenceRef + "]"
       });
     }
@@ -40155,6 +40775,9 @@ class Passage extends React__namespace.Component {
     return PassageMarkdown.output(parsed);
   }
   render() {
+    const {
+      strings
+    } = this.context;
     let lineNumbers;
     const nLines = this.state.nLines;
     if (this.props.showLineNumbers && nLines) {
@@ -40163,9 +40786,7 @@ class Passage extends React__namespace.Component {
       lineNumbers = ___default["default"].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__namespace._("Line ");
+          const translatedLine = strings.lineLabel;
           return /*#__PURE__*/React__namespace.createElement("span", {
             key: "line-marker",
             className: "line-marker"
@@ -40195,13 +40816,14 @@ class Passage extends React__namespace.Component {
       className: "passage-title"
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.passageTitle,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: strings
     })), lineNumbers && /*#__PURE__*/React__namespace.createElement("div", {
       className: "line-numbers",
       "aria-hidden": true
     }, lineNumbers), !hasTitle && /*#__PURE__*/React__namespace.createElement("h3", {
       className: "perseus-sr-only"
-    }, i18n__namespace._("Beginning of reading passage.")), /*#__PURE__*/React__namespace.createElement("div", {
+    }, strings.beginningPassage), /*#__PURE__*/React__namespace.createElement("div", {
       className: "passage-text"
     }, this.shouldRenderJipt() ?
     /*#__PURE__*/
@@ -40209,16 +40831,17 @@ class Passage extends React__namespace.Component {
     // content to a <Renderer /> which knows how
     // to handle rendering JIPT text.
     React__namespace.createElement(Renderer, {
-      content: this.props.passageText
+      content: this.props.passageText,
+      strings: strings
     }) : this._renderContent(parsedContent)), this._hasFootnotes() && [/*#__PURE__*/React__namespace.createElement("h4", {
       key: "footnote-start",
       className: "perseus-sr-only"
-    }, i18n__namespace._("Beginning of reading passage footnotes.")), /*#__PURE__*/React__namespace.createElement("div", {
+    }, strings.beginningFootnotes), /*#__PURE__*/React__namespace.createElement("div", {
       key: "footnotes",
       className: "footnotes"
     }, this._renderFootnotes())], /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-sr-only"
-    }, i18n__namespace._("End of reading passage.")))));
+    }, strings.endPassage))));
   }
 }
 var Passage$1 = {
@@ -40233,6 +40856,7 @@ var Passage$1 = {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class PassageRefTarget extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     content: "",
     linterContext: PerseusLinter.linterContextDefault
@@ -40270,7 +40894,8 @@ class PassageRefTarget extends React__namespace.Component {
       // inline={true}
       ,
       apiOptions: this.props.apiOptions,
-      linterContext: this.props.linterContext
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
     });
   }
 }
@@ -40295,9 +40920,13 @@ const {
   deepEq
 } = Util;
 class Plotter extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
-
+  shouldSetupGraphie;
   _isMounted = false;
+  horizHairline;
+  hairlineRange;
+  graphie;
   static defaultProps = {
     type: "bar",
     labels: ["", ""],
@@ -40484,11 +41113,11 @@ class Plotter extends React__namespace.Component {
       }
     }
     if ((isBar || isLine) && isMobile && !this.props.static) {
-      self.graphie.dragPrompt = graphie.label([c.dimX / 2, c.dimY / 2], i18n__namespace._("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__namespace._("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);
@@ -41163,7 +41792,7 @@ const HORIZONTAL = "horizontal";
 const VERTICAL = "vertical";
 class Sorter extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-
+  _isMounted;
   static propTypes = {
     apiOptions: ApiOptions.propTypes,
     // eslint-disable-next-line react/forbid-prop-types
@@ -41306,6 +41935,7 @@ const getRefForPath = function (path) {
   return "answer" + row + "," + column;
 };
 class Table extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static propTypes = {
     answers: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)),
     editableHeaders: PropTypes__default["default"].bool,
@@ -41375,7 +42005,8 @@ class Table extends React__namespace.Component {
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: header,
-        linterContext: this.props.linterContext
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
       }));
     }))), /*#__PURE__*/React__namespace.createElement("tbody", null, ___default["default"](rows).times(r => {
       return /*#__PURE__*/React__namespace.createElement("tr", {
@@ -41420,7 +42051,7 @@ class Table extends React__namespace.Component {
   };
   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);
   };
   _handleFocus = inputPath => {
     this.props.onFocus(inputPath);
@@ -41489,7 +42120,7 @@ class Table extends React__namespace.Component {
   };
 }
 ___default["default"].extend(Table, {
-  validate: function (state, rubric) {
+  validate: function (state, rubric, strings) {
     const filterNonEmpty = function (table) {
       return ___default["default"].filter(table, function (row) {
         // Check if row has a cell that is nonempty
@@ -41527,7 +42158,7 @@ ___default["default"].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'.
@@ -41814,6 +42445,11 @@ const str = {
  * @param s A string representation of a floating point.
  */
 class SignificantFigures {
+  order;
+  mantissa;
+  positive;
+  sigFigs;
+  sigDecs;
   constructor(s) {
     this.order = parseOrder(s);
     this.mantissa = parseMantissa(s);
@@ -42222,17 +42858,19 @@ const countSigfigs = function (value) {
  * rolling two second delay, but hidden immediately on further typing.
  */
 class OldUnitInput extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  _errorTimeout;
   static defaultProps = {
     apiOptions: ApiOptions.defaults,
     value: ""
   };
-  static validate(userInput, rubric) {
+  static validate(userInput, rubric, strings) {
     const answer = KAS__namespace.unitParse(rubric.value).expr;
     const guess = KAS__namespace.unitParse(userInput);
     if (!guess.parsed) {
       return {
         type: "invalid",
-        message: i18n__namespace._("I couldn't understand those units.")
+        message: strings.dontUnderstandUnits
       };
     }
 
@@ -42247,8 +42885,7 @@ class OldUnitInput extends React__namespace.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__namespace._("Check your significant figures.");
+      message = strings.checkSigFigs;
     }
 
     // now we need to check that the answer is correct to the precision we
@@ -42267,8 +42904,7 @@ class OldUnitInput extends React__namespace.Component {
       numericallyCorrect = false;
     }
     if (!numericallyCorrect) {
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      message = i18n__namespace._("That answer is numerically incorrect.");
+      message = strings.answerNumericallyIncorrect;
     }
     let kasCorrect;
     const guessUnit = primUnits(guess.expr.simplify());
@@ -42288,8 +42924,7 @@ class OldUnitInput extends React__namespace.Component {
       });
     }
     if (!kasCorrect) {
-      // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-      message = i18n__namespace._("Check your units.");
+      message = strings.checkUnits;
     }
     const correct = kasCorrect && numericallyCorrect && sigfigsCorrect;
     return {
@@ -42385,7 +43020,7 @@ class OldUnitInput extends React__namespace.Component {
     });
   };
   simpleValidate = (rubric, onInputError) => {
-    return OldUnitInput.validate(this.getUserInput(), rubric);
+    return OldUnitInput.validate(this.getUserInput(), rubric, this.context.strings);
   };
   getUserInput = () => {
     return this.props.value;
@@ -42460,7 +43095,7 @@ class OldUnitInput extends React__namespace.Component {
       style: {
         display: "none"
       }
-    }, i18n__namespace._("I don't understand that")));
+    }, this.context.strings.dontUnderstand));
   }
 }
 
@@ -42512,9 +43147,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__namespace.createElement(wonderBlocksCore.View, null, i18n__namespace._("Loading..."));
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.loading);
     case "success":
       {
         const video = result.data?.video;
@@ -42526,14 +43164,14 @@ const VideoTranscriptLink = props => {
           href: "/transcript/" + (video?.contentId || "videoNotFound"),
           target: "_blank",
           className: "visited-no-recolor"
-        }, i18n__namespace._("See video transcript")));
+        }, strings.videoTranscript));
       }
     case "error":
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, i18n__namespace._("Something went wrong."));
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
     case "aborted":
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, i18n__namespace._("Something went wrong."));
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
     default:
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, i18n__namespace._("Something went wrong."));
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
   }
 };
 const styles$4 = aphrodite.StyleSheet.create({
@@ -42561,6 +43199,7 @@ const IS_VIMEO = /(vimeo\.com)/;
  * Video renderer.
  */
 class Video extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   /**
    * This is the widget's grading function.
    * Points for videos are tallied by the embedded video itself, in the case
@@ -42628,7 +43267,7 @@ class Video extends React__namespace.Component {
       key: location + this.props.alignment
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: a11y.srOnly
-    }, i18n__namespace._("Khan Academy video wrapper")), /*#__PURE__*/React__namespace.createElement("iframe", {
+    }, this.context.strings.videoWrapper), /*#__PURE__*/React__namespace.createElement("iframe", {
       // TODO(joshuan): Consider not using iframes when we're
       // loading this from webapp. This iframe is problematic
       // for screenreaders.
@@ -42692,7 +43331,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "21.6.0";
+const libVersion = "22.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42711,6 +43350,8 @@ const ItemVersion = getVersionVector();
 ItemVersion["::renderer::"] = itemDataVersion;
 
 class ArticleRenderer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  _currentFocus;
   sectionRenderers = [];
   static defaultProps = {
     apiOptions: ApiOptions.defaults,
@@ -42866,8 +43507,9 @@ class ArticleRenderer extends React__namespace.Component {
           }
         },
         linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "article"),
-        legacyPerseusLint: this.props.legacyPerseusLint
-      }, this.props.dependencies)));
+        legacyPerseusLint: this.props.legacyPerseusLint,
+        strings: this.context.strings
+      })));
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
@@ -42879,6 +43521,7 @@ class ArticleRenderer extends React__namespace.Component {
 
 /* Renders just a hint preview */
 class HintRenderer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     linterContext: PerseusLinter__namespace.linterContextDefault
   };
@@ -42924,7 +43567,7 @@ class HintRenderer extends React__namespace.Component {
         tabIndex: "-1"
       }, !apiOptions.isMobile && /*#__PURE__*/React__namespace.createElement("span", {
         className: "perseus-sr-only"
-      }, i18n__namespace._("Hint #%(pos)s", {
+      }, this.context.strings.hintPos({
         pos: pos + 1
       })), !apiOptions.isMobile && totalHints != null && pos != null && /*#__PURE__*/React__namespace.createElement("span", {
         className: "perseus-hint-label",
@@ -42941,7 +43584,8 @@ class HintRenderer extends React__namespace.Component {
         images: hint.images,
         apiOptions: rendererApiOptions,
         findExternalWidgets: this.props.findExternalWidgets,
-        linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hint")
+        linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hint"),
+        strings: this.context.strings
       }))
     );
   }
@@ -42976,6 +43620,7 @@ const styles$3 = aphrodite.StyleSheet.create({
 // Use of UNSAFE_componentWillReceiveProps:
 // eslint-disable-next-line react/no-unsafe
 class HintsRenderer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     linterContext: PerseusLinter__namespace.linterContextDefault
   };
@@ -43128,7 +43773,7 @@ class HintsRenderer extends React__namespace.Component {
       className: classNames
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
-    }, i18n__namespace._("Hints")), hints, showGetAnotherHint && /*#__PURE__*/React__namespace.createElement("button", {
+    }, this.context.strings.hints), hints, showGetAnotherHint && /*#__PURE__*/React__namespace.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: aphrodite.css(styles$2.linkButton, styles$2.getAnotherHintButton, apiOptions.isMobile && styles$2.mobileHintStylesGetAnotherHintButton),
@@ -43143,7 +43788,7 @@ class HintsRenderer extends React__namespace.Component {
       className: aphrodite.css(styles$2.plusText, apiOptions.isMobile && styles$2.mobileHintStylesPlusText)
     }, "+"), /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(styles$2.getAnotherHintText)
-    }, i18n__namespace._("Get another hint"), " ", hintRatioCopy)));
+    }, this.context.strings.getAnotherHint, " ", hintRatioCopy)));
   }
 }
 const hintIndentation = baseUnitPx + hintBorderWidth;
@@ -43246,8 +43891,13 @@ const {
 } = objective_;
 /* eslint-disable-next-line react/no-unsafe */
 class ServerItemRenderer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
-
+  questionRenderer;
+  hintsRenderer;
+  _currentFocus;
+  _fullyRendered;
+  blurTimeoutID;
   static defaultProps = {
     apiOptions: {},
     // a deep default is done in `this.update()`
@@ -43539,14 +44189,16 @@ class ServerItemRenderer extends React__namespace.Component {
       content: this.props.item.question.content,
       widgets: this.props.item.question.widgets,
       images: this.props.item.question.images,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "question")
+      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "question"),
+      strings: this.context.strings
     }, this.props.dependencies)));
     const hintsRenderer = /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
       hints: this.props.item.hints,
       hintsVisible: this.props.hintsVisible,
       apiOptions: apiOptions,
       ref: elem => this.hintsRenderer = elem,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hints")
+      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "hints"),
+      strings: this.context.strings
     });
     return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
       value: this.props.dependencies
@@ -43719,115 +44371,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 lockedFigureColors = ["purple", "blue", "teal", "green", "gold", "red", "pink"];
-const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
-
 /**
  * Traverses a {content, widgets, images} renderer props object,
  * such as `itemData.question`
@@ -44068,6 +44611,10 @@ var shapes = {
  * TreeMapperForLeavesAndCollections.
  */
 class TreeMapperJustForLeaves {
+  content;
+  hint;
+  tags;
+  array;
   constructor(content, hint, tags) {
     this.content = content;
     this.hint = hint;
@@ -44098,6 +44645,10 @@ class TreeMapperJustForLeaves {
  * ContentMapper and HintMapper are now locked in.
  */
 class TreeMapperForLeavesAndCollections {
+  content;
+  hint;
+  tags;
+  array;
   constructor(content, hint, tags, array) {
     this.content = content;
     this.hint = hint;
@@ -44356,6 +44907,9 @@ function treeToItem(node) {
 // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 class MultiRenderer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  rendererDataTreeMapper;
+  getRenderersMapper;
   constructor(props) {
     super(props);
     this.rendererDataTreeMapper = buildMapper()
@@ -44430,7 +44984,10 @@ class MultiRenderer extends React__namespace.Component {
       onSerializedStateUpdated: _____,
       ...otherProps
     } = this.props;
-    return otherProps;
+    return {
+      ...otherProps,
+      strings: this.context.strings
+    };
   }
 
   /**
@@ -44679,7 +45236,7 @@ class MultiRenderer extends React__namespace.Component {
     if (this.state.renderError) {
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: aphrodite.css(styles.error)
-      }, i18n__namespace.$_("Error rendering: %(error)s", {
+      }, this.context.strings.errorRendering({
         error: String(this.state.renderError)
       }));
     }
@@ -45821,6 +46378,8 @@ exports.MultiItems = MultiItems;
 exports.NumericInput = NumericInput$1;
 exports.PerseusError = PerseusError;
 exports.PerseusExpressionAnswerFormConsidered = PerseusExpressionAnswerFormConsidered;
+exports.PerseusI18nContext = PerseusI18nContext;
+exports.PerseusI18nContextProvider = PerseusI18nContextProvider;
 exports.PerseusMarkdown = PerseusMarkdown;
 exports.PlotterWidget = Plotter$1;
 exports.QUESTION_WIDGETS = QUESTION_WIDGETS;
@@ -45881,6 +46440,7 @@ exports.registerAllWidgetsForTesting = registerAllWidgetsForTesting;
 exports.shapes = shapes;
 exports.shouldHaveIndividualAnswer = shouldHaveIndividualAnswer;
 exports.traverse = traverse;
+exports.usePerseusI18n = usePerseusI18n;
 exports.violatingWidgets = violatingWidgets;
 exports.widgets = allWidgets;
 //# sourceMappingURL=index.js.map