@khanacademy/perseus-editor 5.2.13 → 5.3.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
@@ -16,33 +16,33 @@ import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import { point, number } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
-import { isTruthy } from '@khanacademy/wonder-stuff-core';
+import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { createMathField } from '@khanacademy/math-input';
 import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
-import { LabelSmall, LabelLarge, LabelMedium, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { LabelSmall, LabelMedium, LabelLarge, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import Switch from '@khanacademy/wonder-blocks-switch';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 import Button from '@khanacademy/wonder-blocks-button';
 import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.2.13";
+const libVersion = "5.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -220,7 +220,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$q.button
+      style: styles$r.button
     }, ({
       hovered,
       focused,
@@ -228,7 +228,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20750,19 +20750,19 @@ class TexErrorView extends React.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$p.iconExpanded : styles$p.iconCollapsed;
+    const iconStyle = showErrors ? styles$q.iconExpanded : styles$q.iconCollapsed;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$p.errorContainer
+      style: styles$q.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$p.title,
+      style: styles$q.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(PhosphorIcon, {
       icon: caretRight,
       style: iconStyle
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$p.errorExplanation
+      style: styles$q.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
-      style: styles$p.error,
+      style: styles$q.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20771,7 +20771,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24336,13 +24336,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -24574,7 +24572,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$o.baseButton, color === "green" && styles$o.green, color === "orange" && styles$o.orange),
+      className: css(styles$p.baseButton, color === "green" && styles$p.green, color === "orange" && styles$p.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24589,7 +24587,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24809,23 +24807,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.containerHeader)
+    className: css(styles$o.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$n.containerTitle)
+    className: css(styles$o.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.container)
+    className: css(styles$o.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$n.row, styles$n.rowHeading)
+    className: css(styles$o.row, styles$o.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnLeft)
+    className: css(styles$o.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$n.containerHeader)
+    className: "pod-title " + css(styles$o.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.containerTitle)
+    className: css(styles$o.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnRight)
+    className: css(styles$o.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24838,11 +24836,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.container)
+    className: css(styles$o.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnLeft, styles$n.containerHeader)
+    className: css(styles$o.columnLeft, styles$o.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnLeft)
+    className: css(styles$o.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24855,28 +24853,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.containerHeader)
+    className: css(styles$o.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$n.containerTitle)
+    className: css(styles$o.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.containerHeader, styles$n.previewCollectionHeader)
+    className: css(styles$o.containerHeader, styles$o.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$n.containerTitle)
+    className: css(styles$o.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.container)
+    className: css(styles$o.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$n.row)
+    className: css(styles$o.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnLeft)
+    className: css(styles$o.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnRight)
+    className: css(styles$o.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$n.contentIndent)
+    className: css(path.length > 0 && styles$o.contentIndent)
   }, children));
 };
 
@@ -24999,11 +24997,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.row)
+    className: css(styles$o.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnLeft)
+    className: css(styles$o.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$n.sticky)
+    className: css(sticky && styles$o.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25011,9 +25009,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnRight)
+    className: css(styles$o.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$n.sticky)
+    className: css(sticky && styles$o.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25029,13 +25027,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.row)
+    className: css(styles$o.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnLeft)
+    className: css(styles$o.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$n.sticky)
+    className: css(sticky && styles$o.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$n.hintEditor),
+    className: css(styles$o.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25050,9 +25048,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnRight)
+    className: css(styles$o.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$n.sticky)
+    className: css(sticky && styles$o.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25069,9 +25067,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.columnLeft)
+    className: css(styles$o.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$n.tagsEditor)
+    className: css(styles$o.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25102,23 +25100,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$n.control)
+      className: css(styles$o.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$n.verticalFlip)
+      className: css(styles$o.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$n.control)
+      className: css(styles$o.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$n.control)
+      className: css(styles$o.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25126,7 +25124,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$n.arrayElement, !elementIsLeaf && styles$n.arrayElementAndNotLeaf)
+      className: css(styles$o.arrayElement, !elementIsLeaf && styles$o.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25152,7 +25150,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$n.objectElement)
+    className: css(styles$o.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25319,7 +25317,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25471,47 +25469,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$m.controlBar
+      style: styles$n.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$m.controls
+      style: styles$n.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$m.controlSelected : styles$m.control
+      style: mode === "edit" ? styles$n.controlSelected : styles$n.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$m.controlSelected : styles$m.control
+      style: mode === "preview" ? styles$n.controlSelected : styles$n.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$m.controlSelected : styles$m.control
+      style: mode === "json" ? styles$n.controlSelected : styles$n.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$m.controls
+      style: styles$n.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$m.controlSelected : styles$m.control
+      style: screen === "phone" ? styles$n.controlSelected : styles$n.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$m.controlSelected : styles$m.control
+      style: screen === "tablet" ? styles$n.controlSelected : styles$n.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$m.controlSelected : styles$m.control
+      style: screen === "desktop" ? styles$n.controlSelected : styles$n.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$m.editor
+      style: styles$n.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$m = {
+const styles$n = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27001,10 +26999,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$l.title)
+      className: css(styles$m.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$l.input)
+      className: css(styles$m.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27029,7 +27027,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.hintsTitle)
+      className: css(styles$m.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27066,7 +27064,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28400,13 +28398,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$k.outerWrapper
+    style: styles$l.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29467,7 +29465,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$j.singleSelectShort
+    style: styles$k.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -29478,7 +29476,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29491,7 +29489,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$i.singleSelectShort
+    style: styles$j.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -29524,7 +29522,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29541,16 +29539,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$h.label)
+    className: css(styles$i.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$h.row, style]
+    style: [styles$i.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$h.spaceEnd
+    style: styles$i.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$h.spaceStart
+    style: styles$i.spaceStart
   }, label)));
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29944,10 +29942,10 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$g.resetSpaceTop
+      style: styles$h.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$g.backgroundUrlInput),
+      className: css(styles$h.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -29961,24 +29959,24 @@ class InteractiveGraphSettings extends React.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$g.rulerSection
+      style: styles$h.rulerSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$g.checkboxRow
+      style: styles$h.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$g.resetSpaceTop
+      style: styles$h.resetSpaceTop
     }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$g.resetSpaceTop
+      style: styles$h.resetSpaceTop
     })), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
-      style: styles$g.spaceTop
+      style: styles$h.spaceTop
     }, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$g.resetSpaceTop
+      style: styles$h.resetSpaceTop
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -29988,7 +29986,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "None",
-      style: styles$g.singleSelectShort
+      style: styles$h.singleSelectShort
     }, /*#__PURE__*/React.createElement(OptionItem, {
       value: "",
       label: "None",
@@ -30029,7 +30027,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "10",
-      style: styles$g.singleSelectShort
+      style: styles$h.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
       key: value,
       value: `${value}`,
@@ -30053,7 +30051,7 @@ InteractiveGraphSettings.defaultProps = {
   rulerLabel: "",
   rulerTicks: 10
 };
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30097,17 +30095,17 @@ const LockedFigureSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$f.container
+    style: styles$g.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
-    menuText: "Add element",
-    style: styles$f.addElementSelect
+    menuText: "Add locked figure",
+    style: styles$g.addElementSelect
   }, [/*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-point`,
     label: "Point",
     onClick: () => onChange("point")
   }, "Point")]));
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   container: {
     marginTop: spacing.medium_16
   },
@@ -30168,21 +30166,98 @@ const defaultContext = {
 };
 const MediaLayoutContext = React.createContext(defaultContext);
 MediaLayoutContext.displayName = "MediaLayoutContext";
+StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
 
-class Spring extends React.Component {
+class Strut extends React.Component {
   render() {
     const {
+      size,
       style
     } = this.props;
     return React.createElement(View, {
       "aria-hidden": "true",
-      style: [styles$e.grow, style]
+      style: [strutStyle(size), style]
     });
   }
 }
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
+const ColorCircle = props => {
+  const {
+    color: color$1,
+    filled = true,
+    decorative = false
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    "aria-label":
+    // Don't include an aria label for decorative circles.
+    !decorative ? `Color: ${color$1}, ${filled ? "filled" : "open"}` : undefined,
+    style: [styles$f.colorCircle, {
+      border: `4px solid ${color[color$1]}`,
+      backgroundColor: filled ? color[color$1] : color.white
+    }]
+  });
+};
+const styles$f = StyleSheet.create({
+  colorCircle: {
+    // Add a white outline so that the color circle is visible when
+    // the dropdown option is highlighted with its blue background.
+    outline: `2px solid ${color.offWhite}`,
+    borderRadius: "50%",
+    width: spacing.large_24,
+    height: spacing.large_24
+  }
+});
+
+const ColorSelect = props => {
+  const {
+    id,
+    selectedValue,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$e.row
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    htmlFor: id,
+    style: styles$e.label,
+    tag: "label"
+  }, "Color"), /*#__PURE__*/React.createElement(SingleSelect, {
+    id: id,
+    selectedValue: selectedValue,
+    onChange: onChange
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, lockedFigureColors.map(colorName => /*#__PURE__*/React.createElement(OptionItem, {
+    key: colorName,
+    value: colorName,
+    label: colorName,
+    leftAccessory: /*#__PURE__*/React.createElement(ColorCircle, {
+      color: colorName,
+      decorative: true
+    })
+  }, colorName))));
+};
 const styles$e = StyleSheet.create({
-  grow: {
-    flexGrow: 1
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  label: {
+    marginInlineEnd: spacing.xSmall_8
   }
 });
 
@@ -30231,13 +30306,30 @@ function getValidNumberFromString(value) {
   // If the value is not a number, return 0.
   return isNaN(parsed) ? 0 : parsed;
 }
-function getDefaultFigureForFigureType(type) {
+function getDefaultFigureForType(type) {
   switch (type) {
     case "point":
       return {
         type: "point",
-        coord: [0, 0]
+        coord: [0, 0],
+        color: "blue",
+        filled: true
       };
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
+          coord: [2, 2]
+        })],
+        color: "blue",
+        lineStyle: "solid",
+        showArrows: false,
+        showStartPoint: false,
+        showEndPoint: false
+      };
+    default:
+      throw new UnreachableCaseError(type);
   }
 }
 
@@ -30247,15 +30339,21 @@ function getDefaultFigureForFigureType(type) {
  *
  * Used in the interactive graph editor's locked figures section.
  */
-const possibleColors = ["purple", "blue", "teal", "green", "gold", "red", "pink"];
 const LockedPointSettings = props => {
   const {
     coord,
+    color: pointColor,
+    filled = true,
+    label,
+    toggled = "true",
     style,
-    onChangeColor,
-    onChangeCoord,
+    onChangeProps,
+    onToggle,
     onRemove
   } = props;
+
+  // Keep track of the coordinates via state as the user is editing them,
+  // before they are updated in the props on blur.
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
@@ -30265,86 +30363,135 @@ const LockedPointSettings = props => {
   const ids = useUniqueIdWithMock();
   const xCoordId = ids.get("x-coord");
   const yCoordId = ids.get("y-coord");
-  const colorSelectId = ids.get("color-select");
+  const colorSelectId = ids.get("point-color-select");
+  const showPointToggleId = ids.get("show-point-toggle");
   function handleBlur() {
     const validCoord = [getValidNumberFromString(coordState[0]), getValidNumberFromString(coordState[1])];
 
     // Make the text field only show valid numbers after blur.
     setCoordState([validCoord[0].toString(), validCoord[1].toString()]);
     // Update the graph with the new coordinates.
-    onChangeCoord(validCoord);
+    onChangeProps({
+      coord: validCoord
+    });
   }
   function handleCoordChange(newValue, coordIndex) {
     const newCoord = [...coordState];
     newCoord[coordIndex] = newValue;
     setCoordState(newCoord);
   }
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles$d.container
+  function handleColorChange(newValue) {
+    onChangeProps({
+      color: newValue
+    });
+  }
+  return /*#__PURE__*/React.createElement(View
+  // More specificity so that we can override the default
+  // .heading > h2 > .header styles from the articles.less
+  // file (which is imported in perseus-renderer.less).
+  , {
+    className: "locked-figure-accordion"
+  }, /*#__PURE__*/React.createElement(AccordionSection, {
+    style: [styles$d.container, style],
+    headerStyle: styles$d.accordionHeader,
+    header:
+    /*#__PURE__*/
+    // Summary: Point, coords, color (filled/open)
+    React.createElement(View, {
+      style: styles$d.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), toggled && /*#__PURE__*/React.createElement(ColorCircle, {
+      color: pointColor,
+      filled: filled
+    }))
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles$d.accordionPanel
   }, /*#__PURE__*/React.createElement(View, {
     style: styles$d.row
-  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
-    icon: trashIcon,
-    "aria-label": `Delete locked point at ${coordState[0]}, ${coordState[1]}`,
-    onClick: onRemove
-  })), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
-    style: styles$d.row
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$d.row, styles$d.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     htmlFor: xCoordId,
     style: styles$d.label,
     tag: "label"
-  }, "x Coordinate"), /*#__PURE__*/React.createElement(TextField, {
+  }, "x Coord"), /*#__PURE__*/React.createElement(TextField, {
     id: xCoordId,
+    type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
     onBlur: handleBlur,
     style: styles$d.textField
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styles$d.row
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.medium_16
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles$d.row, styles$d.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     htmlFor: yCoordId,
     style: styles$d.label,
     tag: "label"
-  }, "y Coordinate"), /*#__PURE__*/React.createElement(TextField, {
+  }, "y Coord"), /*#__PURE__*/React.createElement(TextField, {
     id: yCoordId,
+    type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
     onBlur: handleBlur,
     style: styles$d.textField
-  }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$d.row
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: colorSelectId,
-    style: styles$d.label,
-    tag: "label"
-  }, "Color"), /*#__PURE__*/React.createElement(SingleSelect, {
+  }))), onToggle && /*#__PURE__*/React.createElement(View, {
+    style: [styles$d.row, styles$d.spaceUnder]
+  }, /*#__PURE__*/React.createElement(Switch, {
+    id: showPointToggleId,
+    checked: !!toggled,
+    onChange: onToggle
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    htmlFor: showPointToggleId
+  }, "Show point on graph")), toggled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     id: colorSelectId,
-    selectedValue: (style == null ? void 0 : style.fill) || "blue",
-    onChange: onChangeColor
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, possibleColors.map(colorName => /*#__PURE__*/React.createElement(OptionItem, {
-    key: colorName,
-    value: colorName,
-    label: colorName,
-    leftAccessory: /*#__PURE__*/React.createElement(View, {
-      style: [styles$d.colorCircle, {
-        backgroundColor: color[colorName]
-      }]
-    })
-  }, colorName)))));
+    selectedValue: pointColor || "blue",
+    onChange: handleColorChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(Checkbox$1, {
+    label: "Open point",
+    checked: !filled,
+    onChange: newValue => {
+      onChangeProps({
+        filled: !newValue
+      });
+    },
+    style: styles$d.spaceUnder
+  })), onRemove && /*#__PURE__*/React.createElement(IconButton, {
+    icon: trashIcon,
+    "aria-label": `Delete locked point at ${coordState[0]}, ${coordState[1]}`,
+    onClick: onRemove,
+    style: styles$d.deleteButton
+  }))));
 };
 const styles$d = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
-    marginBottom: spacing.xSmall_8,
+    marginBottom: spacing.small_12
+  },
+  accordionHeader: {
+    paddingTop: spacing.small_12,
+    paddingBottom: spacing.small_12,
+    paddingInlineStart: spacing.medium_16,
+    // Fixed height so the addition of the color circle doesn't
+    // change the height of the header when toggling.
+    height: spacing.xxLarge_48
+  },
+  accordionPanel: {
     padding: spacing.medium_16,
-    borderRadius: spacing.xSmall_8
+    paddingBottom: spacing.xSmall_8
   },
   row: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "center"
+  },
+  spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
   label: {
@@ -30353,13 +30500,10 @@ const styles$d = StyleSheet.create({
   textField: {
     width: spacing.xxxLarge_64
   },
-  colorCircle: {
-    // Add a white border so that the color circle is visible when
-    // the dropdown option is highlighted with its blue background.
-    border: `2px solid ${color.offWhite}`,
-    borderRadius: "50%",
-    width: spacing.large_24,
-    height: spacing.large_24
+  deleteButton: {
+    position: "absolute",
+    top: spacing.small_12,
+    right: spacing.small_12
   }
 });
 
@@ -30389,7 +30533,7 @@ const LockedFiguresSection = props => {
   function addLockedFigure(newFigure) {
     const lockedFigures = figures || [];
     const newProps = {
-      lockedFigures: [...lockedFigures, getDefaultFigureForFigureType(newFigure)]
+      lockedFigures: [...lockedFigures, getDefaultFigureForType(newFigure)]
     };
     onChange(newProps);
   }
@@ -30399,36 +30543,31 @@ const LockedFiguresSection = props => {
       lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
     });
   }
-  function changeCoord(index, coord) {
-    const lockedFigures = figures || [];
-    const newProps = {
-      lockedFigures: [...lockedFigures.slice(0, index), _extends({}, lockedFigures[index], {
-        coord
-      }), ...lockedFigures.slice(index + 1)]
-    };
-    onChange(newProps);
-  }
-  function changeColor(index, colorName) {
+  function changeProps(index,
+  // Omit the type from the figure props so it doesn't think
+  // we're trying to pass in the props for the wrong type.
+  figureProps) {
     const lockedFigures = figures || [];
-    const newProps = {
-      lockedFigures: [...lockedFigures.slice(0, index), _extends({}, lockedFigures[index], {
-        style: _extends({}, lockedFigures[index].style, {
-          fill: colorName,
-          stroke: colorName
-        })
-      }), ...lockedFigures.slice(index + 1)]
+    const newFigures = {
+      lockedFigures: [...lockedFigures.slice(0, index), _extends({}, lockedFigures[index], figureProps), ...lockedFigures.slice(index + 1)]
     };
-    onChange(newProps);
+    onChange(newFigures);
   }
   return /*#__PURE__*/React.createElement(View, {
     style: styles$c.container
-  }, figures == null ? void 0 : figures.map((figure, index) => /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
-    key: `${uniqueId}-locked-${figure}-${index}`
-  }, figure, {
-    onChangeColor: color => changeColor(index, color),
-    onChangeCoord: coord => changeCoord(index, coord),
-    onRemove: () => removeLockedFigure(index)
-  }))), /*#__PURE__*/React.createElement(LockedFigureSelect, {
+  }, figures == null ? void 0 : figures.map((figure, index) => {
+    // TODO(LEMS-1740): Remove this check when
+    // locked lines are added to LockedFigureSettings.
+    if (figure.type === "line") {
+      return;
+    }
+    return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
+      key: `${uniqueId}-locked-${figure}-${index}`
+    }, figure, {
+      onChangeProps: newProps => changeProps(index, newProps),
+      onRemove: () => removeLockedFigure(index)
+    }));
+  }), /*#__PURE__*/React.createElement(LockedFigureSelect, {
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
   }));
@@ -30519,13 +30658,15 @@ class InteractiveGraphEditor extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$apiOption;
+    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$apiOption, _this$props$apiOption2;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
     const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
     const sizeClass = containerSizeClass.SMALL;
     if (this.props.valid === true) {
+      const correct = this.props.correct;
+
       // TODO(aria): send these down all at once
       const graphProps = {
         ref: "graph",
@@ -30535,7 +30676,7 @@ class InteractiveGraphEditor extends React.Component {
         step: this.props.step,
         gridStep: gridStep,
         snapStep: snapStep,
-        graph: this.props.correct,
+        graph: correct,
         backgroundImage: this.props.backgroundImage,
         markings: this.props.markings,
         showProtractor: this.props.showProtractor,
@@ -30559,6 +30700,10 @@ class InteractiveGraphEditor extends React.Component {
           });
         }
       };
+
+      // This is used to force a remount of the graph component
+      // when there's a significant change
+      const graphKey = `${correct.type}:${correct.numSegments || 0}`;
       graph =
       /*#__PURE__*/
       // There are a bunch of props that renderer.jsx passes to widgets via
@@ -30566,6 +30711,7 @@ class InteractiveGraphEditor extends React.Component {
       // bother passing.
       // @ts-expect-error - TS2769 - No overload matches this call.
       React.createElement(InteractiveGraph, _extends({}, graphProps, {
+        key: graphKey,
         containerSizeClass: sizeClass,
         apiOptions: _extends({}, this.props.apiOptions, {
           isMobile: false
@@ -30761,9 +30907,9 @@ class InteractiveGraphEditor extends React.Component {
         borderWidth: 1
       }
     }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
-    // Only show the "Add element" dropdown if the graph is
+    // Only show the "Add locked figure" dropdown if the graph is
     // using Mafs.
-    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption["mafs"]) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["interactive-graph-locked-features-m1"]) && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));
@@ -30911,7 +31057,7 @@ class FormWrappedTextField extends React.Component {
       className: css(inputBase),
       ref: forwardedRef,
       id: id,
-      "data-test-id": testId
+      "data-testid": testId
     })), !leftSideIcon && wrappedIcon);
   }
 }
@@ -31043,7 +31189,7 @@ class Link extends React.Component {
       rel = "noopener noreferrer";
     }
     return /*#__PURE__*/React.createElement(element, _extends({
-      "data-test-id": testId
+      "data-testid": testId
     }, otherProps, urlProp, {
       className: css(...delegatedStyles) + delegatedClassName,
       style: inlineStyles,
@@ -31362,7 +31508,7 @@ class Checkbox extends React.Component {
     }, handlers) => /*#__PURE__*/React.createElement("div", _extends({}, handlers, {
       className: css(styles$6.container, focused && styles$6.focused),
       style: style,
-      "data-test-id": dataTestId,
+      "data-testid": dataTestId,
       "data-checked": checked
     }), /*#__PURE__*/React.createElement("svg", {
       className: css(styles$6.svg, (disabled || appearDisabled) && styles$6.disabled),
@@ -31609,7 +31755,7 @@ class Option extends React.Component {
       onKeyDown: event => this.handleKeyDown(event),
       "aria-disabled": disabled,
       "aria-label": ariaLabel,
-      "data-test-id": testId
+      "data-testid": testId
     }, optionRenderer && optionRenderer(
     /*#__PURE__*/
     /**