@khanacademy/perseus-editor 6.2.2 → 6.3.0

package/dist/es/index.js

@@ -29,7 +29,7 @@ import Switch from '@khanacademy/wonder-blocks-switch';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.2.2";
+const libVersion = "6.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -219,7 +219,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$u.button
+      style: styles$v.button
     }, ({
       hovered,
       focused,
@@ -227,7 +227,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20749,19 +20749,19 @@ class TexErrorView extends React.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$t.iconExpanded : styles$t.iconCollapsed;
+    const iconStyle = showErrors ? styles$u.iconExpanded : styles$u.iconCollapsed;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$t.errorContainer
+      style: styles$u.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$t.title,
+      style: styles$u.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(PhosphorIcon, {
       icon: caretRight,
       style: iconStyle
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$t.errorExplanation
+      style: styles$u.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
-      style: styles$t.error,
+      style: styles$u.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20770,7 +20770,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24571,7 +24571,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$s.baseButton, color === "green" && styles$s.green, color === "orange" && styles$s.orange),
+      className: css(styles$t.baseButton, color === "green" && styles$t.green, color === "orange" && styles$t.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24586,7 +24586,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24806,23 +24806,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.containerHeader)
+    className: css(styles$s.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$r.containerTitle)
+    className: css(styles$s.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.container)
+    className: css(styles$s.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$r.row, styles$r.rowHeading)
+    className: css(styles$s.row, styles$s.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnLeft)
+    className: css(styles$s.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$r.containerHeader)
+    className: "pod-title " + css(styles$s.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.containerTitle)
+    className: css(styles$s.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnRight)
+    className: css(styles$s.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24835,11 +24835,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.container)
+    className: css(styles$s.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnLeft, styles$r.containerHeader)
+    className: css(styles$s.columnLeft, styles$s.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnLeft)
+    className: css(styles$s.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24852,28 +24852,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.containerHeader)
+    className: css(styles$s.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$r.containerTitle)
+    className: css(styles$s.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.containerHeader, styles$r.previewCollectionHeader)
+    className: css(styles$s.containerHeader, styles$s.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$r.containerTitle)
+    className: css(styles$s.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.container)
+    className: css(styles$s.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$r.row)
+    className: css(styles$s.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnLeft)
+    className: css(styles$s.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnRight)
+    className: css(styles$s.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$r.contentIndent)
+    className: css(path.length > 0 && styles$s.contentIndent)
   }, children));
 };
 
@@ -24996,11 +24996,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.row)
+    className: css(styles$s.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnLeft)
+    className: css(styles$s.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$r.sticky)
+    className: css(sticky && styles$s.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25008,9 +25008,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnRight)
+    className: css(styles$s.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$r.sticky)
+    className: css(sticky && styles$s.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25026,13 +25026,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.row)
+    className: css(styles$s.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnLeft)
+    className: css(styles$s.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$r.sticky)
+    className: css(sticky && styles$s.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$r.hintEditor),
+    className: css(styles$s.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25047,9 +25047,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnRight)
+    className: css(styles$s.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$r.sticky)
+    className: css(sticky && styles$s.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25066,9 +25066,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.columnLeft)
+    className: css(styles$s.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.tagsEditor)
+    className: css(styles$s.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25099,23 +25099,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$r.control)
+      className: css(styles$s.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$r.verticalFlip)
+      className: css(styles$s.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$r.control)
+      className: css(styles$s.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$r.control)
+      className: css(styles$s.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25123,7 +25123,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$r.arrayElement, !elementIsLeaf && styles$r.arrayElementAndNotLeaf)
+      className: css(styles$s.arrayElement, !elementIsLeaf && styles$s.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25149,7 +25149,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$r.objectElement)
+    className: css(styles$s.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25316,7 +25316,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25468,47 +25468,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$q.controlBar
+      style: styles$r.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$q.controls
+      style: styles$r.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$q.controlSelected : styles$q.control
+      style: mode === "edit" ? styles$r.controlSelected : styles$r.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$q.controlSelected : styles$q.control
+      style: mode === "preview" ? styles$r.controlSelected : styles$r.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$q.controlSelected : styles$q.control
+      style: mode === "json" ? styles$r.controlSelected : styles$r.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$q.controls
+      style: styles$r.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$q.controlSelected : styles$q.control
+      style: screen === "phone" ? styles$r.controlSelected : styles$r.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$q.controlSelected : styles$q.control
+      style: screen === "tablet" ? styles$r.controlSelected : styles$r.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$q.controlSelected : styles$q.control
+      style: screen === "desktop" ? styles$r.controlSelected : styles$r.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$q.editor
+      style: styles$r.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$q = {
+const styles$r = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -26998,10 +26998,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$p.title)
+      className: css(styles$q.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$p.input)
+      className: css(styles$q.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27026,7 +27026,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$p.hintsTitle)
+      className: css(styles$q.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27063,7 +27063,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28402,13 +28402,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$o.outerWrapper
+    style: styles$p.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29469,7 +29469,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$n.singleSelectShort
+    style: styles$o.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -29480,7 +29480,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29493,7 +29493,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$m.singleSelectShort
+    style: styles$n.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -29526,7 +29526,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29543,16 +29543,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$l.label)
+    className: css(styles$m.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$l.row, style]
+    style: [styles$m.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$l.spaceEnd
+    style: styles$m.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$l.spaceStart
+    style: styles$m.spaceStart
   }, label)));
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29946,10 +29946,10 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$k.resetSpaceTop
+      style: styles$l.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$k.backgroundUrlInput),
+      className: css(styles$l.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -29963,28 +29963,28 @@ class InteractiveGraphSettings extends React.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$k.rulerSection
+      style: styles$l.rulerSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$k.checkboxRow
+      style: styles$l.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$k.resetSpaceTop
+      style: styles$l.resetSpaceTop
     }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$k.resetSpaceTop
+      style: styles$l.resetSpaceTop
     })), (this.props.showRuler || this.props.showProtractor) && /*#__PURE__*/React.createElement(Banner, {
       layout: "floating",
       text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
       kind: "warning"
     }), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
-      style: styles$k.spaceTop
+      style: styles$l.spaceTop
     }, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$k.resetSpaceTop
+      style: styles$l.resetSpaceTop
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -29994,7 +29994,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "None",
-      style: styles$k.singleSelectShort
+      style: styles$l.singleSelectShort
     }, /*#__PURE__*/React.createElement(OptionItem, {
       value: "",
       label: "None",
@@ -30035,7 +30035,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "10",
-      style: styles$k.singleSelectShort
+      style: styles$l.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
       key: value,
       value: `${value}`,
@@ -30059,7 +30059,7 @@ InteractiveGraphSettings.defaultProps = {
   rulerLabel: "",
   rulerTicks: 10
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30104,10 +30104,10 @@ const LockedFigureSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$j.container
+    style: styles$k.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$j.addElementSelect
+    style: styles$k.addElementSelect
   }, [/*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-point`,
     label: "Point",
@@ -30118,7 +30118,7 @@ const LockedFigureSelect = props => {
     onClick: () => onChange("line")
   }, "Line")]));
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -30218,13 +30218,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `Color: ${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$i.colorSwatch, {
+    style: [styles$j.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30244,10 +30244,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$h.row, style]
+    style: [styles$i.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     htmlFor: id,
-    style: styles$h.label,
+    style: styles$i.label,
     tag: "label"
   }, "color"), /*#__PURE__*/React.createElement(SingleSelect, {
     id: id,
@@ -30266,7 +30266,7 @@ const ColorSelect = props => {
     })
   }, colorName))));
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30276,6 +30276,34 @@ const styles$h = StyleSheet.create({
   }
 });
 
+const LineSwatch = props => {
+  const {
+    color,
+    lineStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$h.container
+  }, /*#__PURE__*/React.createElement(View, {
+    "aria-label": `${color}, ${lineStyle}`,
+    style: [styles$h.lineSwatch, {
+      border: `5px ${lineStyle} ${lockedFigureColors[color]}`
+    }]
+  }));
+};
+const styles$h = StyleSheet.create({
+  container: {
+    backgroundColor: color.white,
+    justifyContent: "center",
+    padding: spacing.xSmall_8,
+    borderRadius: spacing.xxxSmall_4
+  },
+  lineSwatch: {
+    // Add a white outline so that the color swatch is visible when
+    // the dropdown option is highlighted with its blue background.
+    width: 40
+  }
+});
+
 const LockedFigureSettingsAccordion = props => {
   const {
     children,
@@ -30380,78 +30408,6 @@ const styles$e = StyleSheet.create({
   }
 });
 
-function focusWithChromeStickyFocusBugWorkaround(element) {
-  // NOTE(marksandstrom) Chrome sticky focus bug.
-  //
-  // There is a bug in Chrome related to sticky positioning and
-  // focus: When a child of an element with sticky positioning is
-  // focused with the focus() method, the scrollable area
-  // containing that element will scroll to the top (even though
-  // the element is already visble on the page). For a dropdown
-  // this means that the area will be scrolled to the top when
-  // the user interacts with the dropdown (since we actively
-  // manage dropdown header and option focus for keyboard users).
-  //
-  // To work around this bug the `preventScroll` focus option is
-  // used.
-  //
-  // Using `focusOptions` is an experimental browser feature
-  // "that should not be used in production code". However, since
-  // Chrome is the only browser we support that exhibits this
-  // buggy behavior and using `focusOptions` works around the
-  // bug, it is perfectly reasonable to use the feature in this
-  // case. We are not relying on the effect of the
-  // `preventScroll` option otherwise.
-  //
-  // focusOptions documentation:
-  //
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-  //
-  // Note that there could be cases where we want default focus() behavior.
-  // One that comes to mind is a dropdown with a long list of options that
-  // might be rendered off screen when opened. With this workaround the
-  // selected option would not be scrolled into view if the option is near
-  // the end of the list. We're not aware of any uses of the dropdown where
-  // this is an issue, however, so there isn't currently a way to out of the
-  // `preventScroll` behavior.
-
-  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
-  element.focus({
-    preventScroll: true
-  });
-}
-function getValidNumberFromString(value) {
-  const parsed = parseFloat(value);
-  // If the value is not a number, return 0.
-  return isNaN(parsed) ? 0 : parsed;
-}
-const DEFAULT_COLOR = "grayH";
-function getDefaultFigureForType(type) {
-  switch (type) {
-    case "point":
-      return {
-        type: "point",
-        coord: [0, 0],
-        color: DEFAULT_COLOR,
-        filled: true
-      };
-    case "line":
-      return {
-        type: "line",
-        kind: "line",
-        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
-          coord: [2, 2]
-        })],
-        color: DEFAULT_COLOR,
-        lineStyle: "solid",
-        showStartPoint: false,
-        showEndPoint: false
-      };
-    default:
-      throw new UnreachableCaseError(type);
-  }
-}
-
 /**
  * LockedPointSettings is a component that allows the user to edit the
  * settings of specifically a locked point on the graph.
@@ -30472,7 +30428,7 @@ const LockedPointSettings = props => {
   } = props;
 
   // Keep track of the coordinates via state as the user is editing them,
-  // before they are updated in the props on blur.
+  // before they are updated in the props as a valid number.
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
@@ -30483,21 +30439,25 @@ const LockedPointSettings = props => {
   const xCoordId = ids.get("x-coord");
   const yCoordId = ids.get("y-coord");
   const colorSelectId = ids.get("point-color-select");
-  function handleBlur() {
-    const validCoord = [getValidNumberFromString(coordState[0]), getValidNumberFromString(coordState[1])];
+  function handleCoordChange(newValue, coordIndex) {
+    // Update the local state (update the input field value).
+    const newCoordState = [...coordState];
+    newCoordState[coordIndex] = newValue;
+    setCoordState(newCoordState);
+
+    // If the new value is not a number, don't update the props.
+    // If it's empty, keep the props the same value instead of setting to 0.
+    if (isNaN(+newValue) || newValue === "") {
+      return;
+    }
 
-    // Make the text field only show valid numbers after blur.
-    setCoordState([validCoord[0].toString(), validCoord[1].toString()]);
-    // Update the graph with the new coordinates.
+    // Update the props (update the graph).
+    const newCoords = [...coord];
+    newCoords[coordIndex] = +newValue;
     onChangeProps({
-      coord: validCoord
+      coord: newCoords
     });
   }
-  function handleCoordChange(newValue, coordIndex) {
-    const newCoord = [...coordState];
-    newCoord[coordIndex] = newValue;
-    setCoordState(newCoord);
-  }
   function handleColorChange(newValue) {
     onChangeProps({
       color: newValue
@@ -30528,7 +30488,6 @@ const LockedPointSettings = props => {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    onBlur: handleBlur,
     style: styles$d.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
@@ -30541,7 +30500,6 @@ const LockedPointSettings = props => {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    onBlur: handleBlur,
     style: styles$d.textField
   })), onToggle && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
@@ -30563,7 +30521,7 @@ const LockedPointSettings = props => {
     }
   })), onRemove && /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     onRemove: onRemove,
-    figureAriaLabel: `locked point at ${coordState[0]}, ${coordState[1]}`
+    figureAriaLabel: `locked point at ${coord[0]}, ${coord[1]}`
   }));
 };
 const styles$d = StyleSheet.create({
@@ -30592,12 +30550,12 @@ const LockedLineSettings = props => {
     points,
     color: lineColor,
     lineStyle = "solid",
-    showStartPoint,
-    showEndPoint,
+    showPoint1,
+    showPoint2,
     onChangeProps,
     onRemove
   } = props;
-  const [startPoint, endPoint] = points;
+  const [point1, point2] = points;
 
   // Generate unique IDs so that the programmatic labels can be associated
   // with their respective text fields.
@@ -30605,8 +30563,9 @@ const LockedLineSettings = props => {
   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]})`;
+  const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
+  const lineLabel = `${capitalizeKind} (${point1.coord[0]},
+        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
   function handleChangePoint(newPointProps, index) {
     const newPoints = [...points];
     newPoints[index] = _extends({}, points[index], newPointProps);
@@ -30618,9 +30577,9 @@ const LockedLineSettings = props => {
     onChangeProps({
       color: newColor,
       // Keep the line's points' colors in sync with the line color.
-      points: [_extends({}, startPoint, {
+      points: [_extends({}, point1, {
         color: newColor
-      }), _extends({}, endPoint, {
+      }), _extends({}, point2, {
         color: newColor
       })]
     });
@@ -30630,8 +30589,9 @@ const LockedLineSettings = props => {
       style: styles$c.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
-    }), /*#__PURE__*/React.createElement(ColorSwatch, {
-      color: lineColor
+    }), /*#__PURE__*/React.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: lineStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles$c.row, styles$c.spaceUnder]
@@ -30688,28 +30648,28 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
-    label: "Start point",
-    toggled: showStartPoint
-  }, startPoint, {
+    label: "Point 1",
+    toggled: showPoint1
+  }, point1, {
     onToggle: newValue => onChangeProps({
-      showStartPoint: newValue
+      showPoint1: newValue
     }),
     onChangeProps: newProps => handleChangePoint(newProps, 0),
     style: styles$c.lockedPointSettingsContainer
   })), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
-    label: "End point",
-    toggled: showEndPoint
-  }, endPoint, {
+    label: "Point 2",
+    toggled: showPoint2
+  }, point2, {
     onToggle: newValue => onChangeProps({
-      showEndPoint: newValue
+      showPoint2: newValue
     }),
     onChangeProps: newProps => handleChangePoint(newProps, 1),
     style: styles$c.lockedPointSettingsContainer
   })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     onRemove: onRemove,
     figureAriaLabel: `locked line defined by
-                    ${startPoint.coord[0]}, ${startPoint.coord[1]} and
-                    ${endPoint.coord[0]}, ${endPoint.coord[1]}.`
+                    ${point1.coord[0]}, ${point1.coord[1]} and
+                    ${point2.coord[0]}, ${point2.coord[1]}.`
   }));
 };
 const styles$c = StyleSheet.create({
@@ -30755,6 +30715,73 @@ const LockedFigureSettings = props => {
   return null;
 };
 
+function focusWithChromeStickyFocusBugWorkaround(element) {
+  // NOTE(marksandstrom) Chrome sticky focus bug.
+  //
+  // There is a bug in Chrome related to sticky positioning and
+  // focus: When a child of an element with sticky positioning is
+  // focused with the focus() method, the scrollable area
+  // containing that element will scroll to the top (even though
+  // the element is already visble on the page). For a dropdown
+  // this means that the area will be scrolled to the top when
+  // the user interacts with the dropdown (since we actively
+  // manage dropdown header and option focus for keyboard users).
+  //
+  // To work around this bug the `preventScroll` focus option is
+  // used.
+  //
+  // Using `focusOptions` is an experimental browser feature
+  // "that should not be used in production code". However, since
+  // Chrome is the only browser we support that exhibits this
+  // buggy behavior and using `focusOptions` works around the
+  // bug, it is perfectly reasonable to use the feature in this
+  // case. We are not relying on the effect of the
+  // `preventScroll` option otherwise.
+  //
+  // focusOptions documentation:
+  //
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+  //
+  // Note that there could be cases where we want default focus() behavior.
+  // One that comes to mind is a dropdown with a long list of options that
+  // might be rendered off screen when opened. With this workaround the
+  // selected option would not be scrolled into view if the option is near
+  // the end of the list. We're not aware of any uses of the dropdown where
+  // this is an issue, however, so there isn't currently a way to out of the
+  // `preventScroll` behavior.
+
+  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
+  element.focus({
+    preventScroll: true
+  });
+}
+const DEFAULT_COLOR = "grayH";
+function getDefaultFigureForType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0],
+        color: DEFAULT_COLOR,
+        filled: true
+      };
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
+          coord: [2, 2]
+        })],
+        color: DEFAULT_COLOR,
+        lineStyle: "solid",
+        showPoint1: false,
+        showPoint2: false
+      };
+    default:
+      throw new UnreachableCaseError(type);
+  }
+}
+
 const LockedFiguresSection = props => {
   const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
   const {