@khanacademy/perseus 54.1.0 → 55.0.1

package/dist/es/index.js

@@ -1,16 +1,17 @@
+import _extends from '@babel/runtime/helpers/extends';
 import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
-import { PerseusError, Errors, expressionLogic, getDecimalSeparator, approximateDeepEqual, pluck, CoreWidgetRegistry, getUpgradedWidgetOptions, mapObject, passageRefLogic, radioLogic, shuffle, random, GrapherUtil as GrapherUtil$1, lockedFigureColors, lockedFigureFillStyles, approximateEqual, shuffleMatcher, getMatrixSize, measurerLogic, addLibraryVersionToPerseusDebug, upgradeWidgetInfoToLatestVersion, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
+import { PerseusError, Errors, expressionLogic, getDecimalSeparator, approximateDeepEqual, pluck, CoreWidgetRegistry, getUpgradedWidgetOptions, mapObject, passageRefLogic, radioLogic, shuffle, random, GrapherUtil as GrapherUtil$1, lockedFigureColors, lockedFigureFillStyles, approximateEqual, shuffleMatcher, getMatrixSize, measurerLogic, upgradeWidgetInfoToLatestVersion, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
 export { isFailure, isSuccess, parseAndMigratePerseusArticle, parseAndMigratePerseusItem, parsePerseusItem } from '@khanacademy/perseus-core';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
 import { View, RenderStateRoot, Id, useOnMountEffect, useLatestRef, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
-import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
+import Tooltip, { TooltipContent } from '@khanacademy/wonder-blocks-tooltip';
 import { HeadingMedium, LabelSmall, LabelLarge, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet, css } from 'aphrodite';
 import classNames$1 from 'classnames';
 import * as React from 'react';
-import React__default, { useContext, useState, useEffect, useRef, createContext, forwardRef, useLayoutEffect, useImperativeHandle, useId } from 'react';
+import React__default, { useContext, forwardRef, useId, useImperativeHandle, useRef, useState, useEffect, createContext, useLayoutEffect } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import _, { debounce as debounce$1 } from 'underscore';
@@ -21,12 +22,16 @@ import $ from 'jquery';
 import { v4 } from 'uuid';
 import PropTypes from 'prop-types';
 import { KhanAnswerTypes, emptyWidgetsFunctional, scoreWidgetsFunctional, flattenScores, inputNumberAnswerTypes, scoreRadio, scoreLabelImageMarker } from '@khanacademy/perseus-score';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { KeypadContext } from '@khanacademy/keypad-context';
+import { TextField } from '@khanacademy/wonder-blocks-form';
 import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import { point, KhanMath, number, vector as vector$3, line, geometry, angles, coefficients } from '@khanacademy/kmath';
+import _classPrivateFieldLooseBase from '@babel/runtime/helpers/classPrivateFieldLooseBase';
+import _classPrivateFieldLooseKey from '@babel/runtime/helpers/classPrivateFieldLooseKey';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
-import { TextField } from '@khanacademy/wonder-blocks-form';
 import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
@@ -44,16 +49,6 @@ import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import cornersOutIcon from '@phosphor-icons/core/regular/corners-out.svg';
 import Link from '@khanacademy/wonder-blocks-link';
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 /**
  * The translated strings that are used to render Perseus.
  */
@@ -262,10 +257,14 @@ const mockStrings = {
     centerX,
     centerY
   }) => `Circle. The center point is at ${centerX} comma ${centerY}.`,
-  srCircleRadiusPoint: ({
+  srCircleRadiusPointRight: ({
     radiusPointX,
     radiusPointY
-  }) => `Radius point at ${radiusPointX} comma ${radiusPointY}.`,
+  }) => `Right radius endpoint at ${radiusPointX} comma ${radiusPointY}.`,
+  srCircleRadiusPointLeft: ({
+    radiusPointX,
+    radiusPointY
+  }) => `Left radius endpoint at ${radiusPointX} comma ${radiusPointY}.`,
   srCircleRadius: ({
     radius
   }) => `Circle radius is ${radius}.`,
@@ -300,13 +299,13 @@ const mockStrings = {
     xIntercept,
     yIntercept
   }) => `The line crosses the X-axis at ${xIntercept} comma 0 and the Y-axis at 0 comma ${yIntercept}.`,
-  srLinearGraphOriginIntercept: "The line crosses the x and y axes at the graph's origin.",
+  srLinearGraphOriginIntercept: "The line crosses the X and Y axes at the graph's origin.",
   srLinearGrabHandle: ({
     point1X,
     point1Y,
     point2X,
     point2Y
-  }) => `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`,
+  }) => `Line going through point ${point1X} comma ${point1Y} and point ${point2X} comma ${point2Y}.`,
   srAngleStartingSide: ({
     x,
     y
@@ -393,6 +392,18 @@ const mockStrings = {
     x,
     y
   }) => `Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`,
+  srLinearSystemGrabHandle: ({
+    lineNumber,
+    point1X,
+    point1Y,
+    point2X,
+    point2Y
+  }) => `Line ${lineNumber} going through point ${point1X} comma ${point1Y} and point ${point2X} comma ${point2Y}.`,
+  srLinearSystemIntersection: ({
+    x,
+    y
+  }) => `Line 1 and line 2 intersect at point ${x} comma ${y}.`,
+  srLinearSystemParallel: "Line 1 and line 2 are parallel.",
   srRayGraph: "A ray on a coordinate plane.",
   srRayPoints: ({
     point1X,
@@ -485,10 +496,18 @@ const mockStrings = {
     x,
     y
   }) => `Midline intersection at ${x} comma ${y}.`,
-  srSinusoidPeakPoint: ({
+  srSinusoidMaxPoint: ({
+    x,
+    y
+  }) => `Maximum point at ${x} comma ${y}.`,
+  srSinusoidMinPoint: ({
     x,
     y
-  }) => `Extremum point at ${x} comma ${y}.`,
+  }) => `Minimum point at ${x} comma ${y}.`,
+  srSinusoidFlatPoint: ({
+    x,
+    y
+  }) => `Line through point at ${x} comma ${y}.`,
   srSinusoidDescription: ({
     minValue,
     maxValue,
@@ -1021,11 +1040,11 @@ const useDependencies = () => {
 };
 
 var dependencies = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  setDependencies: setDependencies,
-  getDependencies: getDependencies,
-  DependenciesContext: DependenciesContext,
-  useDependencies: useDependencies
+    __proto__: null,
+    setDependencies: setDependencies,
+    getDependencies: getDependencies,
+    DependenciesContext: DependenciesContext,
+    useDependencies: useDependencies
 });
 
 /**
@@ -1129,9 +1148,9 @@ const propTypes = {
 };
 
 var changeable = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  change: change,
-  propTypes: propTypes
+    __proto__: null,
+    change: change,
+    propTypes: propTypes
 });
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -1691,7 +1710,7 @@ class Expression extends React.Component {
     }, /*#__PURE__*/React.createElement(View, {
       style: a11y.srOnly,
       role: "alert"
-    }, this.state.showErrorTooltip && ERROR_TITLE + " " + ERROR_MESSAGE), /*#__PURE__*/React.createElement(Tooltip$1, {
+    }, this.state.showErrorTooltip && ERROR_TITLE + " " + ERROR_MESSAGE), /*#__PURE__*/React.createElement(Tooltip, {
       forceAnchorFocusivity: false,
       opened: this.state.showErrorTooltip,
       title: ERROR_TITLE,
@@ -1847,6 +1866,183 @@ var Expression$1 = {
   }
 };
 
+const _excluded$4 = ["keypadElement", "onFocus", "value"];
+class SimpleKeypadInput extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this._isMounted = false;
+    this.inputRef = /*#__PURE__*/React.createRef();
+  }
+  componentDidMount() {
+    // TODO(scottgrant): This is a hack to remove the deprecated call to
+    // this.isMounted() but is still considered an anti-pattern.
+    this._isMounted = true;
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  focus() {
+    var _this$inputRef$curren;
+    // The inputRef is a ref to a MathInput, which
+    // also controls the keypad state during focus events.
+    (_this$inputRef$curren = this.inputRef.current) == null || _this$inputRef$curren.focus(this.context.setKeypadActive);
+  }
+  blur() {
+    var _this$inputRef$curren2;
+    (_this$inputRef$curren2 = this.inputRef.current) == null || _this$inputRef$curren2.blur();
+  }
+  getValue() {
+    return this.props.value;
+  }
+  render() {
+    const _this = this;
+    // Intercept the `onFocus` prop, as we need to configure the keypad
+    // before continuing with the default focus logic for Perseus inputs.
+    // Intercept the `value` prop so as to map `null` to the empty string,
+    // as the `KeypadInput` does not support `null` values.
+    const _this$props = _this.props,
+      {
+        keypadElement,
+        onFocus,
+        value
+      } = _this$props,
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error - TS2769 - No overload matches this call.
+      React.createElement(KeypadInput, _extends({
+        ref: this.inputRef,
+        keypadElement: keypadElement,
+        onFocus: () => {
+          if (keypadElement) {
+            keypadElement.configure({
+              keypadType: KeypadType.FRACTION
+            }, () => {
+              if (_this._isMounted) {
+                onFocus == null || onFocus();
+              }
+            });
+          } else {
+            onFocus == null || onFocus();
+          }
+        },
+        value: value == null ? "" : "" + value
+      }, rest))
+    );
+  }
+}
+
+// @ts-expect-error - TS2339 - Property 'propTypes' does not exist on type 'typeof SimpleKeypadInput'.
+SimpleKeypadInput.contextType = KeypadContext;
+SimpleKeypadInput.propTypes = {
+  keypadElement: keypadElementPropType,
+  onFocus: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+const getPromptJSON$s = (renderProps, userInput) => {
+  return {
+    type: "input-number",
+    options: {
+      simplify: renderProps.simplify,
+      answerType: renderProps.answerType
+    },
+    userInput: {
+      value: userInput.currentValue
+    }
+  };
+};
+
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
+let lastId = 0;
+function uniqueIdForInput(prefix = "input-") {
+  lastId++;
+  return `${prefix}${lastId}`;
+}
+class TextInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = /*#__PURE__*/React.createRef();
+    this.id = void 0;
+    this._getInput = () => {
+      if (!this.inputRef.current) {
+        throw new PerseusError("Input ref accessed before set", Errors.Internal);
+      }
+      return this.inputRef.current;
+    };
+    this.focus = () => {
+      this._getInput().focus();
+    };
+    this.blur = () => {
+      this._getInput().blur();
+    };
+    this.getValue = () => {
+      var _this$inputRef$curren;
+      return (_this$inputRef$curren = this.inputRef.current) == null ? void 0 : _this$inputRef$curren.value;
+    };
+    this.getStringValue = () => {
+      var _this$inputRef$curren2;
+      return (_this$inputRef$curren2 = this.inputRef.current) == null ? void 0 : _this$inputRef$curren2.value.toString();
+    };
+    this.setSelectionRange = (selectionStart, selectionEnd) => {
+      this._getInput().setSelectionRange(selectionStart, selectionEnd);
+    };
+    this.getSelectionStart = () => {
+      return this._getInput().selectionStart;
+    };
+    this.getSelectionEnd = () => {
+      return this._getInput().selectionEnd;
+    };
+    if (props.id) {
+      this.id = props.id;
+    } else {
+      this.id = uniqueIdForInput();
+    }
+  }
+  render() {
+    const {
+      labelText,
+      value,
+      onFocus,
+      onBlur,
+      disabled,
+      placeholder,
+      onKeyDown,
+      style
+    } = this.props;
+    const formattedValue = value === null ? "" : value.toString();
+
+    // Some of our content was saved with empty strings as the label text,
+    // and we don't want to render an empty aria-label attribute.
+    const ariaLabel = labelText || undefined;
+    return /*#__PURE__*/React.createElement(TextField, {
+      ref: this.inputRef,
+      style: style,
+      disabled: disabled,
+      id: this.id,
+      value: formattedValue,
+      type: "text",
+      "aria-label": ariaLabel,
+      "aria-describedby": this.props["aria-describedby"],
+      onChange: value => this.props.onChange(value),
+      placeholder: placeholder,
+      testId: "input-with-examples",
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown
+      // @ts-expect-error - TS2322 - Type '{ style: StyleType; disabled: boolean | undefined; id: string; value: string; type: "text"; "aria-label": string | undefined; onChange: (value: string) => void; placeholder: string | undefined; ... 5 more ...; autoComplete: string; }' is not assignable to type 'IntrinsicAttributes & ExportProps & RefAttributes<HTMLInputElement>'.
+      ,
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      autoComplete: "off"
+    });
+  }
+}
+TextInput.defaultProps = {
+  value: "",
+  disabled: false
+};
+
 /**
  * A React context for keeping track of whether an component is fully
  * loaded.  This is used to know when SvgImage and (Zoomable)TeX are finished
@@ -2411,9 +2607,11 @@ const Util = {
 // TODO(LP-11481): Change the primary API we use for logging in Perseus to use
 // getDependencies() internally... simplify usage to just using a "singleton"
 // which get's the injected logger.
+
 /**
  * Provides logging infrastructure for Perseus
  */
+
 const Log = {
   // Logs a message
   log: (message, extra) => {
@@ -3087,40 +3285,40 @@ const articleMaxWidthInPx = 688;
 const articleMaxWidthTableInPx = 512;
 
 var constants = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  baseFontFamily: baseFontFamily,
-  boldFontFamily: boldFontFamily,
-  kaGreen: kaGreen,
-  white: white,
-  gray97: gray97,
-  gray85: gray85,
-  gray76: gray76,
-  gray68: gray68,
-  gray17: gray17,
-  pureSmMin: pureSmMin$1,
-  pureMdMin: pureMdMin$1,
-  pureLgMin: pureLgMin$1,
-  pureXlMin: pureXlMin$1,
-  pureXsMax: pureXsMax$1,
-  pureSmMax: pureSmMax$1,
-  pureMdMax: pureMdMax$1,
-  pureLgMax: pureLgMax$1,
-  tableBackgroundAccent: tableBackgroundAccent,
-  phoneMargin: phoneMargin,
-  negativePhoneMargin: negativePhoneMargin,
-  hintBorderWidth: hintBorderWidth,
-  baseUnitPx: baseUnitPx,
-  interactiveSizes: interactiveSizes$1,
-  circleSize: circleSize$1,
-  radioMarginWidth: radioMarginWidth$1,
-  warningColor: warningColor,
-  warningColorHover: warningColorHover,
-  warningColorActive: warningColorActive,
-  publishBlockingErrorColor: publishBlockingErrorColor,
-  radioBorderColor: radioBorderColor$1,
-  checkedColor: checkedColor$1,
-  articleMaxWidthInPx: articleMaxWidthInPx,
-  articleMaxWidthTableInPx: articleMaxWidthTableInPx
+    __proto__: null,
+    baseFontFamily: baseFontFamily,
+    boldFontFamily: boldFontFamily,
+    kaGreen: kaGreen,
+    white: white,
+    gray97: gray97,
+    gray85: gray85,
+    gray76: gray76,
+    gray68: gray68,
+    gray17: gray17,
+    pureSmMin: pureSmMin$1,
+    pureMdMin: pureMdMin$1,
+    pureLgMin: pureLgMin$1,
+    pureXlMin: pureXlMin$1,
+    pureXsMax: pureXsMax$1,
+    pureSmMax: pureSmMax$1,
+    pureMdMax: pureMdMax$1,
+    pureLgMax: pureLgMax$1,
+    tableBackgroundAccent: tableBackgroundAccent,
+    phoneMargin: phoneMargin,
+    negativePhoneMargin: negativePhoneMargin,
+    hintBorderWidth: hintBorderWidth,
+    baseUnitPx: baseUnitPx,
+    interactiveSizes: interactiveSizes$1,
+    circleSize: circleSize$1,
+    radioMarginWidth: radioMarginWidth$1,
+    warningColor: warningColor,
+    warningColorHover: warningColorHover,
+    warningColorActive: warningColorActive,
+    publishBlockingErrorColor: publishBlockingErrorColor,
+    radioBorderColor: radioBorderColor$1,
+    checkedColor: checkedColor$1,
+    articleMaxWidthInPx: articleMaxWidthInPx,
+    articleMaxWidthTableInPx: articleMaxWidthTableInPx
 });
 
 /**
@@ -3470,16 +3668,6 @@ const InteractiveUtil = {
   }
 };
 
-function _classPrivateFieldBase(e, t) {
-  if (!{}.hasOwnProperty.call(e, t)) throw new TypeError("attempted to use private field on non-instance");
-  return e;
-}
-
-var id = 0;
-function _classPrivateFieldKey(e) {
-  return "__private_" + id++ + "_" + e;
-}
-
 /*!
  * Raphael 1.5.2 - JavaScript Vector Library
  *
@@ -3536,7 +3724,7 @@ var Raphael$1 = (function () {
     appendChild = "appendChild",
     apply = "apply",
     concat = "concat",
-    supportsTouch = ("createTouch" in doc),
+    supportsTouch = "createTouch" in doc,
     E = "",
     S = " ",
     Str = String,
@@ -5141,10 +5329,10 @@ var Raphael$1 = (function () {
               });
               break;
             case "gradient":
-              (({
+              ({
                 circle: 1,
                 ellipse: 1
-              })[has](o.type) || Str(value).charAt() != "r") && _addGradientFill(node, value, o.paper);
+              }[has](o.type) || Str(value).charAt() != "r") && _addGradientFill(node, value, o.paper);
               break;
             case "opacity":
               if (attrs.gradient && !attrs[has]("stroke-opacity")) {
@@ -7971,8 +8159,8 @@ function polar$2(r, th) {
   th = th * Math.PI / 180;
   return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
 }
-var _bounds = /*#__PURE__*/_classPrivateFieldKey("bounds");
-var _drawingTransform = /*#__PURE__*/_classPrivateFieldKey("drawingTransform");
+var _bounds = /*#__PURE__*/_classPrivateFieldLooseKey("bounds");
+var _drawingTransform = /*#__PURE__*/_classPrivateFieldLooseKey("drawingTransform");
 class Graphie$1 {
   constructor(el) {
     this.el = void 0;
@@ -8177,8 +8365,8 @@ class Graphie$1 {
     if (options.range == null) {
       throw new PerseusError("range should be specified in graph init", Errors.Internal);
     }
-    _classPrivateFieldBase(this, _bounds)[_bounds] = new GraphBounds(...options.range);
-    _classPrivateFieldBase(this, _drawingTransform)[_drawingTransform] = new DrawingTransform(this.raphael, scale, this.bounds());
+    _classPrivateFieldLooseBase(this, _bounds)[_bounds] = new GraphBounds(...options.range);
+    _classPrivateFieldLooseBase(this, _drawingTransform)[_drawingTransform] = new DrawingTransform(this.raphael, scale, this.bounds());
     const [w, h] = this.drawingTransform().canvasDimensions();
     $(this.el).css({
       width: w,
@@ -8413,16 +8601,16 @@ class Graphie$1 {
     }
   }
   drawingTransform() {
-    if (_classPrivateFieldBase(this, _drawingTransform)[_drawingTransform] == null) {
+    if (_classPrivateFieldLooseBase(this, _drawingTransform)[_drawingTransform] == null) {
       throw new Error("Can't get drawingTransform of an uninitialized Graphie");
     }
-    return _classPrivateFieldBase(this, _drawingTransform)[_drawingTransform];
+    return _classPrivateFieldLooseBase(this, _drawingTransform)[_drawingTransform];
   }
   bounds() {
-    if (_classPrivateFieldBase(this, _bounds)[_bounds] == null) {
+    if (_classPrivateFieldLooseBase(this, _bounds)[_bounds] == null) {
       throw new Error("Can't get bounds of an uninitialized Graphie");
     }
-    return _classPrivateFieldBase(this, _bounds)[_bounds];
+    return _classPrivateFieldLooseBase(this, _bounds)[_bounds];
   }
   style(attrs, fn) {
     const processed = this.processAttributes(attrs);
@@ -8973,8 +9161,10 @@ const labelDirections = {
 //   is equivalent to [[-5, 5], [-10, 10]].
 // - A single magnitude to be used for both x and y. E.g. 10 is equivalent to
 //   [[-10, 10], [-10, 10]]
+
 // Overload normalizeRange to specify that it only returns undefined if its
 // argument is undefined.
+
 // normalizeRange converts a RangeSpecifier into a pair of Intervals that give
 // the x and y ranges, respectively
 function normalizeRange(range) {
@@ -9167,7 +9357,7 @@ const GraphUtils = {
     clickBlockList = [],
     blockMouseTriggers = false,
     blockTouchTriggers = false,
-    eventCaptureSupported = ("addEventListener" in document),
+    eventCaptureSupported = "addEventListener" in document,
     $document = $(document),
     nextTouchID = 1,
     lastTouchID = 0;
@@ -9862,7 +10052,6 @@ function scaledPolarRad(radius, radians) {
   return [radius * Math.cos(radians), radius * Math.sin(radians) * -1 // SVG flips y axis
   ];
 }
-
 function scaledPolarDeg(radius, degrees) {
   const radians = degrees * Math.PI / 180;
   return scaledPolarRad(radius, radians);
@@ -11680,7 +11869,6 @@ _.extend(GraphUtils.Graphie.prototype, {
         if (hideArrow) {
           return; // Don't draw anything!
         }
-
         const handleVec = vector$3.subtract(handleCoord, rotatePoint.coord);
         const handlePolar = vector$3.polarDegFromCart(handleVec);
         const angle = handlePolar[1];
@@ -12644,7 +12832,6 @@ _.extend(MovableAngle.prototype, {
     // clockwise to the first point
     coords[1] // the vertex parameter is last
     );
-
     const clockwiseAngle = rawAngle + 360 % 360;
     return clockwiseAngle;
   },
@@ -14018,7 +14205,7 @@ class MovablePoint$5 {
     const showTrashTooltip = () => {
       this._showTooltip(container => {
         // eslint-disable-next-line import/no-deprecated
-        render( /*#__PURE__*/React.createElement("span", {
+        render(/*#__PURE__*/React.createElement("span", {
           style: {
             fontSize: "2em"
           }
@@ -14817,7 +15004,6 @@ const DEFAULT_PROPS = {
   // likewise
   labelStyle: null // likewise
 };
-
 const DEFAULT_STATE = {
   added: false,
   hasMoved: false,
@@ -17468,7 +17654,7 @@ class TranslationLinter {
  * Preprocess TeX code to convert things that MathJax doesn't know how to handle
  * to things is does.
  */
-var preprocessTex = (texCode => texCode
+var preprocessTex = texCode => texCode
 // Replace uses of \begin{align}...\end{align} which KaTeX doesn't
 // support (yet) with \begin{aligned}...\end{aligned} which renders
 // the same is supported by KaTeX.  It does the same for align*.
@@ -17478,7 +17664,7 @@ var preprocessTex = (texCode => texCode
 // "aligned").
 .replace(/\{align[*]?\}/g, "{aligned}")
 // Replace non-breaking spaces with regular spaces.
-.replace(/[\u00a0]/g, " "));
+.replace(/[\u00a0]/g, " ");
 
 const {
   interactiveSizes
@@ -17740,29 +17926,29 @@ const isLintable = type => {
 };
 
 var widgets$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  registerWidget: registerWidget,
-  registerWidgets: registerWidgets,
-  replaceWidget: replaceWidget,
-  replaceDeprecatedWidgets: replaceDeprecatedWidgets,
-  registerEditors: registerEditors,
-  replaceEditor: replaceEditor,
-  replaceDeprecatedEditors: replaceDeprecatedEditors,
-  getWidget: getWidget,
-  getWidgetExport: getWidgetExport,
-  getEditor: getEditor,
-  getTransform: getTransform,
-  getVersion: getVersion,
-  getVersionVector: getVersionVector,
-  getPublicWidgets: getPublicWidgets,
-  isAccessible: isAccessible,
-  getAllWidgetTypes: getAllWidgetTypes,
-  getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
-  traverseChildWidgets: traverseChildWidgets$3,
-  supportsStaticMode: supportsStaticMode,
-  getStaticTransform: getStaticTransform,
-  getTracking: getTracking,
-  isLintable: isLintable
+    __proto__: null,
+    registerWidget: registerWidget,
+    registerWidgets: registerWidgets,
+    replaceWidget: replaceWidget,
+    replaceDeprecatedWidgets: replaceDeprecatedWidgets,
+    registerEditors: registerEditors,
+    replaceEditor: replaceEditor,
+    replaceDeprecatedEditors: replaceDeprecatedEditors,
+    getWidget: getWidget,
+    getWidgetExport: getWidgetExport,
+    getEditor: getEditor,
+    getTransform: getTransform,
+    getVersion: getVersion,
+    getVersionVector: getVersionVector,
+    getPublicWidgets: getPublicWidgets,
+    isAccessible: isAccessible,
+    getAllWidgetTypes: getAllWidgetTypes,
+    getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
+    traverseChildWidgets: traverseChildWidgets$3,
+    supportsStaticMode: supportsStaticMode,
+    getStaticTransform: getStaticTransform,
+    getTracking: getTracking,
+    isLintable: isLintable
 });
 
 class WidgetContainer extends React.Component {
@@ -17805,7 +17991,6 @@ class WidgetContainer extends React.Component {
       /* eslint-enable react/no-did-mount-set-state */
     }
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.type !== nextProps.type) {
       throw new Error("WidgetContainer can't change widget type; set a different " + "key instead to recreate the container.");
@@ -19259,620 +19444,123 @@ const styles$A = {
   }
 };
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-let lastId = 0;
-function uniqueIdForInput(prefix = "input-") {
-  lastId++;
-  return `${prefix}${lastId}`;
-}
-class TextInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = /*#__PURE__*/React.createRef();
-    this.id = void 0;
-    this._getInput = () => {
-      if (!this.inputRef.current) {
-        throw new PerseusError("Input ref accessed before set", Errors.Internal);
+const {
+  captureScratchpadTouchStart: captureScratchpadTouchStart$2
+} = Util;
+// [LEMS-2411](Jan 2025) Third: This component has been moved to the NumericInput
+// folder as we are actively working towards removing the InputNumber widget.
+// This comment can be removed as part of LEMS-2411.
+
+/**
+ * The InputWithExamples component is a child component of the NumericInput
+ * and InputNumber components. It is responsible for rendering the UI elements
+ * for the desktop versions of these widgets, and displays a tooltip with
+ * examples of how to input the selected answer forms.
+ */
+const InputWithExamples = /*#__PURE__*/forwardRef((props, ref) => {
+  // Desctructure the props to set default values
+  const {
+    shouldShowExamples = true,
+    onFocus = () => {},
+    onBlur = () => {},
+    disabled = false,
+    linterContext = PerseusLinter.linterContextDefault,
+    className = ""
+  } = props;
+  const context = React.useContext(PerseusI18nContext);
+  const inputRef = React.useRef(null);
+  const [inputFocused, setInputFocused] = React.useState(false);
+  const id = useId();
+  const ariaId = `aria-for-${id}`;
+  useImperativeHandle(ref, () => ({
+    current: inputRef.current,
+    focus: () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    },
+    blur: () => {
+      if (inputRef.current) {
+        inputRef.current.blur();
       }
-      return this.inputRef.current;
-    };
-    this.focus = () => {
-      this._getInput().focus();
-    };
-    this.blur = () => {
-      this._getInput().blur();
-    };
-    this.getValue = () => {
-      var _this$inputRef$curren;
-      return (_this$inputRef$curren = this.inputRef.current) == null ? void 0 : _this$inputRef$curren.value;
-    };
-    this.getStringValue = () => {
-      var _this$inputRef$curren2;
-      return (_this$inputRef$curren2 = this.inputRef.current) == null ? void 0 : _this$inputRef$curren2.value.toString();
-    };
-    this.setSelectionRange = (selectionStart, selectionEnd) => {
-      this._getInput().setSelectionRange(selectionStart, selectionEnd);
-    };
-    this.getSelectionStart = () => {
-      return this._getInput().selectionStart;
-    };
-    this.getSelectionEnd = () => {
-      return this._getInput().selectionEnd;
-    };
-    if (props.id) {
-      this.id = props.id;
-    } else {
-      this.id = uniqueIdForInput();
     }
-  }
-  render() {
-    const {
-      labelText,
-      value,
-      onFocus,
-      onBlur,
-      disabled,
-      placeholder,
-      onKeyDown,
-      style
-    } = this.props;
-    const formattedValue = value === null ? "" : value.toString();
-    return /*#__PURE__*/React.createElement(TextField, {
-      ref: this.inputRef,
-      style: style,
+  }));
+  const getInputClassName = () => {
+    let inputClassName = ClassNames.INPUT;
+    if (inputFocused) {
+      inputClassName += " " + ClassNames.FOCUSED;
+    }
+    if (className) {
+      inputClassName += " " + className;
+    }
+    return inputClassName;
+  };
+  const handleFocus = () => {
+    onFocus();
+    setInputFocused(true);
+  };
+  const handleBlur = () => {
+    onBlur();
+    setInputFocused(false);
+  };
+  const renderInput = () => {
+    // Generate the provided examples in simple language for screen readers.
+    const examplesAria = props.shouldShowExamples ? `${props.examples[0]}
+                   ${props.examples.slice(1).join(", or\n")}`
+    // @ts-expect-error TS2550: Property replaceAll does not exist on type string.
+    .replaceAll("*", "").replaceAll("$", "").replaceAll("\\ \\text{pi}", " pi").replaceAll("\\ ", " and ") : "";
+    const inputProps = {
+      id: id,
+      // If we have examples, we want to provide the aria-describedby attribute
+      "aria-describedby": props.shouldShowExamples ? ariaId : undefined,
+      ref: inputRef,
+      className: getInputClassName(),
+      labelText: props.labelText,
+      value: props.value,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
       disabled: disabled,
-      id: this.id,
-      value: formattedValue,
-      type: "text",
-      "aria-label": labelText,
-      "aria-describedby": this.props["aria-describedby"],
-      onChange: value => this.props.onChange(value),
-      placeholder: placeholder,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown
-      // @ts-expect-error - TS2322 - Type '{ style: StyleType; disabled: boolean | undefined; id: string; value: string; type: "text"; "aria-label": string | undefined; onChange: (value: string) => void; placeholder: string | undefined; ... 5 more ...; autoComplete: string; }' is not assignable to type 'IntrinsicAttributes & ExportProps & RefAttributes<HTMLInputElement>'.
-      ,
-      autoCorrect: "off",
+      style: props.style,
+      onChange: props.onChange,
+      onTouchStart: captureScratchpadTouchStart$2,
       autoCapitalize: "off",
-      autoComplete: "off"
-    });
-  }
-}
-TextInput.defaultProps = {
-  value: "",
-  disabled: false
-};
-
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-const _excluded$4 = ["position", "visibility", "left", "top"];
-const zIndex = 10;
-let HorizontalDirection = /*#__PURE__*/function (HorizontalDirection) {
-  HorizontalDirection["Left"] = "left";
-  HorizontalDirection["Right"] = "right";
-  return HorizontalDirection;
-}({});
-let VerticalDirection = /*#__PURE__*/function (VerticalDirection) {
-  VerticalDirection["Top"] = "top";
-  VerticalDirection["Bottom"] = "bottom";
-  return VerticalDirection;
-}({});
-const Triangle = props => {
-  let borderLeft;
-  let borderRight;
-  let borderTop;
-  let borderBottom;
-  const hBorder = `${props.width}px solid transparent`;
-  if (props.horizontalDirection === "right") {
-    borderLeft = hBorder;
-  } else {
-    borderRight = hBorder;
-  }
-  const vBorder = `${props.height}px solid ${props.color}`;
-  if (props.verticalDirection === "top") {
-    borderTop = vBorder;
-  } else {
-    borderBottom = vBorder;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "block",
-      height: 0,
-      width: 0,
-      position: "absolute",
-      left: props.left,
-      top: props.top,
-      borderLeft: borderLeft,
-      borderRight: borderRight,
-      borderTop: borderTop,
-      borderBottom: borderBottom
-    }
-  });
-};
-const TooltipArrow = _ref => {
-  let {
-      position = "relative",
-      visibility = "visible",
-      left = 100,
-      top = 0
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  // TODO(aria): Think about adding a box-shadow to the triangle here
-  // See http://css-tricks.com/triangle-with-shadow/
-
-  //const isRight = (this.props.horizontalDirection === "right");
-  const isTop = props.verticalDirection === "top";
-  const frontTopOffset = isTop ? 0 : 1;
-  const borderTopOffset = isTop ? 0 : -1;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "block",
-      position: position,
-      visibility: visibility,
-      left: left,
-      top: top,
-      width: props.width + 2,
-      height: props.height + 1,
-      marginTop: -1,
-      marginBottom: -2,
-      zIndex: zIndex
-    }
-  }, /*#__PURE__*/React.createElement(Triangle, {
-    horizontalDirection: props.horizontalDirection,
-    verticalDirection: props.verticalDirection,
-    color: props.border,
-    left: 0,
-    top: borderTopOffset,
-    width: props.width + 2 // one extra for the diagonal
-    ,
-    height: props.height + 2
-  }), /*#__PURE__*/React.createElement(Triangle, {
-    horizontalDirection: props.horizontalDirection,
-    verticalDirection: props.verticalDirection,
-    color: props.color,
-    left: 1,
-    top: frontTopOffset,
-    width: props.width,
-    height: props.height
-  }));
-};
-const VERTICAL_CORNERS = {
-  top: {
-    top: "-100%"
-  },
-  bottom: {
-    top: 0
-  }
-};
-const HORIZONTAL_CORNERS = {
-  left: {
-    targetLeft: 0
-  },
-  right: {
-    targetLeft: "100%"
-  }
-};
-const HORIZONTAL_ALIGNMNENTS = {
-  left: {
-    tooltipLeft: 0,
-    arrowLeft: arrowSize => 0
-  },
-  right: {
-    tooltipLeft: "-100%",
-    arrowLeft: arrowSize => -arrowSize - 2
-  }
-};
-/**
- * DEPRECATED! Use Wonder Blocks tooltip instead.
- *
- * A generic tooltip library for React.js
- *
- * ```
- * import Tooltip from "./tooltip";
- * <Tooltip
- *     className="class-for-tooltip-contents"
- *     horizontalPosition={HoriziontalDirection.Left}
- *     horizontalAlign={HoriziontalDirection.Left}
- *     verticalPosition={VerticalDirection.Top}
- *     arrowSize={10} // arrow size in pixels
- *     borderColor="#ccc" // color of the border for the tooltip
- *     show={true} // whether the tooltip should currently be visible
- *     targetContainerStyle={targetContainerStyle}
- * >
- *     <TargetElementOfTheTooltip />
- *     <TooltipContents1 />
- *     <TooltipContents2 />
- * </Tooltip>
- * ```
- *
- * To show/hide the tooltip, the parent component should call the
- * `.show()` and `.hide()` methods of the tooltip when appropriate.
- * (These are usually set up as handlers of events on the target element.)
- *
- * Notes:
- *     `className` should not specify a border; that is handled by `borderColor`
- *     so that the arrow and tooltip match
- *
- * ```
- *          __,,--``\\
- *  _,,-''``         \\     ,
- * '----------_.------'-.___|\__
- *    _.--''``    `)__   )__   @\__
- *   (  .. ''---/___,,E/__,E'------`
- *    `-''`''
- * Here be dragons.
- * ```
- */
-class Tooltip extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.tooltipContainerRef = /*#__PURE__*/React.createRef();
-    this.state = {
-      height: null // used for offsetting "top" positioned tooltips
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false"
     };
-  }
-
-  componentDidMount() {
-    this._updateHeight();
-  }
-  UNSAFE_componentWillReceiveProps() {
-    // If the contents have changed, reset our measure of the height
-    this.setState({
-      height: null
-    });
-  }
-  componentDidUpdate() {
-    this._updateHeight();
-  }
-  _renderToolTipDiv(isTooltipAbove) {
-    const settings = Object.assign({}, HORIZONTAL_CORNERS[this.props.horizontalPosition], HORIZONTAL_ALIGNMNENTS[this.props.horizontalAlign], VERTICAL_CORNERS[this.props.verticalPosition]);
-    let arrowAbove;
-    let arrowBelow;
-    if (isTooltipAbove) {
-      // We put an absolutely positioned arrow in the correct place
-      arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: VerticalDirection.Top,
-        horizontalDirection: this.props.horizontalAlign,
-        position: "absolute",
-        color: "white",
-        border: this.props.borderColor,
-        left: settings.arrowLeft(this.props.arrowSize),
-        top: -this.props.arrowSize + 2,
-        width: this.props.arrowSize,
-        height: this.props.arrowSize,
-        zIndex: zIndex
-      });
-
-      // And we use a visibility: hidden arrow below to shift up the
-      // content by the correct amount
-      arrowBelow = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: VerticalDirection.Top,
-        horizontalDirection: this.props.horizontalAlign,
-        visibility: "hidden",
-        color: "white",
-        border: this.props.borderColor,
-        left: settings.arrowLeft(this.props.arrowSize),
-        top: -1,
-        width: this.props.arrowSize,
-        height: this.props.arrowSize,
-        zIndex: zIndex
-      });
-    } else {
-      arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: VerticalDirection.Bottom,
-        horizontalDirection: this.props.horizontalAlign,
-        color: "white",
-        border: this.props.borderColor,
-        left: settings.arrowLeft(this.props.arrowSize),
-        top: -1,
-        width: this.props.arrowSize,
-        height: this.props.arrowSize,
-        zIndex: zIndex
-      });
-      arrowBelow = null;
-    }
-
-    /* A positioned div below the input to be the parent for our
-        tooltip */
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, inputProps), /*#__PURE__*/React.createElement("span", {
+      id: ariaId,
       style: {
-        position: "relative",
-        height: 0,
-        display: this.props.show ? "block" : "none"
+        display: "none"
       }
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: this.tooltipContainerRef,
-      className: "tooltipContainer",
-      role: "tooltip",
-      style: {
-        position: "absolute",
-        // height must start out undefined, not null, so that
-        // we can measure the actual height with jquery.
-        // This is used to position the tooltip with top: -100%
-        // when in verticalPosition: "top" mode
-        height: this.state.height || undefined,
-        left: settings.targetLeft
-      }
-    }, arrowAbove, /*#__PURE__*/React.createElement("div", {
-      className: this.props.className
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "tooltipContent",
-      style: {
-        position: "relative",
-        top: settings["top"],
-        left: settings.tooltipLeft,
-        border: "1px solid " + this.props.borderColor,
-        boxShadow: "0 1px 3px " + this.props.borderColor,
-        zIndex: zIndex - 1
-      }
-    }, this.props.children.slice(1)), arrowBelow));
-  }
-  _updateHeight() {
-    const tooltipContainer = this.tooltipContainerRef.current;
-    const height = (tooltipContainer == null ? void 0 : tooltipContainer.offsetHeight) || 0;
-    if (height !== this.state.height) {
-      this.setState({
-        height
-      });
-    }
-  }
-  render() {
-    const isTooltipAbove = this.props.verticalPosition === "top";
-
-    /* We wrap the entire output in a span so that it displays inline */
-    return /*#__PURE__*/React.createElement("span", null, isTooltipAbove && this._renderToolTipDiv(isTooltipAbove), /*#__PURE__*/React.createElement("div", {
-      style: this.props.targetContainerStyle
-    }, this.props.children[0]), !isTooltipAbove && this._renderToolTipDiv());
-  }
-}
-
-// Sorry.  // Apology-Oriented-Programming
-Tooltip.defaultProps = {
-  className: "",
-  arrowSize: 10,
-  borderColor: "#ccc",
-  verticalPosition: VerticalDirection.Bottom,
-  horizontalPosition: HorizontalDirection.Left,
-  horizontalAlign: HorizontalDirection.Left,
-  targetContainerStyle: {}
-};
-
-const {
-  captureScratchpadTouchStart: captureScratchpadTouchStart$2
-} = Util;
-class InputWithExamples extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      focused: false,
-      showExamples: false
-    };
-    this._getUniqueId = () => {
-      return `input-with-examples-${btoa(this.props.id).replace(/=/g, "")}`;
-    };
-    this._getInputClassName = () => {
-      // Otherwise, we need to add these INPUT and FOCUSED tags here.
-      let className = ClassNames.INPUT;
-      if (this.state.focused) {
-        className += " " + ClassNames.FOCUSED;
-      }
-      if (this.props.className) {
-        className += " " + this.props.className;
-      }
-      return className;
-    };
-    this._renderInput = () => {
-      const id = this._getUniqueId();
-      const ariaId = `aria-for-${id}`;
-      // Generate text from a known set of format options that will read well in a screen reader
-      const examplesAria = this.props.examples.length === 7 ? "" : `${this.props.examples[0]}
-                   ${this.props.examples.slice(1).join(", or\n")}`
-      // @ts-expect-error TS2550: Property replaceAll does not exist on type string.
-      .replaceAll("*", "").replaceAll("$", "").replaceAll("\\ \\text{pi}", " pi").replaceAll("\\ ", " and ");
-      const inputProps = {
-        id: id,
-        "aria-describedby": ariaId,
-        ref: "input",
-        className: this._getInputClassName(),
-        labelText: this.props.labelText,
-        value: this.props.value,
-        onFocus: this._handleFocus,
-        onBlur: this._handleBlur,
-        disabled: this.props.disabled,
-        style: this.props.style,
-        onChange: this.props.onChange,
-        onTouchStart: captureScratchpadTouchStart$2,
-        autoCapitalize: "off",
-        autoComplete: "off",
-        autoCorrect: "off",
-        spellCheck: "false"
-      };
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, inputProps), /*#__PURE__*/React.createElement("span", {
-        id: ariaId,
-        style: {
-          display: "none"
-        }
-      }, examplesAria));
-    };
-    this._handleFocus = () => {
-      this.props.onFocus();
-      this.setState({
-        focused: true,
-        showExamples: true
-      });
-    };
-    this.show = () => {
-      this.setState({
-        showExamples: true
-      });
-    };
-    this.hide = () => {
-      this.setState({
-        showExamples: false
-      });
-    };
-    this._handleBlur = () => {
-      this.props.onBlur();
-      this.setState({
-        focused: false,
-        showExamples: false
-      });
-    };
-    this.focus = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      this.refs.input.focus();
-    };
-    this.blur = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-      this.refs.input.blur();
-    };
-    this.handleChange = e => {
-      this.props.onChange(e.target.value);
-    };
-  }
-  render() {
-    const input = this._renderInput();
-    const examplesContent = this.props.examples.length <= 2 ? this.props.examples.join(" ") // A single item (with or without leading text) is not a "list"
-    : this.props.examples // 2 or more items should display as a list
-    .map((example, index) => {
-      // If the first example is bold, then it is most likely a heading/leading text.
-      // So, it shouldn't be part of the list.
-      return index === 0 && example.startsWith("**") ? `${example}\n` : `- ${example}`;
-    }).join("\n");
-    const showExamples = this.props.shouldShowExamples && this.state.showExamples;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      className: "perseus-formats-tooltip preview-measure",
-      horizontalPosition: HorizontalDirection.Left,
-      horizontalAlign: HorizontalDirection.Left,
-      verticalPosition: VerticalDirection.Bottom,
-      arrowSize: 10,
-      borderColor: "#ccc",
-      show: showExamples
-    }, input, /*#__PURE__*/React.createElement("div", {
-      id: this._getUniqueId()
+    }, examplesAria));
+  };
+  const renderTooltipContent = () => {
+    return /*#__PURE__*/React.createElement(TooltipContent, null, /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: "input-with-examples-tooltip"
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: examplesContent,
-      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "input-with-examples"),
-      strings: this.context.strings
+      linterContext: PerseusLinter.pushContextStack(linterContext, "input-with-examples"),
+      strings: context.strings
     })));
-  }
-}
-InputWithExamples.contextType = PerseusI18nContext;
-InputWithExamples.defaultProps = {
-  shouldShowExamples: true,
-  onFocus: function () {},
-  onBlur: function () {},
-  disabled: false,
-  linterContext: PerseusLinter.linterContextDefault,
-  className: ""
-};
-
-const _excluded$3 = ["keypadElement", "onFocus", "value"];
-class SimpleKeypadInput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._isMounted = false;
-  }
-  componentDidMount() {
-    // TODO(scottgrant): This is a hack to remove the deprecated call to
-    // this.isMounted() but is still considered an anti-pattern.
-    this._isMounted = true;
-  }
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-  focus() {
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-    this.refs.input.focus(); // eslint-disable-line react/no-string-refs
-  }
-
-  blur() {
-    var _this$refs$input;
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-    if (typeof ((_this$refs$input = this.refs.input) == null ? void 0 : _this$refs$input.blur) === "function") {
-      var _this$refs$input2;
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-      (_this$refs$input2 = this.refs.input) == null || _this$refs$input2.blur();
-    }
-  }
-  getValue() {
-    return this.props.value;
-  }
-  render() {
-    const _this = this;
-    // Intercept the `onFocus` prop, as we need to configure the keypad
-    // before continuing with the default focus logic for Perseus inputs.
-    // Intercept the `value` prop so as to map `null` to the empty string,
-    // as the `KeypadInput` does not support `null` values.
-    const _this$props = _this.props,
-      {
-        keypadElement,
-        onFocus,
-        value
-      } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
-    return (
-      /*#__PURE__*/
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      React.createElement(KeypadInput
-      // eslint-disable-next-line react/no-string-refs
-      , _extends({
-        ref: "input",
-        keypadElement: keypadElement,
-        onFocus: () => {
-          if (keypadElement) {
-            keypadElement.configure({
-              keypadType: KeypadType.FRACTION
-            }, () => {
-              if (_this._isMounted) {
-                onFocus == null || onFocus();
-              }
-            });
-          } else {
-            onFocus == null || onFocus();
-          }
-        },
-        value: value == null ? "" : "" + value
-      }, rest))
-    );
-  }
-}
-
-// @ts-expect-error - TS2339 - Property 'propTypes' does not exist on type 'typeof SimpleKeypadInput'.
-SimpleKeypadInput.propTypes = {
-  keypadElement: keypadElementPropType,
-  onFocus: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-
-const getPromptJSON$s = (renderProps, userInput) => {
-  return {
-    type: "input-number",
-    options: {
-      simplify: renderProps.simplify,
-      answerType: renderProps.answerType
-    },
-    userInput: {
-      value: userInput.currentValue
-    }
   };
-};
+  // Display the examples as a string when there are less than or equal to 2 examples.
+  // Otherwise, display the examples as a list.
+  const examplesContent = props.examples.length <= 2 ? props.examples.join(" ") : props.examples.map((example, index) => {
+    return index === 0 && example.startsWith("**") ? `${example}\n` : `- ${example}`;
+  }).join("\n");
+
+  // Display the examples when they are enabled (shouldShowExamples) and the input is focused.
+  const showExamplesTooltip = shouldShowExamples && inputFocused;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: renderTooltipContent(),
+    opened: showExamplesTooltip,
+    placement: "bottom"
+  }, renderInput());
+});
 
-const formExamples$1 = {
+const formExamples = {
   integer: function (options, strings) {
     return strings.integerExample;
   },
@@ -19975,7 +19663,7 @@ class InputNumber extends React.Component {
     } = this.context;
     const type = this.props.answerType;
     const forms = inputNumberAnswerTypes[type].forms.split(/\s*,\s*/);
-    const examples = _.map(forms, form => formExamples$1[form](this.props, strings));
+    const examples = _.map(forms, form => formExamples[form](this.props, strings));
     return [strings.yourAnswer].concat(examples);
   }
   render() {
@@ -20100,7 +19788,11 @@ const getPromptJSON$r = (renderProps, userInput) => {
   };
 };
 
-const formExamples = {
+/**
+ * The full list of available strings for the numeric input widget,
+ * based on whether the Content Creator has specified that the answer must be simplified.
+ */
+const NumericExampleStrings = {
   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,
@@ -20108,38 +19800,200 @@ const formExamples = {
   decimal: (form, strings) => strings.decimalExample,
   pi: (form, strings) => strings.piExample
 };
+
+/**
+ * Generates the specific set of examples for the current question.
+ * This string is shown as examples to the user in a tooltip.
+ */
+const generateExamples = (answerForms, strings) => {
+  // If the Content Creator has not specified any answer forms,
+  // we do not need to show any examples.
+  if (answerForms.length === 0) {
+    return [];
+  }
+
+  // Generate a list of the unique answer forms.
+  const uniqueForms = getUniqueAnswerForms(answerForms);
+
+  // Generate the example strings for each unique form.
+  const examples = uniqueForms.map(form => {
+    return NumericExampleStrings[form.name](form, strings);
+  });
+
+  // Add the "Your answer" string to the beginning of the examples list.
+  return [strings.yourAnswer].concat(examples);
+};
+
+/**
+ * Determines whether to show examples of how to input the various supported answer forms.
+ * We do not show examples if all forms are accepted or if no forms are accepted.
+ */
+const shouldShowExamples = answerForms => {
+  // If the Content Creator has not specified any answer forms,
+  // we do not need to show any examples.
+  if (answerForms.length === 0) {
+    return false;
+  }
+
+  // Generate a list of the unique names of the selected answer forms.
+  const answerFormNames = getUniqueAnswerForms(answerForms).map(form => form.name);
+
+  // If all forms are accepted, we do not need to show any examples.
+  const allFormsAccepted = answerFormNames.length >= Object.keys(NumericExampleStrings).length;
+  return !allFormsAccepted;
+};
+
+/**
+ * uniqueAnswerForms takes a list of answer forms and returns a list of unique
+ * answer forms. This is useful for ensuring that we don't show duplicate examples
+ * to the user.
+ */
+const getUniqueAnswerForms = function getUniqueAnswerForms(list) {
+  // We use a Set to keep track of the forms we've already seen.
+  const foundForms = new Set();
+  return list.filter(form => {
+    // If we've already seen this form, skip it.
+    if (foundForms.has(form.name)) {
+      return false;
+    }
+    // Otherwise, add it to the set and return true.
+    foundForms.add(form.name);
+    return true;
+  });
+};
+
+/**
+ * Takes a list of lists of answer forms, and returns a list of the forms
+ * in each of these lists in the same order that they're listed in the
+ * `formExamples` forms from above.
+ */
+const unionAnswerForms = function unionAnswerForms(answerFormsList) {
+  // Pull out all of the forms from the different lists.
+  const allForms = answerFormsList.flat();
+  // Pull out the unique forms using getUniqueAnswerForms.
+  const uniqueForms = getUniqueAnswerForms(allForms);
+  // Sort them by the order they appear in the `formExamples` list.
+  const formExampleKeys = Object.keys(NumericExampleStrings);
+  return uniqueForms.sort((a, b) => {
+    return formExampleKeys.indexOf(a.name) - formExampleKeys.indexOf(b.name);
+  });
+};
+
+/**
+ * The NumericInputComponent is a child component of the NumericInput class
+ * component. It is responsible for rendering the UI elements of the Numeric
+ * Input widget.
+ */
+const NumericInputComponent = /*#__PURE__*/forwardRef((props, ref) => {
+  const context = useContext(PerseusI18nContext);
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Pass the focus and blur methods to the Numeric Input Class component
+  useImperativeHandle(ref, () => ({
+    current: inputRef.current,
+    focus: () => {
+      if (inputRef.current) {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+        setIsFocused(true);
+      }
+    },
+    blur: () => {
+      if (inputRef.current) {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.blur();
+        setIsFocused(false);
+      }
+    }
+  }));
+  const handleChange = (newValue, cb) => {
+    props.onChange({
+      currentValue: newValue
+    }, cb);
+    props.trackInteraction();
+  };
+  const handleFocus = () => {
+    props.onFocus([]);
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    props.onBlur([]);
+    setIsFocused(false);
+  };
+
+  // Styles for the InputWithExamples
+  const styles = StyleSheet.create({
+    inputWithExamples: {
+      borderRadius: "3px",
+      borderWidth: isFocused ? "2px" : "1px",
+      display: "inline-block",
+      fontFamily: `Symbola, "Times New Roman", serif`,
+      fontSize: "18px",
+      height: "32px",
+      lineHeight: "18px",
+      padding: isFocused ? "4px" : "4px 5px",
+      textAlign: props.rightAlign ? "right" : "left",
+      width: props.size === "small" ? 40 : 80
+    }
+  });
+
+  // (mobile-only) If the custom keypad is enabled, use the SimpleKeypadInput component
+  if (props.apiOptions.customKeypad) {
+    const alignmentClass = props.rightAlign ? "perseus-input-right-align" : undefined;
+    return /*#__PURE__*/React.createElement("div", {
+      className: alignmentClass
+    }, /*#__PURE__*/React.createElement(SimpleKeypadInput, {
+      ref: inputRef,
+      value: props.currentValue,
+      keypadElement: props.keypadElement,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }));
+  }
+  // (desktop-only) Otherwise, use the InputWithExamples component
+  return /*#__PURE__*/React.createElement(InputWithExamples, {
+    ref: inputRef,
+    value: props.currentValue,
+    onChange: handleChange,
+    labelText: props.labelText,
+    examples: generateExamples(props.answerForms, context.strings),
+    shouldShowExamples: shouldShowExamples(props.answerForms),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    id: props.widgetId,
+    disabled: props.apiOptions.readOnly,
+    style: styles.inputWithExamples
+  });
+});
+
+const _excluded$3 = ["answers"];
+
+/**
+ * The NumericInput widget is a numeric input field that supports a variety of
+ * answer forms, including integers, decimals, fractions, and mixed numbers.
+ *
+ * [Jan 2025] We're currenly migrating from class-based components to functional
+ * components. While we cannot fully migrate this component yet, we can start
+ * by using the functional component for the rendering the UI of the widget.
+ */
 class NumericInput extends React.Component {
   constructor(...args) {
     super(...args);
-    this.inputRef = void 0;
-    this.state = {
-      // keeps track of the other set of values when switching
-      // between 0 and finite solutions
-      previousValues: [""],
-      isFocused: false
-    };
-    this.shouldShowExamples = () => {
-      var _this$props$answerFor, _this$props$answerFor2;
-      const noFormsAccepted = ((_this$props$answerFor = this.props.answerForms) == null ? void 0 : _this$props$answerFor.length) === 0;
-      // To check if all answer forms are accepted, we must first
-      // find the *names* of all accepted forms, and see if they are
-      // all present, ignoring duplicates
-      const answerFormNames = _.uniq((_this$props$answerFor2 = this.props.answerForms) == null ? void 0 : _this$props$answerFor2.map(form => form.name));
-      const allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
-      return !noFormsAccepted && !allFormsAccepted;
-    };
+    this.inputRef = /*#__PURE__*/React.createRef();
     this.focus = () => {
-      var _this$inputRef;
-      (_this$inputRef = this.inputRef) == null || _this$inputRef.focus();
+      var _this$inputRef$curren;
+      (_this$inputRef$curren = this.inputRef.current) == null || _this$inputRef$curren.focus();
       return true;
     };
     this.focusInputPath = () => {
-      var _this$inputRef2;
-      (_this$inputRef2 = this.inputRef) == null || _this$inputRef2.focus();
+      var _this$inputRef$curren2;
+      (_this$inputRef$curren2 = this.inputRef.current) == null || _this$inputRef$curren2.focus();
     };
     this.blurInputPath = () => {
-      var _this$inputRef3;
-      (_this$inputRef3 = this.inputRef) == null || _this$inputRef3.blur();
+      var _this$inputRef$curren3;
+      (_this$inputRef$curren3 = this.inputRef.current) == null || _this$inputRef$curren3.blur();
     };
     this.getInputPaths = () => {
       // The widget itself is an input, so we return a single empty list to
@@ -20147,33 +20001,13 @@ class NumericInput extends React.Component {
       /* c8 ignore next */
       return [[]];
     };
+    /**
+     * Sets the value of the input at the given path.
+     */
     this.setInputValue = (path, newValue, cb) => {
-      /* c8 ignore next */
-      this.props.onChange({
-        currentValue: newValue
-      }, cb);
-    };
-    this.handleChange = (newValue, cb) => {
       this.props.onChange({
         currentValue: newValue
       }, cb);
-      this.props.trackInteraction();
-    };
-    this._handleFocus = () => {
-      this.props.onFocus([]);
-      this.setState(currentState => {
-        return _extends({}, currentState, {
-          isFocused: true
-        });
-      });
-    };
-    this._handleBlur = () => {
-      this.props.onBlur([]);
-      this.setState(currentState => {
-        return _extends({}, currentState, {
-          isFocused: false
-        });
-      });
     };
   }
   static getUserInputFromProps(props) {
@@ -20182,97 +20016,26 @@ class NumericInput extends React.Component {
     };
   }
   /**
-   * Generates a string that demonstrates how to input the various supported
-   * answer forms.
+   * Returns the value the user has currently input for this widget.
    */
-  examples() {
-    var _this$props$answerFor3;
-    // if the set of specified forms are empty, allow all forms
-    const forms = ((_this$props$answerFor3 = this.props.answerForms) == null ? void 0 : _this$props$answerFor3.length) !== 0 ? this.props.answerForms : Object.keys(formExamples).map(name => {
-      return {
-        name: name,
-        simplify: "required"
-      };
-    });
-    let examples = _.map(forms, form => {
-      return formExamples[form.name](form, this.context.strings);
-    });
-    // Ensure no duplicate tooltip text from simplified and unsimplified
-    // versions of the same format
-    examples = _.uniq(examples);
-    return [this.context.strings.yourAnswer].concat(examples);
-  }
   getUserInput() {
     return NumericInput.getUserInputFromProps(this.props);
   }
+
+  /**
+   * Returns the JSON representation of the prompt for this widget.
+   * This is used by the AI to determine the prompt for the widget.
+   */
   getPromptJSON() {
     return getPromptJSON$r(this.props, this.getUserInput());
   }
   render() {
-    let labelText = this.props.labelText;
-    if (labelText == null || labelText === "") {
-      labelText = this.context.strings.yourAnswerLabel;
-    }
-
-    // To right align a custom keypad we need to wrap it.
-    const maybeRightAlignKeypadInput = keypadInput => {
-      return this.props.rightAlign ? /*#__PURE__*/React.createElement("div", {
-        className: "perseus-input-right-align"
-      }, keypadInput) : keypadInput;
-    };
-    if (this.props.apiOptions.customKeypad) {
-      // TODO(charlie): Support "Review Mode".
-      return maybeRightAlignKeypadInput( /*#__PURE__*/React.createElement(SimpleKeypadInput, {
-        ref: ref => this.inputRef = ref,
-        value: this.props.currentValue,
-        keypadElement: this.props.keypadElement,
-        onChange: this.handleChange,
-        onFocus: this._handleFocus,
-        onBlur: this._handleBlur
-      }));
-    }
-
-    // Note: This is _very_ similar to what `input-number.jsx` does. If
-    // you modify this, double-check if you also need to modify that
-    // component.
-    const styles = StyleSheet.create({
-      input: {
-        borderRadius: "3px",
-        borderWidth: this.state.isFocused ? "2px" : "1px",
-        display: "inline-block",
-        fontFamily: `Symbola, "Times New Roman", serif`,
-        fontSize: "18px",
-        height: "32px",
-        lineHeight: "18px",
-        padding: this.state.isFocused ? "4px" : "4px 5px",
-        // account for added focus border thickness
-        textAlign: this.props.rightAlign ? "right" : "left",
-        width: this.props.size === "small" ? 40 : 80
-      }
-    });
-    return /*#__PURE__*/React.createElement(InputWithExamples, {
-      ref: ref => this.inputRef = ref,
-      value: this.props.currentValue,
-      onChange: this.handleChange,
-      labelText: labelText,
-      examples: this.examples(),
-      shouldShowExamples: this.shouldShowExamples(),
-      onFocus: this._handleFocus,
-      onBlur: this._handleBlur,
-      id: this.props.widgetId,
-      disabled: this.props.apiOptions.readOnly,
-      style: styles.input
-    });
+    return /*#__PURE__*/React.createElement(NumericInputComponent, _extends({}, this.props, {
+      ref: this.inputRef
+    }));
   }
 }
-
-// TODO(thomas): Currently we receive a list of lists of acceptable answer types
-// and union them down into a single set. It's worth considering whether it
-// wouldn't make more sense to have a single set of acceptable answer types for
-// a given *problem* rather than for each possible [correct/wrong] *answer*.
-// When should two answers to a problem take different answer types?
-// See D27790 for more discussion.
-NumericInput.contextType = PerseusI18nContext;
+// Transforms the widget options to the props used to render the widget.
 NumericInput.defaultProps = {
   currentValue: "",
   size: "normal",
@@ -20283,52 +20046,23 @@ NumericInput.defaultProps = {
   labelText: "",
   linterContext: linterContextDefault
 };
-const unionAnswerForms = function unionAnswerForms(answerFormsList) {
-  // Takes a list of lists of answer forms, and returns a list of the forms
-  // in each of these lists in the same order that they're listed in the
-  // `formExamples` forms from above.
-
-  // uniqueBy takes a list of elements and a function which compares whether
-  // two elements are equal, and returns a list of unique elements. This is
-  // just a helper function here, but works generally.
-  const uniqueBy = function uniqueBy(list, iteratee) {
-    // @ts-expect-error - TS2347 - Untyped function calls may not accept type arguments.
-    return list.reduce((uniqueList, element) => {
-      // For each element, decide whether it's already in the list of
-      // unique items.
-      const inList = _.find(uniqueList, iteratee.bind(null, element));
-      if (inList) {
-        return uniqueList;
-      }
-      return uniqueList.concat([element]);
-    }, []);
-  };
-
-  // Pull out all of the forms from the different lists.
-  const allForms = answerFormsList.flat();
-  // Pull out the unique forms using uniqueBy.
-  const uniqueForms = uniqueBy(allForms, _.isEqual);
-  // Sort them by the order they appear in the `formExamples` list.
-  const formExampleKeys = Object.keys(formExamples);
-  return _.sortBy(uniqueForms, form => {
-    return formExampleKeys.indexOf(form.name);
-  });
-};
 const propsTransform = function propsTransform(widgetOptions) {
-  const rendererProps = _.extend(_.omit(widgetOptions, "answers"), {
-    answerForms: unionAnswerForms(
-    // Pull out the name of each form and whether that form has
-    // required simplification.
-    widgetOptions.answers.map(answer => {
-      // @ts-expect-error - TS2345 - Argument of type 'readonly MathFormat[] | undefined' is not assignable to parameter of type 'Collection<any>'.
-      return _.map(answer.answerForms, form => {
-        return {
-          simplify: answer.simplify,
-          name: form
-        };
-      });
-    }))
-  });
+  // Omit the answers from the widget options since they are
+  // not needed for rendering the widget.
+  const _widgetOptions$answer = _extends({}, widgetOptions, {
+      answerForms: unionAnswerForms(
+      // Filter out the correct answers and map them to the answer forms
+      // so that we can generate the examples for the widget.
+      widgetOptions.answers.filter(answer => answer.status === "correct").map(answer => {
+        return (answer.answerForms || []).map(form => {
+          return {
+            simplify: answer.simplify,
+            name: form
+          };
+        });
+      }))
+    }),
+    rendererProps = _objectWithoutPropertiesLoose(_widgetOptions$answer, _excluded$3);
   return rendererProps;
 };
 var NumericInput$1 = {
@@ -20343,23 +20077,11 @@ var NumericInput$1 = {
   getOneCorrectAnswerFromRubric(rubric) {
     const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
     const answerStrings = correctAnswers.map(answer => {
-      // Figure out how this answer is supposed to be
-      // displayed
-      let format = "decimal";
-      if (answer.answerForms && answer.answerForms[0]) {
-        // NOTE(johnsullivan): This isn't exactly ideal, but
-        // it does behave well for all the currently known
-        // problems. See D14742 for some discussion on
-        // alternate strategies.
-        format = answer.answerForms[0];
-      }
-
-      // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'MathFormat | undefined'.
+      // Either get the first answer form or default to decimal
+      const format = answer.answerForms && answer.answerForms[0] ? answer.answerForms[0] : "decimal";
       let answerString = KhanMath.toNumericString(answer.value, format);
       if (answer.maxError) {
-        answerString += " \u00B1 " +
-        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'MathFormat | undefined'.
-        KhanMath.toNumericString(answer.maxError, format);
+        answerString += " \u00B1 " + KhanMath.toNumericString(answer.maxError, format);
       }
       return answerString;
     });
@@ -21163,7 +20885,7 @@ class HighlightTooltip extends React.PureComponent {
         style: style,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave
-      }, /*#__PURE__*/React.createElement(Tooltip$1, {
+      }, /*#__PURE__*/React.createElement(Tooltip, {
         content: content,
         opened: true
       }, /*#__PURE__*/React.createElement("div", null)))
@@ -22886,6 +22608,7 @@ const BASE_ICON_SIZE = 10;
 // If you pass in an object you need to specify an SVG path to
 // render along with the width and height of the path (to ensure
 // that it gets scaled correctly).
+
 /**
  * An SVG Icon
  *
@@ -23971,7 +23694,6 @@ const styles$o = StyleSheet.create({
     paddingLeft: phoneMargin
     // paddingRight is handled by responsiveFieldset
   },
-
   responsiveFieldset: {
     paddingRight: phoneMargin,
     minWidth: "auto"
@@ -24377,7 +24099,7 @@ const _choiceTransform = (widgetOptions, strings, problemNum) => {
   // 1) we randomize the order first
   _maybeRandomize(choices)));
 };
-const transform = (widgetOptions, strings, problemNum) => {
+const transform$1 = (widgetOptions, strings, problemNum) => {
   const choices = _choiceTransform(widgetOptions, strings, problemNum);
   const numCorrect = _.reduce(widgetOptions.choices, function (memo, choice) {
     return choice.correct ? memo + 1 : memo;
@@ -24403,8 +24125,8 @@ var Radio = {
   displayName: "Radio / Multiple choice",
   accessible: true,
   widget: Radio$1,
-  transform: transform,
-  staticTransform: transform,
+  transform: transform$1,
+  staticTransform: transform$1,
   version: radioLogic.version,
   propUpgrades: radioLogic.widgetOptionsUpgrades,
   isLintable: true
@@ -24975,6 +24697,7 @@ var Definition$1 = {
 
 // There are no required props, but this component can receive props from any
 // deprecated widget
+
 class DeprecatedStandin extends React__default.Component {
   constructor(...args) {
     super(...args);
@@ -25101,20 +24824,20 @@ Dropdown.defaultProps = {
   placeholder: "",
   apiOptions: ApiOptions.defaults
 };
-const optionsTransform = widgetOptions => {
+function transform(widgetOptions) {
   return {
     placeholder: widgetOptions.placeholder,
     visibleLabel: widgetOptions.visibleLabel,
     ariaLabel: widgetOptions.ariaLabel,
     choices: widgetOptions.choices.map(choice => choice.content)
   };
-};
+}
 var Dropdown$1 = {
   name: "dropdown",
   displayName: "Drop down",
   accessible: true,
   widget: Dropdown,
-  transform: optionsTransform
+  transform
 };
 
 const getPromptJSON$j = renderProps => {
@@ -25178,7 +24901,6 @@ class Explanation extends React.Component {
       // adds space between the right border and any text that follows
       paddingLeft: "2px" // adds space between the left border and the button text
     };
-
     const labelStyle = {
       fontSize: "18px",
       lineHeight: "inherit",
@@ -27502,7 +27224,6 @@ class Interaction extends React.Component {
           }
         });
       }
-
       if (element.type === "parametric") {
         const fn = t => {
           return [
@@ -27555,7 +27276,6 @@ class Interaction extends React.Component {
           }
         });
       }
-
       if (element.type === "label") {
         const coord = [
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27900,7 +27620,6 @@ function scaleCommandBy(scaleFactor) {
           command.args[6] * scaleFactor // end y
           ]
         });
-
       default:
         return _extends({}, command, {
           args: command.args.map(c => c * scaleFactor)
@@ -28642,7 +28361,6 @@ const styles$f = StyleSheet.create({
     userSelect: "none",
     borderWidth: 0 // <button> gives us a border by default
   },
-
   // We want to render the element in-place in our fixtures, so allow us to
   // render in the bottom corner in production and in-place in testing.
   hudFixedPosition: {
@@ -28672,7 +28390,6 @@ const styles$f = StyleSheet.create({
     ":hover": {
       backgroundColor: "#a1a5a9" // in between those two grays
     },
-
     ":active": {
       backgroundColor: gray68
     }
@@ -28680,7 +28397,7 @@ const styles$f = StyleSheet.create({
 });
 
 const InfoTipBase = props => {
-  return /*#__PURE__*/React.createElement(Tooltip$1, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(Body, {
       style: styles$e.body
     }, props.children),
@@ -28720,7 +28437,6 @@ class InfoTip extends React.Component {
     });
     /* eslint-enable react/no-did-mount-set-state */
   }
-
   render() {
     if (this.state.didMount) {
       return /*#__PURE__*/React.createElement(InfoTipBase, this.props);
@@ -28952,7 +28668,6 @@ class NumberInput extends React.Component {
       if (val !== Math.floor(val)) {
         return; // bail if not an integer
       }
-
       if (e.key === "ArrowUp") {
         val = val + 1;
       } else if (e.key === "ArrowDown") {
@@ -29086,20 +28801,20 @@ RangeInput.defaultProps = {
 };
 
 var components = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ButtonGroup: ButtonGroup,
-  Graphie: Graphie,
-  HUD: HUD,
-  Icon: Icon,
-  InfoTip: InfoTip,
-  InlineIcon: InlineIcon,
-  MathInput: MathInput,
-  MultiButtonGroup: MultiButtonGroup,
-  NumberInput: NumberInput,
-  RangeInput: RangeInput,
-  SvgImage: SvgImage,
-  TextInput: TextInput,
-  TextListEditor: TextListEditor
+    __proto__: null,
+    ButtonGroup: ButtonGroup,
+    Graphie: Graphie,
+    HUD: HUD,
+    Icon: Icon,
+    InfoTip: InfoTip,
+    InlineIcon: InlineIcon,
+    MathInput: MathInput,
+    MultiButtonGroup: MultiButtonGroup,
+    NumberInput: NumberInput,
+    RangeInput: RangeInput,
+    SvgImage: SvgImage,
+    TextInput: TextInput,
+    TextListEditor: TextListEditor
 });
 
 /**
@@ -29228,9 +28943,9 @@ const LockedFunction = props => {
   const {
     color,
     strokeStyle,
-    directionalAxis
+    directionalAxis,
+    domain
   } = props;
-  const domain = props.domain ? [Number.isFinite(props.domain[0]) ? props.domain[0] : -Infinity, Number.isFinite(props.domain[1]) ? props.domain[1] : Infinity] : undefined;
   const plotProps = {
     color: lockedFigureColors[color],
     style: strokeStyle,
@@ -30642,7 +30357,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && /*#__PURE__*/React.createElement(Hairlines, {
     point: point
-  }), showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
+  }), showTooltips ? /*#__PURE__*/React.createElement(Tooltip, {
     autoUpdate: true,
     backgroundColor: wbColorName,
     content: `(${point[X]}, ${point[Y]})`,
@@ -30775,6 +30490,9 @@ const MovableLine = props => {
     onMoveLine = () => {},
     onMovePoint = () => {}
   } = props;
+  const {
+    snapStep
+  } = useGraphConfig();
 
   // Aria live states for (0) point 1, (1) point 2, and (2) grab handle.
   // When moving an element, set its aria live to "polite" and the others
@@ -30806,7 +30524,8 @@ const MovableLine = props => {
     onMove: p => {
       setAriaLives(["polite", "off", "off"]);
       onMovePoint(0, p);
-    }
+    },
+    constrain: getMovableLineKeyboardConstraint([start, end], snapStep, 0)
   });
   const {
     visiblePoint: visiblePoint2,
@@ -30821,7 +30540,8 @@ const MovableLine = props => {
     onMove: p => {
       setAriaLives(["off", "polite", "off"]);
       onMovePoint(1, p);
-    }
+    },
+    constrain: getMovableLineKeyboardConstraint([start, end], snapStep, 1)
   });
   const line = /*#__PURE__*/React.createElement(Line$1, {
     ariaLabel: ariaLabels == null ? void 0 : ariaLabels.grabHandleAriaLabel,
@@ -30927,6 +30647,34 @@ const Line$1 = props => {
     color: stroke
   }));
 };
+const getMovableLineKeyboardConstraint = (line, snapStep, pointIndex) => {
+  // Separate the two points into their own variables, and determine which point is being moved
+  const coordToBeMoved = line[pointIndex];
+  const otherPoint = line[1 - pointIndex];
+
+  // Create a helper function that moves the point and then checks
+  // if it overlaps with the other point in the line after the move.
+  const movePointWithConstraint = moveFunc => {
+    // Move the point
+    let movedCoord = moveFunc(coordToBeMoved);
+    // If the moved point overlaps with the other point in the line,
+    // move the point again.
+    if (vec.dist(movedCoord, otherPoint) === 0) {
+      movedCoord = moveFunc(movedCoord);
+    }
+    return movedCoord;
+  };
+
+  // Check if the new point will overlap the other point.
+  // If it will, we need to snap the point to the left or right an additional
+  // snapStep to avoid overlap.
+  return {
+    up: movePointWithConstraint(coord => vec.add(coord, [0, snapStep[1]])),
+    down: movePointWithConstraint(coord => vec.sub(coord, [0, snapStep[1]])),
+    left: movePointWithConstraint(coord => vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => vec.add(coord, [snapStep[0], 0]))
+  };
+};
 function trimRange(range, graphDimensionsInPixels) {
   const pixelsToTrim = 4;
   const [xRange, yRange] = range;
@@ -31268,7 +31016,8 @@ function CircleGraph(props) {
   } = props;
   const {
     center,
-    radiusPoint
+    radiusPoint,
+    snapStep
   } = graphState;
   const {
     strings,
@@ -31331,7 +31080,8 @@ function CircleGraph(props) {
     onMove: newRadiusPoint => {
       setRadiusPointAriaLive("polite");
       dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
-    }
+    },
+    constrain: getCircleKeyboardConstraint(center, radiusPoint, snapStep)
   }), /*#__PURE__*/React.createElement("g", {
     id: radiusId,
     style: a11y.srOnly
@@ -31442,6 +31192,30 @@ function getCircleGraphDescription(state, i18n) {
   const strings = describeCircleGraph(state, i18n);
   return strings.srCircleInteractiveElement;
 }
+const getCircleKeyboardConstraint = (center, radiusPoint, snapStep) => {
+  // Create a helper function that moves the point and then checks
+  // if it overlaps with the center point after the move.
+  const movePointWithConstraint = moveFunc => {
+    // Move the point
+    let movedCoord = moveFunc(radiusPoint);
+    // If the moved point overlaps with the center point,
+    // move the point again.
+    if (vec.dist(movedCoord, center) === 0) {
+      movedCoord = moveFunc(movedCoord);
+    }
+    return movedCoord;
+  };
+
+  // Check if the new point overlaps the center point.
+  // If it does, we need to snap the point to the left
+  //  or right an additional snapStep to avoid the overlap.
+  return {
+    up: movePointWithConstraint(coord => vec.add(coord, [0, snapStep[1]])),
+    down: movePointWithConstraint(coord => vec.sub(coord, [0, snapStep[1]])),
+    left: movePointWithConstraint(coord => vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => vec.add(coord, [snapStep[0], 0]))
+  };
+};
 
 // Exported for testing
 function describeCircleGraph(state, i18n) {
@@ -31454,6 +31228,7 @@ function describeCircleGraph(state, i18n) {
     radiusPoint
   } = state;
   const radius = getRadius(state);
+  const isRadiusOnRight = radiusPoint[X] >= center[X];
 
   // Aria label strings
   const srCircleGraph = strings.srCircleGraph;
@@ -31461,7 +31236,10 @@ function describeCircleGraph(state, i18n) {
     centerX: srFormatNumber(center[0], locale),
     centerY: srFormatNumber(center[1], locale)
   });
-  const srCircleRadiusPoint = strings.srCircleRadiusPoint({
+  const srCircleRadiusPoint = isRadiusOnRight ? strings.srCircleRadiusPointRight({
+    radiusPointX: srFormatNumber(radiusPoint[0], locale),
+    radiusPointY: srFormatNumber(radiusPoint[1], locale)
+  }) : strings.srCircleRadiusPointLeft({
     radiusPointX: srFormatNumber(radiusPoint[0], locale),
     radiusPointY: srFormatNumber(radiusPoint[1], locale)
   });
@@ -31627,6 +31405,12 @@ const LinearSystemGraph = props => {
     locale
   } = usePerseusI18n();
   const id = React.useId();
+  const intersectionId = `${id}-intersection`;
+  const intersectionPoint = geometry.getLineIntersection(lines[0], lines[1]);
+  const intersectionDescription = intersectionPoint ? strings.srLinearSystemIntersection({
+    x: srFormatNumber(intersectionPoint[0], locale),
+    y: srFormatNumber(intersectionPoint[1], locale)
+  }) : strings.srLinearSystemParallel;
   const linesAriaInfo = lines.map((line, i) => {
     return {
       pointsDescriptionId: `${id}-line${i + 1}-points`,
@@ -31643,13 +31427,14 @@ const LinearSystemGraph = props => {
       slopeDescription: getSlopeStringForLine(line, strings)
     };
   });
+  const individualLineDescriptions = linesAriaInfo.map(({
+    pointsDescriptionId,
+    interceptDescriptionId,
+    slopeDescriptionId
+  }) => `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`).join(" ");
   return /*#__PURE__*/React.createElement("g", {
     "aria-label": strings.srLinearSystemGraph,
-    "aria-describedby": linesAriaInfo.map(({
-      pointsDescriptionId,
-      interceptDescriptionId,
-      slopeDescriptionId
-    }) => `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`).join(" ")
+    "aria-describedby": `${individualLineDescriptions} ${intersectionId}`
   }, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(MovableLine, {
     key: i,
     points: line,
@@ -31666,9 +31451,15 @@ const LinearSystemGraph = props => {
         x: srFormatNumber(line[1][0], locale),
         y: srFormatNumber(line[1][1], locale)
       }),
-      grabHandleAriaLabel: `${linesAriaInfo[i].interceptDescription} ${linesAriaInfo[i].slopeDescription}`
+      grabHandleAriaLabel: strings.srLinearSystemGrabHandle({
+        lineNumber: i + 1,
+        point1X: srFormatNumber(line[0][0], locale),
+        point1Y: srFormatNumber(line[0][1], locale),
+        point2X: srFormatNumber(line[1][0], locale),
+        point2Y: srFormatNumber(line[1][1], locale)
+      })
     },
-    ariaDescribedBy: `${linesAriaInfo[i].interceptDescriptionId} ${linesAriaInfo[i].slopeDescriptionId}`,
+    ariaDescribedBy: `${linesAriaInfo[i].interceptDescriptionId} ${linesAriaInfo[i].slopeDescriptionId} ${intersectionId}`,
     onMoveLine: delta => {
       dispatch(actions.linearSystem.moveLine(i, delta));
     },
@@ -31697,7 +31488,10 @@ const LinearSystemGraph = props => {
     key: slopeDescriptionId,
     id: slopeDescriptionId,
     style: a11y.srOnly
-  }, slopeDescription))));
+  }, slopeDescription))), /*#__PURE__*/React.createElement("g", {
+    id: intersectionId,
+    style: a11y.srOnly
+  }, intersectionDescription));
 };
 
 // Exported for testing
@@ -32358,7 +32152,8 @@ function QuadraticGraph(props) {
     graphState
   } = props;
   const {
-    coords
+    coords,
+    snapStep
   } = graphState;
   const {
     strings,
@@ -32411,6 +32206,7 @@ function QuadraticGraph(props) {
       ariaLabel: `${srQuadraticPoint}${srVertex}`,
       point: coord,
       sequenceNumber: i + 1,
+      constrain: getQuadraticKeyboardConstraint(coords, snapStep, i),
       onMove: destination => dispatch(actions.quadratic.movePoint(i, destination))
     });
   }), srQuadraticDirection && /*#__PURE__*/React.createElement("g", {
@@ -32499,6 +32295,60 @@ function describeQuadraticGraph(state, i18n) {
     srQuadraticInteractiveElements
   };
 }
+const getQuadraticKeyboardConstraint = (coords, snapStep, pointMoved) => {
+  // Make newCoords mutable
+  const newCoords = [coords[0], coords[1], coords[2]];
+
+  // Get the point that is being moved
+  const coordToBeMoved = newCoords[pointMoved];
+
+  // Create a function to validate and adjust the movement of the point
+  const movePointWithConstraint = moveFunc => {
+    // Move the point the desired direction
+    let movedCoord = moveFunc(coordToBeMoved);
+    newCoords[pointMoved] = movedCoord;
+
+    // If these new coordinates are valid, return the moved coord
+    if (areCoordsValid(newCoords)) {
+      return movedCoord;
+    }
+
+    // If the new coordinates are invalid, we need to move the point an additional
+    // snapStep to avoid creating an invalid quadratic graph.
+    movedCoord = moveFunc(movedCoord);
+    newCoords[pointMoved] = movedCoord;
+
+    // If these updated coordinates are valid now, we can return the new coordinates.
+    if (areCoordsValid(newCoords)) {
+      return movedCoord;
+    }
+
+    // Otherwise, if the new coordinates are still invalid, we need to move the point one final snapStep.
+    // This is to support the edge case where all of the points are each exactly one snapStep away
+    // from each other.
+    // Eg. When coords = [[0, 0], [1, 0], [2, 0]], snapStep = [1, 1], and we're moving coords[0] to the right.
+    return moveFunc(movedCoord);
+  };
+  return {
+    up: vec.add(coordToBeMoved, [0, snapStep[1]]),
+    down: vec.sub(coordToBeMoved, [0, snapStep[1]]),
+    // For horizontal movement, we need to ensure that the points are not on the same vertical line.
+    left: movePointWithConstraint(coord => vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => vec.add(coord, [snapStep[0], 0]))
+  };
+};
+const areCoordsValid = coords => {
+  const p1 = coords[0];
+  const p2 = coords[1];
+  const p3 = coords[2];
+
+  // If any of the points share the same x-coordinate,
+  // we are unable to calculate the coefficients, and the graph is invalid.
+  if (p1[0] === p2[0] || p2[0] === p3[0] || p1[0] === p3[0]) {
+    return false;
+  }
+  return true;
+};
 
 function renderRayGraph(state, dispatch, i18n) {
   return {
@@ -32749,7 +32599,8 @@ function SinusoidGraph(props) {
   // Note: The order of the coordinates is important:
   // The coords[0] is the root and the coords[1] is the first peak
   const {
-    coords
+    coords,
+    snapStep
   } = graphState;
 
   // The coefficients are used to calculate the sinusoid equation, plot the graph, and to indicate
@@ -32788,11 +32639,37 @@ function SinusoidGraph(props) {
     key: "point-" + i,
     point: coord,
     sequenceNumber: i + 1,
+    constrain: getSinusoidKeyboardConstraint(coords, snapStep, i),
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
   })), /*#__PURE__*/React.createElement("g", {
     id: descriptionId
   }, srSinusoidDescription));
 }
+const getSinusoidKeyboardConstraint = (coords, snapStep, pointIndex) => {
+  // Separate the two points into their own variables, and determine which point is being moved
+  const coordToBeMoved = coords[pointIndex];
+  const otherPoint = coords[1 - pointIndex];
+
+  // Create a helper function that checks if the new point is on the same
+  // vertical line as the other point. If it is, we need to move the point
+  // an additional snapStep.
+  const movePointWithConstraint = moveFunc => {
+    // Move the point
+    let movedCoord = moveFunc(coordToBeMoved);
+    // If the moved point overlaps with the other point in the line,
+    // move the point again.
+    if (movedCoord[X] === otherPoint[X]) {
+      movedCoord = moveFunc(movedCoord);
+    }
+    return movedCoord;
+  };
+  return {
+    up: movePointWithConstraint(coord => vec.add(coord, [0, snapStep[1]])),
+    down: movePointWithConstraint(coord => vec.sub(coord, [0, snapStep[1]])),
+    left: movePointWithConstraint(coord => vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => vec.add(coord, [snapStep[0], 0]))
+  };
+};
 
 // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
 const computeSine = function computeSine(x,
@@ -32844,6 +32721,14 @@ function describeSinusoidGraph(state, i18n) {
   const [root, peak] = coords;
   const diffX = Math.abs(peak[X] - root[X]);
   const diffY = Math.abs(peak[Y] - root[Y]);
+  const formattedRoot = {
+    x: srFormatNumber(root[X], locale),
+    y: srFormatNumber(root[Y], locale)
+  };
+  const formattedPeak = {
+    x: srFormatNumber(peak[X], locale),
+    y: srFormatNumber(peak[Y], locale)
+  };
   const srSinusoidGraph = strings.srSinusoidGraph;
   const srSinusoidDescription = strings.srSinusoidDescription({
     minValue: srFormatNumber(root[Y] - diffY, locale),
@@ -32851,14 +32736,8 @@ function describeSinusoidGraph(state, i18n) {
     cycleStart: srFormatNumber(root[X] - 2 * diffX, locale),
     cycleEnd: srFormatNumber(root[X] + 2 * diffX, locale)
   });
-  const srSinusoidRootPoint = strings.srSinusoidRootPoint({
-    x: srFormatNumber(root[X], locale),
-    y: srFormatNumber(root[Y], locale)
-  });
-  const srSinusoidPeakPoint = strings.srSinusoidPeakPoint({
-    x: srFormatNumber(peak[X], locale),
-    y: srFormatNumber(peak[Y], locale)
-  });
+  const srSinusoidRootPoint = strings.srSinusoidRootPoint(formattedRoot);
+  const srSinusoidPeakPoint = peak[Y] === root[Y] ? strings.srSinusoidFlatPoint(formattedPeak) : peak[Y] > root[Y] ? strings.srSinusoidMaxPoint(formattedPeak) : strings.srSinusoidMinPoint(formattedPeak);
   const srSinusoidInteractiveElements = strings.srInteractiveElements({
     elements: strings.srSinusoidInteractiveElements({
       point1X: srFormatNumber(root[X], locale),
@@ -32880,16 +32759,17 @@ const {
   calculateAngleInDegrees,
   convertDegreesToRadians
 } = angles;
-const protractorImage = "https://ka-perseus-graphie.s3.amazonaws.com/e9d032f2ab8b95979f674fbfa67056442ba1ff6a.png";
+const protractorImage = "https://cdn.kastatic.org/images/perseus/protractor.svg";
 
 // The vector from the center of the protractor to the top left corner of the
 // protractor image, in pixels. Used for positioning.
-const centerToTopLeft = [-180, -170];
+const centerToTopLeft = [-195, -190];
 
 // The vector from the center of the protractor to the center of the rotation
 // handle.
-const centerToRotationHandle = [-176, -15];
+const centerToRotationHandle = [-201, -15];
 function Protractor() {
+  const staticUrl = getDependencies().staticUrl;
   const {
     range,
     snapStep
@@ -32901,7 +32781,9 @@ function Protractor() {
   const [center, setCenter] = useState(initialCenter);
   const [rotationHandleOffset, setRotationHandleOffset] = useState(centerToRotationHandle);
   const draggableRef = useRef(null);
-  useDraggable({
+  const {
+    dragging
+  } = useDraggable({
     gestureTarget: draggableRef,
     onMove: setCenter,
     point: center,
@@ -32925,10 +32807,11 @@ function Protractor() {
     ref: draggableRef,
     transform: `translate(${topLeftPx[X]}, ${topLeftPx[Y]}), rotate(${angle})`,
     style: {
-      transformOrigin: `${-centerToTopLeft[X]}px ${-centerToTopLeft[Y]}px`
+      transformOrigin: `${-centerToTopLeft[X]}px ${-centerToTopLeft[Y]}px`,
+      cursor: dragging ? "grabbing" : "grab"
     }
   }, /*#__PURE__*/React.createElement("image", {
-    href: protractorImage
+    href: staticUrl(protractorImage)
   }), /*#__PURE__*/React.createElement("g", {
     transform: `translate(5, ${-centerToTopLeft[1]})`,
     ref: rotationHandleRef
@@ -34803,7 +34686,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // If the graph is static, it always displays the correct answer. This is
   // standard behavior for Perseus widgets (e.g. compare the Radio widget).
-  if (props.static) {
+  if (props.static && props.correct) {
     return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
       state: initializeGraphState(_extends({}, props, {
         graph: props.correct
@@ -34822,7 +34705,7 @@ const {
 } = angles;
 const {
   getLineEquation,
-  getLineIntersection,
+  getLineIntersectionString,
   magnitude,
   vector
 } = geometry;
@@ -35180,7 +35063,7 @@ class InteractiveGraph extends React.Component {
   }
   static getLinearSystemEquationString(props) {
     const coords = InteractiveGraph.getLinearSystemCoords(props.graph, props);
-    return "\n" + getLineEquation(coords[0][0], coords[0][1]) + "\n" + getLineEquation(coords[1][0], coords[1][1]) + "\n" + getLineIntersection(coords[0], coords[1]);
+    return "\n" + getLineEquation(coords[0][0], coords[0][1]) + "\n" + getLineEquation(coords[1][0], coords[1][1]) + "\n" + getLineIntersectionString(coords[0], coords[1]);
   }
   static getPointEquationString(props) {
     if (props.graph.type !== "point") {
@@ -35628,7 +35511,6 @@ const styles$a = StyleSheet.create({
   markerCorrect: {
     background: "#00880b" // WB green darkened by 18%
   },
-
   markerIncorrect: {
     background: color.offBlack64
   }
@@ -36021,7 +35903,6 @@ class LabelImage extends React.Component {
       const adjustPillDistance = {
         [`margin${markerPosition.charAt(0).toUpperCase() + markerPosition.slice(1)}`]: 10 // move pill further from marker
       };
-
       const answerChoicesActive = index === activeMarkerIndex;
       const showAnswerChoice = marker.selected && !answerChoicesActive && !this.state.hideAnswers;
       return /*#__PURE__*/React.createElement(View, {
@@ -36466,7 +36347,6 @@ class Draggable extends React.Component {
     if (this.props.width) {
       style.width = this.props.width + 1; // Fix for non-integer widths
     }
-
     if (this.props.height) {
       style.height = this.props.height;
     }
@@ -36808,8 +36688,7 @@ class Sortable extends React.Component {
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         margin = "0 0 " + this.props.margin + "px 0"; // bottom
       }
-
-      cards.push( /*#__PURE__*/React.createElement(Draggable, {
+      cards.push(/*#__PURE__*/React.createElement(Draggable, {
         content: item.option,
         key: item.key,
         state: item.state
@@ -36862,7 +36741,7 @@ class Sortable extends React.Component {
         this, item.key)
       }));
       if (item.state === ItemState.DRAGGING || item.state === ItemState.ANIMATING) {
-        cards.push( /*#__PURE__*/React.createElement(Placeholder, {
+        cards.push(/*#__PURE__*/React.createElement(Placeholder, {
           key: "placeholder_" + item.key,
           ref: "placeholder_" + item.key,
           width: item.width,
@@ -38652,7 +38531,6 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   if (!_.isFinite(props.tickStep) || props.tickStep <= 0) {
     return []; // this has screwed me for the last time!
   }
-
   const results = [];
 
   // For convenience, extract some props into separate variables
@@ -38723,6 +38601,7 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
 
 // TODO: most widgets use some like Widget<Something, PerseusNumberLineWidgetOptions>
 // should this one?
+
 class NumberLine extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -39088,7 +38967,6 @@ const numberLineTransform = editorProps => {
   } else {
     numDivisions = undefined; // send to getDefaultProps()
   }
-
   _.extend(props, {
     numLinePosition: numLinePosition,
     numDivisions: numDivisions,
@@ -39113,7 +38991,6 @@ const staticTransform$1 = editorProps => {
   } else {
     numDivisions = undefined; // send to getDefaultProps()
   }
-
   _.extend(props, {
     numLinePosition: numLinePosition,
     numDivisions: numDivisions,
@@ -40102,7 +39979,6 @@ class Plotter extends React.Component {
         const initialY = isMobile ? c.scaleY : 0;
         for (let y = initialY; y <= c.dimY; y += c.scaleY) {
           graphie.label([0, y], KhanMath.roundToApprox(y, 2), "left", /* isTeX */true /* for the \approx symbol */);
-
           graphie.style({
             stroke: isMobile ? "#e9ebec" : "#000",
             strokeWidth: 1,
@@ -41312,9 +41188,51 @@ const init = function init() {
   replaceDeprecatedWidgets();
 };
 
+/**
+ * Adds the given perseus library version information to the __perseus_debug__
+ * object and ensures that the object is attached to `globalThis` (`window` in
+ * browser environments).
+ *
+ * This allows each library to provide runtime version information to assist in
+ * debugging in production environments.
+ */
+const addLibraryVersionToPerseusDebug = (libraryName, libraryVersion) => {
+  // If the library version is the default value, then we don't want to
+  // prefix it with a "v" to indicate that it is a version number.
+  let prefix = "v";
+  if (libraryVersion === "__lib_version__") {
+    prefix = "";
+  }
+  const formattedVersion = `${prefix}${libraryVersion}`;
+  if (typeof globalThis !== "undefined") {
+    var _globalThis$__perseus;
+    globalThis.__perseus_debug__ = (_globalThis$__perseus = globalThis.__perseus_debug__) != null ? _globalThis$__perseus : {};
+    const existingVersionEntry = globalThis.__perseus_debug__[libraryName];
+    if (existingVersionEntry) {
+      // If we already have an entry and it doesn't match the registered
+      // version, we morph the entry into an array and log a warning.
+      if (existingVersionEntry !== formattedVersion) {
+        // Existing entry might be an array already (oops, at least 2
+        // versions of the library already loaded!).
+        const allVersions = Array.isArray(existingVersionEntry) ? existingVersionEntry : [existingVersionEntry];
+        allVersions.push(formattedVersion);
+        globalThis.__perseus_debug__[libraryName] = allVersions;
+
+        // eslint-disable-next-line no-console
+        console.warn(`Multiple versions of ${libraryName} loaded on this page: ${allVersions.sort().join(", ")}`);
+      }
+    } else {
+      globalThis.__perseus_debug__[libraryName] = formattedVersion;
+    }
+  } else {
+    // eslint-disable-next-line no-console
+    console.warn(`globalThis not found found (${formattedVersion})`);
+  }
+};
+
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "54.1.0";
+const libVersion = "55.0.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -41708,7 +41626,6 @@ class HintsRenderer extends React.Component {
       ReactDOM__default.findDOMNode(this.refs["hintRenderer" + pos]).focus(); // eslint-disable-line react/no-string-refs
     }
   }
-
   render() {
     const apiOptions = this.getApiOptions();
     const hintsVisible = this._hintsVisible();