@khanacademy/perseus-editor 10.0.0 → 11.0.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, 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, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedFigureFillStyles, getLineCoords, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, 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, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
@@ -37,7 +37,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "10.0.0";
+const libVersion = "11.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -209,7 +209,7 @@ const JsonEditor = createReactClass({
 });
 
 const {
-  InlineIcon: InlineIcon$b
+  InlineIcon: InlineIcon$a
 } = components;
 class SectionControlButton extends React.Component {
   render() {
@@ -227,15 +227,15 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$G.button
+      style: styles$I.button
     }, ({
       hovered,
       focused,
       pressed
-    }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
+    }) => /*#__PURE__*/React.createElement(InlineIcon$a, icon));
   }
 }
-const styles$G = StyleSheet.create({
+const styles$I = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20558,7 +20558,7 @@ const DragTarget = createReactClass({
 });
 
 const {
-  InlineIcon: InlineIcon$a
+  InlineIcon: InlineIcon$9
 } = components;
 const {
   iconChevronDown: iconChevronDown$1,
@@ -20665,7 +20665,7 @@ class WidgetEditor extends React.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement("input", {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement("input", {
       type: "button"
       // @ts-expect-error - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
       ,
@@ -20740,13 +20740,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$F.expanded : styles$F.collapsed;
+  const iconStyle = props.isExpanded ? styles$H.expanded : styles$H.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$F = StyleSheet.create({
+const styles$H = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20779,16 +20779,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$E.errorContainer
+      style: styles$G.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$E.title,
+      style: styles$G.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$E.errorExplanation
+      style: styles$G.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$E.error,
+      style: styles$G.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20797,7 +20797,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$E = StyleSheet.create({
+const styles$G = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -21786,7 +21786,7 @@ class IframeContentRenderer extends React.Component {
 
 const {
   HUD: HUD$1,
-  InlineIcon: InlineIcon$9
+  InlineIcon: InlineIcon$8
 } = components;
 const {
   iconCircleArrowDown: iconCircleArrowDown$1,
@@ -21945,7 +21945,7 @@ class ArticleEditor extends React.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconPlus$4), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React.createElement(HUD$1, {
@@ -22093,7 +22093,7 @@ ArticleEditor.defaultProps = {
  */
 const {
   ButtonGroup: ButtonGroup$5,
-  InlineIcon: InlineIcon$8
+  InlineIcon: InlineIcon$7
 } = components;
 const {
   devices
@@ -22104,9 +22104,9 @@ const {
   iconTablet
 } = icons;
 const ViewportResizer = props => {
-  const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconMobilePhone), " Phone");
-  const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconTablet), " Tablet");
-  const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconDesktop), " Desktop");
+  const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$7, iconMobilePhone), " Phone");
+  const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$7, iconTablet), " Tablet");
+  const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$7, iconDesktop), " Desktop");
 
   // TODO(david): Allow input of custom viewport sizes.
   return /*#__PURE__*/React.createElement("span", {
@@ -23454,7 +23454,7 @@ class StructuredItemDiff extends React.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$m,
-  InlineIcon: InlineIcon$7
+  InlineIcon: InlineIcon$6
 } = components;
 const {
   iconCircleArrowDown,
@@ -23521,11 +23521,11 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isLast ? "hidden" : "",
       onClick: _.partial(this.props.onMove, 1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowDown)), " ", /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconCircleArrowDown)), " ", /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$m, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$m, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23535,7 +23535,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$5), "Remove this hint", " ")));
   }
 }
 HintEditor.defaultProps = {
@@ -23766,7 +23766,7 @@ class CombinedHintsEditor extends React.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconPlus$3), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
@@ -24591,7 +24591,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$D.baseButton, color === "green" && styles$D.green, color === "orange" && styles$D.orange),
+      className: css(styles$F.baseButton, color === "green" && styles$F.green, color === "orange" && styles$F.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24606,7 +24606,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$D = StyleSheet.create({
+const styles$F = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24656,7 +24656,7 @@ const _excluded$2 = ["depth"],
   _excluded4 = ["shape", "data", "path", "actions"],
   _excluded5 = ["shape", "data", "path"];
 const {
-  InlineIcon: InlineIcon$6
+  InlineIcon: InlineIcon$5
 } = components;
 const {
   iconChevronDown,
@@ -24826,23 +24826,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader)
+    className: css(styles$E.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$E.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$E.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$C.row, styles$C.rowHeading)
+    className: css(styles$E.row, styles$E.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$E.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$C.containerHeader)
+    className: "pod-title " + css(styles$E.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerTitle)
+    className: css(styles$E.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$E.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24855,11 +24855,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$E.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft, styles$C.containerHeader)
+    className: css(styles$E.columnLeft, styles$E.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$E.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24872,28 +24872,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader)
+    className: css(styles$E.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$E.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader, styles$C.previewCollectionHeader)
+    className: css(styles$E.containerHeader, styles$E.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$E.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$E.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$C.row)
+    className: css(styles$E.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$E.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$E.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$C.contentIndent)
+    className: css(path.length > 0 && styles$E.contentIndent)
   }, children));
 };
 
@@ -25016,11 +25016,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$C.row)
+    className: css(styles$E.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$E.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$E.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25028,9 +25028,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$E.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$E.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25046,13 +25046,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.row)
+    className: css(styles$E.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$E.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$E.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$C.hintEditor),
+    className: css(styles$E.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25067,9 +25067,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$E.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$E.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25086,9 +25086,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$E.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.tagsEditor)
+    className: css(styles$E.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25119,31 +25119,31 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$C.control)
+      className: css(styles$E.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$C.verticalFlip)
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
+      className: css(styles$E.verticalFlip)
+    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$C.control)
+      className: css(styles$E.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$C.control)
+      className: css(styles$E.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
+    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$C.arrayElement, !elementIsLeaf && styles$C.arrayElementAndNotLeaf)
+      className: css(styles$E.arrayElement, !elementIsLeaf && styles$E.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25169,7 +25169,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$C.objectElement)
+    className: css(styles$E.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25336,7 +25336,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$C = StyleSheet.create({
+const styles$E = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25885,7 +25885,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$j,
-  InlineIcon: InlineIcon$5
+  InlineIcon: InlineIcon$4
 } = components;
 const {
   iconPlus: iconPlus$2,
@@ -26005,14 +26005,14 @@ class DropdownEditor extends React.Component {
         this, i)
       }, /*#__PURE__*/React.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$3)))));
+      }, /*#__PURE__*/React.createElement(InlineIcon$4, iconTrash$3)))));
     }, this)), /*#__PURE__*/React.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$2), " Add a choice", " ")));
   }
 }
 DropdownEditor.propTypes = {
@@ -26858,7 +26858,7 @@ class AnswerOption extends React.Component {
 }
 
 const {
-  InlineIcon: InlineIcon$4,
+  InlineIcon: InlineIcon$3,
   TextInput: TextInput$6
 } = components;
 const {
@@ -26908,10 +26908,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$B.title)
+      className: css(styles$D.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$B.input)
+      className: css(styles$D.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26933,10 +26933,10 @@ class GradedGroupEditor extends React.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$B.hintsTitle)
+      className: css(styles$D.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -26955,7 +26955,7 @@ class GradedGroupEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$3, iconTrash$2), " Remove this hint")));
   }
 }
 GradedGroupEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -26973,7 +26973,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$B = StyleSheet.create({
+const styles$D = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27874,7 +27874,7 @@ IframeEditor.defaultProps = {
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
   InfoTip: InfoTip$f,
-  InlineIcon: InlineIcon$3,
+  InlineIcon: InlineIcon$2,
   RangeInput: RangeInput$5
 } = components;
 const defaultBoxSize = 400;
@@ -27992,7 +27992,7 @@ class ImageEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React.createElement(InlineIcon$3, icons.iconTrash))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconTrash))));
   }
   change(...args) {
     return Changeable.change.apply(this, args);
@@ -28312,13 +28312,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$A.outerWrapper
+    style: styles$C.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$A = StyleSheet.create({
+const styles$C = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -28330,7 +28330,7 @@ const styles$A = StyleSheet.create({
 });
 
 const {
-  NumberInput: NumberInput$e
+  NumberInput: NumberInput$d
 } = components;
 const {
   getDependencies: getDependencies$8
@@ -28379,7 +28379,7 @@ class FunctionEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$e, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$d, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28451,7 +28451,7 @@ LabelEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$d
+  NumberInput: NumberInput$c
 } = components;
 const {
   getDependencies: getDependencies$6
@@ -28506,7 +28506,7 @@ class LineEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$d, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$c, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28526,7 +28526,7 @@ LineEditor.defaultProps = {
 
 const {
   ButtonGroup: ButtonGroup$3,
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$b
 } = components;
 class ConstraintEditor extends React.Component {
   constructor(...args) {
@@ -28560,7 +28560,7 @@ class ConstraintEditor extends React.Component {
       onChange: this.change("constraint")
     })), this.props.constraint === "snap" && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$c, {
+    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$b, {
       value: this.props.snap,
       placeholder: 0,
       onChange: this.change("snap")
@@ -28612,7 +28612,7 @@ ConstraintEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$b
+  NumberInput: NumberInput$a
 } = components;
 const {
   getDependencies: getDependencies$5
@@ -28653,13 +28653,13 @@ class MovableLineEditor extends React.Component {
       onChange: this.change("endY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$a, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$a, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -28684,7 +28684,7 @@ MovableLineEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$a
+  NumberInput: NumberInput$9
 } = components;
 const {
   getDependencies: getDependencies$4
@@ -28717,7 +28717,7 @@ class MovablePointEditor extends React.Component {
       onChange: this.change("startY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$a, {
+    }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$9, {
       value: this.props.varSubscript,
       placeholder: 0,
       onChange: this.change("varSubscript")
@@ -28738,7 +28738,7 @@ MovablePointEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$9
+  NumberInput: NumberInput$8
 } = components;
 const {
   getDependencies: getDependencies$3
@@ -28792,7 +28792,7 @@ class ParametricEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$9, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -29364,16 +29364,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$z.label)
+    className: css(styles$B.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$z.row, style]
+    style: [styles$B.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$z.spaceEnd
+    style: styles$B.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$z.spaceStart
+    style: styles$B.spaceStart
   }, label)));
 };
-const styles$z = StyleSheet.create({
+const styles$B = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29450,11 +29450,11 @@ class Spring extends React.Component {
     } = this.props;
     return React.createElement(View, {
       "aria-hidden": "true",
-      style: [styles$y.grow, style]
+      style: [styles$A.grow, style]
     });
   }
 }
-const styles$y = StyleSheet.create({
+const styles$A = StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -29489,22 +29489,12 @@ function Heading({
   isCollapsible,
   onToggle
 }) {
-  return /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: color.offBlack8,
-      padding: spacing.xSmall_8,
-      marginTop: spacing.small_12,
-      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-      // variable found in perseus-editor.less. For now, it must
-      // match otherwise there's a gap from this header to the edge
-      // of the editor borders.
-      marginInline: -10,
-      cursor: isCollapsible ? "pointer" : "default",
-      userSelect: "none"
-    },
+  return /*#__PURE__*/React.createElement(Clickable, {
+    style: [styles$z.container, !isCollapsible && styles$z.notClickable],
+    disabled: !isCollapsible,
     onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
+  }, () => /*#__PURE__*/React.createElement(View, {
+    style: styles$z.heading
   }, /*#__PURE__*/React.createElement(LabelLarge, {
     style: {
       fontSize: 14,
@@ -29512,8 +29502,31 @@ function Heading({
     }
   }, title), isCollapsible && /*#__PURE__*/React.createElement(ToggleableCaret, {
     isExpanded: isOpen
-  }));
+  })));
 }
+const styles$z = StyleSheet.create({
+  container: {
+    marginTop: spacing.small_12,
+    // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+    // variable found in perseus-editor.less. For now, it must
+    // match otherwise there's a gap from this header to the edge
+    // of the editor borders.
+    marginInline: -10,
+    backgroundColor: color.offBlack8,
+    padding: spacing.xSmall_8
+  },
+  heading: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    userSelect: "none"
+  },
+  notClickable: {
+    // We don't need the text to be grayed out.
+    color: "inherit",
+    // We don't need the pointer to show the "not allowed" symbol.
+    cursor: "default"
+  }
+});
 
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
@@ -29620,6 +29633,25 @@ function degreeToRadian(degrees) {
 function radianToDegree(radians) {
   return radians / Math.PI * 180;
 }
+function getDefaultGraphStartCoords(graph, range, step) {
+  switch (graph.type) {
+    case "linear":
+    case "ray":
+      return getLineCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "segment":
+      return getSegmentCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "linear-system":
+      return getLinearSystemCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    default:
+      return undefined;
+  }
+}
 
 /**
  * Dropdown for selecting a locked figure to add to an interactive graph.
@@ -29635,17 +29667,17 @@ const LockedFigureSelect = props => {
   } = props;
   const figureTypes = props.showM2Features ? ["point", "line", "vector", "ellipse", "polygon"] : ["point", "line"];
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$x.container
+    style: styles$y.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$x.addElementSelect
+    style: styles$y.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$x = StyleSheet.create({
+const styles$y = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -29676,19 +29708,19 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$x.row
   }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$w.textField
+    style: styles$x.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }));
 };
-const styles$w = StyleSheet.create({
+const styles$x = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29737,32 +29769,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$v.row, style]
+    style: [styles$w.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$w.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$v.textField, error ? styles$v.errorField : undefined]
+    style: [styles$w.textField, error ? styles$w.errorField : undefined]
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$w.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$v.textField, error ? styles$v.errorField : undefined]
+    style: [styles$w.textField, error ? styles$w.errorField : undefined]
   })));
 };
-const styles$v = StyleSheet.create({
+const styles$w = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29795,14 +29827,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$u.container, containerStyle],
-    headerStyle: styles$u.accordionHeader,
+    style: [styles$v.container, containerStyle],
+    headerStyle: styles$v.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$u.accordionPanel, panelStyle]
+    style: [styles$v.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -29833,13 +29865,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$t.colorSwatch, {
+    style: [styles$u.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -29858,10 +29890,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$s.row, style]
+    style: [styles$t.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$s.row
+    style: styles$t.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -29880,7 +29912,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29896,17 +29928,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$r.container, {
+    style: [styles$s.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$r.innerCircle, {
+    style: [styles$s.innerCircle, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -29937,40 +29969,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$q.container
+    style: styles$r.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$q.deleteButton
+    style: styles$r.deleteButton
   }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   })));
 };
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30017,7 +30049,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$p.row
+      style: styles$q.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(EllipseSwatch, {
@@ -30026,19 +30058,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$p.row
+    style: styles$q.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$p.spaceUnder,
+    style: styles$q.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$p.spaceUnder
+    style: styles$q.spaceUnder
   }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$p.spaceUnder,
+    style: styles$q.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30050,7 +30082,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$p.row, styles$p.spaceUnder]
+    style: [styles$q.row, styles$q.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30058,7 +30090,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$p.row
+    style: styles$q.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30075,7 +30107,7 @@ const LockedEllipseSettings = props => {
     label: option
   }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$p.row
+    style: styles$q.row
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30099,7 +30131,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30120,7 +30152,7 @@ const LabeledSwitch = props => {
   const ids = useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$o.row, style]
+    style: [styles$p.row, style]
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: checked,
@@ -30132,7 +30164,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30166,13 +30198,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    containerStyle: styles$n.container,
-    panelStyle: styles$n.accordionPanel,
+    containerStyle: styles$o.container,
+    panelStyle: styles$o.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30182,7 +30214,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$n.spaceUnder,
+    style: styles$o.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30191,12 +30223,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$n.spaceUnder,
+    style: showPoint && styles$o.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$n.spaceUnder
+    style: styles$o.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30207,7 +30239,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8,
     marginBottom: 0,
@@ -30234,15 +30266,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$m.container
+    style: styles$n.container
   }, /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$m.lineSwatch, {
+    style: [styles$n.lineSwatch, {
       border: `5px ${lineStyle} ${lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   container: {
     backgroundColor: color.white,
     justifyContent: "center",
@@ -30296,7 +30328,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30305,7 +30337,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$l.row, styles$l.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, "kind", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30326,7 +30358,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$l.row
+    style: styles$m.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30334,7 +30366,7 @@ const LockedLineSettings = props => {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$l.row
+    style: styles$m.row
   }, "style", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30345,7 +30377,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$l.selectMarginOffset
+    style: styles$m.selectMarginOffset
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
@@ -30353,7 +30385,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$l.errorText
+    style: styles$m.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30379,7 +30411,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30424,7 +30456,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$k.row
+      style: styles$l.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30433,7 +30465,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$k.spaceUnder,
+    style: styles$l.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30442,7 +30474,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$k.spaceUnder
+    style: styles$l.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30458,7 +30490,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30476,17 +30508,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$j.container, {
+    style: [styles$k.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$j.innerSquare, {
+    style: [styles$k.innerSquare, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30528,7 +30560,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React.createElement(View, {
-      style: styles$i.row
+      style: styles$j.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(PolygonSwatch, {
@@ -30537,7 +30569,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$i.row, styles$i.spaceUnder]
+    style: [styles$j.row, styles$j.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30545,7 +30577,7 @@ const LockedPolygonSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$i.row
+    style: styles$j.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30562,7 +30594,7 @@ const LockedPolygonSettings = props => {
     label: option
   }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$i.row, styles$i.spaceUnder]
+    style: [styles$j.row, styles$j.spaceUnder]
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30585,17 +30617,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$i.spaceUnder
+    style: styles$j.spaceUnder
   }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$i.pointAccordionContainer,
-    panelStyle: styles$i.pointAccordionPanel
+    containerStyle: styles$j.pointAccordionContainer,
+    panelStyle: styles$j.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React.createElement(View, {
       key: `locked-polygon-point-${point[0]}-${point[1]}-index-${index}`,
-      style: [styles$i.row, styles$i.spaceUnder]
+      style: [styles$j.row, styles$j.spaceUnder]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.medium_16
     }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -30623,7 +30655,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$i.icon
+      style: styles$j.icon
     }));
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
@@ -30640,7 +30672,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30698,7 +30730,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30706,19 +30738,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$h.errorText
+    style: styles$i.errorText
   }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$h.container,
-    panelStyle: styles$h.accordionPanel,
+    containerStyle: styles$i.container,
+    panelStyle: styles$i.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30729,10 +30761,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$h.container,
-    panelStyle: styles$h.accordionPanel,
+    containerStyle: styles$i.container,
+    panelStyle: styles$i.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30747,7 +30779,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   accordionPanel: {
     paddingBottom: spacing.medium_16
   },
@@ -30922,7 +30954,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$g.buttonContainer
+    style: styles$h.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
     showM2Features: props.showM2Features,
     showM2bFeatures: props.showM2bFeatures,
@@ -30933,10 +30965,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$g.button
+    style: styles$h.button
   }, buttonLabel))));
 };
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -30971,7 +31003,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$f.singleSelectShort
+    style: styles$g.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -30982,7 +31014,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -30995,7 +31027,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$e.singleSelectShort
+    style: styles$f.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31028,7 +31060,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31094,18 +31126,6 @@ class InteractiveGraphSettings extends React.Component {
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
-    // TODO(aria): Make either a wrapper for standard events to work
-    // with this.change, or make these use some TextInput/NumberInput box
-    this.changeRulerLabel = e => {
-      this.change({
-        rulerLabel: e.target.value
-      });
-    };
-    this.changeRulerTicks = e => {
-      this.change({
-        rulerTicks: +e.target.value
-      });
-    };
     this.changeBackgroundUrl = e => {
       var _this$bgUrlRef$curren;
       // Only continue on blur or "enter"
@@ -31444,10 +31464,10 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$d.resetSpaceTop
+      style: styles$e.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$d.backgroundUrlInput),
+      className: css(styles$e.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31461,84 +31481,19 @@ 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$d.rulerSection
+      style: styles$e.protractorSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$d.checkboxRow
+      style: styles$e.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
-      label: "Show ruler",
-      showRuler: this.props.showRuler,
-      onChange: this.change,
-      style: styles$d.resetSpaceTop
-    }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$d.resetSpaceTop
-    })), (this.props.showRuler || this.props.showProtractor) && /*#__PURE__*/React.createElement(Banner, {
+      style: styles$e.resetSpaceTop
+    })), this.props.showProtractor && /*#__PURE__*/React.createElement(Banner, {
       layout: "floating",
-      text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
+      text: "The protractor is not accessible. Please consider an alternate approach.",
       kind: "warning"
-    }), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
-      style: styles$d.spaceTop
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Ruler label:",
-      style: styles$d.resetSpaceTop
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      id: "ruler-label-select",
-      selectedValue: this.props.rulerLabel,
-      onChange: newValue => {
-        this.change({
-          rulerLabel: newValue
-        });
-      },
-      placeholder: "None",
-      style: styles$d.singleSelectShort
-    }, /*#__PURE__*/React.createElement(OptionItem, {
-      value: "",
-      label: "None",
-      horizontalRule: "full-width"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "mm",
-      label: "Milimeters"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "cm",
-      label: "Centimeters"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "m",
-      label: "Meters"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "km",
-      label: "Kilometers",
-      horizontalRule: "full-width"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "in",
-      label: "Inches"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "ft",
-      label: "Feet"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "yd",
-      label: "Yards"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "mi",
-      label: "Miles"
-    }))), /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Ruler ticks:"
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      id: "ruler-ticks-select",
-      selectedValue: `${this.props.rulerTicks}`,
-      onChange: newValue => {
-        this.change({
-          rulerTicks: newValue
-        });
-      },
-      placeholder: "10",
-      style: styles$d.singleSelectShort
-    }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
-      key: value,
-      value: `${value}`,
-      label: `${value}`
-    }))))))));
+    }))));
   }
 }
 InteractiveGraphSettings.defaultProps = {
@@ -31552,23 +31507,12 @@ InteractiveGraphSettings.defaultProps = {
   backgroundImage: defaultBackgroundImage$1,
   markings: "graph",
   showProtractor: false,
-  showRuler: false,
-  showTooltips: false,
-  rulerLabel: "",
-  rulerTicks: 10
+  showTooltips: false
 };
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
-  spaceTop: {
-    marginTop: spacing.xSmall_8
-  },
-  singleSelectShort: {
-    // Non-standard spacing, but it's the smallest we can go
-    // without running into styling issues with the dropdown.
-    height: 26
-  },
   backgroundUrlInput: {
     border: `1px solid ${color.offBlack32}`,
     borderRadius: spacing.xxxSmall_4,
@@ -31580,7 +31524,7 @@ const styles$d = StyleSheet.create({
     justifyContent: "space-between",
     marginBottom: spacing.xSmall_8
   },
-  rulerSection: {
+  protractorSection: {
     marginTop: spacing.xSmall_8,
     borderTop: `1px solid ${color.offBlack16}`,
     paddingTop: spacing.xSmall_8,
@@ -31602,13 +31546,13 @@ const SegmentCountSelector = ({
     const num = +newValue;
     onChange(num);
   },
-  style: styles$c.singleSelectShort
+  style: styles$d.singleSelectShort
 }, _.range(1, 7).map(n => /*#__PURE__*/React.createElement(OptionItem, {
   key: n,
   value: `${n}`,
   label: `${n} segment${n > 1 ? "s" : ""}`
 })));
-const styles$c = StyleSheet.create({
+const styles$d = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31616,77 +31560,142 @@ const styles$c = StyleSheet.create({
   }
 });
 
-const StartCoordSettingsInner = props => {
+const StartCoordsLine = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords[0],
+    labels: ["x", "y"],
+    onChange: value => onChange([value, startCoords[1]])
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords[1],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], value])
+  })));
+};
+const styles$c = StyleSheet.create({
+  tile: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8,
+    padding: spacing.small_12,
+    borderRadius: spacing.xSmall_8,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
+const StartCoordsMultiline = props => {
   const {
-    type,
     startCoords,
+    type,
     onChange
   } = props;
+  const graphName = type === "segment" ? "Segment" : "Line";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, startCoords.map((coordPair, i) => /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    key: `segment-${i}-start-coords`,
+    header: /*#__PURE__*/React.createElement(LabelLarge, null, `${graphName} ${i + 1}`),
+    expanded: true
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles$b.nestedTile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: coordPair[0],
+    labels: ["x", "y"],
+    onChange: value => {
+      const newCoords = [...startCoords];
+      newCoords[i] = [value, coordPair[1]];
+      onChange(newCoords);
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$b.nestedTile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: coordPair[1],
+    labels: ["x", "y"],
+    onChange: value => {
+      const newCoords = [...startCoords];
+      newCoords[i] = [coordPair[0], value];
+      onChange(newCoords);
+    }
+  })))));
+};
+const styles$b = StyleSheet.create({
+  nestedTile: {
+    paddingBottom: spacing.small_12,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
 
-  // Check if coords is of type CollinearTuple
+const StartCoordsSettingsInner = props => {
+  const {
+    type,
+    range,
+    step,
+    onChange
+  } = props;
   switch (type) {
+    // Graphs with startCoords of type CollinearTuple
     case "linear":
     case "ray":
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-        style: styles$b.tile
-      }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1"), /*#__PURE__*/React.createElement(CoordinatePairInput, {
-        coord: startCoords[0],
-        onChange: value => onChange([value, startCoords[1]])
-      })), /*#__PURE__*/React.createElement(View, {
-        style: styles$b.tile
-      }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2"), /*#__PURE__*/React.createElement(CoordinatePairInput, {
-        coord: startCoords[1],
-        onChange: value => onChange([startCoords[0], value])
-      })));
+      // Gets the startCoords from props if they're passed in,
+      // otherwise calculates the default startCoords.
+      const linearCoords = getLineCoords(props, range, step);
+      return /*#__PURE__*/React.createElement(StartCoordsLine, {
+        startCoords: linearCoords,
+        onChange: onChange
+      });
+    // Graphs with startCoords of type CollinearTuple[]
+    case "linear-system":
+    case "segment":
+      const multiLineCoords =
+      // Gets the startCoords from props if they're passed in,
+      // otherwise calculates the default startCoords.
+      type === "segment" ? getSegmentCoords(props, range, step) : getLinearSystemCoords(props, range, step);
+      return /*#__PURE__*/React.createElement(StartCoordsMultiline, {
+        type: type,
+        startCoords: multiLineCoords,
+        onChange: onChange
+      });
     default:
       return null;
   }
 };
-const StartCoordSettings = props => {
-  var _props$startCoords;
+const StartCoordsSettings = props => {
   const {
-    type,
     range,
     step,
     onChange
   } = props;
   const [isOpen, setIsOpen] = React.useState(true);
-  if (type !== "linear" && type !== "ray") {
-    return null;
-  }
-  const defaultStartCoords = getLineCoords({
-    type: type
-  }, range, step);
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles$b.container
-  }, /*#__PURE__*/React.createElement(Heading, {
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Heading, {
     isCollapsible: true,
     title: "Start coordinates",
     isOpen: isOpen,
     onToggle: () => setIsOpen(!isOpen)
-  }), isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartCoordSettingsInner, {
-    type: type,
-    startCoords: (_props$startCoords = props.startCoords) != null ? _props$startCoords : defaultStartCoords,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(Strut, {
+  }), isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartCoordsSettingsInner, props), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(Button, {
     startIcon: arrowCounterClockwise,
     kind: "tertiary",
     size: "small",
     onClick: () => {
-      onChange(defaultStartCoords);
+      onChange(getDefaultGraphStartCoords(props, range, step));
     }
-  }, "Use default start coords")));
+  }, "Use default start coordinates")));
 };
-const styles$b = StyleSheet.create({
-  tile: {
-    backgroundColor: color.fadedBlue8,
-    marginTop: spacing.xSmall_8,
-    padding: spacing.small_12,
-    borderRadius: spacing.xSmall_8
-  }
-});
 
 const {
   InfoTip: InfoTip$b
@@ -31736,8 +31745,8 @@ class InteractiveGraphEditor extends React.Component {
       });
     };
     this.changeStartCoords = coords => {
-      var _this$props$graph, _this$props$graph2;
-      if (((_this$props$graph = this.props.graph) == null ? void 0 : _this$props$graph.type) !== "linear" && ((_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) !== "ray") {
+      var _this$props$graph;
+      if (!((_this$props$graph = this.props.graph) != null && _this$props$graph.type)) {
         return;
       }
       const graph = _extends({}, this.props.graph, {
@@ -31765,7 +31774,7 @@ class InteractiveGraphEditor extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph3, _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$graph6, _this$props$graph7, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3, _this$props$apiOption4;
+    var _this$props$graph$typ, _this$props$graph2, _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$graph5, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3, _this$props$apiOption4;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -31787,10 +31796,7 @@ class InteractiveGraphEditor extends React.Component {
         backgroundImage: this.props.backgroundImage,
         markings: this.props.markings,
         showProtractor: this.props.showProtractor,
-        showRuler: this.props.showRuler,
         showTooltips: this.props.showTooltips,
-        rulerLabel: this.props.rulerLabel,
-        rulerTicks: this.props.rulerTicks,
         lockedFigures: this.props.lockedFigures,
         trackInteraction: function () {},
         onChange: newProps => {
@@ -31832,7 +31838,7 @@ class InteractiveGraphEditor extends React.Component {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
-      graphType: (_this$props$graph$typ = (_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
+      graphType: (_this$props$graph$typ = (_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
       onChange: type => {
         this.props.onChange({
           graph: {
@@ -31920,8 +31926,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
       onChange: () => {
-        var _this$props$graph4;
-        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon") {
+        var _this$props$graph3;
+        if (((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showAngles: !this.props.correct.showAngles
@@ -31940,8 +31946,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
       onChange: () => {
-        var _this$props$graph5;
-        if (((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "polygon") {
+        var _this$props$graph4;
+        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showSides: !this.props.correct.showSides
@@ -31969,7 +31975,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), (((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) === "linear" || ((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "ray") && ((_this$props$apiOption = this.props.apiOptions.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["start-coords-ui"]) && /*#__PURE__*/React.createElement(StartCoordSettings, _extends({}, this.props.graph, {
+    })), ((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) && ((_this$props$apiOption = this.props.apiOptions.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["start-coords-ui"]) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords
@@ -31984,10 +31990,7 @@ class InteractiveGraphEditor extends React.Component {
       backgroundImage: this.props.backgroundImage,
       markings: this.props.markings,
       showProtractor: this.props.showProtractor,
-      showRuler: this.props.showRuler,
       showTooltips: this.props.showTooltips,
-      rulerLabel: this.props.rulerLabel,
-      rulerTicks: this.props.rulerTicks,
       onChange: this.props.onChange
     }), this.props.correct.type === "polygon" && /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Student answer must"
@@ -32040,24 +32043,24 @@ class InteractiveGraphEditor extends React.Component {
   // is copied from the question editor and pasted into the hint editor
   // (double brackets in the markdown).
   serialize() {
-    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep", "lockedFigures");
+    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
     if (graph) {
-      var _this$props$graph8;
+      var _this$props$graph6;
       // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
       const correct = graph && graph.getUserInput();
       _.extend(json, {
         graph: {
           type: correct.type,
-          startCoords: (_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.startCoords
+          startCoords: (_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.startCoords
         },
         correct: correct
       });
       _.each(["allowReflexAngles", "angleOffsetDeg", "numPoints", "numSides", "numSegments", "showAngles", "showSides", "snapTo", "snapDegrees"], function (key) {
         if (_.has(correct, key)) {
-          // @ts-expect-error - TS2339 - Property 'graph' does not exist on type 'Pick<any, "step" | "range" | "backgroundImage" | "snapStep" | "labels" | "showTooltips" | "markings" | "gridStep" | "showProtractor" | "showRuler" | "rulerLabel" | "rulerTicks">'.
+          // @ts-expect-error - TS2339 - Property 'graph' does not exist on type 'Pick<any, "step" | "range" | "backgroundImage" | "snapStep" | "labels" | "showTooltips" | "markings" | "gridStep" | "showProtractor">'.
           json.graph[key] = correct[key];
         }
       });
@@ -33757,7 +33760,7 @@ MatrixEditor.defaultProps = {
 
 const {
   InfoTip: InfoTip$9,
-  NumberInput: NumberInput$8,
+  NumberInput: NumberInput$7,
   PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = components;
@@ -33817,14 +33820,14 @@ class MeasurerEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
       className: "perseus-widget-left-col"
-    }, "Pixels from top:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    }, "Pixels from top:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       placeholder: 0,
       onChange: this._changeTop,
       value: image.top,
       useArrowKeys: true
     })), /*#__PURE__*/React.createElement("label", {
       className: "perseus-widget-right-col"
-    }, "Pixels from left:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    }, "Pixels from left:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       placeholder: 0,
       onChange: this._changeLeft,
       value: image.left,
@@ -33870,14 +33873,14 @@ class MeasurerEditor extends React.Component {
         key: n,
         value: n
       }, n);
-    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       placeholder: 40
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("rulerPixels"),
       value: this.props.rulerPixels,
       useArrowKeys: true
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       placeholder: 10
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -33914,7 +33917,7 @@ MeasurerEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$7,
+  NumberInput: NumberInput$6,
   TextInput: TextInput$4
 } = components;
 class MoleculeWidgetEditor extends React.Component {
@@ -33943,7 +33946,7 @@ class MoleculeWidgetEditor extends React.Component {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$4, {
       onChange: this.updateMolecule,
       value: this.props.smiles
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$7, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$6, {
       onChange: this.updateRotation,
       value: this.props.rotationAngle
     }))));
@@ -33959,7 +33962,7 @@ MoleculeWidgetEditor.widgetName = "molecule-renderer";
 const {
   ButtonGroup: ButtonGroup$1,
   InfoTip: InfoTip$8,
-  NumberInput: NumberInput$6,
+  NumberInput: NumberInput$5,
   PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = components;
@@ -34110,7 +34113,7 @@ class NumberLineEditor extends React.Component {
     }, "\u2264"), /*#__PURE__*/React.createElement("option", {
       value: "ge",
       "aria-label": "Greater than or equal"
-    }, "\u2265")), " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    }, "\u2265")), " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       value: this.props.correctX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -34122,7 +34125,7 @@ class NumberLineEditor extends React.Component {
       useArrowKeys: true
     }), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "This is the correct answer. The answer is validated (as right or wrong) by using only the end position of the point and the relation (=, <, >, \u2264, \u2265)."))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, this.props.static ? /*#__PURE__*/React.createElement("label", null, "Range:") : /*#__PURE__*/React.createElement("label", null, "Position:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    }, this.props.static ? /*#__PURE__*/React.createElement("label", null, "Range:") : /*#__PURE__*/React.createElement("label", null, "Position:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       value: this.props.initialX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -34142,7 +34145,7 @@ class NumberLineEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Labels:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    }, "Labels:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       value: labelRange[0],
       placeholder: range[0],
       format: this.props.labelStyle,
@@ -34151,7 +34154,7 @@ class NumberLineEditor extends React.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 0),
       useArrowKeys: true
-    }), /*#__PURE__*/React.createElement("span", null, " & "), /*#__PURE__*/React.createElement(NumberInput$6, {
+    }), /*#__PURE__*/React.createElement("span", null, " & "), /*#__PURE__*/React.createElement(NumberInput$5, {
       value: labelRange[1],
       placeholder: range[1],
       format: this.props.labelStyle,
@@ -34189,7 +34192,7 @@ class NumberLineEditor extends React.Component {
       onChange: this.props.onChange
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -34198,7 +34201,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -34207,7 +34210,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       value: this.props.tickStep || null,
       format: this.props.labelStyle,
       onChange: this.onTickStepChange,
@@ -34218,7 +34221,7 @@ class NumberLineEditor extends React.Component {
       useArrowKeys: true
     })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks; you can either set the number of divisions (2 divisions would split the entire range in two halves), or the tick step (the distance between ticks) and the other value will be updated accordingly.", " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " There is no check to see if labels coordinate with the tick marks, which may be confusing for users if the blue labels and black ticks are off-step.")))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    }, /*#__PURE__*/React.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       value: snapDivisions,
       checkValidity: val => val > 0,
       format: this.props.labelStyle
@@ -34266,9 +34269,9 @@ NumberLineEditor.defaultProps = {
 const {
   ButtonGroup,
   InfoTip: InfoTip$7,
-  InlineIcon: InlineIcon$2,
+  InlineIcon: InlineIcon$1,
   MultiButtonGroup,
-  NumberInput: NumberInput$5,
+  NumberInput: NumberInput$4,
   PropCheckBox: PropCheckBox$3,
   TextInput: TextInput$3
 } = components;
@@ -34450,7 +34453,7 @@ class NumericInputEditor extends React.Component {
     })));
     const maxError = i => /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Max error", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    }, /*#__PURE__*/React.createElement("label", null, "Max error", " ", /*#__PURE__*/React.createElement(NumberInput$4, {
       className: "max-error",
       value: answers[i]["maxError"],
       onChange: this.updateAnswer(i, "maxError"),
@@ -34525,7 +34528,7 @@ class NumericInputEditor extends React.Component {
         key: i
       }, /*#__PURE__*/React.createElement("div", {
         className: "input-answer-editor-value-container" + (answer.maxError ? " with-max-error" : "")
-      }, /*#__PURE__*/React.createElement(NumberInput$5, {
+      }, /*#__PURE__*/React.createElement(NumberInput$4, {
         value: answer.value,
         className: "numeric-input-value",
         placeholder: "answer",
@@ -34572,7 +34575,7 @@ class NumericInputEditor extends React.Component {
         className: "max-error-container"
       }, /*#__PURE__*/React.createElement("div", {
         className: "max-error-plusmn"
-      }, "\xB1"), /*#__PURE__*/React.createElement(NumberInput$5, {
+      }, "\xB1"), /*#__PURE__*/React.createElement(NumberInput$4, {
         placeholder: 0,
         value: answers[i]["maxError"],
         format: _.last(answer.answerForms || []),
@@ -34600,7 +34603,7 @@ class NumericInputEditor extends React.Component {
           this.onTrashAnswer(i);
         },
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer)
-      }, /*#__PURE__*/React.createElement(InlineIcon$2, iconTrash$1)), /*#__PURE__*/React.createElement("a", {
+      }, /*#__PURE__*/React.createElement(InlineIcon$1, iconTrash$1)), /*#__PURE__*/React.createElement("a", {
         href: "#",
         className: "options-toggle",
         "aria-label": "Toggle options",
@@ -34611,7 +34614,7 @@ class NumericInputEditor extends React.Component {
           this.onToggleOptions(i);
         },
         onKeyDown: e => this.onSpace(e, this.onToggleOptions)
-      }, /*#__PURE__*/React.createElement(InlineIcon$2, iconGear))), /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(InlineIcon$1, iconGear))), /*#__PURE__*/React.createElement("div", {
         className: "input-answer-editor-message"
       }, editor), this.state.showOptions[i] && /*#__PURE__*/React.createElement("div", {
         className: "options-container"
@@ -34834,7 +34837,7 @@ PassageEditor.defaultProps = {
 
 const {
   InfoTip: InfoTip$4,
-  NumberInput: NumberInput$4,
+  NumberInput: NumberInput$3,
   TextInput: TextInput$2
 } = components;
 class PassageRefEditor extends React.Component {
@@ -34848,12 +34851,12 @@ class PassageRefEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Passage Number: ", /*#__PURE__*/React.createElement(NumberInput$4, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Passage Number: ", /*#__PURE__*/React.createElement(NumberInput$3, {
       value: this.props.passageNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("passageNumber")
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Reference Number: ", /*#__PURE__*/React.createElement(NumberInput$4, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Reference Number: ", /*#__PURE__*/React.createElement(NumberInput$3, {
       value: this.props.referenceNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -34912,7 +34915,7 @@ PassageRefTargetEditor.defaultProps = {
 
 const {
   InfoTip: InfoTip$3,
-  NumberInput: NumberInput$3,
+  NumberInput: NumberInput$2,
   RangeInput,
   TextListEditor: TextListEditor$1
 } = components;
@@ -35141,7 +35144,7 @@ class PlotterEditor extends React.Component {
       className: "set-from-scale-box"
     }, /*#__PURE__*/React.createElement("span", {
       className: "categories-title"
-    }, "Set Categories From Scale"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React.createElement(NumberInput$3, {
+    }, "Set Categories From Scale"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React.createElement(NumberInput$2, {
       placeholder: 1,
       useArrowKeys: true,
       value: this.state.tickStep,
@@ -35153,7 +35156,7 @@ class PlotterEditor extends React.Component {
       onChange: this.handleChangeRange
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       onClick: this.setCategoriesFromScale
-    }, "Set Categories", " "))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React.createElement(NumberInput$3, {
+    }, "Set Categories", " "))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React.createElement(NumberInput$2, {
       useArrowKeys: true,
       value: this.props.labelInterval,
       onChange: this.changeLabelInterval
@@ -35223,7 +35226,7 @@ PlotterEditor.defaultProps = _extends({}, editorDefaults, {
  * This editor is for embedding Khan Academy Python programs.
  */
 const {
-  NumberInput: NumberInput$2,
+  NumberInput: NumberInput$1,
   TextInput: TextInput$1
 } = components;
 function validateOptions(height, programID) {
@@ -35262,7 +35265,7 @@ class PythonProgramEditor extends React.Component {
       value: this.props.programID,
       onChange: this.change("programID"),
       placeholder: "123"
-    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("label", null, "Height:", " ", /*#__PURE__*/React.createElement(NumberInput$2, {
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("label", null, "Height:", " ", /*#__PURE__*/React.createElement(NumberInput$1, {
       value: this.props.height,
       onChange: this.change("height"),
       placeholder: "400"
@@ -35276,7 +35279,7 @@ PythonProgramEditor.defaultProps = {
 };
 
 const {
-  InlineIcon: InlineIcon$1,
+  InlineIcon,
   PropCheckBox: PropCheckBox$1
 } = components;
 const {
@@ -35320,7 +35323,7 @@ class ChoiceEditor extends React.Component {
         this.props.onDelete();
       },
       title: "Remove this choice"
-    }, /*#__PURE__*/React.createElement(InlineIcon$1, iconTrash));
+    }, /*#__PURE__*/React.createElement(InlineIcon, iconTrash));
     return /*#__PURE__*/React.createElement("div", {
       className: "choice-clue-editors"
     }, /*#__PURE__*/React.createElement("div", {
@@ -35524,13 +35527,13 @@ class RadioEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, false)
-    }, /*#__PURE__*/React.createElement(InlineIcon$1, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React.createElement("a", {
+    }, /*#__PURE__*/React.createElement(InlineIcon, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React.createElement("a", {
       className: "simple-button",
       href: "#"
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, true)
-    }, /*#__PURE__*/React.createElement(InlineIcon$1, iconPlus), " None of the above", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon, iconPlus), " None of the above", " ")));
   }
 }
 RadioEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -35681,7 +35684,7 @@ SorterEditor.defaultProps = {
 /* eslint-disable react/sort-comp */
 const {
   InfoTip: InfoTip$1,
-  NumberInput: NumberInput$1
+  NumberInput
 } = components;
 const Table = TableWidget.widget;
 class TableEditor extends React.Component {
@@ -35746,7 +35749,7 @@ class TableEditor extends React.Component {
     });
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React.createElement(NumberInput$1, {
+    }, /*#__PURE__*/React.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React.createElement(NumberInput, {
       ref: this.numberOfColumns,
       value: this.props.columns,
       onChange: val => {
@@ -35757,7 +35760,7 @@ class TableEditor extends React.Component {
       useArrowKeys: true
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Number of rows:", " ", /*#__PURE__*/React.createElement(NumberInput$1
+    }, /*#__PURE__*/React.createElement("label", null, "Number of rows:", " ", /*#__PURE__*/React.createElement(NumberInput
     // eslint-disable-next-line react/no-string-refs
     , {
       ref: "numberOfRows",
@@ -35792,234 +35795,6 @@ TableEditor.defaultProps = function () {
   };
 }();
 
-const {
-  InlineIcon,
-  NumberInput
-} = components;
-const {
-  iconOk,
-  iconRemove
-} = icons;
-
-// TODO(joel): teach KAS how to accept an answer only if it's expressed in
-// terms of a certain type.
-// TODO(joel): Allow sigfigs within a range rather than an exact expected
-// value?
-
-const ALL = "all";
-const SOME = "some";
-const MAX_SIGFIGS = 10;
-const sigfigPrint = function sigfigPrint(num, sigfigs) {
-  return displaySigFigs(num, sigfigs, -MAX_SIGFIGS, false);
-};
-
-// Extract the primitive units from a unit expression. This first simplifies
-// `expr` to a `Mul` like "5 kg m / s^2" then removes the first term.
-const primUnits = function primUnits(expr) {
-  return expr.simplify().asMul().partition()[1].flatten().simplify();
-};
-// Show the name of a unit and whether it's recognized by KAS.
-//
-// In the future I plan for this to show an example of a thing that would be
-// accepted in that unit.
-class UnitExample extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._checkValidity = ({
-      name,
-      original,
-      sigfigs
-    }) => {
-      const parseResult = KAS.unitParse(name);
-      let solvedExample = "";
-
-      // A unit is valid if it parses and is equivalent to the original.
-      let valid = true;
-      if (parseResult.parsed && original) {
-        const x = new KAS.Var("x");
-        const {
-          unit
-        } = parseResult;
-        const equality = new KAS.Eq(original, "=", new KAS.Mul(x, unit));
-        try {
-          const answer = equality.solveLinearEquationForVariable(x);
-
-          // The third parameter is the least significant decimal place.
-          // I.e. the index of the last place you care about
-          // (543210.(-1)(-2)(-3) etc). We use -10 because that should
-          // always be safe since we only care up to maximum 10 decimal
-          // places.
-          solvedExample = sigfigPrint(answer.eval(), sigfigs);
-          valid = KAS.compare(primUnits(original), primUnits(unit)).equal;
-        } catch (e) {
-          valid = false;
-        }
-      } else {
-        valid = false;
-      }
-      this.setState({
-        valid,
-        solvedExample
-      });
-    };
-  }
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount() {
-    // @ts-expect-error - TS2345 - Argument of type 'Readonly<any> & Readonly<{ children?: ReactNode; }>' is not assignable to parameter of type '{ name: any; original: any; sigfigs: any; }'.
-    this._checkValidity(this.props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this._checkValidity(nextProps);
-  }
-  render() {
-    let icon;
-    if (this.state.valid) {
-      icon = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-        className: "unit-example-okay"
-      }, /*#__PURE__*/React.createElement(InlineIcon, iconOk)), this.state.solvedExample);
-    } else {
-      icon = /*#__PURE__*/React.createElement("span", {
-        className: "unit-example-not-okay"
-      }, /*#__PURE__*/React.createElement(InlineIcon, iconRemove));
-    }
-    return /*#__PURE__*/React.createElement("div", null, icon, " ", this.props.name);
-  }
-}
-class UnitInputEditor extends React.Component {
-  constructor(_props) {
-    super(_props);
-    this.parsed = void 0;
-    this.groupId = void 0;
-    this.original = void 0;
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.handleAcceptingUnitsChange = event => {
-      const acceptingUnits = event.target.value.split(",").map(str => str.trim()).filter(str => str !== "");
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        acceptingUnits
-      });
-    };
-    this.handleSigfigChange = sigfigs => {
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        sigfigs
-      });
-    };
-    this._checkSigfigValidity = sigfigs => {
-      return sigfigs > 0 && sigfigs <= MAX_SIGFIGS;
-    };
-    this._setAccepting = val => {
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        accepting: val
-      });
-    };
-    this._doOriginal = props => {
-      const tryParse = KAS.unitParse(props.value);
-      this.parsed = false;
-
-      // Only update this state if the unit parsed *and* it has a magnitude
-      // attached to it. KAS can also parse units without magnitudes ("1.2
-      // g" vs "g").
-      if (tryParse.parsed && tryParse.type === "unitMagnitude") {
-        this.original = tryParse.expr;
-        this.parsed = true;
-      }
-    };
-    this.onChange = event => {
-      this.props.onChange({
-        value: event.target.value
-      });
-    };
-    this.getSaveWarnings = () => {
-      const {
-        value,
-        accepting,
-        acceptingUnits
-      } = this.props;
-      const warnings = [];
-      const tryParse = KAS.unitParse(value);
-      if (!tryParse.parsed) {
-        warnings.push("Answer did not parse");
-      }
-      if (accepting === SOME && acceptingUnits.length === 0) {
-        warnings.push("There are no accepted units");
-      }
-      return warnings;
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
-    };
-    this.groupId = _.uniqueId("accepting");
-    this._doOriginal(_props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this._doOriginal(nextProps);
-  }
-  render() {
-    const {
-      acceptingUnits = [],
-      accepting
-    } = this.props;
-    let acceptingElem = null;
-    if (accepting === SOME) {
-      const unitsArr = acceptingUnits.map((name, i) => /*#__PURE__*/React.createElement(UnitExample, {
-        name: name,
-        original: this.original || null,
-        sigfigs: this.props.sigfigs,
-        key: i
-      }));
-
-      // @ts-expect-error - TS2322 - Type 'Element' is not assignable to type 'null'.
-      acceptingElem = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-        type: "text",
-        defaultValue: acceptingUnits.join(", "),
-        onChange: this.handleAcceptingUnitsChange
-      }), " ", "(comma-separated)", unitsArr);
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "unit-editor"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-      value: this.props.value,
-      className: "unit-editor-canonical",
-      onChange: this.onChange
-    }), " ", this.parsed ? /*#__PURE__*/React.createElement("span", {
-      className: "unit-example-okay"
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconOk)) : /*#__PURE__*/React.createElement("span", {
-      className: "unit-example-not-okay"
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconRemove))), /*#__PURE__*/React.createElement("div", null, "Significant Figures:", " ", /*#__PURE__*/React.createElement(NumberInput, {
-      value: this.props.sigfigs,
-      onChange: this.handleSigfigChange,
-      checkValidity: this._checkSigfigValidity,
-      useArrowKeys: true
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-      type: "radio",
-      name: this.groupId,
-      onChange: () => this._setAccepting(ALL),
-      checked: this.props.accepting === ALL
-    }), " Any equivalent unit "), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-      type: "radio",
-      name: this.groupId,
-      onChange: () => this._setAccepting(SOME),
-      checked: this.props.accepting === SOME
-    }), " Only these units ")), acceptingElem);
-  }
-}
-UnitInputEditor.propTypes = _extends({}, Changeable.propTypes, {
-  value: PropTypes.string,
-  acceptingUnits: PropTypes.arrayOf(PropTypes.string),
-  accepting: PropTypes.oneOf([ALL, SOME]),
-  sigfigs: PropTypes.number
-});
-UnitInputEditor.widgetName = "unit-input";
-UnitInputEditor.defaultProps = {
-  value: "5x10^5 kg m / s^2",
-  accepting: ALL,
-  sigfigs: 3
-};
-
 const {
   InfoTip
 } = components;
@@ -36073,7 +35848,7 @@ VideoEditor.defaultProps = {
   location: ""
 };
 
-var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, SorterEditor, TableEditor, UnitInputEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
+var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, SorterEditor, TableEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class TextInput extends React.Component {