@khanacademy/perseus-editor 5.0.2 → 5.0.3

package/dist/es/index.js

@@ -18,26 +18,31 @@ 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 } from '@khanacademy/wonder-blocks-dropdown';
+import { 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, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
 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.0.3";
 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 +224,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$g.button
+      style: styles$m.button
     }, ({
       hovered,
       focused,
@@ -227,7 +232,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$g = StyleSheet.create({
+const styles$m = StyleSheet.create({
   button: {
     backgroundColor: Color.gold,
     margin: 2,
@@ -20749,19 +20754,19 @@ class TexErrorView extends React.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$f.iconExpanded : styles$f.iconCollapsed;
+    const iconStyle = showErrors ? styles$l.iconExpanded : styles$l.iconCollapsed;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$f.errorContainer
+      style: styles$l.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$f.title,
+      style: styles$l.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$l.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$l.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20770,7 +20775,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$f = StyleSheet.create({
+const styles$l = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24363,11 +24368,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 +24606,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$k.baseButton, color === "green" && styles$k.green, color === "orange" && styles$k.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24614,7 +24621,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$e = StyleSheet.create({
+const styles$k = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24834,23 +24841,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$j.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$d.containerTitle)
+    className: css(styles$j.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.container)
+    className: css(styles$j.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$d.row, styles$d.rowHeading)
+    className: css(styles$j.row, styles$j.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$j.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$d.containerHeader)
+    className: "pod-title " + css(styles$j.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.containerTitle)
+    className: css(styles$j.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnRight)
+    className: css(styles$j.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24863,11 +24870,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.container)
+    className: css(styles$j.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft, styles$d.containerHeader)
+    className: css(styles$j.columnLeft, styles$j.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$j.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24880,28 +24887,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.containerHeader)
+    className: css(styles$j.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$d.containerTitle)
+    className: css(styles$j.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.containerHeader, styles$d.previewCollectionHeader)
+    className: css(styles$j.containerHeader, styles$j.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$d.containerTitle)
+    className: css(styles$j.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.container)
+    className: css(styles$j.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$d.row)
+    className: css(styles$j.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$j.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnRight)
+    className: css(styles$j.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$d.contentIndent)
+    className: css(path.length > 0 && styles$j.contentIndent)
   }, children));
 };
 
@@ -25024,11 +25031,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$j.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$j.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$j.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25036,9 +25043,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$j.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$j.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25054,13 +25061,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$j.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$j.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$j.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$d.hintEditor),
+    className: css(styles$j.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25075,9 +25082,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnRight)
+    className: css(styles$j.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$d.sticky)
+    className: css(sticky && styles$j.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25094,9 +25101,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.columnLeft)
+    className: css(styles$j.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$d.tagsEditor)
+    className: css(styles$j.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25127,23 +25134,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$j.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$j.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$j.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$j.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25151,7 +25158,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$j.arrayElement, !elementIsLeaf && styles$j.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25177,7 +25184,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$j.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25344,7 +25351,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$d = StyleSheet.create({
+const styles$j = 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 +25503,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$c.controlBar
+      style: styles$i.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$c.controls
+      style: styles$i.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$c.controlSelected : styles$c.control
+      style: mode === "edit" ? styles$i.controlSelected : styles$i.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$c.controlSelected : styles$c.control
+      style: mode === "preview" ? styles$i.controlSelected : styles$i.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$c.controlSelected : styles$c.control
+      style: mode === "json" ? styles$i.controlSelected : styles$i.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$c.controls
+      style: styles$i.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$c.controlSelected : styles$c.control
+      style: screen === "phone" ? styles$i.controlSelected : styles$i.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$c.controlSelected : styles$c.control
+      style: screen === "tablet" ? styles$i.controlSelected : styles$i.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$c.controlSelected : styles$c.control
+      style: screen === "desktop" ? styles$i.controlSelected : styles$i.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$c.editor
+      style: styles$i.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$c = {
+const styles$i = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27025,10 +27032,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$h.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$b.input)
+      className: css(styles$h.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27053,7 +27060,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$h.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27090,7 +27097,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$b = StyleSheet.create({
+const styles$h = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28422,13 +28429,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$a.outerWrapper
+    style: styles$g.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$a = StyleSheet.create({
+const styles$g = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29481,48 +29488,107 @@ 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$f.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$f = 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$e.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$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
+  }
+});
+
+// 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", null, /*#__PURE__*/React.createElement(View, {
+    style: [styles$d.row, style]
+  }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
+    style: styles$d.spaceEnd
+  }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
+    style: styles$d.spaceStart
+  }, label)));
 };
+const styles$d = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    marginTop: spacing.xSmall_8,
+    alignItems: "center"
+  },
+  spaceStart: {
+    marginInlineStart: spacing.xSmall_8
+  },
+  spaceEnd: {
+    marginInlineEnd: spacing.xSmall_8
+  }
+});
 
 const {
   ButtonGroup: ButtonGroup$2,
@@ -29815,75 +29881,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 +29958,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$c.resetSpaceTop
+    }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: "graph-settings-background-url",
+      className: css(styles$c.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 +29982,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$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
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+      onChange: this.change,
+      style: styles$c.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$c.resetSpaceTop
+    })), 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}`
     })))))));
   }
 }
@@ -29974,21 +30075,63 @@ InteractiveGraphSettings.defaultProps = {
   rulerLabel: "",
   rulerTicks: 10
 };
+const styles$c = 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}`
+  }
+});
 
 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 +30152,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 +30172,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;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -30108,7 +30246,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 +30260,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 +30272,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 +30290,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 +30335,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 +30349,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 +30362,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,37 +30378,54 @@ 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);
   }
   serialize() {
     const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep");
@@ -30298,6 +30462,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 {