@khanacademy/perseus 27.2.0 → 28.0.0

package/dist/es/index.js

@@ -5,7 +5,7 @@ import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
 import { View, RenderStateRoot, UniqueIDProvider, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
-import { LabelSmall, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
+import { HeadingMedium, LabelSmall, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet, css } from 'aphrodite';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -17,13 +17,14 @@ import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
 import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
 import $ from 'jquery';
+import { v4 } from 'uuid';
 import PropTypes from 'prop-types';
 import { number, point, vector as vector$1, line } from '@khanacademy/kmath';
 import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
-import { TextField, Checkbox } from '@khanacademy/wonder-blocks-form';
+import { TextField } from '@khanacademy/wonder-blocks-form';
 import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
@@ -34,11 +35,11 @@ import debounce$2 from 'lodash.debounce';
 import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, useTransformContext, Text as Text$1, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
-import createReactClass from 'create-react-class';
 import { useDrag } from '@use-gesture/react';
 import Switch from '@khanacademy/wonder-blocks-switch';
 import Pill from '@khanacademy/wonder-blocks-pill';
 import { Popper } from 'react-popper';
+import createReactClass from 'create-react-class';
 import Link from '@khanacademy/wonder-blocks-link';
 
 function _extends() {
@@ -244,7 +245,9 @@ const mockStrings = {
   loading: "Loading...",
   videoTranscript: "See video transcript",
   somethingWrong: "Something went wrong.",
-  videoWrapper: "Khan Academy video wrapper"
+  videoWrapper: "Khan Academy video wrapper",
+  mathInputTitle: "mathematics keyboard",
+  mathInputDescription: "Use keyboard/mouse to interact with math-based input fields"
 };
 
 /**
@@ -275,6 +278,26 @@ function PerseusI18nContextProvider({
 }
 const usePerseusI18n = () => useContext(PerseusI18nContext);
 
+/*
+ * A11y (Accessibility) style rules
+ * These are used to mark up areas on the site that should only be readable
+ * when using a screen reader.
+ */
+var a11y = StyleSheet.create({
+  // Make content only visible to screen readers.
+  // Both collegeboard.org and Bootstrap 3 use this exact implementation.
+  srOnly: {
+    border: 0,
+    clip: "rect(0,0,0,0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    width: 1
+  }
+});
+
 const debounce = (func, delay) => {
   let timer = null;
   return (...args) => {
@@ -472,11 +495,12 @@ class InnerMathInput extends React.Component {
       "mq-editable-field": true,
       "mq-math-mode": true
     });
+    const popoverContentUniqueId = v4().slice(0, 8);
     if (this.props.className) {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles$E.outerWrapper, this.state.focused && styles$E.wrapperFocused, this.props.hasError && styles$E.wrapperError]
+      style: [styles$D.outerWrapper, this.state.focused && styles$D.wrapperFocused, this.props.hasError && styles$D.wrapperError]
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",
@@ -504,18 +528,23 @@ class InnerMathInput extends React.Component {
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
       dismissEnabled: true,
+      "aria-label": this.context.strings.mathInputTitle,
+      "aria-describedby": `popover-content-${popoverContentUniqueId}`,
       content: () => {
         var _this$props$keypadBut, _this$props;
-        return /*#__PURE__*/React.createElement(PopoverContentCore, {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeadingMedium, {
+          id: `popover-content-${popoverContentUniqueId}`,
+          style: a11y.srOnly
+        }, this.context.strings.mathInputDescription), /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$E.popoverContent
+          style: styles$D.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
           onClickKey: this.handleKeypadPress,
           cursorContext: this.state.cursorContext,
           convertDotToTimes: this.props.convertDotToTimes
-        }, (_this$props$keypadBut = this.props.keypadButtonSets) != null ? _this$props$keypadBut : mapButtonSets((_this$props = this.props) == null ? void 0 : _this$props.buttonSets))));
+        }, (_this$props$keypadBut = this.props.keypadButtonSets) != null ? _this$props$keypadBut : mapButtonSets((_this$props = this.props) == null ? void 0 : _this$props.buttonSets)))));
       }
     }, this.props.buttonsVisible === "never" ? /*#__PURE__*/React.createElement(MathInputIcon, {
       hovered: false,
@@ -584,9 +613,9 @@ const MathInputIcon = ({
       fillColor = color.offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$E.iconActive : styles$E.iconInactive;
+  const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$E.iconContainer, dynamicClass]
+    style: [styles$D.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -631,7 +660,7 @@ const inputFocused = {
   borderColor: color.blue,
   margin: -1
 };
-const styles$E = StyleSheet.create({
+const styles$D = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -1161,26 +1190,6 @@ const ClassNames = {
   MOBILE: "perseus-mobile"
 };
 
-/*
- * A11y (Accessibility) style rules
- * These are used to mark up areas on the site that should only be readable
- * when using a screen reader.
- */
-var a11y = StyleSheet.create({
-  // Make content only visible to screen readers.
-  // Both collegeboard.org and Bootstrap 3 use this exact implementation.
-  srOnly: {
-    border: 0,
-    clip: "rect(0,0,0,0)",
-    height: 1,
-    margin: -1,
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    width: 1
-  }
-});
-
 const KhanMath = {
   // Simplify formulas before display
   cleanMath: function (expr) {
@@ -2475,7 +2484,7 @@ class Expression extends React.Component {
     var _this$props$keypadCon, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(View, {
-        className: css(styles$D.mobileLabelInputWrapper)
+        className: css(styles$C.mobileLabelInputWrapper)
       }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
         htmlFor: this._textareaId,
         tag: "label"
@@ -2510,7 +2519,7 @@ class Expression extends React.Component {
       ERROR_TITLE
     } = this.context.strings;
     return /*#__PURE__*/React.createElement(View, {
-      className: css(styles$D.desktopLabelInputWrapper)
+      className: css(styles$C.desktopLabelInputWrapper)
     }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
       htmlFor: this._textareaId,
       tag: "label"
@@ -2562,7 +2571,7 @@ Expression.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$D = StyleSheet.create({
+const styles$C = StyleSheet.create({
   mobileLabelInputWrapper: {
     padding: "15px 4px 0"
   },
@@ -8942,8 +8951,8 @@ function findChildOrAdd(elem, className) {
   return $child;
 }
 var Tex$1 = {
-  // Process a node and add math inside of it. This attempts to use KaTeX to
-  // format the math, and if that fails it falls back to MathJax.
+  // Process a node and add math inside of it. This uses MathJax to
+  // format the math.
   //
   // elem: The element which the math should be added to.
   //
@@ -15305,7 +15314,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;
@@ -15600,9 +15609,9 @@ class MovablePoint$4 {
    * Displays a tooltip above the point, replacing any previous contents. If
    * there is no tooltip initialized, adds the tooltip.
    *
-   * If the type of contents is string, the contents will be rendered with
-   * KaTeX. Otherwise, the content will be assumed to be a DOM node and will
-   * be appended inside the tooltip.
+   * If the type of contents is string, the contents will be rendered as TeX
+   * Otherwise, the content will be assumed to be a DOM node and will be
+   * appended inside the tooltip.
    */
   _showTooltip(contents) {
     if (!this._tooltip) {
@@ -15823,15 +15832,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;
 }
@@ -16425,10 +16434,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$4,
   addMovableLine: function (graphie, options) {
@@ -16469,7 +16478,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$3 = GraphieClasses.createClass({
+const MovablePoint$4 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16526,7 +16535,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$3 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
@@ -16696,7 +16705,7 @@ var Movables = {
   Label: Label$1,
   Line: Line$3,
   MovableLine: MovableLine$3,
-  MovablePoint: MovablePoint$3,
+  MovablePoint: MovablePoint$4,
   Parabola: Parabola,
   Path: Path,
   Plot: Plot$2,
@@ -17025,17 +17034,15 @@ class ImageLoader extends React.Component {
         src,
         imgProps
       } = this.props;
-      let onKeyUp = null;
-      let onKeyDown = null;
+      let onKeyUp;
+      let onKeyDown;
       if (imgProps.onClick != null) {
-        // @ts-expect-error - TS2322 - Type '(e: React.KeyboardEvent) => void' is not assignable to type 'null'.
         onKeyUp = e => {
           // 13 is enter key, 32 is space key
           if (e.keyCode === 13 || e.keyCode === 32) {
             imgProps.onClick && imgProps.onClick(e);
           }
         };
-        // @ts-expect-error - TS2322 - Type '(e: React.KeyboardEvent) => void' is not assignable to type 'null'.
         onKeyDown = e => {
           // 32 is space key
           if (e.keyCode === 32) {
@@ -17046,12 +17053,8 @@ class ImageLoader extends React.Component {
       }
       const staticUrl = getDependencies().staticUrl;
       return /*#__PURE__*/React.createElement("img", _extends({
-        src: staticUrl(src)
-        // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'KeyboardEventHandler<HTMLImageElement> | undefined'.
-        ,
-        onKeyUp: onKeyUp
-        // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'KeyboardEventHandler<HTMLImageElement> | undefined'.
-        ,
+        src: staticUrl(src),
+        onKeyUp: onKeyUp,
         onKeyDown: onKeyDown
       }, imgProps));
     };
@@ -17549,18 +17552,14 @@ class SvgImage extends React.Component {
           allowFullBleed: this.props.allowFullBleed && isImageProbablyPhotograph(imageSrc)
         }, /*#__PURE__*/React.createElement(ImageLoader, {
           src: imageSrc,
-          imgProps: imageProps
-          // @ts-expect-error - TS2322 - Type '(() => Element) | null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>> | null | undefined'.
-          ,
+          imgProps: imageProps,
           preloader: preloader,
           onUpdate: this.handleUpdate
         }), extraGraphie);
       }
       imageProps.style = dimensions;
       return /*#__PURE__*/React.createElement(ImageLoader, {
-        src: imageSrc
-        // @ts-expect-error - TS2322 - Type '(() => Element) | null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>> | null | undefined'.
-        ,
+        src: imageSrc,
         preloader: preloader,
         imgProps: imageProps,
         onUpdate: this.handleUpdate
@@ -17610,9 +17609,7 @@ class SvgImage extends React.Component {
       }, /*#__PURE__*/React.createElement(ImageLoader, {
         src: imageUrl,
         onLoad: this.onImageLoad,
-        onUpdate: this.handleUpdate
-        // @ts-expect-error - TS2322 - Type '(() => Element) | null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>> | null | undefined'.
-        ,
+        onUpdate: this.handleUpdate,
         preloader: preloader,
         imgProps: imageProps
       }), graphie, extraGraphie);
@@ -17624,9 +17621,7 @@ class SvgImage extends React.Component {
     }, /*#__PURE__*/React.createElement(ImageLoader, {
       src: imageUrl,
       onLoad: this.onImageLoad,
-      onUpdate: this.handleUpdate
-      // @ts-expect-error - TS2322 - Type '(() => Element) | null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>> | null | undefined'.
-      ,
+      onUpdate: this.handleUpdate,
       preloader: preloader,
       imgProps: imageProps
     }), graphie);
@@ -18199,33 +18194,33 @@ class Lint extends React.Component {
       let warningText;
       let warningTextStyle;
       if (this.props.severity === Severity.Error) {
-        severityStyle = styles$C.indicatorError;
+        severityStyle = styles$B.indicatorError;
         warningText = "Error";
-        warningTextStyle = styles$C.publishBlockingError;
+        warningTextStyle = styles$B.publishBlockingError;
       } else if (this.props.severity === Severity.Warning) {
-        severityStyle = styles$C.indicatorWarning;
+        severityStyle = styles$B.indicatorWarning;
         warningText = "Warning";
-        warningTextStyle = styles$C.warning;
+        warningTextStyle = styles$B.warning;
       } else {
-        severityStyle = styles$C.indicatorGuideline;
+        severityStyle = styles$B.indicatorGuideline;
         warningText = "Recommendation";
-        warningTextStyle = styles$C.warning;
+        warningTextStyle = styles$B.warning;
       }
       return /*#__PURE__*/React.createElement("a", {
         href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$C.indicator, severityStyle)
+        className: css(styles$B.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
+        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$C.tooltipParagraph)
+        className: css(styles$B.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
+        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
       })));
     };
   }
@@ -18263,20 +18258,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$C.lintContainer, styles$C.lintContainerBlock)
-      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$C.lintContainer)
-      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$C.lintContainer)
-    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$C = StyleSheet.create({
+const styles$B = 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.
@@ -18953,15 +18948,17 @@ class TranslationLinter {
 }
 
 /**
- * Preprocess TeX code to convert things that KaTeX doesn't know how to handle
+ * Preprocess TeX code to convert things that MathJax doesn't know how to handle
  * to things is does.
  */
-
 var preprocessTex = (texCode => texCode
 // Replace uses of \begin{align}...\end{align} which KaTeX doesn't
 // support (yet) with \begin{aligned}...\end{aligned} which renders
 // the same is supported by KaTeX.  It does the same for align*.
 // TODO(kevinb) update content to use aligned instead of align.
+// TODO(LEMS-1608) Remove this replacement as MathJax supports the
+// "align" macro correctly (and, in fact, it is not synonymous with
+// "aligned").
 .replace(/\{align[*]?\}/g, "{aligned}")
 // Replace non-breaking spaces with regular spaces.
 .replace(/[\u00a0]/g, " "));
@@ -20211,7 +20208,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -20238,6 +20235,9 @@ class Renderer extends React.Component {
         // support (yet) with \begin{aligned}...\end{aligned} which renders
         // the same is supported by KaTeX.  It does the same for align*.
         // TODO(kevinb) update content to use aligned instead of align.
+        // TODO(LEMS-1608) Remove this replacement as MathJax supports the
+        // "align" macro correctly (and, in fact, it is not synonymous with
+        // "aligned").
         const tex = node.content.replace(/\{align[*]?\}/g, "{aligned}");
 
         // We render math here instead of in perseus-markdown.jsx
@@ -20332,7 +20332,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20981,7 +20981,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-const styles$B = {
+const styles$A = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21855,10 +21855,10 @@ class InputNumber extends React.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$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
+    const inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$A.answerStateUnanswered);
+      inputStyles.push(styles$z.answerStateUnanswered);
     }
     return /*#__PURE__*/React.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21943,7 +21943,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$A = StyleSheet.create({
+const styles$z = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22938,7 +22938,7 @@ const FocusRing = function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "focus-ring",
-    className: css(styles$z.ring),
+    className: css(styles$y.ring),
     style: style
   }, children);
 };
@@ -22947,7 +22947,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$z = StyleSheet.create({
+const styles$y = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22974,7 +22974,7 @@ function getChoiceLetter(pos, strings) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$y = StyleSheet.create({
+const styles$x = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22997,7 +22997,7 @@ const CrossOutLine = function CrossOutLine(props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: css(styles$x.crossOutLine),
+    className: css(styles$w.crossOutLine),
     "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -23012,7 +23012,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$x = StyleSheet.create({
+const styles$w = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -23096,7 +23096,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$y.iconWrapper)
+    className: css(styles$x.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: color.blue,
     visible: focused || hovered,
@@ -23105,13 +23105,13 @@ const ChoiceIcon = function ChoiceIcon(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-testid": "choice-icon__library-choice-icon",
-    className: css(styles$w.circle, showCorrectness && correct && styles$w.circleCorrect, showCorrectness && !correct && styles$w.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$w.circleIncorrectAnswered)
+    className: css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$w.innerWrapper)
+    className: css(styles$v.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -23120,7 +23120,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23215,19 +23215,19 @@ const OptionStatus = function OptionStatus(props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$v.correct;
+    textStyle = styles$u.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$v.incorrectAnswered;
+      textStyle = styles$u.incorrectAnswered;
     } else {
-      textStyle = styles$v.incorrect;
+      textStyle = styles$u.incorrect;
     }
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.text, textStyle)
+    className: css(styles$u.text, textStyle)
   }, renderText(checked, correct, crossedOut, strings));
 };
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23297,8 +23297,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$u.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$u.rationale));
+  const descriptionClassName = classNames("description", css(styles$t.description));
+  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$t.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
@@ -23458,7 +23458,7 @@ const Choice = function Choice(props) {
     "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$u = StyleSheet.create({
+const styles$t = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23657,10 +23657,10 @@ const BaseRadio = function BaseRadio(props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
+  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
+  const instructionsClassName = classNames("instructions", css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
-  const responsiveClassName = css(styles$t.responsiveFieldset);
+  const responsiveClassName = css(styles$s.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -23711,7 +23711,7 @@ const BaseRadio = function BaseRadio(props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return 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);
+      return 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);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23785,14 +23785,14 @@ const BaseRadio = function BaseRadio(props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$t.responsiveContainer)
+    className: css(styles$s.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$t = StyleSheet.create({
+const styles$s = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24454,9 +24454,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$s.mobileTable)
+      className: "categorizer-table " + css(styles$r.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$s.emptyHeaderCell)
+      className: css(styles$r.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -24464,7 +24464,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$s.header),
+        className: css(styles$r.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -24486,7 +24486,7 @@ class Categorizer extends React.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React.createElement("td", {
-          className: "category " + css(styles$s.cell),
+          className: "category " + css(styles$r.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24501,7 +24501,7 @@ class Categorizer extends React.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React.createElement("span", {
-          className: css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
+          className: css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24513,7 +24513,7 @@ class Categorizer extends React.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$s.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$r.fullBleedContainer] : [];
     return /*#__PURE__*/React.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -24566,7 +24566,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$s = StyleSheet.create({
+const styles$r = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24802,7 +24802,7 @@ class CSProgram extends React.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$r.widthOverride, styleContainer && styles$r.container)
+      className: css(styles$q.widthOverride, styleContainer && styles$q.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24831,7 +24831,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$r = StyleSheet.create({
+const styles$q = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24874,7 +24874,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$q.tooltipBody,
+        style: styles$p.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -24907,7 +24907,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$q = {
+const styles$p = {
   tooltipBody: {
     color: color.offBlack,
     fontSize: 20,
@@ -25135,7 +25135,7 @@ class Explanation extends React.Component {
       marginRight: "-6px",
       "white-space": "normal"
     };
-    const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
+    const contentStyling = [styles$o.content, this.state.expanded ? styles$o.contentExpanded : styles$o.contentCollapsed, allowTransition && (this.state.expanded ? styles$o.transitionExpanded : styles$o.transitionCollapsed)];
     return /*#__PURE__*/React.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "explanation-widget"
@@ -25154,7 +25154,7 @@ class Explanation extends React.Component {
       "aria-hidden": !this.state.expanded,
       testId: "content-container"
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$p.contentWrapper
+      style: styles$o.contentWrapper
     }, /*#__PURE__*/React.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
@@ -25175,7 +25175,7 @@ Explanation.defaultProps = {
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
 const arrowHeight = 14;
-const styles$p = StyleSheet.create({
+const styles$o = StyleSheet.create({
   content: {
     borderLeft: "0px solid #ccc",
     display: "inline-grid",
@@ -25239,15 +25239,15 @@ class GradedGroupAnswerBar extends React.Component {
       correctExcited,
       nextQuestion
     } = this.context.strings;
-    const answerBarStyle = _extends({}, styles$o.answerBar, {
+    const answerBarStyle = _extends({}, styles$n.answerBar, {
       backgroundColor: answerBarState === "CORRECT" ? color.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.createElement("span", {
-      style: styles$o.text
+      style: styles$n.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$o.tryAgainIcon
+      style: styles$n.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -25266,7 +25266,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$o.text
+      style: styles$n.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -25289,7 +25289,7 @@ class GradedGroupAnswerBar extends React.Component {
 }
 GradedGroupAnswerBar.contextType = PerseusI18nContext;
 const fontSize = 17;
-const styles$o = {
+const styles$n = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25474,7 +25474,7 @@ class GradedGroup extends React.Component {
       }));
       gradeStatus = this.context.strings.incorrect;
     }
-    const mobileClass = this.props.inGradedGroupSet ? css(styles$n.gradedGroupInSet) : css(styles$n.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$m.gradedGroupInSet) : css(styles$m.gradedGroup);
     const classes = classNames({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25493,7 +25493,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$n.title)
+      className: css(styles$m.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25526,7 +25526,7 @@ class GradedGroup extends React.Component {
     }, this.context.strings.nextQuestion), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: css(styles$n.explanationTitle),
+      className: css(styles$m.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25559,7 +25559,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$n.showHintLink)
+      className: css(styles$m.showHintLink)
     }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25581,7 +25581,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$2 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$n = StyleSheet.create({
+const styles$m = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25654,18 +25654,18 @@ class Indicators extends React.Component {
     return /*#__PURE__*/React.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames(css(styles$m.indicatorContainer), "indicatorContainer")
+      className: classNames(css(styles$l.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
-      className: css(styles$m.indicator),
+      className: css(styles$l.indicator),
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": this.context.strings.skipToTitle({
         title
       }),
-      style: styles$m.indicatorButton,
+      style: styles$l.indicatorButton,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
     }, ({
@@ -25673,9 +25673,9 @@ class Indicators extends React.Component {
       focused,
       pressed
     }) => /*#__PURE__*/React.createElement(View, {
-      style: [styles$m.indicatorDot, (hovered || focused || pressed) && styles$m.indicatorDotFocused]
+      style: [styles$l.indicatorDot, (hovered || focused || pressed) && styles$l.indicatorDotFocused]
     }, i === this.props.currentGroup && /*#__PURE__*/React.createElement(View, {
-      style: styles$m.indicatorDotActive
+      style: styles$l.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
     }, this.context.strings.current)))))));
@@ -25739,7 +25739,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$m.container)
+        className: css(styles$l.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25762,13 +25762,13 @@ class GradedGroupSet extends React.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.container)
+      className: css(styles$l.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.top)
+      className: css(styles$l.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.title)
+      className: css(styles$l.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.spacer)
+      className: css(styles$l.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25810,7 +25810,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$m = StyleSheet.create({
+const styles$l = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25915,7 +25915,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$l.buttonStyle, button.value === value && styles$l.selectedStyle),
+        className: css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25932,7 +25932,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$l = StyleSheet.create({
+const styles$k = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -26536,7 +26536,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$2 = Graphie.MovableLine;
 function isFlipped(newCoord, oldCoord, line) {
@@ -26618,7 +26618,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,
@@ -26633,7 +26633,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,
@@ -27442,7 +27442,7 @@ const Label = Graphie.Label;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
 const Line$2 = 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$1 = Graphie.MovableLine;
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
@@ -27691,7 +27691,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 [
@@ -27713,7 +27713,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.
@@ -27748,7 +27748,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 [
@@ -27789,14 +27789,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: {
@@ -28353,7 +28353,7 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
-  hintMode: false
+  disableKeyboardInteraction: false
 };
 const GraphConfigContext = /*#__PURE__*/createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -28490,6 +28490,28 @@ const segmentsIntersect = ([[a, b], [c, d]], [[p, q], [r, s]]) => {
   }
 };
 
+// Finds the unique intersection point between two rays. Returns undefined if
+// there is not exactly one intersection point. The first point in each of the
+// given ray "segments" should be the initial point of the ray. The second point
+// can be any arbitrary point on the ray different from the initial point.
+function findIntersectionOfRays([[a, b], [c, d]], [[p, q], [r, s]]) {
+  // See https://stackoverflow.com/a/24392281/7347484 for an explanation of
+  // the determinant and lambda values.
+  const determinant = (c - a) * (s - q) - (r - p) * (d - b);
+  if (determinant === 0) {
+    return undefined;
+  } else {
+    const lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / determinant;
+    const gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / determinant;
+    if (lambda <= 0 || gamma >= 1) {
+      return undefined;
+    }
+    const initialPoint = [a, b];
+    const direction = vec.sub([c, d], initialPoint);
+    return vec.add(initialPoint, vec.scale(direction, lambda));
+  }
+}
+
 // This file contains helper functions for working with angles.
 
 function convertDegreesToRadians(degrees) {
@@ -28501,6 +28523,8 @@ function convertDegreesToRadians(degrees) {
 function calculateAngleInDegrees([x, y]) {
   return Math.atan2(y, x) * 180 / Math.PI;
 }
+
+// Converts polar coordinates to cartesian. The th(eta) parameter is in degrees.
 function polar(r, th) {
   if (typeof r === "number") {
     r = [r, r];
@@ -29106,7 +29130,7 @@ const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$k.icon)
+  className: css(styles$j.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.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"
@@ -29137,7 +29161,7 @@ const HiddenIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$k.icon)
+  className: css(styles$j.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.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"
@@ -29171,20 +29195,20 @@ const HUD = ({
   let state;
   let icon;
   if (enabled) {
-    state = styles$k.enabled;
+    state = styles$j.enabled;
     icon = /*#__PURE__*/React.createElement(VisibleIcon, null);
   } else {
-    state = styles$k.disabled;
+    state = styles$j.disabled;
     icon = /*#__PURE__*/React.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React.createElement("button", {
-    className: css(styles$k.hud, _fixedPosition && styles$k.hudFixedPosition, state),
+    className: css(styles$j.hud, _fixedPosition && styles$j.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$k = StyleSheet.create({
+const styles$j = StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -29234,19 +29258,19 @@ const styles$k = StyleSheet.create({
   }
 });
 
-const InfoTip$1 = props => {
+const InfoTipBase = props => {
   return /*#__PURE__*/React.createElement(Tooltip$1, {
     content: /*#__PURE__*/React.createElement(Body, {
-      style: styles$j.body
+      style: styles$i.body
     }, props.children),
     placement: "right"
   }, /*#__PURE__*/React.createElement(PhosphorIcon, {
     size: "small",
     icon: questionIcon,
-    style: styles$j.spacingLeft
+    style: styles$i.spacingLeft
   }));
 };
-const styles$j = StyleSheet.create({
+const styles$i = StyleSheet.create({
   spacingLeft: {
     marginInlineStart: spacing.xxxSmall_4
   },
@@ -29278,7 +29302,7 @@ class InfoTip extends React.Component {
 
   render() {
     if (this.state.didMount) {
-      return /*#__PURE__*/React.createElement(InfoTip$1, this.props);
+      return /*#__PURE__*/React.createElement(InfoTipBase, this.props);
     }
     return /*#__PURE__*/React.createElement("div", null);
   }
@@ -29325,7 +29349,7 @@ class MultiButtonGroup extends React.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: css(styles$i.buttonStyle, selected && styles$i.selectedStyle),
+        className: css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -29341,7 +29365,7 @@ MultiButtonGroup.defaultProps = {
   values: [],
   allowEmpty: true
 };
-const styles$i = StyleSheet.create({
+const styles$h = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -29566,62 +29590,6 @@ NumberInput.defaultProps = {
   useArrowKeys: false
 };
 
-/* eslint-disable @babel/no-invalid-this */
-
-/* A checkbox that syncs its value to props using the
- * renderer's onChange method, and gets the prop name
- * dynamically from its props list
- */
-const PropCheckBox = createReactClass({
-  displayName: "PropCheckBox",
-  propTypes: {
-    labelAlignment: PropTypes.oneOf(["left", "right"])
-  },
-  DEFAULT_PROPS: {
-    label: null,
-    onChange: null,
-    labelAlignment: "left"
-  },
-  getDefaultProps: function () {
-    return this.DEFAULT_PROPS;
-  },
-  propName: function () {
-    const propName = _.find(_.keys(this.props), function (localPropName) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return !_.has(this.DEFAULT_PROPS, localPropName);
-    }, this);
-    if (!propName) {
-      throw new PerseusError("Attempted to create a PropCheckBox with no prop!", Errors.InvalidInput);
-    }
-    return propName;
-  },
-  _labelAlignLeft: function () {
-    return this.props.labelAlignment === "left";
-  },
-  render: function () {
-    const propName = this.propName();
-    return /*#__PURE__*/React.createElement("label", {
-      className: css(styles$h.labeledCheckbox)
-    }, this._labelAlignLeft() && /*#__PURE__*/React.createElement(LabelSmall, null, this.props.label), /*#__PURE__*/React.createElement(Checkbox, {
-      checked: this.props[propName],
-      onChange: this.toggle
-    }), !this._labelAlignLeft() && /*#__PURE__*/React.createElement(LabelSmall, null, this.props.label));
-  },
-  toggle: function () {
-    const propName = this.propName();
-    const changes = {};
-    changes[propName] = !this.props[propName];
-    this.props.onChange(changes);
-  }
-});
-const styles$h = StyleSheet.create({
-  labeledCheckbox: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
 const truth = () => true;
 
 /* A minor abstraction on top of NumberInput for ranges
@@ -29683,7 +29651,6 @@ var components = /*#__PURE__*/Object.freeze({
   MathInput: MathInput,
   MultiButtonGroup: MultiButtonGroup,
   NumberInput: NumberInput,
-  PropCheckBox: PropCheckBox,
   RangeInput: RangeInput,
   SvgImage: SvgImage,
   TextInput: TextInput,
@@ -29837,8 +29804,9 @@ const lockedFigureColors = {
 };
 const lockedFigureFillStyles = {
   none: 0,
-  solid: 1,
-  translucent: 0.4
+  white: 1,
+  translucent: 0.4,
+  solid: 1
 };
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
@@ -29847,7 +29815,7 @@ const LockedEllipse = props => {
     center,
     radius,
     angle,
-    color,
+    color: color$1,
     fillStyle,
     strokeStyle
   } = props;
@@ -29857,11 +29825,21 @@ const LockedEllipse = props => {
     angle: angle,
     fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
-    color: lockedFigureColors[color]
+    color: lockedFigureColors[color$1]
+    // We need to override the svg props if we want to have a
+    // different fill color than the stroke color (specifically,
+    // in the case where the fillStyle is "white").
+    ,
+    svgEllipseProps: {
+      style: {
+        fill: fillStyle === "white" ? color.white : lockedFigureColors[color$1]
+      }
+    }
   });
 };
 
 const LockedFunction = props => {
+  const [equation, setEquation] = useState();
   const {
     color,
     strokeStyle,
@@ -29873,7 +29851,14 @@ const LockedFunction = props => {
     style: strokeStyle,
     domain
   };
-  const equation = props.equationParsed || KAS.parse(props.equation).expr;
+  useEffect(() => {
+    // Parsing the equation in a "useEffect" hook saves about 2ms each frame
+    //    when the learner is interacting with the graph (i.e. moving points).
+    setEquation(KAS.parse(props.equation).expr);
+  }, [props.equation]);
+  if (typeof equation === "undefined") {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("g", {
     className: "locked-function"
   }, directionalAxis === "x" && /*#__PURE__*/React.createElement(Plot$3.OfX, _extends({
@@ -30064,7 +30049,7 @@ const LockedPoint = props => {
 const LockedPolygon = props => {
   const {
     points,
-    color,
+    color: color$1,
     showVertices,
     fillStyle,
     strokeStyle
@@ -30075,12 +30060,21 @@ const LockedPolygon = props => {
     points: [...points],
     fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
-    color: lockedFigureColors[color]
+    color: lockedFigureColors[color$1]
+    // We need to override the svg props if we want to have a
+    // different fill color than the stroke color (specifically,
+    // in the case where the fillStyle is "white").
+    ,
+    svgPolygonProps: {
+      style: {
+        fill: fillStyle === "white" ? color.white : lockedFigureColors[color$1]
+      }
+    }
   }), showVertices && points.map((point, index) => /*#__PURE__*/React.createElement(Point$2, {
     key: `locked-polygon-point-${index}`,
     x: point[X],
     y: point[Y],
-    color: lockedFigureColors[color]
+    color: lockedFigureColors[color$1]
   })));
 };
 
@@ -30321,7 +30315,7 @@ function useDraggable(args) {
     gestureTarget: target,
     onMove,
     point,
-    constrain
+    constrainKeyboardMovement
   } = args;
   const [dragging, setDragging] = React.useState(false);
   const {
@@ -30344,6 +30338,7 @@ function useDraggable(args) {
     event == null || event.stopPropagation();
     const isKeyboard = type.includes("key");
     if (isKeyboard) {
+      invariant(event instanceof KeyboardEvent);
       event == null || event.preventDefault();
 
       // When a key is held down, we see multiple "keydown" events,
@@ -30355,6 +30350,11 @@ function useDraggable(args) {
       if (type === "keyup") {
         return;
       }
+      if (typeof constrainKeyboardMovement === "object") {
+        const destination = constrainKeyboardMovement[directionForKey[event.key]];
+        onMove(destination != null ? destination : point);
+        return;
+      }
       const {
         direction: yDownDirection,
         altKey,
@@ -30375,7 +30375,7 @@ function useDraggable(args) {
       for (const dx of tests) {
         // Transform the test back into the point's coordinate system
         const testMovement = vec.scale(direction, dx);
-        const testPoint = constrain(vec.transform(vec.add(vec.transform(point, userTransform), testMovement), inverseTransform));
+        const testPoint = constrainKeyboardMovement(vec.transform(vec.add(vec.transform(point, userTransform), testMovement), inverseTransform));
         if (vec.dist(testPoint, point) > min) {
           onMove(testPoint);
           break;
@@ -30395,7 +30395,7 @@ function useDraggable(args) {
         return;
       }
       const movement = vec.transform(pixelMovement, inverseViewTransform);
-      onMove(constrain(vec.transform(vec.add(pickup.current, movement), inverseTransform)));
+      onMove(vec.transform(vec.add(pickup.current, movement), inverseTransform));
     }
   }, {
     target,
@@ -30407,6 +30407,12 @@ function useDraggable(args) {
     dragging
   };
 }
+const directionForKey = {
+  ArrowLeft: "left",
+  ArrowRight: "right",
+  ArrowUp: "up",
+  ArrowDown: "down"
+};
 function getInverseTransform(transform) {
   const invert = vec.matrixInvert(transform);
   invariant(invert !== null, "Could not invert transform matrix. A parent transformation matrix might be degenerative (mapping 2D space to a line).");
@@ -30456,7 +30462,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     range,
     markings,
     showTooltips,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   const {
     point,
@@ -30498,7 +30504,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
       cursor
     },
     "data-testid": "movable-point",
-    tabIndex: hintMode ? -1 : tabIndex(focusBehavior)
+    tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior)
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -30587,7 +30593,7 @@ const MovableLine = props => {
 function useControlPoint(point, color, onMovePoint) {
   const {
     snapStep,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   const [focused, setFocused] = useState(false);
   const keyboardHandleRef = useRef(null);
@@ -30595,7 +30601,7 @@ function useControlPoint(point, color, onMovePoint) {
     gestureTarget: keyboardHandleRef,
     point,
     onMove: onMovePoint,
-    constrain: p => snap(snapStep, p)
+    constrainKeyboardMovement: p => snap(snapStep, p)
   });
   const visiblePointRef = useRef(null);
   const {
@@ -30604,12 +30610,12 @@ function useControlPoint(point, color, onMovePoint) {
     gestureTarget: visiblePointRef,
     point,
     onMove: onMovePoint,
-    constrain: p => snap(snapStep, p)
+    constrainKeyboardMovement: p => snap(snapStep, p)
   });
   const focusableHandle = /*#__PURE__*/React.createElement("g", {
     "data-testid": "movable-point__focusable-handle",
     className: "movable-point__focusable-handle",
-    tabIndex: hintMode ? -1 : 0,
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
     ref: keyboardHandleRef,
     onFocus: () => setFocused(true),
     onBlur: () => setFocused(false)
@@ -30643,7 +30649,7 @@ const Line$1 = props => {
     range,
     graphDimensionsInPixels,
     snapStep,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
@@ -30661,11 +30667,11 @@ const Line$1 = props => {
     onMove: newPoint => {
       onMove(vec.sub(newPoint, start));
     },
-    constrain: p => snap(snapStep, p)
+    constrainKeyboardMovement: p => snap(snapStep, p)
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: line,
-    tabIndex: hintMode ? -1 : 0,
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
     className: "movable-line",
     "data-testid": "movable-line",
     style: {
@@ -31128,7 +31134,7 @@ function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, a
   return scaledBisector;
 }
 
-const StyledMovablePoint = props => {
+const MovablePoint$1 = props => {
   const {
     snapStep
   } = useGraphConfig();
@@ -31138,16 +31144,15 @@ const StyledMovablePoint = props => {
     onMove,
     cursor,
     color: color$1 = color.blue,
-    snapTo
+    constrain = p => snap(snapStep, p)
   } = props;
-  const snapToValue = snapTo != null ? snapTo : "grid";
   const {
     dragging
   } = useDraggable({
     gestureTarget: elementRef,
     point,
     onMove,
-    constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
+    constrainKeyboardMovement: constrain
   });
   return /*#__PURE__*/React.createElement(MovablePointView, {
     ref: elementRef,
@@ -31163,8 +31168,10 @@ const StyledMovablePoint = props => {
 };
 
 const PolygonGraph = props => {
-  const [focused, setFocused] = React.useState(false);
   const [hovered, setHovered] = React.useState(false);
+  // This is more so required for the re-rendering that occurs when state
+  // updates; specifically with regard to line weighting and polygon focus.
+  const [focusVisible, setFocusVisible] = React.useState(false);
   const {
     dispatch
   } = props;
@@ -31174,10 +31181,10 @@ const PolygonGraph = props => {
     showSides,
     range,
     snapStep,
-    snapTo
+    snapTo = "grid"
   } = props.graphState;
   const {
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
 
   // TODO(benchristel): can the default set of points be removed here? I don't
@@ -31185,7 +31192,7 @@ const PolygonGraph = props => {
   const points = coords != null ? coords : [[0, 0]];
   const ref = React.useRef(null);
   const dragReferencePoint = points[0];
-  const snapToValue = snapTo != null ? snapTo : "grid";
+  const constrain = ["angles", "sides"].includes(snapTo) ? p => p : p => snap(snapStep, p);
   const {
     dragging
   } = useDraggable({
@@ -31195,16 +31202,15 @@ const PolygonGraph = props => {
       const delta = vec.sub(newPoint, dragReferencePoint);
       dispatch(actions.polygon.moveAll(delta));
     },
-    constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
+    constrainKeyboardMovement: constrain
   });
-  const active = hovered || focused || dragging;
   const lastMoveTime = React.useRef(0);
   const lines = getLines(points);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolygonProps: {
-      strokeWidth: active ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)",
+      strokeWidth: focusVisible ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)",
       style: {
         fill: "transparent"
       }
@@ -31219,11 +31225,10 @@ const PolygonGraph = props => {
       key: "angle-" + i,
       centerPoint: point,
       endPoints: [pt1, pt2],
-      active: active,
       range: range,
       polygonLines: lines,
       showAngles: !!showAngles,
-      snapTo: snapToValue
+      snapTo: snapTo
     });
   }), showSides && lines.map(([start, end], i) => {
     const [x, y] = vec.midpoint(start, end);
@@ -31238,21 +31243,29 @@ const PolygonGraph = props => {
     color: "transparent",
     svgPolygonProps: {
       ref,
-      tabIndex: hintMode ? -1 : 0,
+      tabIndex: disableKeyboardInteraction ? -1 : 0,
       strokeWidth: TARGET_SIZE,
       style: {
         cursor: dragging ? "grabbing" : "grab",
         fill: hovered ? "var(--mafs-blue)" : "transparent"
       },
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
+      // Required to remove line weighting when user clicks away
+      // from the focused polygon
+      onKeyDownCapture: () => {
+        setFocusVisible(hasFocusVisible(ref.current));
+      },
+      // Required for lines to darken on focus
+      onFocus: () => setFocusVisible(hasFocusVisible(ref.current)),
+      // 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(ref.current)),
       className: "movable-polygon"
     }
-  }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+  }), points.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: "point-" + i,
-    snapTo: snapTo,
+    constrain: constrain,
     point: point,
     onMove: destination => {
       const now = Date.now();
@@ -31271,6 +31284,20 @@ function getLines(points) {
     return [point, next];
   });
 }
+const hasFocusVisible = element => {
+  const matches = selector => {
+    var _element$matches;
+    return (_element$matches = element == null ? void 0 : element.matches(selector)) != null ? _element$matches : false;
+  };
+  try {
+    return matches(":focus-visible");
+  } catch (e) {
+    // jsdom doesn't support :focus-visible
+    // (see https://github.com/jsdom/jsdom/issues/3426),
+    // so the call to matches(":focus-visible") will fail in tests.
+    return matches(":focus");
+  }
+};
 
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
@@ -31364,7 +31391,7 @@ function CircleGraph(props) {
     center: center,
     radius: getRadius(graphState),
     onMove: c => dispatch(actions.circle.moveCenter(c))
-  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: radiusPoint,
     cursor: "ew-resize",
     onMove: newRadiusPoint => {
@@ -31380,7 +31407,7 @@ function MovableCircle(props) {
   } = props;
   const {
     snapStep,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   const draggableRef = useRef(null);
   const {
@@ -31389,13 +31416,13 @@ function MovableCircle(props) {
     gestureTarget: draggableRef,
     point: center,
     onMove,
-    constrain: p => snap(snapStep, p)
+    constrainKeyboardMovement: p => snap(snapStep, p)
   });
   const [centerPx] = useTransformVectorsToPixels(center);
   const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
   return /*#__PURE__*/React.createElement("g", {
     ref: draggableRef,
-    tabIndex: hintMode ? -1 : 0,
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
     className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
   }, /*#__PURE__*/React.createElement("ellipse", {
     className: "focus-ring",
@@ -31476,7 +31503,7 @@ function QuadraticGraph(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Plot$3.OfX, {
     y: y,
     color: color.blue
-  }), coords.map((coord, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+  }), coords.map((coord, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: "point-" + i,
     point: coord,
     onMove: destination => dispatch(actions.quadratic.movePoint(i, destination))
@@ -31536,7 +31563,7 @@ function SinusoidGraph(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Plot$3.OfX, {
     y: x => computeSine(x, coeffRef.current),
     color: color.blue
-  }), coords.map((coord, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+  }), coords.map((coord, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: "point-" + i,
     point: coord,
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
@@ -31592,7 +31619,6 @@ function AngleGraph(props) {
     showAngles,
     range,
     allowReflexAngles,
-    angleOffsetDeg,
     snapDegrees
   } = graphState;
 
@@ -31630,8 +31656,6 @@ function AngleGraph(props) {
     coords: endPoints,
     allowReflexAngles: allowReflexAngles || false,
     // Whether to allow reflex angles or not
-    angleOffsetDeg: angleOffsetDeg || 0,
-    // The angle offset from the x-axis
     snapDegrees: snapDegrees || 1,
     // The multiple of degrees to snap to
     range: range,
@@ -31639,19 +31663,66 @@ function AngleGraph(props) {
   };
 
   // Render the lines, angle, and then movable points
-  return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), coords.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
-    key: "point-" + i,
-    snapTo: "angles",
-    point: point,
-    onMove: destination => dispatch(actions.angle.movePoint(i, destination))
-  })));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[1],
+    constrain: p => p,
+    onMove: destination => dispatch(actions.angle.movePoint(1, destination))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[0],
+    constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
+    onMove: destination => dispatch(actions.angle.movePoint(0, destination))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[2],
+    constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
+    onMove: destination => dispatch(actions.angle.movePoint(2, destination))
+  }));
+}
+const positiveX = [1, 0];
+const negativeX = [-1, 0];
+const positiveY = [0, 1];
+const negativeY = [0, -1];
+function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
+  var _findIntersectionOfRa, _findIntersectionOfRa2, _findIntersectionOfRa3, _findIntersectionOfRa4;
+  const currentAngle = calculateAngleInDegrees(vec.sub(sidePoint, vertex));
+
+  // Find the rays that start at the current point and point up, down, left
+  // and right.
+  const leftRay = [sidePoint, vec.add(sidePoint, negativeX)];
+  const rightRay = [sidePoint, vec.add(sidePoint, positiveX)];
+  const upRay = [sidePoint, vec.add(sidePoint, positiveY)];
+  const downRay = [sidePoint, vec.add(sidePoint, negativeY)];
+
+  // find the angles that lie one snap step clockwise and counter-clockwise
+  // from the current angle. These are the angles to which the side can be
+  // moved.
+  const oneStepCounterClockwise = currentAngle + snapDegrees;
+  const oneStepClockwise = currentAngle - snapDegrees;
+
+  // find the rays that start from the vertex and point in the direction of
+  // the angles we just computed.
+  const counterClockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepCounterClockwise))];
+  const clockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepClockwise))];
+
+  // find the intersections of those rays with the horizontal and vertical
+  // rays extending from the sidePoint. These intersections are the points to
+  // which sidePoint can move that will result in a rotation of `snapDegrees`.
+  const left = (_findIntersectionOfRa = findIntersectionOfRays(leftRay, counterClockwiseRay)) != null ? _findIntersectionOfRa : findIntersectionOfRays(leftRay, clockwiseRay);
+  const right = (_findIntersectionOfRa2 = findIntersectionOfRays(rightRay, counterClockwiseRay)) != null ? _findIntersectionOfRa2 : findIntersectionOfRays(rightRay, clockwiseRay);
+  const up = (_findIntersectionOfRa3 = findIntersectionOfRays(upRay, counterClockwiseRay)) != null ? _findIntersectionOfRa3 : findIntersectionOfRays(upRay, clockwiseRay);
+  const down = (_findIntersectionOfRa4 = findIntersectionOfRays(downRay, counterClockwiseRay)) != null ? _findIntersectionOfRa4 : findIntersectionOfRays(downRay, clockwiseRay);
+  return {
+    up: up != null ? up : sidePoint,
+    down: down != null ? down : sidePoint,
+    left: left != null ? left : sidePoint,
+    right: right != null ? right : sidePoint
+  };
 }
 
 function PointGraph(props) {
   const {
     dispatch
   } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
@@ -31683,7 +31754,7 @@ function Protractor() {
     gestureTarget: draggableRef,
     onMove: setCenter,
     point: center,
-    constrain: point => bound$1({
+    constrainKeyboardMovement: point => bound$1({
       snapStep,
       range,
       point
@@ -31799,7 +31870,8 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    hintMode
+    hintMode,
+    readOnly
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
@@ -31815,7 +31887,7 @@ const MafsGraph = props => {
       width,
       height,
       labels,
-      hintMode
+      disableKeyboardInteraction: hintMode || readOnly
     }
   }, /*#__PURE__*/React.createElement(View, {
     className: "mafs-graph",
@@ -32173,6 +32245,9 @@ const getAngleCoords = params => {
   if (graph.coords) {
     return graph.coords;
   }
+  if (graph.startCoords) {
+    return graph.startCoords;
+  }
   const {
     snapDegrees,
     angleOffsetDeg
@@ -32202,6 +32277,7 @@ const getAngleCoords = params => {
   return coords;
 };
 
+const minDistanceBetweenAngleVertexAndSidePoint = 2;
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
     case REINITIALIZE:
@@ -32367,21 +32443,28 @@ function doMovePoint(state, action) {
     case "angle":
       // If the index is 1, we are moving the vertex of the angle,
       // which will move the other two points as well
-      if (action.index === 1) {
-        const updatedCoords = boundAndSnapAngleVertex(state, action);
+      const newState = (() => {
+        if (action.index === 1) {
+          const updatedCoords = boundAndSnapAngleVertex(state, action);
+          return _extends({}, state, {
+            hasBeenInteractedWith: true,
+            coords: updatedCoords
+          });
+        }
         return _extends({}, state, {
           hasBeenInteractedWith: true,
-          coords: updatedCoords
+          coords: setAtIndex({
+            array: state.coords,
+            index: action.index,
+            newValue: boundAndSnapAngleEndPoints(action.destination, state, action.index)
+          })
         });
+      })();
+      if (angleSidePointsTooCloseToVertex(newState)) {
+        // cancel the move
+        return state;
       }
-      return _extends({}, state, {
-        hasBeenInteractedWith: true,
-        coords: setAtIndex({
-          array: state.coords,
-          index: action.index,
-          newValue: boundAndSnapAngleEndPoints(action.destination, state, action.index)
-        })
-      });
+      return newState;
     case "polygon":
       let newValue;
       if (state.snapTo === "sides") {
@@ -32470,11 +32553,7 @@ function doMoveCenter(state, action) {
     case "circle":
       {
         // Constrain the center of the circle to the chart range
-        const constrainedCenter = bound$1({
-          snapStep: state.snapStep,
-          range: state.range,
-          point: action.destination
-        });
+        const constrainedCenter = boundAndSnapToGrid(action.destination, state);
 
         // Reposition the radius point based on the new center
         // (spread to make sure we're not going to  mutate anything)
@@ -32508,10 +32587,10 @@ function doMoveRadiusPoint(state, action) {
     case "circle":
       {
         const [xMin, xMax] = state.range[X];
-        const nextRadiusPoint = [
+        const nextRadiusPoint = snap(state.snapStep, [
         // Constrain to graph range
         // The +0 is to convert -0 to +0
-        clamp(action.destination[X] + 0, xMin, xMax), state.center[1]];
+        clamp(action.destination[X] + 0, xMin, xMax), state.center[1]]);
         if (_.isEqual(nextRadiusPoint, state.center)) {
           return state;
         }
@@ -32593,17 +32672,16 @@ function boundAndSnapAngleVertex({
 
   // Get the current and upcoming positions of the vertex
   const startingVertex = coordsCopy[1];
-  const newVertex = bound$1({
-    snapStep,
-    range,
-    point: snap(snapStep, destination)
-  });
+
+  // Prevent the vertex from getting too close to the edge, so that all
+  // points of the angle can fit within the graph bounds.
+  const insetAmount = vec.add(snapStep, [minDistanceBetweenAngleVertexAndSidePoint, minDistanceBetweenAngleVertexAndSidePoint]);
+  const newVertex = clampToBox(inset(insetAmount, range), snap(snapStep, destination));
 
   // Get the vector from the starting vertex to the new vertex
   const delta = vec.add(newVertex, reverseVector(startingVertex));
 
   // Apply the delta to each of the other two points so that the angle is maintained
-  let valid = true;
   const newPoints = {};
   for (const i of [0, 2]) {
     const oldPoint = coordsCopy[i];
@@ -32612,21 +32690,13 @@ function boundAndSnapAngleVertex({
     angle *= Math.PI / 180;
     newPoint = constrainToBoundsOnAngle(newPoint, angle, range, snapStep);
     newPoints[i] = newPoint;
-
-    // Check if the new point is too close to the vertex
-    if (tooClose(newVertex, newPoint)) {
-      valid = false;
-    }
   }
 
   // Update the vertex after snapping to the snapStep
   newPoints[1] = newVertex;
-  // Only move points if all new positions are valid
-  if (valid) {
-    Object.entries(newPoints).forEach(([i, newPoint]) => {
-      coordsCopy[i] = newPoint;
-    });
-  }
+  Object.entries(newPoints).forEach(([i, newPoint]) => {
+    coordsCopy[i] = newPoint;
+  });
   return coordsCopy;
 }
 
@@ -32691,10 +32761,17 @@ function boundAndSnapAngleEndPoints(destinationPoint, {
 
   // Snap the angle to the nearest multiple of snapDegrees (if provided)
   angle = Math.round((angle - offsetDegrees) / snap) * snap + offsetDegrees;
-  const distance = vec.dist(coordsCopy[index], vertex);
+
+  // add 0.01 to prevent rounding errors from causing the point to snap to
+  // a location that is too close to the vertex.
+  const minDistance = minDistanceBetweenAngleVertexAndSidePoint + 0.01;
+  const distance = Math.max(vec.dist(coordsCopy[index], vertex), minDistance);
   const snappedValue = vec.add(vertex, polar(distance, angle));
   return snappedValue;
 }
+function angleSidePointsTooCloseToVertex(state) {
+  return tooClose(state.coords[0], state.coords[1], state.range) || tooClose(state.coords[2], state.coords[1], state.range);
+}
 function boundAndSnapToPolygonAngle(destinationPoint, {
   range,
   coords
@@ -32917,7 +32994,12 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+
+  // Update the graph whenever any of the following values changes.
+  // This is necessary to keep the graph previews in sync with the updated
+  // graph settings within the interative graph editor.
   const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const numPoints = graph.type === "point" ? graph.numPoints : null;
   const numSides = graph.type === "polygon" ? graph.numSides : null;
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
   const showAngles = graph.type === "polygon" ? graph.showAngles : null;
@@ -32932,7 +33014,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, graph.startCoords]);
+  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, graph.startCoords]);
   return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -34242,6 +34324,7 @@ class InteractiveGraph extends React.Component {
     // Mafs shim
     const mafsFlags = (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null ? void 0 : _this$props$apiOption["mafs"];
     if (shouldUseMafs(mafsFlags, this.props.graph)) {
+      var _this$props$apiOption2;
       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);
@@ -34251,7 +34334,8 @@ class InteractiveGraph extends React.Component {
         snapStep: snapStep,
         box: box,
         showTooltips: !!this.props.showTooltips,
-        hintMode: this.props.hintMode
+        hintMode: this.props.hintMode,
+        readOnly: (_this$props$apiOption2 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption2.readOnly
       }));
     }
     return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
@@ -44170,7 +44254,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 = "27.2.0";
+const libVersion = "28.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44725,7 +44809,6 @@ const context = /*#__PURE__*/React.createContext(defaultContext);
 const {
   mapObject
 } = objective_;
-/* eslint-disable-next-line react/no-unsafe */
 class ServerItemRenderer extends React.Component {
   constructor(props) {
     super(props);
@@ -46091,7 +46174,16 @@ class MultiRenderer extends React.Component {
       // _annotateRendererArray() needs this
       ref: null,
       makeRenderer: () => /*#__PURE__*/React.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        findExternalWidgets: findExternalWidgets,
+        findExternalWidgets: findExternalWidgets
+        // Note(Jeremy): The MultiRenderer codebase types are
+        // slightly different from the rest of the codebase.
+        // Ideally `HintNode` would spread the `Hint` type into it,
+        // but there is a difference in optionality of `widgets`
+        // and `images` and that causes a huge cascade of type
+        // errors (they are truly optional, but most of our code
+        // assumes they're provided/set). Ignoring this for now.
+        // @ts-expect-error - TS2769 - Type 'HintNode' is not assignable to type 'Hint'.
+        ,
         hints: [hint]
       }))
     };
@@ -47750,5 +47842,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map