@khanacademy/perseus 54.1.0 → 55.0.0

package/dist/index.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _extends = require('@babel/runtime/helpers/extends');
 var KAS = require('@khanacademy/kas');
 var mathInput = require('@khanacademy/math-input');
 var perseusCore = require('@khanacademy/perseus-core');
 var PerseusLinter = require('@khanacademy/perseus-linter');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var Tooltip$1 = require('@khanacademy/wonder-blocks-tooltip');
+var Tooltip = require('@khanacademy/wonder-blocks-tooltip');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var aphrodite = require('aphrodite');
 var classNames$1 = require('classnames');
@@ -21,12 +22,13 @@ var $ = require('jquery');
 var uuid = require('uuid');
 var PropTypes = require('prop-types');
 var perseusScore = require('@khanacademy/perseus-score');
+var keypadContext = require('@khanacademy/keypad-context');
+var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
 var kmath = require('@khanacademy/kmath');
 var SimpleMarkdown = require('@khanacademy/simple-markdown');
 var pureMarkdown = require('@khanacademy/pure-markdown');
-var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var Banner = require('@khanacademy/wonder-blocks-banner');
@@ -47,26 +49,27 @@ var Link = require('@khanacademy/wonder-blocks-link');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var PerseusLinter__namespace = /*#__PURE__*/_interopNamespace(PerseusLinter);
-var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip$1);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames$1);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -88,21 +91,6 @@ var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var cornersOutIcon__default = /*#__PURE__*/_interopDefaultLegacy(cornersOutIcon);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 /**
  * The translated strings that are used to render Perseus.
  */
@@ -398,20 +386,27 @@ const mockStrings = {
     } = _ref29;
     return `Circle. The center point is at ${centerX} comma ${centerY}.`;
   },
-  srCircleRadiusPoint: _ref30 => {
+  srCircleRadiusPointRight: _ref30 => {
     let {
       radiusPointX,
       radiusPointY
     } = _ref30;
-    return `Radius point at ${radiusPointX} comma ${radiusPointY}.`;
+    return `Right radius endpoint at ${radiusPointX} comma ${radiusPointY}.`;
   },
-  srCircleRadius: _ref31 => {
+  srCircleRadiusPointLeft: _ref31 => {
     let {
-      radius
+      radiusPointX,
+      radiusPointY
     } = _ref31;
+    return `Left radius endpoint at ${radiusPointX} comma ${radiusPointY}.`;
+  },
+  srCircleRadius: _ref32 => {
+    let {
+      radius
+    } = _ref32;
     return `Circle radius is ${radius}.`;
   },
-  srCircleOuterPoints: _ref32 => {
+  srCircleOuterPoints: _ref33 => {
     let {
       point1X,
       point1Y,
@@ -421,83 +416,83 @@ const mockStrings = {
       point3Y,
       point4X,
       point4Y
-    } = _ref32;
+    } = _ref33;
     return `Points on the circle at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, ${point3X} comma ${point3Y}, ${point4X} comma ${point4Y}.`;
   },
   srLinearGraph: "A line on a coordinate plane.",
-  srLinearGraphPoints: _ref33 => {
+  srLinearGraphPoints: _ref34 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref33;
+    } = _ref34;
     return `The line has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`;
   },
   srLinearGraphSlopeIncreasing: "Its slope increases from left to right.",
   srLinearGraphSlopeDecreasing: "Its slope decreases from left to right.",
   srLinearGraphSlopeHorizontal: "Its slope is zero.",
   srLinearGraphSlopeVertical: "Its slope is undefined.",
-  srLinearGraphXOnlyIntercept: _ref34 => {
+  srLinearGraphXOnlyIntercept: _ref35 => {
     let {
       xIntercept
-    } = _ref34;
+    } = _ref35;
     return `The line crosses the X-axis at ${xIntercept} comma 0.`;
   },
-  srLinearGraphYOnlyIntercept: _ref35 => {
+  srLinearGraphYOnlyIntercept: _ref36 => {
     let {
       yIntercept
-    } = _ref35;
+    } = _ref36;
     return `The line crosses the Y-axis at 0 comma ${yIntercept}.`;
   },
-  srLinearGraphBothIntercepts: _ref36 => {
+  srLinearGraphBothIntercepts: _ref37 => {
     let {
       xIntercept,
       yIntercept
-    } = _ref36;
+    } = _ref37;
     return `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.",
-  srLinearGrabHandle: _ref37 => {
+  srLinearGraphOriginIntercept: "The line crosses the X and Y axes at the graph's origin.",
+  srLinearGrabHandle: _ref38 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref37;
-    return `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
+    } = _ref38;
+    return `Line going through point ${point1X} comma ${point1Y} and point ${point2X} comma ${point2Y}.`;
   },
-  srAngleStartingSide: _ref38 => {
+  srAngleStartingSide: _ref39 => {
     let {
       x,
       y
-    } = _ref38;
+    } = _ref39;
     return `Point 3, starting side at ${x} comma ${y}.`;
   },
-  srAngleEndingSide: _ref39 => {
+  srAngleEndingSide: _ref40 => {
     let {
       x,
       y
-    } = _ref39;
+    } = _ref40;
     return `Point 2, ending side at ${x} comma ${y}.`;
   },
-  srAngleVertex: _ref40 => {
+  srAngleVertex: _ref41 => {
     let {
       x,
       y
-    } = _ref40;
+    } = _ref41;
     return `Point 1, vertex at ${x} comma ${y}.`;
   },
-  srAngleVertexWithAngleMeasure: _ref41 => {
+  srAngleVertexWithAngleMeasure: _ref42 => {
     let {
       x,
       y,
       angleMeasure
-    } = _ref41;
+    } = _ref42;
     return `Point 1, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees.`;
   },
   srAngleGraphAriaLabel: "An angle on a coordinate plane.",
-  srAngleGraphAriaDescription: _ref42 => {
+  srAngleGraphAriaDescription: _ref43 => {
     let {
       angleMeasure,
       vertexX,
@@ -506,10 +501,10 @@ const mockStrings = {
       startingSideY,
       endingSideX,
       endingSideY
-    } = _ref42;
+    } = _ref43;
     return `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`;
   },
-  srAngleInteractiveElements: _ref43 => {
+  srAngleInteractiveElements: _ref44 => {
     let {
       vertexX,
       vertexY,
@@ -517,118 +512,136 @@ const mockStrings = {
       startingSideY,
       endingSideX,
       endingSideY
-    } = _ref43;
+    } = _ref44;
     return `An angle formed by 3 points. The vertex is at ${vertexX} comma ${vertexY}. The starting side point is at ${startingSideX} comma ${startingSideY}. The ending side point is at ${endingSideX} comma ${endingSideY}.`;
   },
   srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
-  srMultipleSegmentGraphAriaLabel: _ref44 => {
+  srMultipleSegmentGraphAriaLabel: _ref45 => {
     let {
       countOfSegments
-    } = _ref44;
+    } = _ref45;
     return `${countOfSegments} segments on a coordinate plane.`;
   },
-  srMultipleSegmentIndividualLabel: _ref45 => {
+  srMultipleSegmentIndividualLabel: _ref46 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y,
       indexOfSegment
-    } = _ref45;
+    } = _ref46;
     return `Segment ${indexOfSegment}: Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSingleSegmentLabel: _ref46 => {
+  srSingleSegmentLabel: _ref47 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref46;
+    } = _ref47;
     return `Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSegmentLength: _ref47 => {
+  srSegmentLength: _ref48 => {
     let {
       length
-    } = _ref47;
+    } = _ref48;
     return `Segment length ${length} units.`;
   },
-  srSingleSegmentGraphEndpointAriaLabel: _ref48 => {
+  srSingleSegmentGraphEndpointAriaLabel: _ref49 => {
     let {
       endpointNumber,
       x,
       y
-    } = _ref48;
+    } = _ref49;
     return `Endpoint ${endpointNumber} at ${x} comma ${y}.`;
   },
-  srMultipleSegmentGraphEndpointAriaLabel: _ref49 => {
+  srMultipleSegmentGraphEndpointAriaLabel: _ref50 => {
     let {
       endpointNumber,
       x,
       y,
       indexOfSegment
-    } = _ref49;
+    } = _ref50;
     return `Endpoint ${endpointNumber} on segment ${indexOfSegment} at ${x} comma ${y}.`;
   },
-  srSegmentGrabHandle: _ref50 => {
+  srSegmentGrabHandle: _ref51 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref50;
+    } = _ref51;
     return `Segment from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
   },
   srLinearSystemGraph: "Two lines on a coordinate plane.",
-  srLinearSystemPoints: _ref51 => {
+  srLinearSystemPoints: _ref52 => {
     let {
       lineNumber,
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref51;
+    } = _ref52;
     return `Line ${lineNumber} has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`;
   },
-  srLinearSystemPoint: _ref52 => {
+  srLinearSystemPoint: _ref53 => {
     let {
       lineNumber,
       pointSequence,
       x,
       y
-    } = _ref52;
+    } = _ref53;
     return `Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`;
   },
+  srLinearSystemGrabHandle: _ref54 => {
+    let {
+      lineNumber,
+      point1X,
+      point1Y,
+      point2X,
+      point2Y
+    } = _ref54;
+    return `Line ${lineNumber} going through point ${point1X} comma ${point1Y} and point ${point2X} comma ${point2Y}.`;
+  },
+  srLinearSystemIntersection: _ref55 => {
+    let {
+      x,
+      y
+    } = _ref55;
+    return `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: _ref53 => {
+  srRayPoints: _ref56 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref53;
+    } = _ref56;
     return `The endpoint is at ${point1X} comma ${point1Y} and the ray goes through point ${point2X} comma ${point2Y}.`;
   },
-  srRayGrabHandle: _ref54 => {
+  srRayGrabHandle: _ref57 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref54;
+    } = _ref57;
     return `Ray with endpoint ${point1X} comma ${point1Y} going through point ${point2X} comma ${point2Y}.`;
   },
-  srRayEndpoint: _ref55 => {
+  srRayEndpoint: _ref58 => {
     let {
       x,
       y
-    } = _ref55;
+    } = _ref58;
     return `Endpoint at ${x} comma ${y}.`;
   },
-  srRayTerminalPoint: _ref56 => {
+  srRayTerminalPoint: _ref59 => {
     let {
       x,
       y
-    } = _ref56;
+    } = _ref59;
     return `Through point at ${x} comma ${y}.`;
   },
   srQuadraticGraph: "A parabola on a 4-quadrant coordinate plane.",
@@ -637,55 +650,55 @@ const mockStrings = {
   srQuadraticGraphVertexOrigin: "Vertex is at the origin.",
   srQuadraticGraphVertexXAxis: "Vertex is on the X-axis.",
   srQuadraticGraphVertexYAxis: "Vertex is on the Y-axis.",
-  srQuadraticGraphVertexQuadrant: _ref57 => {
+  srQuadraticGraphVertexQuadrant: _ref60 => {
     let {
       quadrant
-    } = _ref57;
+    } = _ref60;
     return `Vertex is in quadrant ${quadrant}.`;
   },
-  srQuadraticTwoXIntercepts: _ref58 => {
+  srQuadraticTwoXIntercepts: _ref61 => {
     let {
       intercept1,
       intercept2
-    } = _ref58;
+    } = _ref61;
     return `The X-intercepts are at ${intercept1} comma 0 and ${intercept2} comma 0.`;
   },
-  srQuadraticOneXIntercept: _ref59 => {
+  srQuadraticOneXIntercept: _ref62 => {
     let {
       intercept
-    } = _ref59;
+    } = _ref62;
     return `The X-intercept is at ${intercept} comma 0.`;
   },
-  srQuadraticYIntercept: _ref60 => {
+  srQuadraticYIntercept: _ref63 => {
     let {
       intercept
-    } = _ref60;
+    } = _ref63;
     return `The Y-intercept is at 0 comma ${intercept}.`;
   },
-  srQuadraticPointOrigin: _ref61 => {
+  srQuadraticPointOrigin: _ref64 => {
     let {
       pointNumber
-    } = _ref61;
+    } = _ref64;
     return `Point ${pointNumber} on parabola at the origin.`;
   },
-  srQuadraticPointAxis: _ref62 => {
+  srQuadraticPointAxis: _ref65 => {
     let {
       pointNumber,
       x,
       y
-    } = _ref62;
+    } = _ref65;
     return `Point ${pointNumber} on parabola at ${x} comma ${y}.`;
   },
-  srQuadraticPointQuadrant: _ref63 => {
+  srQuadraticPointQuadrant: _ref66 => {
     let {
       pointNumber,
       x,
       y,
       quadrant
-    } = _ref63;
+    } = _ref66;
     return `Point ${pointNumber} on parabola in quadrant ${quadrant} at ${x} comma ${y}.`;
   },
-  srQuadraticInteractiveElements: _ref64 => {
+  srQuadraticInteractiveElements: _ref67 => {
     let {
       point1X,
       point1Y,
@@ -693,83 +706,97 @@ const mockStrings = {
       point2Y,
       point3X,
       point3Y
-    } = _ref64;
+    } = _ref67;
     return `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`;
   },
   srPolygonGraph: "A polygon.",
   srPolygonGraphCoordinatePlane: "A polygon on a coordinate plane.",
-  srPolygonGraphPointsNum: _ref65 => {
+  srPolygonGraphPointsNum: _ref68 => {
     let {
       num
-    } = _ref65;
+    } = _ref68;
     return `The polygon has ${num} points.`;
   },
   srPolygonGraphPointsOne: "The polygon has 1 point.",
-  srPolygonElementsNum: _ref66 => {
+  srPolygonElementsNum: _ref69 => {
     let {
       num
-    } = _ref66;
+    } = _ref69;
     return `A polygon with ${num} points.`;
   },
   srPolygonElementsOne: "A polygon with 1 point.",
-  srPolygonPointAngleApprox: _ref67 => {
+  srPolygonPointAngleApprox: _ref70 => {
     let {
       angle
-    } = _ref67;
+    } = _ref70;
     return `Angle approximately equal to ${angle} degrees.`;
   },
-  srPolygonPointAngle: _ref68 => {
+  srPolygonPointAngle: _ref71 => {
     let {
       angle
-    } = _ref68;
+    } = _ref71;
     return `Angle equal to ${angle} degrees.`;
   },
-  srPolygonSideLength: _ref69 => {
+  srPolygonSideLength: _ref72 => {
     let {
       pointNum,
       length
-    } = _ref69;
+    } = _ref72;
     return `A line segment, length equal to ${length} units, connects to point ${pointNum}.`;
   },
-  srPolygonSideLengthApprox: _ref70 => {
+  srPolygonSideLengthApprox: _ref73 => {
     let {
       pointNum,
       length
-    } = _ref70;
+    } = _ref73;
     return `A line segment, length approximately equal to ${length} units, connects to point ${pointNum}.`;
   },
   srUnlimitedPolygonEmpty: "An empty coordinate plane.",
   srSinusoidGraph: "A sinusoid function on a coordinate plane.",
-  srSinusoidRootPoint: _ref71 => {
+  srSinusoidRootPoint: _ref74 => {
     let {
       x,
       y
-    } = _ref71;
+    } = _ref74;
     return `Midline intersection at ${x} comma ${y}.`;
   },
-  srSinusoidPeakPoint: _ref72 => {
+  srSinusoidMaxPoint: _ref75 => {
     let {
       x,
       y
-    } = _ref72;
-    return `Extremum point at ${x} comma ${y}.`;
+    } = _ref75;
+    return `Maximum point at ${x} comma ${y}.`;
+  },
+  srSinusoidMinPoint: _ref76 => {
+    let {
+      x,
+      y
+    } = _ref76;
+    return `Minimum point at ${x} comma ${y}.`;
   },
-  srSinusoidDescription: _ref73 => {
+  srSinusoidFlatPoint: _ref77 => {
+    let {
+      x,
+      y
+    } = _ref77;
+    return `Line through point at ${x} comma ${y}.`;
+  },
+  srSinusoidDescription: _ref78 => {
     let {
       minValue,
       maxValue,
       cycleStart,
       cycleEnd
-    } = _ref73;
+    } = _ref78;
     return `The graph shows a wave with a minimum value of ${minValue} and a maximum value of ${maxValue}. The wave completes a full cycle from ${cycleStart} to ${cycleEnd}.`;
   },
-  srSinusoidInteractiveElements: _ref74 => {
+  srSinusoidInteractiveElements: _ref79 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref74;
+    } = _ref79;
     return `Sinusoid graph with midline intersection point at ${point1X} comma ${point1Y} and extremum point at ${point2X} comma ${point2Y}.`;
   }
   // The above strings are used for interactive graph SR descriptions.
@@ -1103,7 +1130,7 @@ class InnerMathInput extends React__namespace.Component {
       }, this.context.strings.mathInputDescription), /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
         style: styles$D.popoverContent
-      }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
+      }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends__default["default"]({
         onAnalyticsEvent: this.props.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
         onClickKey: this.handleKeypadPress,
@@ -1118,7 +1145,7 @@ class InnerMathInput extends React__namespace.Component {
       "aria-label": this.state.keypadOpen ? this.context.strings.closeKeypad : this.context.strings.openKeypad,
       role: "button",
       onClick: () => this.state.keypadOpen ? this.closeKeypad() : this.openKeypad()
-    }, props => /*#__PURE__*/React__namespace.createElement(MathInputIcon, _extends({
+    }, props => /*#__PURE__*/React__namespace.createElement(MathInputIcon, _extends__default["default"]({
       active: this.state.keypadOpen
     }, props))))));
   }
@@ -1143,7 +1170,7 @@ class MathInput extends React__namespace.Component {
     this.inputRef.current?.insert(value);
   }
   render() {
-    return /*#__PURE__*/React__namespace.createElement(InnerMathInput, _extends({}, this.props, {
+    return /*#__PURE__*/React__namespace.createElement(InnerMathInput, _extends__default["default"]({}, this.props, {
       ref: this.inputRef,
       mathInputStrings: this.context.strings
     }));
@@ -1285,11 +1312,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
 });
 
 /**
@@ -1393,9 +1420,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 */
@@ -2054,7 +2081,7 @@ const keypadConfigurationForProps = widgetOptions => {
 };
 const ExpressionWithDependencies = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const deps = useDependencies();
-  return /*#__PURE__*/React__namespace.createElement(Expression, _extends({
+  return /*#__PURE__*/React__namespace.createElement(Expression, _extends__default["default"]({
     ref: ref,
     analytics: deps.analytics
   }, props));
@@ -2105,6 +2132,174 @@ var Expression$1 = {
   }
 };
 
+class SimpleKeypadInput extends React__namespace.Component {
+  static contextType = keypadContext.KeypadContext;
+  _isMounted = false;
+  inputRef = /*#__PURE__*/React__namespace.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() {
+    // The inputRef is a ref to a MathInput, which
+    // also controls the keypad state during focus events.
+    this.inputRef.current?.focus(this.context.setKeypadActive);
+  }
+  blur() {
+    this.inputRef.current?.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 {
+      keypadElement,
+      onFocus,
+      value,
+      ...rest
+    } = _this.props;
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error - TS2769 - No overload matches this call.
+      React__namespace.createElement(mathInput.KeypadInput, _extends__default["default"]({
+        ref: this.inputRef,
+        keypadElement: keypadElement,
+        onFocus: () => {
+          if (keypadElement) {
+            keypadElement.configure({
+              keypadType: mathInput.KeypadType.FRACTION
+            }, () => {
+              if (_this._isMounted) {
+                onFocus?.();
+              }
+            });
+          } else {
+            onFocus?.();
+          }
+        },
+        value: value == null ? "" : "" + value
+      }, rest))
+    );
+  }
+}
+
+// @ts-expect-error - TS2339 - Property 'propTypes' does not exist on type 'typeof SimpleKeypadInput'.
+SimpleKeypadInput.propTypes = {
+  keypadElement: mathInput.keypadElementPropType,
+  onFocus: PropTypes__default["default"].func,
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "input-";
+  lastId++;
+  return `${prefix}${lastId}`;
+}
+class TextInput extends React__namespace.Component {
+  inputRef = /*#__PURE__*/React__namespace.createRef();
+  static defaultProps = {
+    value: "",
+    disabled: false
+  };
+  id;
+  constructor(props) {
+    super(props);
+    if (props.id) {
+      this.id = props.id;
+    } else {
+      this.id = uniqueIdForInput();
+    }
+  }
+  _getInput = () => {
+    if (!this.inputRef.current) {
+      throw new perseusCore.PerseusError("Input ref accessed before set", perseusCore.Errors.Internal);
+    }
+    return this.inputRef.current;
+  };
+  focus = () => {
+    this._getInput().focus();
+  };
+  blur = () => {
+    this._getInput().blur();
+  };
+  getValue = () => {
+    return this.inputRef.current?.value;
+  };
+  getStringValue = () => {
+    return this.inputRef.current?.value.toString();
+  };
+  setSelectionRange = (selectionStart, selectionEnd) => {
+    this._getInput().setSelectionRange(selectionStart, selectionEnd);
+  };
+  getSelectionStart = () => {
+    return this._getInput().selectionStart;
+  };
+  getSelectionEnd = () => {
+    return this._getInput().selectionEnd;
+  };
+  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__namespace.createElement(wonderBlocksForm.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,
+      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"
+    });
+  }
+}
+
 /**
  * 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
@@ -2667,9 +2862,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) => {
@@ -3343,40 +3540,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
 });
 
 /**
@@ -3791,7 +3988,7 @@ var Raphael$1 = (function () {
     appendChild = "appendChild",
     apply = "apply",
     concat = "concat",
-    supportsTouch = ("createTouch" in doc),
+    supportsTouch = "createTouch" in doc,
     E = "",
     S = " ",
     Str = String,
@@ -5396,10 +5593,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")) {
@@ -9232,8 +9429,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) {
@@ -9425,7 +9624,7 @@ const GraphUtils = {
     clickBlockList = [],
     blockMouseTriggers = false,
     blockTouchTriggers = false,
-    eventCaptureSupported = ("addEventListener" in document),
+    eventCaptureSupported = "addEventListener" in document,
     $document = $(document),
     nextTouchID = 1,
     lastTouchID = 0;
@@ -10120,7 +10319,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);
@@ -11938,7 +12136,6 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
         if (hideArrow) {
           return; // Don't draw anything!
         }
-
         const handleVec = kmath.vector.subtract(handleCoord, rotatePoint.coord);
         const handlePolar = kmath.vector.polarDegFromCart(handleVec);
         const angle = handlePolar[1];
@@ -12902,7 +13099,6 @@ ___default["default"].extend(MovableAngle.prototype, {
     // clockwise to the first point
     coords[1] // the vertex parameter is last
     );
-
     const clockwiseAngle = rawAngle + 360 % 360;
     return clockwiseAngle;
   },
@@ -14262,7 +14458,6 @@ class MovablePoint$5 {
       // We only update props here, because we want things on state to
       // be persistent, and updated appropriately in modify()
       ),
-
       ...DEFAULT_PROPS$1
     };
   }
@@ -14314,11 +14509,11 @@ class MovablePoint$5 {
     const showTrashTooltip = () => {
       this._showTooltip(container => {
         // eslint-disable-next-line import/no-deprecated
-        render( /*#__PURE__*/React__namespace.createElement("span", {
+        render(/*#__PURE__*/React__namespace.createElement("span", {
           style: {
             fontSize: "2em"
           }
-        }, /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends({}, iconTrash, {
+        }, /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends__default["default"]({}, iconTrash, {
           style: {
             position: "static",
             color: KhanColors.INTERACTIVE,
@@ -15117,7 +15312,6 @@ const DEFAULT_PROPS = {
   // likewise
   labelStyle: null // likewise
 };
-
 const DEFAULT_STATE = {
   added: false,
   hasMoved: false,
@@ -16019,7 +16213,7 @@ class ImageLoader extends React__namespace.Component {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
-      React__namespace.createElement("img", _extends({
+      React__namespace.createElement("img", _extends__default["default"]({
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- TODO(LEMS-2871): Address a11y error
         tabIndex: 0,
         src: staticUrl(src),
@@ -17793,7 +17987,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*.
@@ -17803,7 +17997,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
@@ -18062,29 +18256,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__namespace.Component {
@@ -18119,7 +18313,6 @@ class WidgetContainer extends React__namespace.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.");
@@ -18242,7 +18435,7 @@ class WidgetContainer extends React__namespace.Component {
             }
           });
         }
-      }, /*#__PURE__*/React__namespace.createElement(WidgetType, _extends({}, this.state.widgetProps, {
+      }, /*#__PURE__*/React__namespace.createElement(WidgetType, _extends__default["default"]({}, this.state.widgetProps, {
         linterContext: linterContext,
         containerSizeClass: this.state.sizeClass,
         ref: this.widgetRef
@@ -19111,7 +19304,7 @@ class Renderer extends React__namespace.Component {
         let {
           setAssetStatus
         } = _ref4;
-        return /*#__PURE__*/React__namespace.createElement(SvgImage, _extends({
+        return /*#__PURE__*/React__namespace.createElement(SvgImage, _extends__default["default"]({
           setAssetStatus: setAssetStatus
           // @ts-expect-error - TS2322 - Type 'string | null | undefined' is not assignable to type 'string | undefined'.
           ,
@@ -19635,429 +19828,84 @@ const styles$A = {
   }
 };
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-let lastId = 0;
-function uniqueIdForInput() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "input-";
-  lastId++;
-  return `${prefix}${lastId}`;
-}
-class TextInput extends React__namespace.Component {
-  inputRef = /*#__PURE__*/React__namespace.createRef();
-  static defaultProps = {
-    value: "",
-    disabled: false
-  };
-  id;
-  constructor(props) {
-    super(props);
-    if (props.id) {
-      this.id = props.id;
-    } else {
-      this.id = uniqueIdForInput();
-    }
-  }
-  _getInput = () => {
-    if (!this.inputRef.current) {
-      throw new perseusCore.PerseusError("Input ref accessed before set", perseusCore.Errors.Internal);
-    }
-    return this.inputRef.current;
-  };
-  focus = () => {
-    this._getInput().focus();
-  };
-  blur = () => {
-    this._getInput().blur();
-  };
-  getValue = () => {
-    return this.inputRef.current?.value;
-  };
-  getStringValue = () => {
-    return this.inputRef.current?.value.toString();
-  };
-  setSelectionRange = (selectionStart, selectionEnd) => {
-    this._getInput().setSelectionRange(selectionStart, selectionEnd);
-  };
-  getSelectionStart = () => {
-    return this._getInput().selectionStart;
-  };
-  getSelectionEnd = () => {
-    return this._getInput().selectionEnd;
-  };
-  render() {
-    const {
-      labelText,
-      value,
-      onFocus,
-      onBlur,
-      disabled,
-      placeholder,
-      onKeyDown,
-      style
-    } = this.props;
-    const formattedValue = value === null ? "" : value.toString();
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-      ref: this.inputRef,
-      style: style,
-      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",
-      autoCapitalize: "off",
-      autoComplete: "off"
-    });
-  }
-}
-
-/* eslint-disable react/no-unsafe */
-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__namespace.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,
-    ...props
-  } = _ref;
-  // TODO(aria): Think about adding a box-shadow to the triangle here
-  // See http://css-tricks.com/triangle-with-shadow/
+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.
 
-  //const isRight = (this.props.horizontalDirection === "right");
-  const isTop = props.verticalDirection === "top";
-  const frontTopOffset = isTop ? 0 : 1;
-  const borderTopOffset = isTop ? 0 : -1;
-  return /*#__PURE__*/React__namespace.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__namespace.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__namespace.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.
- * ```
+ * 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.
  */
-class Tooltip extends React__namespace.Component {
-  tooltipContainerRef = /*#__PURE__*/React__namespace.createRef();
-  static defaultProps = {
-    className: "",
-    arrowSize: 10,
-    borderColor: "#ccc",
-    verticalPosition: VerticalDirection.Bottom,
-    horizontalPosition: HorizontalDirection.Left,
-    horizontalAlign: HorizontalDirection.Left,
-    targetContainerStyle: {}
-  };
-  state = {
-    height: null // used for offsetting "top" positioned tooltips
-  };
-
-  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__namespace.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__namespace.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__namespace.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__namespace.createElement("div", {
-      style: {
-        position: "relative",
-        height: 0,
-        display: this.props.show ? "block" : "none"
+const InputWithExamples = /*#__PURE__*/React.forwardRef((props, ref) => {
+  // Desctructure the props to set default values
+  const {
+    shouldShowExamples = true,
+    onFocus = () => {},
+    onBlur = () => {},
+    disabled = false,
+    linterContext = PerseusLinter__namespace.linterContextDefault,
+    className = ""
+  } = props;
+  const context = React__namespace.useContext(PerseusI18nContext);
+  const inputRef = React__namespace.useRef(null);
+  const [inputFocused, setInputFocused] = React__namespace.useState(false);
+  const id = React.useId();
+  const ariaId = `aria-for-${id}`;
+  React.useImperativeHandle(ref, () => ({
+    current: inputRef.current,
+    focus: () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    },
+    blur: () => {
+      if (inputRef.current) {
+        inputRef.current.blur();
       }
-    }, /*#__PURE__*/React__namespace.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__namespace.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?.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__namespace.createElement("span", null, isTooltipAbove && this._renderToolTipDiv(isTooltipAbove), /*#__PURE__*/React__namespace.createElement("div", {
-      style: this.props.targetContainerStyle
-    }, this.props.children[0]), !isTooltipAbove && this._renderToolTipDiv());
-  }
-}
-
-const {
-  captureScratchpadTouchStart: captureScratchpadTouchStart$2
-} = Util;
-class InputWithExamples extends React__namespace.Component {
-  static contextType = PerseusI18nContext;
-  static defaultProps = {
-    shouldShowExamples: true,
-    onFocus: function () {},
-    onBlur: function () {},
-    disabled: false,
-    linterContext: PerseusLinter__namespace.linterContextDefault,
-    className: ""
-  };
-  state = {
-    focused: false,
-    showExamples: false
-  };
-  _getUniqueId = () => {
-    return `input-with-examples-${btoa(this.props.id).replace(/=/g, "")}`;
-  };
-  _getInputClassName = () => {
-    // Otherwise, we need to add these INPUT and FOCUSED tags here.
-    let className = ClassNames.INPUT;
-    if (this.state.focused) {
-      className += " " + ClassNames.FOCUSED;
+  }));
+  const getInputClassName = () => {
+    let inputClassName = ClassNames.INPUT;
+    if (inputFocused) {
+      inputClassName += " " + ClassNames.FOCUSED;
     }
-    if (this.props.className) {
-      className += " " + this.props.className;
+    if (className) {
+      inputClassName += " " + className;
     }
-    return className;
+    return inputClassName;
+  };
+  const handleFocus = () => {
+    onFocus();
+    setInputFocused(true);
+  };
+  const handleBlur = () => {
+    onBlur();
+    setInputFocused(false);
   };
-  _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")}`
+  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 ");
+    .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,
+      // 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,
+      style: props.style,
+      onChange: props.onChange,
       onTouchStart: captureScratchpadTouchStart$2,
       autoCapitalize: "off",
       autoComplete: "off",
@@ -20071,158 +19919,32 @@ class InputWithExamples extends React__namespace.Component {
       }
     }, examplesAria));
   };
-  _handleFocus = () => {
-    this.props.onFocus();
-    this.setState({
-      focused: true,
-      showExamples: true
-    });
-  };
-  show = () => {
-    this.setState({
-      showExamples: true
-    });
-  };
-  hide = () => {
-    this.setState({
-      showExamples: false
-    });
-  };
-  _handleBlur = () => {
-    this.props.onBlur();
-    this.setState({
-      focused: false,
-      showExamples: false
-    });
-  };
-  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();
-  };
-  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();
-  };
-  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__namespace.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__namespace.createElement("div", {
-      id: this._getUniqueId()
+  const renderTooltipContent = () => {
+    return /*#__PURE__*/React__namespace.createElement(Tooltip.TooltipContent, null, /*#__PURE__*/React__namespace.createElement("div", {
+      id: id,
+      className: "input-with-examples-tooltip"
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: examplesContent,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "input-with-examples"),
-      strings: this.context.strings
+      linterContext: PerseusLinter__namespace.pushContextStack(linterContext, "input-with-examples"),
+      strings: context.strings
     })));
-  }
-}
-
-class SimpleKeypadInput extends React__namespace.Component {
-  _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() {
-    // 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?.blur === "function") {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-      this.refs.input?.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 {
-      keypadElement,
-      onFocus,
-      value,
-      ...rest
-    } = _this.props;
-    return (
-      /*#__PURE__*/
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      React__namespace.createElement(mathInput.KeypadInput
-      // eslint-disable-next-line react/no-string-refs
-      , _extends({
-        ref: "input",
-        keypadElement: keypadElement,
-        onFocus: () => {
-          if (keypadElement) {
-            keypadElement.configure({
-              keypadType: mathInput.KeypadType.FRACTION
-            }, () => {
-              if (_this._isMounted) {
-                onFocus?.();
-              }
-            });
-          } else {
-            onFocus?.();
-          }
-        },
-        value: value == null ? "" : "" + value
-      }, rest))
-    );
-  }
-}
-
-// @ts-expect-error - TS2339 - Property 'propTypes' does not exist on type 'typeof SimpleKeypadInput'.
-SimpleKeypadInput.propTypes = {
-  keypadElement: mathInput.keypadElementPropType,
-  onFocus: PropTypes__default["default"].func,
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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");
 
-const formExamples$1 = {
+  // Display the examples when they are enabled (shouldShowExamples) and the input is focused.
+  const showExamplesTooltip = shouldShowExamples && inputFocused;
+  return /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+    content: renderTooltipContent(),
+    opened: showExamplesTooltip,
+    placement: "bottom"
+  }, renderInput());
+});
+
+const formExamples = {
   integer: function (options, strings) {
     return strings.integerExample;
   },
@@ -20334,7 +20056,7 @@ class InputNumber extends React__namespace.Component {
     } = this.context;
     const type = this.props.answerType;
     const forms = perseusScore.inputNumberAnswerTypes[type].forms.split(/\s*,\s*/);
-    const examples = ___default["default"].map(forms, form => formExamples$1[form](this.props, strings));
+    const examples = ___default["default"].map(forms, form => formExamples[form](this.props, strings));
     return [strings.yourAnswer].concat(examples);
   }
   render() {
@@ -20448,7 +20170,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,
@@ -20456,9 +20182,182 @@ 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 (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 (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__*/React.forwardRef((props, ref) => {
+  const context = React.useContext(PerseusI18nContext);
+  const inputRef = React.useRef(null);
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  // Pass the focus and blur methods to the Numeric Input Class component
+  React.useImperativeHandle(ref, () => ({
+    current: inputRef.current,
+    focus: () => {
+      if (inputRef.current) {
+        inputRef.current?.focus();
+        setIsFocused(true);
+      }
+    },
+    blur: () => {
+      if (inputRef.current) {
+        inputRef.current?.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 = aphrodite.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__namespace.createElement("div", {
+      className: alignmentClass
+    }, /*#__PURE__*/React__namespace.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__namespace.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
+  });
+});
+
+/**
+ * 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__namespace.Component {
-  static contextType = PerseusI18nContext;
-  inputRef;
+  inputRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     currentValue: "",
     size: "normal",
@@ -20474,51 +20373,15 @@ class NumericInput extends React__namespace.Component {
       currentValue: props.currentValue
     };
   }
-  state = {
-    // keeps track of the other set of values when switching
-    // between 0 and finite solutions
-    previousValues: [""],
-    isFocused: false
-  };
-
-  /**
-   * Generates a string that demonstrates how to input the various supported
-   * answer forms.
-   */
-  examples() {
-    // if the set of specified forms are empty, allow all forms
-    const forms = this.props.answerForms?.length !== 0 ? this.props.answerForms : Object.keys(formExamples).map(name => {
-      return {
-        name: name,
-        simplify: "required"
-      };
-    });
-    let examples = ___default["default"].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 = ___default["default"].uniq(examples);
-    return [this.context.strings.yourAnswer].concat(examples);
-  }
-  shouldShowExamples = () => {
-    const noFormsAccepted = this.props.answerForms?.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 = ___default["default"].uniq(this.props.answerForms?.map(form => form.name));
-    const allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
-    return !noFormsAccepted && !allFormsAccepted;
-  };
   focus = () => {
-    this.inputRef?.focus();
+    this.inputRef.current?.focus();
     return true;
   };
   focusInputPath = () => {
-    this.inputRef?.focus();
+    this.inputRef.current?.focus();
   };
   blurInputPath = () => {
-    this.inputRef?.blur();
+    this.inputRef.current?.blur();
   };
   getInputPaths = () => {
     // The widget itself is an input, so we return a single empty list to
@@ -20526,152 +20389,57 @@ class NumericInput extends React__namespace.Component {
     /* c8 ignore next */
     return [[]];
   };
+
+  /**
+   * Sets the value of the input at the given path.
+   */
   setInputValue = (path, newValue, cb) => {
-    /* c8 ignore next */
     this.props.onChange({
       currentValue: newValue
     }, cb);
   };
+
+  /**
+   * Returns the value the user has currently input for this widget.
+   */
   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());
   }
-  handleChange = (newValue, cb) => {
-    this.props.onChange({
-      currentValue: newValue
-    }, cb);
-    this.props.trackInteraction();
-  };
-  _handleFocus = () => {
-    this.props.onFocus([]);
-    this.setState(currentState => {
-      return {
-        ...currentState,
-        isFocused: true
-      };
-    });
-  };
-  _handleBlur = () => {
-    this.props.onBlur([]);
-    this.setState(currentState => {
-      return {
-        ...currentState,
-        isFocused: false
-      };
-    });
-  };
   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__namespace.createElement("div", {
-        className: "perseus-input-right-align"
-      }, keypadInput) : keypadInput;
-    };
-    if (this.props.apiOptions.customKeypad) {
-      // TODO(charlie): Support "Review Mode".
-      return maybeRightAlignKeypadInput( /*#__PURE__*/React__namespace.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 = aphrodite.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__namespace.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__namespace.createElement(NumericInputComponent, _extends__default["default"]({}, 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.
-const unionAnswerForms = function (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 (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 = ___default["default"].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, ___default["default"].isEqual);
-  // Sort them by the order they appear in the `formExamples` list.
-  const formExampleKeys = Object.keys(formExamples);
-  return ___default["default"].sortBy(uniqueForms, form => {
-    return formExampleKeys.indexOf(form.name);
-  });
-};
+// Transforms the widget options to the props used to render the widget.
 const propsTransform = function (widgetOptions) {
-  const rendererProps = ___default["default"].extend(___default["default"].omit(widgetOptions, "answers"), {
+  // Omit the answers from the widget options since they are
+  // not needed for rendering the widget.
+  const {
+    answers: _,
+    ...rendererProps
+  } = {
+    ...widgetOptions,
     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 ___default["default"].map(answer.answerForms, form => {
+    // 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
         };
       });
     }))
-  });
+  };
   return rendererProps;
 };
 var NumericInput$1 = {
@@ -20686,23 +20454,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 = kmath.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'.
-        kmath.KhanMath.toNumericString(answer.maxError, format);
+        answerString += " \u00B1 " + kmath.KhanMath.toNumericString(answer.maxError, format);
       }
       return answerString;
     });
@@ -23237,6 +22993,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
  *
@@ -23494,7 +23251,7 @@ function ChoiceInner(props) {
     return /*#__PURE__*/React__namespace.createElement("span", null, letter);
   }
   if (correct) {
-    return /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends({}, iconCheck, {
+    return /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends__default["default"]({}, iconCheck, {
       style: {
         position: "relative",
         top: -1
@@ -23950,7 +23707,7 @@ const styles$p = aphrodite.StyleSheet.create({
     }
   }
 });
-var Choice$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__*/React__namespace.createElement(Choice, _extends({}, props, {
+var Choice$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__*/React__namespace.createElement(Choice, _extends__default["default"]({}, props, {
   forwardedRef: ref
 })));
 
@@ -23984,11 +23741,11 @@ const ChoiceNoneAbove = function (_ref) {
       strings: strings
     })
   };
-  return /*#__PURE__*/React__namespace.createElement(Choice$1, _extends({}, choiceProps, {
+  return /*#__PURE__*/React__namespace.createElement(Choice$1, _extends__default["default"]({}, choiceProps, {
     ref: forwardedRef
   }));
 };
-var ChoiceNoneAbove$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__*/React__namespace.createElement(ChoiceNoneAbove, _extends({}, props, {
+var ChoiceNoneAbove$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__*/React__namespace.createElement(ChoiceNoneAbove, _extends__default["default"]({}, props, {
   forwardedRef: ref
 })));
 
@@ -24238,7 +23995,7 @@ const BaseRadio = function (_ref) {
         className: className,
         onClick: clickHandler,
         onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
-      }, /*#__PURE__*/React__namespace.createElement(Element, _extends({}, elementProps, {
+      }, /*#__PURE__*/React__namespace.createElement(Element, _extends__default["default"]({}, elementProps, {
         ref: ref
       })))
     );
@@ -24330,7 +24087,6 @@ const styles$o = aphrodite.StyleSheet.create({
     paddingLeft: phoneMargin
     // paddingRight is handled by responsiveFieldset
   },
-
   responsiveFieldset: {
     paddingRight: phoneMargin,
     minWidth: "auto"
@@ -24574,7 +24330,6 @@ class Radio$1 extends React__namespace.Component {
       );
     }
   };
-
   render() {
     const {
       choices
@@ -24751,7 +24506,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 = ___default["default"].reduce(widgetOptions.choices, function (memo, choice) {
     return choice.correct ? memo + 1 : memo;
@@ -24777,8 +24532,8 @@ var Radio = {
   displayName: "Radio / Multiple choice",
   accessible: true,
   widget: Radio$1,
-  transform: transform,
-  staticTransform: transform,
+  transform: transform$1,
+  staticTransform: transform$1,
   version: perseusCore.radioLogic.version,
   propUpgrades: perseusCore.radioLogic.widgetOptionsUpgrades,
   isLintable: true
@@ -25360,6 +25115,7 @@ var Definition$1 = {
 
 // There are no required props, but this component can receive props from any
 // deprecated widget
+
 class DeprecatedStandin extends React__default["default"].Component {
   static contextType = PerseusI18nContext;
   // this just helps with TS weak typing when a Widget
@@ -25480,20 +25236,20 @@ class Dropdown extends React__namespace.Component {
     }, children)));
   }
 }
-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 => {
@@ -25569,7 +25325,6 @@ class Explanation extends React__namespace.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",
@@ -25725,7 +25480,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
         fontSize: 28,
         color: wonderBlocksTokens.color.green
       }
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends({}, iconStar, {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends__default["default"]({}, iconStar, {
       style: {
         marginBottom: 5
       }
@@ -25918,7 +25673,7 @@ class GradedGroup extends React__namespace.Component {
     if (this.state.status === GRADING_STATUSES.correct) {
       // TODO(jeremy): update to a WB colour
       // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
-      icon = /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends({}, iconOk, {
+      icon = /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends__default["default"]({}, iconOk, {
         style: {
           color: "#526f03"
         }
@@ -25927,7 +25682,7 @@ class GradedGroup extends React__namespace.Component {
     } else if (this.state.status === GRADING_STATUSES.incorrect) {
       // TODO(jeremy): update to a WB colour
       // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
-      icon = /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends({}, iconRemove, {
+      icon = /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends__default["default"]({}, iconRemove, {
         style: {
           color: "#ff5454"
         }
@@ -25954,7 +25709,7 @@ class GradedGroup extends React__namespace.Component {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$i.title)
-    }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
+    }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends__default["default"]({}, this.props, {
       ref: this.rendererRef,
       apiOptions: {
         ...apiOptions,
@@ -25997,7 +25752,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: false
         });
       }
-    }, this.context.strings.hideExplanation), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props.hint, {
+    }, this.context.strings.hideExplanation), /*#__PURE__*/React__namespace.createElement(Renderer, _extends__default["default"]({}, this.props.hint, {
       ref: this.hintRendererRef,
       apiOptions: apiOptions,
       linterContext: this.props.linterContext,
@@ -26222,7 +25977,7 @@ class GradedGroupSet extends React__namespace.Component {
           // TODO(jeremy): Don't spread this.props, instead
           // pass in all props GradedGroup needs explicilty
           // @ts-expect-error - TS2769 - No overload matches this call.
-          React__namespace.createElement(GradedGroup, _extends({
+          React__namespace.createElement(GradedGroup, _extends__default["default"]({
             key: i
           }, this.props, gradedGroup, {
             inGradedGroupSet: false,
@@ -26251,7 +26006,7 @@ class GradedGroupSet extends React__namespace.Component {
       onChangeCurrentGroup: currentGroup => this.setState({
         currentGroup
       })
-    })), /*#__PURE__*/React__namespace.createElement(GradedGroup, _extends({
+    })), /*#__PURE__*/React__namespace.createElement(GradedGroup, _extends__default["default"]({
       key: this.state.currentGroup
       // @ts-expect-error - TS2322 - Type 'GradedGroup | null' is not assignable to type 'GradedGroup'.
       //  Type 'null' is not assignable to type 'GradedGroup'.
@@ -26647,7 +26402,7 @@ class FunctionGrapher extends React__namespace.Component {
     }
     const functionProps = model.getPropsForCoeffs(coeffs, xRange);
     const Movable = movableTypeToComponent[model.movable];
-    return /*#__PURE__*/React__namespace.createElement(Movable, _extends({}, functionProps, {
+    return /*#__PURE__*/React__namespace.createElement(Movable, _extends__default["default"]({}, functionProps, {
       key: this.props.model.url,
       range: xRange,
       style: style
@@ -26780,7 +26535,7 @@ class FunctionGrapher extends React__namespace.Component {
         width: box[0],
         height: box[1]
       }
-    }, image, /*#__PURE__*/React__namespace.createElement(Graphie, _extends({}, this.props.graph, {
+    }, image, /*#__PURE__*/React__namespace.createElement(Graphie, _extends__default["default"]({}, this.props.graph, {
       setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
     }), this.props.model && this.renderPlot(), this.props.model && this.renderAsymptote(), this.props.model && points)));
   }
@@ -27924,7 +27679,6 @@ class Interaction extends React__namespace.Component {
           }
         });
       }
-
       if (element.type === "parametric") {
         const fn = t => {
           return [
@@ -27977,7 +27731,6 @@ class Interaction extends React__namespace.Component {
           }
         });
       }
-
       if (element.type === "label") {
         const coord = [
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -28309,7 +28062,6 @@ function scaleCommandBy(scaleFactor) {
           command.args[6] * scaleFactor // end y
           ]
         };
-
       default:
         return {
           ...command,
@@ -29069,7 +28821,6 @@ const styles$f = aphrodite.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: {
@@ -29099,7 +28850,6 @@ const styles$f = aphrodite.StyleSheet.create({
     ":hover": {
       backgroundColor: "#a1a5a9" // in between those two grays
     },
-
     ":active": {
       backgroundColor: gray68
     }
@@ -29144,7 +28894,6 @@ class InfoTip extends React__namespace.Component {
     });
     /* eslint-enable react/no-did-mount-set-state */
   }
-
   render() {
     if (this.state.didMount) {
       return /*#__PURE__*/React__namespace.createElement(InfoTipBase, this.props);
@@ -29410,7 +29159,6 @@ class NumberInput extends React__namespace.Component {
     if (val !== Math.floor(val)) {
       return; // bail if not an integer
     }
-
     if (e.key === "ArrowUp") {
       val = val + 1;
     } else if (e.key === "ArrowDown") {
@@ -29443,7 +29191,7 @@ class NumberInput extends React__namespace.Component {
       useArrowKeys,
       ...restProps
     } = this.props;
-    return /*#__PURE__*/React__namespace.createElement("input", _extends({}, restProps, {
+    return /*#__PURE__*/React__namespace.createElement("input", _extends__default["default"]({}, restProps, {
       className: classes,
       type: "text",
       ref: this.inputRef,
@@ -29488,7 +29236,7 @@ class RangeInput extends React__namespace.Component {
     const checkValidity = this.props.checkValidity || truth;
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "range-input"
-    }, /*#__PURE__*/React__namespace.createElement(NumberInput, _extends({}, this.props, {
+    }, /*#__PURE__*/React__namespace.createElement(NumberInput, _extends__default["default"]({}, this.props, {
       value: value[0],
       checkValidity: val => checkValidity([val, value[1]])
       // eslint-disable-next-line react/jsx-no-bind
@@ -29496,7 +29244,7 @@ class RangeInput extends React__namespace.Component {
       onChange: this.onChange.bind(this, 0),
       placeholder: this.props.placeholder[0],
       allowPiTruncation: this.props.allowPiTruncation
-    })), /*#__PURE__*/React__namespace.createElement(NumberInput, _extends({}, this.props, {
+    })), /*#__PURE__*/React__namespace.createElement(NumberInput, _extends__default["default"]({}, this.props, {
       value: value[1],
       checkValidity: val => checkValidity([value[0], val])
       // eslint-disable-next-line react/jsx-no-bind
@@ -29509,20 +29257,20 @@ class RangeInput extends React__namespace.Component {
 }
 
 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
 });
 
 /**
@@ -29598,17 +29346,17 @@ function GraphLockedLabelsLayer(props) {
   } = props;
   return lockedFigures.map((figure, i) => {
     if (figure.type === "label") {
-      return /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+      return /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends__default["default"]({
         key: `label-${i}`
       }, figure));
     }
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
       key: i
-    }, figure.labels?.map((label, j) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+    }, figure.labels?.map((label, j) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends__default["default"]({
       key: `${i}-label-${j}`
-    }, label))), figure.type === "line" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, figure.points[0].labels?.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+    }, label))), figure.type === "line" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, figure.points[0].labels?.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends__default["default"]({
       key: `locked-figure-${i}-point-1-label-${k}`
-    }, label))), figure.points[1].labels?.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+    }, label))), figure.points[1].labels?.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends__default["default"]({
       key: `locked-figure-${i}-point-2-label-${k}`
     }, label)))));
   });
@@ -29654,9 +29402,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: perseusCore.lockedFigureColors[color],
     style: strokeStyle,
@@ -29676,11 +29424,11 @@ const LockedFunction = props => {
     "aria-label": hasAria ? props.ariaLabel : undefined,
     "aria-hidden": !hasAria,
     role: "img"
-  }, directionalAxis === "x" && /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, _extends({
+  }, directionalAxis === "x" && /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, _extends__default["default"]({
     y: x => equation.eval({
       x
     })
-  }, plotProps)), directionalAxis === "y" && /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfY, _extends({
+  }, plotProps)), directionalAxis === "y" && /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfY, _extends__default["default"]({
     x: y => equation.eval({
       y
     })
@@ -30254,28 +30002,28 @@ const GraphLockedLayer = props => {
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lockedFigures.map((figure, index) => {
     switch (figure.type) {
       case "point":
-        return /*#__PURE__*/React__namespace.createElement(LockedPoint, _extends({
+        return /*#__PURE__*/React__namespace.createElement(LockedPoint, _extends__default["default"]({
           key: `point-${index}`
         }, figure));
       case "line":
-        return /*#__PURE__*/React__namespace.createElement(LockedLine, _extends({
+        return /*#__PURE__*/React__namespace.createElement(LockedLine, _extends__default["default"]({
           key: `line-${index}`,
           range: props.range
         }, figure));
       case "vector":
-        return /*#__PURE__*/React__namespace.createElement(LockedVector, _extends({
+        return /*#__PURE__*/React__namespace.createElement(LockedVector, _extends__default["default"]({
           key: `vector-${index}`
         }, figure));
       case "ellipse":
-        return /*#__PURE__*/React__namespace.createElement(LockedEllipse, _extends({
+        return /*#__PURE__*/React__namespace.createElement(LockedEllipse, _extends__default["default"]({
           key: `ellipse-${index}`
         }, figure));
       case "polygon":
-        return /*#__PURE__*/React__namespace.createElement(LockedPolygon, _extends({
+        return /*#__PURE__*/React__namespace.createElement(LockedPolygon, _extends__default["default"]({
           key: `polygon-${index}`
         }, figure));
       case "function":
-        return /*#__PURE__*/React__namespace.createElement(LockedFunction, _extends({
+        return /*#__PURE__*/React__namespace.createElement(LockedFunction, _extends__default["default"]({
           key: `function-${index}`
         }, figure));
       case "label":
@@ -30506,7 +30254,7 @@ const TextLabel = _ref => {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement(mafs.Text, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(mafs.Text, _extends__default["default"]({
     size: 16,
     svgTextProps: {
       filter: "url(#background)",
@@ -31217,6 +30965,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
@@ -31248,7 +30999,8 @@ const MovableLine = props => {
     onMove: p => {
       setAriaLives(["polite", "off", "off"]);
       onMovePoint(0, p);
-    }
+    },
+    constrain: getMovableLineKeyboardConstraint([start, end], snapStep, 0)
   });
   const {
     visiblePoint: visiblePoint2,
@@ -31263,7 +31015,8 @@ const MovableLine = props => {
     onMove: p => {
       setAriaLives(["off", "polite", "off"]);
       onMovePoint(1, p);
-    }
+    },
+    constrain: getMovableLineKeyboardConstraint([start, end], snapStep, 1)
   });
   const line = /*#__PURE__*/React__namespace.createElement(Line$1, {
     ariaLabel: ariaLabels?.grabHandleAriaLabel,
@@ -31369,6 +31122,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 (mafs.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 => mafs.vec.add(coord, [0, snapStep[1]])),
+    down: movePointWithConstraint(coord => mafs.vec.sub(coord, [0, snapStep[1]])),
+    left: movePointWithConstraint(coord => mafs.vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => mafs.vec.add(coord, [snapStep[0], 0]))
+  };
+};
 function trimRange(range, graphDimensionsInPixels) {
   const pixelsToTrim = 4;
   const [xRange, yRange] = range;
@@ -31725,7 +31506,8 @@ function CircleGraph(props) {
   } = props;
   const {
     center,
-    radiusPoint
+    radiusPoint,
+    snapStep
   } = graphState;
   const {
     strings,
@@ -31788,7 +31570,8 @@ function CircleGraph(props) {
     onMove: newRadiusPoint => {
       setRadiusPointAriaLive("polite");
       dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
-    }
+    },
+    constrain: getCircleKeyboardConstraint(center, radiusPoint, snapStep)
   }), /*#__PURE__*/React__namespace.createElement("g", {
     id: radiusId,
     style: a11y.srOnly
@@ -31899,6 +31682,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 (mafs.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 => mafs.vec.add(coord, [0, snapStep[1]])),
+    down: movePointWithConstraint(coord => mafs.vec.sub(coord, [0, snapStep[1]])),
+    left: movePointWithConstraint(coord => mafs.vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => mafs.vec.add(coord, [snapStep[0], 0]))
+  };
+};
 
 // Exported for testing
 function describeCircleGraph(state, i18n) {
@@ -31911,6 +31718,7 @@ function describeCircleGraph(state, i18n) {
     radiusPoint
   } = state;
   const radius = getRadius(state);
+  const isRadiusOnRight = radiusPoint[X] >= center[X];
 
   // Aria label strings
   const srCircleGraph = strings.srCircleGraph;
@@ -31918,7 +31726,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)
   });
@@ -32084,6 +31895,12 @@ const LinearSystemGraph = props => {
     locale
   } = usePerseusI18n();
   const id = React__namespace.useId();
+  const intersectionId = `${id}-intersection`;
+  const intersectionPoint = kmath.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`,
@@ -32100,16 +31917,17 @@ const LinearSystemGraph = props => {
       slopeDescription: getSlopeStringForLine(line, strings)
     };
   });
+  const individualLineDescriptions = linesAriaInfo.map(_ref => {
+    let {
+      pointsDescriptionId,
+      interceptDescriptionId,
+      slopeDescriptionId
+    } = _ref;
+    return `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`;
+  }).join(" ");
   return /*#__PURE__*/React__namespace.createElement("g", {
     "aria-label": strings.srLinearSystemGraph,
-    "aria-describedby": linesAriaInfo.map(_ref => {
-      let {
-        pointsDescriptionId,
-        interceptDescriptionId,
-        slopeDescriptionId
-      } = _ref;
-      return `${pointsDescriptionId} ${interceptDescriptionId} ${slopeDescriptionId}`;
-    }).join(" ")
+    "aria-describedby": `${individualLineDescriptions} ${intersectionId}`
   }, lines?.map((line, i) => /*#__PURE__*/React__namespace.createElement(MovableLine, {
     key: i,
     points: line,
@@ -32126,9 +31944,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));
     },
@@ -32160,7 +31984,10 @@ const LinearSystemGraph = props => {
       id: slopeDescriptionId,
       style: a11y.srOnly
     }, slopeDescription));
-  }));
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    id: intersectionId,
+    style: a11y.srOnly
+  }, intersectionDescription));
 };
 
 // Exported for testing
@@ -32826,7 +32653,8 @@ function QuadraticGraph(props) {
     graphState
   } = props;
   const {
-    coords
+    coords,
+    snapStep
   } = graphState;
   const {
     strings,
@@ -32879,6 +32707,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__namespace.createElement("g", {
@@ -32967,6 +32796,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: mafs.vec.add(coordToBeMoved, [0, snapStep[1]]),
+    down: mafs.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 => mafs.vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => mafs.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 {
@@ -33222,7 +33105,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
@@ -33261,11 +33145,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__namespace.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 => mafs.vec.add(coord, [0, snapStep[1]])),
+    down: movePointWithConstraint(coord => mafs.vec.sub(coord, [0, snapStep[1]])),
+    left: movePointWithConstraint(coord => mafs.vec.sub(coord, [snapStep[0], 0])),
+    right: movePointWithConstraint(coord => mafs.vec.add(coord, [snapStep[0], 0]))
+  };
+};
 
 // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
 const computeSine = function (x,
@@ -33317,6 +33227,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),
@@ -33324,14 +33242,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),
@@ -33353,16 +33265,17 @@ const {
   calculateAngleInDegrees,
   convertDegreesToRadians
 } = kmath.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
@@ -33374,7 +33287,9 @@ function Protractor() {
   const [center, setCenter] = React.useState(initialCenter);
   const [rotationHandleOffset, setRotationHandleOffset] = React.useState(centerToRotationHandle);
   const draggableRef = React.useRef(null);
-  useDraggable({
+  const {
+    dragging
+  } = useDraggable({
     gestureTarget: draggableRef,
     onMove: setCenter,
     point: center,
@@ -33398,10 +33313,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__namespace.createElement("image", {
-    href: protractorImage
+    href: staticUrl(protractorImage)
   }), /*#__PURE__*/React__namespace.createElement("g", {
     transform: `translate(5, ${-centerToTopLeft[1]})`,
     ref: rotationHandleRef
@@ -35333,8 +35249,8 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.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) {
-    return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, props, {
+  if (props.static && props.correct) {
+    return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends__default["default"]({}, props, {
       state: initializeGraphState({
         ...props,
         graph: props.correct
@@ -35342,7 +35258,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
       dispatch: dispatch
     }));
   }
-  return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, props, {
+  return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends__default["default"]({}, props, {
     state: state,
     dispatch: dispatch
   }));
@@ -35353,7 +35269,7 @@ const {
 } = kmath.angles;
 const {
   getLineEquation,
-  getLineIntersection,
+  getLineIntersectionString,
   magnitude,
   vector
 } = kmath.geometry;
@@ -35435,7 +35351,7 @@ class InteractiveGraph extends React__namespace.Component {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
     const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-    return /*#__PURE__*/React__namespace.createElement(StatefulMafsGraph, _extends({}, this.props, {
+    return /*#__PURE__*/React__namespace.createElement(StatefulMafsGraph, _extends__default["default"]({}, this.props, {
       ref: this.mafsRef,
       gridStep: gridStep,
       snapStep: snapStep,
@@ -35718,7 +35634,7 @@ class InteractiveGraph extends React__namespace.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") {
@@ -35870,10 +35786,10 @@ const AnswerChoices = props => {
     onToggle,
     disabled
   };
-  return props.multipleSelect ? /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.MultiSelect, _extends({}, args, {
+  return props.multipleSelect ? /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.MultiSelect, _extends__default["default"]({}, args, {
     selectedValues: selectedValues,
     onChange: selected => onAnswerChange(selected)
-  })) : /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, _extends({}, args, {
+  })) : /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, _extends__default["default"]({}, args, {
     selectedValue: selectedValues[0],
     onChange: selected => onAnswerChange([selected]),
     placeholder: props.choices[0].content // not visible, but required
@@ -36159,7 +36075,6 @@ const styles$a = aphrodite.StyleSheet.create({
   markerCorrect: {
     background: "#00880b" // WB green darkened by 18%
   },
-
   markerIncorrect: {
     background: wonderBlocksTokens.color.offBlack64
   }
@@ -36556,7 +36471,6 @@ class LabelImage extends React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
@@ -36605,7 +36519,7 @@ class LabelImage extends React__namespace.Component {
               focused,
               pressed
             } = _ref2;
-            return /*#__PURE__*/React__namespace.createElement(Marker, _extends({}, marker, {
+            return /*#__PURE__*/React__namespace.createElement(Marker, _extends__default["default"]({}, marker, {
               showCorrectness: showCorrectness,
               showSelected: opened,
               showPulsate: !markersInteracted,
@@ -36750,7 +36664,7 @@ const styles$9 = aphrodite.StyleSheet.create({
 });
 const LabelImageWithDependencies = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const deps = useDependencies();
-  return /*#__PURE__*/React__namespace.createElement(LabelImage, _extends({
+  return /*#__PURE__*/React__namespace.createElement(LabelImage, _extends__default["default"]({
     ref: ref,
     analytics: deps.analytics
   }, props));
@@ -37012,7 +36926,6 @@ class Draggable extends React__namespace.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;
     }
@@ -37356,8 +37269,7 @@ class Sortable extends React__namespace.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__namespace.createElement(Draggable, {
+      cards.push(/*#__PURE__*/React__namespace.createElement(Draggable, {
         content: item.option,
         key: item.key,
         state: item.state
@@ -37410,7 +37322,7 @@ class Sortable extends React__namespace.Component {
         this, item.key)
       }));
       if (item.state === ItemState.DRAGGING || item.state === ItemState.ANIMATING) {
-        cards.push( /*#__PURE__*/React__namespace.createElement(Placeholder, {
+        cards.push(/*#__PURE__*/React__namespace.createElement(Placeholder, {
           key: "placeholder_" + item.key,
           ref: "placeholder_" + item.key,
           width: item.width,
@@ -38024,7 +37936,7 @@ class Matrix extends React__namespace.Component {
             boxSizing: "border-box",
             backgroundColor: outside ? "#f3f3f3" : "#fff"
           };
-          MatrixInput = /*#__PURE__*/React__namespace.createElement(SimpleKeypadInput, _extends({}, inputProps, {
+          MatrixInput = /*#__PURE__*/React__namespace.createElement(SimpleKeypadInput, _extends__default["default"]({}, inputProps, {
             style: style,
             scrollable: true,
             keypadElement: this.props.keypadElement
@@ -39185,7 +39097,6 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   if (!___default["default"].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
@@ -39256,6 +39167,7 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
 
 // TODO: most widgets use some like Widget<Something, PerseusNumberLineWidgetOptions>
 // should this one?
+
 class NumberLine extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   static defaultProps = {
@@ -39400,7 +39312,7 @@ class NumberLine extends React__namespace.Component {
       setup: this._setupGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
       isMobile: this.props.apiOptions.isMobile
-    }, /*#__PURE__*/React__namespace.createElement(TickMarks, _extends({}, ___default["default"].pick(props, ["range", "numDivisions", "labelTicks", "labelStyle", "labelRange", "tickStep"]), {
+    }, /*#__PURE__*/React__namespace.createElement(TickMarks, _extends__default["default"]({}, ___default["default"].pick(props, ["range", "numDivisions", "labelTicks", "labelStyle", "labelRange", "tickStep"]), {
       isMobile: this.props.apiOptions.isMobile
     })), this._renderInequality(props), this._renderNumberLinePoint(props));
   };
@@ -39627,7 +39539,6 @@ const numberLineTransform = editorProps => {
   } else {
     numDivisions = undefined; // send to getDefaultProps()
   }
-
   ___default["default"].extend(props, {
     numLinePosition: numLinePosition,
     numDivisions: numDivisions,
@@ -39652,7 +39563,6 @@ const staticTransform$1 = editorProps => {
   } else {
     numDivisions = undefined; // send to getDefaultProps()
   }
-
   ___default["default"].extend(props, {
     numLinePosition: numLinePosition,
     numDivisions: numDivisions,
@@ -39847,7 +39757,7 @@ class Card extends React__namespace.Component {
         onTouchCancel: this.onMouseUp
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: className.join(" ")
-      }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
+      }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends__default["default"]({}, rendererProps, {
         linterContext: this.props.linterContext,
         strings: this.context.strings
       }))))
@@ -40672,7 +40582,6 @@ class Plotter extends React__namespace.Component {
       const initialY = isMobile ? c.scaleY : 0;
       for (let y = initialY; y <= c.dimY; y += c.scaleY) {
         graphie.label([0, y], kmath.KhanMath.roundToApprox(y, 2), "left", /* isTeX */true /* for the \approx symbol */);
-
         graphie.style({
           stroke: isMobile ? "#e9ebec" : "#000",
           strokeWidth: 1,
@@ -41634,7 +41543,7 @@ class Table extends React__namespace.Component {
       }, ___default["default"](columns).times(c => {
         return /*#__PURE__*/React__namespace.createElement("td", {
           key: c
-        }, /*#__PURE__*/React__namespace.createElement(InputComponent, _extends({
+        }, /*#__PURE__*/React__namespace.createElement(InputComponent, _extends__default["default"]({
           ref: getRefForPath(getInputPath(r, c)),
           type: "text",
           value: this.props.answers[r][c],
@@ -41845,10 +41754,51 @@ const init = function () {
   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") {
+    globalThis.__perseus_debug__ = globalThis.__perseus_debug__ ?? {};
+    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";
-perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
+const libVersion = "55.0.0";
+addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
   major: 12,
@@ -42004,7 +41954,7 @@ class ArticleRenderer extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement("div", {
         key: sectionIndex,
         className: "clearfix"
-      }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, section, {
+      }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends__default["default"]({}, section, {
         ref: elem => {
           if (elem) {
             this.sectionRenderers[sectionIndex] = elem;
@@ -42179,7 +42129,6 @@ class HintsRenderer extends React__namespace.Component {
       ReactDOM__default["default"].findDOMNode(this.refs["hintRenderer" + pos]).focus(); // eslint-disable-line react/no-string-refs
     }
   }
-
   _hintsVisible = () => {
     if (this.props.hintsVisible == null || this.props.hintsVisible === -1) {
       return this.props.hints.length;
@@ -42668,7 +42617,7 @@ class ServerItemRenderer extends React__namespace.Component {
     };
     const questionRenderer = /*#__PURE__*/React__namespace.createElement(context$1.Provider, {
       value: contextValue
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends__default["default"]({
       keypadElement: this.props.keypadElement,
       problemNum: this.props.problemNum,
       onInteractWithWidget: this.handleInteractWithWidget,
@@ -42717,7 +42666,7 @@ const ref = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__
   let {
     onRendered
   } = _ref;
-  return /*#__PURE__*/React__namespace.createElement(ServerItemRenderer, _extends({}, props, {
+  return /*#__PURE__*/React__namespace.createElement(ServerItemRenderer, _extends__default["default"]({}, props, {
     onRendered: onRendered,
     ref: ref
   }));
@@ -44148,24 +44097,24 @@ const ScoringUtil = {
  */
 
 Object.defineProperty(exports, 'isFailure', {
-  enumerable: true,
-  get: function () { return perseusCore.isFailure; }
+    enumerable: true,
+    get: function () { return perseusCore.isFailure; }
 });
 Object.defineProperty(exports, 'isSuccess', {
-  enumerable: true,
-  get: function () { return perseusCore.isSuccess; }
+    enumerable: true,
+    get: function () { return perseusCore.isSuccess; }
 });
 Object.defineProperty(exports, 'parseAndMigratePerseusArticle', {
-  enumerable: true,
-  get: function () { return perseusCore.parseAndMigratePerseusArticle; }
+    enumerable: true,
+    get: function () { return perseusCore.parseAndMigratePerseusArticle; }
 });
 Object.defineProperty(exports, 'parseAndMigratePerseusItem', {
-  enumerable: true,
-  get: function () { return perseusCore.parseAndMigratePerseusItem; }
+    enumerable: true,
+    get: function () { return perseusCore.parseAndMigratePerseusItem; }
 });
 Object.defineProperty(exports, 'parsePerseusItem', {
-  enumerable: true,
-  get: function () { return perseusCore.parsePerseusItem; }
+    enumerable: true,
+    get: function () { return perseusCore.parsePerseusItem; }
 });
 exports.ApiOptions = ApiOptions;
 exports.ArticleRenderer = ArticleRenderer;