@khanacademy/perseus-editor 6.11.0 → 7.0.0

package/dist/es/index.js

@@ -18,18 +18,25 @@ import { point, vector, number } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
 import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
-import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
+import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
 import { LabelSmall, LabelMedium, LabelLarge, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
-import Banner from '@khanacademy/wonder-blocks-banner';
 import Button from '@khanacademy/wonder-blocks-button';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
+import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import caretDoubleDownIcon from '@phosphor-icons/core/bold/caret-double-down-bold.svg';
+import caretDoubleUpIcon from '@phosphor-icons/core/bold/caret-double-up-bold.svg';
+import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
+import caretUpIcon from '@phosphor-icons/core/bold/caret-up-bold.svg';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 import Switch from '@khanacademy/wonder-blocks-switch';
+import minusCircle from '@phosphor-icons/core/regular/minus-circle.svg';
+import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
+import Banner from '@khanacademy/wonder-blocks-banner';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.11.0";
+const libVersion = "7.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -219,7 +226,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$D.button
+      style: styles$G.button
     }, ({
       hovered,
       focused,
@@ -227,7 +234,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$D = StyleSheet.create({
+const styles$G = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20732,13 +20739,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$C.expanded : styles$C.collapsed;
+  const iconStyle = props.isExpanded ? styles$F.expanded : styles$F.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$C = StyleSheet.create({
+const styles$F = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20771,16 +20778,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$B.errorContainer
+      style: styles$E.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$B.title,
+      style: styles$E.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$B.errorExplanation
+      style: styles$E.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$B.error,
+      style: styles$E.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20789,7 +20796,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$B = StyleSheet.create({
+const styles$E = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24583,7 +24590,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$A.baseButton, color === "green" && styles$A.green, color === "orange" && styles$A.orange),
+      className: css(styles$D.baseButton, color === "green" && styles$D.green, color === "orange" && styles$D.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24598,7 +24605,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$A = StyleSheet.create({
+const styles$D = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24818,23 +24825,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.containerHeader)
+    className: css(styles$C.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$z.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.container)
+    className: css(styles$C.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$z.row, styles$z.rowHeading)
+    className: css(styles$C.row, styles$C.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$z.containerHeader)
+    className: "pod-title " + css(styles$C.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnRight)
+    className: css(styles$C.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24847,11 +24854,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.container)
+    className: css(styles$C.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnLeft, styles$z.containerHeader)
+    className: css(styles$C.columnLeft, styles$C.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24864,28 +24871,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.containerHeader)
+    className: css(styles$C.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$z.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.containerHeader, styles$z.previewCollectionHeader)
+    className: css(styles$C.containerHeader, styles$C.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$z.containerTitle)
+    className: css(styles$C.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.container)
+    className: css(styles$C.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$z.row)
+    className: css(styles$C.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnLeft)
+    className: css(styles$C.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnRight)
+    className: css(styles$C.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$z.contentIndent)
+    className: css(path.length > 0 && styles$C.contentIndent)
   }, children));
 };
 
@@ -25008,11 +25015,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$z.row)
+    className: css(styles$C.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$z.sticky)
+    className: css(sticky && styles$C.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25020,9 +25027,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnRight)
+    className: css(styles$C.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$z.sticky)
+    className: css(sticky && styles$C.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25038,13 +25045,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.row)
+    className: css(styles$C.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$z.sticky)
+    className: css(sticky && styles$C.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$z.hintEditor),
+    className: css(styles$C.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25059,9 +25066,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnRight)
+    className: css(styles$C.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$z.sticky)
+    className: css(sticky && styles$C.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25078,9 +25085,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.columnLeft)
+    className: css(styles$C.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$z.tagsEditor)
+    className: css(styles$C.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25111,23 +25118,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$z.control)
+      className: css(styles$C.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$z.verticalFlip)
+      className: css(styles$C.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$z.control)
+      className: css(styles$C.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$z.control)
+      className: css(styles$C.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25135,7 +25142,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$z.arrayElement, !elementIsLeaf && styles$z.arrayElementAndNotLeaf)
+      className: css(styles$C.arrayElement, !elementIsLeaf && styles$C.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25161,7 +25168,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$z.objectElement)
+    className: css(styles$C.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25328,7 +25335,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$z = StyleSheet.create({
+const styles$C = 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 +25487,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$y.controlBar
+      style: styles$B.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$y.controls
+      style: styles$B.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$y.controlSelected : styles$y.control
+      style: mode === "edit" ? styles$B.controlSelected : styles$B.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$y.controlSelected : styles$y.control
+      style: mode === "preview" ? styles$B.controlSelected : styles$B.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$y.controlSelected : styles$y.control
+      style: mode === "json" ? styles$B.controlSelected : styles$B.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$y.controls
+      style: styles$B.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$y.controlSelected : styles$y.control
+      style: screen === "phone" ? styles$B.controlSelected : styles$B.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$y.controlSelected : styles$y.control
+      style: screen === "tablet" ? styles$B.controlSelected : styles$B.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$y.controlSelected : styles$y.control
+      style: screen === "desktop" ? styles$B.controlSelected : styles$B.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$y.editor
+      style: styles$B.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$y = {
+const styles$B = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27010,10 +27017,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$x.title)
+      className: css(styles$A.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$x.input)
+      className: css(styles$A.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27038,7 +27045,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$x.hintsTitle)
+      className: css(styles$A.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27075,7 +27082,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$x = StyleSheet.create({
+const styles$A = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28414,13 +28421,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$w.outerWrapper
+    style: styles$z.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$w = StyleSheet.create({
+const styles$z = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29457,95 +29464,6 @@ class InteractionEditor extends React.Component {
 InteractionEditor.widgetName = "interaction";
 InteractionEditor.defaultProps = defaultInteractionProps;
 
-const UNLIMITED = "unlimited";
-// Parses a string (ostensibly from some UI element that only supports string
-// types, such as a <select />) into a numeric point count or the special sigil
-// "unlimited". Note that 0 is a special case, and means "unlimited".
-const parsePointCount = points => {
-  const parsed = parseInt(points, 10);
-  if (isNaN(parsed)) {
-    return UNLIMITED;
-  }
-  return parsed === 0 ? UNLIMITED : parsed;
-};
-
-const GraphPointsCountSelector = ({
-  numPoints: _numPoints = 1,
-  onChange
-}) => {
-  return /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: `${_numPoints}`,
-    onChange: newValue => {
-      onChange(parsePointCount(newValue));
-    }
-    // Never uses placeholder, always has value
-    ,
-    placeholder: "",
-    style: styles$v.singleSelectShort
-  }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
-    key: n,
-    value: `${n}`,
-    label: `${n} point${n > 1 ? "s" : ""}`
-  })), /*#__PURE__*/React.createElement(OptionItem, {
-    key: "unlimited",
-    value: UNLIMITED,
-    label: "unlimited"
-  })]);
-};
-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.
-    height: 26
-  }
-});
-
-const GraphTypeSelector = props => {
-  return /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: props.graphType,
-    onChange: props.onChange,
-    placeholder: "Select a graph type",
-    style: styles$u.singleSelectShort
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "linear",
-    label: "Linear function"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "quadratic",
-    label: "Quadratic function"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "sinusoid",
-    label: "Sinusoid function"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "circle",
-    label: "Circle"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "point",
-    label: "Point(s)"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "linear-system",
-    label: "Linear System"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "polygon",
-    label: "Polygon"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "segment",
-    label: "Line Segment(s)"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "ray",
-    label: "Ray"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "angle",
-    label: "Angle"
-  }));
-};
-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.
-    height: 26
-  }
-});
-
 // Renders the given children in a View laid out horizontally.
 const LabeledRow = props => {
   const {
@@ -29555,16 +29473,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$t.label)
+    className: css(styles$y.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.row, style]
+    style: [styles$y.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$t.spaceEnd
+    style: styles$y.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$t.spaceStart
+    style: styles$y.spaceStart
   }, label)));
 };
-const styles$t = StyleSheet.create({
+const styles$y = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29582,1764 +29500,2143 @@ const styles$t = StyleSheet.create({
   }
 });
 
-const {
-  ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$d,
-  PropCheckBox: PropCheckBox$7,
-  RangeInput: RangeInput$4
-} = components;
-const defaultBackgroundImage$1 = {
-  url: null,
-  width: 0,
-  height: 0
+const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
 };
-function numSteps(range, step) {
-  return Math.floor((range[1] - range[0]) / step);
-}
-function Heading({
-  title,
-  isOpen,
-  onToggle
-}) {
-  return /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: color.offBlack8,
-      padding: spacing.xSmall_8,
-      marginTop: spacing.small_12,
-      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-      // variable found in perseus-editor.less. For now, it must
-      // match otherwise there's a gap from this header to the edge
-      // of the editor borders.
-      marginInline: -10,
-      cursor: "pointer"
-    },
-    onClick: () => onToggle == null ? void 0 : onToggle(!isOpen)
-  }, /*#__PURE__*/React.createElement(LabelSmall, null, title), /*#__PURE__*/React.createElement(ToggleableCaret, {
-    isExpanded: isOpen
-  }));
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [styles$x.grow, style]
+    });
+  }
 }
-class InteractiveGraphSettings extends React.Component {
-  static stateFromProps(props) {
-    return {
-      labelsTextbox: props.labels,
-      gridStepTextbox: props.gridStep,
-      snapStepTextbox: props.snapStep,
-      stepTextbox: props.step,
-      rangeTextbox: props.range,
-      // Shallow-copied clone
-      backgroundImage: _extends({}, props.backgroundImage)
-    };
+const styles$x = StyleSheet.create({
+  grow: {
+    flexGrow: 1
   }
-  constructor(props) {
-    super(props);
-    this._isMounted = false;
-    this.bgUrlRef = /*#__PURE__*/React.createRef();
-    this.labelXRef = /*#__PURE__*/React.createRef();
-    this.labelYRef = /*#__PURE__*/React.createRef();
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    // TODO(aria): Make either a wrapper for standard events to work
-    // with this.change, or make these use some TextInput/NumberInput box
-    this.changeRulerLabel = e => {
-      this.change({
-        rulerLabel: e.target.value
-      });
-    };
-    this.changeRulerTicks = e => {
-      this.change({
-        rulerTicks: +e.target.value
-      });
-    };
-    this.changeBackgroundUrl = e => {
-      var _this$bgUrlRef$curren;
-      // Only continue on blur or "enter"
-      if (e.type === "keypress" && e.key !== "Enter") {
-        return;
-      }
-      const setUrl = (url, width, height) => {
-        // Shallow-copied clone
-        const image = _extends({}, this.props.backgroundImage);
-        image.url = url;
-        image.width = width;
-        image.height = height;
-        this.setState({
-          backgroundImage: image
-        }, this.changeGraph);
-      };
-      const url = (_this$bgUrlRef$curren = this.bgUrlRef.current) == null ? void 0 : _this$bgUrlRef$curren.value;
-      if (url) {
-        Util.getImageSize(url, (width, height) => {
-          if (this._isMounted) {
-            setUrl(url, width, height);
-          }
-        });
-      } else {
-        setUrl(null, 0, 0);
-      }
-    };
-    this.renderLabelChoices = choices => {
-      return choices.map(nameAndValue => /*#__PURE__*/React.createElement("option", {
-        key: nameAndValue[1],
-        value: nameAndValue[1]
-      }, nameAndValue[0]));
-    };
-    this.validRange = range => {
-      const numbers = _.every(range, function (num) {
-        return _.isFinite(num);
-      });
-      if (!numbers) {
-        return "Range must be a valid number";
-      }
-      if (range[0] >= range[1]) {
-        return "Range must have a higher number on the right";
-      }
-      return true;
-    };
-    this.validateStepValue = settings => {
-      const {
-        step,
-        range,
-        name,
-        minTicks,
-        maxTicks
-      } = settings;
-      const nSteps = numSteps(range, step);
-      if (nSteps < minTicks) {
-        return name + " is too large, there must be at least " + minTicks + " ticks.";
-      }
-      if (nSteps > maxTicks) {
-        return name + " is too small, there can be at most " + maxTicks + " ticks.";
-      }
-      return true;
-    };
-    this.validSnapStep = (step, range) => {
-      return this.validateStepValue({
-        step: step,
-        range: range,
-        name: "Snap step",
-        minTicks: 5,
-        maxTicks: 60
-      });
-    };
-    this.validGridStep = (step, range) => {
-      return this.validateStepValue({
-        step: step,
-        range: range,
-        name: "Grid step",
-        minTicks: 3,
-        maxTicks: 60
-      });
-    };
-    this.validStep = (step, range) => {
-      return this.validateStepValue({
-        step: step,
-        range: range,
-        name: "Step",
-        minTicks: 3,
-        maxTicks: 20
-      });
-    };
-    this.validBackgroundImageSize = image => {
-      // Ignore empty images
-      if (!image.url) {
-        return true;
-      }
-      const validSize = image.width <= 450 && image.height <= 450;
-      if (!validSize) {
-        return "Image must be smaller than 450px x 450px.";
-      }
-      return true;
-    };
-    this.validateGraphSettings = (range, step, gridStep, snapStep, image) => {
-      const self = this;
-      let msg;
-      const goodRange = _.every(range, function (range) {
-        msg = self.validRange(range);
-        return msg === true;
-      });
-      if (!goodRange) {
-        return msg;
-      }
-      const goodStep = _.every(step, function (step, i) {
-        msg = self.validStep(step, range[i]);
-        return msg === true;
-      });
-      if (!goodStep) {
-        return msg;
-      }
-      const goodGridStep = _.every(gridStep, function (gridStep, i) {
-        msg = self.validGridStep(gridStep, range[i]);
-        return msg === true;
-      });
-      if (!goodGridStep) {
-        return msg;
-      }
-      const goodSnapStep = _.every(snapStep, function (snapStep, i) {
-        msg = self.validSnapStep(snapStep, range[i]);
-        return msg === true;
-      });
-      if (!goodSnapStep) {
-        return msg;
-      }
-      const goodImageSize = this.validBackgroundImageSize(image);
-      if (goodImageSize !== true) {
-        msg = goodImageSize;
-        return msg;
-      }
-      return true;
-    };
-    this.changeLabel = (i, e) => {
-      const val = e.target.value;
-      const labels = this.state.labelsTextbox.slice();
-      labels[i] = val;
-      this.setState({
-        labelsTextbox: labels
-      }, this.changeGraph);
-    };
-    this.changeRange = (i, values) => {
-      const ranges = this.state.rangeTextbox.slice();
-      ranges[i] = values;
-      const step = this.state.stepTextbox.slice();
-      const gridStep = this.state.gridStepTextbox.slice();
-      const snapStep = this.state.snapStepTextbox.slice();
-      const scale = Util.scaleFromExtent(ranges[i], this.props.box[i]);
-      if (this.validRange(ranges[i]) === true) {
-        step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
-        const gridStepValue = Util.gridStepFromTickStep(step[i], scale);
-        if (gridStepValue) {
-          gridStep[i] = gridStepValue;
-        }
-        snapStep[i] = gridStep[i] / 2;
-      }
-      this.setState({
-        stepTextbox: step,
-        gridStepTextbox: gridStep,
-        snapStepTextbox: snapStep,
-        rangeTextbox: ranges
-      }, this.changeGraph);
-    };
-    this.changeStep = step => {
-      this.setState({
-        stepTextbox: step
-      }, this.changeGraph);
-    };
-    this.changeSnapStep = snapStep => {
-      this.setState({
-        snapStepTextbox: snapStep
-      }, this.changeGraph);
-    };
-    this.changeGridStep = gridStep => {
-      this.setState({
-        gridStepTextbox: gridStep,
-        snapStepTextbox: _.map(gridStep, function (step) {
-          return step / 2;
-        })
-      }, this.changeGraph);
-    };
-    this.changeGraph = () => {
-      const labels = this.state.labelsTextbox;
-      const range = _.map(this.state.rangeTextbox, function (range) {
-        return _.map(range, Number);
-      });
-      const step = _.map(this.state.stepTextbox, Number);
-      const gridStep = this.state.gridStepTextbox;
-      const snapStep = this.state.snapStepTextbox;
-      const image = this.state.backgroundImage;
+});
 
-      // validationResult is either:
-      //   true -> the settings are valid
-      //   a string -> the settings are invalid, and the explanation
-      //               is contained in the string
-      // TODO(aria): Refactor this to not be confusing
-      const validationResult = this.validateGraphSettings(range, step, gridStep, snapStep, image);
-      if (validationResult === true) {
-        // either true or a string
-        this.change({
-          valid: true,
-          labels: labels,
-          range: range,
-          step: step,
-          gridStep: gridStep,
-          snapStep: snapStep,
-          backgroundImage: image
-        });
-      } else {
-        this.change({
-          valid: validationResult // a string message, not false
-        });
-      }
-    };
-    this.state = _extends({
-      isExpanded: true
-    }, InteractiveGraphSettings.stateFromProps(props));
+class Strut extends React.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
   }
-  componentDidMount() {
-    // TODO(scottgrant): This is a hack to remove the deprecated call to
-    // this.isMounted() but is still considered an anti-pattern.
-    this._isMounted = true;
-    this.changeGraph = _.debounce(this.changeGraph, 300);
+}
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
+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
+      };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
+    case "ellipse":
+      return {
+        type: "ellipse",
+        center: [0, 0],
+        radius: [1, 1],
+        angle: 0,
+        color: DEFAULT_COLOR,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        points: [[0, 2], [-1, 0], [1, 0]],
+        color: DEFAULT_COLOR,
+        showVertices: false,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    default:
+      throw new UnreachableCaseError(type);
+  }
+}
+function degreeToRadian(degrees) {
+  return degrees / 180 * Math.PI;
+}
+function radianToDegree(radians) {
+  return radians / Math.PI * 180;
+}
+
+/**
+ * Dropdown for selecting a locked figure to add to an interactive graph.
+ * Locked figures are elements (points, segmeents, etc.) that are not
+ * interactive, just present in the graph's background.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedFigureSelect = props => {
+  const {
+    id,
+    onChange
+  } = props;
+  const figureTypes = props.showM2Features ? ["point", "line", "vector", "ellipse", "polygon"] : ["point", "line"];
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$w.container
+  }, /*#__PURE__*/React.createElement(ActionMenu, {
+    menuText: "Add locked figure",
+    style: styles$w.addElementSelect
+  }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
+    key: `${id}-${figureType}`,
+    label: figureType,
+    onClick: () => onChange(figureType)
+  }, figureType))));
+};
+const styles$w = StyleSheet.create({
+  container: {
+    marginTop: spacing.xSmall_8
+  },
+  addElementSelect: {
+    backgroundColor: color.fadedBlue8,
+    borderRadius: spacing.xxxSmall_4
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Make sure that state updates when switching
-    // between different items in a multi-item editor.
-    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
-      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
+});
+
+const AngleInput = props => {
+  const {
+    angle,
+    onChange
+  } = props;
+  const [angleInput, setAngleInput] = React.useState(radianToDegree(angle).toString());
+  function handleAngleChange(newValue) {
+    // Update the local state (update the input field value).
+    setAngleInput(newValue);
+
+    // 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;
     }
+
+    // Update the graph.
+    onChange(degreeToRadian(newValue));
   }
-  componentWillUnmount() {
-    this._isMounted = false;
+  return /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$v.row
+  }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
+    type: "number",
+    value: angleInput,
+    onChange: handleAngleChange,
+    style: styles$v.textField
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }));
+};
+const styles$v = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  textField: {
+    width: spacing.xxxLarge_64
   }
-  render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
-      title: "Common Graph Settings",
-      isOpen: this.state.isExpanded,
-      onToggle: () => this.setState({
-        isExpanded: !this.state.isExpanded
-      })
-    }), this.state.isExpanded && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "x Label"
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      ref: this.labelXRef,
-      onChange: e => this.changeLabel(0, e),
-      value: this.state.labelsTextbox[0] || ""
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "y Label"
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      ref: this.labelYRef,
-      onChange: e => this.changeLabel(1, e),
-      value: this.state.labelsTextbox[1] || ""
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "x Range"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.rangeTextbox[0],
-      onChange: vals => this.changeRange(0, vals)
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "y Range"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.rangeTextbox[1],
-      onChange: vals => this.changeRange(1, vals)
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Tick Step"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.stepTextbox,
-      onChange: this.changeStep
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Grid Step"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.gridStepTextbox,
-      onChange: this.changeGridStep
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Snap Step"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.snapStepTextbox,
-      onChange: this.changeSnapStep
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Markings:"
-    }, /*#__PURE__*/React.createElement(ButtonGroup$2, {
-      value: this.props.markings,
-      allowEmpty: false,
-      buttons: [{
-        value: "graph",
-        content: "Graph"
-      }, {
-        value: "grid",
-        content: "Grid"
-      }, {
-        value: "none",
-        content: "None"
-      }],
-      onChange: this.change("markings")
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
-      label: "Show tooltips",
-      showTooltips: this.props.showTooltips,
-      onChange: this.change
-    }))), /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Background image URL:",
-      style: styles$s.resetSpaceTop
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: css(styles$s.backgroundUrlInput),
-      ref: this.bgUrlRef,
-      value: this.state.backgroundImage.url || "",
-      onChange: e => {
-        // Shallow-copied clone
-        const image = _extends({}, this.props.backgroundImage);
-        image.url = e.target.value;
-        this.setState({
-          backgroundImage: image
-        });
-      },
-      onKeyPress: this.changeBackgroundUrl,
-      onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$d, 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$s.checkboxRow
-    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
-      label: "Show ruler",
-      showRuler: this.props.showRuler,
-      onChange: this.change,
-      style: styles$s.resetSpaceTop
-    }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
-      label: "Show protractor",
-      showProtractor: this.props.showProtractor,
-      onChange: this.change,
-      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$s.spaceTop
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Ruler label:",
-      style: styles$s.resetSpaceTop
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      id: "ruler-label-select",
-      selectedValue: this.props.rulerLabel,
-      onChange: newValue => {
-        this.change({
-          rulerLabel: newValue
-        });
-      },
-      placeholder: "None",
-      style: styles$s.singleSelectShort
-    }, /*#__PURE__*/React.createElement(OptionItem, {
-      value: "",
-      label: "None",
-      horizontalRule: "full-width"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "mm",
-      label: "Milimeters"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "cm",
-      label: "Centimeters"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "m",
-      label: "Meters"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "km",
-      label: "Kilometers",
-      horizontalRule: "full-width"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "in",
-      label: "Inches"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "ft",
-      label: "Feet"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "yd",
-      label: "Yards"
-    }), /*#__PURE__*/React.createElement(OptionItem, {
-      value: "mi",
-      label: "Miles"
-    }))), /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Ruler ticks:"
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
-      id: "ruler-ticks-select",
-      selectedValue: `${this.props.rulerTicks}`,
-      onChange: newValue => {
-        this.change({
-          rulerTicks: newValue
-        });
-      },
-      placeholder: "10",
-      style: styles$s.singleSelectShort
-    }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
-      key: value,
-      value: `${value}`,
-      label: `${value}`
-    }))))))));
+});
+
+const ColorSwatch = props => {
+  const {
+    color: color$1,
+    filled = true,
+    decorative = false
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    "aria-label":
+    // Don't include an aria label for decorative circles.
+    !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
+    style: [styles$u.colorSwatch, {
+      border: `4px solid ${lockedFigureColors[color$1]}`,
+      backgroundColor: filled ? lockedFigureColors[color$1] : color.white
+    }]
+  });
+};
+const styles$u = StyleSheet.create({
+  colorSwatch: {
+    // Add a white outline so that the color swatch is visible when
+    // the dropdown option is highlighted with its blue background.
+    outline: `2px solid ${color.offWhite}`,
+    borderRadius: "50%",
+    width: spacing.large_24,
+    height: spacing.large_24
   }
-}
-InteractiveGraphSettings.defaultProps = {
-  box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
-  labels: ["x", "y"],
-  range: [[-10, 10], [-10, 10]],
-  step: [1, 1],
-  gridStep: [1, 1],
-  snapStep: [1, 1],
-  valid: true,
-  backgroundImage: defaultBackgroundImage$1,
-  markings: "graph",
-  showProtractor: false,
-  showRuler: false,
-  showTooltips: false,
-  rulerLabel: "",
-  rulerTicks: 10
+});
+
+const possibleColors = Object.keys(lockedFigureColors);
+const ColorSelect = props => {
+  const {
+    selectedValue,
+    style,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$t.row, style]
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$t.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.
+    ,
+    placeholder: ""
+  }, possibleColors.map(colorName => /*#__PURE__*/React.createElement(OptionItem, {
+    key: colorName,
+    value: colorName,
+    label: colorName,
+    leftAccessory: /*#__PURE__*/React.createElement(ColorSwatch, {
+      color: colorName,
+      decorative: true
+    })
+  }, colorName)))));
+};
+const styles$t = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
+const CoordinatePairInput = props => {
+  const {
+    coord,
+    labels,
+    error,
+    style,
+    onChange
+  } = props;
+
+  // Keep track of the coordinates via state as the user is editing them,
+  // 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()]);
+  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;
+    }
+
+    // Update the props (update the graph).
+    const newCoords = [...coord];
+    newCoords[coordIndex] = +newValue;
+    onChange(newCoords);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$s.row, style]
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$s.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$s.textField, error ? styles$s.errorField : undefined]
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.medium_16
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$s.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$s.textField, error ? styles$s.errorField : undefined]
+  })));
 };
 const styles$s = StyleSheet.create({
-  resetSpaceTop: {
-    marginTop: 0
-  },
-  spaceTop: {
-    marginTop: spacing.xSmall_8
-  },
-  singleSelectShort: {
-    // Non-standard spacing, but it's the smallest we can go
-    // without running into styling issues with the dropdown.
-    height: 26
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
   },
-  backgroundUrlInput: {
-    border: `1px solid ${color.offBlack32}`,
-    borderRadius: spacing.xxxSmall_4,
-    padding: spacing.xxxSmall_4
+  textField: {
+    width: spacing.xxxLarge_64
   },
-  checkboxRow: {
-    flexDirection: "row",
+  errorField: {
+    borderColor: color.red,
+    backgroundColor: color.fadedRed8
+  }
+});
+
+const EllipseSwatch = props => {
+  const {
+    color,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
+    style: [styles$r.container, {
+      border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$r.innerCircle, {
+      backgroundColor: lockedFigureColors[color],
+      opacity: lockedFigureFillStyles[fillStyle]
+    }]
+  }));
+};
+const styles$r = 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: "space-between",
-    marginBottom: spacing.xSmall_8
+    justifyContent: "center"
   },
-  rulerSection: {
-    marginTop: spacing.xSmall_8,
-    borderTop: `1px solid ${color.offBlack16}`,
-    paddingTop: spacing.xSmall_8,
-    paddingBottom: spacing.xSmall_8,
-    borderBottom: `1px solid ${color.offBlack16}`
+  innerCircle: {
+    width: 28,
+    height: 20,
+    borderRadius: "50%"
   }
 });
 
-const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
+const LockedFigureSettingsAccordion = props => {
+  const {
+    children,
+    header,
+    expanded,
+    containerStyle,
+    panelStyle,
+    onToggle
+  } = props;
+  return /*#__PURE__*/React.createElement(View
+  // More specificity so that we can override the default
+  // .heading > h2 > .header styles from the articles.less
+  // file (which is imported in perseus-renderer.less).
+  , {
+    className: "locked-figure-accordion"
+  }, /*#__PURE__*/React.createElement(AccordionSection, {
+    expanded: expanded,
+    onToggle: onToggle,
+    style: [styles$q.container, containerStyle],
+    headerStyle: styles$q.accordionHeader,
+    header: header
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$q.accordionPanel, panelStyle]
+  }, children)));
+};
+const styles$q = StyleSheet.create({
+  container: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8
   },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.large_24
+  accordionHeader: {
+    padding: spacing.small_12,
+    // Don't move the dropdown caret.
+    paddingInlineEnd: 0,
+    // Fixed height so the addition of the color swatch doesn't
+    // change the height of the header when toggling.
+    height: spacing.xxLarge_48
   },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.medium_16
+  accordionPanel: {
+    paddingTop: spacing.xxSmall_6,
+    paddingBottom: spacing.xxxSmall_4,
+    paddingLeft: spacing.small_12,
+    paddingRight: spacing.small_12
   }
 });
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
+
+/**
+ * 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 {
+    figureType,
+    onMove,
+    onRemove
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$p.container
+  }, /*#__PURE__*/React.createElement(Button, {
+    startIcon: trashIcon,
+    "aria-label": `Delete locked ${figureType}`,
+    onClick: onRemove,
+    kind: "tertiary",
+    style: styles$p.deleteButton
+  }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
+    icon: caretDoubleUpIcon,
+    size: "small",
+    "aria-label": `Move locked ${figureType} to the back`,
+    onClick: () => onMove("back"),
+    style: styles$p.iconButton
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: caretUpIcon,
+    size: "small",
+    "aria-label": `Move locked ${figureType} backward`,
+    onClick: () => onMove("backward"),
+    style: styles$p.iconButton
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: caretDownIcon,
+    size: "small",
+    "aria-label": `Move locked ${figureType} forward`,
+    onClick: () => onMove("forward"),
+    style: styles$p.iconButton
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: caretDoubleDownIcon,
+    size: "small",
+    "aria-label": `Move locked ${figureType} to the front`,
+    onClick: () => onMove("front"),
+    style: styles$p.iconButton
+  })));
+};
+const styles$p = StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: spacing.xxxSmall_4
   },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.xxLarge_48
+  deleteButton: {
+    // Line up the delete icon with the rest of the content.
+    marginInlineStart: -spacing.xxxSmall_4
+  },
+  iconButton: {
+    // Reset the margin because the icon buttons
+    // overlap each other otherwise.
+    margin: 0
   }
 });
 
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
+const {
+  InfoTip: InfoTip$d
+} = components;
+const LockedEllipseSettings = props => {
+  const {
+    center,
+    radius,
+    angle,
+    color,
+    fillStyle,
+    strokeStyle,
+    expanded,
+    onToggle,
+    onChangeProps,
+    onMove,
+    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$o.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$o.row
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: center,
+    style: styles$o.spaceUnder,
+    onChange: newCoords => onChangeProps({
+      center: newCoords
+    })
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$o.spaceUnder
+  }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: radius,
+    labels: ["x radius", "y radius"],
+    style: styles$o.spaceUnder,
+    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$o.row, styles$o.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$o.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(lockedFigureFillStyles).map(option => /*#__PURE__*/React.createElement(OptionItem, {
+    key: option,
+    value: option,
+    label: option
+  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$o.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, {
+    showM2Features: props.showM2Features,
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
 };
-const MediaLayoutContext = React.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-StyleSheet.create({
-  grow: {
-    flexGrow: 1
+const styles$o = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
   }
 });
 
-class Strut extends React.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React.createElement(View, {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
-  }
-}
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
+const LabeledSwitch = props => {
+  const {
+    checked,
+    label,
+    style,
+    onChange
+  } = props;
+  const ids = useUniqueIdWithMock();
+  const switchId = ids.get("switch");
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$n.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$n = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
 
 /**
- * Dropdown for selecting a locked figure to add to an interactive graph.
- * Locked figures are elements (points, segmeents, etc.) that are not
- * interactive, just present in the graph's background.
+ * 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.
  *
  * Used in the interactive graph editor's locked figures section.
  */
-const LockedFigureSelect = props => {
+const DefiningPointSettings = props => {
+  const {
+    coord,
+    color: pointColor,
+    filled = true,
+    label,
+    showPoint = "false",
+    error,
+    onChangeProps,
+    onTogglePoint,
+    expanded,
+    onToggle
+  } = props;
+  function handleColorChange(newValue) {
+    onChangeProps({
+      color: newValue
+    });
+  }
+  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: expanded,
+    onToggle: onToggle,
+    containerStyle: styles$m.container,
+    panelStyle: styles$m.accordionPanel,
+    header:
+    /*#__PURE__*/
+    // Summary: Point, coords, color (filled/open)
+    React.createElement(View, {
+      style: styles$m.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
+      color: pointColor,
+      filled: filled
+    }))
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: coord,
+    error: !!error,
+    style: styles$m.spaceUnder,
+    onChange: newCoords => {
+      onChangeProps({
+        coord: newCoords
+      });
+    }
+  }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
+    label: "show point on graph",
+    checked: !!showPoint,
+    style: showPoint && styles$m.spaceUnder,
+    onChange: onTogglePoint
+  }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: pointColor,
+    onChange: handleColorChange,
+    style: styles$m.spaceUnder
+  }), /*#__PURE__*/React.createElement(LabeledSwitch, {
+    label: "open point",
+    checked: !filled,
+    onChange: newValue => {
+      onChangeProps({
+        filled: !newValue
+      });
+    }
+  })));
+};
+const styles$m = StyleSheet.create({
+  container: {
+    marginTop: spacing.xSmall_8,
+    marginBottom: 0,
+    marginLeft: -spacing.xxxSmall_4,
+    marginRight: -spacing.xxxSmall_4,
+    backgroundColor: color.white
+  },
+  accordionPanel: {
+    // Need more space since we don't have the actions' margins.
+    paddingBottom: spacing.medium_16
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
+  }
+});
+
+const LineSwatch = props => {
   const {
-    id,
-    onChange
+    color,
+    lineStyle
   } = props;
-  const figureTypes = props.showM2Features ? ["point", "line", "ellipse", "vector"] : ["point", "line"];
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$r.container
-  }, /*#__PURE__*/React.createElement(ActionMenu, {
-    menuText: "Add locked figure",
-    style: styles$r.addElementSelect
-  }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
-    key: `${id}-${figureType}`,
-    label: figureType,
-    onClick: () => onChange(figureType)
-  }, figureType))));
+    style: styles$l.container
+  }, /*#__PURE__*/React.createElement(View, {
+    "aria-label": `${color}, ${lineStyle}`,
+    style: [styles$l.lineSwatch, {
+      border: `5px ${lineStyle} ${lockedFigureColors[color]}`
+    }]
+  }));
 };
-const styles$r = StyleSheet.create({
+const styles$l = StyleSheet.create({
   container: {
-    marginTop: spacing.xSmall_8
-  },
-  addElementSelect: {
-    backgroundColor: color.fadedBlue8,
+    backgroundColor: color.white,
+    justifyContent: "center",
+    padding: spacing.xSmall_8,
     borderRadius: spacing.xxxSmall_4
+  },
+  lineSwatch: {
+    width: 40
   }
 });
 
-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.
+const lengthZeroStr = "The line cannot have length 0.";
+const LockedLineSettings = props => {
+  const {
+    kind,
+    points,
+    color: lineColor,
+    lineStyle = "solid",
+    showPoint1,
+    showPoint2,
+    onChangeProps,
+    onMove,
+    onRemove
+  } = props;
+  const [point1, point2] = points;
+  const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
+  const lineLabel = `${capitalizeKind} (${point1.coord[0]},
+        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
 
-  // @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
-      };
-    case "vector":
-      return {
-        type: "vector",
-        points: [[0, 0], [2, 2]],
-        color: DEFAULT_COLOR
-      };
-    case "ellipse":
-      return {
-        type: "ellipse",
-        center: [0, 0],
-        radius: [1, 1],
-        angle: 0,
-        color: DEFAULT_COLOR,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "polygon":
-      return {
-        type: "polygon",
-        points: [[0, 2], [-1, 0], [1, 0]],
-        color: DEFAULT_COLOR,
-        showVertices: false,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    default:
-      throw new UnreachableCaseError(type);
+  // Check if the line has length 0.
+  const isInvalid = vector.equal(point1.coord, point2.coord);
+  function handleChangePoint(newPointProps, index) {
+    const newPoints = [...points];
+    newPoints[index] = _extends({}, points[index], newPointProps);
+    onChangeProps({
+      points: newPoints
+    });
   }
-}
-function degreeToRadian(degrees) {
-  return degrees / 180 * Math.PI;
-}
-function radianToDegree(radians) {
-  return radians / Math.PI * 180;
-}
+  function handleColorChange(newColor) {
+    onChangeProps({
+      color: newColor,
+      // Keep the line's points' colors in sync with the line color.
+      points: [_extends({}, point1, {
+        color: newColor
+      }), _extends({}, point2, {
+        color: newColor
+      })]
+    });
+  }
+  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$k.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(LabelMedium, {
+    tag: "label",
+    style: [styles$k.row, styles$k.spaceUnder]
+  }, "kind", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: kind,
+    onChange: value => onChangeProps({
+      kind: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "line",
+    label: "line"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "ray",
+    label: "ray"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "segment",
+    label: "segment"
+  }))), /*#__PURE__*/React.createElement(View, {
+    style: styles$k.row
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: handleColorChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$k.row
+  }, "style", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: lineStyle,
+    onChange: value => onChangeProps({
+      lineStyle: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: "",
+    style: styles$k.selectMarginOffset
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "solid",
+    label: "solid"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "dashed",
+    label: "dashed"
+  })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
+    style: styles$k.errorText
+  }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
+    label: "Point 1",
+    showPoint: showPoint1,
+    error: isInvalid ? lengthZeroStr : null
+  }, point1, {
+    onTogglePoint: newValue => onChangeProps({
+      showPoint1: newValue
+    }),
+    onChangeProps: newProps => handleChangePoint(newProps, 0)
+  })), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
+    label: "Point 2",
+    showPoint: showPoint2,
+    error: isInvalid ? lengthZeroStr : null
+  }, point2, {
+    onTogglePoint: newValue => onChangeProps({
+      showPoint2: newValue
+    }),
+    onChangeProps: newProps => handleChangePoint(newProps, 1)
+  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    showM2Features: props.showM2Features,
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+};
+const styles$k = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
+  },
+  selectMarginOffset: {
+    // Align with the point settings accordions.
+    marginInlineEnd: -spacing.xxxSmall_4
+  },
+  errorText: {
+    color: color.red
+  }
+});
 
-const AngleInput = props => {
+/**
+ * LockedPointSettings is a component that allows the user to edit the
+ * settings of specifically a locked point on the graph.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedPointSettings = props => {
   const {
-    angle,
-    onChange
+    coord,
+    color: pointColor,
+    filled = true,
+    onChangeProps,
+    onMove,
+    onRemove
   } = props;
-  const [angleInput, setAngleInput] = React.useState(radianToDegree(angle).toString());
-  function handleAngleChange(newValue) {
-    // Update the local state (update the input field value).
-    setAngleInput(newValue);
-
-    // 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;
-    }
-
-    // Update the graph.
-    onChange(degreeToRadian(newValue));
+  function handleColorChange(newValue) {
+    onChangeProps({
+      color: newValue
+    });
   }
-  return /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$q.row
-  }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "number",
-    value: angleInput,
-    onChange: handleAngleChange,
-    style: styles$q.textField
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
+  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header:
+    /*#__PURE__*/
+    // Summary: Point, coords, color (filled/open)
+    React.createElement(View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), /*#__PURE__*/React.createElement(ColorSwatch, {
+      color: pointColor,
+      filled: filled
+    }))
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: coord,
+    style: styles$j.spaceUnder,
+    onChange: newCoord => {
+      onChangeProps({
+        coord: newCoord
+      });
+    }
+  }), /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: pointColor,
+    onChange: handleColorChange,
+    style: styles$j.spaceUnder
+  }), /*#__PURE__*/React.createElement(LabeledSwitch, {
+    label: "open point",
+    checked: !filled,
+    onChange: newValue => {
+      onChangeProps({
+        filled: !newValue
+      });
+    }
+  }), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    showM2Features: props.showM2Features,
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
   }));
 };
-const styles$q = StyleSheet.create({
+const styles$j = StyleSheet.create({
   row: {
-    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  textField: {
-    width: spacing.xxxLarge_64
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
   }
 });
 
-const ColorSwatch = props => {
+const PolygonSwatch = props => {
   const {
-    color: color$1,
-    filled = true,
-    decorative = false
+    color,
+    fillStyle,
+    strokeStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    "aria-label":
-    // Don't include an aria label for decorative circles.
-    !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$p.colorSwatch, {
-      border: `4px solid ${lockedFigureColors[color$1]}`,
-      backgroundColor: filled ? lockedFigureColors[color$1] : color.white
+    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
+    style: [styles$i.container, {
+      border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
-  });
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$i.innerSquare, {
+      backgroundColor: lockedFigureColors[color],
+      opacity: lockedFigureFillStyles[fillStyle]
+    }]
+  }));
 };
-const styles$p = StyleSheet.create({
-  colorSwatch: {
+const styles$i = 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.large_24,
-    height: spacing.large_24
+    height: spacing.large_24,
+    backgroundColor: color.white,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  innerSquare: {
+    width: 20,
+    height: 20
   }
 });
 
-const possibleColors = Object.keys(lockedFigureColors);
-const ColorSelect = props => {
+const LockedPolygonSettings = props => {
   const {
-    selectedValue,
-    style,
-    onChange
+    points,
+    color,
+    showVertices,
+    fillStyle,
+    strokeStyle,
+    expanded,
+    onToggle,
+    onChangeProps,
+    onMove,
+    onRemove
   } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles$o.row, style]
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
+  function handleColorChange(newValue) {
+    onChangeProps({
+      color: newValue
+    });
+  }
+  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: expanded,
+    onToggle: onToggle,
+    header:
+    /*#__PURE__*/
+    // Summary: Polygon, number of sides, style swatch
+    React.createElement(View, {
+      style: styles$h.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), /*#__PURE__*/React.createElement(PolygonSwatch, {
+      color: color,
+      fillStyle: fillStyle,
+      strokeStyle: strokeStyle
+    }))
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$h.row, styles$h.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$o.row
-  }, "color", /*#__PURE__*/React.createElement(Strut, {
+    style: styles$h.row
+  }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: selectedValue,
-    onChange: onChange
+    selectedValue: fillStyle,
+    onChange: value => onChangeProps({
+      fillStyle: value
+    })
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
-  }, possibleColors.map(colorName => /*#__PURE__*/React.createElement(OptionItem, {
-    key: colorName,
-    value: colorName,
-    label: colorName,
-    leftAccessory: /*#__PURE__*/React.createElement(ColorSwatch, {
-      color: colorName,
-      decorative: true
-    })
-  }, colorName)))));
-};
-const styles$o = StyleSheet.create({
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
-const CoordinatePairInput = props => {
-  const {
-    coord,
-    labels,
-    error,
-    onChange
-  } = props;
-
-  // Keep track of the coordinates via state as the user is editing them,
-  // 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()]);
-  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;
-    }
-
-    // Update the props (update the graph).
-    const newCoords = [...coord];
-    newCoords[coordIndex] = +newValue;
-    onChange(newCoords);
-  }
-  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
-    style: [styles$n.row, styles$n.spaceUnder]
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    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$n.textField, error ? styles$n.errorField : undefined]
-  })), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.medium_16
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
+  }, Object.keys(lockedFigureFillStyles).map(option => /*#__PURE__*/React.createElement(OptionItem, {
+    key: option,
+    value: option,
+    label: option
+  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$n.row
-  }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
+    style: [styles$h.row, styles$h.spaceUnder]
+  }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "number",
-    value: coordState[1],
-    onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$n.textField, error ? styles$n.errorField : undefined]
-  }))));
+  }), /*#__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(LabeledSwitch, {
+    label: "show vertices",
+    checked: showVertices,
+    onChange: newValue => onChangeProps({
+      showVertices: newValue
+    }),
+    style: styles$h.spaceUnder
+  }), /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
+    expanded: true,
+    containerStyle: styles$h.pointAccordionContainer,
+    panelStyle: styles$h.pointAccordionPanel
+  }, points.map((point, index) => {
+    const pointLabel = String.fromCharCode(65 + index);
+    return /*#__PURE__*/React.createElement(View, {
+      key: `locked-polygon-point-${point[0]}-${point[1]}-index-${index}`,
+      style: [styles$h.row, styles$h.spaceUnder]
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.medium_16
+    }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+      coord: point,
+      labels: ["x", "y"],
+      onChange: newValue => {
+        const newPoints = [...points];
+        newPoints[index] = newValue;
+        props.onChangeProps({
+          points: newPoints
+        });
+      }
+    }),
+    // Only show the minus (delete) buttons if there are
+    // more than 3 points. 3 points is the minimum number
+    // of points for a polygon (triangle).
+    points.length > 3 && /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": `Delete polygon point ${pointLabel}`,
+      icon: minusCircle,
+      color: "destructive",
+      onClick: () => {
+        const newPoints = [...points];
+        newPoints.splice(index, 1);
+        props.onChangeProps({
+          points: newPoints
+        });
+      },
+      style: styles$h.icon
+    }));
+  }), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      props.onChangeProps({
+        points: [...points, [0, 0]]
+      });
+    }
+  }, "Add point")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    showM2Features: props.showM2Features,
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
 };
-const styles$n = StyleSheet.create({
+const styles$h = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
+  pointAccordionContainer: {
+    backgroundColor: color.white
   },
-  textField: {
-    width: spacing.xxxLarge_64
+  pointAccordionPanel: {
+    alignItems: "start"
   },
-  errorField: {
-    borderColor: color.red,
-    backgroundColor: color.fadedRed8
+  icon: {
+    marginInlineStart: spacing.xxxSmall_4
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
   }
 });
 
-const EllipseSwatch = props => {
+/**
+ * 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 {
-    color,
-    fillStyle,
-    strokeStyle
+    points,
+    color: lineColor,
+    onChangeProps,
+    onMove,
+    onRemove
   } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$m.container, {
-      border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
-    }]
+  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$g.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$m.innerCircle, {
-      backgroundColor: lockedFigureColors[color],
-      opacity: lockedFigureFillStyles[fillStyle]
-    }]
+    style: [styles$g.row, styles$g.spaceUnder]
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: handleColorChange
+  })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
+    style: styles$g.errorText
+  }, lengthErrorMessage), /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
+    expanded: true // Initial state is expanded
+    ,
+    containerStyle: styles$g.container,
+    panelStyle: styles$g.accordionPanel,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$g.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$g.container,
+    panelStyle: styles$g.accordionPanel,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$g.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, {
+    showM2Features: props.showM2Features,
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
   }));
 };
-const styles$m = StyleSheet.create({
+const styles$g = StyleSheet.create({
+  accordionPanel: {
+    paddingBottom: spacing.medium_16
+  },
   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"
+    marginTop: spacing.xSmall_8,
+    marginBottom: 0,
+    marginLeft: -spacing.xxxSmall_4,
+    marginRight: -spacing.xxxSmall_4,
+    backgroundColor: color.white
   },
-  innerCircle: {
-    width: 28,
-    height: 20,
-    borderRadius: "50%"
+  errorText: {
+    color: color.red,
+    marginTop: spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
   }
 });
 
-const LockedFigureSettingsAccordion = props => {
+/**
+ * LockedFigureSettings takes in a figure and renders the
+ * respective settings for that figure type.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+
+// Union this type with other locked figure types when they are added.
+
+const LockedFigureSettings = props => {
+  switch (props.type) {
+    case "point":
+      return /*#__PURE__*/React.createElement(LockedPointSettings, props);
+    case "line":
+      return /*#__PURE__*/React.createElement(LockedLineSettings, props);
+    case "vector":
+      if (props.showM2Features) {
+        return /*#__PURE__*/React.createElement(LockedVectorSettings, props);
+      }
+      break;
+    case "ellipse":
+      if (props.showM2Features) {
+        return /*#__PURE__*/React.createElement(LockedEllipseSettings, props);
+      }
+      break;
+    case "polygon":
+      if (props.showM2Features) {
+        return /*#__PURE__*/React.createElement(LockedPolygonSettings, props);
+      }
+  }
+  return null;
+};
+
+const LockedFiguresSection = props => {
+  var _props$figures;
+  // Keep track of all figures' accordions' expanded states for the
+  // expand/collapse all button. Set the whole array to false initially.
+  const collapsedStateArray = Array(((_props$figures = props.figures) != null ? _props$figures : []).length).fill(false);
+  const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
+  const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
   const {
-    children,
-    header,
-    expanded,
-    containerStyle,
-    panelStyle,
-    onToggle
+    figures,
+    onChange
   } = props;
-  return /*#__PURE__*/React.createElement(View
-  // More specificity so that we can override the default
-  // .heading > h2 > .header styles from the articles.less
-  // file (which is imported in perseus-renderer.less).
-  , {
-    className: "locked-figure-accordion"
-  }, /*#__PURE__*/React.createElement(AccordionSection, {
-    expanded: expanded,
-    onToggle: onToggle,
-    style: [styles$l.container, containerStyle],
-    headerStyle: styles$l.accordionHeader,
-    header: header
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$l.accordionPanel, panelStyle]
-  }, children)));
-};
-const styles$l = StyleSheet.create({
-  container: {
-    backgroundColor: color.fadedBlue8,
-    marginTop: spacing.xSmall_8
-  },
-  accordionHeader: {
-    padding: spacing.small_12,
-    // Don't move the dropdown caret.
-    paddingInlineEnd: 0,
-    // Fixed height so the addition of the color swatch doesn't
-    // change the height of the header when toggling.
-    height: spacing.xxLarge_48
-  },
-  accordionPanel: {
-    paddingTop: spacing.xxSmall_6,
-    paddingBottom: spacing.xxxSmall_4,
-    paddingLeft: spacing.small_12,
-    paddingRight: spacing.small_12
+  function addLockedFigure(newFigure) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures, getDefaultFigureForType(newFigure)]
+    };
+    onChange(newProps);
+    setExpandedStates([...expandedStates, true]);
+  }
+  function moveLockedFigure(index, movement) {
+    // Don't allow moving the first figure up or the last figure down.
+    if (index === 0 && (movement === "back" || movement === "backward")) {
+      return;
+    }
+    if (figures && index === figures.length - 1 && (movement === "front" || movement === "forward")) {
+      return;
+    }
+    const lockedFigures = figures || [];
+    const newFigures = [...lockedFigures];
+    const newExpandedStates = [...expandedStates];
+
+    // First, remove the figure from its current position
+    // in the figures array and the expanded states array.
+    const [removedFigure] = newFigures.splice(index, 1);
+    newExpandedStates.splice(index, 1);
+
+    // Then, add it back in the new position. Add "true" to the
+    // expanded states array for the new position (it must already
+    // be open since the button to move it is being pressed from there).
+    switch (movement) {
+      case "back":
+        newFigures.unshift(removedFigure);
+        newExpandedStates.unshift(true);
+        break;
+      case "backward":
+        newFigures.splice(index - 1, 0, removedFigure);
+        newExpandedStates.splice(index - 1, 0, true);
+        break;
+      case "forward":
+        newFigures.splice(index + 1, 0, removedFigure);
+        newExpandedStates.splice(index + 1, 0, true);
+        break;
+      case "front":
+        newFigures.push(removedFigure);
+        newExpandedStates.push(true);
+        break;
+    }
+    onChange({
+      lockedFigures: newFigures
+    });
+    setExpandedStates(newExpandedStates);
+  }
+  function removeLockedFigure(index) {
+    // eslint-disable-next-line no-alert
+    if (window.confirm("Are you sure you want to delete this figure?")) {
+      const lockedFigures = figures || [];
+      onChange({
+        lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
+      });
+
+      // Update expanded states
+      const newExpandedStates = [...expandedStates];
+      newExpandedStates.splice(index, 1);
+      setExpandedStates(newExpandedStates);
+    }
+  }
+  function changeProps(index,
+  // Omit the type from the figure props so it doesn't think
+  // we're trying to pass in the props for the wrong type.
+  figureProps) {
+    const lockedFigures = figures || [];
+    const newFigures = {
+      lockedFigures: [...lockedFigures.slice(0, index), _extends({}, lockedFigures[index], figureProps), ...lockedFigures.slice(index + 1)]
+    };
+    onChange(newFigures);
   }
-});
-
-/**
- * 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"));
+  function toggleExpanded(newValue) {
+    setExpandedStates(Array(figures == null ? void 0 : figures.length).fill(newValue));
+  }
+  const allCollapsed = expandedStates.every(value => !value);
+  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) => {
+    return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
+      key: `${uniqueId}-locked-${figure}-${index}`,
+      showM2Features: props.showM2Features,
+      showM2bFeatures: props.showM2bFeatures,
+      expanded: expandedStates[index],
+      onToggle: newValue => {
+        const newExpanded = [...expandedStates];
+        newExpanded[index] = newValue;
+        setExpandedStates(newExpanded);
+      }
+    }, figure, {
+      onChangeProps: newProps => changeProps(index, newProps),
+      onMove: movement => moveLockedFigure(index, movement),
+      onRemove: () => removeLockedFigure(index)
+    }));
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$f.buttonContainer
+  }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
+    showM2Features: props.showM2Features,
+    showM2bFeatures: props.showM2bFeatures,
+    id: `${uniqueId}-select`,
+    onChange: addLockedFigure
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary",
+    onClick: () => toggleExpanded(allCollapsed),
+    style: styles$f.button
+  }, buttonLabel)));
 };
-const styles$k = StyleSheet.create({
-  container: {
-    width: "100%",
+const styles$f = StyleSheet.create({
+  buttonContainer: {
     flexDirection: "row",
-    alignItems: "center",
-    marginTop: spacing.xxxSmall_4
+    alignItems: "center"
   },
-  deleteButton: {
-    // Line up the delete icon with the rest of the content.
-    marginInlineStart: -spacing.xxxSmall_4
+  button: {
+    marginTop: spacing.xSmall_8,
+    flexGrow: 1
   }
 });
 
-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
-    });
+const UNLIMITED = "unlimited";
+// Parses a string (ostensibly from some UI element that only supports string
+// types, such as a <select />) into a numeric point count or the special sigil
+// "unlimited". Note that 0 is a special case, and means "unlimited".
+const parsePointCount = points => {
+  const parsed = parseInt(points, 10);
+  if (isNaN(parsed)) {
+    return UNLIMITED;
   }
-  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(lockedFigureFillStyles).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.
+  return parsed === 0 ? UNLIMITED : parsed;
+};
+
+const GraphPointsCountSelector = ({
+  numPoints: _numPoints = 1,
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: `${_numPoints}`,
+    onChange: newValue => {
+      onChange(parsePointCount(newValue));
+    }
+    // Never uses placeholder, always has value
     ,
-    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]}`
-  }));
+    placeholder: "",
+    style: styles$e.singleSelectShort
+  }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
+    key: n,
+    value: `${n}`,
+    label: `${n} point${n > 1 ? "s" : ""}`
+  })), /*#__PURE__*/React.createElement(OptionItem, {
+    key: "unlimited",
+    value: UNLIMITED,
+    label: "unlimited"
+  })]);
 };
-const styles$j = StyleSheet.create({
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
+const styles$e = StyleSheet.create({
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
   }
 });
 
-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 GraphTypeSelector = props => {
+  return /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: props.graphType,
+    onChange: props.onChange,
+    placeholder: "Select a graph type",
+    style: styles$d.singleSelectShort
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "linear",
+    label: "Linear function"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "quadratic",
+    label: "Quadratic function"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "sinusoid",
+    label: "Sinusoid function"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "circle",
+    label: "Circle"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "point",
+    label: "Point(s)"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "linear-system",
+    label: "Linear System"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "polygon",
+    label: "Polygon"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "segment",
+    label: "Line Segment(s)"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "ray",
+    label: "Ray"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "angle",
+    label: "Angle"
+  }));
 };
-const styles$i = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
+const styles$d = StyleSheet.create({
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
   }
 });
 
-/**
- * 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.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const DefiningPointSettings = props => {
-  const {
-    coord,
-    color: pointColor,
-    filled = true,
-    label,
-    showPoint = "false",
-    error,
-    onChangeProps,
-    onTogglePoint
-  } = props;
-  function handleColorChange(newValue) {
-    onChangeProps({
-      color: newValue
-    });
+const {
+  ButtonGroup: ButtonGroup$2,
+  InfoTip: InfoTip$c,
+  PropCheckBox: PropCheckBox$7,
+  RangeInput: RangeInput$4
+} = components;
+const defaultBackgroundImage$1 = {
+  url: null,
+  width: 0,
+  height: 0
+};
+function numSteps(range, step) {
+  return Math.floor((range[1] - range[0]) / step);
+}
+function Heading({
+  title,
+  isOpen,
+  onToggle
+}) {
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: color.offBlack8,
+      padding: spacing.xSmall_8,
+      marginTop: spacing.small_12,
+      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+      // variable found in perseus-editor.less. For now, it must
+      // match otherwise there's a gap from this header to the edge
+      // of the editor borders.
+      marginInline: -10,
+      cursor: "pointer"
+    },
+    onClick: () => onToggle == null ? void 0 : onToggle(!isOpen)
+  }, /*#__PURE__*/React.createElement(LabelSmall, null, title), /*#__PURE__*/React.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
+class InteractiveGraphSettings extends React.Component {
+  static stateFromProps(props) {
+    return {
+      labelsTextbox: props.labels,
+      gridStepTextbox: props.gridStep,
+      snapStepTextbox: props.snapStep,
+      stepTextbox: props.step,
+      rangeTextbox: props.range,
+      // Shallow-copied clone
+      backgroundImage: _extends({}, props.backgroundImage)
+    };
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
-    containerStyle: styles$h.container,
-    panelStyle: styles$h.accordionPanel,
-    header:
-    /*#__PURE__*/
-    // Summary: Point, coords, color (filled/open)
-    React.createElement(View, {
-      style: styles$h.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
-      size: spacing.xSmall_8
-    }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
-      color: pointColor,
-      filled: filled
-    }))
-  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: coord,
-    error: !!error,
-    onChange: newCoords => {
-      onChangeProps({
-        coord: newCoords
+  constructor(props) {
+    super(props);
+    this._isMounted = false;
+    this.bgUrlRef = /*#__PURE__*/React.createRef();
+    this.labelXRef = /*#__PURE__*/React.createRef();
+    this.labelYRef = /*#__PURE__*/React.createRef();
+    this.change = (...args) => {
+      return Changeable.change.apply(this, args);
+    };
+    // TODO(aria): Make either a wrapper for standard events to work
+    // with this.change, or make these use some TextInput/NumberInput box
+    this.changeRulerLabel = e => {
+      this.change({
+        rulerLabel: e.target.value
       });
-    }
-  }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
-    label: "show point on graph",
-    checked: !!showPoint,
-    style: showPoint && styles$h.spaceUnder,
-    onChange: onTogglePoint
-  }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: pointColor,
-    onChange: handleColorChange,
-    style: styles$h.spaceUnder
-  }), /*#__PURE__*/React.createElement(LabeledSwitch, {
-    label: "open point",
-    checked: !filled,
-    onChange: newValue => {
-      onChangeProps({
-        filled: !newValue
+    };
+    this.changeRulerTicks = e => {
+      this.change({
+        rulerTicks: +e.target.value
+      });
+    };
+    this.changeBackgroundUrl = e => {
+      var _this$bgUrlRef$curren;
+      // Only continue on blur or "enter"
+      if (e.type === "keypress" && e.key !== "Enter") {
+        return;
+      }
+      const setUrl = (url, width, height) => {
+        // Shallow-copied clone
+        const image = _extends({}, this.props.backgroundImage);
+        image.url = url;
+        image.width = width;
+        image.height = height;
+        this.setState({
+          backgroundImage: image
+        }, this.changeGraph);
+      };
+      const url = (_this$bgUrlRef$curren = this.bgUrlRef.current) == null ? void 0 : _this$bgUrlRef$curren.value;
+      if (url) {
+        Util.getImageSize(url, (width, height) => {
+          if (this._isMounted) {
+            setUrl(url, width, height);
+          }
+        });
+      } else {
+        setUrl(null, 0, 0);
+      }
+    };
+    this.renderLabelChoices = choices => {
+      return choices.map(nameAndValue => /*#__PURE__*/React.createElement("option", {
+        key: nameAndValue[1],
+        value: nameAndValue[1]
+      }, nameAndValue[0]));
+    };
+    this.validRange = range => {
+      const numbers = _.every(range, function (num) {
+        return _.isFinite(num);
+      });
+      if (!numbers) {
+        return "Range must be a valid number";
+      }
+      if (range[0] >= range[1]) {
+        return "Range must have a higher number on the right";
+      }
+      return true;
+    };
+    this.validateStepValue = settings => {
+      const {
+        step,
+        range,
+        name,
+        minTicks,
+        maxTicks
+      } = settings;
+      const nSteps = numSteps(range, step);
+      if (nSteps < minTicks) {
+        return name + " is too large, there must be at least " + minTicks + " ticks.";
+      }
+      if (nSteps > maxTicks) {
+        return name + " is too small, there can be at most " + maxTicks + " ticks.";
+      }
+      return true;
+    };
+    this.validSnapStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
+        range: range,
+        name: "Snap step",
+        minTicks: 5,
+        maxTicks: 60
+      });
+    };
+    this.validGridStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
+        range: range,
+        name: "Grid step",
+        minTicks: 3,
+        maxTicks: 60
+      });
+    };
+    this.validStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
+        range: range,
+        name: "Step",
+        minTicks: 3,
+        maxTicks: 20
+      });
+    };
+    this.validBackgroundImageSize = image => {
+      // Ignore empty images
+      if (!image.url) {
+        return true;
+      }
+      const validSize = image.width <= 450 && image.height <= 450;
+      if (!validSize) {
+        return "Image must be smaller than 450px x 450px.";
+      }
+      return true;
+    };
+    this.validateGraphSettings = (range, step, gridStep, snapStep, image) => {
+      const self = this;
+      let msg;
+      const goodRange = _.every(range, function (range) {
+        msg = self.validRange(range);
+        return msg === true;
+      });
+      if (!goodRange) {
+        return msg;
+      }
+      const goodStep = _.every(step, function (step, i) {
+        msg = self.validStep(step, range[i]);
+        return msg === true;
+      });
+      if (!goodStep) {
+        return msg;
+      }
+      const goodGridStep = _.every(gridStep, function (gridStep, i) {
+        msg = self.validGridStep(gridStep, range[i]);
+        return msg === true;
+      });
+      if (!goodGridStep) {
+        return msg;
+      }
+      const goodSnapStep = _.every(snapStep, function (snapStep, i) {
+        msg = self.validSnapStep(snapStep, range[i]);
+        return msg === true;
       });
-    }
-  })));
-};
-const styles$h = StyleSheet.create({
-  container: {
-    marginTop: spacing.xSmall_8,
-    marginBottom: 0,
-    marginLeft: -spacing.xxxSmall_4,
-    marginRight: -spacing.xxxSmall_4,
-    backgroundColor: color.white
-  },
-  accordionPanel: {
-    // Need more space since we don't have the actions' margins.
-    paddingBottom: spacing.medium_16
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
-  }
-});
-
-const LineSwatch = props => {
-  const {
-    color,
-    lineStyle
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles$g.container
-  }, /*#__PURE__*/React.createElement(View, {
-    "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$g.lineSwatch, {
-      border: `5px ${lineStyle} ${lockedFigureColors[color]}`
-    }]
-  }));
-};
-const styles$g = StyleSheet.create({
-  container: {
-    backgroundColor: color.white,
-    justifyContent: "center",
-    padding: spacing.xSmall_8,
-    borderRadius: spacing.xxxSmall_4
-  },
-  lineSwatch: {
-    width: 40
-  }
-});
-
-const lengthZeroStr = "The line cannot have length 0.";
-const LockedLineSettings = props => {
-  const {
-    kind,
-    points,
-    color: lineColor,
-    lineStyle = "solid",
-    showPoint1,
-    showPoint2,
-    onChangeProps,
-    onRemove
-  } = props;
-  const [point1, point2] = points;
-  const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
-  const lineLabel = `${capitalizeKind} (${point1.coord[0]},
-        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
+      if (!goodSnapStep) {
+        return msg;
+      }
+      const goodImageSize = this.validBackgroundImageSize(image);
+      if (goodImageSize !== true) {
+        msg = goodImageSize;
+        return msg;
+      }
+      return true;
+    };
+    this.changeLabel = (i, e) => {
+      const val = e.target.value;
+      const labels = this.state.labelsTextbox.slice();
+      labels[i] = val;
+      this.setState({
+        labelsTextbox: labels
+      }, this.changeGraph);
+    };
+    this.changeRange = (i, values) => {
+      const ranges = this.state.rangeTextbox.slice();
+      ranges[i] = values;
+      const step = this.state.stepTextbox.slice();
+      const gridStep = this.state.gridStepTextbox.slice();
+      const snapStep = this.state.snapStepTextbox.slice();
+      const scale = Util.scaleFromExtent(ranges[i], this.props.box[i]);
+      if (this.validRange(ranges[i]) === true) {
+        step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
+        const gridStepValue = Util.gridStepFromTickStep(step[i], scale);
+        if (gridStepValue) {
+          gridStep[i] = gridStepValue;
+        }
+        snapStep[i] = gridStep[i] / 2;
+      }
+      this.setState({
+        stepTextbox: step,
+        gridStepTextbox: gridStep,
+        snapStepTextbox: snapStep,
+        rangeTextbox: ranges
+      }, this.changeGraph);
+    };
+    this.changeStep = step => {
+      this.setState({
+        stepTextbox: step
+      }, this.changeGraph);
+    };
+    this.changeSnapStep = snapStep => {
+      this.setState({
+        snapStepTextbox: snapStep
+      }, this.changeGraph);
+    };
+    this.changeGridStep = gridStep => {
+      this.setState({
+        gridStepTextbox: gridStep,
+        snapStepTextbox: _.map(gridStep, function (step) {
+          return step / 2;
+        })
+      }, this.changeGraph);
+    };
+    this.changeGraph = () => {
+      const labels = this.state.labelsTextbox;
+      const range = _.map(this.state.rangeTextbox, function (range) {
+        return _.map(range, Number);
+      });
+      const step = _.map(this.state.stepTextbox, Number);
+      const gridStep = this.state.gridStepTextbox;
+      const snapStep = this.state.snapStepTextbox;
+      const image = this.state.backgroundImage;
 
-  // Check if the line has length 0.
-  const isInvalid = vector.equal(point1.coord, point2.coord);
-  function handleChangePoint(newPointProps, index) {
-    const newPoints = [...points];
-    newPoints[index] = _extends({}, points[index], newPointProps);
-    onChangeProps({
-      points: newPoints
-    });
-  }
-  function handleColorChange(newColor) {
-    onChangeProps({
-      color: newColor,
-      // Keep the line's points' colors in sync with the line color.
-      points: [_extends({}, point1, {
-        color: newColor
-      }), _extends({}, point2, {
-        color: newColor
-      })]
-    });
-  }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
-    header: /*#__PURE__*/React.createElement(View, {
-      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(LabelMedium, {
-    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
-    })
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "line",
-    label: "line"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "ray",
-    label: "ray"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "segment",
-    label: "segment"
-  }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$f.row
-  }, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: lineColor,
-    onChange: handleColorChange
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.small_12
-  }), /*#__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
-    })
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: "",
-    style: styles$f.selectMarginOffset
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "solid",
-    label: "solid"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "dashed",
-    label: "dashed"
-  })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$f.errorText
-  }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
-    label: "Point 1",
-    showPoint: showPoint1,
-    error: isInvalid ? lengthZeroStr : null
-  }, point1, {
-    onTogglePoint: newValue => onChangeProps({
-      showPoint1: newValue
-    }),
-    onChangeProps: newProps => handleChangePoint(newProps, 0)
-  })), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
-    label: "Point 2",
-    showPoint: showPoint2,
-    error: isInvalid ? lengthZeroStr : null
-  }, point2, {
-    onTogglePoint: newValue => onChangeProps({
-      showPoint2: newValue
-    }),
-    onChangeProps: newProps => handleChangePoint(newProps, 1)
-  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    onRemove: onRemove,
-    figureAriaLabel: `locked line defined by
-                    ${point1.coord[0]}, ${point1.coord[1]} and
-                    ${point2.coord[0]}, ${point2.coord[1]}.`
-  }));
-};
-const styles$f = StyleSheet.create({
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
-  },
-  selectMarginOffset: {
-    // Align with the point settings accordions.
-    marginInlineEnd: -spacing.xxxSmall_4
-  },
-  errorText: {
-    color: color.red
+      // validationResult is either:
+      //   true -> the settings are valid
+      //   a string -> the settings are invalid, and the explanation
+      //               is contained in the string
+      // TODO(aria): Refactor this to not be confusing
+      const validationResult = this.validateGraphSettings(range, step, gridStep, snapStep, image);
+      if (validationResult === true) {
+        // either true or a string
+        this.change({
+          valid: true,
+          labels: labels,
+          range: range,
+          step: step,
+          gridStep: gridStep,
+          snapStep: snapStep,
+          backgroundImage: image
+        });
+      } else {
+        this.change({
+          valid: validationResult // a string message, not false
+        });
+      }
+    };
+    this.state = _extends({
+      isExpanded: true
+    }, InteractiveGraphSettings.stateFromProps(props));
   }
-});
-
-/**
- * LockedPointSettings is a component that allows the user to edit the
- * settings of specifically a locked point on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const LockedPointSettings = props => {
-  const {
-    coord,
-    color: pointColor,
-    filled = true,
-    onChangeProps,
-    onRemove
-  } = props;
-  function handleColorChange(newValue) {
-    onChangeProps({
-      color: newValue
-    });
+  componentDidMount() {
+    // TODO(scottgrant): This is a hack to remove the deprecated call to
+    // this.isMounted() but is still considered an anti-pattern.
+    this._isMounted = true;
+    this.changeGraph = _.debounce(this.changeGraph, 300);
   }
-  return /*#__PURE__*/React.createElement(LockedFigureSettingsAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
-    header:
-    /*#__PURE__*/
-    // Summary: Point, coords, color (filled/open)
-    React.createElement(View, {
-      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, {
-      color: pointColor,
-      filled: filled
-    }))
-  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: coord,
-    onChange: newCoord => {
-      onChangeProps({
-        coord: newCoord
-      });
-    }
-  }), /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: pointColor,
-    onChange: handleColorChange,
-    style: styles$e.spaceUnder
-  }), /*#__PURE__*/React.createElement(LabeledSwitch, {
-    label: "open point",
-    checked: !filled,
-    onChange: newValue => {
-      onChangeProps({
-        filled: !newValue
-      });
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Make sure that state updates when switching
+    // between different items in a multi-item editor.
+    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
+      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
     }
-  }), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    onRemove: onRemove,
-    figureAriaLabel: `locked point at ${coord[0]}, ${coord[1]}`
-  }));
-};
-const styles$e = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
   }
-});
-
-/**
- * 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
-      });
-    }
+  componentWillUnmount() {
+    this._isMounted = false;
   }
-  function handleColorChange(newColor) {
-    onChangeProps({
-      color: newColor
-    });
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      title: "Common Graph Settings",
+      isOpen: this.state.isExpanded,
+      onToggle: () => this.setState({
+        isExpanded: !this.state.isExpanded
+      })
+    }), this.state.isExpanded && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "x Label"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      className: "graph-settings-axis-label",
+      ref: this.labelXRef,
+      onChange: e => this.changeLabel(0, e),
+      value: this.state.labelsTextbox[0] || ""
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "y Label"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      className: "graph-settings-axis-label",
+      ref: this.labelYRef,
+      onChange: e => this.changeLabel(1, e),
+      value: this.state.labelsTextbox[1] || ""
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "x Range"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.rangeTextbox[0],
+      onChange: vals => this.changeRange(0, vals)
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "y Range"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.rangeTextbox[1],
+      onChange: vals => this.changeRange(1, vals)
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Tick Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.stepTextbox,
+      onChange: this.changeStep
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Grid Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.gridStepTextbox,
+      onChange: this.changeGridStep
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Snap Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.snapStepTextbox,
+      onChange: this.changeSnapStep
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Markings:"
+    }, /*#__PURE__*/React.createElement(ButtonGroup$2, {
+      value: this.props.markings,
+      allowEmpty: false,
+      buttons: [{
+        value: "graph",
+        content: "Graph"
+      }, {
+        value: "grid",
+        content: "Grid"
+      }, {
+        value: "none",
+        content: "None"
+      }],
+      onChange: this.change("markings")
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+      label: "Show tooltips",
+      showTooltips: this.props.showTooltips,
+      onChange: this.change
+    }))), /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Background image URL:",
+      style: styles$c.resetSpaceTop
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      className: css(styles$c.backgroundUrlInput),
+      ref: this.bgUrlRef,
+      value: this.state.backgroundImage.url || "",
+      onChange: e => {
+        // Shallow-copied clone
+        const image = _extends({}, this.props.backgroundImage);
+        image.url = e.target.value;
+        this.setState({
+          backgroundImage: image
+        });
+      },
+      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$c.rulerSection
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$c.checkboxRow
+    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+      label: "Show ruler",
+      showRuler: this.props.showRuler,
+      onChange: this.change,
+      style: styles$c.resetSpaceTop
+    }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
+      label: "Show protractor",
+      showProtractor: this.props.showProtractor,
+      onChange: this.change,
+      style: styles$c.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$c.spaceTop
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Ruler label:",
+      style: styles$c.resetSpaceTop
+    }, /*#__PURE__*/React.createElement(SingleSelect, {
+      id: "ruler-label-select",
+      selectedValue: this.props.rulerLabel,
+      onChange: newValue => {
+        this.change({
+          rulerLabel: newValue
+        });
+      },
+      placeholder: "None",
+      style: styles$c.singleSelectShort
+    }, /*#__PURE__*/React.createElement(OptionItem, {
+      value: "",
+      label: "None",
+      horizontalRule: "full-width"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "mm",
+      label: "Milimeters"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "cm",
+      label: "Centimeters"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "m",
+      label: "Meters"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "km",
+      label: "Kilometers",
+      horizontalRule: "full-width"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "in",
+      label: "Inches"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "ft",
+      label: "Feet"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "yd",
+      label: "Yards"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "mi",
+      label: "Miles"
+    }))), /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Ruler ticks:"
+    }, /*#__PURE__*/React.createElement(SingleSelect, {
+      id: "ruler-ticks-select",
+      selectedValue: `${this.props.rulerTicks}`,
+      onChange: newValue => {
+        this.change({
+          rulerTicks: newValue
+        });
+      },
+      placeholder: "10",
+      style: styles$c.singleSelectShort
+    }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
+      key: value,
+      value: `${value}`,
+      label: `${value}`
+    }))))))));
   }
-  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]}.`
-  }));
+}
+InteractiveGraphSettings.defaultProps = {
+  box: [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall],
+  labels: ["x", "y"],
+  range: [[-10, 10], [-10, 10]],
+  step: [1, 1],
+  gridStep: [1, 1],
+  snapStep: [1, 1],
+  valid: true,
+  backgroundImage: defaultBackgroundImage$1,
+  markings: "graph",
+  showProtractor: false,
+  showRuler: false,
+  showTooltips: false,
+  rulerLabel: "",
+  rulerTicks: 10
 };
-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
+const styles$c = StyleSheet.create({
+  resetSpaceTop: {
+    marginTop: 0
   },
-  errorText: {
-    color: color.red,
+  spaceTop: {
     marginTop: spacing.xSmall_8
   },
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
-/**
- * LockedFigureSettings takes in a figure and renders the
- * respective settings for that figure type.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-
-// Union this type with other locked figure types when they are added.
-
-const LockedFigureSettings = props => {
-  switch (props.type) {
-    case "point":
-      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;
-};
-
-const LockedFiguresSection = props => {
-  var _props$figures;
-  // Keep track of all figures' accordions' expanded states for the
-  // expand/collapse all button. Set the whole array to false initially.
-  const collapsedStateArray = Array(((_props$figures = props.figures) != null ? _props$figures : []).length).fill(false);
-  const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
-  const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
-  const {
-    figures,
-    onChange
-  } = props;
-  function addLockedFigure(newFigure) {
-    const lockedFigures = figures || [];
-    const newProps = {
-      lockedFigures: [...lockedFigures, getDefaultFigureForType(newFigure)]
-    };
-    onChange(newProps);
-    setExpandedStates([...expandedStates, true]);
-  }
-  function removeLockedFigure(index) {
-    // eslint-disable-next-line no-alert
-    if (window.confirm("Are you sure you want to delete this figure?")) {
-      const lockedFigures = figures || [];
-      onChange({
-        lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
-      });
-
-      // Update expanded states
-      const newExpandedStates = [...expandedStates];
-      newExpandedStates.splice(index, 1);
-      setExpandedStates(newExpandedStates);
-    }
-  }
-  function changeProps(index,
-  // Omit the type from the figure props so it doesn't think
-  // we're trying to pass in the props for the wrong type.
-  figureProps) {
-    const lockedFigures = figures || [];
-    const newFigures = {
-      lockedFigures: [...lockedFigures.slice(0, index), _extends({}, lockedFigures[index], figureProps), ...lockedFigures.slice(index + 1)]
-    };
-    onChange(newFigures);
-  }
-  function toggleExpanded(newValue) {
-    setExpandedStates(Array(figures == null ? void 0 : figures.length).fill(newValue));
-  }
-  const allCollapsed = expandedStates.every(value => !value);
-  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 === "polygon") {
-      // TODO(LEMS-1943): Implement locked polygon settings.
-      // Remove this block once locked polygon 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);
-      }
-    }, figure, {
-      onChangeProps: newProps => changeProps(index, newProps),
-      onRemove: () => removeLockedFigure(index)
-    }));
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles$c.buttonContainer
-  }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
-    showM2Features: props.showM2Features,
-    id: `${uniqueId}-select`,
-    onChange: addLockedFigure
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.small_12
-  }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
-    kind: "secondary",
-    onClick: () => toggleExpanded(allCollapsed),
-    style: styles$c.button
-  }, buttonLabel)));
-};
-const styles$c = StyleSheet.create({
-  buttonContainer: {
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
+  },
+  backgroundUrlInput: {
+    border: `1px solid ${color.offBlack32}`,
+    borderRadius: spacing.xxxSmall_4,
+    padding: spacing.xxxSmall_4
+  },
+  checkboxRow: {
     flexDirection: "row",
-    alignItems: "center"
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: spacing.xSmall_8
   },
-  button: {
+  rulerSection: {
     marginTop: spacing.xSmall_8,
-    flexGrow: 1
+    borderTop: `1px solid ${color.offBlack16}`,
+    paddingTop: spacing.xSmall_8,
+    paddingBottom: spacing.xSmall_8,
+    borderBottom: `1px solid ${color.offBlack16}`
   }
 });
 
@@ -31444,7 +31741,7 @@ class InteractiveGraphEditor extends React.Component {
     return testGraphKey.join(":");
   }
   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;
+    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;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -31696,6 +31993,7 @@ class InteractiveGraphEditor extends React.Component {
     // 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[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"],
+      showM2bFeatures: (_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-m2b"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));