@khanacademy/perseus-editor 9.0.0 → 11.0.0

package/dist/index.js

@@ -83,7 +83,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "9.0.0";
+const libVersion = "11.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -260,7 +260,7 @@ const JsonEditor = createReactClass__default["default"]({
 });
 
 const {
-  InlineIcon: InlineIcon$b
+  InlineIcon: InlineIcon$a
 } = perseus.components;
 class SectionControlButton extends React__namespace.Component {
   render() {
@@ -278,13 +278,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$H.button
+      style: styles$I.button
     }, _ref => {
-      return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
+      return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$H = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20607,7 +20607,7 @@ const DragTarget = createReactClass__default["default"]({
 });
 
 const {
-  InlineIcon: InlineIcon$a
+  InlineIcon: InlineIcon$9
 } = perseus.components;
 const {
   iconChevronDown: iconChevronDown$1,
@@ -20717,7 +20717,7 @@ class WidgetEditor extends React__namespace.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement("input", {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement("input", {
       type: "button"
       // @ts-expect-error - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
       ,
@@ -20789,13 +20789,13 @@ class WidgetSelect extends React__namespace.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$G.expanded : styles$G.collapsed;
+  const iconStyle = props.isExpanded ? styles$H.expanded : styles$H.collapsed;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$G = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20825,16 +20825,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$F.errorContainer
+      style: styles$G.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$F.title,
+      style: styles$G.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$F.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$F.error,
+      style: styles$G.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20843,7 +20843,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$F = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -21826,7 +21826,7 @@ class IframeContentRenderer extends React__namespace.Component {
 
 const {
   HUD: HUD$1,
-  InlineIcon: InlineIcon$9
+  InlineIcon: InlineIcon$8
 } = perseus.components;
 const {
   iconCircleArrowDown: iconCircleArrowDown$1,
@@ -21981,7 +21981,7 @@ class ArticleEditor extends React__namespace.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconPlus$4), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React__namespace.createElement(HUD$1, {
@@ -22134,7 +22134,7 @@ class ArticleEditor extends React__namespace.Component {
  */
 const {
   ButtonGroup: ButtonGroup$5,
-  InlineIcon: InlineIcon$8
+  InlineIcon: InlineIcon$7
 } = perseus.components;
 const {
   devices
@@ -22145,9 +22145,9 @@ const {
   iconTablet
 } = perseus.icons;
 const ViewportResizer = props => {
-  const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconMobilePhone), " Phone");
-  const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconTablet), " Tablet");
-  const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconDesktop), " Desktop");
+  const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconMobilePhone), " Phone");
+  const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTablet), " Tablet");
+  const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconDesktop), " Desktop");
 
   // TODO(david): Allow input of custom viewport sizes.
   return /*#__PURE__*/React__namespace.createElement("span", {
@@ -23481,7 +23481,7 @@ class StructuredItemDiff extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$m,
-  InlineIcon: InlineIcon$7
+  InlineIcon: InlineIcon$6
 } = perseus.components;
 const {
   iconCircleArrowDown,
@@ -23550,11 +23550,11 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: this.props.isLast ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, 1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowDown)), " ", /*#__PURE__*/React__namespace.createElement("button", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconCircleArrowDown)), " ", /*#__PURE__*/React__namespace.createElement("button", {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23564,7 +23564,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$5), "Remove this hint", " ")));
   }
 }
 /* A single hint-row containing a hint editor and preview */
@@ -23783,7 +23783,7 @@ class CombinedHintsEditor extends React__namespace.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconPlus$3), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
@@ -24593,12 +24593,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$E.baseButton, color === "green" && styles$E.green, color === "orange" && styles$E.orange),
+      className: aphrodite.css(styles$F.baseButton, color === "green" && styles$F.green, color === "orange" && styles$F.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$E = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24643,7 +24643,7 @@ const styles$E = aphrodite.StyleSheet.create({
 });
 
 const {
-  InlineIcon: InlineIcon$6
+  InlineIcon: InlineIcon$5
 } = perseus.components;
 const {
   iconChevronDown,
@@ -24811,23 +24811,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.containerHeader)
+    className: aphrodite.css(styles$E.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$E.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.container)
+    className: aphrodite.css(styles$E.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$D.row, styles$D.rowHeading)
+    className: aphrodite.css(styles$E.row, styles$E.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$E.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$D.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$E.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$E.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$E.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24840,11 +24840,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.container)
+    className: aphrodite.css(styles$E.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft, styles$D.containerHeader)
+    className: aphrodite.css(styles$E.columnLeft, styles$E.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$E.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24858,28 +24858,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.containerHeader)
+    className: aphrodite.css(styles$E.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$E.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.containerHeader, styles$D.previewCollectionHeader)
+    className: aphrodite.css(styles$E.containerHeader, styles$E.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$D.containerTitle)
+    className: aphrodite.css(styles$E.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.container)
+    className: aphrodite.css(styles$E.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$D.row)
+    className: aphrodite.css(styles$E.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$E.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$E.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$D.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$E.contentIndent)
   }, children));
 };
 
@@ -24999,11 +24999,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.row)
+    className: aphrodite.css(styles$E.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$E.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$E.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25011,9 +25011,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$E.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$E.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25029,13 +25029,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.row)
+    className: aphrodite.css(styles$E.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$E.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$E.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$D.hintEditor),
+    className: aphrodite.css(styles$E.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25050,9 +25050,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnRight)
+    className: aphrodite.css(styles$E.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$D.sticky)
+    className: aphrodite.css(sticky && styles$E.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25069,9 +25069,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.columnLeft)
+    className: aphrodite.css(styles$E.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$D.tagsEditor)
+    className: aphrodite.css(styles$E.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25102,31 +25102,31 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$D.control)
+      className: aphrodite.css(styles$E.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$D.verticalFlip)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$E.verticalFlip)
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$D.control)
+      className: aphrodite.css(styles$E.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$D.control)
+      className: aphrodite.css(styles$E.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$D.arrayElement, !elementIsLeaf && styles$D.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$E.arrayElement, !elementIsLeaf && styles$E.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25152,7 +25152,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__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$D.objectElement)
+    className: aphrodite.css(styles$E.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25322,7 +25322,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$D = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25424,116 +25424,6 @@ const styles$D = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/no-unsafe */
-const StatefulArticleEditor = createReactClass__default["default"]({
-  displayName: "StatefulArticleEditor",
-  getInitialState: function () {
-    return ___default["default"]({}).extend(this.props, {
-      mode: "edit",
-      onChange: this.handleChange,
-      ref: "editor",
-      screen: "phone"
-    });
-  },
-  componentDidMount: function () {
-    // TODO(scottgrant): This is a hack to remove the deprecated call to
-    // this.isMounted() but is still considered an anti-pattern.
-    this._isMounted = true;
-  },
-  // getInitialState isn't called if the react component is re-rendered
-  // in-place on the dom, in which case this is called instead, so we
-  // need to update the state here.
-  // (This component is currently re-rendered by the "Add image" button.)
-  UNSAFE_componentWillReceiveProps: function (nextProps) {
-    // be careful not to overwrite our onChange and ref
-    this.setState(___default["default"](nextProps).omit("onChange", "ref"));
-  },
-  componentWillUnmount: function () {
-    this._isMounted = false;
-  },
-  getSaveWarnings: function () {
-    // eslint-disable-next-line react/no-string-refs
-    return this.refs.editor.getSaveWarnings();
-  },
-  serialize: function () {
-    // eslint-disable-next-line react/no-string-refs
-    return this.refs.editor.serialize();
-  },
-  handleChange: function (newState, cb) {
-    if (this._isMounted) {
-      this.setState(newState, cb);
-    }
-  },
-  scorePreview: function () {
-    // eslint-disable-next-line react/no-string-refs
-    return this.refs.editor.scorePreview();
-  },
-  render: function () {
-    const {
-      mode,
-      screen
-    } = this.state;
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$C.controlBar
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$C.controls
-    }, "Mode:", " ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        mode: "edit"
-      }),
-      style: mode === "edit" ? styles$C.controlSelected : styles$C.control
-    }, "EDIT"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        mode: "preview"
-      }),
-      style: mode === "preview" ? styles$C.controlSelected : styles$C.control
-    }, "PREVIEW"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        mode: "json"
-      }),
-      style: mode === "json" ? styles$C.controlSelected : styles$C.control
-    }, "JSON")), /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$C.controls
-    }, "Screen:", " ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        screen: "phone"
-      }),
-      style: screen === "phone" ? styles$C.controlSelected : styles$C.control
-    }, "PHONE"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        screen: "tablet"
-      }),
-      style: screen === "tablet" ? styles$C.controlSelected : styles$C.control
-    }, "TABLET"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: () => this.setState({
-        screen: "desktop"
-      }),
-      style: screen === "desktop" ? styles$C.controlSelected : styles$C.control
-    }, "DESKTOP"))), /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$C.editor
-    }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
-  }
-});
-const styles$C = {
-  controlBar: {
-    marginBottom: 25,
-    marginTop: 5
-  },
-  controls: {
-    marginRight: 10
-  },
-  controlSelected: {
-    cursor: "default",
-    fontWeight: 700
-  },
-  control: {
-    cursor: "pointer"
-  },
-  editor: {
-    marginTop: -20
-  }
-};
-
 /* eslint-disable react/no-unsafe, react/sort-comp */
 
 /* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
@@ -26003,7 +25893,7 @@ class DeprecatedStandinEditor extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$j,
-  InlineIcon: InlineIcon$5
+  InlineIcon: InlineIcon$4
 } = perseus.components;
 const {
   iconPlus: iconPlus$2,
@@ -26135,14 +26025,14 @@ class DropdownEditor extends React__namespace.Component {
         this, i)
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$3)))));
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconTrash$3)))));
     }, this)), /*#__PURE__*/React__namespace.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React__namespace.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$2), " Add a choice", " ")));
   }
 }
 
@@ -26997,7 +26887,7 @@ class AnswerOption extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InlineIcon: InlineIcon$4,
+  InlineIcon: InlineIcon$3,
   TextInput: TextInput$6
 } = perseus.components;
 const {
@@ -27053,10 +26943,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$B.title)
+      className: aphrodite.css(styles$D.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$B.input)
+      className: aphrodite.css(styles$D.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27078,10 +26968,10 @@ class GradedGroupEditor extends React__namespace.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.hintsTitle)
+      className: aphrodite.css(styles$D.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27100,7 +26990,7 @@ class GradedGroupEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconTrash$2), " Remove this hint")));
   }
   getSaveWarnings = () => {
     return this.editor.current?.getSaveWarnings();
@@ -27113,7 +27003,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$B = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28049,7 +27939,7 @@ class IframeEditor extends React__namespace.Component {
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
   InfoTip: InfoTip$f,
-  InlineIcon: InlineIcon$3,
+  InlineIcon: InlineIcon$2,
   RangeInput: RangeInput$5
 } = perseus.components;
 const defaultBoxSize = 400;
@@ -28175,7 +28065,7 @@ class ImageEditor extends React__namespace.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, perseus.icons.iconTrash))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconTrash))));
   }
   change() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -28484,13 +28374,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$A.outerWrapper
+    style: styles$C.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$A = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -28502,7 +28392,7 @@ const styles$A = aphrodite.StyleSheet.create({
 });
 
 const {
-  NumberInput: NumberInput$e
+  NumberInput: NumberInput$d
 } = perseus.components;
 const {
   getDependencies: getDependencies$8
@@ -28562,7 +28452,7 @@ class FunctionEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28629,7 +28519,7 @@ class LabelEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$d
+  NumberInput: NumberInput$c
 } = perseus.components;
 const {
   getDependencies: getDependencies$6
@@ -28697,7 +28587,7 @@ class LineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28707,7 +28597,7 @@ class LineEditor extends React__namespace.Component {
 
 const {
   ButtonGroup: ButtonGroup$3,
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$b
 } = perseus.components;
 class ConstraintEditor extends React__namespace.Component {
   static defaultProps = {
@@ -28747,7 +28637,7 @@ class ConstraintEditor extends React__namespace.Component {
       onChange: this.change("constraint")
     })), this.props.constraint === "snap" && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
+    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
       value: this.props.snap,
       placeholder: 0,
       onChange: this.change("snap")
@@ -28790,7 +28680,7 @@ class ConstraintEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$b
+  NumberInput: NumberInput$a
 } = perseus.components;
 const {
   getDependencies: getDependencies$5
@@ -28848,13 +28738,13 @@ class MovableLineEditor extends React__namespace.Component {
       onChange: this.change("endY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -28865,7 +28755,7 @@ class MovableLineEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$a
+  NumberInput: NumberInput$9
 } = perseus.components;
 const {
   getDependencies: getDependencies$4
@@ -28913,7 +28803,7 @@ class MovablePointEditor extends React__namespace.Component {
       onChange: this.change("startY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
+    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
       value: this.props.varSubscript,
       placeholder: 0,
       onChange: this.change("varSubscript")
@@ -28922,7 +28812,7 @@ class MovablePointEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$9
+  NumberInput: NumberInput$8
 } = perseus.components;
 const {
   getDependencies: getDependencies$3
@@ -28988,7 +28878,7 @@ class ParametricEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -29560,16 +29450,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$z.label)
+    className: aphrodite.css(styles$B.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$z.row, style]
+    style: [styles$B.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$z.spaceEnd
+    style: styles$B.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$z.spaceStart
+    style: styles$B.spaceStart
   }, label)));
 };
-const styles$z = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29646,11 +29536,11 @@ class Spring extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       "aria-hidden": "true",
-      style: [styles$y.grow, style]
+      style: [styles$A.grow, style]
     });
   }
 }
-const styles$y = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -29686,22 +29576,12 @@ function Heading(_ref) {
     isCollapsible,
     onToggle
   } = _ref;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: wonderBlocksTokens.color.offBlack8,
-      padding: wonderBlocksTokens.spacing.xSmall_8,
-      marginTop: wonderBlocksTokens.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__namespace.createElement(Clickable__default["default"], {
+    style: [styles$z.container, !isCollapsible && styles$z.notClickable],
+    disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
+  }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$z.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29709,8 +29589,31 @@ function Heading(_ref) {
     }
   }, title), isCollapsible && /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
     isExpanded: isOpen
-  }));
+  })));
 }
+const styles$z = aphrodite.StyleSheet.create({
+  container: {
+    marginTop: wonderBlocksTokens.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: wonderBlocksTokens.color.offBlack8,
+    padding: wonderBlocksTokens.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.
@@ -29818,6 +29721,28 @@ function degreeToRadian(degrees) {
 function radianToDegree(radians) {
   return radians / Math.PI * 180;
 }
+function getDefaultGraphStartCoords(graph, range, step) {
+  switch (graph.type) {
+    case "linear":
+    case "ray":
+      return perseus.getLineCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "segment":
+      return perseus.getSegmentCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "linear-system":
+      return perseus.getLinearSystemCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    default:
+      return undefined;
+  }
+}
 
 /**
  * Dropdown for selecting a locked figure to add to an interactive graph.
@@ -29833,17 +29758,17 @@ const LockedFigureSelect = props => {
   } = props;
   const figureTypes = props.showM2Features ? ["point", "line", "vector", "ellipse", "polygon"] : ["point", "line"];
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$x.container
+    style: styles$y.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$x.addElementSelect
+    style: styles$y.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -29874,19 +29799,19 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$x.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$w.textField
+    style: styles$x.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29935,32 +29860,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.row, style]
+    style: [styles$w.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$w.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.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__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$w.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.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 = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29993,14 +29918,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$u.accordionPanel, panelStyle]
+    style: [styles$v.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30031,13 +29956,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$t.colorSwatch, {
+    style: [styles$u.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30056,10 +29981,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$s.row, style]
+    style: [styles$t.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$s.row
+    style: styles$t.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30078,7 +30003,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30094,17 +30019,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$r.container, {
+    style: [styles$s.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$r.innerCircle, {
+    style: [styles$s.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30135,40 +30060,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.container
+    style: styles$r.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$q.deleteButton
+    style: styles$r.deleteButton
   }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$q.iconButton
+    style: styles$r.iconButton
   })));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30215,7 +30140,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$p.row
+      style: styles$q.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(EllipseSwatch, {
@@ -30224,19 +30149,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.row
+    style: styles$q.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$p.spaceUnder,
+    style: styles$q.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.spaceUnder
+    style: styles$q.spaceUnder
   }, /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$p.spaceUnder,
+    style: styles$q.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30248,7 +30173,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$p.row, styles$p.spaceUnder]
+    style: [styles$q.row, styles$q.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30256,7 +30181,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$p.row
+    style: styles$q.row
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30273,7 +30198,7 @@ const LockedEllipseSettings = props => {
     label: option
   }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$p.row
+    style: styles$q.row
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30297,7 +30222,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$p = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30318,7 +30243,7 @@ const LabeledSwitch = props => {
   const ids = wonderBlocksCore.useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$o.row, style]
+    style: [styles$p.row, style]
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: checked,
@@ -30330,7 +30255,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30364,13 +30289,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30380,7 +30305,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$n.spaceUnder,
+    style: styles$o.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30389,12 +30314,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$n.spaceUnder,
+    style: showPoint && styles$o.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$n.spaceUnder
+    style: styles$o.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30405,7 +30330,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
     marginBottom: 0,
@@ -30432,15 +30357,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$m.container
+    style: styles$n.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$m.lineSwatch, {
+    style: [styles$n.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30499,7 +30424,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30508,7 +30433,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$l.row, styles$l.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30529,7 +30454,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$l.row
+    style: styles$m.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30537,7 +30462,7 @@ const LockedLineSettings = props => {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$l.row
+    style: styles$m.row
   }, "style", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30548,7 +30473,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$l.selectMarginOffset
+    style: styles$m.selectMarginOffset
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "solid",
     label: "solid"
@@ -30556,7 +30481,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$l.errorText
+    style: styles$m.errorText
   }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30582,7 +30507,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30627,7 +30552,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$k.row
+      style: styles$l.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30636,7 +30561,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$k.spaceUnder,
+    style: styles$l.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30645,7 +30570,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$k.spaceUnder
+    style: styles$l.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30661,7 +30586,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30679,17 +30604,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$j.container, {
+    style: [styles$k.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$j.innerSquare, {
+    style: [styles$k.innerSquare, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30731,7 +30656,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$i.row
+      style: styles$j.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(PolygonSwatch, {
@@ -30740,7 +30665,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$i.row, styles$i.spaceUnder]
+    style: [styles$j.row, styles$j.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30748,7 +30673,7 @@ const LockedPolygonSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$i.row
+    style: styles$j.row
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30765,7 +30690,7 @@ const LockedPolygonSettings = props => {
     label: option
   }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$i.row, styles$i.spaceUnder]
+    style: [styles$j.row, styles$j.spaceUnder]
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30788,17 +30713,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$i.spaceUnder
+    style: styles$j.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.medium_16
     }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -30826,7 +30751,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$i.icon
+      style: styles$j.icon
     }));
   }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
@@ -30843,7 +30768,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30901,7 +30826,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30909,19 +30834,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$h.errorText
+    style: styles$i.errorText
   }, lengthErrorMessage), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30932,10 +30857,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30950,7 +30875,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   accordionPanel: {
     paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
@@ -31127,7 +31052,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$g.buttonContainer
+    style: styles$h.buttonContainer
   }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     showM2Features: props.showM2Features,
     showM2bFeatures: props.showM2bFeatures,
@@ -31138,10 +31063,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$g.button
+    style: styles$h.button
   }, buttonLabel))));
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31177,7 +31102,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$f.singleSelectShort
+    style: styles$g.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -31188,7 +31113,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31201,7 +31126,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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31234,7 +31159,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31316,10 +31241,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     backgroundImage: defaultBackgroundImage$1,
     markings: "graph",
     showProtractor: false,
-    showRuler: false,
-    showTooltips: false,
-    rulerLabel: "",
-    rulerTicks: 10
+    showTooltips: false
   };
   componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
@@ -31346,19 +31268,6 @@ class InteractiveGraphSettings extends React__namespace.Component {
       return perseus.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
-  changeRulerLabel = e => {
-    this.change({
-      rulerLabel: e.target.value
-    });
-  };
-  changeRulerTicks = e => {
-    this.change({
-      rulerTicks: +e.target.value
-    });
-  };
   changeBackgroundUrl = e => {
     // Only continue on blur or "enter"
     if (e.type === "keypress" && e.key !== "Enter") {
@@ -31679,10 +31588,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$d.resetSpaceTop
+      style: styles$e.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$d.backgroundUrlInput),
+      className: aphrodite.css(styles$e.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31698,98 +31607,25 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$d.rulerSection
+      style: styles$e.protractorSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$d.checkboxRow
+      style: styles$e.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
-      label: "Show ruler",
-      showRuler: this.props.showRuler,
-      onChange: this.change,
-      style: styles$d.resetSpaceTop
-    }), /*#__PURE__*/React__namespace.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__namespace.createElement(Banner__default["default"], {
+      style: styles$e.resetSpaceTop
+    })), this.props.showProtractor && /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
       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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$d.spaceTop
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Ruler label:",
-      style: styles$d.resetSpaceTop
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-      id: "ruler-label-select",
-      selectedValue: this.props.rulerLabel,
-      onChange: newValue => {
-        this.change({
-          rulerLabel: newValue
-        });
-      },
-      placeholder: "None",
-      style: styles$d.singleSelectShort
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "",
-      label: "None",
-      horizontalRule: "full-width"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "mm",
-      label: "Milimeters"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "cm",
-      label: "Centimeters"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "m",
-      label: "Meters"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "km",
-      label: "Kilometers",
-      horizontalRule: "full-width"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "in",
-      label: "Inches"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "ft",
-      label: "Feet"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "yd",
-      label: "Yards"
-    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      value: "mi",
-      label: "Miles"
-    }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Ruler ticks:"
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-      key: value,
-      value: `${value}`,
-      label: `${value}`
-    }))))))));
+    }))));
   }
 }
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
-  spaceTop: {
-    marginTop: wonderBlocksTokens.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 ${wonderBlocksTokens.color.offBlack32}`,
     borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
@@ -31801,7 +31637,7 @@ const styles$d = aphrodite.StyleSheet.create({
     justifyContent: "space-between",
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
-  rulerSection: {
+  protractorSection: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
     borderTop: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
     paddingTop: wonderBlocksTokens.spacing.xSmall_8,
@@ -31825,14 +31661,14 @@ const SegmentCountSelector = _ref => {
       const num = +newValue;
       onChange(num);
     },
-    style: styles$c.singleSelectShort
+    style: styles$d.singleSelectShort
   }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
     label: `${n} segment${n > 1 ? "s" : ""}`
   })));
 };
-const styles$c = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31840,76 +31676,142 @@ const styles$c = aphrodite.StyleSheet.create({
   }
 });
 
-const StartCoordSettingsInner = props => {
+const StartCoordsLine = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords[0],
+    labels: ["x", "y"],
+    onChange: value => onChange([value, startCoords[1]])
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords[1],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], value])
+  })));
+};
+const styles$c = aphrodite.StyleSheet.create({
+  tile: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    padding: wonderBlocksTokens.spacing.small_12,
+    borderRadius: wonderBlocksTokens.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__namespace.createElement(React__namespace.Fragment, null, startCoords.map((coordPair, i) => /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
+    key: `segment-${i}-start-coords`,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${graphName} ${i + 1}`),
+    expanded: true
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$b.nestedTile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: coordPair[0],
+    labels: ["x", "y"],
+    onChange: value => {
+      const newCoords = [...startCoords];
+      newCoords[i] = [value, coordPair[1]];
+      onChange(newCoords);
+    }
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$b.nestedTile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: coordPair[1],
+    labels: ["x", "y"],
+    onChange: value => {
+      const newCoords = [...startCoords];
+      newCoords[i] = [coordPair[0], value];
+      onChange(newCoords);
+    }
+  })))));
+};
+const styles$b = aphrodite.StyleSheet.create({
+  nestedTile: {
+    paddingBottom: wonderBlocksTokens.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: styles$b.tile
-      }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1"), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
-        coord: startCoords[0],
-        onChange: value => onChange([value, startCoords[1]])
-      })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: styles$b.tile
-      }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2"), /*#__PURE__*/React__namespace.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 = perseus.getLineCoords(props, range, step);
+      return /*#__PURE__*/React__namespace.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" ? perseus.getSegmentCoords(props, range, step) : perseus.getLinearSystemCoords(props, range, step);
+      return /*#__PURE__*/React__namespace.createElement(StartCoordsMultiline, {
+        type: type,
+        startCoords: multiLineCoords,
+        onChange: onChange
+      });
     default:
       return null;
   }
 };
-const StartCoordSettings = props => {
+const StartCoordsSettings = props => {
   const {
-    type,
     range,
     step,
     onChange
   } = props;
   const [isOpen, setIsOpen] = React__namespace.useState(true);
-  if (type !== "linear" && type !== "ray") {
-    return null;
-  }
-  const defaultStartCoords = perseus.getLineCoords({
-    type: type
-  }, range, step);
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$b.container
-  }, /*#__PURE__*/React__namespace.createElement(Heading, {
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Heading, {
     isCollapsible: true,
     title: "Start coordinates",
     isOpen: isOpen,
     onToggle: () => setIsOpen(!isOpen)
-  }), isOpen && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(StartCoordSettingsInner, {
-    type: type,
-    startCoords: props.startCoords ?? defaultStartCoords,
-    onChange: onChange
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+  }), isOpen && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(StartCoordsSettingsInner, props), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: arrowCounterClockwise__default["default"],
     kind: "tertiary",
     size: "small",
     onClick: () => {
-      onChange(defaultStartCoords);
+      onChange(getDefaultGraphStartCoords(props, range, step));
     }
-  }, "Use default start coords")));
+  }, "Use default start coordinates")));
 };
-const styles$b = aphrodite.StyleSheet.create({
-  tile: {
-    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
-    marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    padding: wonderBlocksTokens.spacing.small_12,
-    borderRadius: wonderBlocksTokens.spacing.xSmall_8
-  }
-});
 
 const {
   InfoTip: InfoTip$b
@@ -31987,10 +31889,7 @@ class InteractiveGraphEditor extends React__namespace.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 => {
@@ -32177,7 +32076,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), (this.props.graph?.type === "linear" || this.props.graph?.type === "ray") && this.props.apiOptions.flags?.mafs?.["start-coords-ui"] && /*#__PURE__*/React__namespace.createElement(StartCoordSettings, _extends({}, this.props.graph, {
+    })), this.props.graph?.type && this.props.apiOptions.flags?.mafs?.["start-coords-ui"] && /*#__PURE__*/React__namespace.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords
@@ -32192,10 +32091,7 @@ class InteractiveGraphEditor extends React__namespace.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__namespace.createElement(LabeledRow, {
       label: "Student answer must"
@@ -32253,7 +32149,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
     });
   };
   changeStartCoords = coords => {
-    if (this.props.graph?.type !== "linear" && this.props.graph?.type !== "ray") {
+    if (!this.props.graph?.type) {
       return;
     }
     const graph = {
@@ -32270,7 +32166,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
   // is copied from the question editor and pasted into the hint editor
   // (double brackets in the markdown).
   serialize() {
-    const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep", "lockedFigures");
+    const json = ___default["default"].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;
@@ -32286,7 +32182,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       });
       ___default["default"].each(["allowReflexAngles", "angleOffsetDeg", "numPoints", "numSides", "numSegments", "showAngles", "showSides", "snapTo", "snapDegrees"], function (key) {
         if (___default["default"].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];
         }
       });
@@ -34018,7 +33914,7 @@ class MatrixEditor extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$9,
-  NumberInput: NumberInput$8,
+  NumberInput: NumberInput$7,
   PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = perseus.components;
@@ -34071,14 +33967,14 @@ class MeasurerEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
       className: "perseus-widget-left-col"
-    }, "Pixels from top:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }, "Pixels from top:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
       placeholder: 0,
       onChange: this._changeTop,
       value: image.top,
       useArrowKeys: true
     })), /*#__PURE__*/React__namespace.createElement("label", {
       className: "perseus-widget-right-col"
-    }, "Pixels from left:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }, "Pixels from left:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
       placeholder: 0,
       onChange: this._changeLeft,
       value: image.left,
@@ -34124,14 +34020,14 @@ class MeasurerEditor extends React__namespace.Component {
         key: n,
         value: n
       }, n);
-    })))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    })))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
       placeholder: 10
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -34179,7 +34075,7 @@ class MeasurerEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$7,
+  NumberInput: NumberInput$6,
   TextInput: TextInput$4
 } = perseus.components;
 class MoleculeWidgetEditor extends React__namespace.Component {
@@ -34217,7 +34113,7 @@ class MoleculeWidgetEditor extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$4, {
       onChange: this.updateMolecule,
       value: this.props.smiles
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       onChange: this.updateRotation,
       value: this.props.rotationAngle
     }))));
@@ -34228,7 +34124,7 @@ class MoleculeWidgetEditor extends React__namespace.Component {
 const {
   ButtonGroup: ButtonGroup$1,
   InfoTip: InfoTip$8,
-  NumberInput: NumberInput$6,
+  NumberInput: NumberInput$5,
   PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = perseus.components;
@@ -34408,7 +34304,7 @@ class NumberLineEditor extends React__namespace.Component {
     }, "\u2264"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "ge",
       "aria-label": "Greater than or equal"
-    }, "\u2265")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }, "\u2265")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: this.props.correctX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -34420,7 +34316,7 @@ class NumberLineEditor extends React__namespace.Component {
       useArrowKeys: true
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, this.props.static ? /*#__PURE__*/React__namespace.createElement("label", null, "Range:") : /*#__PURE__*/React__namespace.createElement("label", null, "Position:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }, this.props.static ? /*#__PURE__*/React__namespace.createElement("label", null, "Range:") : /*#__PURE__*/React__namespace.createElement("label", null, "Position:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: this.props.initialX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -34440,7 +34336,7 @@ class NumberLineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Labels:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }, "Labels:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: labelRange[0],
       placeholder: range[0],
       format: this.props.labelStyle,
@@ -34449,7 +34345,7 @@ class NumberLineEditor extends React__namespace.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 0),
       useArrowKeys: true
-    }), /*#__PURE__*/React__namespace.createElement("span", null, " & "), /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }), /*#__PURE__*/React__namespace.createElement("span", null, " & "), /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: labelRange[1],
       placeholder: range[1],
       format: this.props.labelStyle,
@@ -34487,7 +34383,7 @@ class NumberLineEditor extends React__namespace.Component {
       onChange: this.props.onChange
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }, isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -34496,7 +34392,7 @@ class NumberLineEditor extends React__namespace.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -34505,7 +34401,7 @@ class NumberLineEditor extends React__namespace.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), " ", /*#__PURE__*/React__namespace.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    })), " ", /*#__PURE__*/React__namespace.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: this.props.tickStep || null,
       format: this.props.labelStyle,
       onChange: this.onTickStepChange,
@@ -34516,7 +34412,7 @@ class NumberLineEditor extends React__namespace.Component {
       useArrowKeys: true
     })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       value: snapDivisions,
       checkValidity: val => val > 0,
       format: this.props.labelStyle
@@ -34532,9 +34428,9 @@ class NumberLineEditor extends React__namespace.Component {
 const {
   ButtonGroup,
   InfoTip: InfoTip$7,
-  InlineIcon: InlineIcon$2,
+  InlineIcon: InlineIcon$1,
   MultiButtonGroup,
-  NumberInput: NumberInput$5,
+  NumberInput: NumberInput$4,
   PropCheckBox: PropCheckBox$3,
   TextInput: TextInput$3
 } = perseus.components;
@@ -34638,7 +34534,7 @@ class NumericInputEditor extends React__namespace.Component {
     })));
     const maxError = i => /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Max error", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Max error", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
       className: "max-error",
       value: answers[i]["maxError"],
       onChange: this.updateAnswer(i, "maxError"),
@@ -34713,7 +34609,7 @@ class NumericInputEditor extends React__namespace.Component {
         key: i
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "input-answer-editor-value-container" + (answer.maxError ? " with-max-error" : "")
-      }, /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
+      }, /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
         value: answer.value,
         className: "numeric-input-value",
         placeholder: "answer",
@@ -34760,7 +34656,7 @@ class NumericInputEditor extends React__namespace.Component {
         className: "max-error-container"
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "max-error-plusmn"
-      }, "\xB1"), /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
+      }, "\xB1"), /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
         placeholder: 0,
         value: answers[i]["maxError"],
         format: ___default["default"].last(answer.answerForms || []),
@@ -34788,7 +34684,7 @@ class NumericInputEditor extends React__namespace.Component {
           this.onTrashAnswer(i);
         },
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer)
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconTrash$1)), /*#__PURE__*/React__namespace.createElement("a", {
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconTrash$1)), /*#__PURE__*/React__namespace.createElement("a", {
         href: "#",
         className: "options-toggle",
         "aria-label": "Toggle options",
@@ -34799,7 +34695,7 @@ class NumericInputEditor extends React__namespace.Component {
           this.onToggleOptions(i);
         },
         onKeyDown: e => this.onSpace(e, this.onToggleOptions)
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconGear))), /*#__PURE__*/React__namespace.createElement("div", {
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconGear))), /*#__PURE__*/React__namespace.createElement("div", {
         className: "input-answer-editor-message"
       }, editor), this.state.showOptions[i] && /*#__PURE__*/React__namespace.createElement("div", {
         className: "options-container"
@@ -35114,7 +35010,7 @@ class PassageEditor extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$4,
-  NumberInput: NumberInput$4,
+  NumberInput: NumberInput$3,
   TextInput: TextInput$2
 } = perseus.components;
 class PassageRefEditor extends React__namespace.Component {
@@ -35143,12 +35039,12 @@ class PassageRefEditor extends React__namespace.Component {
     return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Passage Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Passage Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
       value: this.props.passageNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("passageNumber")
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Reference Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Reference Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
       value: this.props.referenceNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -35200,7 +35096,7 @@ class PassageRefTargetEditor extends React__namespace.Component {
 
 const {
   InfoTip: InfoTip$3,
-  NumberInput: NumberInput$3,
+  NumberInput: NumberInput$2,
   RangeInput,
   TextListEditor: TextListEditor$1
 } = perseus.components;
@@ -35450,7 +35346,7 @@ class PlotterEditor extends React__namespace.Component {
       className: "set-from-scale-box"
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: "categories-title"
-    }, "Set Categories From Scale"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
+    }, "Set Categories From Scale"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$2, {
       placeholder: 1,
       useArrowKeys: true,
       value: this.state.tickStep,
@@ -35462,7 +35358,7 @@ class PlotterEditor extends React__namespace.Component {
       onChange: this.handleChangeRange
     }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.setCategoriesFromScale
-    }, "Set Categories", " "))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
+    }, "Set Categories", " "))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$2, {
       useArrowKeys: true,
       value: this.props.labelInterval,
       onChange: this.changeLabelInterval
@@ -35512,7 +35408,7 @@ class PlotterEditor extends React__namespace.Component {
  * This editor is for embedding Khan Academy Python programs.
  */
 const {
-  NumberInput: NumberInput$2,
+  NumberInput: NumberInput$1,
   TextInput: TextInput$1
 } = perseus.components;
 function validateOptions(height, programID) {
@@ -35559,7 +35455,7 @@ class PythonProgramEditor extends React__namespace.Component {
       value: this.props.programID,
       onChange: this.change("programID"),
       placeholder: "123"
-    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("label", null, "Height:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$2, {
+    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("label", null, "Height:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$1, {
       value: this.props.height,
       onChange: this.change("height"),
       placeholder: "400"
@@ -35569,7 +35465,7 @@ class PythonProgramEditor extends React__namespace.Component {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types, react/sort-comp */
 const {
-  InlineIcon: InlineIcon$1,
+  InlineIcon,
   PropCheckBox: PropCheckBox$1
 } = perseus.components;
 const {
@@ -35621,7 +35517,7 @@ class ChoiceEditor extends React__namespace.Component {
         this.props.onDelete();
       },
       title: "Remove this choice"
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconTrash));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTrash));
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "choice-clue-editors"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -35732,13 +35628,13 @@ class RadioEditor extends React__namespace.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, false)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React__namespace.createElement("a", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React__namespace.createElement("a", {
       className: "simple-button",
       href: "#"
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, true)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconPlus), " None of the above", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconPlus), " None of the above", " ")));
   }
   change = (() => {
     var _this = this;
@@ -35978,7 +35874,7 @@ class SorterEditor extends React__namespace.Component {
 /* eslint-disable react/sort-comp */
 const {
   InfoTip: InfoTip$1,
-  NumberInput: NumberInput$1
+  NumberInput
 } = perseus.components;
 const Table = perseus.TableWidget.widget;
 class TableEditor extends React__namespace.Component {
@@ -36017,7 +35913,7 @@ class TableEditor extends React__namespace.Component {
     });
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$1, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput, {
       ref: this.numberOfColumns,
       value: this.props.columns,
       onChange: val => {
@@ -36028,7 +35924,7 @@ class TableEditor extends React__namespace.Component {
       useArrowKeys: true
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of rows:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$1
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of rows:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput
     // eslint-disable-next-line react/no-string-refs
     , {
       ref: "numberOfRows",
@@ -36085,240 +35981,6 @@ class TableEditor extends React__namespace.Component {
   };
 }
 
-/* eslint-disable react/no-unsafe */
-const {
-  InlineIcon,
-  NumberInput
-} = perseus.components;
-const {
-  iconOk,
-  iconRemove
-} = perseus.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 (num, sigfigs) {
-  return perseus.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 (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__namespace.Component {
-  // 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);
-  }
-  _checkValidity = _ref => {
-    let {
-      name,
-      original,
-      sigfigs
-    } = _ref;
-    const parseResult = KAS__namespace.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__namespace.Var("x");
-      const {
-        unit
-      } = parseResult;
-      const equality = new KAS__namespace.Eq(original, "=", new KAS__namespace.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__namespace.compare(primUnits(original), primUnits(unit)).equal;
-      } catch (e) {
-        valid = false;
-      }
-    } else {
-      valid = false;
-    }
-    this.setState({
-      valid,
-      solvedExample
-    });
-  };
-  render() {
-    let icon;
-    if (this.state.valid) {
-      icon = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("span", {
-        className: "unit-example-okay"
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconOk)), this.state.solvedExample);
-    } else {
-      icon = /*#__PURE__*/React__namespace.createElement("span", {
-        className: "unit-example-not-okay"
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconRemove));
-    }
-    return /*#__PURE__*/React__namespace.createElement("div", null, icon, " ", this.props.name);
-  }
-}
-class UnitInputEditor extends React__namespace.Component {
-  parsed;
-  groupId;
-  original;
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    value: PropTypes__default["default"].string,
-    acceptingUnits: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    accepting: PropTypes__default["default"].oneOf([ALL, SOME]),
-    sigfigs: PropTypes__default["default"].number
-  };
-  static widgetName = "unit-input";
-  static defaultProps = {
-    value: "5x10^5 kg m / s^2",
-    accepting: ALL,
-    sigfigs: 3
-  };
-  constructor(props) {
-    super(props);
-    this.groupId = ___default["default"].uniqueId("accepting");
-    this._doOriginal(props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this._doOriginal(nextProps);
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  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
-    });
-  };
-  handleSigfigChange = sigfigs => {
-    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-    this.change({
-      sigfigs
-    });
-  };
-  _checkSigfigValidity = sigfigs => {
-    return sigfigs > 0 && sigfigs <= MAX_SIGFIGS;
-  };
-  _setAccepting = val => {
-    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-    this.change({
-      accepting: val
-    });
-  };
-  _doOriginal = props => {
-    const tryParse = KAS__namespace.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;
-    }
-  };
-  onChange = event => {
-    this.props.onChange({
-      value: event.target.value
-    });
-  };
-  getSaveWarnings = () => {
-    const {
-      value,
-      accepting,
-      acceptingUnits
-    } = this.props;
-    const warnings = [];
-    const tryParse = KAS__namespace.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;
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
-  render() {
-    const {
-      acceptingUnits = [],
-      accepting
-    } = this.props;
-    let acceptingElem = null;
-    if (accepting === SOME) {
-      const unitsArr = acceptingUnits.map((name, i) => /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
-        type: "text",
-        defaultValue: acceptingUnits.join(", "),
-        onChange: this.handleAcceptingUnitsChange
-      }), " ", "(comma-separated)", unitsArr);
-    }
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "unit-editor"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
-      value: this.props.value,
-      className: "unit-editor-canonical",
-      onChange: this.onChange
-    }), " ", this.parsed ? /*#__PURE__*/React__namespace.createElement("span", {
-      className: "unit-example-okay"
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconOk)) : /*#__PURE__*/React__namespace.createElement("span", {
-      className: "unit-example-not-okay"
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconRemove))), /*#__PURE__*/React__namespace.createElement("div", null, "Significant Figures:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput, {
-      value: this.props.sigfigs,
-      onChange: this.handleSigfigChange,
-      checkValidity: this._checkSigfigValidity,
-      useArrowKeys: true
-    })), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "radio",
-      name: this.groupId,
-      onChange: () => this._setAccepting(ALL),
-      checked: this.props.accepting === ALL
-    }), " Any equivalent unit "), /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "radio",
-      name: this.groupId,
-      onChange: () => this._setAccepting(SOME),
-      checked: this.props.accepting === SOME
-    }), " Only these units ")), acceptingElem);
-  }
-}
-
 const {
   InfoTip
 } = perseus.components;
@@ -36376,7 +36038,7 @@ class VideoEditor extends React__namespace.Component {
   }
 }
 
-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__namespace.Component {
@@ -36608,7 +36270,6 @@ exports.EditorPage = EditorPage;
 exports.IframeContentRenderer = IframeContentRenderer;
 exports.ItemDiff = ItemDiff;
 exports.MultiRendererEditor = MultiRendererEditor;
-exports.StatefulArticleEditor = StatefulArticleEditor;
 exports.StatefulEditorPage = StatefulEditorPage;
 exports.StructuredItemDiff = StructuredItemDiff;
 exports.ViewportResizer = ViewportResizer;