@khanacademy/perseus-editor 5.0.2 → 5.1.0

package/dist/es/index.js

@@ -9,7 +9,7 @@ import Clickable from '@khanacademy/wonder-blocks-clickable';
 import Color from '@khanacademy/wonder-blocks-color';
 import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
-import { View } from '@khanacademy/wonder-blocks-core';
+import { View, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
@@ -18,26 +18,33 @@ import { point, number } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
 import { isTruthy } from '@khanacademy/wonder-stuff-core';
 import { createMathField } from '@khanacademy/math-input';
+import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
+import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
-import * as Typography from '@khanacademy/wonder-blocks-typography';
+import { LabelSmall, LabelLarge, LabelMedium, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
+import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 import Button from '@khanacademy/wonder-blocks-button';
 import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.0.2";
+const libVersion = "5.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends.apply(this, arguments);
@@ -219,7 +226,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$g.button
+      style: styles$q.button
     }, ({
       hovered,
       focused,
@@ -227,7 +234,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$g = StyleSheet.create({
+const styles$q = StyleSheet.create({
   button: {
     backgroundColor: Color.gold,
     margin: 2,
@@ -20749,19 +20756,19 @@ class TexErrorView extends React.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$f.iconExpanded : styles$f.iconCollapsed;
+    const iconStyle = showErrors ? styles$p.iconExpanded : styles$p.iconCollapsed;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$f.errorContainer
+      style: styles$p.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$f.title,
+      style: styles$p.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(PhosphorIcon, {
       icon: caretRight,
       style: iconStyle
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$f.errorExplanation
+      style: styles$p.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$f.error,
+      style: styles$p.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20770,7 +20777,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$f = StyleSheet.create({
+const styles$p = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24363,11 +24370,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
+
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
+
   return target;
 }
 
@@ -24599,7 +24608,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$e.baseButton, color === "green" && styles$e.green, color === "orange" && styles$e.orange),
+      className: css(styles$o.baseButton, color === "green" && styles$o.green, color === "orange" && styles$o.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24614,7 +24623,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$e = StyleSheet.create({
+const styles$o = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24834,23 +24843,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.containerHeader)
+    className: css(styles$n.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$d.containerTitle)
+    className: css(styles$n.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.container)
+    className: css(styles$n.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$d.row, styles$d.rowHeading)
+    className: css(styles$n.row, styles$n.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$n.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$d.containerHeader)
+    className: "pod-title " + css(styles$n.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.containerTitle)
+    className: css(styles$n.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnRight)
+    className: css(styles$n.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24863,11 +24872,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.container)
+    className: css(styles$n.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft, styles$d.containerHeader)
+    className: css(styles$n.columnLeft, styles$n.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$n.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24880,28 +24889,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.containerHeader)
+    className: css(styles$n.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$d.containerTitle)
+    className: css(styles$n.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.containerHeader, styles$d.previewCollectionHeader)
+    className: css(styles$n.containerHeader, styles$n.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$d.containerTitle)
+    className: css(styles$n.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.container)
+    className: css(styles$n.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$d.row)
+    className: css(styles$n.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$n.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnRight)
+    className: css(styles$n.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$d.contentIndent)
+    className: css(path.length > 0 && styles$n.contentIndent)
   }, children));
 };
 
@@ -25024,11 +25033,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$d.row)
+    className: css(styles$n.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$n.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$n.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25036,9 +25045,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnRight)
+    className: css(styles$n.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$n.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25054,13 +25063,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.row)
+    className: css(styles$n.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$n.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$n.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$d.hintEditor),
+    className: css(styles$n.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25075,9 +25084,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnRight)
+    className: css(styles$n.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$n.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25094,9 +25103,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$n.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.tagsEditor)
+    className: css(styles$n.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25127,23 +25136,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$d.control)
+      className: css(styles$n.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$d.verticalFlip)
+      className: css(styles$n.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$d.control)
+      className: css(styles$n.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$d.control)
+      className: css(styles$n.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25151,7 +25160,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$d.arrayElement, !elementIsLeaf && styles$d.arrayElementAndNotLeaf)
+      className: css(styles$n.arrayElement, !elementIsLeaf && styles$n.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25177,7 +25186,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$d.objectElement)
+    className: css(styles$n.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25344,7 +25353,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$d = StyleSheet.create({
+const styles$n = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25496,47 +25505,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$c.controlBar
+      style: styles$m.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$c.controls
+      style: styles$m.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$c.controlSelected : styles$c.control
+      style: mode === "edit" ? styles$m.controlSelected : styles$m.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$c.controlSelected : styles$c.control
+      style: mode === "preview" ? styles$m.controlSelected : styles$m.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$c.controlSelected : styles$c.control
+      style: mode === "json" ? styles$m.controlSelected : styles$m.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$c.controls
+      style: styles$m.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$c.controlSelected : styles$c.control
+      style: screen === "phone" ? styles$m.controlSelected : styles$m.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$c.controlSelected : styles$c.control
+      style: screen === "tablet" ? styles$m.controlSelected : styles$m.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$c.controlSelected : styles$c.control
+      style: screen === "desktop" ? styles$m.controlSelected : styles$m.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$c.editor
+      style: styles$m.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$c = {
+const styles$m = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27025,10 +27034,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$b.title)
+      className: css(styles$l.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$b.input)
+      className: css(styles$l.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27053,7 +27062,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$b.hintsTitle)
+      className: css(styles$l.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27090,7 +27099,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$b = StyleSheet.create({
+const styles$l = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28422,13 +28431,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$a.outerWrapper
+    style: styles$k.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$a = StyleSheet.create({
+const styles$k = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29481,48 +29490,113 @@ const GraphPointsCountSelector = ({
   numPoints: _numPoints = 1,
   onChange
 }) => {
-  return /*#__PURE__*/React.createElement("select", {
-    value: _numPoints,
-    onChange: e => {
-      onChange(parsePointCount(e.target.value));
+  return /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: `${_numPoints}`,
+    onChange: newValue => {
+      onChange(parsePointCount(newValue));
     }
-  }, [...Array(7).keys()].map(n => /*#__PURE__*/React.createElement("option", {
+    // Never uses placeholder, always has value
+    ,
+    placeholder: "",
+    style: styles$j.singleSelectShort
+  }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
-    value: n
-  }, `${n} point${n > 1 ? "s" : ""}`)), /*#__PURE__*/React.createElement("option", {
-    value: UNLIMITED
-  }, "unlimited"));
+    value: `${n}`,
+    label: `${n} point${n > 1 ? "s" : ""}`
+  })), /*#__PURE__*/React.createElement(OptionItem, {
+    value: UNLIMITED,
+    label: "unlimited"
+  })]);
 };
+const styles$j = 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("select", {
-    value: props.graphType,
-    onChange: e => {
-      const type = e.target.value;
-      props.onChange(type);
-    }
-  }, /*#__PURE__*/React.createElement("option", {
-    value: "linear"
-  }, "Linear function"), /*#__PURE__*/React.createElement("option", {
-    value: "quadratic"
-  }, "Quadratic function"), /*#__PURE__*/React.createElement("option", {
-    value: "sinusoid"
-  }, "Sinusoid function"), /*#__PURE__*/React.createElement("option", {
-    value: "circle"
-  }, "Circle"), /*#__PURE__*/React.createElement("option", {
-    value: "point"
-  }, "Point(s)"), /*#__PURE__*/React.createElement("option", {
-    value: "linear-system"
-  }, "Linear System"), /*#__PURE__*/React.createElement("option", {
-    value: "polygon"
-  }, "Polygon"), /*#__PURE__*/React.createElement("option", {
-    value: "segment"
-  }, "Line Segment(s)"), /*#__PURE__*/React.createElement("option", {
-    value: "ray"
-  }, "Ray"), /*#__PURE__*/React.createElement("option", {
-    value: "angle"
-  }, "Angle"));
+  return /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: props.graphType,
+    onChange: props.onChange,
+    placeholder: "Select a graph type",
+    style: styles$i.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({
+  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 {
+    children,
+    label,
+    labelSide = "left",
+    style
+  } = props;
+  return /*#__PURE__*/React.createElement("label", {
+    className: css(styles$h.label)
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$h.row, style]
+  }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
+    style: styles$h.spaceEnd
+  }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
+    style: styles$h.spaceStart
+  }, label)));
 };
+const styles$h = StyleSheet.create({
+  label: {
+    width: "fit-content"
+  },
+  row: {
+    flexDirection: "row",
+    marginTop: spacing.xSmall_8,
+    alignItems: "center",
+    width: "fit-content"
+  },
+  spaceStart: {
+    marginInlineStart: spacing.xSmall_8
+  },
+  spaceEnd: {
+    marginInlineEnd: spacing.xSmall_8
+  }
+});
 
 const {
   ButtonGroup: ButtonGroup$2,
@@ -29815,75 +29889,70 @@ class InteractiveGraphSettings extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "labels-x"
-    }, "x Label"), /*#__PURE__*/React.createElement("input", {
-      id: "labels-x",
+    }, /*#__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", {
+    }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "labels-y"
-    }, "y Label"), /*#__PURE__*/React.createElement("input", {
-      id: "labels-y",
+    }, /*#__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", {
+    })))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "range-x"
-    }, "x Range"), /*#__PURE__*/React.createElement(RangeInput$4, {
-      id: "range-x",
+    }, /*#__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", {
+    }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "range-y"
-    }, "y Range"), /*#__PURE__*/React.createElement(RangeInput$4, {
-      id: "range-y",
+    }, /*#__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", {
+    })))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "tick-step"
-    }, "Tick Step"), /*#__PURE__*/React.createElement(RangeInput$4, {
-      id: "tick-step",
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Tick Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
       value: this.state.stepTextbox,
       onChange: this.changeStep
-    })), /*#__PURE__*/React.createElement("div", {
+    }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "grid-step"
-    }, "Grid Step"), /*#__PURE__*/React.createElement(RangeInput$4, {
-      id: "grid-step",
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Grid Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
       value: this.state.gridStepTextbox,
       onChange: this.changeGridStep
-    }))), /*#__PURE__*/React.createElement("div", {
+    })))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "snap-step"
-    }, "Snap Step"), /*#__PURE__*/React.createElement(RangeInput$4, {
-      id: "snap-step",
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Snap Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
       value: this.state.snapStepTextbox,
       onChange: this.changeSnapStep
-    }))), /*#__PURE__*/React.createElement("div", {
+    })))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Markings: "), /*#__PURE__*/React.createElement(ButtonGroup$2, {
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Markings:"
+    }, /*#__PURE__*/React.createElement(ButtonGroup$2, {
       value: this.props.markings,
       allowEmpty: false,
       buttons: [{
@@ -29897,24 +29966,23 @@ class InteractiveGraphSettings extends React.Component {
         content: "None"
       }],
       onChange: this.change("markings")
-    })), /*#__PURE__*/React.createElement("div", {
+    }))), /*#__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("div", {
-      className: "image-settings"
-    }, /*#__PURE__*/React.createElement("div", null, "Background image:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
-      htmlFor: "bg-url"
-    }, "Url:"), /*#__PURE__*/React.createElement("input", {
-      id: "bg-url",
+    }))), /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Background image URL:",
+      style: styles$g.resetSpaceTop
+    }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: "graph-settings-background-url",
+      className: css(styles$g.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
-        const image = _.clone(this.props.backgroundImage);
+        // Shallow-copied clone
+        const image = _extends({}, this.props.backgroundImage);
         image.url = e.target.value;
         this.setState({
           backgroundImage: image
@@ -29922,39 +29990,80 @@ class InteractiveGraphSettings extends React.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), /*#__PURE__*/React.createElement("div", {
-      className: "misc-settings"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
+    }), /*#__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$g.rulerSection
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$g.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
-      onChange: this.change
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+      onChange: this.change,
+      style: styles$g.resetSpaceTop
+    }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
-      onChange: this.change
-    }))), this.props.showRuler && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React.createElement("select", {
-      onChange: this.changeRulerLabel,
-      value: this.props.rulerLabel
-    }, /*#__PURE__*/React.createElement("option", {
-      value: ""
-    }, "None"), /*#__PURE__*/React.createElement("optgroup", {
-      label: "Metric"
-    }, this.renderLabelChoices([["milimeters", "mm"], ["centimeters", "cm"], ["meters", "m"], ["kilometers", "km"]])), /*#__PURE__*/React.createElement("optgroup", {
-      label: "Imperial"
-    }, this.renderLabelChoices([["inches", "in"], ["feet", "ft"], ["yards", "yd"], ["miles", "mi"]]))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Ruler ticks:", " ", /*#__PURE__*/React.createElement("select", {
-      onChange: this.changeRulerTicks,
-      value: this.props.rulerTicks
-    }, _.map([1, 2, 4, 8, 10, 16], function (n) {
-      return /*#__PURE__*/React.createElement("option", {
-        key: `ruler-tick-${n}`,
-        value: n
-      }, n);
+      onChange: this.change,
+      style: styles$g.resetSpaceTop
+    })), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
+      style: styles$g.spaceTop
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Ruler label:",
+      style: styles$g.resetSpaceTop
+    }, /*#__PURE__*/React.createElement(SingleSelect, {
+      id: "ruler-label-select",
+      selectedValue: this.props.rulerLabel,
+      onChange: newValue => {
+        this.change({
+          rulerLabel: newValue
+        });
+      },
+      placeholder: "None",
+      style: styles$g.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$g.singleSelectShort
+    }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
+      key: value,
+      value: `${value}`,
+      label: `${value}`
     })))))));
   }
 }
@@ -29974,21 +30083,371 @@ InteractiveGraphSettings.defaultProps = {
   rulerLabel: "",
   rulerTicks: 10
 };
+const styles$g = 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
+  },
+  backgroundUrlInput: {
+    border: `1px solid ${color.offBlack32}`,
+    borderRadius: spacing.xxxSmall_4,
+    padding: spacing.xxxSmall_4
+  },
+  checkboxRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  rulerSection: {
+    marginTop: spacing.xSmall_8,
+    borderTop: `1px solid ${color.offBlack16}`,
+    paddingTop: spacing.xSmall_8,
+    paddingBottom: spacing.xSmall_8,
+    borderBottom: `1px solid ${color.offBlack16}`
+  }
+});
+
+/**
+ * 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;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$f.container
+  }, /*#__PURE__*/React.createElement(ActionMenu, {
+    menuText: "Add element",
+    style: styles$f.addElementSelect
+  }, [/*#__PURE__*/React.createElement(ActionItem, {
+    key: `${id}-point`,
+    label: "Point",
+    onClick: () => onChange("point")
+  }, "Point")]));
+};
+const styles$f = StyleSheet.create({
+  container: {
+    marginTop: spacing.medium_16
+  },
+  addElementSelect: {
+    backgroundColor: color.fadedBlue16,
+    borderRadius: spacing.xxxSmall_4
+  }
+});
+
+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
+  }
+};
+({
+  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$e.grow, style]
+    });
+  }
+}
+const styles$e = StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+function focusWithChromeStickyFocusBugWorkaround(element) {
+  // NOTE(marksandstrom) Chrome sticky focus bug.
+  //
+  // There is a bug in Chrome related to sticky positioning and
+  // focus: When a child of an element with sticky positioning is
+  // focused with the focus() method, the scrollable area
+  // containing that element will scroll to the top (even though
+  // the element is already visble on the page). For a dropdown
+  // this means that the area will be scrolled to the top when
+  // the user interacts with the dropdown (since we actively
+  // manage dropdown header and option focus for keyboard users).
+  //
+  // To work around this bug the `preventScroll` focus option is
+  // used.
+  //
+  // Using `focusOptions` is an experimental browser feature
+  // "that should not be used in production code". However, since
+  // Chrome is the only browser we support that exhibits this
+  // buggy behavior and using `focusOptions` works around the
+  // bug, it is perfectly reasonable to use the feature in this
+  // case. We are not relying on the effect of the
+  // `preventScroll` option otherwise.
+  //
+  // focusOptions documentation:
+  //
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+  //
+  // Note that there could be cases where we want default focus() behavior.
+  // One that comes to mind is a dropdown with a long list of options that
+  // might be rendered off screen when opened. With this workaround the
+  // selected option would not be scrolled into view if the option is near
+  // the end of the list. We're not aware of any uses of the dropdown where
+  // this is an issue, however, so there isn't currently a way to out of the
+  // `preventScroll` behavior.
+
+  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
+  element.focus({
+    preventScroll: true
+  });
+}
+function getValidNumberFromString(value) {
+  const parsed = parseInt(value);
+  // If the value is not a number, return 0.
+  return isNaN(parsed) ? 0 : parsed;
+}
+function getDefaultFigureForFigureType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0]
+      };
+  }
+}
+
+/**
+ * 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,
+    onRemove,
+    onChangeCoord
+  } = props;
+  const [coordState, setCoordState] = React.useState([
+  // Using strings to make it easier to work with the text fields.
+  coord[0].toString(), coord[1].toString()]);
+
+  // Generate unique IDs so that the programmatic labels can be associated
+  // with their respective text fields.
+  const ids = useUniqueIdWithMock();
+  const xCoordId = ids.get("x-coord");
+  const yCoordId = ids.get("y-coord");
+  function handleBlur() {
+    const validCoord = [getValidNumberFromString(coordState[0]), getValidNumberFromString(coordState[1])];
+
+    // Make the text field only show valid numbers after blur.
+    setCoordState([validCoord[0].toString(), validCoord[1].toString()]);
+    // Update the graph with the new coordinates.
+    onChangeCoord(validCoord);
+  }
+  function handleChange(newValue, coordIndex) {
+    const newCoord = [...coordState];
+    newCoord[coordIndex] = newValue;
+    setCoordState(newCoord);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$d.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
+    icon: trashIcon,
+    "aria-label": `Delete locked point at ${coordState[0]}, ${coordState[1]}`,
+    onClick: onRemove
+  })), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    htmlFor: xCoordId,
+    style: styles$d.label,
+    tag: "label"
+  }, "x Coordinate"), /*#__PURE__*/React.createElement(TextField, {
+    id: xCoordId,
+    value: coordState[0],
+    onChange: newValue => handleChange(newValue, 0),
+    onBlur: handleBlur,
+    style: styles$d.textField
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    htmlFor: yCoordId,
+    style: styles$d.label,
+    tag: "label"
+  }, "y Coordinate"), /*#__PURE__*/React.createElement(TextField, {
+    id: yCoordId,
+    value: coordState[1],
+    onChange: newValue => handleChange(newValue, 1),
+    onBlur: handleBlur,
+    style: styles$d.textField
+  }))));
+};
+const styles$d = StyleSheet.create({
+  container: {
+    backgroundColor: color.fadedBlue8,
+    marginBottom: spacing.xSmall_8,
+    padding: spacing.medium_16,
+    borderRadius: spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: spacing.xSmall_8
+  },
+  label: {
+    marginInlineEnd: spacing.xSmall_8
+  },
+  textField: {
+    width: spacing.xxxLarge_64
+  }
+});
+
+/**
+ * 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);
+  }
+  return null;
+};
+
+const LockedFiguresSection = props => {
+  const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
+  const {
+    figures,
+    onChange
+  } = props;
+  function addLockedFigure(newFigure) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures, getDefaultFigureForFigureType(newFigure)]
+    };
+    onChange(newProps);
+  }
+  function removeLockedFigure(index) {
+    const lockedFigures = figures || [];
+    onChange({
+      lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
+    });
+  }
+  function changeCoord(index, coord) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures.slice(0, index), _extends({}, lockedFigures[index], {
+        coord
+      }), ...lockedFigures.slice(index + 1)]
+    };
+    onChange(newProps);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$c.container
+  }, figures == null ? void 0 : figures.map((figure, index) => /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
+    key: `${uniqueId}-locked-${figure}-${index}`
+  }, figure, {
+    onRemove: () => removeLockedFigure(index),
+    onChangeCoord: coord => changeCoord(index, coord)
+  }))), /*#__PURE__*/React.createElement(LockedFigureSelect, {
+    id: `${uniqueId}-select`,
+    onChange: addLockedFigure
+  }));
+};
+const styles$c = StyleSheet.create({
+  container: {
+    paddingTop: spacing.large_24
+  }
+});
 
 const SegmentCountSelector = ({
   numSegments: _numSegments = 1,
   onChange
-}) => /*#__PURE__*/React.createElement("select", {
+}) => /*#__PURE__*/React.createElement(SingleSelect, {
   key: "segment-select",
-  value: _numSegments,
-  onChange: e => {
-    const num = +e.target.value;
+  selectedValue: `${_numSegments}`
+  // Never uses placeholder, always has value
+  ,
+  placeholder: "",
+  onChange: newValue => {
+    const num = +newValue;
     onChange(num);
-  }
-}, _.range(1, 7).map(n => /*#__PURE__*/React.createElement("option", {
+  },
+  style: styles$b.singleSelectShort
+}, _.range(1, 7).map(n => /*#__PURE__*/React.createElement(OptionItem, {
   key: n,
-  value: n
-}, `${n} segment${n > 1 ? "s" : ""}`)));
+  value: `${n}`,
+  label: `${n} segment${n > 1 ? "s" : ""}`
+})));
+const styles$b = 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 {
   InfoTip: InfoTip$b
@@ -30009,26 +30468,13 @@ const deprecatedProps = {
     };
   }
 };
-// Renders the given children in a View laid out horizontally.
-const Row = props => {
-  const {
-    children,
-    style
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: _extends({}, style, {
-      flexDirection: "row",
-      marginTop: Spacing.xSmall_8
-    })
-  }, children);
-};
-const FieldLabel = props => {
-  return /*#__PURE__*/React.createElement(Typography.LabelSmall, {
-    style: {
-      marginRight: Spacing.xSmall_8
-    }
-  }, props.children);
-};
+const POLYGON_SIDES = _.map(_.range(3, 13), function (value) {
+  return /*#__PURE__*/React.createElement(OptionItem, {
+    key: `polygon-sides-${value}`,
+    value: `${value}`,
+    label: `${value} sides`
+  });
+});
 /**
  * An editor for the InteractiveGraph widget, which allows the user to
  * specify the graph's properties and the correct answer.
@@ -30042,13 +30488,21 @@ class InteractiveGraphEditor extends React.Component {
     this.className = "perseus-widget-interactive-graph";
     // TODO(jack): Use versioning instead of DeprecationMixin
     this.deprecatedProps = deprecatedProps;
+    this.changeMatchType = newValue => {
+      const correct = _extends({}, this.props.correct, {
+        match: newValue
+      });
+      this.props.onChange({
+        correct: correct
+      });
+    };
   }
   // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
   UNSAFE_componentWillMount() {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10;
+    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;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -30072,6 +30526,7 @@ class InteractiveGraphEditor extends React.Component {
         showTooltips: this.props.showTooltips,
         rulerLabel: this.props.rulerLabel,
         rulerTicks: this.props.rulerTicks,
+        lockedFigures: this.props.lockedFigures,
         trackInteraction: function () {},
         onChange: newProps => {
           let correct = this.props.correct;
@@ -30108,7 +30563,9 @@ class InteractiveGraphEditor extends React.Component {
         className: "perseus-error"
       }, this.props.valid);
     }
-    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Type of Graph:"), /*#__PURE__*/React.createElement(GraphTypeSelector, {
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Type of Graph:"
+    }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
       graphType: (_this$props$graph$typ = (_this$props$graph = this.props.graph) == null ? void 0 : _this$props$graph.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
       onChange: type => {
         this.props.onChange({
@@ -30120,7 +30577,9 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of Points:"), /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
+    })), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Number of Points:"
+    }, /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
       numPoints: (_this$props$correct2 = this.props.correct) == null ? void 0 : _this$props$correct2.numPoints,
       onChange: points => {
         this.props.onChange({
@@ -30130,12 +30589,15 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$correct3 = this.props.correct) == null ? void 0 : _this$props$correct3.type) === "polygon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of sides:"), /*#__PURE__*/React.createElement("select", {
+    })), ((_this$props$correct3 = this.props.correct) == null ? void 0 : _this$props$correct3.type) === "polygon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Number of sides:"
+    }, /*#__PURE__*/React.createElement(SingleSelect, {
       key: "polygon-select",
-      value: ((_this$props$correct4 = this.props.correct) == null ? void 0 : _this$props$correct4.numSides) || 3,
-      onChange: e => {
+      selectedValue: (_this$props$correct4 = this.props.correct) != null && _this$props$correct4.numSides ? `${this.props.correct.numSides}` : "3",
+      placeholder: "",
+      onChange: newValue => {
         const graph = _extends({}, this.props.correct, {
-          numSides: parsePointCount(e.target.value),
+          numSides: parsePointCount(newValue),
           coords: null,
           // reset the snap for UNLIMITED, which
           // only supports "grid"
@@ -30145,37 +30607,44 @@ class InteractiveGraphEditor extends React.Component {
         this.props.onChange({
           correct: graph
         });
-      }
-    }, _.map(_.range(3, 13), function (n) {
-      return /*#__PURE__*/React.createElement("option", {
-        key: n,
-        value: n
-      }, `${n} sides`);
-    }), /*#__PURE__*/React.createElement("option", {
-      value: "unlimited"
-    }, "unlimited sides"))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Snap to:"), /*#__PURE__*/React.createElement("select", {
-      key: "polygon-snap",
-      value: (_this$props$correct5 = this.props.correct) == null ? void 0 : _this$props$correct5.snapTo,
-      onChange: e => {
+      },
+      style: styles$a.singleSelectShort
+    }, [...POLYGON_SIDES, /*#__PURE__*/React.createElement(OptionItem, {
+      value: "unlimited",
+      label: "unlimited sides"
+    })])), /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Snap to:"
+    }, /*#__PURE__*/React.createElement(SingleSelect, {
+      selectedValue: ((_this$props$correct5 = this.props.correct) == null ? void 0 : _this$props$correct5.snapTo) || "grid"
+      // Never uses placeholder, always has value
+      ,
+      placeholder: "",
+      onChange: newValue => {
         const graph = _extends({}, this.props.correct, {
-          snapTo: e.target.value,
+          snapTo: newValue,
           coords: null
         });
         this.props.onChange({
           correct: graph
         });
-      }
-    }, /*#__PURE__*/React.createElement("option", {
-      value: "grid"
-    }, "grid"), ((_this$props$correct6 = this.props.correct) == null ? void 0 : _this$props$correct6.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("option", {
-      value: "angles"
-    }, "interior angles"), /*#__PURE__*/React.createElement("option", {
-      value: "sides"
-    }, "side measures"))), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."), /*#__PURE__*/React.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
-      tag: "label"
-    }, "Show angle measures:", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      checked: (_this$props$correct7 = this.props.correct) == null ? void 0 : _this$props$correct7.showAngles,
+      },
+      style: styles$a.singleSelectShort
+    }, /*#__PURE__*/React.createElement(OptionItem, {
+      value: "grid",
+      label: "grid"
+    }), ((_this$props$correct6 = this.props.correct) == null ? void 0 : _this$props$correct6.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
+      value: "angles",
+      label: "interior angles"
+    }), ((_this$props$correct7 = this.props.correct) == null ? void 0 : _this$props$correct7.numSides) !== "unlimited" && /*#__PURE__*/React.createElement(OptionItem, {
+      value: "sides",
+      label: "side measures"
+    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."), /*#__PURE__*/React.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React.createElement(View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show angle measures"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
       onChange: () => {
         this.props.onChange({
           correct: _extends({}, this.props.correct, {
@@ -30183,11 +30652,13 @@ class InteractiveGraphEditor extends React.Component {
           })
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
-      tag: "label"
-    }, "Show side measures:", " ", /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      checked: (_this$props$correct8 = this.props.correct) == null ? void 0 : _this$props$correct8.showSides,
+    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: /*#__PURE__*/React.createElement(LabelSmall, null, "Show side measures"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
       onChange: () => {
         this.props.onChange({
           correct: _extends({}, this.props.correct, {
@@ -30195,8 +30666,10 @@ class InteractiveGraphEditor extends React.Component {
           })
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct9 = this.props.correct) == null ? void 0 : _this$props$correct9.type) === "segment" && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React.createElement(SegmentCountSelector, {
-      numSegments: (_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.numSegments,
+    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.type) === "segment" && /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Number of segments:"
+    }, /*#__PURE__*/React.createElement(SegmentCountSelector, {
+      numSegments: (_this$props$correct11 = this.props.correct) == null ? void 0 : _this$props$correct11.numSegments,
       onChange: sides => {
         this.props.onChange({
           correct: {
@@ -30206,16 +30679,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Correct answer:"), /*#__PURE__*/React.createElement(Typography.BodyMonospace, {
-      style: {
-        fontSize: 12,
-        backgroundColor: "#eee",
-        paddingInline: Spacing.xxSmall_6,
-        borderColor: "#ccc",
-        borderStyle: "solid",
-        borderWidth: 1
-      }
-    }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), /*#__PURE__*/React.createElement(InteractiveGraphSettings, {
+    })), /*#__PURE__*/React.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
@@ -30231,40 +30695,63 @@ class InteractiveGraphEditor extends React.Component {
       rulerLabel: this.props.rulerLabel,
       rulerTicks: this.props.rulerTicks,
       onChange: this.props.onChange
-    }), this.props.correct.type === "polygon" && /*#__PURE__*/React.createElement("div", {
-      className: "type-settings"
-    }, /*#__PURE__*/React.createElement("label", null, " ", "Student answer must", " ", /*#__PURE__*/React.createElement("select", {
-      value: this.props.correct.match,
+    }), this.props.correct.type === "polygon" && /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Student answer must"
+    }, /*#__PURE__*/React.createElement(SingleSelect, {
+      selectedValue: this.props.correct.match || "exact",
       onChange: this.changeMatchType
-    }, /*#__PURE__*/React.createElement("option", {
-      value: "exact"
-    }, "match exactly"), /*#__PURE__*/React.createElement("option", {
-      value: "congruent"
-    }, "be congruent"), /*#__PURE__*/React.createElement("option", {
-      value: "approx"
-    }, "be approximately congruent"), /*#__PURE__*/React.createElement("option", {
-      value: "similar"
-    }, "be similar"))), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Match Exactly:"), " Match exactly in size, orientation, and location on the grid even if it is not shown in the background.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Approximately Congruent:"), " Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid.", " ", /*#__PURE__*/React.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Similar:"), " Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."))))), this.props.correct.type === "angle" && /*#__PURE__*/React.createElement("div", {
-      className: "type-settings"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Student answer must", " ", /*#__PURE__*/React.createElement("select", {
-      value: this.props.correct.match,
+      // Never uses placeholder, always has value
+      ,
+      placeholder: "",
+      style: styles$a.singleSelectShort
+    }, /*#__PURE__*/React.createElement(OptionItem, {
+      value: "exact",
+      label: "match exactly"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "congruent",
+      label: "be congruent"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "approx",
+      label: "be approximately congruent"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "similar",
+      label: "be similar"
+    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Match Exactly:"), " Match exactly in size, orientation, and location on the grid even if it is not shown in the background.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Approximately Congruent:"), " Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid.", " ", /*#__PURE__*/React.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Similar:"), " Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."))))), this.props.correct.type === "angle" && /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Student answer must"
+    }, /*#__PURE__*/React.createElement(SingleSelect, {
+      selectedValue: this.props.correct.match || "exact",
       onChange: this.changeMatchType
-    }, /*#__PURE__*/React.createElement("option", {
-      value: "exact"
-    }, "match exactly"), /*#__PURE__*/React.createElement("option", {
-      value: "congruent"
-    }, "be congruent"))), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position.")))), graph);
-  }
-  changeMatchType(e) {
-    const correct = _.extend({}, this.props.correct, {
-      match: e.target.value
-    });
-    this.props.onChange({
-      correct: correct
-    });
+      // Never uses placeholder, always has value
+      ,
+      placeholder: "",
+      style: styles$a.singleSelectShort
+    }, /*#__PURE__*/React.createElement(OptionItem, {
+      value: "exact",
+      label: "match exactly"
+    }), /*#__PURE__*/React.createElement(OptionItem, {
+      value: "congruent",
+      label: "be congruent"
+    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))), /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Correct answer:"
+    }, /*#__PURE__*/React.createElement(BodyMonospace, {
+      style: {
+        fontSize: 12,
+        backgroundColor: "#eee",
+        paddingInline: Spacing.xxSmall_6,
+        borderColor: "#ccc",
+        borderStyle: "solid",
+        borderWidth: 1
+      }
+    }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
+    // Only show the "Add element" dropdown if the graph is
+    // using Mafs.
+    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption["mafs"]) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+      figures: this.props.lockedFigures,
+      onChange: this.props.onChange
+    }));
   }
   serialize() {
-    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep");
+    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep", "lockedFigures");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
@@ -30298,6 +30785,18 @@ InteractiveGraphEditor.defaultProps = _extends({}, InteractiveGraph.defaultProps
     coords: null
   }
 });
+const styles$a = StyleSheet.create({
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
+  },
+  row: {
+    flexDirection: "row",
+    marginTop: Spacing.xSmall_8,
+    alignItems: "center"
+  }
+});
 
 const _excluded$1 = ["forwardedRef", "width", "grow", "shrink", "icon", "backgroundColor", "focusBorderColor", "borderColor", "color", "onSubmit", "leftSideIcon", "id", "testId", "type", "labelMediumInputText"];
 class FormWrappedTextField extends React.Component {
@@ -31012,47 +31511,6 @@ const styles$5 = StyleSheet.create({
   })
 });
 
-function focusWithChromeStickyFocusBugWorkaround(element) {
-  // NOTE(marksandstrom) Chrome sticky focus bug.
-  //
-  // There is a bug in Chrome related to sticky positioning and
-  // focus: When a child of an element with sticky positioning is
-  // focused with the focus() method, the scrollable area
-  // containing that element will scroll to the top (even though
-  // the element is already visble on the page). For a dropdown
-  // this means that the area will be scrolled to the top when
-  // the user interacts with the dropdown (since we actively
-  // manage dropdown header and option focus for keyboard users).
-  //
-  // To work around this bug the `preventScroll` focus option is
-  // used.
-  //
-  // Using `focusOptions` is an experimental browser feature
-  // "that should not be used in production code". However, since
-  // Chrome is the only browser we support that exhibits this
-  // buggy behavior and using `focusOptions` works around the
-  // bug, it is perfectly reasonable to use the feature in this
-  // case. We are not relying on the effect of the
-  // `preventScroll` option otherwise.
-  //
-  // focusOptions documentation:
-  //
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-  //
-  // Note that there could be cases where we want default focus() behavior.
-  // One that comes to mind is a dropdown with a long list of options that
-  // might be rendered off screen when opened. With this workaround the
-  // selected option would not be scrolled into view if the option is near
-  // the end of the list. We're not aware of any uses of the dropdown where
-  // this is an issue, however, so there isn't currently a way to out of the
-  // `preventScroll` behavior.
-
-  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
-  element.focus({
-    preventScroll: true
-  });
-}
-
 const {
   Icon
 } = components;