@khanacademy/perseus 20.0.2 → 20.2.0

package/dist/index.js

@@ -31,9 +31,11 @@ var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 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');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var createReactClass = require('create-react-class');
 var Switch = require('@khanacademy/wonder-blocks-switch');
-var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 var reactPopper = require('react-popper');
 var Link = require('@khanacademy/wonder-blocks-link');
@@ -78,6 +80,7 @@ var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown)
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
+var questionIcon__default = /*#__PURE__*/_interopDefaultLegacy(questionIcon);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
@@ -294,7 +297,7 @@ class MathInput extends React__namespace.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$C.outerWrapper, this.state.focused && styles$C.wrapperFocused, this.props.hasError && styles$C.wrapperError]
+      style: [styles$D.outerWrapper, this.state.focused && styles$D.wrapperFocused, this.props.hasError && styles$D.wrapperError]
     }, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -325,7 +328,7 @@ class MathInput extends React__namespace.Component {
       dismissEnabled: true,
       content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$C.popoverContent
+        style: styles$D.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
@@ -365,9 +368,9 @@ const MathInputIcon = _ref => {
       color = Color__default["default"].offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$C.iconActive : styles$C.iconInactive;
+  const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$C.iconContainer, dynamicClass]
+    style: [styles$D.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -412,7 +415,7 @@ const inputFocused = {
   borderColor: Color__default["default"].blue,
   margin: -1
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -2702,11 +2705,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
@@ -14998,7 +15004,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 {
   // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
 
   _listenerMap = {};
@@ -16126,10 +16132,10 @@ ___default["default"].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) {
@@ -16171,7 +16177,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$3 = GraphieClasses.createClass({
+const MovablePoint$4 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16229,7 +16235,7 @@ const MovablePoint$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-___default["default"].extend(MovablePoint$3, Interactive2.MovablePoint);
+___default["default"].extend(MovablePoint$4, Interactive2.MovablePoint);
 const MovableLine$2 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
@@ -16399,7 +16405,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,
@@ -17931,33 +17937,33 @@ class Lint extends React__namespace.Component {
     let warningText;
     let warningTextStyle;
     if (this.props.severity === Severity.Error) {
-      severityStyle = styles$B.indicatorError;
+      severityStyle = styles$C.indicatorError;
       warningText = "Error";
-      warningTextStyle = styles$B.publishBlockingError;
+      warningTextStyle = styles$C.publishBlockingError;
     } else if (this.props.severity === Severity.Warning) {
-      severityStyle = styles$B.indicatorWarning;
+      severityStyle = styles$C.indicatorWarning;
       warningText = "Warning";
-      warningTextStyle = styles$B.warning;
+      warningTextStyle = styles$C.warning;
     } else {
-      severityStyle = styles$B.indicatorGuideline;
+      severityStyle = styles$C.indicatorGuideline;
       warningText = "Recommendation";
-      warningTextStyle = styles$B.warning;
+      warningTextStyle = styles$C.warning;
     }
     return /*#__PURE__*/React__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$B.indicator, severityStyle)
+      className: aphrodite.css(styles$C.indicator, severityStyle)
     }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+      className: aphrodite.css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
     }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
       key: i,
-      className: aphrodite.css(styles$B.tooltipParagraph)
+      className: aphrodite.css(styles$C.tooltipParagraph)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(warningTextStyle)
     }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+      className: aphrodite.css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
     })));
   };
 
@@ -17985,20 +17991,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$C.lintContainer, styles$C.lintContainerBlock)
+      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$C.lintContainer)
+      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$C.lintContainer)
+    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -20122,7 +20128,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$A.mobileZoomableParentFix
+          ...styles$B.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -20259,7 +20265,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$A.mobileZoomableParentFix
+        ...styles$B.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -20767,7 +20773,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-const styles$A = {
+const styles$B = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21702,10 +21708,10 @@ class InputNumber extends React__namespace.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign];
+    const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$z.answerStateUnanswered);
+      inputStyles.push(styles$A.answerStateUnanswered);
     }
     return /*#__PURE__*/React__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21844,7 +21850,7 @@ class InputNumber extends React__namespace.Component {
     return answerString;
   }
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22833,7 +22839,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-test-id": "focus-ring",
-    className: aphrodite.css(styles$y.ring),
+    className: aphrodite.css(styles$z.ring),
     style: style
   }, children);
 };
@@ -22842,7 +22848,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22879,7 +22885,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22902,7 +22908,7 @@ const CrossOutLine = function (props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: aphrodite.css(styles$w.crossOutLine),
+    className: aphrodite.css(styles$x.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22917,7 +22923,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22998,7 +23004,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$x.iconWrapper)
+    className: aphrodite.css(styles$y.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: Color__default["default"].blue,
     visible: focused || hovered,
@@ -23007,13 +23013,13 @@ const ChoiceIcon = function (props) {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
+    className: aphrodite.css(styles$w.circle, showCorrectness && correct && styles$w.circleCorrect, showCorrectness && !correct && styles$w.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$w.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$v.innerWrapper)
+    className: aphrodite.css(styles$w.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -23022,7 +23028,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23114,19 +23120,19 @@ const OptionStatus = function (props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$u.correct;
+    textStyle = styles$v.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$u.incorrectAnswered;
+      textStyle = styles$v.incorrectAnswered;
     } else {
-      textStyle = styles$u.incorrect;
+      textStyle = styles$v.incorrect;
     }
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$u.text, textStyle)
+    className: aphrodite.css(styles$v.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23200,8 +23206,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$t.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$t.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$u.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$u.rationale));
 
   // We want to show the choices as dimmed out when the choices are disabled.
   // However, we don't want to do this when we're in review mode in the
@@ -23372,7 +23378,7 @@ const Choice = function (props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23564,10 +23570,10 @@ const BaseRadio = function (props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = aphrodite.css(styles$s.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$t.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23618,7 +23624,7 @@ const BaseRadio = function (props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.css(sharedStyles.aboveScratchpad, styles$s.item, styles$s.responsiveItem, checked && styles$s.selectedItem, checked && choice.highlighted && styles$s.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$s.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$s.nextHighlighted);
+      return aphrodite.css(sharedStyles.aboveScratchpad, styles$t.item, styles$t.responsiveItem, checked && styles$t.selectedItem, checked && choice.highlighted && styles$t.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$t.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$t.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23692,14 +23698,14 @@ const BaseRadio = function (props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.responsiveContainer)
+    className: aphrodite.css(styles$t.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24358,9 +24364,9 @@ class Categorizer extends React__namespace.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React__namespace.createElement("table", {
-      className: "categorizer-table " + aphrodite.css(styles$r.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$s.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$r.emptyHeaderCell)
+      className: aphrodite.css(styles$s.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -24368,7 +24374,7 @@ class Categorizer extends React__namespace.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React__namespace.createElement("th", {
-        className: aphrodite.css(styles$r.header),
+        className: aphrodite.css(styles$s.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -24388,7 +24394,7 @@ class Categorizer extends React__namespace.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React__namespace.createElement("td", {
-          className: "category " + aphrodite.css(styles$r.cell),
+          className: "category " + aphrodite.css(styles$s.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24403,7 +24409,7 @@ class Categorizer extends React__namespace.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24415,7 +24421,7 @@ class Categorizer extends React__namespace.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$r.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$s.fullBleedContainer] : [];
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24464,7 +24470,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24727,7 +24733,7 @@ class CSProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$q.widthOverride, styleContainer && styles$q.container)
+      className: aphrodite.css(styles$r.widthOverride, styleContainer && styles$r.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24737,7 +24743,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24785,7 +24791,7 @@ class Definition extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
         content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
           color: "white",
-          style: styles$p.tooltipBody,
+          style: styles$q.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -24816,7 +24822,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$p = {
+const styles$q = {
   tooltipBody: {
     color: Color__default["default"].offBlack,
     fontSize: 20,
@@ -25017,15 +25023,15 @@ class Explanation extends React__namespace.Component {
     const onClick = this._onClick;
     if (isMobile) {
       promptContainer = /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$o.linkContainer)
+        className: aphrodite.css(styles$p.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
-        className: aphrodite.css(styles$o.mobileExplanationLink),
+        className: aphrodite.css(styles$p.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, promptText), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
-        className: aphrodite.css(styles$o.disclosureArrow)
+        className: aphrodite.css(styles$p.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -25033,7 +25039,7 @@ class Explanation extends React__namespace.Component {
         points: `0,${arrowHeight} ` + `${arrowWidth},${arrowHeight} ` + `${arrowWidth / 2},0`
       })));
     } else {
-      const viewStyling = isArticle ? [styles$o.explanationLink, styles$o.articleLink] : [styles$o.explanationLink, styles$o.exerciseLink];
+      const viewStyling = isArticle ? [styles$p.explanationLink, styles$p.articleLink] : [styles$p.explanationLink, styles$p.exerciseLink];
       promptContainer = /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         onClick: onClick,
         "aria-expanded": this.state.expanded
@@ -25041,11 +25047,11 @@ class Explanation extends React__namespace.Component {
         style: viewStyling
       }, `[${promptText}]`));
     }
-    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
+    const expandedStyle = isMobile ? styles$p.contentExpandedMobile : styles$p.contentExpanded;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$o.container)
+      className: aphrodite.css(styles$p.container)
     }, promptContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
+      className: aphrodite.css(styles$p.content, isMobile && styles$p.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -25068,7 +25074,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -25174,15 +25180,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       onNextQuestion
     } = this.props;
     const answerBarStyle = {
-      ...styles$n.answerBar,
+      ...styles$o.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? Color__default["default"].offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     };
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.tryAgainIcon
+      style: styles$o.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -25201,7 +25207,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -25223,7 +25229,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$n = {
+const styles$o = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25423,7 +25429,7 @@ class GradedGroup extends React__namespace.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n__namespace._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$m.gradedGroupInSet) : aphrodite.css(styles$m.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$n.gradedGroupInSet) : aphrodite.css(styles$n.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25442,7 +25448,7 @@ class GradedGroup extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.title)
+      className: aphrodite.css(styles$n.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25475,7 +25481,7 @@ class GradedGroup extends React__namespace.Component {
     }, i18n__namespace._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: aphrodite.css(styles$m.explanationTitle),
+      className: aphrodite.css(styles$n.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25507,7 +25513,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$m.showHintLink)
+      className: aphrodite.css(styles$n.showHintLink)
     }, i18n__namespace._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25519,7 +25525,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$2 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25589,20 +25595,20 @@ class Indicators extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames__default["default"](aphrodite.css(styles$l.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$m.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$l.indicator),
+        className: aphrodite.css(styles$m.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": i18n__namespace._("Skip to %(title)s", {
           title
         }),
-        style: styles$l.indicatorButton,
+        style: styles$m.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
       }, _ref2 => {
@@ -25612,9 +25618,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: [styles$l.indicatorDot, (hovered || focused || pressed) && styles$l.indicatorDotFocused]
+          style: [styles$m.indicatorDot, (hovered || focused || pressed) && styles$m.indicatorDotFocused]
         }, i === this.props.currentGroup && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$l.indicatorDotActive
+          style: styles$m.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, i18n__namespace._("Current"))));
@@ -25690,7 +25696,7 @@ class GradedGroupSet extends React__namespace.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$l.container)
+        className: aphrodite.css(styles$m.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25713,13 +25719,13 @@ class GradedGroupSet extends React__namespace.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.container)
+      className: aphrodite.css(styles$m.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.top)
+      className: aphrodite.css(styles$m.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.title)
+      className: aphrodite.css(styles$m.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.spacer)
+      className: aphrodite.css(styles$m.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25757,7 +25763,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25862,7 +25868,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
+        className: aphrodite.css(styles$l.buttonStyle, button.value === value && styles$l.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25875,7 +25881,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -26479,7 +26485,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) {
@@ -26525,7 +26531,7 @@ class FunctionGrapher extends React__namespace.Component {
   })();
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+      return /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -26662,7 +26668,7 @@ class FunctionGrapher extends React__namespace.Component {
       }],
       normalStyle: dashed,
       highlightStyle: dashed
-    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
       key: `asymptoteCoord-${i}`,
       coord: coord,
       static: true,
@@ -27425,7 +27431,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'.
@@ -27679,7 +27685,7 @@ class Interaction extends React__namespace.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 [
@@ -27701,7 +27707,7 @@ class Interaction extends React__namespace.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27736,7 +27742,7 @@ class Interaction extends React__namespace.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 [
@@ -27777,14 +27783,14 @@ class Interaction extends React__namespace.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28235,33 +28241,6 @@ class Graph extends React__namespace.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();
 
@@ -28354,6 +28333,35 @@ class Graph extends React__namespace.Component {
   }
 }
 
+const GraphLockedLayer = props => {
+  const {
+    lockedFigures
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lockedFigures.map((figure, index) => {
+    switch (figure.type) {
+      case "point":
+        const [x, y] = figure.coord;
+        return /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+          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 wonderStuffCore.UnreachableCaseError(figure.type);
+  }));
+};
+
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(objectIndex, pointIndex, destination) {
   return {
@@ -28372,6 +28380,59 @@ function moveSegment(segmentIndex, delta) {
   };
 }
 
+const MovablePoint$1 = props => {
+  const hitboxRef = React.useRef(null);
+  const {
+    point,
+    onMove
+  } = props;
+  const {
+    dragging
+  } = mafs.useMovable({
+    gestureTarget: hitboxRef,
+    point,
+    onMove,
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  const [x, y] = mafs.vec.transform(point, transformToPx);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    ref: hitboxRef,
+    className: "movable-point",
+    tabIndex: 0,
+    style: {
+      cursor: dragging ? "grabbing" : "grab",
+      touchAction: "none",
+      outline: "none",
+      "--movable-point-color": Color__default["default"].blue
+    }
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: 30,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-ring",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-center",
+    cx: x,
+    cy: y,
+    style: {
+      fill: Color__default["default"].blue
+    }
+  }));
+};
+
 const SegmentGraph = props => {
   const {
     dispatch
@@ -28394,31 +28455,76 @@ const SegmentGraph = props => {
   })));
 };
 const SegmentView = props => {
-  const [pt1, pt2] = props.segment;
+  const {
+    onMoveSegment,
+    segment: [pt1, pt2]
+  } = props;
   const midpoint = mafs.vec.midpoint(pt1, pt2);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Line.Segment, {
-    point1: pt1,
-    point2: pt2
-  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  const segment = React.useRef(null);
+  const {
+    dragging: isDraggingSegment
+  } = mafs.useMovable({
+    gestureTarget: segment,
     point: midpoint,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
-      props.onMoveSegment(mafs.vec.sub(newPoint, midpoint));
+      onMoveSegment(mafs.vec.sub(newPoint, midpoint));
+    },
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  const pt1Px = mafs.vec.transform(pt1, transformToPx);
+  const pt2Px = mafs.vec.transform(pt2, transformToPx);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
+    ref: segment,
+    tabIndex: 0,
+    className: "movable-segment",
+    style: {
+      cursor: isDraggingSegment ? "grabbing" : "grab"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: pt1Px,
+    end: pt2Px,
+    style: {
+      stroke: "transparent",
+      strokeWidth: 30
+    }
+  }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: pt1Px,
+    end: pt2Px,
+    style: {
+      stroke: "var(--mafs-segment-stroke-color)",
+      strokeWidth: "var(--mafs-segment-stroke-weight)"
     }
-  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  })), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: pt1,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: pt2,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
       props.onMovePoint(1, newPoint);
     }
   }));
 };
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style
+  });
+}
 
 const renderLineLabel = (n, _ref) => {
   let [min, max] = _ref;
@@ -28596,7 +28702,7 @@ const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$j.icon)
+  className: aphrodite.css(styles$k.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " + "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " + "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " + "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" + "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " + "0 0 0 0 6z"
@@ -28627,7 +28733,7 @@ const HiddenIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$j.icon)
+  className: aphrodite.css(styles$k.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " + "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " + "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." + "604.401 1.268.401 1.966 0 1.02-.305 " + "1.967-.828 2.757l2.535 2.536a1 1 0 0 " + "1-1.414 1.414l-12-12a1 1 0 0 1 " + "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " + "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " + "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " + "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " + "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " + "2.363-3.085 3.929-4z"
@@ -28662,20 +28768,20 @@ const HUD = _ref => {
   let state;
   let icon;
   if (enabled) {
-    state = styles$j.enabled;
+    state = styles$k.enabled;
     icon = /*#__PURE__*/React__namespace.createElement(VisibleIcon, null);
   } else {
-    state = styles$j.disabled;
+    state = styles$k.disabled;
     icon = /*#__PURE__*/React__namespace.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React__namespace.createElement("button", {
-    className: aphrodite.css(styles$j.hud, fixedPosition && styles$j.hudFixedPosition, state),
+    className: aphrodite.css(styles$k.hud, fixedPosition && styles$k.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -28739,7 +28845,7 @@ const triangleBeforeAfter = {
   top: "0",
   width: "0"
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   infoTip: {
     display: "inline-block",
     marginLeft: "5px",
@@ -28780,7 +28886,6 @@ const styles$i = aphrodite.StyleSheet.create({
     width: "240px"
   }
 });
-const questionMark = "data:image/png;base64," + "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBB" + "ZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/" + "eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+" + "IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2Jl" + "IFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAg" + "ICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5" + "LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9" + "IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHht" + "bG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3Vy" + "Y2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHht" + "cE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2N2M3NTAxYS04YmVlLTQ0M2Mt" + "YmRiNS04OGM2N2IxN2NhYzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJCRTk4" + "Qjc4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5p" + "aWQ6OUJCRTk4QjY4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcDpDcmVhdG9yVG9v" + "bD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRG" + "cm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NGE5ZDI0OTMtODk1NC00OGFkLTlh" + "MTgtZDAwM2MwYWNjNDJlIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY3Yzc1MDFh" + "LThiZWUtNDQzYy1iZGI1LTg4YzY3YjE3Y2FjMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4g" + "PC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqm89uYAAADM" + "SURBVHjaXJA9DoJAEIUH1M4TUHIFsCMGen9OwCGw1YRGW2ntKel0exsojHIBC0ouQAyU" + "viFDstmXfNmZeS+zm7XSNCXRFiRgJf0bXIHixpbhGdxBBJYC1w/xaA424MhNEATkui71" + "fU9KqfEU78UbD9PdbJRlOdae55GmhIP+1NV1TcMwkOM41DSNHvRtMhTHMRVFQW3b6mOL" + "gx99kue5GRp/gIOZuZGvNpTNwjD8oliANU+qqqKu6/TQBdymN57AHjzBT+B6Jx79BRgA" + "vc49kQA4yxgAAAAASUVORK5CYII=";
 class InfoTip$1 extends React__namespace.Component {
   state = {
     hover: false
@@ -28797,23 +28902,22 @@ class InfoTip$1 extends React__namespace.Component {
   };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.infoTip)
-    }, /*#__PURE__*/React__namespace.createElement("img", {
-      alt: "",
-      width: 10,
-      height: 10,
-      src: questionMark,
+      className: aphrodite.css(styles$j.infoTip)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.infoTipContainer),
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+      size: "small",
+      icon: questionIcon__default["default"]
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$j.infoTipContainer),
       style: {
         display: this.state.hover ? "block" : "none"
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.infoTipTriangle)
+      className: aphrodite.css(styles$j.infoTipTriangle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.verticalShadow, styles$i.infoTipContentContainer)
+      className: aphrodite.css(styles$j.verticalShadow, styles$j.infoTipContentContainer)
     }, this.props.children)));
   }
 }
@@ -28885,7 +28989,7 @@ class MultiButtonGroup extends React__namespace.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: aphrodite.css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
+        className: aphrodite.css(styles$i.buttonStyle, selected && styles$i.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -28897,7 +29001,7 @@ class MultiButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -29162,11 +29266,12 @@ const PropCheckBox = createReactClass__default["default"]({
   },
   render: function () {
     const propName = this.propName();
-    return /*#__PURE__*/React__namespace.createElement("label", null, this._labelAlignLeft() && this.props.label, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    return /*#__PURE__*/React__namespace.createElement("label", {
+      className: aphrodite.css(styles$h.labeledCheckbox)
+    }, this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       checked: this.props[propName],
       onChange: this.toggle
-    }), !this._labelAlignLeft() && this.props.label);
+    }), !this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label));
   },
   toggle: function () {
     const propName = this.propName();
@@ -29175,6 +29280,13 @@ const PropCheckBox = createReactClass__default["default"]({
     this.props.onChange(changes);
   }
 });
+const styles$h = aphrodite.StyleSheet.create({
+  labeledCheckbox: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
 
 const truth = () => true;
 
@@ -29333,7 +29445,9 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), renderGraph({
+  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+    lockedFigures: props.lockedFigures
+  }), renderGraph({
     state,
     dispatch
   }))));
@@ -29512,7 +29626,7 @@ class InteractiveGraph extends React__namespace.Component {
     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?.reset();
   };
   setupGraphie = () => {
     this.setTrashCanVisibility(0);
@@ -30588,8 +30702,7 @@ class InteractiveGraph extends React__namespace.Component {
       onMouseDown: onMouseDown,
       onGraphieUpdated: this.setGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile,
-      lockedFigures: this.props.lockedFigures
+      isMobile: isMobile
     }));
   }
   static getQuadraticCoefficients(coords) {
@@ -41311,7 +41424,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.0.2";
+const libVersion = "20.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {