@khanacademy/perseus 20.1.0 → 20.3.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { keyTranslator, CursorContext, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, useUniqueIdWithMock, Text as Text$1 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$1 } from '@khanacademy/wonder-blocks-core';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
@@ -28,8 +28,10 @@ import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
+import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
+import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, useMovable, useTransformContext, MovablePoint as MovablePoint$5, Coordinates, Mafs } from 'mafs';
+import { Point as Point$2, useMovable, useTransformContext, vec, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -2680,11 +2682,14 @@ function combineScores(scoreA, scoreB) {
     }
   });
 }
+function isCorrect(score) {
+  return score.type === "points" && score.earned >= score.total;
+}
 function keScoreFromPerseusScore(score, guess, state) {
   if (score.type === "points") {
     return {
       empty: false,
-      correct: score.earned >= score.total,
+      correct: isCorrect(score),
       message: score.message,
       guess: guess,
       state: state
@@ -14981,7 +14986,7 @@ const DEFAULT_STATE$1 = {
 // TODO(benchristel): this is a memory leak. We add items to
 // tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
-class MovablePoint$4 {
+class MovablePoint$5 {
   constructor(graphie, movable, options) {
     this.graphie = void 0;
     this.movable = void 0;
@@ -15498,15 +15503,15 @@ class MovablePoint$4 {
     this.movable.toFront();
   }
 }
-MovablePoint$4.add = MovablePointOptions.add;
-MovablePoint$4.modify = MovablePointOptions.modify;
-MovablePoint$4.draw = MovablePointOptions.draw;
-MovablePoint$4.remove = MovablePointOptions.remove;
-MovablePoint$4.onMoveStart = MovablePointOptions.onMoveStart;
-MovablePoint$4.constraints = MovablePointOptions.constraints;
-MovablePoint$4.onMove = MovablePointOptions.onMove;
-MovablePoint$4.onMoveEnd = MovablePointOptions.onMoveEnd;
-MovablePoint$4.onClick = MovablePointOptions.onClick;
+MovablePoint$5.add = MovablePointOptions.add;
+MovablePoint$5.modify = MovablePointOptions.modify;
+MovablePoint$5.draw = MovablePointOptions.draw;
+MovablePoint$5.remove = MovablePointOptions.remove;
+MovablePoint$5.onMoveStart = MovablePointOptions.onMoveStart;
+MovablePoint$5.constraints = MovablePointOptions.constraints;
+MovablePoint$5.onMove = MovablePointOptions.onMove;
+MovablePoint$5.onMoveEnd = MovablePointOptions.onMoveEnd;
+MovablePoint$5.onClick = MovablePointOptions.onClick;
 function getKey(eventName, id) {
   return eventName + ":" + id;
 }
@@ -16100,10 +16105,10 @@ _.extend(MovablePolygon.prototype, {
 });
 
 const Interactive2 = {
-  MovablePoint: MovablePoint$4,
+  MovablePoint: MovablePoint$5,
   addMovablePoint: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovablePoint$4(graphie, movable, options);
+    return new MovablePoint$5(graphie, movable, options);
   },
   MovableLine: MovableLine$3,
   addMovableLine: function (graphie, options) {
@@ -16144,7 +16149,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$3 = GraphieClasses.createClass({
+const MovablePoint$4 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16201,7 +16206,7 @@ const MovablePoint$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-_.extend(MovablePoint$3, Interactive2.MovablePoint);
+_.extend(MovablePoint$4, Interactive2.MovablePoint);
 const MovableLine$2 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
@@ -16371,7 +16376,7 @@ var Movables = {
   Label: Label$1,
   Line: Line$2,
   MovableLine: MovableLine$2,
-  MovablePoint: MovablePoint$3,
+  MovablePoint: MovablePoint$4,
   Parabola: Parabola,
   Path: Path,
   Plot: Plot$2,
@@ -24882,57 +24887,42 @@ class Explanation extends React.Component {
     };
   }
   render() {
-    const {
-      isArticle,
-      isMobile
-    } = this.props.apiOptions;
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
-    let promptContainer;
-
-    // TODO(diedra): This isn't a valid href;
-    // change this to a button that looks like a link.
-    const href = "javascript:void(0)";
-    const onClick = this._onClick;
-    if (isMobile) {
-      promptContainer = /*#__PURE__*/React.createElement("div", {
-        className: css(styles$p.linkContainer)
-      }, /*#__PURE__*/React.createElement("a", {
-        className: css(styles$p.mobileExplanationLink),
-        href: href,
-        onClick: onClick,
-        role: "button",
-        "aria-expanded": this.state.expanded
-      }, promptText), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
-        className: css(styles$p.disclosureArrow)
-      }, /*#__PURE__*/React.createElement("polygon", {
-        style: {
-          fill: backgroundColor
-        },
-        points: `0,${arrowHeight} ` + `${arrowWidth},${arrowHeight} ` + `${arrowWidth / 2},0`
-      })));
-    } else {
-      const viewStyling = isArticle ? [styles$p.explanationLink, styles$p.articleLink] : [styles$p.explanationLink, styles$p.exerciseLink];
-      promptContainer = /*#__PURE__*/React.createElement(Clickable, {
-        onClick: onClick,
-        "aria-expanded": this.state.expanded
-      }, () => /*#__PURE__*/React.createElement(View, {
-        style: viewStyling
-      }, `[${promptText}]`));
-    }
-    const expandedStyle = isMobile ? styles$p.contentExpandedMobile : styles$p.contentExpanded;
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$p.container)
-    }, promptContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$p.content, isMobile && styles$p.contentMobile, this.state.expanded && expandedStyle)
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "content"
+    const caretIcon = this.state.expanded ? caretUp : caretDown;
+    const allowTransition = window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+
+    // Special styling is needed to fit the button in a block of text without throwing off the line spacing.
+    // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
+    const buttonStyleOverrides = {
+      height: "22px",
+      marginLeft: "-2px",
+      padding: "0 2px"
+    };
+    const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
+    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
+      mockOnFirstRender: false,
+      scope: "explanation-widget"
+    }, ids => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      "aria-expanded": this.state.expanded,
+      "aria-controls": ids.get("content"),
+      endIcon: caretIcon,
+      kind: "tertiary",
+      onClick: this._onClick,
+      size: "large",
+      style: buttonStyleOverrides
+    }, promptText), /*#__PURE__*/React.createElement(View, {
+      id: ids.get("content"),
+      style: contentStyling,
+      "aria-hidden": !this.state.expanded,
+      testId: "content-container"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$p.contentWrapper
     }, /*#__PURE__*/React.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
       widgets: this.props.widgets,
       linterContext: this.props.linterContext
-    })));
+    })))));
   }
 }
 Explanation.defaultProps = {
@@ -24944,94 +24934,44 @@ Explanation.defaultProps = {
 };
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
-const arrowWidth = 30;
 const arrowHeight = 14;
-const backgroundColor = gray95;
 const styles$p = StyleSheet.create({
-  container: {
-    display: "inline",
+  content: {
+    borderLeft: "0px solid #ccc",
+    display: "inline-grid",
     position: "relative"
   },
-  linkContainer: {
-    display: "inline-block"
-  },
-  explanationLink: {
-    fontStyle: "italic",
-    color: "#007d96"
-  },
-  articleLink: {
-    // Copied from .body-text in articles.less
-    fontSize: 20,
-    lineHeight: "30px"
-  },
-  exerciseLink: {
-    // Copied from .legacy-typography in util.less
-    fontSize: 14,
-    lineHeight: "19.6px"
-  },
-  mobileExplanationLink: {
-    color: kaGreen$1,
-    borderBottom: `dashed 1px ${kaGreen$1}`,
-    textDecoration: "none",
-    // TODO(benkomalo): these should be pulled in from common typography
-    // shared files so we have a single place where the type hierarchy is
-    // defined; one off font sizes for individual components should be
-    // avoided.
-    [mediaQueries.xl]: {
-      fontSize: 22,
-      lineHeight: 1.4
-    },
-    [mediaQueries.lgOrSmaller]: {
-      fontSize: 20,
-      lineHeight: 1.5
-    },
-    [mediaQueries.smOrSmaller]: {
-      fontSize: 18,
-      lineHeight: 1.2
-    }
-  },
-  content: {
-    position: "relative",
-    transition: "margin-top 0.1s"
+  contentCollapsed: {
+    gridTemplateColumns: "0fr",
+    gridTemplateRows: "0fr",
+    marginBottom: 0,
+    marginTop: 0,
+    minWidth: "0",
+    paddingBottom: 0,
+    visibility: "hidden"
   },
   contentExpanded: {
-    borderLeft: "5px solid #ccc",
+    borderLeftWidth: "5px",
+    gridTemplateColumns: "1fr",
+    gridTemplateRows: "1fr",
     marginLeft: -leftBorderSpacing,
+    minWidth: "100%",
     paddingLeft: leftBorderSpacing,
     paddingBottom: verticalContentPadding,
+    visibility: "visible",
     // Note: we still use arrow height as the vertical margin, even on
     // desktop when there is no arrow, but it's good enough.
     marginBottom: arrowHeight,
     marginTop: arrowHeight
   },
-  contentExpandedMobile: {
-    boxSizing: "content-box",
-    paddingTop: 32,
-    paddingBottom: 32,
-    marginTop: arrowHeight
+  contentWrapper: {
+    overflow: "hidden"
   },
-  contentMobile: {
-    background: backgroundColor,
-    // TODO(benkomalo): this is to "full bleed" the background.
-    // The actual content padding differs depending on the host
-    // container, so this needs to be fixed eventually.
-    marginLeft: negativePhoneMargin,
-    marginRight: negativePhoneMargin,
-    paddingLeft: phoneMargin,
-    paddingRight: phoneMargin
-  },
-  disclosureArrow: {
-    // HACK - positioning at "bottom: 0", doesn't actually position it to
-    // the real bottom, because the container is `inline-block`, and it
-    // seems to position it to the baseline? We put in a generous
-    // fudge factor to position it down to be flush with the content box
-    // below it.
-    bottom: -(arrowHeight + 5),
-    height: arrowHeight,
-    left: "50%",
-    marginLeft: -(arrowWidth / 2),
-    position: "absolute",
-    width: arrowWidth
+  transitionCollapsed: {
+    transition: "all 0.25s step-end, grid-template-rows 0.25s, margin-top 0.25s, margin-bottom 0.25s, padding-bottom 0.25s"
+  },
+  transitionExpanded: {
+    transition: "grid-template-rows 0.5s, margin-top 0.5s, margin-bottom 0.5s, padding-bottom 0.5s"
   }
 });
 var Explanation$1 = {
@@ -26348,7 +26288,7 @@ var util = /*#__PURE__*/Object.freeze({
 });
 
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$2 = Graphie.MovablePoint;
+const MovablePoint$3 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const MovableLine$1 = Graphie.MovableLine;
 function isFlipped(newCoord, oldCoord, line) {
@@ -26430,7 +26370,7 @@ class FunctionGrapher extends React.Component {
         }],
         normalStyle: dashed,
         highlightStyle: dashed
-      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$2, {
+      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$3, {
         key: `asymptoteCoord-${i}`,
         coord: coord,
         static: true,
@@ -26445,7 +26385,7 @@ class FunctionGrapher extends React.Component {
   }
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React.createElement(MovablePoint$2, {
+      return /*#__PURE__*/React.createElement(MovablePoint$3, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -27279,7 +27219,7 @@ const Label = Graphie.Label;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
 const Line$1 = Graphie.Line;
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$1 = Graphie.MovablePoint;
+const MovablePoint$2 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const MovableLine = Graphie.MovableLine;
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
@@ -27528,7 +27468,7 @@ class Interaction extends React.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27550,7 +27490,7 @@ class Interaction extends React.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React.createElement(MovablePoint$1, {
+        return /*#__PURE__*/React.createElement(MovablePoint$2, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27585,7 +27525,7 @@ class Interaction extends React.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27626,14 +27566,14 @@ class Interaction extends React.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React.createElement(MovablePoint$1, {
+        }, /*#__PURE__*/React.createElement(MovablePoint$2, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+        }), /*#__PURE__*/React.createElement(MovablePoint$2, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28054,33 +27994,6 @@ class Graph extends React.Component {
         allowScratchpad: true,
         setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
       });
-
-      // Maybe move this out later
-      if (this.props.lockedFigures) {
-        for (const lockedFigure of this.props.lockedFigures) {
-          switch (lockedFigure.type) {
-            case "point":
-              graphie.circle(
-              // center
-              lockedFigure.coord,
-              // radius
-              0.2,
-              // style
-              lockedFigure.style);
-              break;
-            default:
-              /**
-               * Devlopment-time future-proofing: This `never` should
-               * fail during type-checking if we add a new locked
-               * shape type and forget to handle it in any other
-               * switch case here.
-               */
-              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-              lockedFigure.type;
-              throw new Error(`Unknown locked shape type: ${lockedFigure.type}`);
-          }
-        }
-      }
       this._updateProtractor();
       this._updateRuler();
 
@@ -28206,6 +28119,35 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+const GraphLockedLayer = props => {
+  const {
+    lockedFigures
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lockedFigures.map((figure, index) => {
+    switch (figure.type) {
+      case "point":
+        const [x, y] = figure.coord;
+        return /*#__PURE__*/React.createElement(Point$2, {
+          key: `${figure.type}-${index}`,
+          x: x,
+          y: y,
+          svgCircleProps: {
+            style: figure.style
+          }
+        });
+    }
+
+    /**
+     * Devlopment-time future-proofing: This `never` should
+     * fail during type-checking if we add a new locked
+     * shape type and forget to handle it in any other
+     * switch case here.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    throw new UnreachableCaseError(figure.type);
+  }));
+};
+
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(objectIndex, pointIndex, destination) {
   return {
@@ -28224,6 +28166,59 @@ function moveSegment(segmentIndex, delta) {
   };
 }
 
+const MovablePoint$1 = props => {
+  const hitboxRef = useRef(null);
+  const {
+    point,
+    onMove
+  } = props;
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: hitboxRef,
+    point,
+    onMove,
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = useTransformContext();
+  const transformToPx = vec.matrixMult(viewTransform, userTransform);
+  const [x, y] = vec.transform(point, transformToPx);
+  return /*#__PURE__*/React.createElement("g", {
+    ref: hitboxRef,
+    className: "movable-point",
+    tabIndex: 0,
+    style: {
+      cursor: dragging ? "grabbing" : "grab",
+      touchAction: "none",
+      outline: "none",
+      "--movable-point-color": Color.blue
+    }
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: 30,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-ring",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-center",
+    cx: x,
+    cy: y,
+    style: {
+      fill: Color.blue
+    }
+  }));
+};
+
 const SegmentGraph = props => {
   const {
     dispatch
@@ -28266,9 +28261,9 @@ const SegmentView = props => {
     viewTransform,
     userTransform
   } = useTransformContext();
-  const transform = vec.matrixMult(viewTransform, userTransform);
-  const scaledPoint1 = vec.transform(pt1, transform);
-  const scaledPoint2 = vec.transform(pt2, transform);
+  const transformToPx = vec.matrixMult(viewTransform, userTransform);
+  const pt1Px = vec.transform(pt1, transformToPx);
+  const pt2Px = vec.transform(pt2, transformToPx);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: segment,
     tabIndex: 0,
@@ -28277,28 +28272,26 @@ const SegmentView = props => {
       cursor: isDraggingSegment ? "grabbing" : "grab"
     }
   }, /*#__PURE__*/React.createElement(SVGLine, {
-    start: scaledPoint1,
-    end: scaledPoint2,
+    start: pt1Px,
+    end: pt2Px,
     style: {
       stroke: "transparent",
       strokeWidth: 30
     }
   }), /*#__PURE__*/React.createElement(SVGLine, {
-    start: scaledPoint1,
-    end: scaledPoint2,
+    start: pt1Px,
+    end: pt2Px,
     style: {
       stroke: "var(--mafs-segment-stroke-color)",
       strokeWidth: "var(--mafs-segment-stroke-weight)"
     }
-  })), /*#__PURE__*/React.createElement(MovablePoint$5, {
+  })), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: pt1,
-    color: Color.blue,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React.createElement(MovablePoint$5, {
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: pt2,
-    color: Color.blue,
     onMove: newPoint => {
       props.onMovePoint(1, newPoint);
     }
@@ -29230,7 +29223,9 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), renderGraph({
+  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+    lockedFigures: props.lockedFigures
+  }), renderGraph({
     state,
     dispatch
   }))));
@@ -29369,12 +29364,13 @@ class InteractiveGraph extends React.Component {
       }
     };
     this.resetGraphie = () => {
+      var _this$refs$graph;
       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();
+      (_this$refs$graph = this.refs.graph) == null || _this$refs$graph.reset();
     };
     this.setupGraphie = () => {
       this.setTrashCanVisibility(0);
@@ -30507,8 +30503,7 @@ class InteractiveGraph extends React.Component {
       onMouseDown: onMouseDown,
       onGraphieUpdated: this.setGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile,
-      lockedFigures: this.props.lockedFigures
+      isMobile: isMobile
     }));
   }
   static getQuadraticCoefficients(coords) {
@@ -41239,7 +41234,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.1.0";
+const libVersion = "20.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {