@khanacademy/perseus 27.2.0 → 28.1.0

package/dist/index.js

@@ -18,6 +18,7 @@ var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksPopover = require('@khanacademy/wonder-blocks-popover');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var $ = require('jquery');
+var uuid = require('uuid');
 var PropTypes = require('prop-types');
 var kmath = require('@khanacademy/kmath');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
@@ -35,11 +36,11 @@ var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
-var createReactClass = require('create-react-class');
 var react = require('@use-gesture/react');
 var Switch = require('@khanacademy/wonder-blocks-switch');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 var reactPopper = require('react-popper');
+var createReactClass = require('create-react-class');
 var Link = require('@khanacademy/wonder-blocks-link');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -81,9 +82,9 @@ var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
 var caretUp__default = /*#__PURE__*/_interopDefaultLegacy(caretUp);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
 var questionIcon__default = /*#__PURE__*/_interopDefaultLegacy(questionIcon);
-var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
+var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
 function _extends() {
@@ -354,7 +355,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"
 };
 
 /**
@@ -386,6 +389,26 @@ function PerseusI18nContextProvider(_ref) {
 }
 const usePerseusI18n = () => React.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 = aphrodite.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 function () {
@@ -588,11 +611,12 @@ class InnerMathInput extends React__namespace.Component {
       "mq-editable-field": true,
       "mq-math-mode": true
     });
+    const popoverContentUniqueId = uuid.v4().slice(0, 8);
     if (this.props.className) {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -620,16 +644,21 @@ class InnerMathInput extends React__namespace.Component {
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
       dismissEnabled: true,
-      content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
+      "aria-label": this.context.strings.mathInputTitle,
+      "aria-describedby": `popover-content-${popoverContentUniqueId}`,
+      content: () => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingMedium, {
+        id: `popover-content-${popoverContentUniqueId}`,
+        style: a11y.srOnly
+      }, this.context.strings.mathInputDescription), /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$E.popoverContent
+        style: styles$D.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
         onClickKey: this.handleKeypadPress,
         cursorContext: this.state.cursorContext,
         convertDotToTimes: this.props.convertDotToTimes
-      }, this.props.keypadButtonSets ?? mapButtonSets(this.props?.buttonSets))))
+      }, this.props.keypadButtonSets ?? mapButtonSets(this.props?.buttonSets)))))
     }, this.props.buttonsVisible === "never" ? /*#__PURE__*/React__namespace.createElement(MathInputIcon, {
       hovered: false,
       focused: false,
@@ -687,9 +716,9 @@ const MathInputIcon = _ref => {
       fillColor = wonderBlocksTokens.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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$E.iconContainer, dynamicClass]
+    style: [styles$D.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -734,7 +763,7 @@ const inputFocused = {
   borderColor: wonderBlocksTokens.color.blue,
   margin: -1
 };
-const styles$E = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -743,9 +772,11 @@ const styles$E = aphrodite.StyleSheet.create({
     borderRadius: 1
   },
   iconInactive: {
+    border: "2px solid transparent",
     backgroundColor: wonderBlocksTokens.color.offBlack8
   },
   iconActive: {
+    border: `2px solid ${wonderBlocksTokens.color.white}`,
     backgroundColor: wonderBlocksTokens.color.offBlack64
   },
   outerWrapper: {
@@ -1263,26 +1294,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 = aphrodite.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) {
@@ -2587,7 +2598,7 @@ class Expression extends React__namespace.Component {
   render() {
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        className: aphrodite.css(styles$D.mobileLabelInputWrapper)
+        className: aphrodite.css(styles$C.mobileLabelInputWrapper)
       }, !!this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
         htmlFor: this._textareaId,
         tag: "label"
@@ -2621,7 +2632,7 @@ class Expression extends React__namespace.Component {
       ERROR_TITLE
     } = this.context.strings;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      className: aphrodite.css(styles$D.desktopLabelInputWrapper)
+      className: aphrodite.css(styles$C.desktopLabelInputWrapper)
     }, !!this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       htmlFor: this._textareaId,
       tag: "label"
@@ -2662,7 +2673,7 @@ class Expression extends React__namespace.Component {
     }))));
   }
 }
-const styles$D = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   mobileLabelInputWrapper: {
     padding: "15px 4px 0"
   },
@@ -9039,8 +9050,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.
   //
@@ -15435,7 +15446,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 {
   graphie;
   movable;
   state;
@@ -15743,9 +15754,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) {
@@ -16568,10 +16579,10 @@ ___default["default"].extend(MovablePolygon.prototype, {
 });
 
 const Interactive2 = {
-  MovablePoint: MovablePoint$4,
+  MovablePoint: MovablePoint$5,
   addMovablePoint: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovablePoint$4(graphie, movable, options);
+    return new MovablePoint$5(graphie, movable, options);
   },
   MovableLine: MovableLine$4,
   addMovableLine: function (graphie, options) {
@@ -16613,7 +16624,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$3 = GraphieClasses.createClass({
+const MovablePoint$4 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16671,7 +16682,7 @@ const MovablePoint$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-___default["default"].extend(MovablePoint$3, Interactive2.MovablePoint);
+___default["default"].extend(MovablePoint$4, Interactive2.MovablePoint);
 const MovableLine$3 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
@@ -16841,7 +16852,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,
@@ -17199,17 +17210,15 @@ class ImageLoader extends React__namespace.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) {
@@ -17220,12 +17229,8 @@ class ImageLoader extends React__namespace.Component {
     }
     const staticUrl = getDependencies().staticUrl;
     return /*#__PURE__*/React__namespace.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));
   };
@@ -17716,18 +17721,14 @@ class SvgImage extends React__namespace.Component {
           allowFullBleed: this.props.allowFullBleed && isImageProbablyPhotograph(imageSrc)
         }, /*#__PURE__*/React__namespace.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__namespace.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
@@ -17777,9 +17778,7 @@ class SvgImage extends React__namespace.Component {
       }, /*#__PURE__*/React__namespace.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);
@@ -17791,9 +17790,7 @@ class SvgImage extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.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);
@@ -18371,33 +18368,33 @@ class Lint extends React__namespace.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__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$C.indicator, severityStyle)
+      className: aphrodite.css(styles$B.indicator, severityStyle)
     }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
+      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
     }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
       key: i,
-      className: aphrodite.css(styles$C.tooltipParagraph)
+      className: aphrodite.css(styles$B.tooltipParagraph)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(warningTextStyle)
     }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
+      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
     })));
   };
 
@@ -18425,20 +18422,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$C.lintContainer, styles$C.lintContainerBlock)
-      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$C.lintContainer)
-      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$C.lintContainer)
-    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$C = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19132,15 +19129,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, " "));
@@ -20574,7 +20573,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$B.mobileZoomableParentFix
+          ...styles$A.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -20608,6 +20607,9 @@ class Renderer extends React__namespace.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
@@ -20711,7 +20713,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$B.mobileZoomableParentFix
+        ...styles$A.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -21219,7 +21221,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-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
@@ -21265,28 +21267,24 @@ class TextInput extends React__namespace.Component {
       style
     } = this.props;
     const formattedValue = value === null ? "" : value.toString();
-    return (
-      /*#__PURE__*/
-      // $FlowIgnore
-      React__namespace.createElement(wonderBlocksForm.TextField, {
-        style: style,
-        disabled: disabled,
-        id: this.id,
-        value: formattedValue,
-        type: "text",
-        "aria-label": labelText,
-        onChange: value => this.props.onChange(value),
-        placeholder: placeholder,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onKeyDown: onKeyDown
-        // @ts-expect-error - TS2322 - Type '{ style: StyleType; disabled: boolean | undefined; id: string; value: string; type: "text"; "aria-label": string | undefined; onChange: (value: string) => void; placeholder: string | undefined; ... 5 more ...; autoComplete: string; }' is not assignable to type 'IntrinsicAttributes & ExportProps & RefAttributes<HTMLInputElement>'.
-        ,
-        autoCorrect: "off",
-        autoCapitalize: "off",
-        autoComplete: "off"
-      })
-    );
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+      style: style,
+      disabled: disabled,
+      id: this.id,
+      value: formattedValue,
+      type: "text",
+      "aria-label": labelText,
+      onChange: value => this.props.onChange(value),
+      placeholder: placeholder,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown
+      // @ts-expect-error - TS2322 - Type '{ style: StyleType; disabled: boolean | undefined; id: string; value: string; type: "text"; "aria-label": string | undefined; onChange: (value: string) => void; placeholder: string | undefined; ... 5 more ...; autoComplete: string; }' is not assignable to type 'IntrinsicAttributes & ExportProps & RefAttributes<HTMLInputElement>'.
+      ,
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      autoComplete: "off"
+    });
   }
   focus = () => {
     // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
@@ -22019,10 +22017,10 @@ class InputNumber extends React__namespace.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$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__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -22162,7 +22160,7 @@ class InputNumber extends React__namespace.Component {
     return answerString;
   }
 }
-const styles$A = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -23155,7 +23153,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-testid": "focus-ring",
-    className: aphrodite.css(styles$z.ring),
+    className: aphrodite.css(styles$y.ring),
     style: style
   }, children);
 };
@@ -23164,7 +23162,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$z = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -23191,7 +23189,7 @@ function getChoiceLetter(pos, strings) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$y = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -23214,7 +23212,7 @@ const CrossOutLine = function (props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: aphrodite.css(styles$x.crossOutLine),
+    className: aphrodite.css(styles$w.crossOutLine),
     "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -23229,7 +23227,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -23313,7 +23311,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$y.iconWrapper)
+    className: aphrodite.css(styles$x.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: wonderBlocksTokens.color.blue,
     visible: focused || hovered,
@@ -23322,13 +23320,13 @@ const ChoiceIcon = function (props) {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$w.circle, showCorrectness && correct && styles$w.circleCorrect, showCorrectness && !correct && styles$w.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$w.circleIncorrectAnswered)
+    className: aphrodite.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__namespace.createElement("div", {
-    className: aphrodite.css(styles$w.innerWrapper)
+    className: aphrodite.css(styles$v.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -23337,7 +23335,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23432,19 +23430,19 @@ const OptionStatus = function (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__namespace.createElement("div", {
-    className: aphrodite.css(styles$v.text, textStyle)
+    className: aphrodite.css(styles$u.text, textStyle)
   }, renderText(checked, correct, crossedOut, strings));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23513,8 +23511,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$u.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$u.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$t.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$t.rationale));
 
   // 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
@@ -23681,7 +23679,7 @@ const Choice = function (props) {
     "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23880,10 +23878,10 @@ const BaseRadio = function (props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
-  const responsiveClassName = aphrodite.css(styles$t.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$s.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23934,7 +23932,7 @@ const BaseRadio = function (props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.css(sharedStyles.aboveScratchpad, styles$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 aphrodite.css(sharedStyles.aboveScratchpad, styles$s.item, styles$s.responsiveItem, checked && styles$s.selectedItem, checked && choice.highlighted && styles$s.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$s.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$s.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -24008,14 +24006,14 @@ const BaseRadio = function (props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$t.responsiveContainer)
+    className: aphrodite.css(styles$s.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24699,9 +24697,9 @@ class Categorizer extends React__namespace.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React__namespace.createElement("table", {
-      className: "categorizer-table " + aphrodite.css(styles$s.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$r.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$s.emptyHeaderCell)
+      className: aphrodite.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
@@ -24709,7 +24707,7 @@ class Categorizer extends React__namespace.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React__namespace.createElement("th", {
-        className: aphrodite.css(styles$s.header),
+        className: aphrodite.css(styles$r.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -24731,7 +24729,7 @@ class Categorizer extends React__namespace.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React__namespace.createElement("td", {
-          className: "category " + aphrodite.css(styles$s.cell),
+          className: "category " + aphrodite.css(styles$r.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24746,7 +24744,7 @@ class Categorizer extends React__namespace.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24758,7 +24756,7 @@ class Categorizer extends React__namespace.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__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24807,7 +24805,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$s = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -25070,7 +25068,7 @@ class CSProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$r.widthOverride, styleContainer && styles$r.container)
+      className: aphrodite.css(styles$q.widthOverride, styleContainer && styles$q.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -25080,7 +25078,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$r = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -25127,7 +25125,7 @@ class Definition extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
         content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
           color: "white",
-          style: styles$q.tooltipBody,
+          style: styles$p.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -25159,7 +25157,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$q = {
+const styles$p = {
   tooltipBody: {
     color: wonderBlocksTokens.color.offBlack,
     fontSize: 20,
@@ -25386,7 +25384,7 @@ class Explanation extends React__namespace.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__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "explanation-widget"
@@ -25405,7 +25403,7 @@ class Explanation extends React__namespace.Component {
       "aria-hidden": !this.state.expanded,
       testId: "content-container"
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$p.contentWrapper
+      style: styles$o.contentWrapper
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
@@ -25424,7 +25422,7 @@ class Explanation extends React__namespace.Component {
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
 const arrowHeight = 14;
-const styles$p = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   content: {
     borderLeft: "0px solid #ccc",
     display: "inline-grid",
@@ -25490,15 +25488,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       nextQuestion
     } = this.context.strings;
     const answerBarStyle = {
-      ...styles$o.answerBar,
+      ...styles$n.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? wonderBlocksTokens.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__namespace.createElement("span", {
-      style: styles$o.text
+      style: styles$n.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$o.tryAgainIcon
+      style: styles$n.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -25517,7 +25515,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$o.text
+      style: styles$n.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -25539,7 +25537,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$o = {
+const styles$n = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25739,7 +25737,7 @@ class GradedGroup extends React__namespace.Component {
       }));
       gradeStatus = this.context.strings.incorrect;
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$n.gradedGroupInSet) : aphrodite.css(styles$n.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$m.gradedGroupInSet) : aphrodite.css(styles$m.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25758,7 +25756,7 @@ class GradedGroup extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$n.title)
+      className: aphrodite.css(styles$m.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25792,7 +25790,7 @@ class GradedGroup extends React__namespace.Component {
     }, this.context.strings.nextQuestion), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: aphrodite.css(styles$n.explanationTitle),
+      className: aphrodite.css(styles$m.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25825,7 +25823,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$n.showHintLink)
+      className: aphrodite.css(styles$m.showHintLink)
     }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25837,7 +25835,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$2 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25908,20 +25906,20 @@ class Indicators extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames__default["default"](aphrodite.css(styles$m.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$l.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$m.indicator),
+        className: aphrodite.css(styles$l.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         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)
       }, _ref2 => {
@@ -25931,9 +25929,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$m.indicatorDotActive
+          style: styles$l.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, this.context.strings.current)));
@@ -26009,7 +26007,7 @@ class GradedGroupSet extends React__namespace.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$m.container)
+        className: aphrodite.css(styles$l.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -26032,13 +26030,13 @@ class GradedGroupSet extends React__namespace.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.container)
+      className: aphrodite.css(styles$l.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.top)
+      className: aphrodite.css(styles$l.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.title)
+      className: aphrodite.css(styles$l.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.spacer)
+      className: aphrodite.css(styles$l.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -26076,7 +26074,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -26182,7 +26180,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$l.buttonStyle, button.value === value && styles$l.selectedStyle),
+        className: aphrodite.css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -26195,7 +26193,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$l = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -26799,7 +26797,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) {
@@ -26845,7 +26843,7 @@ class FunctionGrapher extends React__namespace.Component {
   })();
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+      return /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -26982,7 +26980,7 @@ class FunctionGrapher extends React__namespace.Component {
       }],
       normalStyle: dashed,
       highlightStyle: dashed
-    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
       key: `asymptoteCoord-${i}`,
       coord: coord,
       static: true,
@@ -27723,7 +27721,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'.
@@ -27977,7 +27975,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27999,7 +27997,7 @@ class Interaction extends React__namespace.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -28034,7 +28032,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -28075,14 +28073,14 @@ class Interaction extends React__namespace.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28639,7 +28637,7 @@ const defaultGraphConfig = {
   width: 0,
   height: 0,
   labels: [],
-  hintMode: false
+  disableKeyboardInteraction: false
 };
 const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -28786,6 +28784,30 @@ const segmentsIntersect = (_ref, _ref2) => {
   }
 };
 
+// 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(_ref3, _ref4) {
+  let [[a, b], [c, d]] = _ref3;
+  let [[p, q], [r, s]] = _ref4;
+  // 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 = mafs.vec.sub([c, d], initialPoint);
+    return mafs.vec.add(initialPoint, mafs.vec.scale(direction, lambda));
+  }
+}
+
 // This file contains helper functions for working with angles.
 
 function convertDegreesToRadians(degrees) {
@@ -28798,6 +28820,8 @@ function calculateAngleInDegrees(_ref) {
   let [x, y] = _ref;
   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];
@@ -29407,7 +29431,7 @@ const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$k.icon)
+  className: aphrodite.css(styles$j.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " + "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " + "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " + "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" + "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " + "0 0 0 0 6z"
@@ -29438,7 +29462,7 @@ const HiddenIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$k.icon)
+  className: aphrodite.css(styles$j.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " + "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " + "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." + "604.401 1.268.401 1.966 0 1.02-.305 " + "1.967-.828 2.757l2.535 2.536a1 1 0 0 " + "1-1.414 1.414l-12-12a1 1 0 0 1 " + "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " + "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " + "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " + "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " + "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " + "2.363-3.085 3.929-4z"
@@ -29473,20 +29497,20 @@ const HUD = _ref => {
   let state;
   let icon;
   if (enabled) {
-    state = styles$k.enabled;
+    state = styles$j.enabled;
     icon = /*#__PURE__*/React__namespace.createElement(VisibleIcon, null);
   } else {
-    state = styles$k.disabled;
+    state = styles$j.disabled;
     icon = /*#__PURE__*/React__namespace.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React__namespace.createElement("button", {
-    className: aphrodite.css(styles$k.hud, fixedPosition && styles$k.hudFixedPosition, state),
+    className: aphrodite.css(styles$j.hud, fixedPosition && styles$j.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -29536,19 +29560,19 @@ const styles$k = aphrodite.StyleSheet.create({
   }
 });
 
-const InfoTip$1 = props => {
+const InfoTipBase = props => {
   return /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
     content: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.Body, {
-      style: styles$j.body
+      style: styles$i.body
     }, props.children),
     placement: "right"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     size: "small",
     icon: questionIcon__default["default"],
-    style: styles$j.spacingLeft
+    style: styles$i.spacingLeft
   }));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   spacingLeft: {
     marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
   },
@@ -29577,7 +29601,7 @@ class InfoTip extends React__namespace.Component {
 
   render() {
     if (this.state.didMount) {
-      return /*#__PURE__*/React__namespace.createElement(InfoTip$1, this.props);
+      return /*#__PURE__*/React__namespace.createElement(InfoTipBase, this.props);
     }
     return /*#__PURE__*/React__namespace.createElement("div", null);
   }
@@ -29624,7 +29648,7 @@ class MultiButtonGroup extends React__namespace.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: aphrodite.css(styles$i.buttonStyle, selected && styles$i.selectedStyle),
+        className: aphrodite.css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -29636,7 +29660,7 @@ class MultiButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$i = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -29868,62 +29892,6 @@ class NumberInput extends React__namespace.Component {
   };
 }
 
-/* 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__default["default"]({
-  displayName: "PropCheckBox",
-  propTypes: {
-    labelAlignment: PropTypes__default["default"].oneOf(["left", "right"])
-  },
-  DEFAULT_PROPS: {
-    label: null,
-    onChange: null,
-    labelAlignment: "left"
-  },
-  getDefaultProps: function () {
-    return this.DEFAULT_PROPS;
-  },
-  propName: function () {
-    const propName = ___default["default"].find(___default["default"].keys(this.props), function (localPropName) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return !___default["default"].has(this.DEFAULT_PROPS, localPropName);
-    }, this);
-    if (!propName) {
-      throw new perseusCore.PerseusError("Attempted to create a PropCheckBox with no prop!", perseusCore.Errors.InvalidInput);
-    }
-    return propName;
-  },
-  _labelAlignLeft: function () {
-    return this.props.labelAlignment === "left";
-  },
-  render: function () {
-    const propName = this.propName();
-    return /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$h.labeledCheckbox)
-    }, this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      checked: this.props[propName],
-      onChange: this.toggle
-    }), !this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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 = aphrodite.StyleSheet.create({
-  labeledCheckbox: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
 const truth = () => true;
 
 /* A minor abstraction on top of NumberInput for ranges
@@ -29982,7 +29950,6 @@ var components = /*#__PURE__*/Object.freeze({
   MathInput: MathInput,
   MultiButtonGroup: MultiButtonGroup,
   NumberInput: NumberInput,
-  PropCheckBox: PropCheckBox,
   RangeInput: RangeInput,
   SvgImage: SvgImage,
   TextInput: TextInput,
@@ -30140,8 +30107,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"];
 
@@ -30161,10 +30129,20 @@ const LockedEllipse = props => {
     fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
+    // 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" ? wonderBlocksTokens.color.white : lockedFigureColors[color]
+      }
+    }
   });
 };
 
 const LockedFunction = props => {
+  const [equation, setEquation] = React.useState();
   const {
     color,
     strokeStyle,
@@ -30176,7 +30154,14 @@ const LockedFunction = props => {
     style: strokeStyle,
     domain
   };
-  const equation = props.equationParsed || KAS__namespace.parse(props.equation).expr;
+  React.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__namespace.parse(props.equation).expr);
+  }, [props.equation]);
+  if (typeof equation === "undefined") {
+    return null;
+  }
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "locked-function"
   }, directionalAxis === "x" && /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, _extends({
@@ -30379,6 +30364,15 @@ const LockedPolygon = props => {
     fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
+    // 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" ? wonderBlocksTokens.color.white : lockedFigureColors[color]
+      }
+    }
   }), showVertices && points.map((point, index) => /*#__PURE__*/React__namespace.createElement(mafs.Point, {
     key: `locked-polygon-point-${index}`,
     x: point[X],
@@ -30625,7 +30619,7 @@ function useDraggable(args) {
     gestureTarget: target,
     onMove,
     point,
-    constrain
+    constrainKeyboardMovement
   } = args;
   const [dragging, setDragging] = React__namespace.useState(false);
   const {
@@ -30648,6 +30642,7 @@ function useDraggable(args) {
     event?.stopPropagation();
     const isKeyboard = type.includes("key");
     if (isKeyboard) {
+      invariant(event instanceof KeyboardEvent);
       event?.preventDefault();
 
       // When a key is held down, we see multiple "keydown" events,
@@ -30659,6 +30654,11 @@ function useDraggable(args) {
       if (type === "keyup") {
         return;
       }
+      if (typeof constrainKeyboardMovement === "object") {
+        const destination = constrainKeyboardMovement[directionForKey[event.key]];
+        onMove(destination ?? point);
+        return;
+      }
       const {
         direction: yDownDirection,
         altKey,
@@ -30679,7 +30679,7 @@ function useDraggable(args) {
       for (const dx of tests) {
         // Transform the test back into the point's coordinate system
         const testMovement = mafs.vec.scale(direction, dx);
-        const testPoint = constrain(mafs.vec.transform(mafs.vec.add(mafs.vec.transform(point, userTransform), testMovement), inverseTransform));
+        const testPoint = constrainKeyboardMovement(mafs.vec.transform(mafs.vec.add(mafs.vec.transform(point, userTransform), testMovement), inverseTransform));
         if (mafs.vec.dist(testPoint, point) > min) {
           onMove(testPoint);
           break;
@@ -30699,7 +30699,7 @@ function useDraggable(args) {
         return;
       }
       const movement = mafs.vec.transform(pixelMovement, inverseViewTransform);
-      onMove(constrain(mafs.vec.transform(mafs.vec.add(pickup.current, movement), inverseTransform)));
+      onMove(mafs.vec.transform(mafs.vec.add(pickup.current, movement), inverseTransform));
     }
   }, {
     target,
@@ -30711,6 +30711,12 @@ function useDraggable(args) {
     dragging
   };
 }
+const directionForKey = {
+  ArrowLeft: "left",
+  ArrowRight: "right",
+  ArrowUp: "up",
+  ArrowDown: "down"
+};
 function getInverseTransform(transform) {
   const invert = mafs.vec.matrixInvert(transform);
   invariant(invert !== null, "Could not invert transform matrix. A parent transformation matrix might be degenerative (mapping 2D space to a line).");
@@ -30760,7 +30766,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     range,
     markings,
     showTooltips,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   const {
     point,
@@ -30805,7 +30811,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
       cursor
     },
     "data-testid": "movable-point",
-    tabIndex: hintMode ? -1 : tabIndex(focusBehavior)
+    tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior)
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -30894,7 +30900,7 @@ const MovableLine = props => {
 function useControlPoint(point, color, onMovePoint) {
   const {
     snapStep,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   const [focused, setFocused] = React.useState(false);
   const keyboardHandleRef = React.useRef(null);
@@ -30902,7 +30908,7 @@ function useControlPoint(point, color, onMovePoint) {
     gestureTarget: keyboardHandleRef,
     point,
     onMove: onMovePoint,
-    constrain: p => snap(snapStep, p)
+    constrainKeyboardMovement: p => snap(snapStep, p)
   });
   const visiblePointRef = React.useRef(null);
   const {
@@ -30911,12 +30917,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__namespace.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)
@@ -30950,7 +30956,7 @@ const Line$1 = props => {
     range,
     graphDimensionsInPixels,
     snapStep,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
@@ -30968,11 +30974,11 @@ const Line$1 = props => {
     onMove: newPoint => {
       onMove(mafs.vec.sub(newPoint, start));
     },
-    constrain: p => snap(snapStep, p)
+    constrainKeyboardMovement: p => snap(snapStep, p)
   });
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
     ref: line,
-    tabIndex: hintMode ? -1 : 0,
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
     className: "movable-line",
     "data-testid": "movable-line",
     style: {
@@ -31443,7 +31449,7 @@ function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, a
   return scaledBisector;
 }
 
-const StyledMovablePoint = props => {
+const MovablePoint$1 = props => {
   const {
     snapStep
   } = useGraphConfig();
@@ -31453,16 +31459,15 @@ const StyledMovablePoint = props => {
     onMove,
     cursor,
     color = wonderBlocksTokens.color.blue,
-    snapTo
+    constrain = p => snap(snapStep, p)
   } = props;
-  const snapToValue = snapTo ?? "grid";
   const {
     dragging
   } = useDraggable({
     gestureTarget: elementRef,
     point,
     onMove,
-    constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
+    constrainKeyboardMovement: constrain
   });
   return /*#__PURE__*/React__namespace.createElement(MovablePointView, {
     ref: elementRef,
@@ -31478,8 +31483,10 @@ const StyledMovablePoint = props => {
 };
 
 const PolygonGraph = props => {
-  const [focused, setFocused] = React__namespace.useState(false);
   const [hovered, setHovered] = React__namespace.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__namespace.useState(false);
   const {
     dispatch
   } = props;
@@ -31489,10 +31496,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
@@ -31500,7 +31507,7 @@ const PolygonGraph = props => {
   const points = coords ?? [[0, 0]];
   const ref = React__namespace.useRef(null);
   const dragReferencePoint = points[0];
-  const snapToValue = snapTo ?? "grid";
+  const constrain = ["angles", "sides"].includes(snapTo) ? p => p : p => snap(snapStep, p);
   const {
     dragging
   } = useDraggable({
@@ -31510,16 +31517,15 @@ const PolygonGraph = props => {
       const delta = mafs.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__namespace.useRef(0);
   const lines = getLines(points);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.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"
       }
@@ -31534,11 +31540,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((_ref, i) => {
     let [start, end] = _ref;
@@ -31554,21 +31559,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__namespace.createElement(StyledMovablePoint, {
+  }), points.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     key: "point-" + i,
-    snapTo: snapTo,
+    constrain: constrain,
     point: point,
     onMove: destination => {
       const now = Date.now();
@@ -31587,6 +31600,17 @@ function getLines(points) {
     return [point, next];
   });
 }
+const hasFocusVisible = element => {
+  const matches = selector => element?.matches(selector) ?? 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) {
@@ -31692,7 +31716,7 @@ function CircleGraph(props) {
     center: center,
     radius: getRadius(graphState),
     onMove: c => dispatch(actions.circle.moveCenter(c))
-  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+  }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: radiusPoint,
     cursor: "ew-resize",
     onMove: newRadiusPoint => {
@@ -31708,7 +31732,7 @@ function MovableCircle(props) {
   } = props;
   const {
     snapStep,
-    hintMode
+    disableKeyboardInteraction
   } = useGraphConfig();
   const draggableRef = React.useRef(null);
   const {
@@ -31717,13 +31741,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__namespace.createElement("g", {
     ref: draggableRef,
-    tabIndex: hintMode ? -1 : 0,
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
     className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
   }, /*#__PURE__*/React__namespace.createElement("ellipse", {
     className: "focus-ring",
@@ -31804,7 +31828,7 @@ function QuadraticGraph(props) {
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
     y: y,
     color: wonderBlocksTokens.color.blue
-  }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+  }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     key: "point-" + i,
     point: coord,
     onMove: destination => dispatch(actions.quadratic.movePoint(i, destination))
@@ -31864,7 +31888,7 @@ function SinusoidGraph(props) {
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
     y: x => computeSine(x, coeffRef.current),
     color: wonderBlocksTokens.color.blue
-  }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+  }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     key: "point-" + i,
     point: coord,
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
@@ -31920,7 +31944,6 @@ function AngleGraph(props) {
     showAngles,
     range,
     allowReflexAngles,
-    angleOffsetDeg,
     snapDegrees
   } = graphState;
 
@@ -31959,8 +31982,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,
@@ -31968,19 +31989,65 @@ function AngleGraph(props) {
   };
 
   // Render the lines, angle, and then movable points
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, svgLines, /*#__PURE__*/React__namespace.createElement(Angle, angleParams), coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
-    key: "point-" + i,
-    snapTo: "angles",
-    point: point,
-    onMove: destination => dispatch(actions.angle.movePoint(i, destination))
-  })));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, svgLines, /*#__PURE__*/React__namespace.createElement(Angle, angleParams), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+    point: coords[1],
+    constrain: p => p,
+    onMove: destination => dispatch(actions.angle.movePoint(1, destination))
+  }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+    point: coords[0],
+    constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
+    onMove: destination => dispatch(actions.angle.movePoint(0, destination))
+  }), /*#__PURE__*/React__namespace.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) {
+  const currentAngle = calculateAngleInDegrees(mafs.vec.sub(sidePoint, vertex));
+
+  // Find the rays that start at the current point and point up, down, left
+  // and right.
+  const leftRay = [sidePoint, mafs.vec.add(sidePoint, negativeX)];
+  const rightRay = [sidePoint, mafs.vec.add(sidePoint, positiveX)];
+  const upRay = [sidePoint, mafs.vec.add(sidePoint, positiveY)];
+  const downRay = [sidePoint, mafs.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, mafs.vec.add(vertex, polar(1, oneStepCounterClockwise))];
+  const clockwiseRay = [vertex, mafs.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 = findIntersectionOfRays(leftRay, counterClockwiseRay) ?? findIntersectionOfRays(leftRay, clockwiseRay);
+  const right = findIntersectionOfRays(rightRay, counterClockwiseRay) ?? findIntersectionOfRays(rightRay, clockwiseRay);
+  const up = findIntersectionOfRays(upRay, counterClockwiseRay) ?? findIntersectionOfRays(upRay, clockwiseRay);
+  const down = findIntersectionOfRays(downRay, counterClockwiseRay) ?? findIntersectionOfRays(downRay, clockwiseRay);
+  return {
+    up: up ?? sidePoint,
+    down: down ?? sidePoint,
+    left: left ?? sidePoint,
+    right: right ?? sidePoint
+  };
 }
 
 function PointGraph(props) {
   const {
     dispatch
   } = props;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     key: i,
     point: point,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
@@ -32012,7 +32079,7 @@ function Protractor() {
     gestureTarget: draggableRef,
     onMove: setCenter,
     point: center,
-    constrain: point => bound$1({
+    constrainKeyboardMovement: point => bound$1({
       snapStep,
       range,
       point
@@ -32128,7 +32195,8 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    hintMode
+    hintMode,
+    readOnly
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
@@ -32144,7 +32212,7 @@ const MafsGraph = props => {
       width,
       height,
       labels,
-      hintMode
+      disableKeyboardInteraction: hintMode || readOnly
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     className: "mafs-graph",
@@ -32509,6 +32577,9 @@ const getAngleCoords = params => {
   if (graph.coords) {
     return graph.coords;
   }
+  if (graph.startCoords) {
+    return graph.startCoords;
+  }
   const {
     snapDegrees,
     angleOffsetDeg
@@ -32538,6 +32609,7 @@ const getAngleCoords = params => {
   return coords;
 };
 
+const minDistanceBetweenAngleVertexAndSidePoint = 2;
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
     case REINITIALIZE:
@@ -32708,23 +32780,30 @@ 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 {
+            ...state,
+            hasBeenInteractedWith: true,
+            coords: updatedCoords
+          };
+        }
         return {
           ...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 {
-        ...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") {
@@ -32817,11 +32896,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)
@@ -32856,10 +32931,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 (___default["default"].isEqual(nextRadiusPoint, state.center)) {
           return state;
         }
@@ -32949,17 +33024,16 @@ function boundAndSnapAngleVertex(_ref2, _ref3) {
 
   // 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 = mafs.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 = mafs.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];
@@ -32968,22 +33042,14 @@ function boundAndSnapAngleVertex(_ref2, _ref3) {
     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(_ref4 => {
-      let [i, newPoint] = _ref4;
-      coordsCopy[i] = newPoint;
-    });
-  }
+  Object.entries(newPoints).forEach(_ref4 => {
+    let [i, newPoint] = _ref4;
+    coordsCopy[i] = newPoint;
+  });
   return coordsCopy;
 }
 
@@ -33049,10 +33115,17 @@ function boundAndSnapAngleEndPoints(destinationPoint, _ref5, index) {
 
   // Snap the angle to the nearest multiple of snapDegrees (if provided)
   angle = Math.round((angle - offsetDegrees) / snap) * snap + offsetDegrees;
-  const distance = mafs.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(mafs.vec.dist(coordsCopy[index], vertex), minDistance);
   const snappedValue = mafs.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, _ref6, index) {
   let {
     range,
@@ -33283,7 +33356,12 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
   React.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;
@@ -33298,7 +33376,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.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__namespace.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -34602,7 +34680,8 @@ class InteractiveGraph extends React__namespace.Component {
         snapStep: snapStep,
         box: box,
         showTooltips: !!this.props.showTooltips,
-        hintMode: this.props.hintMode
+        hintMode: this.props.hintMode,
+        readOnly: this.props.apiOptions?.readOnly
       }));
     }
     return /*#__PURE__*/React__namespace.createElement(LegacyInteractiveGraph, _extends({
@@ -44524,7 +44603,7 @@ const init = function (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.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45082,7 +45161,6 @@ const context = /*#__PURE__*/React__namespace.createContext(defaultContext);
 const {
   mapObject
 } = objective_;
-/* eslint-disable-next-line react/no-unsafe */
 class ServerItemRenderer extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
@@ -46461,7 +46539,16 @@ class MultiRenderer extends React__namespace.Component {
       // _annotateRendererArray() needs this
       ref: null,
       makeRenderer: () => /*#__PURE__*/React__namespace.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]
       }))
     };
@@ -48178,12 +48265,15 @@ exports.generateTestNumericInputWidget = generateTestNumericInputWidget;
 exports.generateTestPerseusItem = generateTestPerseusItem;
 exports.generateTestRadioWidget = generateTestRadioWidget;
 exports.genericPerseusItemData = genericPerseusItemData;
+exports.getAngleCoords = getAngleCoords;
 exports.getAnswerFromUserInput = getAnswerFromUserInput;
 exports.getAnswersFromWidgets = getAnswersFromWidgets;
 exports.getCircleCoords = getCircleCoords;
 exports.getCorrectAnswerForWidgetId = getCorrectAnswerForWidgetId;
 exports.getLineCoords = getLineCoords;
 exports.getLinearSystemCoords = getLinearSystemCoords;
+exports.getPointCoords = getPointCoords;
+exports.getPolygonCoords = getPolygonCoords;
 exports.getQuadraticCoords = getQuadraticCoords;
 exports.getSegmentCoords = getSegmentCoords;
 exports.getSinusoidCoords = getSinusoidCoords;