@khanacademy/perseus-editor 5.3.0 → 6.0.0

package/dist/index.js

@@ -26,10 +26,9 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
-var Switch = require('@khanacademy/wonder-blocks-switch');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
+var Switch = require('@khanacademy/wonder-blocks-switch');
 var Button = require('@khanacademy/wonder-blocks-button');
-var i18n$1 = require('@khanacademy/wonder-blocks-i18n');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,14 +61,13 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
-var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.3.0";
+const libVersion = "6.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -264,13 +262,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$r.button
+      style: styles$s.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20614,6 +20612,7 @@ const _upgradeWidgetInfo = props => {
 // transforms will not be propogated upwards until serialization.
 // eslint-disable-next-line react/no-unsafe
 class WidgetEditor extends React__namespace.Component {
+  widget;
   constructor(props) {
     super(props);
     this.state = {
@@ -20788,19 +20787,19 @@ class TexErrorView extends React__namespace.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$q.iconExpanded : styles$q.iconCollapsed;
+    const iconStyle = showErrors ? styles$r.iconExpanded : styles$r.iconCollapsed;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$q.errorContainer
+      style: styles$r.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$q.title,
+      style: styles$r.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       icon: caretRight__default["default"],
       style: iconStyle
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$q.errorExplanation
+      style: styles$r.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$q.error,
+      style: styles$r.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20809,7 +20808,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -20915,6 +20914,9 @@ const imageUrlsFromContent = function (content) {
 };
 // eslint-disable-next-line react/no-unsafe
 class Editor extends React__namespace.Component {
+  lastUserValue;
+  deferredChange;
+  widgetIds;
   underlay = /*#__PURE__*/React__namespace.createRef();
   textarea = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
@@ -21694,14 +21696,16 @@ window.addEventListener("message", event => {
   }
 });
 class IframeContentRenderer extends React__namespace.Component {
+  _frame;
   container = /*#__PURE__*/React__namespace.createRef();
 
   // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-
+  _isMounted;
+  _lastData;
   // @ts-expect-error - TS2564 - Property '_lastHeight' has no initializer and is not definitely assigned in the constructor.
-
+  _lastHeight;
   // @ts-expect-error - TS2564 - Property 'iframeID' has no initializer and is not definitely assigned in the constructor.
-
+  iframeID;
   componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
@@ -24010,6 +24014,8 @@ const {
   HUD
 } = perseus.components;
 class EditorPage extends React__namespace.Component {
+  _isMounted;
+  renderer;
   itemEditor = /*#__PURE__*/React__namespace.createRef();
   hintsEditor = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
@@ -24559,12 +24565,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$p.baseButton, color === "green" && styles$p.green, color === "orange" && styles$p.orange),
+      className: aphrodite.css(styles$q.baseButton, color === "green" && styles$q.green, color === "orange" && styles$q.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$p = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24777,23 +24783,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$o.containerHeader)
+    className: aphrodite.css(styles$p.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$o.containerTitle)
+    className: aphrodite.css(styles$p.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.container)
+    className: aphrodite.css(styles$p.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$o.row, styles$o.rowHeading)
+    className: aphrodite.css(styles$p.row, styles$p.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnLeft)
+    className: aphrodite.css(styles$p.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$o.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$p.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.containerTitle)
+    className: aphrodite.css(styles$p.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnRight)
+    className: aphrodite.css(styles$p.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24806,11 +24812,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.container)
+    className: aphrodite.css(styles$p.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnLeft, styles$o.containerHeader)
+    className: aphrodite.css(styles$p.columnLeft, styles$p.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnLeft)
+    className: aphrodite.css(styles$p.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24824,28 +24830,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.containerHeader)
+    className: aphrodite.css(styles$p.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$o.containerTitle)
+    className: aphrodite.css(styles$p.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.containerHeader, styles$o.previewCollectionHeader)
+    className: aphrodite.css(styles$p.containerHeader, styles$p.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$o.containerTitle)
+    className: aphrodite.css(styles$p.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.container)
+    className: aphrodite.css(styles$p.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$o.row)
+    className: aphrodite.css(styles$p.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnLeft)
+    className: aphrodite.css(styles$p.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnRight)
+    className: aphrodite.css(styles$p.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$o.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$p.contentIndent)
   }, children));
 };
 
@@ -24913,7 +24919,7 @@ const NodeContent = props => {
 const withStickiness = WrappedComponent => {
   return class StickyComponent extends React__namespace.Component {
     // @ts-expect-error - TS2564 - Property 'stickynessTimer' has no initializer and is not definitely assigned in the constructor.
-
+    stickynessTimer;
     state = {
       sticky: false
     };
@@ -24965,11 +24971,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$o.row)
+    className: aphrodite.css(styles$p.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnLeft)
+    className: aphrodite.css(styles$p.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$o.sticky)
+    className: aphrodite.css(sticky && styles$p.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -24977,9 +24983,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnRight)
+    className: aphrodite.css(styles$p.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$o.sticky)
+    className: aphrodite.css(sticky && styles$p.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -24995,13 +25001,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.row)
+    className: aphrodite.css(styles$p.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnLeft)
+    className: aphrodite.css(styles$p.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$o.sticky)
+    className: aphrodite.css(sticky && styles$p.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$o.hintEditor),
+    className: aphrodite.css(styles$p.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25016,9 +25022,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnRight)
+    className: aphrodite.css(styles$p.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$o.sticky)
+    className: aphrodite.css(sticky && styles$p.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25035,9 +25041,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.columnLeft)
+    className: aphrodite.css(styles$p.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$o.tagsEditor)
+    className: aphrodite.css(styles$p.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25068,23 +25074,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$o.control)
+      className: aphrodite.css(styles$p.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$o.verticalFlip)
+      className: aphrodite.css(styles$p.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$o.control)
+      className: aphrodite.css(styles$p.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", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$o.control)
+      className: aphrodite.css(styles$p.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25092,7 +25098,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$o.arrayElement, !elementIsLeaf && styles$o.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$p.arrayElement, !elementIsLeaf && styles$p.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25118,7 +25124,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$o.objectElement)
+    className: aphrodite.css(styles$p.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25127,6 +25133,7 @@ const ObjectNodeContent = props => {
   return /*#__PURE__*/React__namespace.createElement("div", null, children);
 };
 class MultiRendererEditor extends React__namespace.Component {
+  layout;
   _renderLayout = () => {
     const {
       Layout,
@@ -25287,7 +25294,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25439,47 +25446,47 @@ const StatefulArticleEditor = createReactClass__default["default"]({
       screen
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$n.controlBar
+      style: styles$o.controlBar
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.controls
+      style: styles$o.controls
     }, "Mode:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$n.controlSelected : styles$n.control
+      style: mode === "edit" ? styles$o.controlSelected : styles$o.control
     }, "EDIT"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$n.controlSelected : styles$n.control
+      style: mode === "preview" ? styles$o.controlSelected : styles$o.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$n.controlSelected : styles$n.control
+      style: mode === "json" ? styles$o.controlSelected : styles$o.control
     }, "JSON")), /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.controls
+      style: styles$o.controls
     }, "Screen:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$n.controlSelected : styles$n.control
+      style: screen === "phone" ? styles$o.controlSelected : styles$o.control
     }, "PHONE"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$n.controlSelected : styles$n.control
+      style: screen === "tablet" ? styles$o.controlSelected : styles$o.control
     }, "TABLET"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$n.controlSelected : styles$n.control
+      style: screen === "desktop" ? styles$o.controlSelected : styles$o.control
     }, "DESKTOP"))), /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$n.editor
+      style: styles$o.editor
     }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$n = {
+const styles$o = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27018,10 +27025,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$m.title)
+      className: aphrodite.css(styles$n.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$m.input)
+      className: aphrodite.css(styles$n.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27046,7 +27053,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, 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$m.hintsTitle)
+      className: aphrodite.css(styles$n.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27078,7 +27085,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27095,7 +27102,7 @@ const styles$m = aphrodite.StyleSheet.create({
 
 class GradedGroupSetEditor extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property '_editors' has no initializer and is not definitely assigned in the constructor.
-
+  _editors;
   static propTypes = {
     ...perseus.Changeable.propTypes,
     apiOptions: perseus.ApiOptions.propTypes,
@@ -28287,6 +28294,7 @@ const answerTypes = {
   }
 };
 class InputNumberEditor extends React__namespace.Component {
+  static contextType = perseus.PerseusI18nContext;
   static widgetName = "input-number";
   static defaultProps = {
     value: 0,
@@ -28299,7 +28307,7 @@ class InputNumberEditor extends React__namespace.Component {
   };
   input = /*#__PURE__*/React__namespace.createRef();
   handleAnswerChange = str => {
-    const value = perseus.Util.firstNumericalParse(str) || 0;
+    const value = perseus.Util.firstNumericalParse(str, this.context.strings) || 0;
     this.props.onChange({
       value: value
     });
@@ -28350,7 +28358,7 @@ class InputNumberEditor extends React__namespace.Component {
       defaultValue: this.props.maxError,
       "aria-label": "Max error",
       onBlur: e => {
-        const ans = "" + (perseus.Util.firstNumericalParse(e.target.value) || 0);
+        const ans = "" + (perseus.Util.firstNumericalParse(e.target.value, this.context.strings) || 0);
         e.target.value = ans;
         this.props.onChange({
           maxError: ans
@@ -28410,12 +28418,15 @@ class InputNumberEditor extends React__namespace.Component {
 function MathquillInput(props) {
   const mathFieldWrapperRef = React.useRef(null);
   const mathFieldInstance = React.useRef();
+  const {
+    strings
+  } = mathInput.useMathInputI18n();
   React.useEffect(() => {
     // If we have the mount for the input, but not the input
     // make a new Mathquill input
     if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
       // Initialize MathQuill.MathField instance
-      mathFieldInstance.current = mathInput.createMathField(mathFieldWrapperRef.current, baseConfig => ({
+      mathFieldInstance.current = mathInput.createMathField(mathFieldWrapperRef.current, strings, baseConfig => ({
         ...baseConfig,
         handlers: {
           edit: mathField => {
@@ -28444,13 +28455,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$l.outerWrapper
+    style: styles$m.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29536,7 +29547,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$k.singleSelectShort
+    style: styles$l.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -29547,7 +29558,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29560,7 +29571,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$j.singleSelectShort
+    style: styles$k.singleSelectShort
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -29593,7 +29604,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29610,16 +29621,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$i.label)
+    className: aphrodite.css(styles$j.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$i.row, style]
+    style: [styles$j.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$i.spaceEnd
+    style: styles$j.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$i.spaceStart
+    style: styles$j.spaceStart
   }, label)));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -30041,10 +30052,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$h.resetSpaceTop
+      style: styles$i.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$h.backgroundUrlInput),
+      className: aphrodite.css(styles$i.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -30060,24 +30071,24 @@ 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$h.rulerSection
+      style: styles$i.rulerSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.checkboxRow
+      style: styles$i.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$h.resetSpaceTop
+      style: styles$i.resetSpaceTop
     }), /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$h.resetSpaceTop
+      style: styles$i.resetSpaceTop
     })), this.props.showRuler && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.spaceTop
+      style: styles$i.spaceTop
     }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$h.resetSpaceTop
+      style: styles$i.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -30087,7 +30098,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "None",
-      style: styles$h.singleSelectShort
+      style: styles$i.singleSelectShort
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       value: "",
       label: "None",
@@ -30128,7 +30139,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "10",
-      style: styles$h.singleSelectShort
+      style: styles$i.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: value,
       value: `${value}`,
@@ -30136,7 +30147,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     })))))));
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30180,22 +30191,26 @@ const LockedFigureSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$g.container
+    style: styles$h.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$g.addElementSelect
+    style: styles$h.addElementSelect
   }, [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-point`,
     label: "Point",
     onClick: () => onChange("point")
-  }, "Point")]));
+  }, "Point"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
+    key: `${id}-line`,
+    label: "Line",
+    onClick: () => onChange("line")
+  }, "Line")]));
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   container: {
-    marginTop: wonderBlocksTokens.spacing.medium_16
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4
   },
   addElementSelect: {
-    backgroundColor: wonderBlocksTokens.color.fadedBlue16,
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
   }
 });
@@ -30280,7 +30295,7 @@ const strutStyle = size => {
   };
 };
 
-const ColorCircle = props => {
+const ColorSwatch = props => {
   const {
     color,
     filled = true,
@@ -30290,15 +30305,15 @@ const ColorCircle = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `Color: ${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$f.colorCircle, {
-      border: `4px solid ${wonderBlocksTokens.color[color]}`,
-      backgroundColor: filled ? wonderBlocksTokens.color[color] : wonderBlocksTokens.color.white
+    style: [styles$g.colorSwatch, {
+      border: `4px solid ${perseus.lockedFigureColors[color]}`,
+      backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$f = aphrodite.StyleSheet.create({
-  colorCircle: {
-    // Add a white outline so that the color circle is visible when
+const styles$g = 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.
     outline: `2px solid ${wonderBlocksTokens.color.offWhite}`,
     borderRadius: "50%",
@@ -30307,6 +30322,7 @@ const styles$f = aphrodite.StyleSheet.create({
   }
 });
 
+const possibleColors = Object.keys(perseus.lockedFigureColors);
 const ColorSelect = props => {
   const {
     id,
@@ -30314,10 +30330,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$e.row
+    style: styles$f.row
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: id,
-    style: styles$e.label,
+    style: styles$f.label,
     tag: "label"
   }, "Color"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     id: id,
@@ -30326,17 +30342,17 @@ const ColorSelect = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
-  }, perseus.lockedFigureColors.map(colorName => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+  }, possibleColors.map(colorName => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: colorName,
     value: colorName,
     label: colorName,
-    leftAccessory: /*#__PURE__*/React__namespace.createElement(ColorCircle, {
+    leftAccessory: /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
       color: colorName,
       decorative: true
     })
   }, colorName))));
 };
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30387,7 +30403,7 @@ function focusWithChromeStickyFocusBugWorkaround(element) {
   });
 }
 function getValidNumberFromString(value) {
-  const parsed = parseInt(value);
+  const parsed = parseFloat(value);
   // If the value is not a number, return 0.
   return isNaN(parsed) ? 0 : parsed;
 }
@@ -30478,28 +30494,28 @@ const LockedPointSettings = props => {
   , {
     className: "locked-figure-accordion"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
-    style: [styles$d.container, style],
-    headerStyle: styles$d.accordionHeader,
+    style: [styles$e.container, style],
+    headerStyle: styles$e.accordionHeader,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$d.row
+      style: styles$e.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
-    }), toggled && /*#__PURE__*/React__namespace.createElement(ColorCircle, {
+    }), toggled && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
       color: pointColor,
       filled: filled
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$d.accordionPanel
+    style: styles$e.accordionPanel
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$d.row
+    style: styles$e.row
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$d.row, styles$d.spaceUnder]
+    style: [styles$e.row, styles$e.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: xCoordId,
-    style: styles$d.label,
+    style: styles$e.label,
     tag: "label"
   }, "x Coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     id: xCoordId,
@@ -30507,14 +30523,14 @@ const LockedPointSettings = props => {
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
     onBlur: handleBlur,
-    style: styles$d.textField
+    style: styles$e.textField
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$d.row, styles$d.spaceUnder]
+    style: [styles$e.row, styles$e.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: yCoordId,
-    style: styles$d.label,
+    style: styles$e.label,
     tag: "label"
   }, "y Coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     id: yCoordId,
@@ -30522,9 +30538,9 @@ const LockedPointSettings = props => {
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
     onBlur: handleBlur,
-    style: styles$d.textField
+    style: styles$e.textField
   }))), onToggle && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$d.row, styles$d.spaceUnder]
+    style: [styles$e.row, styles$e.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: showPointToggleId,
     checked: !!toggled,
@@ -30548,15 +30564,15 @@ const LockedPointSettings = props => {
         filled: !newValue
       });
     },
-    style: styles$d.spaceUnder
+    style: styles$e.spaceUnder
   })), onRemove && /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: trashIcon__default["default"],
     "aria-label": `Delete locked point at ${coordState[0]}, ${coordState[1]}`,
     onClick: onRemove,
-    style: styles$d.deleteButton
+    style: styles$e.deleteButton
   }))));
 };
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginBottom: wonderBlocksTokens.spacing.small_12
@@ -30565,7 +30581,7 @@ const styles$d = aphrodite.StyleSheet.create({
     paddingTop: wonderBlocksTokens.spacing.small_12,
     paddingBottom: wonderBlocksTokens.spacing.small_12,
     paddingInlineStart: wonderBlocksTokens.spacing.medium_16,
-    // Fixed height so the addition of the color circle doesn't
+    // Fixed height so the addition of the color swatch doesn't
     // change the height of the header when toggling.
     height: wonderBlocksTokens.spacing.xxLarge_48
   },
@@ -30593,6 +30609,194 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
+const LockedLineSettings = props => {
+  const {
+    kind,
+    points,
+    color: lineColor = "blue",
+    lineStyle = "solid",
+    showArrows,
+    showStartPoint,
+    showEndPoint,
+    onChangeProps,
+    onRemove
+  } = props;
+  const [startPoint, endPoint] = points;
+
+  // Generate unique IDs so that the programmatic labels can be associated
+  // with their respective text fields.
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const kindSelectId = ids.get("line-kind-select");
+  const colorSelectId = ids.get("line-color-select");
+  const styleSelectId = ids.get("line-style-select");
+  const lineLabel = `Line (${startPoint.coord[0]}, ${startPoint.coord[1]}),
+        (${endPoint.coord[0]}, ${endPoint.coord[1]})`;
+  function handleChangePoint(newPointProps, index) {
+    const newPoints = [...points];
+    newPoints[index] = {
+      ...points[index],
+      ...newPointProps
+    };
+    onChangeProps({
+      points: newPoints
+    });
+  }
+  function handleColorChange(newColor) {
+    onChangeProps({
+      color: newColor,
+      // Keep the line's points' colors in sync with the line color.
+      points: [{
+        ...startPoint,
+        color: newColor
+      }, {
+        ...endPoint,
+        color: newColor
+      }]
+    });
+  }
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
+  // More specificity so that we can override the default
+  // .heading > h2 > .header styles from the articles.less
+  // file (which is imported in perseus-renderer.less).
+  , {
+    className: "locked-figure-accordion"
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
+    style: styles$d.container,
+    headerStyle: styles$d.accordionHeader,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$d.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
+      size: wonderBlocksTokens.spacing.xSmall_8
+    }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
+      color: lineColor
+    }))
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.accordionPanel
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$d.row, styles$d.spaceUnder]
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    htmlFor: kindSelectId,
+    style: styles$d.label,
+    tag: "label"
+  }, "Kind"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    id: kindSelectId,
+    selectedValue: kind,
+    onChange: value => onChangeProps({
+      kind: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "line",
+    label: "line"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "segment",
+    label: "segment"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "ray",
+    label: "ray"
+  }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$d.row, styles$d.spaceUnder]
+  }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+    id: colorSelectId,
+    selectedValue: lineColor || "blue",
+    onChange: handleColorChange
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.medium_16
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    htmlFor: styleSelectId,
+    style: styles$d.label,
+    tag: "label"
+  }, "Style"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    id: styleSelectId,
+    selectedValue: lineStyle,
+    onChange: value => onChangeProps({
+      lineStyle: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "solid",
+    label: "solid"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "dashed",
+    label: "dashed"
+  })))), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+    label: "Show arrows",
+    checked: showArrows,
+    onChange: newValue => onChangeProps({
+      showArrows: newValue
+    }),
+    style: styles$d.spaceUnder
+  }), /*#__PURE__*/React__namespace.createElement(LockedPointSettings, _extends({
+    label: "Start point",
+    toggled: showStartPoint
+  }, startPoint, {
+    onToggle: newValue => onChangeProps({
+      showStartPoint: newValue
+    }),
+    onChangeProps: newProps => handleChangePoint(newProps, 0),
+    style: styles$d.lockedPointSettingsContainer
+  })), /*#__PURE__*/React__namespace.createElement(LockedPointSettings, _extends({
+    label: "End point",
+    toggled: showEndPoint
+  }, endPoint, {
+    onToggle: newValue => onChangeProps({
+      showEndPoint: newValue
+    }),
+    onChangeProps: newProps => handleChangePoint(newProps, 1),
+    style: styles$d.lockedPointSettingsContainer
+  })), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    icon: trashIcon__default["default"],
+    "aria-label": `Delete locked line defined by
+            ${startPoint.coord[0]}, ${startPoint.coord[1]} and
+            ${endPoint.coord[0]}, ${endPoint.coord[1]}.`,
+    onClick: onRemove,
+    style: styles$d.deleteButton
+  }))));
+};
+const styles$d = aphrodite.StyleSheet.create({
+  container: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  accordionHeader: {
+    paddingTop: wonderBlocksTokens.spacing.small_12,
+    paddingBottom: wonderBlocksTokens.spacing.small_12,
+    paddingInlineStart: wonderBlocksTokens.spacing.medium_16
+  },
+  accordionPanel: {
+    padding: wonderBlocksTokens.spacing.medium_16,
+    paddingBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  lockedPointSettingsContainer: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8,
+    marginLeft: -wonderBlocksTokens.spacing.xxxSmall_4,
+    marginRight: -wonderBlocksTokens.spacing.xxxSmall_4,
+    backgroundColor: wonderBlocksTokens.color.white
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  label: {
+    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+  },
+  deleteButton: {
+    position: "absolute",
+    top: wonderBlocksTokens.spacing.small_12,
+    right: wonderBlocksTokens.spacing.small_12
+  }
+});
+
 /**
  * LockedFigureSettings takes in a figure and renders the
  * respective settings for that figure type.
@@ -30606,6 +30810,8 @@ const LockedFigureSettings = props => {
   switch (props.type) {
     case "point":
       return /*#__PURE__*/React__namespace.createElement(LockedPointSettings, props);
+    case "line":
+      return /*#__PURE__*/React__namespace.createElement(LockedLineSettings, props);
   }
   return null;
 };
@@ -30644,19 +30850,12 @@ const LockedFiguresSection = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$c.container
-  }, figures?.map((figure, index) => {
-    // TODO(LEMS-1740): Remove this check when
-    // locked lines are added to LockedFigureSettings.
-    if (figure.type === "line") {
-      return;
-    }
-    return /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
-      key: `${uniqueId}-locked-${figure}-${index}`
-    }, figure, {
-      onChangeProps: newProps => changeProps(index, newProps),
-      onRemove: () => removeLockedFigure(index)
-    }));
-  }), /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
+  }, figures?.map((figure, index) => /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
+    key: `${uniqueId}-locked-${figure}-${index}`
+  }, figure, {
+    onChangeProps: newProps => changeProps(index, newProps),
+    onRemove: () => removeLockedFigure(index)
+  }))), /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
   }));
@@ -31005,8 +31204,8 @@ class InteractiveGraphEditor extends React__namespace.Component {
         borderWidth: 1
       }
     }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
-    // Only show the "Add locked figure" dropdown if the graph is
-    // using Mafs.
+    // Only show the "Add locked figure" dropdown if the graph
+    // is using Mafs.
     this.props.graph && this.props.apiOptions?.flags?.mafs?.["interactive-graph-locked-features-m1"] && this.props.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(LockedFiguresSection, {
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
@@ -31508,9 +31707,9 @@ class HoverBehavior extends React__namespace.Component {
   }
 
   // @ts-expect-error - TS2564 - Property 'focusFlag' has no initializer and is not definitely assigned in the constructor.
-
+  focusFlag;
   // @ts-expect-error - TS2564 - Property 'waitingForClick' has no initializer and is not definitely assigned in the constructor.
-
+  waitingForClick;
   handleClick = e => {
     if (!this.props.disabled) {
       if (this.props.shouldUpdate()) {
@@ -31821,7 +32020,7 @@ const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
 const optionHeight = 30;
 class Option extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
-
+  node;
   handleKeyDown(event) {
     const {
       onDropdownClose
@@ -31900,7 +32099,7 @@ class Option extends React__namespace.Component {
 // - how does the drop down interact with tooltips?  what's the z-index order?
 class OptionGroup extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property 'focusedElement' has no initializer and is not definitely assigned in the constructor.
-
+  focusedElement;
   componentDidMount() {
     if (this.focusedElement) {
       findAndFocusElement(this.focusedElement);
@@ -32005,6 +32204,7 @@ const {
   borderRadius
 } = perseus.globalStyles;
 class Marker extends React__namespace.Component {
+  _marker;
   constructor(props) {
     super(props);
     this.state = {
@@ -32229,8 +32429,7 @@ class QuestionMarkers extends React__namespace.Component {
     // Open answer selection dropdown for each of the specified markers.
     indices.forEach(index => {
       if (this._markers[index]) {
-        // @ts-expect-error - TS2533 - Object is possibly 'null' or 'undefined'.
-        this._markers[index].openDropdown();
+        this._markers[index]?.openDropdown();
       }
     });
   }
@@ -32385,6 +32584,7 @@ const styles$1 = aphrodite.StyleSheet.create({
  * knowledge by directly interacting with the image.
  */
 class LabelImageEditor extends React__namespace.Component {
+  _questionMarkers;
   static defaultProps = {
     choices: [],
     imageAlt: "",
@@ -33284,6 +33484,9 @@ const {
 const {
   firstNumericalParse
 } = perseus.Util;
+
+// NOTE(john): Copied from perseus-types.d.ts in the Perseus package.
+// I'm unable to find a good way of importing these types into this project.
 const answerFormButtons = [{
   title: "Integers",
   value: "integer",
@@ -33320,30 +33523,25 @@ const initAnswer = status => {
     maxError: null
   };
 };
-const NumericInputEditor = createReactClass__default["default"]({
-  displayName: "NumericInputEditor",
-  propTypes: {
-    ...perseus.Changeable.propTypes
-  },
-  statics: {
-    widgetName: "numeric-input"
-  },
-  getDefaultProps: function () {
-    return {
-      answers: [initAnswer("correct")],
-      size: "normal",
-      coefficient: false,
-      labelText: "",
-      rightAlign: false
-    };
-  },
-  getInitialState: function () {
-    return {
+class NumericInputEditor extends React__namespace.Component {
+  static contextType = perseus.PerseusI18nContext;
+  static widgetName = "numeric-input";
+  static displayName = "NumericInputEditor";
+  static defaultProps = {
+    answers: [initAnswer("correct")],
+    size: "normal",
+    coefficient: false,
+    labelText: "",
+    rightAlign: false
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
       lastStatus: "wrong",
       showOptions: ___default["default"].map(this.props.answers, () => false)
     };
-  },
-  render: function () {
+  }
+  render() {
     const answers = this.props.answers;
     const unsimplifiedAnswers = i => /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -33360,14 +33558,14 @@ const NumericInputEditor = createReactClass__default["default"]({
         value: "enforced",
         content: "wrong"
       }],
-      onChange: this.updateAnswer(i, "simplify")
+      onChange: this.updateAnswer(i, "simplify") || (() => {})
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.createElement("p", null, "Normally select \"ungraded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and after)"), /*#__PURE__*/React__namespace.createElement("p", null, "Select \"accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React__namespace.createElement("p", null, "Select \"wrong\" ", /*#__PURE__*/React__namespace.createElement("em", null, "only"), " if we are specifically assessing the ability to simplify.")));
     const suggestedAnswerTypes = i => /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", null, "Choose the suggested answer formats"), /*#__PURE__*/React__namespace.createElement(MultiButtonGroup, {
       buttons: answerFormButtons,
       values: answers[i]["answerForms"],
-      onChange: this.updateAnswer(i, "answerForms")
+      onChange: this.updateAnswer(i, "answerForms") || (() => {})
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.createElement("p", null, "Formats will be autoselected for you based on the given answer; to show no suggested formats and accept all types, simply have a decimal/integer be the answer. Values with \u03C0 will have format \"pi\", and values that are fractions will have some subset (mixed will be \"mixed\" and \"proper\"; improper/proper will both be \"improper\" and \"proper\"). If you would like to specify that it is only a proper fraction (or only a mixed/improper fraction), deselect the other format. Except for specific cases, you should not need to change the autoselected formats."), /*#__PURE__*/React__namespace.createElement("p", null, "To restrict the answer to ", /*#__PURE__*/React__namespace.createElement("em", null, "only"), " an improper fraction (i.e. 7/4), select the improper fraction and toggle \"strict\" to true. This ", /*#__PURE__*/React__namespace.createElement("b", null, "will not"), " ", "accept 1.75 as an answer.", " "), /*#__PURE__*/React__namespace.createElement("p", null, "Unless you are testing that specific skill, please do not restrict the answer format."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$3, {
@@ -33453,7 +33651,7 @@ const NumericInputEditor = createReactClass__default["default"]({
         value: answer.value,
         className: "numeric-input-value",
         placeholder: "answer",
-        format: ___default["default"].last(answer.answerForms),
+        format: ___default["default"].last(answer.answerForms || []),
         onFormatChange: (newValue, format) => {
           // NOTE(charlie): The mobile web expression
           // editor relies on this automatic answer
@@ -33477,13 +33675,13 @@ const NumericInputEditor = createReactClass__default["default"]({
             forms = ["proper", "improper"];
           }
           this.updateAnswer(i, {
-            value: firstNumericalParse(newValue),
+            value: firstNumericalParse(newValue, this.context.strings),
             answerForms: forms
           });
         },
         onChange: newValue => {
           this.updateAnswer(i, {
-            value: firstNumericalParse(newValue)
+            value: firstNumericalParse(newValue, this.context.strings)
           });
         }
       }), answer.strict && /*#__PURE__*/React__namespace.createElement("div", {
@@ -33499,7 +33697,7 @@ const NumericInputEditor = createReactClass__default["default"]({
       }, "\xB1"), /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
         placeholder: 0,
         value: answers[i]["maxError"],
-        format: ___default["default"].last(answer.answerForms),
+        format: ___default["default"].last(answer.answerForms || []),
         onChange: this.updateAnswer(i, "maxError")
       })) : null, /*#__PURE__*/React__namespace.createElement("div", {
         className: "value-divider"
@@ -33507,19 +33705,19 @@ const NumericInputEditor = createReactClass__default["default"]({
         href: "javascript:void(0)",
         className: "answer-status " + answer.status,
         onClick: () => this.onStatusChange(i),
-        onKeyDown: e => this.onSpace(e, this.onStatusChange, i)
+        onKeyDown: e => this.onSpace(e, this.onStatusChange)
       }, answer.status), /*#__PURE__*/React__namespace.createElement("a", {
         href: "javascript:void(0)",
         className: "answer-trash",
         "aria-label": "Delete answer",
         onClick: () => this.onTrashAnswer(i),
-        onKeyDown: e => this.onSpace(e, this.onTrashAnswer, i)
+        onKeyDown: e => this.onSpace(e, this.onTrashAnswer)
       }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconTrash$1)), /*#__PURE__*/React__namespace.createElement("a", {
         href: "javascript:void(0)",
         className: "options-toggle",
         "aria-label": "Toggle options",
         onClick: () => this.onToggleOptions(i),
-        onKeyDown: e => this.onSpace(e, this.onToggleOptions, i)
+        onKeyDown: e => this.onSpace(e, this.onToggleOptions)
       }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconGear))), /*#__PURE__*/React__namespace.createElement("div", {
         className: "input-answer-editor-message"
       }, editor), this.state.showOptions[i] && /*#__PURE__*/React__namespace.createElement("div", {
@@ -33533,21 +33731,21 @@ const NumericInputEditor = createReactClass__default["default"]({
     }, "User input"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "msg-title"
     }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton, inputSize, rightAlign, coefficientCheck, labelText);
-  },
+  }
   change() {
     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);
-  },
-  onToggleOptions: function (choiceIndex) {
+  }
+  onToggleOptions(choiceIndex) {
     const showOptions = this.state.showOptions.slice();
     showOptions[choiceIndex] = !showOptions[choiceIndex];
     this.setState({
       showOptions: showOptions
     });
-  },
-  onTrashAnswer: function (choiceIndex) {
+  }
+  onTrashAnswer(choiceIndex) {
     if (choiceIndex >= 0 && choiceIndex < this.props.answers.length) {
       const answers = this.props.answers.slice(0);
       answers.splice(choiceIndex, 1);
@@ -33555,16 +33753,16 @@ const NumericInputEditor = createReactClass__default["default"]({
         answers: answers
       });
     }
-  },
-  onSpace: function (e, callback) {
+  }
+  onSpace(e, callback) {
     if (e.key === " ") {
       e.preventDefault(); // prevent page shifting
       // eslint-disable-next-line prefer-rest-params
       const args = ___default["default"].toArray(arguments).slice(2);
       callback.apply(this, args);
     }
-  },
-  onStatusChange: function (choiceIndex) {
+  }
+  onStatusChange(choiceIndex) {
     const statuses = ["wrong", "ungraded", "correct"];
     const answers = this.props.answers;
     const i = ___default["default"].indexOf(statuses, answers[choiceIndex].status);
@@ -33573,8 +33771,8 @@ const NumericInputEditor = createReactClass__default["default"]({
       status: newStatus,
       simplify: newStatus === "correct" ? "required" : "accepted"
     });
-  },
-  updateAnswer: function (choiceIndex, update) {
+  }
+  updateAnswer(choiceIndex, update) {
     if (!___default["default"].isObject(update)) {
       return ___default["default"].partial((choiceIndex, key, value) => {
         const update = {};
@@ -33582,7 +33780,9 @@ const NumericInputEditor = createReactClass__default["default"]({
         this.updateAnswer(choiceIndex, update);
       }, choiceIndex, update);
     }
-    let answers = ___default["default"].clone(this.props.answers);
+    let answers = [
+    // Have to do this to remove the `readonly` state from the prop
+    ...this.props.answers];
 
     // Don't bother to make a new answer box unless we are editing the last
     // one.
@@ -33595,15 +33795,15 @@ const NumericInputEditor = createReactClass__default["default"]({
     this.props.onChange({
       answers: answers
     });
-  },
-  addAnswer: function () {
+  }
+  addAnswer() {
     const lastAnswer = initAnswer(this.state.lastStatus);
     const answers = this.props.answers.concat(lastAnswer);
     this.props.onChange({
       answers: answers
     });
-  },
-  getSaveWarnings: function () {
+  }
+  getSaveWarnings() {
     // Filter out all the empty answers
     const warnings = [];
     // TODO(emily): This doesn't actually work, because the value is either
@@ -33621,11 +33821,11 @@ const NumericInputEditor = createReactClass__default["default"]({
       }
     });
     return warnings;
-  },
+  }
   serialize() {
     return perseus.EditorJsonify.serialize.call(this);
   }
-});
+}
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
@@ -34321,9 +34521,7 @@ class ChoiceEditor extends React__namespace.Component {
       apiOptions: this.props.apiOptions,
       content: this.props.choice.clue || "",
       widgetEnabled: false,
-      placeholder: i18n__namespace._("Why is this choice %(correctOrIncorrect)s?", {
-        correctOrIncorrect: checkedClass
-      }),
+      placeholder: `Why is this choice ${checkedClass}?`,
       onChange: this.props.onClueChange
     });
     const deleteLink = /*#__PURE__*/React__namespace.createElement("a", {
@@ -34367,7 +34565,7 @@ class RadioEditor extends React__namespace.Component {
   };
   static widgetName = "radio";
   static defaultProps = {
-    choices: [{}, {}],
+    choices: [{}, {}, {}, {}],
     displayCount: null,
     randomize: false,
     hasNoneOfTheAbove: false,
@@ -34892,6 +35090,9 @@ class UnitExample extends React__namespace.Component {
   }
 }
 class UnitInputEditor extends React__namespace.Component {
+  parsed;
+  groupId;
+  original;
   static propTypes = {
     ...perseus.Changeable.propTypes,
     value: PropTypes__default["default"].string,