@khanacademy/perseus-editor 6.7.0 → 6.10.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedEllipseFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
@@ -29,7 +29,7 @@ import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.7.0";
+const libVersion = "6.10.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -219,7 +219,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$z.button
+      style: styles$D.button
     }, ({
       hovered,
       focused,
@@ -227,7 +227,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$z = StyleSheet.create({
+const styles$D = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20732,13 +20732,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$y.expanded : styles$y.collapsed;
+  const iconStyle = props.isExpanded ? styles$C.expanded : styles$C.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$y = StyleSheet.create({
+const styles$C = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20771,16 +20771,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$x.errorContainer
+      style: styles$B.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$x.title,
+      style: styles$B.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$x.errorExplanation
+      style: styles$B.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$x.error,
+      style: styles$B.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20789,7 +20789,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$x = StyleSheet.create({
+const styles$B = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23445,7 +23445,7 @@ class StructuredItemDiff extends React.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$l,
+  InfoTip: InfoTip$n,
   InlineIcon: InlineIcon$7
 } = components;
 const {
@@ -23517,7 +23517,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$l, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$n, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23770,7 +23770,7 @@ CombinedHintsEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$k
+  InfoTip: InfoTip$m
 } = components;
 class ItemExtrasEditor extends React.Component {
   constructor(...args) {
@@ -23916,7 +23916,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement("div", {
   type: "checkbox",
   checked: props.checked,
   onChange: props.onChange
-})), /*#__PURE__*/React.createElement(InfoTip$k, null, props.infoTip));
+})), /*#__PURE__*/React.createElement(InfoTip$m, null, props.infoTip));
 
 const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {
@@ -24583,7 +24583,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$w.baseButton, color === "green" && styles$w.green, color === "orange" && styles$w.orange),
+      className: css(styles$A.baseButton, color === "green" && styles$A.green, color === "orange" && styles$A.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24598,7 +24598,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$w = StyleSheet.create({
+const styles$A = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24818,23 +24818,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.containerHeader)
+    className: css(styles$z.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$v.containerTitle)
+    className: css(styles$z.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.container)
+    className: css(styles$z.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$v.row, styles$v.rowHeading)
+    className: css(styles$z.row, styles$z.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnLeft)
+    className: css(styles$z.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$v.containerHeader)
+    className: "pod-title " + css(styles$z.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.containerTitle)
+    className: css(styles$z.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnRight)
+    className: css(styles$z.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24847,11 +24847,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.container)
+    className: css(styles$z.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnLeft, styles$v.containerHeader)
+    className: css(styles$z.columnLeft, styles$z.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnLeft)
+    className: css(styles$z.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24864,28 +24864,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.containerHeader)
+    className: css(styles$z.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$v.containerTitle)
+    className: css(styles$z.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.containerHeader, styles$v.previewCollectionHeader)
+    className: css(styles$z.containerHeader, styles$z.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$v.containerTitle)
+    className: css(styles$z.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.container)
+    className: css(styles$z.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$v.row)
+    className: css(styles$z.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnLeft)
+    className: css(styles$z.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnRight)
+    className: css(styles$z.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$v.contentIndent)
+    className: css(path.length > 0 && styles$z.contentIndent)
   }, children));
 };
 
@@ -25008,11 +25008,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$v.row)
+    className: css(styles$z.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnLeft)
+    className: css(styles$z.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$v.sticky)
+    className: css(sticky && styles$z.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25020,9 +25020,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnRight)
+    className: css(styles$z.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$v.sticky)
+    className: css(sticky && styles$z.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25038,13 +25038,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.row)
+    className: css(styles$z.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnLeft)
+    className: css(styles$z.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$v.sticky)
+    className: css(sticky && styles$z.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$v.hintEditor),
+    className: css(styles$z.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25059,9 +25059,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnRight)
+    className: css(styles$z.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$v.sticky)
+    className: css(sticky && styles$z.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25078,9 +25078,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.columnLeft)
+    className: css(styles$z.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.tagsEditor)
+    className: css(styles$z.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25111,23 +25111,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$v.control)
+      className: css(styles$z.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$v.verticalFlip)
+      className: css(styles$z.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$v.control)
+      className: css(styles$z.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$v.control)
+      className: css(styles$z.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25135,7 +25135,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$v.arrayElement, !elementIsLeaf && styles$v.arrayElementAndNotLeaf)
+      className: css(styles$z.arrayElement, !elementIsLeaf && styles$z.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25161,7 +25161,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$v.objectElement)
+    className: css(styles$z.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25328,7 +25328,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$v = StyleSheet.create({
+const styles$z = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25480,47 +25480,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$u.controlBar
+      style: styles$y.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$u.controls
+      style: styles$y.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$u.controlSelected : styles$u.control
+      style: mode === "edit" ? styles$y.controlSelected : styles$y.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$u.controlSelected : styles$u.control
+      style: mode === "preview" ? styles$y.controlSelected : styles$y.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$u.controlSelected : styles$u.control
+      style: mode === "json" ? styles$y.controlSelected : styles$y.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$u.controls
+      style: styles$y.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$u.controlSelected : styles$u.control
+      style: screen === "phone" ? styles$y.controlSelected : styles$y.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$u.controlSelected : styles$u.control
+      style: screen === "tablet" ? styles$y.controlSelected : styles$y.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$u.controlSelected : styles$u.control
+      style: screen === "desktop" ? styles$y.controlSelected : styles$y.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$u.editor
+      style: styles$y.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$u = {
+const styles$y = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -25731,7 +25731,7 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$j,
+  InfoTip: InfoTip$l,
   PropCheckBox: PropCheckBox$b
 } = components;
 const DEFAULT_WIDTH = 400;
@@ -25892,7 +25892,7 @@ class CSProgramEditor extends React.Component {
       label: "Show Editor",
       showEditor: this.props.showEditor,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
       label: "Show Buttons",
       showButtons: this.props.showButtons,
       onChange: this.props.onChange
@@ -25900,7 +25900,7 @@ class CSProgramEditor extends React.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
   }
 }
 CSProgramEditor.propTypes = _extends({}, Changeable.propTypes);
@@ -25986,7 +25986,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$i,
+  InfoTip: InfoTip$k,
   InlineIcon: InlineIcon$5
 } = components;
 const {
@@ -26055,14 +26055,14 @@ class DropdownEditor extends React.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React.createElement("ul", {
       className: "dropdown-choices"
@@ -26593,7 +26593,7 @@ const SortableItem = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$j,
   PropCheckBox: PropCheckBox$a
 } = components;
 
@@ -26847,11 +26847,11 @@ class ExpressionEditor extends React.Component {
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Use \xD7 for rendering multiplication instead of a center dot."
-    }), /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
       type: "text",
       defaultValue: this.props.functions.join(" "),
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
+    })), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
     }, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
@@ -26946,14 +26946,14 @@ class AnswerOption extends React.Component {
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must have the same form."
-    }), /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
       className: "answer-option"
     }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       simplify: this.props.simplify,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must be fully expanded and simplified."
-    }), /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
       className: "remove-container"
     }, removeButton)));
   }
@@ -27010,10 +27010,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$t.title)
+      className: css(styles$x.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$t.input)
+      className: css(styles$x.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27038,7 +27038,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$t.hintsTitle)
+      className: css(styles$x.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27075,7 +27075,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$t = StyleSheet.create({
+const styles$x = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27153,7 +27153,7 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 const {
   ButtonGroup: ButtonGroup$4,
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$i,
   PropCheckBox: PropCheckBox$9,
   RangeInput: RangeInput$6
 } = components;
@@ -27609,7 +27609,7 @@ const GraphSettings = createReactClass({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -27647,7 +27647,7 @@ const GraphSettings = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$f,
+  InfoTip: InfoTip$h,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
 const {
@@ -27730,7 +27730,7 @@ class GrapherEditor extends React.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass$1(sizeClass),
       range: this.props.graph.range,
@@ -27975,7 +27975,7 @@ IframeEditor.defaultProps = {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
-  InfoTip: InfoTip$e,
+  InfoTip: InfoTip$g,
   InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = components;
@@ -28024,7 +28024,7 @@ class ImageEditor extends React.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$e, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28048,7 +28048,7 @@ class ImageEditor extends React.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$e, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
+    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28212,7 +28212,7 @@ ImageEditor.defaultProps = {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$f
 } = components;
 const answerTypes = {
   number: {
@@ -28298,7 +28298,7 @@ class InputNumberEditor extends React.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". 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 anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". 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 anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28334,7 +28334,7 @@ class InputNumberEditor extends React.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28346,7 +28346,7 @@ class InputNumberEditor extends React.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -28414,13 +28414,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$s.outerWrapper
+    style: styles$w.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$s = StyleSheet.create({
+const styles$w = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29481,7 +29481,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$r.singleSelectShort
+    style: styles$v.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -29492,7 +29492,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$r = StyleSheet.create({
+const styles$v = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29505,7 +29505,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$q.singleSelectShort
+    style: styles$u.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -29538,7 +29538,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$q = StyleSheet.create({
+const styles$u = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29555,16 +29555,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$p.label)
+    className: css(styles$t.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$p.row, style]
+    style: [styles$t.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$p.spaceEnd
+    style: styles$t.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$p.spaceStart
+    style: styles$t.spaceStart
   }, label)));
 };
-const styles$p = StyleSheet.create({
+const styles$t = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29584,7 +29584,7 @@ const styles$p = StyleSheet.create({
 
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$c,
+  InfoTip: InfoTip$e,
   PropCheckBox: PropCheckBox$7,
   RangeInput: RangeInput$4
 } = components;
@@ -29990,10 +29990,10 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$o.resetSpaceTop
+      style: styles$s.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$o.backgroundUrlInput),
+      className: css(styles$s.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -30006,29 +30006,29 @@ 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$o.rulerSection
+    }), /*#__PURE__*/React.createElement(InfoTip$e, 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$s.rulerSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$o.checkboxRow
+      style: styles$s.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$o.resetSpaceTop
+      style: styles$s.resetSpaceTop
     }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$o.resetSpaceTop
+      style: styles$s.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$o.spaceTop
+      style: styles$s.spaceTop
     }, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$o.resetSpaceTop
+      style: styles$s.resetSpaceTop
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -30038,7 +30038,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "None",
-      style: styles$o.singleSelectShort
+      style: styles$s.singleSelectShort
     }, /*#__PURE__*/React.createElement(OptionItem, {
       value: "",
       label: "None",
@@ -30079,7 +30079,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "10",
-      style: styles$o.singleSelectShort
+      style: styles$s.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
       key: value,
       value: `${value}`,
@@ -30103,7 +30103,7 @@ InteractiveGraphSettings.defaultProps = {
   rulerLabel: "",
   rulerTicks: 10
 };
-const styles$o = StyleSheet.create({
+const styles$s = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30227,22 +30227,19 @@ const LockedFigureSelect = props => {
     id,
     onChange
   } = props;
+  const figureTypes = props.showM2Features ? ["point", "line", "ellipse", "vector"] : ["point", "line"];
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$n.container
+    style: styles$r.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$n.addElementSelect
-  }, [/*#__PURE__*/React.createElement(ActionItem, {
-    key: `${id}-point`,
-    label: "Point",
-    onClick: () => onChange("point")
-  }, "Point"), /*#__PURE__*/React.createElement(ActionItem, {
-    key: `${id}-line`,
-    label: "Line",
-    onClick: () => onChange("line")
-  }, "Line")]));
+    style: styles$r.addElementSelect
+  }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
+    key: `${id}-${figureType}`,
+    label: figureType,
+    onClick: () => onChange(figureType)
+  }, figureType))));
 };
-const styles$n = StyleSheet.create({
+const styles$r = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -30252,6 +30249,79 @@ const styles$n = StyleSheet.create({
   }
 });
 
+const {
+  InfoTip: InfoTip$d
+} = components;
+const degreeToRadian = degrees => {
+  return degrees / 180 * Math.PI;
+};
+const AngleInput = props => {
+  const {
+    angle,
+    onChange
+  } = props;
+  const [angleInput, setAngleInput] = React.useState(angle.toString());
+  const [isInDegrees, setIsInDegrees] = React.useState(false);
+  function handleAngleChange(newValue, useDegrees = isInDegrees) {
+    // Update the local state (update the input field value).
+    setAngleInput(newValue);
+    try {
+      // If the new value is a valid expression, update the props.
+      // Save the angle in radians.
+      const evaluatedAngle = KAS.parse(newValue).expr.eval();
+      if (useDegrees) {
+        onChange(degreeToRadian(evaluatedAngle));
+      } else {
+        onChange(evaluatedAngle);
+      }
+    } catch (e) {
+      // The user likely has not finished typing the expression.
+      // Do nothing.
+      return;
+    }
+  }
+  function handleAngleTypeChange() {
+    // Change the angle based on the new angle type.
+    handleAngleChange(angleInput, !isInDegrees);
+
+    // Update the angle to the new type.
+    setIsInDegrees(usingDegrees => !usingDegrees);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$q.row, styles$q.spaceUnder]
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$q.row
+  }, "angle", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
+    value: angleInput,
+    onChange: handleAngleChange,
+    style: styles$q.textField
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(LabelSmall, null, "radians"), /*#__PURE__*/React.createElement(View, {
+    style: styles$q.switch
+  }, /*#__PURE__*/React.createElement(Switch, {
+    onChange: handleAngleTypeChange,
+    checked: isInDegrees
+  })), /*#__PURE__*/React.createElement(LabelSmall, null, "degrees"), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "The angle of rotation for the ellipse (if the x radius and y radius are different)."), /*#__PURE__*/React.createElement("p", null, "Expressions will be evaluted (e.g. \"pi/2\" or \"5pi/4\").")));
+};
+const styles$q = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  switch: {
+    marginLeft: spacing.xxSmall_6,
+    marginRight: spacing.xxSmall_6
+  },
+  textField: {
+    maxWidth: spacing.xxxLarge_64
+  }
+});
+
 const ColorSwatch = props => {
   const {
     color: color$1,
@@ -30262,13 +30332,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$m.colorSwatch, {
+    style: [styles$p.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$m = StyleSheet.create({
+const styles$p = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30286,16 +30356,14 @@ const ColorSelect = props => {
     style,
     onChange
   } = props;
-  const ids = useUniqueIdWithMock();
-  const id = ids.get("color-select");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$l.row, style]
+    style: [styles$o.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: id,
-    style: styles$l.label,
-    tag: "label"
-  }, "color"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: id,
+    tag: "label",
+    style: styles$o.row
+  }, "color", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: selectedValue,
     onChange: onChange
     // Placeholder is required, but never gets used.
@@ -30309,23 +30377,22 @@ const ColorSelect = props => {
       color: colorName,
       decorative: true
     })
-  }, colorName))));
+  }, colorName)))));
 };
-const styles$l = StyleSheet.create({
+const styles$o = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  },
-  label: {
-    marginInlineEnd: spacing.xxxSmall_4
   }
 });
 
 const CoordinatePairInput = props => {
   const {
     coord,
+    labels,
     error,
-    onChangeProps
+    onChange
   } = props;
 
   // Keep track of the coordinates via state as the user is editing them,
@@ -30333,12 +30400,6 @@ const CoordinatePairInput = props => {
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = useUniqueIdWithMock();
-  const xCoordId = ids.get("x-coord");
-  const yCoordId = ids.get("y-coord");
   function handleCoordChange(newValue, coordIndex) {
     // Update the local state (update the input field value).
     const newCoordState = [...coordState];
@@ -30354,47 +30415,43 @@ const CoordinatePairInput = props => {
     // Update the props (update the graph).
     const newCoords = [...coord];
     newCoords[coordIndex] = +newValue;
-    onChangeProps({
-      coord: newCoords
-    });
+    onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
-    style: [styles$k.row, styles$k.spaceUnder]
+    style: [styles$n.row, styles$n.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: xCoordId,
-    style: styles$k.label,
-    tag: "label"
-  }, "x coord"), /*#__PURE__*/React.createElement(TextField, {
-    id: xCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$k.textField, error ? styles$k.errorField : undefined]
-  }), /*#__PURE__*/React.createElement(Strut, {
+    style: [styles$n.textField, error ? styles$n.errorField : undefined]
+  })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: yCoordId,
-    style: styles$k.label,
-    tag: "label"
-  }, "y coord"), /*#__PURE__*/React.createElement(TextField, {
-    id: yCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$k.textField, error ? styles$k.errorField : undefined]
-  })));
+    style: [styles$n.textField, error ? styles$n.errorField : undefined]
+  }))));
 };
-const styles$k = StyleSheet.create({
+const styles$n = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: spacing.xxSmall_6
-  },
   textField: {
     width: spacing.xxxLarge_64
   },
@@ -30404,32 +30461,40 @@ const styles$k = StyleSheet.create({
   }
 });
 
-const LabeledSwitch = props => {
+const EllipseSwatch = props => {
   const {
-    checked,
-    label,
-    style,
-    onChange
+    color,
+    fillStyle,
+    strokeStyle
   } = props;
-  const ids = useUniqueIdWithMock();
-  const switchId = ids.get("switch");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$j.row, style]
-  }, /*#__PURE__*/React.createElement(Switch, {
-    id: switchId,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    htmlFor: switchId
-  }, label));
+    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
+    style: [styles$m.container, {
+      border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$m.innerCircle, {
+      backgroundColor: lockedFigureColors[color],
+      opacity: lockedEllipseFillStyles[fillStyle]
+    }]
+  }));
 };
-const styles$j = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
+const styles$m = StyleSheet.create({
+  container: {
+    // Add a white outline so that the color swatch is visible when
+    // the dropdown option is highlighted with its blue background.
+    outline: `2px solid ${color.offWhite}`,
+    borderRadius: "50%",
+    width: spacing.xLarge_32,
+    height: spacing.large_24,
+    backgroundColor: color.white,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  innerCircle: {
+    width: 28,
+    height: 20,
+    borderRadius: "50%"
   }
 });
 
@@ -30451,14 +30516,14 @@ const LockedFigureSettingsAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$i.container, containerStyle],
-    headerStyle: styles$i.accordionHeader,
+    style: [styles$l.container, containerStyle],
+    headerStyle: styles$l.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$i.accordionPanel, panelStyle]
+    style: [styles$l.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$i = StyleSheet.create({
+const styles$l = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -30479,6 +30544,185 @@ const styles$i = StyleSheet.create({
   }
 });
 
+/**
+ * The part of a locked figure settings panel that contains actions
+ * for this panel and its associated locked figure, including
+ * the delete button.
+ */
+const LockedFigureSettingsActions = props => {
+  const {
+    onRemove,
+    figureAriaLabel
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$k.container
+  }, /*#__PURE__*/React.createElement(Button, {
+    startIcon: trashIcon,
+    "aria-label": `Delete ${figureAriaLabel}`,
+    onClick: onRemove,
+    kind: "tertiary",
+    style: styles$k.deleteButton
+  }, "Delete"));
+};
+const styles$k = StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: spacing.xxxSmall_4
+  },
+  deleteButton: {
+    // Line up the delete icon with the rest of the content.
+    marginInlineStart: -spacing.xxxSmall_4
+  }
+});
+
+const {
+  InfoTip: InfoTip$c
+} = components;
+const LockedEllipseSettings = props => {
+  const {
+    center,
+    radius,
+    angle,
+    color,
+    fillStyle,
+    strokeStyle,
+    expanded,
+    onToggle,
+    onChangeProps,
+    onRemove
+  } = props;
+  function handleColorChange(newValue) {
+    onChangeProps({
+      color: newValue
+    });
+  }
+  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: expanded,
+    onToggle: onToggle,
+    header:
+    /*#__PURE__*/
+    // Summary: Ellipse, center, radius, color (opacity, dashed)
+    React.createElement(View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), /*#__PURE__*/React.createElement(EllipseSwatch, {
+      color: props.color,
+      fillStyle: fillStyle,
+      strokeStyle: strokeStyle
+    }))
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles$j.row
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: center,
+    onChange: newCoords => onChangeProps({
+      center: newCoords
+    })
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$j.spaceUnder
+  }, /*#__PURE__*/React.createElement(InfoTip$c, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: radius,
+    labels: ["x radius", "y radius"],
+    onChange: newCoords => onChangeProps({
+      radius: newCoords
+    })
+  }), /*#__PURE__*/React.createElement(AngleInput, {
+    angle: angle,
+    onChange: newAngle => onChangeProps({
+      angle: newAngle
+    })
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles$j.row, styles$j.spaceUnder]
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: color,
+    onChange: handleColorChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.medium_16
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$j.row
+  }, "fill", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: fillStyle,
+    onChange: value => onChangeProps({
+      fillStyle: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, Object.keys(lockedEllipseFillStyles).map(option => /*#__PURE__*/React.createElement(OptionItem, {
+    key: option,
+    value: option,
+    label: option
+  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$j.row
+  }, "stroke", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: strokeStyle,
+    onChange: value => onChangeProps({
+      strokeStyle: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "solid",
+    label: "solid"
+  }, "solid"), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "dashed",
+    label: "dashed"
+  }, "dashed"))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    onRemove: onRemove,
+    figureAriaLabel: `locked ellipse at ${center[0]}, ${center[1]}`
+  }));
+};
+const styles$j = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
+  }
+});
+
+const LabeledSwitch = props => {
+  const {
+    checked,
+    label,
+    style,
+    onChange
+  } = props;
+  const ids = useUniqueIdWithMock();
+  const switchId = ids.get("switch");
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$i.row, style]
+  }, /*#__PURE__*/React.createElement(Switch, {
+    id: switchId,
+    checked: checked,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    htmlFor: switchId
+  }, label));
+};
+const styles$i = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
 /**
  * DefiningPointSettings is a component that allows the user to edit the
  * settings of a point that defines a locked figure (ex. line) on the graph.
@@ -30520,7 +30764,11 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    onChangeProps: onChangeProps
+    onChange: newCoords => {
+      onChangeProps({
+        coord: newCoords
+      });
+    }
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
@@ -30587,39 +30835,6 @@ const styles$g = StyleSheet.create({
   }
 });
 
-/**
- * The part of a locked figure settings panel that contains actions
- * for this panel and its associated locked figure, including
- * the delete button.
- */
-const LockedFigureSettingsActions = props => {
-  const {
-    onRemove,
-    figureAriaLabel
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles$f.container
-  }, /*#__PURE__*/React.createElement(Button, {
-    startIcon: trashIcon,
-    "aria-label": `Delete ${figureAriaLabel}`,
-    onClick: onRemove,
-    kind: "tertiary",
-    style: styles$f.deleteButton
-  }, "Delete"));
-};
-const styles$f = StyleSheet.create({
-  container: {
-    width: "100%",
-    flexDirection: "row",
-    alignItems: "center",
-    marginTop: spacing.xxxSmall_4
-  },
-  deleteButton: {
-    // Line up the delete icon with the rest of the content.
-    marginInlineStart: -spacing.xxxSmall_4
-  }
-});
-
 const lengthZeroStr = "The line cannot have length 0.";
 const LockedLineSettings = props => {
   const {
@@ -30633,12 +30848,6 @@ const LockedLineSettings = props => {
     onRemove
   } = props;
   const [point1, point2] = points;
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = useUniqueIdWithMock();
-  const kindSelectId = ids.get("line-kind-select");
-  const styleSelectId = ids.get("line-style-select");
   const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
   const lineLabel = `${capitalizeKind} (${point1.coord[0]},
         ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
@@ -30667,21 +30876,19 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$e.row
+      style: styles$f.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
       color: lineColor,
       lineStyle: lineStyle
     }))
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$e.row, styles$e.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: kindSelectId,
-    style: styles$e.label,
-    tag: "label"
-  }, "kind"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: kindSelectId,
+    tag: "label",
+    style: [styles$f.row, styles$f.spaceUnder]
+  }, "kind", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: kind,
     onChange: value => onChangeProps({
       kind: value
@@ -30699,20 +30906,18 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: [styles$e.row, styles$e.spaceUnder]
+    style: styles$f.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles$e.row
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: styleSelectId,
-    style: styles$e.label,
-    tag: "label"
-  }, "style"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: styleSelectId,
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$f.row
+  }, "style", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: lineStyle,
     onChange: value => onChangeProps({
       lineStyle: value
@@ -30720,7 +30925,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$e.selectMarginOffset
+    style: styles$f.selectMarginOffset
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
@@ -30728,7 +30933,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$e.errorText
+    style: styles$f.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30754,7 +30959,7 @@ const LockedLineSettings = props => {
                     ${point2.coord[0]}, ${point2.coord[1]}.`
   }));
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30762,9 +30967,6 @@ const styles$e = StyleSheet.create({
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: spacing.xxxSmall_4
-  },
   selectMarginOffset: {
     // Align with the point settings accordions.
     marginInlineEnd: -spacing.xxxSmall_4
@@ -30800,7 +31002,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$d.row
+      style: styles$e.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30809,11 +31011,15 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    onChangeProps: onChangeProps
+    onChange: newCoord => {
+      onChangeProps({
+        coord: newCoord
+      });
+    }
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$d.spaceUnder
+    style: styles$e.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30827,7 +31033,7 @@ const LockedPointSettings = props => {
     figureAriaLabel: `locked point at ${coord[0]}, ${coord[1]}`
   }));
 };
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30837,6 +31043,113 @@ const styles$d = StyleSheet.create({
   }
 });
 
+/**
+ * LockedVectorSettings is a component that allows the user to edit the
+ * settings of specifically a locked vector on the graph.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const lengthErrorMessage = "The vector cannot have length 0.";
+const LockedVectorSettings = props => {
+  const {
+    points,
+    color: lineColor,
+    onChangeProps,
+    onRemove
+  } = props;
+  const [tail, tip] = points;
+  const lineLabel = `Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;
+
+  // Check if the line has length 0.
+  const isInvalid = vector.equal(tail, tip);
+  function handleChangePoint(newCoord, index) {
+    if (typeof newCoord !== "undefined") {
+      const newPoints = [...points];
+      newPoints[index] = [...newCoord];
+      onChangeProps({
+        points: newPoints
+      });
+    }
+  }
+  function handleColorChange(newColor) {
+    onChangeProps({
+      color: newColor
+    });
+  }
+  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$d.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), /*#__PURE__*/React.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: "solid"
+    }))
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$d.row, styles$d.spaceUnder]
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: handleColorChange
+  })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
+    style: styles$d.errorText
+  }, lengthErrorMessage), /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: true // Initial state is expanded
+    ,
+    containerStyle: styles$d.container,
+    panelStyle: styles$d.accordionPanel,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$d.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: tail,
+    error: isInvalid,
+    onChange: newProps => {
+      handleChangePoint(newProps, 0);
+    }
+  })), /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: true // Initial state is expanded
+    ,
+    containerStyle: styles$d.container,
+    panelStyle: styles$d.accordionPanel,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$d.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: tip,
+    error: isInvalid,
+    onChange: newProps => {
+      handleChangePoint(newProps, 1);
+    }
+  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    onRemove: onRemove,
+    figureAriaLabel: `locked vector defined by starting point
+                    ${tail[0]}, ${tail[1]} and extending to
+                    ${tip[0]}, ${tip[1]}.`
+  }));
+};
+const styles$d = StyleSheet.create({
+  accordionPanel: {
+    paddingBottom: spacing.medium_16
+  },
+  container: {
+    marginTop: spacing.xSmall_8,
+    marginBottom: 0,
+    marginLeft: -spacing.xxxSmall_4,
+    marginRight: -spacing.xxxSmall_4,
+    backgroundColor: color.white
+  },
+  errorText: {
+    color: color.red,
+    marginTop: spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
 /**
  * LockedFigureSettings takes in a figure and renders the
  * respective settings for that figure type.
@@ -30852,6 +31165,16 @@ const LockedFigureSettings = props => {
       return /*#__PURE__*/React.createElement(LockedPointSettings, props);
     case "line":
       return /*#__PURE__*/React.createElement(LockedLineSettings, props);
+    case "ellipse":
+      if (props.showM2Features) {
+        return /*#__PURE__*/React.createElement(LockedEllipseSettings, props);
+      }
+      break;
+    case "vector":
+      if (props.showM2Features) {
+        return /*#__PURE__*/React.createElement(LockedVectorSettings, props);
+      }
+      break;
   }
   return null;
 };
@@ -30918,15 +31241,22 @@ function getDefaultFigureForType(type) {
         showPoint1: false,
         showPoint2: false
       };
-    case "circle":
+    case "ellipse":
       return {
-        type: "circle",
+        type: "ellipse",
         center: [0, 0],
-        radius: 1,
+        radius: [1, 1],
+        angle: 0,
         color: DEFAULT_COLOR,
         fillStyle: "none",
         strokeStyle: "solid"
       };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
     default:
       throw new UnreachableCaseError(type);
   }
@@ -30982,21 +31312,15 @@ const LockedFiguresSection = props => {
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!(figures != null && figures.length);
   return /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
-    if (figure.type === "circle") {
-      // TODO(LEMS-1941): Implement circle locked figure settings.
-      // Remove this block once circle locked figure settings are
-      // implemented.
-      return;
-    }
     return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
+      key: `${uniqueId}-locked-${figure}-${index}`,
       showM2Features: props.showM2Features,
       expanded: expandedStates[index],
       onToggle: newValue => {
         const newExpanded = [...expandedStates];
         newExpanded[index] = newValue;
         setExpandedStates(newExpanded);
-      },
-      key: `${uniqueId}-locked-${figure}-${index}`
+      }
     }, figure, {
       onChangeProps: newProps => changeProps(index, newProps),
       onRemove: () => removeLockedFigure(index)
@@ -31004,6 +31328,7 @@ const LockedFiguresSection = props => {
   }), /*#__PURE__*/React.createElement(View, {
     style: styles$c.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
+    showM2Features: props.showM2Features,
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
   }), /*#__PURE__*/React.createElement(Strut, {
@@ -31117,7 +31442,7 @@ class InteractiveGraphEditor extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3;
+    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$apiOption, _this$props$apiOption2;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -31368,8 +31693,8 @@ class InteractiveGraphEditor extends React.Component {
     }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
-    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["interactive-graph-locked-features-m1"]) && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
-      showM2Features: (_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3["interactive-graph-locked-features-m2"],
+    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+      showM2Features: (_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2["interactive-graph-locked-features-m2"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));