@khanacademy/perseus 53.0.0 → 54.0.0

package/dist/index.js

@@ -33,7 +33,6 @@ var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var caretDown = require('@phosphor-icons/core/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/regular/caret-up.svg');
-var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
@@ -82,7 +81,6 @@ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
 var caretUp__default = /*#__PURE__*/_interopDefaultLegacy(caretUp);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
 var questionIcon__default = /*#__PURE__*/_interopDefaultLegacy(questionIcon);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
@@ -368,6 +366,10 @@ const mockStrings = {
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
   selectAnAnswer: "Select an answer",
   // The following strings are used for interactive graph SR descriptions.
+  srGraphInstructions: "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
+  srUnlimitedGraphInstructions: "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+  xAxis: "X-axis",
+  yAxis: "Y-axis",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
   addPoint: "Add Point",
   removePoint: "Remove Point",
@@ -379,7 +381,7 @@ const mockStrings = {
       x,
       y
     } = _ref27;
-    return `Point ${num} at ${x} comma ${y}`;
+    return `Point ${num} at ${x} comma ${y}.`;
   },
   srInteractiveElements: _ref28 => {
     let {
@@ -465,25 +467,37 @@ const mockStrings = {
     } = _ref37;
     return `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
   },
-  srAngleSideAtCoordinates: _ref38 => {
+  srAngleStartingSide: _ref38 => {
     let {
-      point,
-      side,
       x,
       y
     } = _ref38;
-    return `Point ${point}, ${side} at ${x} comma ${y}`;
+    return `Point 3, starting side at ${x} comma ${y}.`;
   },
-  srAngleVertexAtCoordinatesWithAngleMeasure: _ref39 => {
+  srAngleEndingSide: _ref39 => {
+    let {
+      x,
+      y
+    } = _ref39;
+    return `Point 2, ending side at ${x} comma ${y}.`;
+  },
+  srAngleVertex: _ref40 => {
+    let {
+      x,
+      y
+    } = _ref40;
+    return `Point 1, vertex at ${x} comma ${y}.`;
+  },
+  srAngleVertexWithAngleMeasure: _ref41 => {
     let {
       x,
       y,
       angleMeasure
-    } = _ref39;
-    return `Point 2, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees`;
+    } = _ref41;
+    return `Point 1, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees.`;
   },
   srAngleGraphAriaLabel: "An angle on a coordinate plane.",
-  srAngleGraphAriaDescription: _ref40 => {
+  srAngleGraphAriaDescription: _ref42 => {
     let {
       angleMeasure,
       vertexX,
@@ -492,118 +506,129 @@ const mockStrings = {
       startingSideY,
       endingSideX,
       endingSideY
-    } = _ref40;
+    } = _ref42;
     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 => {
+    let {
+      vertexX,
+      vertexY,
+      startingSideX,
+      startingSideY,
+      endingSideX,
+      endingSideY
+    } = _ref43;
+    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: _ref41 => {
+  srMultipleSegmentGraphAriaLabel: _ref44 => {
     let {
       countOfSegments
-    } = _ref41;
+    } = _ref44;
     return `${countOfSegments} segments on a coordinate plane.`;
   },
-  srMultipleSegmentIndividualLabel: _ref42 => {
+  srMultipleSegmentIndividualLabel: _ref45 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y,
       indexOfSegment
-    } = _ref42;
+    } = _ref45;
     return `Segment ${indexOfSegment}: Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSingleSegmentLabel: _ref43 => {
+  srSingleSegmentLabel: _ref46 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref43;
+    } = _ref46;
     return `Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSegmentLength: _ref44 => {
+  srSegmentLength: _ref47 => {
     let {
       length
-    } = _ref44;
+    } = _ref47;
     return `Segment length ${length} units.`;
   },
-  srSingleSegmentGraphEndpointAriaLabel: _ref45 => {
+  srSingleSegmentGraphEndpointAriaLabel: _ref48 => {
     let {
       endpointNumber,
       x,
       y
-    } = _ref45;
+    } = _ref48;
     return `Endpoint ${endpointNumber} at ${x} comma ${y}.`;
   },
-  srMultipleSegmentGraphEndpointAriaLabel: _ref46 => {
+  srMultipleSegmentGraphEndpointAriaLabel: _ref49 => {
     let {
       endpointNumber,
       x,
       y,
       indexOfSegment
-    } = _ref46;
+    } = _ref49;
     return `Endpoint ${endpointNumber} on segment ${indexOfSegment} at ${x} comma ${y}.`;
   },
-  srSegmentGrabHandle: _ref47 => {
+  srSegmentGrabHandle: _ref50 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref47;
+    } = _ref50;
     return `Segment from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
   },
   srLinearSystemGraph: "Two lines on a coordinate plane.",
-  srLinearSystemPoints: _ref48 => {
+  srLinearSystemPoints: _ref51 => {
     let {
       lineNumber,
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref48;
+    } = _ref51;
     return `Line ${lineNumber} has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`;
   },
-  srLinearSystemPoint: _ref49 => {
+  srLinearSystemPoint: _ref52 => {
     let {
       lineNumber,
       pointSequence,
       x,
       y
-    } = _ref49;
+    } = _ref52;
     return `Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`;
   },
   srRayGraph: "A ray on a coordinate plane.",
-  srRayPoints: _ref50 => {
+  srRayPoints: _ref53 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref50;
+    } = _ref53;
     return `The endpoint is at ${point1X} comma ${point1Y} and the ray goes through point ${point2X} comma ${point2Y}.`;
   },
-  srRayGrabHandle: _ref51 => {
+  srRayGrabHandle: _ref54 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref51;
+    } = _ref54;
     return `Ray with endpoint ${point1X} comma ${point1Y} going through point ${point2X} comma ${point2Y}.`;
   },
-  srRayEndpoint: _ref52 => {
+  srRayEndpoint: _ref55 => {
     let {
       x,
       y
-    } = _ref52;
+    } = _ref55;
     return `Endpoint at ${x} comma ${y}.`;
   },
-  srRayTerminalPoint: _ref53 => {
+  srRayTerminalPoint: _ref56 => {
     let {
       x,
       y
-    } = _ref53;
+    } = _ref56;
     return `Through point at ${x} comma ${y}.`;
   },
   srQuadraticGraph: "A parabola on a 4-quadrant coordinate plane.",
@@ -612,55 +637,55 @@ const mockStrings = {
   srQuadraticGraphVertexOrigin: "Vertex is at the origin.",
   srQuadraticGraphVertexXAxis: "Vertex is on the X-axis.",
   srQuadraticGraphVertexYAxis: "Vertex is on the Y-axis.",
-  srQuadraticGraphVertexQuadrant: _ref54 => {
+  srQuadraticGraphVertexQuadrant: _ref57 => {
     let {
       quadrant
-    } = _ref54;
+    } = _ref57;
     return `Vertex is in quadrant ${quadrant}.`;
   },
-  srQuadraticTwoXIntercepts: _ref55 => {
+  srQuadraticTwoXIntercepts: _ref58 => {
     let {
       intercept1,
       intercept2
-    } = _ref55;
+    } = _ref58;
     return `The X-intercepts are at ${intercept1} comma 0 and ${intercept2} comma 0.`;
   },
-  srQuadraticOneXIntercept: _ref56 => {
+  srQuadraticOneXIntercept: _ref59 => {
     let {
       intercept
-    } = _ref56;
+    } = _ref59;
     return `The X-intercept is at ${intercept} comma 0.`;
   },
-  srQuadraticYIntercept: _ref57 => {
+  srQuadraticYIntercept: _ref60 => {
     let {
       intercept
-    } = _ref57;
+    } = _ref60;
     return `The Y-intercept is at 0 comma ${intercept}.`;
   },
-  srQuadraticPointOrigin: _ref58 => {
+  srQuadraticPointOrigin: _ref61 => {
     let {
       pointNumber
-    } = _ref58;
+    } = _ref61;
     return `Point ${pointNumber} on parabola at the origin.`;
   },
-  srQuadraticPointAxis: _ref59 => {
+  srQuadraticPointAxis: _ref62 => {
     let {
       pointNumber,
       x,
       y
-    } = _ref59;
+    } = _ref62;
     return `Point ${pointNumber} on parabola at ${x} comma ${y}.`;
   },
-  srQuadraticPointQuadrant: _ref60 => {
+  srQuadraticPointQuadrant: _ref63 => {
     let {
       pointNumber,
       x,
       y,
       quadrant
-    } = _ref60;
+    } = _ref63;
     return `Point ${pointNumber} on parabola in quadrant ${quadrant} at ${x} comma ${y}.`;
   },
-  srQuadraticInteractiveElements: _ref61 => {
+  srQuadraticInteractiveElements: _ref64 => {
     let {
       point1X,
       point1Y,
@@ -668,8 +693,84 @@ const mockStrings = {
       point2Y,
       point3X,
       point3Y
-    } = _ref61;
+    } = _ref64;
     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 => {
+    let {
+      num
+    } = _ref65;
+    return `The polygon has ${num} points.`;
+  },
+  srPolygonGraphPointsOne: "The polygon has 1 point.",
+  srPolygonElementsNum: _ref66 => {
+    let {
+      num
+    } = _ref66;
+    return `A polygon with ${num} points.`;
+  },
+  srPolygonElementsOne: "A polygon with 1 point.",
+  srPolygonPointAngleApprox: _ref67 => {
+    let {
+      angle
+    } = _ref67;
+    return `Angle approximately equal to ${angle} degrees.`;
+  },
+  srPolygonPointAngle: _ref68 => {
+    let {
+      angle
+    } = _ref68;
+    return `Angle equal to ${angle} degrees.`;
+  },
+  srPolygonSideLength: _ref69 => {
+    let {
+      pointNum,
+      length
+    } = _ref69;
+    return `A line segment, length equal to ${length} units, connects to point ${pointNum}.`;
+  },
+  srPolygonSideLengthApprox: _ref70 => {
+    let {
+      pointNum,
+      length
+    } = _ref70;
+    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 => {
+    let {
+      x,
+      y
+    } = _ref71;
+    return `Midline intersection at ${x} comma ${y}.`;
+  },
+  srSinusoidPeakPoint: _ref72 => {
+    let {
+      x,
+      y
+    } = _ref72;
+    return `Extremum point at ${x} comma ${y}.`;
+  },
+  srSinusoidDescription: _ref73 => {
+    let {
+      minValue,
+      maxValue,
+      cycleStart,
+      cycleEnd
+    } = _ref73;
+    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 => {
+    let {
+      point1X,
+      point1Y,
+      point2X,
+      point2Y
+    } = _ref74;
+    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.
 };
@@ -1592,6 +1693,7 @@ const ApiOptions = {
     },
     baseElements: {
       Link: props => {
+        // eslint-disable-next-line jsx-a11y/anchor-has-content -- TODO(LEMS-2871): Address a11y error
         return /*#__PURE__*/React__namespace.createElement("a", props);
       }
     },
@@ -1992,7 +2094,6 @@ var Expression$1 = {
   propUpgrades: perseusCore.expressionLogic.widgetOptionsUpgrades,
   // For use by the editor
   isLintable: true,
-  getPublicWidgetOptions: perseusCore.getExpressionPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusExpressionRubric'.
   getOneCorrectAnswerFromRubric(rubric) {
@@ -10059,7 +10160,7 @@ class WrappedLine extends WrappedDrawing {
 
 /* eslint-disable @babel/no-invalid-this */
 const {
-  clockwise: clockwise$3,
+  clockwise: clockwise$2,
   reverseVector: reverseVector$1
 } = kmath.geometry;
 function scaledDistanceFromAngle(angle) {
@@ -11297,7 +11398,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       // Temporary objects
       ___default["default"].invoke(polygon.temp, "remove");
       polygon.temp = [];
-      const isClockwise = clockwise$3(polygon.coords);
+      const isClockwise = clockwise$2(polygon.coords);
 
       // Update angle labels
       if (polygon.angleLabels.length || polygon.showRightAngleMarkers.length) {
@@ -14730,7 +14831,7 @@ function sum(array) {
     return memo + arg;
   }, 0);
 }
-function clockwise$2(points) {
+function clockwise$1(points) {
   const segments = ___default["default"].zip(points, points.slice(1).concat(points.slice(0, 1)));
   const areas = ___default["default"].map(segments, function (segment) {
     const p1 = segment[0];
@@ -14796,7 +14897,7 @@ const draw$1 = {
     const graphie = this.graphie;
     const self = this;
     const coords = ___default["default"].invoke(state.points, "coord");
-    const isClockwise = clockwise$2(coords);
+    const isClockwise = clockwise$1(coords);
     const n = coords.length;
 
     // graphie.labelAngle and similar methods attempt to re-use the label
@@ -15968,12 +16069,17 @@ class ImageLoader extends React__namespace.Component {
       };
     }
     const staticUrl = getDependencies().staticUrl;
-    return /*#__PURE__*/React__namespace.createElement("img", _extends({
-      tabIndex: 0,
-      src: staticUrl(src),
-      onKeyUp: onKeyUp,
-      onKeyDown: onKeyDown
-    }, imgProps));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("img", _extends({
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- TODO(LEMS-2871): Address a11y error
+        tabIndex: 0,
+        src: staticUrl(src),
+        onKeyUp: onKeyUp,
+        onKeyDown: onKeyDown
+      }, imgProps))
+    );
   };
   render() {
     switch (this.state.status) {
@@ -16542,9 +16648,28 @@ class Zoomable extends React__namespace.Component {
     if (!this._isMounted) {
       return;
     }
+
+    // When a zoomable item is contained within a collapsed parent (such as an Explanation widget),
+    //      the parent node has zero width, which causes the scale to be miscalculated.
+    // Therefore, we check to see if the node has a valid width, and if it doesn't,
+    //      then we traverse up the DOM tree and look for the closest "perseus-renderer"
+    //      (which should have a width).
+    // To be cautious, we also account for the possibility that we can't find any parents with a valid width
+    //      (not that they don't exist, just that we can't find them).
+    let parentNode = this._node;
+    let currentNode = parentNode;
+    while (currentNode && currentNode.offsetWidth === 0) {
+      // When traversing up the DOM tree, we need to start at the "parentElement"
+      //      because "closest()" can match the current element,
+      //      and if it does so, then we are stuck in an infinite loop.
+      currentNode = currentNode.parentElement?.closest(".perseus-renderer") ?? null;
+    }
+    if (currentNode) {
+      parentNode = currentNode;
+    }
     const parentBounds = {
-      width: this._node.offsetWidth,
-      height: this._node.offsetHeight
+      width: parentNode.offsetWidth,
+      height: parentNode.offsetHeight
     };
     const childBounds = this.props.computeChildBounds(this._node, parentBounds);
 
@@ -16628,16 +16753,20 @@ class Zoomable extends React__namespace.Component {
       WebkitTapHighlightColor: "transparent",
       ...transitionStyle
     };
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: this.handleClick,
-      onClickCapture: this.handleClickIfZoomed,
-      onTouchCancelCapture: this.stopPropagationIfZoomed,
-      onTouchEndCapture: this.stopPropagationIfZoomed,
-      onTouchStartCapture: this.stopPropagationIfZoomed
-      // @ts-expect-error - TS2322 - Type '{ readonly transitionProperty: string; readonly transitionDuration: string; readonly transitionTimingFunction: string; readonly display: "block"; readonly width: "100%"; readonly height: number | ... 1 more ... | undefined; readonly transform: string; readonly transformOrigin: "0 0"; readonly opacity: 0 | 1; readonl...' is not assignable to type 'CSSProperties | undefined'.
-      ,
-      style: style
-    }, this.props.children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("span", {
+        onClick: this.handleClick,
+        onClickCapture: this.handleClickIfZoomed,
+        onTouchCancelCapture: this.stopPropagationIfZoomed,
+        onTouchEndCapture: this.stopPropagationIfZoomed,
+        onTouchStartCapture: this.stopPropagationIfZoomed
+        // @ts-expect-error - TS2322 - Type '{ readonly transitionProperty: string; readonly transitionDuration: string; readonly transitionTimingFunction: string; readonly display: "block"; readonly width: "100%"; readonly height: number | ... 1 more ... | undefined; readonly transform: string; readonly transformOrigin: "0 0"; readonly opacity: 0 | 1; readonl...' is not assignable to type 'CSSProperties | undefined'.
+        ,
+        style: style
+      }, this.props.children)
+    );
   }
 }
 
@@ -17860,9 +17989,6 @@ const getWidget = name => {
 const getWidgetExport = name => {
   return widgets[name] ?? null;
 };
-const getPublicWidgetOptionsFunction = name => {
-  return widgets[name]?.getPublicWidgetOptions ?? (i => i);
-};
 const getEditor = name => {
   return ___default["default"].has(editors, name) ? editors[name] : null;
 };
@@ -17999,7 +18125,6 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getWidgetExport: getWidgetExport,
-  getPublicWidgetOptionsFunction: getPublicWidgetOptionsFunction,
   getEditor: getEditor,
   getTransform: getTransform,
   getVersion: getVersion,
@@ -18075,6 +18200,7 @@ class WidgetContainer extends React__namespace.Component {
       "perseus-widget__definition": this.props.type === "definition"
     });
     const type = this.props.type;
+    const userAgent = navigator.userAgent;
     const WidgetType = getWidget(type);
     if (WidgetType == null) {
       // This is for the good of all people!!
@@ -18085,6 +18211,11 @@ class WidgetContainer extends React__namespace.Component {
         className: className
       });
     }
+    let subType = "null";
+    if (type === "interactive-graph") {
+      const props = this.state.widgetProps;
+      subType = props.graph?.type ?? "null";
+    }
     let alignment = this.state.widgetProps.alignment;
     if (alignment === "default") {
       alignment = perseusCore.CoreWidgetRegistry.getDefaultAlignment(type);
@@ -18141,12 +18272,26 @@ class WidgetContainer extends React__namespace.Component {
           widget_type: type,
           widget_id: this.props.id
         },
-        onError: () => {
+        onError: error => {
+          // TODO(LEMS-2826): Remove analytics event in LEMS-2826 in favor of ti below.
           analytics.onAnalyticsEvent({
             type: "perseus:widget-rendering-error",
             payload: {
+              widgetSubType: subType,
+              widgetType: type,
+              widgetId: this.props.id,
+              message: error.message,
+              userAgent: userAgent
+            }
+          });
+          analytics.onAnalyticsEvent({
+            type: "perseus:widget-rendering-error:ti",
+            payload: {
+              widgetSubType: subType,
               widgetType: type,
-              widgetId: this.props.id
+              widgetId: this.props.id,
+              message: error.message,
+              userAgent: userAgent
             }
           });
         }
@@ -20589,7 +20734,6 @@ var NumericInput$1 = {
   widget: NumericInput,
   transform: propsTransform,
   isLintable: true,
-  getPublicWidgetOptions: perseusCore.getNumericInputPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusNumericInputRubric'
   getOneCorrectAnswerFromRubric(rubric) {
@@ -21396,7 +21540,10 @@ class HighlightTooltip extends React__namespace.PureComponent {
     // using div instead of TooltipContent because
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
-    const content = /*#__PURE__*/React__namespace.createElement("div", {
+    const content =
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
+    React__namespace.createElement("div", {
       className: aphrodite.css(styles$x.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
@@ -21407,14 +21554,18 @@ class HighlightTooltip extends React__namespace.PureComponent {
       top: `calc(${Math.round(focusRect.top)}px + 0.95em)`,
       height: 0
     };
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: style,
-      onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave
-    }, /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
-      content: content,
-      opened: true
-    }, /*#__PURE__*/React__namespace.createElement("div", null)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("div", {
+        style: style,
+        onMouseEnter: this.props.onMouseEnter,
+        onMouseLeave: this.props.onMouseLeave
+      }, /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+        content: content,
+        opened: true
+      }, /*#__PURE__*/React__namespace.createElement("div", null)))
+    );
   }
 }
 const styles$x = aphrodite.StyleSheet.create({
@@ -23377,8 +23528,8 @@ const styles$s = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
-    top: `0px`,
-    left: `0px`
+    top: `2px`,
+    left: `2px`
   }
 });
 
@@ -23405,43 +23556,6 @@ function ChoiceInner(props) {
   }
   return /*#__PURE__*/React__namespace.createElement(InlineIcon, iconMinus);
 }
-
-// Handle dynamic styling of the multiple choice icon. Most
-// MC icon styles are constant, but we do allow the caller
-// to specify the selected color, and thus must control styles
-// related to the selected state dynamically.
-function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct) {
-  let backgroundColor;
-  let borderColor;
-  let color;
-  if (!showCorrectness && pressed) {
-    borderColor = wonderBlocksTokens.color.blue;
-    color = wonderBlocksTokens.color.blue;
-    backgroundColor = "transparent";
-  } else if (checked) {
-    const bg = showCorrectness && correct ? wonderBlocksTokens.color.green : wonderBlocksTokens.color.blue;
-    color = white;
-    backgroundColor = bg;
-    borderColor = bg;
-  } else {
-    borderColor = wonderBlocksTokens.color.offBlack64;
-    color = wonderBlocksTokens.color.offBlack64;
-  }
-
-  // define shape
-  let borderRadius;
-  if (multipleSelect) {
-    borderRadius = 3;
-  } else {
-    borderRadius = CHOICE_ICON_SIZE;
-  }
-  return {
-    backgroundColor,
-    borderColor,
-    color,
-    borderRadius
-  };
-}
 const ChoiceIcon = function (props) {
   const {
     checked,
@@ -23453,9 +23567,41 @@ const ChoiceIcon = function (props) {
     multipleSelect,
     pos,
     previouslyAnswered,
+    // Used in "review mode"/"show rationale" to show that option was previously chosen
     pressed
   } = props;
-  const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
+
+  // Accounts for incorrect choice still displaying as learner tries again
+  const choiceIsChecked = checked || showCorrectness && !correct && previouslyAnswered;
+
+  // Core styling
+  const choiceStyling = [styles$r.choiceBase, multipleSelect ? styles$r.multiSelectShape : styles$r.singleSelectShape, showCorrectness ? styles$r.choiceHasIcon : styles$r.choiceHasLetter, choiceIsChecked ? styles$r.choiceIsChecked : styles$r.choiceIsUnchecked];
+
+  // Color styling
+  // Handle dynamic styling of the multiple choice icon. Most
+  // MC icon styles are constant, but we do allow the caller
+  // to specify the selected color, and thus must control styles
+  // related to the selected state dynamically.
+  let crossOutColor;
+  if (showCorrectness && correct && checked) {
+    choiceStyling.push(styles$r.choiceCorrect);
+    crossOutColor = wonderBlocksTokens.color.green;
+  } else if (showCorrectness && !correct && (checked || previouslyAnswered)) {
+    choiceStyling.push(styles$r.choiceIncorrect);
+    crossOutColor = wonderBlocksTokens.color.red;
+  } else if (checked) {
+    // Show filled neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.choiceNeutral);
+    crossOutColor = wonderBlocksTokens.color.blue;
+  } else if (pressed) {
+    // Show outlined neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.activeNeutral);
+    crossOutColor = wonderBlocksTokens.color.blue;
+  } else {
+    // choice is not checked
+    choiceStyling.push(styles$r.uncheckedColors);
+    crossOutColor = wonderBlocksTokens.color.offBlack64;
+  }
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: aphrodite.css(styles$t.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
@@ -23463,9 +23609,8 @@ const ChoiceIcon = function (props) {
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.circleIncorrectAnswered)
+    className: aphrodite.css(...choiceStyling)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
@@ -23477,7 +23622,7 @@ const ChoiceIcon = function (props) {
     showCorrectness: showCorrectness,
     correct: correct
   })))), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
-    color: dynamicStyles.borderColor
+    color: crossOutColor
   }));
 };
 const styles$r = aphrodite.StyleSheet.create({
@@ -23489,8 +23634,7 @@ const styles$r = aphrodite.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  circle: {
-    // Make the circle
+  choiceBase: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
     boxSizing: "border-box",
@@ -23502,30 +23646,48 @@ const styles$r = aphrodite.StyleSheet.create({
     // "bold font family" so that characters which fall back to the default
     // font get bolded too.
     fontWeight: "bold",
-    fontSize: 12,
     // Center the icon wrapper.
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    // HACK(emily): I don't know why adding this line height makes the text
-    // appear centered better than any other value, but it does. In
-    // particular, at large zoom levels this line height does almost
-    // nothing, but at the default size this shifts the letter down one
-    // pixel so it is much better centered.
-    lineHeight: "1px"
-  },
-  circleCorrect: {
+    justifyContent: "center"
+  },
+  choiceHasLetter: {
+    fontSize: 12
+  },
+  choiceHasIcon: {
     fontSize: CHOICE_ICON_SIZE
   },
-  circleIncorrect: {
-    fontSize: CHOICE_ICON_SIZE,
-    borderColor: gray68,
-    color: gray68
+  choiceIsChecked: {
+    color: wonderBlocksTokens.color.white
+  },
+  choiceIsUnchecked: {
+    color: wonderBlocksTokens.color.offBlack64
+  },
+  choiceCorrect: {
+    backgroundColor: wonderBlocksTokens.color.green,
+    borderColor: wonderBlocksTokens.color.green
   },
-  circleIncorrectAnswered: {
+  choiceIncorrect: {
     backgroundColor: wonderBlocksTokens.color.red,
-    borderColor: wonderBlocksTokens.color.red,
-    color: wonderBlocksTokens.color.white
+    borderColor: wonderBlocksTokens.color.red
+  },
+  choiceNeutral: {
+    backgroundColor: wonderBlocksTokens.color.blue,
+    borderColor: wonderBlocksTokens.color.blue
+  },
+  activeNeutral: {
+    color: wonderBlocksTokens.color.blue,
+    borderColor: wonderBlocksTokens.color.blue,
+    backgroundColor: "transparent"
+  },
+  multiSelectShape: {
+    borderRadius: 3
+  },
+  singleSelectShape: {
+    borderRadius: CHOICE_ICON_SIZE
+  },
+  uncheckedColors: {
+    borderColor: wonderBlocksTokens.color.offBlack64
   }
 });
 
@@ -24120,15 +24282,19 @@ const BaseRadio = function (_ref) {
     // content somehow? Would changing our choice of key
     // somehow break something happening inside a choice's
     // child Renderers, by changing when we mount/unmount?
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      key: i,
-      ref: e => listElem = e,
-      className: className,
-      onClick: clickHandler,
-      onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
-    }, /*#__PURE__*/React__namespace.createElement(Element, _extends({}, elementProps, {
-      ref: ref
-    })));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("li", {
+        key: i,
+        ref: e => listElem = e,
+        className: className,
+        onClick: clickHandler,
+        onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
+      }, /*#__PURE__*/React__namespace.createElement(Element, _extends({}, elementProps, {
+        ref: ref
+      })))
+    );
   })));
 
   // Allow for horizontal scrolling if content is too wide, which may be
@@ -24962,8 +25128,7 @@ var Categorizer$1 = {
   staticTransform: editorProps => {
     return ___default["default"].pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getCategorizerPublicWidgetOptions
+  isLintable: true
 };
 
 /**
@@ -25173,8 +25338,7 @@ var CSProgram$1 = {
   name: "cs-program",
   displayName: "CS Program",
   widget: CSProgram,
-  hidden: true,
-  getPublicWidgetOptions: perseusCore.getCSProgramPublicWidgetOptions
+  hidden: true
 };
 
 const getPromptJSON$l = renderProps => {
@@ -25390,8 +25554,7 @@ var Dropdown$1 = {
   displayName: "Drop down",
   accessible: true,
   widget: Dropdown,
-  transform: optionsTransform,
-  getPublicWidgetOptions: perseusCore.getDropdownPublicWidgetOptions
+  transform: optionsTransform
 };
 
 const getPromptJSON$j = renderProps => {
@@ -27177,12 +27340,16 @@ class Iframe extends React__namespace.Component {
     //  that we need. This makes it a bit safer in case some content
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
-    return /*#__PURE__*/React__namespace.createElement("iframe", {
-      sandbox: sandboxProperties,
-      style: style,
-      src: url,
-      allowFullScreen: this.props.allowFullScreen
-    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/iframe-has-title -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("iframe", {
+        sandbox: sandboxProperties,
+        style: style,
+        src: url,
+        allowFullScreen: this.props.allowFullScreen
+      })
+    );
   }
 }
 var Iframe$1 = {
@@ -27207,7 +27374,7 @@ const getPromptJSON$d = renderProps => {
 
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
-const defaultBackgroundImage$2 = {
+const defaultBackgroundImage$1 = {
   url: null,
   width: 0,
   height: 0
@@ -27222,7 +27389,7 @@ class ImageWidget extends React__namespace.Component {
     title: "",
     range: [defaultRange, defaultRange],
     box: [defaultBoxSize, defaultBoxSize],
-    backgroundImage: defaultBackgroundImage$2,
+    backgroundImage: defaultBackgroundImage$1,
     labels: [],
     alt: "",
     caption: "",
@@ -27993,306 +28160,6 @@ var Interactive = {
   hidden: true
 };
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-const defaultBackgroundImage$1 = {
-  url: null
-};
-
-/* Style objects */
-const defaultInstructionsStyle = {
-  fontStyle: "italic",
-  fontWeight: "bold",
-  fontSize: "32px",
-  width: "100%",
-  height: "100%",
-  textAlign: "center",
-  backgroundColor: "white",
-  position: "absolute",
-  zIndex: 1,
-  transition: "opacity .25s ease-in-out"
-};
-const instructionsTextStyle = {
-  position: "relative",
-  top: "25%"
-};
-function numSteps$1(range, step) {
-  return Math.floor((range[1] - range[0]) / step);
-}
-class Graph extends React__namespace.Component {
-  graphieDivRef = /*#__PURE__*/React__namespace.createRef();
-  protractor;
-  ruler;
-  _graphie;
-  // @ts-expect-error - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
-  _hasSetupGraphieThisUpdate;
-  // @ts-expect-error - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
-  _shouldSetupGraphie;
-  static defaultProps = {
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    step: [1, 1],
-    gridStep: [1, 1],
-    snapStep: [0.5, 0.5],
-    markings: "graph",
-    backgroundImage: defaultBackgroundImage$1,
-    showProtractor: false,
-    showRuler: false,
-    rulerLabel: "",
-    rulerTicks: 10,
-    isMobile: false
-  };
-  componentDidMount() {
-    this._setupGraphie(true);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const potentialChanges = ["labels", "range", "step", "markings", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep"];
-    const self = this;
-    ___default["default"].each(potentialChanges, function (prop) {
-      if (!___default["default"].isEqual(self.props[prop], nextProps[prop])) {
-        self._shouldSetupGraphie = true;
-      }
-    });
-  }
-  componentDidUpdate() {
-    // Only setupGraphie once per componentDidUpdate().
-    // See explanation in setupGraphie().
-    this._hasSetupGraphieThisUpdate = false;
-    if (this._shouldSetupGraphie) {
-      this._setupGraphie(false);
-      this._shouldSetupGraphie = false;
-    }
-  }
-
-  /* Reset the graphie canvas to its initial state
-   *
-   * Use when re-rendering the parent component and you need a blank
-   * graphie.
-   */
-  reset = () => {
-    this._setupGraphie(false);
-  };
-  graphie = () => {
-    return this._graphie;
-  };
-  pointsFromNormalized = (coordsList, noSnap) => {
-    const self = this;
-    return ___default["default"].map(coordsList, function (coords) {
-      return ___default["default"].map(coords, function (coord, i) {
-        const range = self.props.range[i];
-        if (noSnap) {
-          return range[0] + (range[1] - range[0]) * coord;
-        }
-        const step = self.props.step[i];
-        const nSteps = numSteps$1(range, step);
-        const tick = Math.round(coord * nSteps);
-        return range[0] + step * tick;
-      });
-    });
-  };
-  _setupGraphie = initialMount => {
-    // Only setupGraphie once per componentDidUpdate().
-    // This prevents this component from rendering graphie
-    // and then immediately re-render graphie because its
-    // parent component asked it to. This will happen when
-    // props on the parent and props on this component both
-    // require graphie to be re-rendered.
-    if (this._hasSetupGraphieThisUpdate) {
-      return;
-    }
-    const graphieDiv = this.graphieDivRef.current;
-    // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-    $__default["default"](graphieDiv).empty();
-
-    // Content creators may need to explicitly add the dollar signs so the
-    // strings are picked up by our translation tools. However, these math
-    // annotations are redundant because we already render all graph labels
-    // in math mode. For example, a label value of `$\text{Dollars}$` will
-    // be translatable, but we only want to pass the string
-    // `\text{Dollars}` to the Graph widget.
-    const labels = this.props.labels.map(label => Util.unescapeMathMode(label));
-    const range = this.props.range;
-    // @ts-expect-error - TS2345: Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
-    const graphie = this._graphie = GraphUtils.createGraphie(graphieDiv);
-    const gridConfig = this._getGridConfig();
-    // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
-    graphie.snap = this.props.snapStep;
-    if (this.props.markings === "graph") {
-      graphie.graphInit({
-        range: range,
-        scale: kmath.vector.map(gridConfig, g => g.scale),
-        axisArrows: "<->",
-        labelFormat: function (s) {
-          return "\\small{" + s + "}";
-        },
-        gridStep: this.props.gridStep,
-        tickStep: kmath.vector.map(gridConfig, g => g.tickStep),
-        labelStep: 1,
-        unityLabels: kmath.vector.map(gridConfig, g => g.unityLabel),
-        isMobile: this.props.isMobile
-      });
-      graphie.label([0, range[1][1]], labels[1], this.props.isMobile ? "below right" : "above");
-      graphie.label([range[0][1], 0], labels[0], this.props.isMobile ? "above left" : "right");
-    } else if (this.props.markings === "grid") {
-      graphie.graphInit({
-        range: range,
-        scale: kmath.vector.map(gridConfig, g => g.scale),
-        gridStep: this.props.gridStep,
-        axes: false,
-        ticks: false,
-        labels: false,
-        isMobile: this.props.isMobile
-      });
-    } else if (this.props.markings === "none") {
-      graphie.init({
-        range: range,
-        scale: kmath.vector.map(gridConfig, g => g.scale),
-        isMobile: this.props.isMobile
-      });
-    }
-
-    // Add instructions just before mouse layer
-    const visible = 0.5;
-    const invisible = 0.0;
-    let $instructionsWrapper;
-    if (this.props.instructions) {
-      $instructionsWrapper = $__default["default"]("<div/>");
-      ___default["default"].each(defaultInstructionsStyle, function (value, key) {
-        $instructionsWrapper.css(key, value);
-      });
-      $instructionsWrapper.css("opacity", visible);
-      const $instructions = $__default["default"]("<span/>", {
-        text: this.props.instructions
-      });
-      ___default["default"].each(instructionsTextStyle, function (value, key) {
-        $instructions.css(key, value);
-      });
-      $instructionsWrapper.append($instructions);
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'append' does not exist on type 'JQueryStatic'.
-      $__default["default"](graphieDiv).append($instructionsWrapper);
-    } else {
-      $instructionsWrapper = undefined;
-    }
-
-    // Add some handlers for instructions text (if necessary)
-    const onMouseDown = $instructionsWrapper || this.props.onMouseDown ? ___default["default"].bind(function (coord) {
-      if ($instructionsWrapper) {
-        $instructionsWrapper.remove();
-        $instructionsWrapper = null;
-      }
-      // eslint-disable-next-line @babel/no-invalid-this
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      // eslint-disable-next-line @babel/no-invalid-this
-      this.props.onMouseDown(coord);
-    }, this) : undefined;
-    const onMouseOver = $instructionsWrapper ? function () {
-      $instructionsWrapper?.css("opacity", invisible);
-    } : undefined;
-    const onMouseOut = $instructionsWrapper ? function () {
-      $instructionsWrapper?.css("opacity", visible);
-    } : undefined;
-    /* eslint-enable indent */
-
-    graphie.addMouseLayer({
-      onClick: this.props.onClick,
-      onMouseDown: onMouseDown,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut,
-      onMouseMove: this.props.onMouseMove,
-      allowScratchpad: true,
-      setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
-    });
-    this._updateProtractor();
-    this._updateRuler();
-
-    // We set this flag before jumping into our callback
-    // to avoid recursing if our callback calls reset() itself
-    this._hasSetupGraphieThisUpdate = true;
-    if (!initialMount && this.props.onGraphieUpdated) {
-      // Calling a parent callback in componentDidMount is bad and
-      // results in hard-to-reason-about lifecycle problems (esp. with
-      // refs), so we do it only on update and rely on the parent to
-      // query for the graphie object on initial mount
-      this.props.onGraphieUpdated(graphie);
-    }
-  };
-  _getGridConfig = () => {
-    return kmath.vector.map(this.props.step, (step, i) => Util.gridDimensionConfig(step, this.props.range[i], this.props.box[i], this.props.gridStep[i]));
-  };
-  _updateProtractor = () => {
-    if (this.protractor) {
-      this.protractor.remove();
-    }
-    if (this.props.showProtractor) {
-      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-      const coord = this.pointsFromNormalized([[0.5, 0.05]])[0];
-      this.protractor = this._graphie.protractor(coord);
-    }
-  };
-  _updateRuler = () => {
-    if (this.ruler) {
-      this.ruler.remove();
-    }
-    if (this.props.showRuler) {
-      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-      const coord = this.pointsFromNormalized([[0.5, 0.25]])[0];
-      const extent = this._graphie.range[0][1] - this._graphie.range[0][0];
-      this.ruler = this._graphie.ruler({
-        center: coord,
-        label: this.props.rulerLabel,
-        pixelsPerUnit: this._graphie.scale[0],
-        ticksPerUnit: this.props.rulerTicks,
-        units: Math.round(0.8 * extent)
-      });
-    }
-  };
-  toJSON = () => {
-    return ___default["default"].pick(this.props, "range", "step", "markings", "labels", "backgroundImage", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep");
-  };
-  render() {
-    let image;
-    const imageData = this.props.backgroundImage;
-    if (imageData.url) {
-      const scale = this.props.box[0] / interactiveSizes$1.defaultBoxSize;
-      image = /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
-        let {
-          setAssetStatus
-        } = _ref;
-        return /*#__PURE__*/React__namespace.createElement(SvgImage
-        // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
-        , {
-          src: imageData.url,
-          width: imageData.width,
-          height: imageData.height,
-          scale: scale,
-          responsive: false,
-          setAssetStatus: setAssetStatus
-        });
-      });
-    } else {
-      image = null;
-    }
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graphie-container blank-background",
-      style: {
-        width: this.props.box[0],
-        height: this.props.box[1]
-      }
-      // @ts-expect-error - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
-      ,
-      onMouseOut: this.onMouseOut
-      // @ts-expect-error - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
-      ,
-      onMouseOver: this.onMouseOver
-      // @ts-expect-error - TS2339 - Property 'onClick' does not exist on type 'Graph'.
-      ,
-      onClick: this.onClick
-    }, image, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graphie",
-      ref: this.graphieDivRef
-    }));
-  }
-}
-
 const getPromptJSON$b = (props, userInput) => {
   return {
     type: "interactive-graph",
@@ -28857,13 +28724,19 @@ function escapeIfUnescaped(character) {
   }
 }
 
-function AxisLabels() {
+function AxisLabels(_ref) {
+  let {
+    i18n
+  } = _ref;
   const {
     range,
     labels,
     width,
     height
   } = useGraphConfig();
+  const {
+    strings
+  } = i18n;
   const yAxisLabelLocation = [0, range[Y][MAX]];
   const xAxisLabelLocation = [range[X][MAX], 0];
   const [xAxisLabelText, yAxisLabelText] = labels;
@@ -28881,6 +28754,7 @@ function AxisLabels() {
     TeX
   } = getDependencies();
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    "aria-label": strings.xAxis,
     style: {
       position: "absolute",
       left: x1,
@@ -28889,6 +28763,7 @@ function AxisLabels() {
       transform: "translate(7px, -50%)"
     }
   }, /*#__PURE__*/React__default["default"].createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default["default"].createElement("span", {
+    "aria-label": strings.yAxis,
     style: {
       position: "absolute",
       left: x2,
@@ -29697,7 +29572,6 @@ class RangeInput extends React__namespace.Component {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ButtonGroup: ButtonGroup,
-  Graph: Graph,
   Graphie: Graphie,
   HUD: HUD,
   Icon: Icon,
@@ -29841,9 +29715,9 @@ const LockedFunction = props => {
   const {
     color,
     strokeStyle,
-    directionalAxis,
-    domain
+    directionalAxis
   } = 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,
@@ -29922,14 +29796,90 @@ function Vector(props) {
   }));
 }
 
-function srFormatNumber(a, locale) {
+function srFormatNumber(a, locale, maximumFractionDigits) {
+  const piBasedNumber = getPiMultiple(a);
+  if (piBasedNumber) {
+    return piBasedNumber;
+  }
+
   // adding zero here converts negative zero to positive zero.
   return (0 + a).toLocaleString(locale, {
-    maximumFractionDigits: 3,
+    maximumFractionDigits: maximumFractionDigits ?? 3,
     useGrouping: false // no thousands separators
   });
 }
 
+// Exported for testing
+function getPiMultiple(a) {
+  // - Save some calculations by checking if this is an integer first.
+  //   If a is an integer, it's definitely not a multiple of π.
+  // - 0 should not be presented as a multiple of π.
+  // - If a is greater than 1e12, then it thinks that it's always a
+  //   multiple of π even when it's not, due to rounding errors.
+  if (Number.isInteger(a) || a === 0 || a > 1e12) {
+    return null;
+  }
+
+  // Figure out the coefficient before the π.
+  // Example: If a = π/2, then piCoefficient = 0.5
+  // Example: If a = 2π, then piCoefficient = 2
+  const piCoefficient = a / Math.PI;
+  // Truncate the coefficient to account for floating point errors.
+  // π calculations are only accurate up to precision of 1e-12.
+  const truncatedCoefficient = parseFloat(piCoefficient.toFixed(12));
+
+  // If the coefficient is already an integer, then the number
+  // is a multiple of π. Return it here.
+  // Example: If a = 2π, then truncatedCoefficient = 2, so return "2π"
+  if (Number.isInteger(truncatedCoefficient)) {
+    // Return "π" rather than "1π".
+    if (truncatedCoefficient === 1) {
+      return "π";
+    }
+
+    // Return "-π" rather than "-1π".
+    if (truncatedCoefficient === -1) {
+      return "-π";
+    }
+    return truncatedCoefficient + "π";
+  }
+
+  // If the coefficient is not an integer, then we need to
+  // check if it's a multiple of π/2, π/3, π/4, or π/6.
+  // These are π-based values on a unit circle.
+  const acceptableDivisors = [2, 3, 4, 6];
+
+  // Loop through the acceptable divisors and check if the
+  // coefficient is a multiple of (1/divisor).
+  // Example: If a = 5π/6, the coeff is 5/6, which is a multiple of 1/6.
+  // So we return "5π/6".
+  for (const divisor of acceptableDivisors) {
+    // Check if the coefficient is a multiple of (1/divisor) by
+    // multiplying the coefficient by the divisor and checking if
+    // the result is an integer.
+    // Example: If a = 5π/6, then piCoefficient = 5/6. We multiply
+    // by 6 (divisor) to get 5, which is an integer.
+    const coefficientNumerator = parseFloat(
+    // π calculations are only accurate up to precision of 1e-12.
+    (piCoefficient * divisor).toFixed(12));
+    if (Number.isInteger(coefficientNumerator)) {
+      // Handle the case where the coefficient numberator is just 1.
+      // We don't want to write "π/6" as "1π/6"
+      if (coefficientNumerator === 1) {
+        return "π/" + divisor;
+      }
+
+      // Handle the case where the coefficient numberator is just -1.
+      // We don't want to write "π/6" as "-1π/6"
+      if (coefficientNumerator === -1) {
+        return "-π/" + divisor;
+      }
+      return coefficientNumerator + "π/" + divisor;
+    }
+  }
+  return null;
+}
+
 /**
  * Given a ray and a rectangular box, find the point where the ray intersects
  * the edge of the box. Assumes the `initialPoint` is inside the box.
@@ -30104,6 +30054,95 @@ a, b, c) {
   return [x1, x2];
 }
 
+/**
+ * Given a list of points, return the angle made by the point at index i
+ * with the points at indices i - 1 and i + 1.
+ */
+function getAngleFromPoints(points, i) {
+  // Make sure the index is valid.
+  if (i < 0 || i >= points.length || !Number.isInteger(i)) {
+    return null;
+  }
+
+  // If there are fewer than 3 points, there is no angle.
+  if (points.length < 3) {
+    return null;
+  }
+
+  // Get the points at the current index and the two adjacent points.
+  const point = points.at(i);
+  const pt1 = points.at(i - 1);
+  const pt2 = points[(i + 1) % points.length];
+  if (!point || !pt1 || !pt2) {
+    return null;
+  }
+
+  // Get the lengths of adjacent sides, making a triangle
+  // we can use to calculate the angle.
+  const a = mafs.vec.dist(point, pt1);
+  const b = mafs.vec.dist(point, pt2);
+  const c = mafs.vec.dist(pt1, pt2);
+
+  // Law of cosines
+  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  return angle;
+}
+function getSideLengthsFromPoints(points, i, isPolygonOpen) {
+  if (i < 0 || i >= points.length || !Number.isInteger(i)) {
+    return [];
+  }
+  if (points.length < 2) {
+    return [];
+  }
+  const returnArray = [];
+  const point = points[i];
+  // If this point is the first point, then side 1 is the
+  // last point in the list.
+  const point1Index = i === 0 ? points.length - 1 : i - 1;
+  const point1 = points[point1Index];
+  // Make sure the previous point is not the same
+  // as the current point.
+  const side1 = i !== point1Index ? mafs.vec.dist(point, point1) : null;
+  // The first side of the first point does not exist if
+  // the polygon is open.
+  if (side1 && !(isPolygonOpen && i === 0)) {
+    returnArray.push({
+      pointIndex: point1Index,
+      sideLength: side1
+    });
+  }
+
+  // See if there is a side 2.
+  const point2Index = (i + 1) % points.length;
+  const point2 = points[point2Index];
+  // Make sure that the next point is not the same as the
+  // current point, and don't repeat the first point.
+  const side2 = i !== point2Index && point2Index !== point1Index ? mafs.vec.dist(point, point2) : null;
+  // The second side of the last point does not exist if
+  // the polygon is open.
+  if (side2 && !(isPolygonOpen && i === points.length - 1)) {
+    returnArray.push({
+      pointIndex: point2Index,
+      sideLength: side2
+    });
+  }
+  return returnArray;
+}
+
+/**
+ * Determine whether to determine the string with the
+ * exact side length or the approximate side length.
+ */
+function getPolygonSideString(sideLength, pointIndex, strings, locale) {
+  return Number.isInteger(sideLength) ? strings.srPolygonSideLength({
+    pointNum: pointIndex + 1,
+    length: `${sideLength}`
+  }) : strings.srPolygonSideLengthApprox({
+    pointNum: pointIndex + 1,
+    length: srFormatNumber(sideLength, locale, 1)
+  });
+}
+
 const {
   calculateAngleInDegrees: calculateAngleInDegrees$2
 } = kmath.angles;
@@ -30551,7 +30590,7 @@ const SvgDefs = () => /*#__PURE__*/React__default["default"].createElement("defs
 })));
 
 const {
-  clockwise: clockwise$1
+  clockwise
 } = kmath.geometry;
 const {
   getAngleFromVertex: getAngleFromVertex$1
@@ -30566,7 +30605,7 @@ const PolygonAngle = _ref => {
     snapTo
   } = _ref;
   const [centerX, centerY] = centerPoint;
-  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
+  const areClockwise = clockwise([centerPoint, ...endPoints]);
   const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
   const radius = 0.3;
   const a = mafs.vec.dist(centerPoint, endPoints[0]);
@@ -30639,7 +30678,7 @@ const Angle = _ref2 => {
     range
   } = _ref2;
   // Check if the points are clockwise or not, depending on whether we allow reflex angles
-  const areClockwise = clockwise$1([...coords, vertex]);
+  const areClockwise = clockwise([...coords, vertex]);
   const shouldReverseCoords = areClockwise && !allowReflexAngles;
 
   // Reverse the coordinates accordingly to ensure the angle is calculated correctly
@@ -31008,6 +31047,34 @@ function range(min, max) {
   return result;
 }
 
+function Hairlines(props) {
+  const {
+    point
+  } = props;
+  const {
+    range
+  } = useGraphConfig();
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [[x, y]] = useTransformVectorsToPixels(point);
+  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
+  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
+  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
+  return /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: wonderBlocksTokens.color.blue
+  }), /*#__PURE__*/React__namespace.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: wonderBlocksTokens.color.blue
+  }));
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -31017,7 +31084,6 @@ const hitboxSizePx = 48;
 // on an interactive graph.
 const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   const {
-    range,
     markings,
     showTooltips
   } = useGraphConfig();
@@ -31025,6 +31091,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     point,
     color = wonderBlocksTokens.color.blue,
     dragging,
+    focused,
     cursor,
     showFocusRing,
     onClick = () => {}
@@ -31038,25 +31105,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   })?.[0] ?? "blue";
   const pointClasses = classNames("movable-point", dragging && "movable-point--dragging", showFocusRing && "movable-point--focus");
   const [[x, y]] = useTransformVectorsToPixels(point);
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
-  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
-  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
-  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
-  const showHairlines = dragging && markings !== "none";
-  const hairlines = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
-    x1: verticalStartX,
-    y1: y,
-    x2: verticalEndX,
-    y2: y,
-    stroke: color
-  }), /*#__PURE__*/React__namespace.createElement("line", {
-    x1: x,
-    y1: horizontalStartY,
-    x2: x,
-    y2: horizontalEndY,
-    stroke: color
-  }));
+  const showHairlines = (dragging || focused) && markings !== "none";
   const svgForPoint = /*#__PURE__*/React__namespace.createElement("g", {
     ref: hitboxRef,
     className: pointClasses,
@@ -31092,7 +31141,9 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     },
     "data-testid": "movable-point__center"
   }));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && /*#__PURE__*/React__namespace.createElement(Hairlines, {
+    point: point
+  }), showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
     autoUpdate: true,
     backgroundColor: wbColorName,
     content: `(${point[X]}, ${point[Y]})`,
@@ -31188,6 +31239,7 @@ function useControlPoint(params) {
     },
     point: point,
     dragging: dragging,
+    focused: focused,
     color: color,
     ref: visiblePointRef,
     showFocusRing: focused
@@ -31405,13 +31457,13 @@ const {
   getClockwiseAngle: getClockwiseAngle$2,
   polar: polar$1
 } = kmath.angles;
-function renderAngleGraph(state, dispatch) {
+function renderAngleGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(AngleGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getAngleGraphDescription(state, i18n)
   };
 }
 function AngleGraph(props) {
@@ -31422,6 +31474,9 @@ function AngleGraph(props) {
   const {
     graphDimensionsInPixels
   } = useGraphConfig();
+  const i18n = usePerseusI18n();
+  const id = React__namespace.useId();
+  const descriptionId = id + "-description";
   const {
     coords,
     showAngles,
@@ -31471,80 +31526,106 @@ function AngleGraph(props) {
     showAngles: showAngles || false // Whether to show the angle or not
   };
 
+  // Aria strings
   const {
-    strings,
-    locale
-  } = usePerseusI18n();
-  const angleMeasure = srFormatNumber(getClockwiseAngle$2([endPoints[0], centerPoint, endPoints[1]], allowReflexAngles), locale);
-  const wholeAngleAriaLabel = strings.srAngleGraphAriaLabel;
-  const wholeAngleDescription = strings.srAngleGraphAriaDescription({
-    angleMeasure,
-    vertexX: srFormatNumber(coords[1][X], locale),
-    vertexY: srFormatNumber(coords[1][Y], locale),
-    startingSideX: srFormatNumber(coords[2][X], locale),
-    startingSideY: srFormatNumber(coords[2][Y], locale),
-    endingSideX: srFormatNumber(coords[0][X], locale),
-    endingSideY: srFormatNumber(coords[0][Y], locale)
-  });
-  const formatCoordinates = (x, y) => ({
-    x: srFormatNumber(x, locale),
-    y: srFormatNumber(y, locale)
-  });
-  const formatSideAriaLabel = (side, newPoint) => {
-    const formattedCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
-    const label = side === "terminal" ? strings.srAngleSideAtCoordinates({
-      point: 1,
-      side: "terminal side",
-      ...formattedCoordinates
-    }) : strings.srAngleSideAtCoordinates({
-      point: 3,
-      side: "initial side",
-      ...formattedCoordinates
-    });
-    return label;
-  };
-  const formatVertexAriaLabel = newPoint => {
-    const formattedVertexCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
-    const label = showAngles ? strings.srAngleVertexAtCoordinatesWithAngleMeasure({
-      ...formattedVertexCoordinates,
-      angleMeasure: angleMeasure
-    }) : strings.srAngleSideAtCoordinates({
-      point: 2,
-      side: "vertex",
-      ...formattedVertexCoordinates
-    });
-    return label;
-  };
-  const initialSideAriaLabel = formatSideAriaLabel("initial", coords[2]);
-  const terminalSideAriaLabel = formatSideAriaLabel("terminal", coords[0]);
-  const vertexAriaLabel = formatVertexAriaLabel(coords[1]);
+    srAngleGraphAriaLabel,
+    srAngleGraphAriaDescription,
+    srAngleStartingSide,
+    srAngleEndingSide,
+    srAngleVertex
+  } = describeAngleGraph(graphState, i18n);
 
   // Render the lines, angle, and then movable points
   return /*#__PURE__*/React__namespace.createElement("g", {
-    "aria-label": wholeAngleAriaLabel,
-    "aria-describedby": "angle-description"
+    "aria-label": srAngleGraphAriaLabel,
+    "aria-describedby": descriptionId
   }, svgLines, /*#__PURE__*/React__namespace.createElement(Angle, angleParams), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[1],
     sequenceNumber: 1,
     constrain: p => p,
     onMove: destination => dispatch(actions.angle.movePoint(1, destination)),
-    ariaLabel: vertexAriaLabel
+    ariaLabel: srAngleVertex
   }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[0],
     sequenceNumber: 2,
     constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(0, destination)),
-    ariaLabel: terminalSideAriaLabel
+    ariaLabel: srAngleEndingSide
   }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[2],
     sequenceNumber: 3,
     constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(2, destination)),
-    ariaLabel: initialSideAriaLabel
+    ariaLabel: srAngleStartingSide
   }), /*#__PURE__*/React__namespace.createElement("g", {
-    id: "angle-description",
+    id: descriptionId,
     style: a11y.srOnly
-  }, wholeAngleDescription));
+  }, srAngleGraphAriaDescription));
+}
+function getAngleGraphDescription(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  return strings.srInteractiveElements({
+    elements: strings.srAngleInteractiveElements({
+      vertexX: srFormatNumber(coords[1][X], locale),
+      vertexY: srFormatNumber(coords[1][Y], locale),
+      startingSideX: srFormatNumber(coords[2][X], locale),
+      startingSideY: srFormatNumber(coords[2][Y], locale),
+      endingSideX: srFormatNumber(coords[0][X], locale),
+      endingSideY: srFormatNumber(coords[0][Y], locale)
+    })
+  });
+}
+function describeAngleGraph(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords,
+    allowReflexAngles,
+    showAngles
+  } = state;
+  const [endingSide, vertex, startingSide] = coords;
+  const angleMeasure = srFormatNumber(getClockwiseAngle$2(coords, allowReflexAngles), locale);
+  const srAngleGraphAriaLabel = strings.srAngleGraphAriaLabel;
+  const srAngleGraphAriaDescription = strings.srAngleGraphAriaDescription({
+    angleMeasure,
+    vertexX: srFormatNumber(vertex[X], locale),
+    vertexY: srFormatNumber(vertex[Y], locale),
+    startingSideX: srFormatNumber(startingSide[X], locale),
+    startingSideY: srFormatNumber(startingSide[Y], locale),
+    endingSideX: srFormatNumber(endingSide[X], locale),
+    endingSideY: srFormatNumber(endingSide[Y], locale)
+  });
+  const srAngleStartingSide = strings.srAngleStartingSide({
+    x: srFormatNumber(startingSide[X], locale),
+    y: srFormatNumber(startingSide[Y], locale)
+  });
+  const srAngleEndingSide = strings.srAngleEndingSide({
+    x: srFormatNumber(endingSide[X], locale),
+    y: srFormatNumber(endingSide[Y], locale)
+  });
+  const srAngleVertex = showAngles ? strings.srAngleVertexWithAngleMeasure({
+    x: srFormatNumber(vertex[X], locale),
+    y: srFormatNumber(vertex[Y], locale),
+    angleMeasure
+  }) : strings.srAngleVertex({
+    x: srFormatNumber(vertex[X], locale),
+    y: srFormatNumber(vertex[Y], locale)
+  });
+  return {
+    srAngleGraphAriaLabel,
+    srAngleGraphAriaDescription,
+    srAngleStartingSide,
+    srAngleEndingSide,
+    srAngleVertex
+  };
 }
 const positiveX = [1, 0];
 const negativeX = [-1, 0];
@@ -31586,9 +31667,6 @@ function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
   };
 }
 
-const {
-  clockwise
-} = kmath.geometry;
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return {
@@ -31665,17 +31743,9 @@ function getGradableGraph(state, initialGraph) {
     };
   }
   if (state.type === "angle" && initialGraph.type === "angle") {
-    // We're going to reverse the coords for scoring if the angle is clockwise and
-    // we don't allow reflex angles. This is because the angle is largely defined
-    // by the order of the points in the coords array, and we want to maintain
-    // the same angle scoring with the legacy graph (which had a bug).
-    // (LEMS-2190): When we remove the legacy graph, move this logic to the scoring function.
-    const areClockwise = clockwise([state.coords[0], state.coords[2], state.coords[1]]);
-    const shouldReverseCoords = areClockwise && !state.allowReflexAngles;
-    const coords = shouldReverseCoords ? state.coords.slice().reverse() : state.coords;
     return {
       ...initialGraph,
-      coords,
+      coords: state.coords,
       allowReflexAngles: state.allowReflexAngles
     };
   }
@@ -31699,17 +31769,16 @@ function getRadius(graph) {
   return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
 }
 
-function renderCircleGraph(state, dispatch) {
+function renderCircleGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(CircleGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(CircleGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getCircleGraphDescription(state, i18n)
   };
 }
+// Exported for testing
 function CircleGraph(props) {
   const {
     dispatch,
@@ -31802,6 +31871,7 @@ function MovableCircle(props) {
     snapStep,
     disableKeyboardInteraction
   } = useGraphConfig();
+  const [focused, setFocused] = React__namespace.useState(false);
   const draggableRef = React.useRef(null);
   const {
     dragging
@@ -31820,7 +31890,9 @@ function MovableCircle(props) {
     ref: draggableRef,
     role: "button",
     tabIndex: disableKeyboardInteraction ? -1 : 0,
-    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
+    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
   }, /*#__PURE__*/React__namespace.createElement("ellipse", {
     className: "focus-ring",
     cx: centerPx[X],
@@ -31835,19 +31907,29 @@ function MovableCircle(props) {
     rx: radiiPx[X],
     ry: radiiPx[Y]
   }), /*#__PURE__*/React__namespace.createElement(DragHandle, {
-    center: center
+    center: center,
+    dragging: dragging,
+    focused: focused
   }));
 }
 const dragHandleDimensions = [24, 14];
 const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
 function DragHandle(props) {
   const {
-    center
+    center,
+    dragging,
+    focused
   } = props;
-  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const [centerPx] = useTransformVectorsToPixels(center);
+  const {
+    markings
+  } = useGraphConfig();
+  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const topLeft = mafs.vec.sub(centerPx, mafs.vec.scale(dragHandleDimensions, 0.5));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
+  const showHairlines = (dragging || focused) && markings !== "none";
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && /*#__PURE__*/React__namespace.createElement(Hairlines, {
+    point: center
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
     className: "movable-circle-handle",
     x: topLeft[X],
     y: topLeft[Y],
@@ -31874,14 +31956,7 @@ function crossProduct(as, bs) {
   }
   return result;
 }
-function CircleGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // The reason that CircleGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getCircleGraphDescription(state, i18n) {
   const strings = describeCircleGraph(state, i18n);
   return strings.srCircleInteractiveElement;
 }
@@ -31934,15 +32009,13 @@ function describeCircleGraph(state, i18n) {
   };
 }
 
-function renderLinearGraph(state, dispatch) {
+function renderLinearGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(LinearGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(LinearGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getLinearGraphDescription(state, i18n)
   };
 }
 const LinearGraph = (props, key) => {
@@ -32007,14 +32080,7 @@ const LinearGraph = (props, key) => {
     style: a11y.srOnly
   }, slopeString));
 };
-function LinearGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // The reason that LinearGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getLinearGraphDescription(state, i18n) {
   const strings = describeLinearGraph(state, i18n);
   return strings.srLinearInteractiveElement;
 }
@@ -32058,15 +32124,13 @@ function describeLinearGraph(state, i18n) {
   };
 }
 
-function renderLinearSystemGraph(state, dispatch) {
+function renderLinearSystemGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(LinearSystemGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(LinearSystemGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getLinearSystemGraphDescription(state, i18n)
   };
 }
 const LinearSystemGraph = props => {
@@ -32159,19 +32223,9 @@ const LinearSystemGraph = props => {
     }, slopeDescription));
   }));
 };
-function LinearSystemGraphDescription(_ref3) {
-  let {
-    state
-  } = _ref3;
-  // The reason that LinearSystemGraphDescription is a component (rather
-  // than a function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
-  return describeLinearSystemGraph(state, i18n);
-}
 
 // Exported for testing
-function describeLinearSystemGraph(state, i18n) {
+function getLinearSystemGraphDescription(state, i18n) {
   const {
     strings,
     locale
@@ -32197,15 +32251,13 @@ function describeLinearSystemGraph(state, i18n) {
   });
 }
 
-function renderPointGraph(state, dispatch) {
+function renderPointGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(PointGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(PointGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getPointGraphDescription(state, i18n)
   };
 }
 function PointGraph(props) {
@@ -32227,7 +32279,9 @@ function PointGraph(props) {
     if (focusedIndex != null) {
       pointsRef.current[focusedIndex]?.focus();
     }
-  }, [props.graphState.focusedPointIndex, pointsRef]);
+  }, [props.graphState.focusedPointIndex,
+  // Ensure that we re-focus if a point is deleted.
+  props.graphState.coords.length, pointsRef]);
   const statefulProps = {
     ...props,
     graphConfig,
@@ -32299,18 +32353,9 @@ function UnlimitedPointGraph(statefulProps) {
     }
   })));
 }
-function PointGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // PointGraphDescription needs to `usePerseusI18n`, so it has to be a
-  // component rather than a function that simply returns a string.
-  const i18n = usePerseusI18n();
-  return describePointGraph(state, i18n);
-}
 
 // Exported for testing
-function describePointGraph(state, i18n) {
+function getPointGraphDescription(state, i18n) {
   const {
     strings,
     locale
@@ -32318,8 +32363,8 @@ function describePointGraph(state, i18n) {
   if (state.coords.length === 0) {
     return strings.srNoInteractiveElements;
   }
-  const pointDescriptions = state.coords.map((_ref2, index) => {
-    let [x, y] = _ref2;
+  const pointDescriptions = state.coords.map((_ref, index) => {
+    let [x, y] = _ref;
     return strings.srPointAtCoordinates({
       num: index + 1,
       x: srFormatNumber(x, locale),
@@ -32327,17 +32372,20 @@ function describePointGraph(state, i18n) {
     });
   });
   return strings.srInteractiveElements({
-    elements: pointDescriptions.join(", ")
+    elements: pointDescriptions.join(" ")
   });
 }
 
-function renderPolygonGraph(state, dispatch) {
+const {
+  convertRadiansToDegrees
+} = kmath.angles;
+function renderPolygonGraph(state, dispatch, i18n, markings) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(PolygonGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getPolygonGraphDescription(state, i18n, markings)
   };
 }
 const PolygonGraph = props => {
@@ -32396,7 +32444,9 @@ const PolygonGraph = props => {
     if (focusedIndex != null) {
       pointsRef.current[focusedIndex]?.focus();
     }
-  }, [props.graphState.focusedPointIndex, pointsRef]);
+  }, [props.graphState.focusedPointIndex,
+  // Ensure that we re-focus if a point is deleted.
+  props.graphState.coords.length, pointsRef]);
 
   // If the unlimited polygon is rendered with 3 or more coordinates
   // Close the polygon, but only on first render.
@@ -32422,7 +32472,7 @@ const PolygonGraph = props => {
     focusVisible,
     setFocusVisible
   };
-  return numSides === "unlimited" ? UnlimitedPolygonGraph(statefulProps) : LimitedPolygonGraph(statefulProps);
+  return numSides === "unlimited" ? /*#__PURE__*/React__namespace.createElement(UnlimitedPolygonGraph, statefulProps) : /*#__PURE__*/React__namespace.createElement(LimitedPolygonGraph, statefulProps);
 };
 const LimitedPolygonGraph = statefulProps => {
   const {
@@ -32447,8 +32497,39 @@ const LimitedPolygonGraph = statefulProps => {
   const {
     disableKeyboardInteraction
   } = graphConfig;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React__namespace.useId();
+  const pointsOffArray = Array(points.length).fill("off");
+  // When moving an element, set its aria-live to "polite" and the others
+  // to "off". Otherwise, other connected elements that move at the same
+  // time might override the currently focused element's aria live.
+  const [ariaLives, setAriaLives] = React__namespace.useState([
+  // First one represents the aria-live value for the polygon itself.
+  "off",
+  // The rest represent the points.
+  ...pointsOffArray]);
   const lines = getLines(points);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
+  const polygonPointsNumId = id + "-points-num";
+  const polygonPointsId = id + "-points";
+
+  // Aria label srings
+  const {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints,
+    srPolygonElementsNum
+  } = describePolygonGraph(statefulProps.graphState, {
+    strings,
+    locale
+  }, statefulProps.graphConfig.markings);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolygonProps: {
@@ -32474,13 +32555,17 @@ const LimitedPolygonGraph = statefulProps => {
     });
   }), showSides && lines.map((_ref, i) => {
     let [start, end] = _ref;
+    // Use x and y to find the position of the label
     const [x, y] = mafs.vec.midpoint(start, end);
-    const length = parseFloat(mafs.vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
+    const length = mafs.vec.dist(start, end);
+    // Check if the length needs to indicate
+    // that it's an approximation.
+    const isApprox = !Number.isInteger(length);
     return /*#__PURE__*/React__namespace.createElement(TextLabel, {
       key: "side-" + i,
       x: x,
       y: y
-    }, !Number.isInteger(length) && "≈ ", length);
+    }, isApprox ? `≈ ${length.toFixed(snapTo === "sides" ? 0 : 1)}` : length);
   }), /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
     points: [...points],
     color: "transparent",
@@ -32500,27 +32585,80 @@ const LimitedPolygonGraph = statefulProps => {
         setFocusVisible(hasFocusVisible(polygonRef.current));
       },
       // Required for lines to darken on focus
-      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
+      onFocus: () => {
+        setFocusVisible(hasFocusVisible(polygonRef.current));
+        setAriaLives(() => ["polite", ...pointsOffArray]);
+      },
       // Required for line weighting to update on blur. Without this,
       // the user has to hover over the shape for it to update
       onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
-      className: "movable-polygon"
-    }
-  }), points.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
-    key: "point-" + i,
-    constrain: constrain,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => {
-      const now = Date.now();
-      const targetFPS = 40;
-      const moveThresholdTime = 1000 / targetFPS;
-      if (now - lastMoveTimeRef.current > moveThresholdTime) {
-        dispatch(actions.polygon.movePoint(i, destination));
-        lastMoveTimeRef.current = now;
-      }
+      className: "movable-polygon",
+      // Accessibility-related fields
+      role: "button",
+      "aria-label": srPolygonGraphPoints ? `${srPolygonElementsNum} ${srPolygonGraphPoints}` : srPolygonElementsNum,
+      "aria-live": ariaLives[0]
     }
-  })));
+  }), points.map((point, i) => {
+    const angleId = `${id}-angle-${i}`;
+    const side1Id = `${id}-point-${i}-side-1`;
+    const side2Id = `${id}-point-${i}-side-2`;
+
+    // Limited polygons always have an angle at each vertex.
+    const angle = getAngleFromPoints(points, i);
+    const angleDegree = angle ? convertRadiansToDegrees(angle) : null;
+
+    // Limited polygons always two sides attached to each vertex.
+    const sidesArray = getSideLengthsFromPoints(points, i);
+    const {
+      pointIndex: point1Index,
+      sideLength: side1Length
+    } = sidesArray[0];
+    const {
+      pointIndex: point2Index,
+      sideLength: side2Length
+    } = sidesArray[1];
+    return /*#__PURE__*/React__namespace.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+      ariaDescribedBy: `${angleId} ${side1Id} ${side2Id}`,
+      ariaLive: ariaLives[i + 1],
+      constrain: constrain,
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => {
+        const now = Date.now();
+        const targetFPS = 40;
+        const moveThresholdTime = 1000 / targetFPS;
+        if (now - lastMoveTimeRef.current > moveThresholdTime) {
+          dispatch(actions.polygon.movePoint(i, destination));
+          lastMoveTimeRef.current = now;
+        }
+      },
+      onFocus: () => {
+        const newPointAriaLives = [...pointsOffArray];
+        newPointAriaLives[i] = "polite";
+        // Whole polygon is "off", and the current
+        // point is "polite".
+        setAriaLives(["off", ...newPointAriaLives]);
+      }
+    }), angleDegree && /*#__PURE__*/React__namespace.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), /*#__PURE__*/React__namespace.createElement("g", {
+      id: side1Id
+    }, getPolygonSideString(side1Length, point1Index, strings, locale)), /*#__PURE__*/React__namespace.createElement("g", {
+      id: side2Id
+    }, getPolygonSideString(side2Length, point2Index, strings, locale)));
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsNumId,
+    style: a11y.srOnly
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsId,
+    style: a11y.srOnly
+  }, srPolygonGraphPoints));
 };
 const UnlimitedPolygonGraph = statefulProps => {
   const {
@@ -32535,6 +32673,19 @@ const UnlimitedPolygonGraph = statefulProps => {
     coords,
     closedPolygon
   } = statefulProps.graphState;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React__namespace.useId();
+  const polygonPointsNumId = id + "-points-num";
+  const polygonPointsId = id + "-points";
+
+  // When moving an element, set its aria-live to "polite" and the others
+  // to "off". Otherwise, other connected elements that move at the same
+  // time might override the currently focused element's aria live.
+  const pointsOffArray = Array(points.length).fill("off");
+  const [ariaLives, setAriaLives] = React__namespace.useState(pointsOffArray);
 
   // If the polygon is closed, return a LimitedPolygon component.
   if (closedPolygon) {
@@ -32549,7 +32700,22 @@ const UnlimitedPolygonGraph = statefulProps => {
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
   const heightPx = graphDimensionsInPixels[1];
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
+
+  // Aria label srings
+  const emptyGraph = coords.length === 0;
+  const {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints
+  } = describePolygonGraph(statefulProps.graphState, {
+    strings,
+    locale
+  }, statefulProps.graphConfig.markings);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": emptyGraph ? strings.srUnlimitedPolygonEmpty : srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolylineProps: {
@@ -32574,28 +32740,71 @@ const UnlimitedPolygonGraph = statefulProps => {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.polygon.addPoint(graphCoordinates[0]));
     }
-  }), coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
-    ref: ref => {
-      pointsRef.current[i] = ref;
-    },
-    onFocus: () => {
-      dispatch(actions.polygon.focusPoint(i));
-    },
-    onClick: () => {
-      // If the point being clicked is the first point and
-      // there's enough non-duplicated points to form
-      // a polygon (3 or more), close the shape before
-      // setting focus.
-      if (i === 0 && getArrayWithoutDuplicates(coords).length >= 3) {
-        dispatch(actions.polygon.closePolygon());
-      }
-      dispatch(actions.polygon.clickPoint(i));
+  }), coords.map((point, i) => {
+    const angleId = `${id}-angle-${i}`;
+    let sideIds = "";
+
+    // This point only has an angle if it's not the first
+    // or last point in this open polygon.
+    const hasAngle = i > 0 && i < coords.length - 1;
+    const angle = hasAngle ? getAngleFromPoints(points, i) : null;
+    const angleDegree = angle ? convertRadiansToDegrees(angle) : null;
+    const sidesArray = getSideLengthsFromPoints(points, i, true);
+    for (let sideIndex = 0; sideIndex < sidesArray.length; sideIndex++) {
+      sideIds += `${id}-point-${i}-side-${sideIndex} `;
     }
-  })));
+    return /*#__PURE__*/React__namespace.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+      ariaDescribedBy: `${angleId} ${sideIds}`,
+      ariaLive: ariaLives[i],
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
+      ref: ref => {
+        pointsRef.current[i] = ref;
+      },
+      onFocus: () => {
+        dispatch(actions.polygon.focusPoint(i));
+        const newPointAriaLives = [...pointsOffArray];
+        newPointAriaLives[i] = "polite";
+        // Whole polygon is "off", and the current
+        // point is "polite".
+        setAriaLives([...newPointAriaLives]);
+      },
+      onClick: () => {
+        // If the point being clicked is the first point and
+        // there's enough non-duplicated points to form
+        // a polygon (3 or more), close the shape before
+        // setting focus.
+        if (i === 0 && getArrayWithoutDuplicates(coords).length >= 3) {
+          dispatch(actions.polygon.closePolygon());
+        }
+        dispatch(actions.polygon.clickPoint(i));
+      }
+    }), angleDegree && /*#__PURE__*/React__namespace.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), sidesArray.map((_ref2, j) => {
+      let {
+        pointIndex,
+        sideLength
+      } = _ref2;
+      return /*#__PURE__*/React__namespace.createElement("g", {
+        key: `${id}-point-${i}-side-${j}`,
+        id: `${id}-point-${i}-side-${j}`
+      }, getPolygonSideString(sideLength, pointIndex, strings, locale));
+    }));
+  }), coords.length > 0 && /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsNumId,
+    style: a11y.srOnly
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsId,
+    style: a11y.srOnly
+  }, srPolygonGraphPoints));
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -32614,6 +32823,54 @@ const hasFocusVisible = element => {
     return matches(":focus");
   }
 };
+function getPolygonGraphDescription(state, i18n, markings) {
+  const strings = describePolygonGraph(state, i18n, markings);
+  return strings.srPolygonInteractiveElements;
+}
+function describePolygonGraph(state, i18n, markings) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  const isCoordinatePlane = markings === "axes" || markings === "graph";
+  const hasOnePoint = coords.length === 1;
+
+  // Figure out graph aria label based on markings.
+  const srPolygonGraph = isCoordinatePlane ? strings.srPolygonGraphCoordinatePlane : strings.srPolygonGraph;
+  const srPolygonGraphPointsNum = hasOnePoint ? strings.srPolygonGraphPointsOne : strings.srPolygonGraphPointsNum({
+    num: coords.length
+  });
+  let srPolygonGraphPoints;
+  // Figure out graph description based on markings.
+  // If the graph is not on a coordinate plane, we should not include
+  // the points' coordinates in the description.
+  if (isCoordinatePlane) {
+    const pointsString = coords.map((coord, i) => {
+      return strings.srPointAtCoordinates({
+        num: i + 1,
+        x: srFormatNumber(coord[0], locale),
+        y: srFormatNumber(coord[1], locale)
+      });
+    });
+    srPolygonGraphPoints = pointsString.join(" ");
+  }
+  const srPolygonElementsNum = hasOnePoint ? strings.srPolygonElementsOne : strings.srPolygonElementsNum({
+    num: coords.length
+  });
+  const srPolygonInteractiveElements = coords.length > 0 ? strings.srInteractiveElements({
+    elements: [srPolygonElementsNum, srPolygonGraphPoints].join(" ")
+  }) : null;
+  return {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints,
+    srPolygonElementsNum,
+    srPolygonInteractiveElements
+  };
+}
 
 function renderQuadraticGraph(state, dispatch, i18n) {
   return {
@@ -32772,15 +33029,13 @@ function describeQuadraticGraph(state, i18n) {
   };
 }
 
-function renderRayGraph(state, dispatch) {
+function renderRayGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(RayGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(RayGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getRayGraphDescription(state, i18n)
   };
 }
 const RayGraph = props => {
@@ -32834,14 +33089,7 @@ const RayGraph = props => {
     style: a11y.srOnly
   }, srRayPoints));
 };
-function RayGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // The reason that RayGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getRayGraphDescription(state, i18n) {
   const strings = describeRayGraph(state, i18n);
   return strings.srRayInteractiveElement;
 }
@@ -32891,15 +33139,13 @@ function describeRayGraph(state, i18n) {
   };
 }
 
-function renderSegmentGraph(state, dispatch) {
+function renderSegmentGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(SegmentGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(SegmentGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getSegmentGraphDescription(state, i18n)
   };
 }
 const SegmentGraph = _ref => {
@@ -32993,25 +33239,15 @@ const SegmentGraph = _ref => {
 function getLengthOfSegment(segment) {
   return kmath.point.distanceToPoint(...segment);
 }
-function SegmentGraphDescription(_ref2) {
-  let {
-    state
-  } = _ref2;
-  // The reason that SegmentGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
-  return describeSegmentGraph(state, i18n);
-}
 
 // Exported for testing
-function describeSegmentGraph(state, i18n) {
+function getSegmentGraphDescription(state, i18n) {
   const {
     strings,
     locale
   } = i18n;
-  const segmentDescriptions = state.coords.map((_ref3, index) => {
-    let [point1, point2] = _ref3;
+  const segmentDescriptions = state.coords.map((_ref2, index) => {
+    let [point1, point2] = _ref2;
     return strings.srMultipleSegmentIndividualLabel({
       point1X: srFormatNumber(point1[X], locale),
       point1Y: srFormatNumber(point1[Y], locale),
@@ -33025,13 +33261,13 @@ function describeSegmentGraph(state, i18n) {
   });
 }
 
-function renderSinusoidGraph(state, dispatch) {
+function renderSinusoidGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(SinusoidGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getSinusoidDescription(state, i18n)
   };
 }
 function SinusoidGraph(props) {
@@ -33039,6 +33275,9 @@ function SinusoidGraph(props) {
     dispatch,
     graphState
   } = props;
+  const i18n = usePerseusI18n();
+  const id = React__namespace.useId();
+  const descriptionId = id + "-description";
 
   // Destructure the coordinates from the graph state
   // Note: The order of the coordinates is important:
@@ -33063,15 +33302,30 @@ function SinusoidGraph(props) {
   if (coeffs !== undefined) {
     coeffRef.current = coeffs;
   }
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
+
+  // Aria strings
+  const {
+    srSinusoidGraph,
+    srSinusoidDescription,
+    srSinusoidRootPoint,
+    srSinusoidPeakPoint
+  } = describeSinusoidGraph(graphState, i18n);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": srSinusoidGraph,
+    "aria-describedby": descriptionId
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
     y: x => computeSine(x, coeffRef.current),
     color: wonderBlocksTokens.color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+    ariaLabel: i === 0 ? srSinusoidRootPoint : srSinusoidPeakPoint,
     key: "point-" + i,
     point: coord,
     sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
-  })));
+  })), /*#__PURE__*/React__namespace.createElement("g", {
+    id: descriptionId
+  }, srSinusoidDescription));
 }
 
 // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
@@ -33109,6 +33363,52 @@ const getSinusoidCoefficients$1 = coords => {
     verticalOffset
   };
 };
+function getSinusoidDescription(state, i18n) {
+  const strings = describeSinusoidGraph(state, i18n);
+  return strings.srSinusoidInteractiveElements;
+}
+function describeSinusoidGraph(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  const [root, peak] = coords;
+  const diffX = Math.abs(peak[X] - root[X]);
+  const diffY = Math.abs(peak[Y] - root[Y]);
+  const srSinusoidGraph = strings.srSinusoidGraph;
+  const srSinusoidDescription = strings.srSinusoidDescription({
+    minValue: srFormatNumber(root[Y] - diffY, locale),
+    maxValue: srFormatNumber(root[Y] + diffY, locale),
+    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 srSinusoidInteractiveElements = strings.srInteractiveElements({
+    elements: strings.srSinusoidInteractiveElements({
+      point1X: srFormatNumber(root[X], locale),
+      point1Y: srFormatNumber(root[Y], locale),
+      point2X: srFormatNumber(peak[X], locale),
+      point2Y: srFormatNumber(peak[Y], locale)
+    })
+  });
+  return {
+    srSinusoidGraph,
+    srSinusoidDescription,
+    srSinusoidRootPoint,
+    srSinusoidPeakPoint,
+    srSinusoidInteractiveElements
+  };
+}
 
 const {
   calculateAngleInDegrees,
@@ -33279,6 +33579,7 @@ const MafsGraph = props => {
   const descriptionId = `interactive-graph-description-${uniqueId}`;
   const interactiveElementsDescriptionId = `interactive-graph-interactive-elements-description-${uniqueId}`;
   const unlimitedGraphKeyboardPromptId = `unlimited-graph-keyboard-prompt-${uniqueId}`;
+  const instructionsId = `instructions-${uniqueId}`;
   const graphRef = React__namespace.useRef(null);
   const {
     analytics
@@ -33306,6 +33607,7 @@ const MafsGraph = props => {
   const interactionPrompt = isUnlimitedGraphState(state) && state.showKeyboardInteractionInvitation;
   wonderBlocksCore.useOnMountEffect(() => {
     analytics.onAnalyticsEvent({
+      // TODO(LEMS-2827): Remove analytics event in LEMS-2827 in favor of ti below.
       type: "perseus:interactive-graph-widget:rendered",
       payload: {
         type,
@@ -33313,6 +33615,14 @@ const MafsGraph = props => {
         widgetId: "interactive-graph"
       }
     });
+    analytics.onAnalyticsEvent({
+      type: "perseus:widget:rendered:ti",
+      payload: {
+        widgetSubType: type,
+        widgetType: "INTERACTIVE_GRAPH",
+        widgetId: "interactive-graph"
+      }
+    });
   });
   const {
     graph,
@@ -33320,7 +33630,8 @@ const MafsGraph = props => {
   } = renderGraphElements({
     state,
     dispatch,
-    i18n
+    i18n,
+    markings: props.markings
   });
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
@@ -33355,7 +33666,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && "unlimited-graph-keyboard-prompt"),
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId, state.type !== "none" && instructionsId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -33372,7 +33683,11 @@ const MafsGraph = props => {
     id: interactiveElementsDescriptionId,
     tabIndex: -1,
     className: "mafs-sr-only"
-  }, interactiveElementsDescription), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
+  }, interactiveElementsDescription), state.type !== "none" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    id: instructionsId,
+    tabIndex: -1,
+    className: "mafs-sr-only"
+  }, isUnlimitedGraphState(state) ? strings.srUnlimitedGraphInstructions : strings.srGraphInstructions), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -33381,7 +33696,21 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null)), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, {
+    i18n: i18n
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
+  // If we have locked figures, we set aria-hidden
+  // to false so that screen readers can read the
+  // locked figures. If we don't have any locked
+  // figures, we need to set aria-hidden to true so
+  // that screen readers don't read this Mafs element
+  // as an empty image.
+  // Note: Adding this in a wrapping View element
+  // so that `aria-hidden` is a valid property.
+  // It does not work on `Mafs` or svg elements.
+  , {
+    "aria-hidden": props.lockedFigures && props.lockedFigures.length > 0 ? false : true
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: state.range[X],
@@ -33401,10 +33730,10 @@ const MafsGraph = props => {
     height: height
   })),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
-  (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)), /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+  (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)), props.lockedFigures && props.lockedFigures.length > 0 && /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }))), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
+  })))), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
     lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -33698,32 +34027,33 @@ const renderGraphElements = props => {
   const {
     state,
     dispatch,
-    i18n
+    i18n,
+    markings
   } = props;
   const {
     type
   } = state;
   switch (type) {
     case "angle":
-      return renderAngleGraph(state, dispatch);
+      return renderAngleGraph(state, dispatch, i18n);
     case "segment":
-      return renderSegmentGraph(state, dispatch);
+      return renderSegmentGraph(state, dispatch, i18n);
     case "linear-system":
-      return renderLinearSystemGraph(state, dispatch);
+      return renderLinearSystemGraph(state, dispatch, i18n);
     case "linear":
-      return renderLinearGraph(state, dispatch);
+      return renderLinearGraph(state, dispatch, i18n);
     case "ray":
-      return renderRayGraph(state, dispatch);
+      return renderRayGraph(state, dispatch, i18n);
     case "polygon":
-      return renderPolygonGraph(state, dispatch);
+      return renderPolygonGraph(state, dispatch, i18n, markings);
     case "point":
-      return renderPointGraph(state, dispatch);
+      return renderPointGraph(state, dispatch, i18n);
     case "circle":
-      return renderCircleGraph(state, dispatch);
+      return renderCircleGraph(state, dispatch, i18n);
     case "quadratic":
       return renderQuadraticGraph(state, dispatch, i18n);
     case "sinusoid":
-      return renderSinusoidGraph(state, dispatch);
+      return renderSinusoidGraph(state, dispatch, i18n);
     case "none":
       return {
         graph: null,
@@ -34143,13 +34473,13 @@ const {
   polar
 } = kmath.angles;
 const {
-  angleMeasures: angleMeasures$1,
-  ccw: ccw$1,
-  lawOfCosines: lawOfCosines$1,
+  angleMeasures,
+  ccw,
+  lawOfCosines,
   magnitude: magnitude$1,
   polygonSidesIntersect,
   reverseVector,
-  sign: sign$1,
+  sign,
   vector: vector$1
 } = kmath.geometry;
 const {
@@ -34656,7 +34986,7 @@ function doAddPoint(state, action) {
     ...state,
     hasBeenInteractedWith: true,
     coords: newCoords,
-    showRemovePointButton: false,
+    showRemovePointButton: true,
     focusedPointIndex: newCoords.length - 1
   };
 }
@@ -34664,17 +34994,12 @@ function doRemovePoint(state, action) {
   if (!isUnlimitedGraphState(state)) {
     return state;
   }
-  let nextFocusedPointIndex;
-  if (state.interactionMode === "mouse") {
-    nextFocusedPointIndex = null;
-  } else {
-    nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
-  }
+  const nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
   return {
     ...state,
     coords: state.coords.filter((_, i) => i !== action.index),
     focusedPointIndex: nextFocusedPointIndex,
-    showRemovePointButton: false
+    showRemovePointButton: nextFocusedPointIndex !== null ? true : false
   };
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -34700,7 +35025,7 @@ const getChange = (coords, delta, constraintOpts) => {
   return [dx, dy];
 };
 // Less than or approximately equal
-function leq$1(a, b) {
+function leq(a, b) {
   return a < b || perseusCore.approximateEqual(a, b);
 }
 function boundAndSnapToGrid(point, _ref) {
@@ -34851,7 +35176,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
   });
 
   // Gets the radian angles between the coords and maps them to degrees
-  const angles = angleMeasures$1(coordsCopy).map(angle => angle * 180 / Math.PI);
+  const angles = angleMeasures(coordsCopy).map(angle => angle * 180 / Math.PI);
 
   // Gets the relative index of a point
   const rel = j => {
@@ -34871,7 +35196,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
 
   // Avoid degenerate triangles
   if (innerAngles.some(function (angle) {
-    return leq$1(angle, 1);
+    return leq(angle, 1);
   })) {
     return startingPoint;
   }
@@ -34885,7 +35210,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
   // we want to add the inner angle to the outer angle, and if it's on the right,
   // we want to subtract the inner angle from the outer angle. The angle solved
   // for is then used in the polar function to determine the new point.
-  const onLeft = sign$1(ccw$1(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
 
   // Solve for side by using the law of sines
   const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
@@ -34933,13 +35258,13 @@ function boundAndSnapToSides(destinationPoint, _ref7, index) {
   });
 
   // Avoid degenerate triangles
-  if (leq$1(sides[1] + sides[2], sides[0]) || leq$1(sides[0] + sides[2], sides[1]) || leq$1(sides[0] + sides[1], sides[2])) {
+  if (leq(sides[1] + sides[2], sides[0]) || leq(sides[0] + sides[2], sides[1]) || leq(sides[0] + sides[1], sides[2])) {
     return startingPoint;
   }
 
   // Solve for angle by using the law of cosines
   // Angle at the first vertex of the polygon
-  const innerAngle = lawOfCosines$1(sides[0], sides[2], sides[1]);
+  const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
   const outerAngle = getAngleFromVertex(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
@@ -34950,7 +35275,7 @@ function boundAndSnapToSides(destinationPoint, _ref7, index) {
   // we want to add the inner angle to the outer angle, and if it's on the right,
   // we want to subtract the inner angle from the outer angle. The angle solved
   // for is then used in the polar function to determine the new point.
-  const onLeft = sign$1(ccw$1(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
 
   // Uses the length of the first side of the polygon (radial coordinate)
   // and the angle between the first and second sides of the
@@ -35088,19 +35413,11 @@ const {
   getClockwiseAngle
 } = kmath.angles;
 const {
-  angleMeasures,
-  ccw,
-  collinear,
   getLineEquation,
   getLineIntersection,
-  intersects,
-  lawOfCosines,
   magnitude,
-  rotate,
-  sign,
   vector
 } = kmath.geometry;
-const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
 const defaultBackgroundImage = {
   url: null
 };
@@ -35109,31 +35426,9 @@ const UNLIMITED = "unlimited";
 // Sample background image:
 // https://ka-perseus-graphie.s3.amazonaws.com/29c1b0fcd17fe63df0f148fe357044d5d5c7d0bb.png
 
-// default to defaultValue if actual is null or undefined
-function defaultVal(actual, defaultValue) {
-  return actual == null ? defaultValue : actual;
-}
-
-// Less than or approximately equal
-function leq(a, b) {
-  return a < b || perseusCore.approximateEqual(a, b);
-}
-function capitalize(str) {
-  return str.replace(/(?:^|-)(.)/g, function (match, letter) {
-    return letter.toUpperCase();
-  });
-}
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const _getShouldShowInstructions = props => {
-  return _isClickToAddPoints(props) && (
-  // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
-  props.graph.coords == null || props.graph.coords.length === 0);
-};
-const _isClickToAddPoints = props => {
-  return props.graph.type === "point" && props.graph.numPoints === UNLIMITED || props.graph.type === "polygon" && props.graph.numSides === UNLIMITED;
-};
 const makeInvalidTypeError = (functionName, graphType) => {
   return new perseusCore.PerseusError(`${functionName} called but current graph type is not a '${graphType}'`, perseusCore.Errors.NotAllowed, {
     metadata: {
@@ -35174,1202 +35469,7 @@ function getQuadraticCoefficients(coords) {
   const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
   return [a, b, c];
 }
-
-// (LEMS-2190): Move the Mafs Angle Graph coordinate reversal logic in interactive-graph-state.ts
-// to this file when we remove the legacy graph. This logic allows us to support bi-directional angles
-// for the new (non-reflexive) Mafs graphs, while maintaining the same scoring behaviour as the legacy graph.
-// Once the legacy graph is removed, we should move this logic directly into the validate function below.
-class LegacyInteractiveGraph extends React__namespace.Component {
-  static contextType = PerseusI18nContext;
-  angle;
-  circle;
-  graphie;
-  horizHairline;
-  line;
-  lines;
-  parabola;
-  pointA;
-  pointB;
-  pointC;
-  // @ts-expect-error - TS2564 - Property 'points' has no initializer and is not definitely assigned in the constructor.
-  points;
-  polygon;
-  // @ts-expect-error - TS2564 - Property 'shouldResetGraphie' has no initializer and is not definitely assigned in the constructor.
-  shouldResetGraphie;
-  sinusoid;
-  trashCan;
-  vertHairline;
-  static defaultProps = {
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    step: [1, 1],
-    backgroundImage: defaultBackgroundImage,
-    markings: "graph",
-    showTooltips: false,
-    showProtractor: false,
-    graph: {
-      type: "linear"
-    }
-  };
-  state = {
-    shouldShowInstructions: _getShouldShowInstructions(this.props)
-  };
-  componentDidMount() {
-    if (this.refs.graph) {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-      this.setGraphie(this.refs.graph.graphie());
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.isClickToAddPoints() !== this.isClickToAddPoints(nextProps)) {
-      this.shouldResetGraphie = true;
-      this.setState({
-        shouldShowInstructions: _getShouldShowInstructions(nextProps)
-      });
-    }
-    if (this.props.backgroundImage?.url !== nextProps.backgroundImage?.url || this.props.backgroundImage !== nextProps.backgroundImage || this.props.containerSizeClass !== nextProps.containerSizeClass) {
-      this.shouldResetGraphie = true;
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    // TODO(jeremy): This feels underspecified. For example, if the props
-    // change the coords of a segment graph, but not the numSegments, we'd
-    // not count that as an update.
-    const oldType = prevProps.graph.type;
-    const newType = this.props.graph.type;
-    if (oldType !== newType || prevProps.graph.type === "angle" && this.props.graph.type === "angle" && this.areAngleGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "point" && this.props.graph.type === "point" && this.arePointGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "polygon" && this.props.graph.type === "polygon" && this.arePolygonGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "segment" && this.props.graph.type === "segment" && this.areSegmentGraphsEqual(prevProps.graph, this.props.graph)) {
-      this["remove" + capitalize(oldType) + "Controls"]();
-      this["add" + capitalize(newType) + "Controls"]();
-    }
-    if (this.shouldResetGraphie) {
-      this.resetGraphie();
-    }
-  }
-  _getShouldShowInstructions = props => {
-    props = props || this.props;
-    return this.isClickToAddPoints(props) && (
-    // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
-    props.graph.coords == null || props.graph.coords.length === 0);
-  };
-  setGraphie = newGraphie => {
-    this.graphie = newGraphie;
-    this.setupGraphie();
-  };
-  handleAddPointsMouseDown = coord => {
-    // This function should only be called when this.isClickToAddPoints()
-    // is true
-    if (!this.isClickToAddPoints()) {
-      throw new perseusCore.PerseusError("handleAddPointsClick should not be registered" + "when isClickToAddPoints() is false", perseusCore.Errors.NotAllowed);
-    }
-    if (!this.isCoordInTrash(coord)) {
-      let point;
-      if (this.props.graph.type === "point") {
-        point = this.createPointForPointsType(coord, this.points.length);
-        if (!point.constrain()) {
-          point.remove();
-          return;
-        }
-        this.points.push(point);
-
-        // interactive2 allows us to grab the point
-        const idx = this.points.length - 1;
-        this.points[idx].grab(coord);
-        this.updateCoordsFromPoints();
-      } else if (this.props.graph.type === "polygon") {
-        if (this.polygon?.closed()) {
-          return;
-        }
-        point = this.createPointForPolygonType(coord, this.points.length);
-        this.points.push(point);
-        const idx = this.points.length - 1;
-        this.points[idx].grab(coord);
-
-        // We don't call updateCoordsFromPoints for
-        // polygons, since the polygon won't be
-        // closed yet.
-        this.updatePolygon();
-      }
-      this.setState({
-        shouldShowInstructions: false
-      });
-    }
-  };
-  resetGraphie = () => {
-    this.shouldResetGraphie = false;
-    this.parabola = null;
-    this.sinusoid = null;
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'reset' does not exist on type 'ReactInstance'.
-    this.refs.graph?.reset();
-  };
-  setupGraphie = () => {
-    this.setTrashCanVisibility(0);
-    if (this.isClickToAddPoints()) {
-      this.setTrashCanVisibility(0.5);
-    }
-    if (this.props.apiOptions.isMobile) {
-      this.horizHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-        normalStyle: {
-          strokeWidth: 1
-        }
-      });
-      this.horizHairline.attr({
-        stroke: KhanColors.INTERACTIVE
-      });
-      this.horizHairline?.hide();
-      this.vertHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-        normalStyle: {
-          strokeWidth: 1
-        }
-      });
-      this.vertHairline.attr({
-        stroke: KhanColors.INTERACTIVE
-      });
-      this.vertHairline?.hide();
-    }
-    const type = this.props.graph.type;
-    this["add" + capitalize(type) + "Controls"]();
-  };
-  showHairlines = point => {
-    if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
-      // Hairlines are already initialized when the graph is loaded, so
-      // here we just move them to the updated location and make them
-      // visible.
-      this.horizHairline?.moveTo([this.props.range[0][0], point[1]], [this.props.range[0][1], point[1]]);
-      this.horizHairline?.show();
-      this.vertHairline?.moveTo([point[0], this.props.range[1][0]], [point[0], this.props.range[1][1]]);
-      this.vertHairline?.show();
-    }
-  };
-  hideHairlines = () => {
-    if (this.props.apiOptions.isMobile) {
-      this.horizHairline?.hide();
-      this.vertHairline?.hide();
-    }
-  };
-  setTrashCanVisibility = opacity => {
-    const graphie = this.graphie;
-    if (kmath.number.equal(opacity, 0)) {
-      if (this.trashCan) {
-        this.trashCan.remove();
-        this.trashCan = null;
-      }
-    } else if (!this.props.apiOptions.isMobile) {
-      // Only if trash tooltips are not being used, we initialize the old
-      // trash can area.
-      if (!this.trashCan) {
-        this.trashCan = graphie?.raphael?.image(TRASH_ICON_URI, graphie.xpixels - 40, graphie.ypixels - 40, 40, 40);
-      }
-      this.trashCan?.attr({
-        opacity: opacity
-      });
-    }
-  };
-  isClickToAddPoints = props => {
-    props = props || this.props;
-    return _isClickToAddPoints(props);
-  };
-  areAngleGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.allowReflexAngles !== currentGraph.allowReflexAngles || prevGraph.angleOffsetDeg !== currentGraph.angleOffsetDeg || prevGraph.snapDegrees !== currentGraph.snapDegrees;
-  }
-  arePointGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numPoints !== currentGraph.numPoints;
-  }
-  arePolygonGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numSides !== currentGraph.numSides || prevGraph.showAngles !== currentGraph.showAngles || prevGraph.showSides !== currentGraph.showSides || prevGraph.snapTo !== currentGraph.snapTo;
-  }
-  areSegmentGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numSegments !== currentGraph.numSegments;
-  }
-  _lineStroke = () => {
-    // This should probably use: this.props.apiOptions.isMobile
-    // @ts-expect-error - TS2339 - Property 'isMobile' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
-    return this.props.isMobile ? {
-      "stroke-width": 3
-    } : {};
-  };
-  addLine = type => {
-    const self = this;
-    const graphie = self.graphie;
-    const coords = InteractiveGraph.getLineCoords(self.props.graph, self.props);
-    const points = self.points = ___default["default"].map(coords, coord => {
-      return Interactive2.addMaybeMobileMovablePoint(this, {
-        coord: coord,
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap()],
-        onMove: () => {
-          const graph = ___default["default"].extend({}, self.props.graph, {
-            coords: ___default["default"].invoke(points, "coord")
-          });
-          self.onChange({
-            graph: graph
-          });
-        }
-      });
-    });
-    const lineConfig = {
-      points: points,
-      static: true,
-      normalStyle: {
-        stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE,
-        ...this._lineStroke()
-      }
-    };
-    if (type === "line") {
-      // @ts-expect-error - TS2339 - Property 'extendLine' does not exist on type '{ readonly points: any[]; readonly static: true; readonly normalStyle: { readonly "stroke-width"?: number | undefined; readonly stroke: "#71B307" | "#63D9EA"; }; }'.
-      lineConfig.extendLine = true;
-    } else if (type === "ray") {
-      // @ts-expect-error - TS2339 - Property 'extendRay' does not exist on type '{ readonly points: any[]; readonly static: true; readonly normalStyle: { readonly "stroke-width"?: number | undefined; readonly stroke: "#71B307" | "#63D9EA"; }; }'.
-      lineConfig.extendRay = true;
-    }
-    self.line = Interactive2.addMovableLine(graphie, lineConfig);
-
-    // A and B can't be in the same place
-    points[0].listen("constraints", "isLine", coord => {
-      return !kmath.point.equal(coord, points[1].coord());
-    });
-    points[1].listen("constraints", "isLine", coord => {
-      return !kmath.point.equal(coord, points[0].coord());
-    });
-  };
-  removeLine = () => {
-    ___default["default"].invoke(this.points, "remove");
-    this.line?.remove();
-  };
-  addNoneControls = () => {};
-  removeNoneControls = () => {};
-  addLinearControls = () => {
-    this.addLine("line");
-  };
-  removeLinearControls = () => {
-    this.removeLine();
-  };
-  addQuadraticControls = () => {
-    if (this.props.graph.type !== "quadratic") {
-      throw makeInvalidTypeError("addQuadraticControls", "quadratic");
-    }
-    let coords = this.props.graph.coords;
-    if (!coords) {
-      coords = InteractiveGraph.defaultQuadraticCoords(this.props);
-    }
-    const onMoveHandler = () => {
-      const graph = ___default["default"].extend({}, this.props.graph, {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'.
-        coords: [pointA.coord(), pointB.coord(), pointC.coord()]
-      });
-      this.onChange({
-        graph
-      });
-      this.updateQuadratic();
-    };
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointA = null;
-    pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[0],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointA ||
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointB.coord()[0] &&
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointC.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointB = null;
-    pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[1],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointB ||
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointA.coord()[0] &&
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointC.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointC = null;
-    pointC = this.pointC = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[2],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointC ||
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointA.coord()[0] &&
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointB.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-    this.updateQuadratic();
-  };
-  updateQuadratic = () => {
-    const coeffs = InteractiveGraph.getCurrentQuadraticCoefficients(this.props);
-    if (!coeffs) {
-      return;
-    }
-
-    // Extract coefficients the parabola
-    const a = coeffs[0];
-    const b = coeffs[1];
-    const c = coeffs[2];
-
-    // Plot and style
-    if (this.parabola) {
-      const path = this.graphie?.svgParabolaPath(a, b, c);
-      this.parabola?.attr({
-        path: path
-      });
-    } else {
-      this.parabola = this.graphie?.parabola(a, b, c);
-      this.parabola?.attr({
-        stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC,
-        ...this._lineStroke()
-      });
-      this.parabola?.toBack();
-    }
-  };
-  removeQuadraticControls = () => {
-    this.pointA?.remove();
-    this.pointB?.remove();
-    this.pointC?.remove();
-    if (this.parabola) {
-      this.parabola.remove();
-      this.parabola = null;
-    }
-  };
-  addSinusoidControls = () => {
-    if (this.props.graph.type !== "sinusoid") {
-      throw makeInvalidTypeError("addSinusoidControls", "sinusoid");
-    }
-    let coords = this.props.graph.coords;
-    if (!coords) {
-      coords = InteractiveGraph.defaultSinusoidCoords(this.props);
-    }
-    const onMoveHandler = () => {
-      const graph = ___default["default"].extend({}, this.props.graph, {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coords: [pointA.coord(), pointB.coord()]
-      });
-      this.onChange({
-        graph: graph
-      });
-      this.updateSinusoid();
-    };
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointA = null;
-    pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[0],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointA || coord[0] !== pointB.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-    const pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[1],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        // @ts-expect-error - TS2339 - Property 'coord' does not exist on type 'never'.
-        return !pointA || coord[0] !== pointA.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-    this.updateSinusoid();
-  };
-  updateSinusoid = () => {
-    const coeffs = InteractiveGraph.getCurrentSinusoidCoefficients(this.props);
-    if (!coeffs) {
-      return;
-    }
-    const a = coeffs[0];
-    const b = coeffs[1];
-    const c = coeffs[2];
-    const d = coeffs[3];
-
-    // Plot and style
-    if (this.sinusoid) {
-      const path = this.graphie?.svgSinusoidPath(a, b, c, d);
-      this.sinusoid?.attr({
-        path: path
-      });
-    } else {
-      this.sinusoid = this.graphie?.sinusoid(a, b, c, d);
-      this.sinusoid?.attr({
-        stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC,
-        ...this._lineStroke()
-      });
-      this.sinusoid?.toBack();
-    }
-  };
-  removeSinusoidControls = () => {
-    this.pointA?.remove();
-    this.pointB?.remove();
-    if (this.sinusoid) {
-      this.sinusoid.remove();
-      this.sinusoid = null;
-    }
-  };
-  addCircleControls = () => {
-    const graphie = this.graphie;
-    const minSnap = ___default["default"].min(graphie.snap);
-    const circle = this.circle = graphie?.addCircleGraph({
-      // @ts-expect-error - TS2339 - Property 'center' does not exist on type 'PerseusGraphType'.
-      center: this.props.graph.center || [0, 0],
-      // @ts-expect-error - TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
-      radius: this.props.graph.radius || ___default["default"].min(this.props.step),
-      snapX: graphie.snap[0],
-      snapY: graphie.snap[1],
-      minRadius: minSnap,
-      snapRadius: minSnap
-    });
-    $__default["default"](circle).on("move", () => {
-      const graph = ___default["default"].extend({}, this.props.graph, {
-        center: circle.center,
-        radius: circle.radius
-      });
-      this.onChange({
-        graph: graph
-      });
-    });
-  };
-  removeCircleControls = () => {
-    this.circle?.remove();
-  };
-  addLinearSystemControls = () => {
-    const graphie = this.graphie;
-    const coords = InteractiveGraph.getLinearSystemCoords(this.props.graph, this.props);
-    const segmentColors = [KhanColors.INTERACTIVE, KhanColors.GREEN];
-    const points = this.points = ___default["default"].map(coords, (segmentCoords, segmentIndex) => {
-      // NOTE(jeresig): This code attempts to access the variable
-      // while it's still being defined, it should be refactored!
-      // The callbacks appear to be executed synchronously, which
-      // causes this issue.
-      const segmentPoints = [];
-      for (let i = 0; i < segmentCoords.length; i += 1) {
-        const coord = segmentCoords[i];
-        segmentPoints.push(Interactive2.addMaybeMobileMovablePoint(this, {
-          coord: coord,
-          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-            const otherSegment = segmentPoints[1 - i];
-            if (!otherSegment) {
-              // segment hasn't been defined yet
-              // because we're still creating them
-              return;
-            }
-            return !kmath.point.equal(coord, otherSegment.coord());
-          }],
-          onMove: () => {
-            const graph = ___default["default"].extend({}, this.props.graph, {
-              coords: ___default["default"].map(this.points, segment => ___default["default"].invoke(segment, "coord"))
-            });
-            this.onChange({
-              graph: graph
-            });
-          },
-          normalStyle: {
-            fill: segmentColors[segmentIndex]
-          },
-          highlightStyle: {
-            fill: segmentColors[segmentIndex]
-          }
-        }));
-      }
-      return segmentPoints;
-    });
-    this.lines = ___default["default"].map(points, (segmentPoints, segmentIndex) => {
-      return Interactive2.addMovableLine(graphie, {
-        points: segmentPoints,
-        static: true,
-        extendLine: true,
-        normalStyle: {
-          stroke: segmentColors[segmentIndex]
-        }
-      });
-    });
-  };
-  removeLinearSystemControls = () => {
-    // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-    ___default["default"].invoke(this.lines, "remove");
-    ___default["default"].map(this.points, segment => ___default["default"].invoke(segment, "remove"));
-  };
-  isCoordInTrash = coord => {
-    if (this.props.apiOptions.isMobile) {
-      return false;
-    }
-    const graphie = this.graphie;
-    const screenPoint = graphie?.scalePoint(coord);
-    return screenPoint[0] >= graphie.xpixels - 40 && screenPoint[1] >= graphie.ypixels - 40;
-  };
-  createPointForPointsType = (coord, i) => {
-    const self = this;
-    const remove = () => {
-      self.points = ___default["default"].filter(self.points, function (pt) {
-        return pt !== point;
-      });
-      // update the correct answer box
-      self.updateCoordsFromPoints();
-
-      // remove this movablePoint from graphie.
-      // we wait to do this until we're not inside of
-      // said point's onMoveEnd method so its state is
-      // consistent throughout this method call
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // @ts-expect-error - TS2531 - Object is possibly 'null'.
-      setTimeout(point.remove.bind(point), 0); // eslint-disable-line no-restricted-syntax
-    };
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let point = null;
-    point = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coord,
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), function (coord) {
-        // TODO(jack): There ought to be a
-        // MovablePoint.constraints.avoid
-        // default that lets you do things like this
-        return ___default["default"].all(self.points, function (pt) {
-          return point === pt || !kmath.point.equal(coord, pt.coord());
-        });
-      }],
-      onMoveStart: function () {
-        if (self.isClickToAddPoints()) {
-          self.setTrashCanVisibility(1);
-        }
-      },
-      onMove: self.updateCoordsFromPoints,
-      onMoveEnd: function (coord) {
-        if (self.isClickToAddPoints()) {
-          if (self.isCoordInTrash(coord)) {
-            remove();
-          }
-          // In case we mouseup'd off the graphie and that
-          // stopped the move (in which case, we might not
-          // be in isCoordInTrash()
-          self.setTrashCanVisibility(0.5);
-        }
-      },
-      ...(this.props.apiOptions.isMobile && self.isClickToAddPoints() ? {
-        onRemove: remove
-      } : {})
-    });
-    return point;
-  };
-  removePoint = point => {
-    let index = null;
-    this.points = ___default["default"].filter(this.points, function (pt, i) {
-      if (pt === point) {
-        // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
-        index = i;
-        return false;
-      }
-      return true;
-    });
-    return index;
-  };
-  createPointForPolygonType = (coord, i) => {
-    if (this.props.graph.type !== "polygon") {
-      throw makeInvalidTypeError("createPointForPolygonType", "polygon");
-    }
-
-    // TODO(alex): check against "grid" instead, use constants
-    const snapToGrid = !___default["default"].contains(["angles", "sides"], this.props.graph.snapTo);
-
-    // Index relative to current point -> absolute index
-    // NOTE: This does not work when isClickToAddPoints() == true,
-    // as `i` can be changed by dragging a point to the trash
-    // Currently this function is only called when !isClickToAddPoints()
-    const rel = j => {
-      return (i + j + this.points.length) % this.points.length;
-    };
-    const remove = () => {
-      // remove this point from points
-      const index = this.removePoint(point);
-      if (this.polygon?.closed()) {
-        // We should be checking if this.points is defined before rotating them.
-        // @ts-expect-error - TS4104 - The type 'readonly any[]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | undefined'.
-        this.points = rotate(this.points, index);
-        this.polygon?.update({
-          closed: false
-        });
-      }
-      this.updatePolygon();
-      // the polygon is now unclosed, so we need to
-      // remove any points props
-      this.clearCoords();
-
-      // remove this movablePoint from graphie.
-      // wait to do this until we're not inside of
-      // said point's onMoveEnd method so state is
-      // consistent throughout the method call
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // eslint-disable-next-line no-restricted-syntax
-      setTimeout(point.remove.bind(point), 0);
-    };
-    const setInitialMove = debounce__default["default"]((point, bool) => {
-      point.state.isInitialMove = bool;
-    }, 1000);
-    const onMoveEndHandler = coord => {
-      // If the user clicked and dragged a point over endpoint,
-      // join the them
-      const overlappedPoints = this.points.length > 1 && (point === this.points[0] && kmath.point.equal(coord, ___default["default"].last(this.points).coord()) || point === ___default["default"].last(this.points) && kmath.point.equal(coord, this.points[0].coord()));
-      if (this.isClickToAddPoints()) {
-        if (this.isCoordInTrash(coord)) {
-          remove();
-        } else if (overlappedPoints) {
-          const pointToRemove = this.points.pop();
-          if (this.points.length > 2) {
-            this.polygon?.update({
-              closed: true
-            });
-            this.updateCoordsFromPoints();
-          } else {
-            this.polygon?.update({
-              closed: false
-            });
-            this.clearCoords();
-          }
-          this.updatePolygon();
-          // remove this movablePoint from graphie.
-          // wait to do this until we're not inside of
-          // said point's onMoveEnd method so state is
-          // consistent throughout the method call
-          // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-          // eslint-disable-next-line no-restricted-syntax
-          setTimeout(pointToRemove.remove.bind(pointToRemove), 0);
-        } else {
-          // If the user clicked and dragged a point over any other
-          // existing point, fix shape
-          const shouldRemove = ___default["default"].any(this.points, function (pt) {
-            return pt !== point && kmath.point.equal(pt.coord(), coord);
-          });
-          if (shouldRemove) {
-            this.removePoint(point);
-            if (this.points.length < 3) {
-              this.polygon?.update({
-                closed: false
-              });
-              this.clearCoords();
-            } else if (this.polygon?.closed()) {
-              this.updateCoordsFromPoints();
-            }
-            this.updatePolygon();
-            // remove this movablePoint from graphie.
-            // wait to do this until we're not inside
-            // said point's onMoveEnd method so state
-            // is consistent throughout the method call
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(point.remove.bind(point), 0);
-          } else {
-            // If this was
-            //  * a click on the first or last point
-            //  * and not a deletion
-            //  * and not a drag,
-            //  * and not a creation of a new point
-            //    (see !point.state.isInitialMove, below),
-            //  * and our polygon is not closed,
-            //  * and we can close it (we need at least the same
-            //    number of points as coordinates asked for in the
-            //    question),
-            // then close it
-            const isFirstOrLastPoint = point === ___default["default"].head(this.points) || point === ___default["default"].last(this.points);
-            const pointNotMoved = !point.hasMoved();
-            // NOTE (jsatk): Currently different on mobile versus
-            // destkop
-            const notANewPoint = !point.state.isInitialMove;
-            const polygonNotClosed = !this.polygon?.closed();
-            const allPointsPlotted = this.points.length > 2;
-            const canCloseUnclosedPolygon = isFirstOrLastPoint && pointNotMoved && notANewPoint && polygonNotClosed && allPointsPlotted;
-            if (canCloseUnclosedPolygon) {
-              this.polygon?.update({
-                closed: true
-              });
-              this.updatePolygon();
-
-              // We finally have a closed polygon, so save our
-              // points to props
-              this.updateCoordsFromPoints();
-            }
-          }
-        }
-
-        // In case we mouseup'd off the graphie and that
-        // stopped the move
-        this.setTrashCanVisibility(0.5);
-      }
-      setInitialMove(point, false);
-    };
-    const graphConstraint = coord => {
-      // These constraints are all relative to the other points, so if
-      // we're creating the initial points and haven't added any others
-      // to the graph, we can't enforce them.
-      if (this.points == null || this.points.length === 0) {
-        return true;
-      }
-      const coords = ___default["default"].invoke(this.points, "coord");
-      coords[i] = coord;
-
-      // Check for invalid positioning, but only if we aren't adding
-      // points one click at a time, since those added points could
-      // have already violated these constraints
-      if (!this.isClickToAddPoints()) {
-        // Polygons can't have consecutive collinear points
-        if (collinear(coords[rel(-2)], coords[rel(-1)], coords[i]) || collinear(coords[rel(-1)], coords[i], coords[rel(1)]) || collinear(coords[i], coords[rel(1)], coords[rel(2)])) {
-          return false;
-        }
-        const segments = ___default["default"].zip(coords, rotate(coords));
-        if (this.points.length > 3) {
-          // Constrain to simple (non self-intersecting) polygon by
-          // testing whether adjacent segments intersect any others
-          for (let j = -1; j <= 0; j++) {
-            const segment = segments[rel(j)];
-            const others = ___default["default"].without(segments, segment, segments[rel(j - 1)], segments[rel(j + 1)]);
-            for (let k = 0; k < others.length; k++) {
-              const other = others[k];
-              // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Line'.
-              if (intersects(segment, other)) {
-                return false;
-              }
-            }
-          }
-        }
-      }
-      if (
-      // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
-      this.props.graph.snapTo === "angles" && this.points.length > 2) {
-        // Snap to whole degree interior angles
-
-        const angles = ___default["default"].map(angleMeasures(coords), function (rad) {
-          return rad * 180 / Math.PI;
-        });
-        ___default["default"].each([-1, 1], function (j) {
-          angles[rel(j)] = Math.round(angles[rel(j)]);
-        });
-        const getAngle = function (a, vertex, b) {
-          const angle = GraphUtils.findAngleDeprecated(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
-          return (angle + 360) % 360;
-        };
-        const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
-        innerAngles[2] = 180 - (innerAngles[0] + innerAngles[1]);
-
-        // Avoid degenerate triangles
-        if (___default["default"].any(innerAngles, function (angle) {
-          return leq(angle, 1);
-        })) {
-          return false;
-        }
-        const knownSide = magnitude(
-        // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'.
-        vector(coords[rel(-1)], coords[rel(1)]));
-        const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-
-        // Solve for side by using the law of sines
-        const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
-        const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
-        const offset = polar$2(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
-        return this.graphie?.addPoints(coords[rel(-1)], offset);
-      }
-      // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
-      if (this.props.graph.snapTo === "sides" && this.points.length > 1) {
-        // Snap to whole unit side measures
-
-        const sides = ___default["default"].map([[coords[rel(-1)], coords[i]], [coords[i], coords[rel(1)]], [coords[rel(-1)], coords[rel(1)]]], function (coords) {
-          // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-          return magnitude(vector(...coords));
-        });
-        ___default["default"].each([0, 1], function (j) {
-          sides[j] = Math.round(sides[j]);
-        });
-
-        // Avoid degenerate triangles
-        if (leq(sides[1] + sides[2], sides[0]) || leq(sides[0] + sides[2], sides[1]) || leq(sides[0] + sides[1], sides[2])) {
-          return false;
-        }
-
-        // Solve for angle by using the law of cosines
-        const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
-        const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
-        const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-        const offset = polar$2(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
-        return this.graphie?.addPoints(coords[rel(-1)], offset);
-      }
-      // Snap to grid (already done)
-      return true;
-    };
-    const point = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coord,
-      constraints: [Interactive2.MovablePoint.constraints.bound(), snapToGrid ? Interactive2.MovablePoint.constraints.snap() : null, graphConstraint],
-      onMoveStart: () => {
-        if (this.isClickToAddPoints()) {
-          this.setTrashCanVisibility(1);
-        }
-      },
-      onMove: () => {
-        if (this.polygon?.closed()) {
-          this.updateCoordsFromPoints();
-        }
-      },
-      onMoveEnd: onMoveEndHandler,
-      ...(this.props.apiOptions.isMobile && this.isClickToAddPoints() ? {
-        onRemove: remove
-      } : {})
-    });
-    point.state.isInitialMove = true;
-    return point;
-  };
-  updateCoordsFromPoints = () => {
-    const graph = ___default["default"].extend({}, this.props.graph, {
-      // Handle old movable points with .coord, or
-      // Interactive2.MovablePoint's with .coord()
-      coords: ___default["default"].map(this.points, function (point) {
-        return ___default["default"].result(point, "coord");
-      })
-    });
-    this.onChange({
-      graph: graph
-    });
-  };
-  clearCoords = () => {
-    const graph = ___default["default"].extend({}, this.props.graph, {
-      coords: null
-    });
-    this.onChange({
-      graph: graph
-    });
-  };
-  onChange = data => {
-    this.props.onChange(data);
-    this.props.trackInteraction();
-  };
-  addPointControls = () => {
-    if (this.props.graph.type !== "point") {
-      throw makeInvalidTypeError("addPointControls", "point");
-    }
-    const coords = InteractiveGraph.getPointCoords(this.props.graph, this.props);
-    // Clear out our old points so that newly added points don't
-    // "collide" with them and reposition when being added
-    // Without this, when added, each point checks whether it is on top
-    // of a point in this.points, which (a) shouldn't matter since
-    // we're clearing out this.points anyways, and (b) can cause problems
-    // if each of this.points is a MovablePoint instead of an
-    // Interactive2.MovablePoint, since one has a .coord and the other
-    // has .coord()
-    // TODO(jack): Figure out a better way to do this
-    this.points = [];
-    this.points = ___default["default"].map(coords, this.createPointForPointsType, this);
-  };
-  removePointControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-  };
-  addSegmentControls = () => {
-    if (this.props.graph.type !== "segment") {
-      throw makeInvalidTypeError("addSegmentControls", "segment");
-    }
-    const self = this;
-    const graphie = this.graphie;
-    const coords = InteractiveGraph.getSegmentCoords(this.props.graph, this.props);
-    const createPoint = options => Interactive2.addMaybeMobileMovablePoint(this, options);
-    this.points = [];
-    this.lines = ___default["default"].map(coords, function (segment, i) {
-      const updateCoordProps = function () {
-        const graph = ___default["default"].extend({}, self.props.graph, {
-          // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-          coords: ___default["default"].invoke(self.lines, "coords")
-        });
-        self.onChange({
-          graph: graph
-        });
-      };
-
-      // NOTE(jeresig): This code attempts to access the variable
-      // while it's still being defined, it should be refactored!
-      // The callbacks appear to be executed synchronously, which
-      // causes this issue.
-      const points = [];
-      for (let i = 0; i < segment.length; i += 1) {
-        const coord = segment[i];
-        points.push(createPoint({
-          coord: coord,
-          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-            const otherPoint = points[1 - i];
-            if (!otherPoint) {
-              // point hasn't been defined yet
-              // because we're still creating them
-              // We return false as the points aren't
-              // going to be in the same position at
-              // this point.
-              return false;
-            }
-            return !kmath.point.equal(coord, otherPoint.coord());
-          }],
-          onMove: updateCoordProps
-        }));
-      }
-      self.points = self.points.concat(points);
-      const line = Interactive2.addMovableLine(graphie, {
-        points: points,
-        static: false,
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovableLine.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovableLine.constraints.snap()],
-        onMove: [
-        // @ts-expect-error - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovableLine.onMove.updatePoints, updateCoordProps],
-        normalStyle: {
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE,
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ...this._lineStroke()
-        },
-        highlightStyle: {
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTING,
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ...this._lineStroke()
-        }
-      });
-      ___default["default"].invoke(points, "toFront");
-      return line;
-    }, this);
-  };
-  removeSegmentControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-    // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-    ___default["default"].invoke(this.lines, "remove");
-  };
-  addRayControls = () => {
-    this.addLine("ray");
-  };
-  removeRayControls = () => {
-    this.removeLine();
-  };
-  addPolygonControls = () => {
-    this.polygon = null;
-    const coords = InteractiveGraph.getPolygonCoords(this.props.graph, this.props);
-    // Clear out our old points so that newly added points don't
-    // "collide", as in `addPointControls`
-    this.points = [];
-    this.points = ___default["default"].map(coords, this.createPointForPolygonType, this);
-    this.updatePolygon();
-  };
-  updatePolygon = () => {
-    if (this.props.graph.type !== "polygon") {
-      throw makeInvalidTypeError("updatePolygon", "polygon");
-    }
-    let closed;
-    if (this.polygon) {
-      closed = this.polygon.closed();
-    } else if (this.points.length >= 3) {
-      closed = true;
-    } else {
-      // There will only be fewer than 3 points in click-to-add-vertices
-      // mode, so we don't need to explicitly check for that here.
-      closed = false;
-    }
-    const graphie = this.graphie;
-    const n = this.points.length;
-
-    // TODO(alex): check against "grid" instead, use constants
-    const snapToGrid = !___default["default"].contains(["angles", "sides"], this.props.graph.snapTo);
-    const angleLabels = ___default["default"].times(n, function (i) {
-      if (
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      !this.props.graph.showAngles || !closed && (i === 0 || i === n - 1)) {
-        return "";
-      }
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.graph.snapTo === "angles") {
-        return "$deg0";
-      }
-      return "$deg1";
-    }, this);
-    const showRightAngleMarkers = ___default["default"].times(n, function (i) {
-      return closed || i !== 0 && i !== n - 1;
-    }, this);
-    const numArcs = ___default["default"].times(n, function (i) {
-      if (
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      this.props.graph.showAngles && (closed || i !== 0 && i !== n - 1)) {
-        return 1;
-      }
-      return 0;
-    }, this);
-    const sideLabels = ___default["default"].times(n, function (i) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (!this.props.graph.showSides || !closed && i === n - 1) {
-        return "";
-      }
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.graph.snapTo === "sides") {
-        return "$len0";
-      }
-      return "$len1";
-    }, this);
-    if (this.polygon == null) {
-      const self = this;
-      self.polygon = Interactive2.addMovablePolygon(graphie, {
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-        Interactive2.MovablePolygon.constraints.bound(), snapToGrid ?
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-        Interactive2.MovablePolygon.constraints.snap() : null],
-        closed: closed,
-        points: self.points,
-        angleLabels: angleLabels,
-        showRightAngleMarkers: showRightAngleMarkers,
-        numArcs: numArcs,
-        sideLabels: sideLabels,
-        onMove: [
-        // @ts-expect-error - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-        Interactive2.MovablePolygon.onMove.updatePoints, function () {
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          if (this.closed()) {
-            self.updateCoordsFromPoints();
-          }
-        }],
-        normalStyle: {
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE,
-          ...this._lineStroke()
-        }
-      });
-    } else {
-      // We only need to pass in the properties that might've changed
-      this.polygon.update({
-        closed: closed,
-        points: this.points,
-        angleLabels: angleLabels,
-        showRightAngleMarkers: showRightAngleMarkers,
-        numArcs: numArcs,
-        sideLabels: sideLabels
-      });
-    }
-  };
-  removePolygonControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-    this.polygon?.remove();
-  };
-  addAngleControls = () => {
-    if (this.props.graph.type !== "angle") {
-      throw makeInvalidTypeError("addAngleControls", "angle");
-    }
-    const graph = this.props.graph;
-    const graphie = this.graphie;
-    const coords = InteractiveGraph.getAngleCoords(this.props.graph, this.props);
-
-    // The vertex snaps to the grid, but the rays don't...
-    this.points = coords.map(function (coord, i) {
-      return graphie?.addMovablePoint(___default["default"].extend({
-        coord: coord,
-        normalStyle: {
-          stroke: KhanColors.INTERACTIVE,
-          fill: KhanColors.INTERACTIVE
-        }
-      }, i === 1 ? {
-        snapX: graphie.snap[0],
-        snapY: graphie.snap[1]
-      } : {}));
-    });
-
-    // ...they snap to whole-degree angles from the vertex.
-    this.angle = graphie?.addMovableAngle({
-      points: this.points,
-      snapDegrees: graph.snapDegrees || 1,
-      snapOffsetDeg: graph.angleOffsetDeg || 0,
-      angleLabel: graph.showAngles ? "$deg0" : "",
-      pushOut: 2,
-      allowReflex: defaultVal(graph.allowReflexAngles, true)
-    });
-    $__default["default"](this.angle).on("move", () => {
-      this.onChange({
-        graph: {
-          ...graph,
-          coords: this.angle?.getClockwiseCoords()
-        }
-      });
-    });
-  };
-  removeAngleControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-    this.angle?.remove();
-  };
-  toggleShowSides = () => {
-    if (this.props.graph.type !== "polygon") {
-      throw makeInvalidTypeError("toggleShowSides", "polygon");
-    }
-    const graph = ___default["default"].extend({}, this.props.graph, {
-      showSides: !this.props.graph.showSides
-    });
-    this.onChange({
-      graph: graph
-    });
-  };
-  getUserInput() {
-    return InteractiveGraph.getUserInputFromProps(this.props);
-  }
-  focus = $__default["default"].noop;
-  render() {
-    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);
-    let instructions;
-    // isClickToAddPoints() only applies to points and polygons
-    if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
-      if (this.props.graph.type === "point") {
-        instructions = this.context.strings.addPoints;
-      } else if (this.props.graph.type === "polygon") {
-        instructions = this.context.strings.addVertices;
-      }
-    } else {
-      instructions = undefined;
-    }
-    let onMouseDown;
-    if (this.isClickToAddPoints()) {
-      onMouseDown = this.handleAddPointsMouseDown;
-    }
-    const isMobile = this.props.apiOptions.isMobile;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget " + "perseus-widget-interactive-graph",
-      style: {
-        width: box[0],
-        height: box[1]
-      }
-    }, /*#__PURE__*/React__namespace.createElement(Graph, {
-      instructions: instructions
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "graph",
-      box: box,
-      labels: this.props.labels,
-      range: this.props.range,
-      step: isMobile ? Util.constrainedTickStepsFromTickSteps(this.props.step, this.props.range) : this.props.step,
-      gridStep: gridStep,
-      snapStep: snapStep,
-      markings: this.props.markings,
-      backgroundImage: this.props.backgroundImage,
-      showProtractor: this.props.showProtractor,
-      onMouseDown: onMouseDown,
-      onGraphieUpdated: this.setGraphie,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile
-    }));
-  }
-}
 class InteractiveGraph extends React__namespace.Component {
-  legacyGraphRef = /*#__PURE__*/React__namespace.createRef();
   mafsRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     labels: ["x", "y"],
@@ -36387,34 +35487,23 @@ class InteractiveGraph extends React__namespace.Component {
     if (this.mafsRef.current?.getUserInput) {
       return this.mafsRef.current.getUserInput();
     }
-    if (this.legacyGraphRef.current?.getUserInput) {
-      return this.legacyGraphRef.current.getUserInput();
-    }
     throw new perseusCore.PerseusError("Cannot getUserInput from a graph that has never rendered", perseusCore.Errors.NotAllowed);
   }
   getPromptJSON() {
     return getPromptJSON$b(this.props, this.getUserInput());
   }
   render() {
-    // Mafs shim
-    const mafsFlags = this.props.apiOptions?.flags?.["mafs"];
-    if (shouldUseMafs(mafsFlags, this.props.graph)) {
-      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, {
-        flags: this.props.apiOptions?.flags,
-        ref: this.mafsRef,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        box: box,
-        showTooltips: !!this.props.showTooltips,
-        readOnly: this.props.apiOptions?.readOnly
-      }));
-    }
-    return /*#__PURE__*/React__namespace.createElement(LegacyInteractiveGraph, _extends({
-      ref: this.legacyGraphRef
-    }, this.props));
+    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, {
+      ref: this.mafsRef,
+      gridStep: gridStep,
+      snapStep: snapStep,
+      box: box,
+      showTooltips: !!this.props.showTooltips,
+      readOnly: this.props.apiOptions?.readOnly
+    }));
   }
 
   /**
@@ -36591,8 +35680,32 @@ class InteractiveGraph extends React__namespace.Component {
   }
   static getEquationString(props) {
     const type = props.graph.type;
-    const funcName = "get" + capitalize(type) + "EquationString";
-    return InteractiveGraph[funcName](props);
+    switch (type) {
+      case "none":
+        return InteractiveGraph.getNoneEquationString();
+      case "linear":
+        return InteractiveGraph.getLinearEquationString(props);
+      case "quadratic":
+        return InteractiveGraph.getQuadraticEquationString(props);
+      case "sinusoid":
+        return InteractiveGraph.getSinusoidEquationString(props);
+      case "circle":
+        return InteractiveGraph.getCircleEquationString(props);
+      case "linear-system":
+        return InteractiveGraph.getLinearSystemEquationString(props);
+      case "point":
+        return InteractiveGraph.getPointEquationString(props);
+      case "segment":
+        return InteractiveGraph.getSegmentEquationString(props);
+      case "ray":
+        return InteractiveGraph.getRayEquationString(props);
+      case "polygon":
+        return InteractiveGraph.getPolygonEquationString(props);
+      case "angle":
+        return InteractiveGraph.getAngleEquationString(props);
+      default:
+        throw new wonderStuffCore.UnreachableCaseError(type);
+    }
   }
   static pointsFromNormalized(props, coordsList, noSnap) {
     // @ts-expect-error - TS2322 - Type 'number[][]' is not assignable to type 'readonly Coord[]'.
@@ -36730,28 +35843,6 @@ class InteractiveGraph extends React__namespace.Component {
   }
 }
 
-// exported for testing
-function shouldUseMafs(mafsFlags, graph) {
-  if (typeof mafsFlags === "boolean" || typeof mafsFlags === "undefined") {
-    return false;
-  }
-  switch (graph.type) {
-    case "none":
-      return true;
-    case "point":
-      if (graph.numPoints === UNLIMITED) {
-        return Boolean(mafsFlags["unlimited-point"]);
-      }
-      return Boolean(mafsFlags["point"]);
-    case "polygon":
-      if (graph.numSides === UNLIMITED) {
-        return Boolean(mafsFlags["unlimited-polygon"]);
-      }
-      return Boolean(mafsFlags["polygon"]);
-    default:
-      return Boolean(mafsFlags[graph.type]);
-  }
-}
 // We don't need to change any of the original props for static mode
 const staticTransform$3 = ___default["default"].identity;
 var InteractiveGraph$1 = {
@@ -37394,10 +36485,15 @@ class LabelImage extends React__namespace.Component {
     });
   }
   activateMarker(index, opened) {
+    // TODO(LEMS-2830): Remove analytics event in LEMS-2830 in favor of ti below.
     this.props.analytics?.onAnalyticsEvent({
       type: "perseus:label-image:marker-interacted-with",
       payload: null
     });
+    this.props.analytics?.onAnalyticsEvent({
+      type: "perseus:label-image:marker-interacted-with:ti",
+      payload: null
+    });
     const {
       activeMarkerIndex
     } = this.state;
@@ -37541,10 +36637,15 @@ class LabelImage extends React__namespace.Component {
         })),
         multipleSelect: this.props.multipleAnswers,
         onChange: selection => {
+          // TODO(LEMS-2829): Remove analytics event in LEMS-2829 in favor of ti below.
           this.props.analytics?.onAnalyticsEvent({
             type: "perseus:label-image:choiced-interacted-with",
             payload: null
           });
+          this.props.analytics?.onAnalyticsEvent({
+            type: "perseus:label-image:choiced-interacted-with:ti",
+            payload: null
+          });
           this.handleAnswerChoicesChangeForMarker(index, selection);
         },
         onToggle: opened => this.activateMarker(index, opened)
@@ -37649,10 +36750,15 @@ class LabelImage extends React__namespace.Component {
     })), this.renderMarkers()), /*#__PURE__*/React__namespace.createElement(HideAnswersToggle, {
       areAnswersHidden: this.state.hideAnswers,
       onChange: hideAnswers => {
+        // TODO(LEMS-2831): Remove analytics event in LEMS-2831 in favor of ti below.
         this.props.analytics?.onAnalyticsEvent({
           type: "perseus:label-image:toggle-answers-hidden",
           payload: null
         });
+        this.props.analytics?.onAnalyticsEvent({
+          type: "perseus:label-image:toggle-answers-hidden:ti",
+          payload: null
+        });
         this.setState({
           hideAnswers
         });
@@ -37715,8 +36821,7 @@ var LabelImage$1 = {
   displayName: "Label Image",
   widget: LabelImageWithDependencies,
   accessible: true,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getLabelImagePublicWidgetOptions
+  isLintable: true
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -37975,20 +37080,24 @@ class Draggable extends React__namespace.Component {
     if (this.props.margin != null) {
       style.margin = this.props.margin;
     }
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      className: className,
-      style: style,
-      onMouseDown: this.onMouseDown,
-      onTouchStart: this.onMouseDown,
-      onTouchMove: this.onMouseMove,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-      content: this.props.content,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "draggable"),
-      onRender: this.props.onRender,
-      strings: this.context.strings
-    }));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("li", {
+        className: className,
+        style: style,
+        onMouseDown: this.onMouseDown,
+        onTouchStart: this.onMouseDown,
+        onTouchMove: this.onMouseMove,
+        onTouchEnd: this.onMouseUp,
+        onTouchCancel: this.onMouseUp
+      }, /*#__PURE__*/React__namespace.createElement(Renderer, {
+        content: this.props.content,
+        linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "draggable"),
+        onRender: this.props.onRender,
+        strings: this.context.strings
+      }))
+    );
   }
 }
 class Sortable extends React__namespace.Component {
@@ -40624,8 +39733,7 @@ var NumberLine$1 = {
   displayName: "Number line",
   widget: NumberLine,
   transform: numberLineTransform,
-  staticTransform: staticTransform$1,
-  getPublicWidgetOptions: perseusCore.getNumberLinePublicWidgetOptions
+  staticTransform: staticTransform$1
 };
 
 const getPromptJSON$5 = (renderProps, userInput) => {
@@ -40792,19 +39900,23 @@ class Card extends React__namespace.Component {
     // Pull out the content to get rendered
     const rendererProps = ___default["default"].pick(this.props, "content");
     const onMouseDown = this.props.animating ? $__default["default"].noop : this.onMouseDown;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "card-wrap",
-      style: style,
-      onMouseDown: onMouseDown,
-      onTouchStart: onMouseDown,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: className.join(" ")
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
-      linterContext: this.props.linterContext,
-      strings: this.context.strings
-    }))));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("div", {
+        className: "card-wrap",
+        style: style,
+        onMouseDown: onMouseDown,
+        onTouchStart: onMouseDown,
+        onTouchEnd: this.onMouseUp,
+        onTouchCancel: this.onMouseUp
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: className.join(" ")
+      }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
+      }))))
+    );
   }
 }
 class Orderer extends React__namespace.Component {
@@ -41176,8 +40288,7 @@ var Orderer$1 = {
   displayName: "Orderer",
   hidden: true,
   widget: Orderer,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getOrdererPublicWidgetOptions
+  isLintable: true
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -42403,8 +41514,7 @@ var Sorter$1 = {
   name: "sorter",
   displayName: "Sorter",
   widget: Sorter,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getSorterPublicWidgetOptions
+  isLintable: true
 };
 
 const {
@@ -42801,7 +41911,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "53.0.0";
+const libVersion = "54.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44295,6 +43405,17 @@ function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
   const widget = widgetMap[WidgetId];
   return widget?.type ?? null;
 }
+function getWidgetSubTypeByWidgetId(widgetId, widgetMap) {
+  const widget = widgetMap[widgetId];
+  const widgetType = widget?.type ?? null;
+  switch (widgetType) {
+    case "interactive-graph":
+      const graph = widget.options.graph;
+      return graph?.type ?? null;
+    default:
+      return null;
+  }
+}
 
 /**
  * Does the content have a specific type of widget?
@@ -45173,6 +44294,7 @@ exports.getSegmentCoords = getSegmentCoords;
 exports.getSinusoidCoords = getSinusoidCoords;
 exports.getValidWidgetIds = getValidWidgetIds;
 exports.getWidgetFromWidgetMap = getWidgetFromWidgetMap;
+exports.getWidgetSubTypeByWidgetId = getWidgetSubTypeByWidgetId;
 exports.getWidgetTypeByWidgetId = getWidgetTypeByWidgetId;
 exports.getWidgetsFromWidgetMap = getWidgetsFromWidgetMap;
 exports.getWidgetsMapFromItemData = getWidgetsMapFromItemData;