@khanacademy/perseus-editor 5.0.1 → 5.0.3

package/dist/index.js

@@ -21,8 +21,11 @@ var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var mathInput = require('@khanacademy/math-input');
+var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
+var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var Spacing = require('@khanacademy/wonder-blocks-spacing');
-var Typography = require('@khanacademy/wonder-blocks-typography');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var Button = require('@khanacademy/wonder-blocks-button');
 var i18n$1 = require('@khanacademy/wonder-blocks-i18n');
 
@@ -58,13 +61,12 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
-var Typography__namespace = /*#__PURE__*/_interopNamespace(Typography);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.0.1";
+const libVersion = "5.0.3";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -258,13 +260,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$g.button
+      style: styles$m.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$g = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: Color__default["default"].gold,
     margin: 2,
@@ -20782,19 +20784,19 @@ class TexErrorView extends React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$f.errorContainer
+      style: styles$l.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$f.title,
+      style: styles$l.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       icon: caretRight__default["default"],
       style: iconStyle
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$f.error,
+      style: styles$l.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20803,7 +20805,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$f = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24581,12 +24583,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$e.baseButton, color === "green" && styles$e.green, color === "orange" && styles$e.orange),
+      className: aphrodite.css(styles$k.baseButton, color === "green" && styles$k.green, color === "orange" && styles$k.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$e = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24799,23 +24801,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.containerHeader)
+    className: aphrodite.css(styles$j.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$d.containerTitle)
+    className: aphrodite.css(styles$j.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.container)
+    className: aphrodite.css(styles$j.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$d.row, styles$d.rowHeading)
+    className: aphrodite.css(styles$j.row, styles$j.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnLeft)
+    className: aphrodite.css(styles$j.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$d.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$j.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.containerTitle)
+    className: aphrodite.css(styles$j.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnRight)
+    className: aphrodite.css(styles$j.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24828,11 +24830,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.container)
+    className: aphrodite.css(styles$j.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnLeft, styles$d.containerHeader)
+    className: aphrodite.css(styles$j.columnLeft, styles$j.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnLeft)
+    className: aphrodite.css(styles$j.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24846,28 +24848,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.containerHeader)
+    className: aphrodite.css(styles$j.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$d.containerTitle)
+    className: aphrodite.css(styles$j.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.containerHeader, styles$d.previewCollectionHeader)
+    className: aphrodite.css(styles$j.containerHeader, styles$j.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$d.containerTitle)
+    className: aphrodite.css(styles$j.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.container)
+    className: aphrodite.css(styles$j.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$d.row)
+    className: aphrodite.css(styles$j.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnLeft)
+    className: aphrodite.css(styles$j.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnRight)
+    className: aphrodite.css(styles$j.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$d.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$j.contentIndent)
   }, children));
 };
 
@@ -24987,11 +24989,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.row)
+    className: aphrodite.css(styles$j.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnLeft)
+    className: aphrodite.css(styles$j.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$d.sticky)
+    className: aphrodite.css(sticky && styles$j.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -24999,9 +25001,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnRight)
+    className: aphrodite.css(styles$j.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$d.sticky)
+    className: aphrodite.css(sticky && styles$j.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25017,13 +25019,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.row)
+    className: aphrodite.css(styles$j.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnLeft)
+    className: aphrodite.css(styles$j.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$d.sticky)
+    className: aphrodite.css(sticky && styles$j.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$d.hintEditor),
+    className: aphrodite.css(styles$j.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25038,9 +25040,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnRight)
+    className: aphrodite.css(styles$j.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$d.sticky)
+    className: aphrodite.css(sticky && styles$j.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25057,9 +25059,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.columnLeft)
+    className: aphrodite.css(styles$j.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$d.tagsEditor)
+    className: aphrodite.css(styles$j.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25090,23 +25092,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$d.control)
+      className: aphrodite.css(styles$j.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$d.verticalFlip)
+      className: aphrodite.css(styles$j.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$d.control)
+      className: aphrodite.css(styles$j.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$d.control)
+      className: aphrodite.css(styles$j.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25114,7 +25116,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$d.arrayElement, !elementIsLeaf && styles$d.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$j.arrayElement, !elementIsLeaf && styles$j.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25140,7 +25142,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__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$d.objectElement)
+    className: aphrodite.css(styles$j.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25309,7 +25311,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$d = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25461,47 +25463,47 @@ const StatefulArticleEditor = createReactClass__default["default"]({
       screen
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$c.controlBar
+      style: styles$i.controlBar
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$c.controls
+      style: styles$i.controls
     }, "Mode:", " ", /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.createElement("span", {
-      style: styles$c.controls
+      style: styles$i.controls
     }, "Screen:", " ", /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.createElement("div", {
-      style: styles$c.editor
+      style: styles$i.editor
     }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$c = {
+const styles$i = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27039,10 +27041,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$b.title)
+      className: aphrodite.css(styles$h.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$b.input)
+      className: aphrodite.css(styles$h.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27067,7 +27069,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$b.hintsTitle)
+      className: aphrodite.css(styles$h.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27099,7 +27101,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$b = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27510,7 +27512,6 @@ const GraphSettings = createReactClass__default["default"]({
     const {
       TeX
     } = perseus.Dependencies.getDependencies();
-    this.props.box; // ?
     return /*#__PURE__*/React__namespace.createElement("div", null, ___default["default"].contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -28463,13 +28464,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$a.outerWrapper
+    style: styles$g.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$a = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29547,48 +29548,107 @@ const GraphPointsCountSelector = _ref => {
     numPoints = 1,
     onChange
   } = _ref;
-  return /*#__PURE__*/React__namespace.createElement("select", {
-    value: numPoints,
-    onChange: e => {
-      onChange(parsePointCount(e.target.value));
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: `${numPoints}`,
+    onChange: newValue => {
+      onChange(parsePointCount(newValue));
     }
-  }, [...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement("option", {
+    // Never uses placeholder, always has value
+    ,
+    placeholder: "",
+    style: styles$f.singleSelectShort
+  }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
-    value: n
-  }, `${n} point${n > 1 ? "s" : ""}`)), /*#__PURE__*/React__namespace.createElement("option", {
-    value: UNLIMITED
-  }, "unlimited"));
+    value: `${n}`,
+    label: `${n} point${n > 1 ? "s" : ""}`
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: UNLIMITED,
+    label: "unlimited"
+  })]);
 };
+const styles$f = aphrodite.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__namespace.createElement("select", {
-    value: props.graphType,
-    onChange: e => {
-      const type = e.target.value;
-      props.onChange(type);
-    }
-  }, /*#__PURE__*/React__namespace.createElement("option", {
-    value: "linear"
-  }, "Linear function"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "quadratic"
-  }, "Quadratic function"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "sinusoid"
-  }, "Sinusoid function"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "circle"
-  }, "Circle"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "point"
-  }, "Point(s)"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "linear-system"
-  }, "Linear System"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "polygon"
-  }, "Polygon"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "segment"
-  }, "Line Segment(s)"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "ray"
-  }, "Ray"), /*#__PURE__*/React__namespace.createElement("option", {
-    value: "angle"
-  }, "Angle"));
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: props.graphType,
+    onChange: props.onChange,
+    placeholder: "Select a graph type",
+    style: styles$e.singleSelectShort
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "linear",
+    label: "Linear function"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "quadratic",
+    label: "Quadratic function"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "sinusoid",
+    label: "Sinusoid function"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "circle",
+    label: "Circle"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "point",
+    label: "Point(s)"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "linear-system",
+    label: "Linear System"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "polygon",
+    label: "Polygon"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "segment",
+    label: "Line Segment(s)"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "ray",
+    label: "Ray"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "angle",
+    label: "Angle"
+  }));
 };
+const styles$e = aphrodite.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__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$d.row, style]
+  }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$d.spaceEnd
+  }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$d.spaceStart
+  }, label)));
+};
+const styles$d = aphrodite.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    alignItems: "center"
+  },
+  spaceStart: {
+    marginInlineStart: wonderBlocksTokens.spacing.xSmall_8
+  },
+  spaceEnd: {
+    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+  }
+});
 
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
@@ -29607,6 +29667,9 @@ function numSteps(range, step) {
 }
 class InteractiveGraphSettings extends React__namespace.Component {
   _isMounted = false;
+  bgUrlRef = /*#__PURE__*/React__namespace.createRef();
+  labelXRef = /*#__PURE__*/React__namespace.createRef();
+  labelYRef = /*#__PURE__*/React__namespace.createRef();
   static stateFromProps(props) {
     return {
       labelsTextbox: props.labels,
@@ -29614,7 +29677,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       snapStepTextbox: props.snapStep,
       stepTextbox: props.step,
       rangeTextbox: props.range,
-      backgroundImage: ___default["default"].clone(props.backgroundImage)
+      // Shallow-copied clone
+      backgroundImage: {
+        ...props.backgroundImage
+      }
     };
   }
   constructor(props) {
@@ -29622,7 +29688,6 @@ class InteractiveGraphSettings extends React__namespace.Component {
     this.state = InteractiveGraphSettings.stateFromProps(props);
   }
   static defaultProps = {
-    editableSettings: ["graph", "snap", "image", "measure"],
     box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.interactiveSizes.defaultBoxSizeSmall],
     labels: ["x", "y"],
     range: [[-10, 10], [-10, 10]],
@@ -29682,7 +29747,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       return;
     }
     const setUrl = (url, width, height) => {
-      const image = ___default["default"].clone(this.props.backgroundImage);
+      // Shallow-copied clone
+      const image = {
+        ...this.props.backgroundImage
+      };
       image.url = url;
       image.width = width;
       image.height = height;
@@ -29690,9 +29758,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         backgroundImage: image
       }, this.changeGraph);
     };
-
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    const url = ReactDOM__default["default"].findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
+    const url = this.bgUrlRef.current?.value;
     if (url) {
       perseus.Util.getImageSize(url, (width, height) => {
         if (this._isMounted) {
@@ -29704,11 +29770,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }
   };
   renderLabelChoices = choices => {
-    return ___default["default"].map(choices, function (nameAndValue) {
-      return /*#__PURE__*/React__namespace.createElement("option", {
-        value: nameAndValue[1]
-      }, nameAndValue[0]);
-    });
+    return choices.map(nameAndValue => /*#__PURE__*/React__namespace.createElement("option", {
+      key: nameAndValue[1],
+      value: nameAndValue[1]
+    }, nameAndValue[0]));
   };
   validRange = range => {
     const numbers = ___default["default"].every(range, function (num) {
@@ -29730,9 +29795,6 @@ class InteractiveGraphSettings extends React__namespace.Component {
       minTicks,
       maxTicks
     } = settings;
-    if (!___default["default"].isFinite(step)) {
-      return name + " must be a valid number";
-    }
     const nSteps = numSteps(range, step);
     if (nSteps < minTicks) {
       return name + " is too large, there must be at least " + minTicks + " ticks.";
@@ -29901,105 +29963,76 @@ class InteractiveGraphSettings extends React__namespace.Component {
   };
 
   render() {
-    const scale = [perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[0], this.props.box[0])), perseus.KhanMath.roundTo(2, perseus.Util.scaleFromExtent(this.props.range[1], this.props.box[1]))];
-    const {
-      TeX
-    } = perseus.Dependencies.getDependencies();
-    return /*#__PURE__*/React__namespace.createElement("div", null, ___default["default"].contains(this.props.editableSettings, "canvas") && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "canvas-size"
-    }, "Canvas size (x,y pixels)"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      id: "canvas-size",
-      value: this.props.box,
-      onChange: box => {
-        this.change({
-          box: box
-        });
-      }
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, "Scale (px per div):", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(" + scale[0] + ", " + scale[1] + ")"))), ___default["default"].contains(this.props.editableSettings, "graph") && /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "labels-x"
-    }, "x Label"), /*#__PURE__*/React__namespace.createElement("input", {
-      id: "labels-x",
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "x Label"
+    }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: "graph-settings-axis-label"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "labels-0",
+      className: "graph-settings-axis-label",
+      ref: this.labelXRef,
       onChange: e => this.changeLabel(0, e),
       value: this.state.labelsTextbox[0] || ""
-    })), /*#__PURE__*/React__namespace.createElement("div", {
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "labels-y"
-    }, "y Label"), /*#__PURE__*/React__namespace.createElement("input", {
-      id: "labels-y",
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "y Label"
+    }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: "graph-settings-axis-label"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "labels-1",
+      className: "graph-settings-axis-label",
+      ref: this.labelYRef,
       onChange: e => this.changeLabel(1, e),
       value: this.state.labelsTextbox[1] || ""
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "range-x"
-    }, "x Range"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      id: "range-x",
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "x Range"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
       value: this.state.rangeTextbox[0],
       onChange: vals => this.changeRange(0, vals)
-    })), /*#__PURE__*/React__namespace.createElement("div", {
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "range-y"
-    }, "y Range"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      id: "range-y",
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "y Range"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
       value: this.state.rangeTextbox[1],
       onChange: vals => this.changeRange(1, vals)
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "tick-step"
-    }, "Tick Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      id: "tick-step",
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Tick Step"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
       value: this.state.stepTextbox,
       onChange: this.changeStep
-    })), /*#__PURE__*/React__namespace.createElement("div", {
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "grid-step"
-    }, "Grid Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      id: "grid-step",
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Grid Step"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
       value: this.state.gridStepTextbox,
       onChange: this.changeGridStep
-    }))), ___default["default"].contains(this.props.editableSettings, "snap") && /*#__PURE__*/React__namespace.createElement("div", {
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "snap-step"
-    }, "Snap Step"), /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      id: "snap-step",
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Snap Step"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
       value: this.state.snapStepTextbox,
       onChange: this.changeSnapStep
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Markings: "), /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Markings:"
+    }, /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
       value: this.props.markings,
       allowEmpty: false,
       buttons: [{
@@ -30013,26 +30046,25 @@ class InteractiveGraphSettings extends React__namespace.Component {
         content: "None"
       }],
       onChange: this.change("markings")
-    })), /*#__PURE__*/React__namespace.createElement("div", {
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
-    }))), ___default["default"].contains(this.props.editableSettings, "image") && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "image-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, "Background image:"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: "bg-url"
-    }, "Url:"), /*#__PURE__*/React__namespace.createElement("input", {
-      id: "bg-url",
+    }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Background image URL:",
+      style: styles$c.resetSpaceTop
+    }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: "graph-settings-background-url"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "bg-url",
+      className: aphrodite.css(styles$c.backgroundUrlInput),
+      ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
-        const image = ___default["default"].clone(this.props.backgroundImage);
+        // Shallow-copied clone
+        const image = {
+          ...this.props.backgroundImage
+        };
         image.url = e.target.value;
         this.setState({
           backgroundImage: image
@@ -30040,59 +30072,143 @@ class InteractiveGraphSettings extends React__namespace.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "misc-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$c.rulerSection
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$c.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
-      onChange: this.change
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
+      onChange: this.change,
+      style: styles$c.resetSpaceTop
+    }), /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
-      onChange: this.change
-    }))), this.props.showRuler && /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React__namespace.createElement("select", {
-      onChange: this.changeRulerLabel,
-      value: this.props.rulerLabel
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: ""
-    }, "None"), /*#__PURE__*/React__namespace.createElement("optgroup", {
-      label: "Metric"
-    }, this.renderLabelChoices([["milimeters", "mm"], ["centimeters", "cm"], ["meters", "m"], ["kilometers", "km"]])), /*#__PURE__*/React__namespace.createElement("optgroup", {
-      label: "Imperial"
-    }, this.renderLabelChoices([["inches", "in"], ["feet", "ft"], ["yards", "yd"], ["miles", "mi"]]))))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Ruler ticks:", " ", /*#__PURE__*/React__namespace.createElement("select", {
-      onChange: this.changeRulerTicks,
-      value: this.props.rulerTicks
-    }, ___default["default"].map([1, 2, 4, 8, 10, 16], function (n) {
-      return /*#__PURE__*/React__namespace.createElement("option", {
-        value: n
-      }, n);
+      onChange: this.change,
+      style: styles$c.resetSpaceTop
+    })), this.props.showRuler && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$c.spaceTop
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Ruler label:",
+      style: styles$c.resetSpaceTop
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+      id: "ruler-label-select",
+      selectedValue: this.props.rulerLabel,
+      onChange: newValue => {
+        this.change({
+          rulerLabel: newValue
+        });
+      },
+      placeholder: "None",
+      style: styles$c.singleSelectShort
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "",
+      label: "None",
+      horizontalRule: "full-width"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "mm",
+      label: "Milimeters"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "cm",
+      label: "Centimeters"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "m",
+      label: "Meters"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "km",
+      label: "Kilometers",
+      horizontalRule: "full-width"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "in",
+      label: "Inches"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "ft",
+      label: "Feet"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "yd",
+      label: "Yards"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "mi",
+      label: "Miles"
+    }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Ruler ticks:"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      key: value,
+      value: `${value}`,
+      label: `${value}`
     })))))));
   }
 }
+const styles$c = aphrodite.StyleSheet.create({
+  resetSpaceTop: {
+    marginTop: 0
+  },
+  spaceTop: {
+    marginTop: wonderBlocksTokens.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 ${wonderBlocksTokens.color.offBlack32}`,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+    padding: wonderBlocksTokens.spacing.xxxSmall_4
+  },
+  checkboxRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  rulerSection: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    borderTop: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    paddingTop: wonderBlocksTokens.spacing.xSmall_8,
+    paddingBottom: wonderBlocksTokens.spacing.xSmall_8,
+    borderBottom: `1px solid ${wonderBlocksTokens.color.offBlack16}`
+  }
+});
 
 const SegmentCountSelector = _ref => {
   let {
     numSegments = 1,
     onChange
   } = _ref;
-  return /*#__PURE__*/React__namespace.createElement("select", {
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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);
-    }
-  }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement("option", {
+    },
+    style: styles$b.singleSelectShort
+  }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
-    value: n
-  }, `${n} segment${n > 1 ? "s" : ""}`)));
+    value: `${n}`,
+    label: `${n} segment${n > 1 ? "s" : ""}`
+  })));
 };
+const styles$b = aphrodite.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
@@ -30113,27 +30229,13 @@ const deprecatedProps = {
     };
   }
 };
-// Renders the given children in a View laid out horizontally.
-const Row = props => {
-  const {
-    children,
-    style
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: {
-      ...style,
-      flexDirection: "row",
-      marginTop: Spacing__default["default"].xSmall_8
-    }
-  }, children);
-};
-const FieldLabel = props => {
-  return /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
-    style: {
-      marginRight: Spacing__default["default"].xSmall_8
-    }
-  }, props.children);
-};
+const POLYGON_SIDES = ___default["default"].map(___default["default"].range(3, 13), function (value) {
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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.
@@ -30183,6 +30285,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
         markings: this.props.markings,
         showProtractor: this.props.showProtractor,
         showRuler: this.props.showRuler,
+        showTooltips: this.props.showTooltips,
         rulerLabel: this.props.rulerLabel,
         rulerTicks: this.props.rulerTicks,
         trackInteraction: function () {},
@@ -30222,7 +30325,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
         className: "perseus-error"
       }, this.props.valid);
     }
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Type of Graph:"), /*#__PURE__*/React__namespace.createElement(GraphTypeSelector, {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Type of Graph:"
+    }, /*#__PURE__*/React__namespace.createElement(GraphTypeSelector, {
       graphType: this.props.graph?.type ?? InteractiveGraph.defaultProps.graph.type,
       onChange: type => {
         this.props.onChange({
@@ -30234,7 +30339,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), this.props.correct?.type === "point" && /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of Points:"), /*#__PURE__*/React__namespace.createElement(GraphPointsCountSelector, {
+    })), this.props.correct?.type === "point" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Number of Points:"
+    }, /*#__PURE__*/React__namespace.createElement(GraphPointsCountSelector, {
       numPoints: this.props.correct?.numPoints,
       onChange: points => {
         this.props.onChange({
@@ -30244,13 +30351,16 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), this.props.correct?.type === "polygon" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of sides:"), /*#__PURE__*/React__namespace.createElement("select", {
+    })), this.props.correct?.type === "polygon" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Number of sides:"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       key: "polygon-select",
-      value: this.props.correct?.numSides || 3,
-      onChange: e => {
+      selectedValue: this.props.correct?.numSides ? `${this.props.correct.numSides}` : "3",
+      placeholder: "",
+      onChange: newValue => {
         const graph = {
           ...this.props.correct,
-          numSides: parsePointCount(e.target.value),
+          numSides: parsePointCount(newValue),
           coords: null,
           // reset the snap for UNLIMITED, which
           // only supports "grid"
@@ -30260,38 +30370,45 @@ class InteractiveGraphEditor extends React__namespace.Component {
         this.props.onChange({
           correct: graph
         });
-      }
-    }, ___default["default"].map(___default["default"].range(3, 13), function (n) {
-      return /*#__PURE__*/React__namespace.createElement("option", {
-        key: n,
-        value: n
-      }, `${n} sides`);
-    }), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "unlimited"
-    }, "unlimited sides"))), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Snap to:"), /*#__PURE__*/React__namespace.createElement("select", {
-      key: "polygon-snap",
-      value: this.props.correct?.snapTo,
-      onChange: e => {
+      },
+      style: styles$a.singleSelectShort
+    }, [...POLYGON_SIDES, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "unlimited",
+      label: "unlimited sides"
+    })])), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Snap to:"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+      selectedValue: this.props.correct?.snapTo || "grid"
+      // Never uses placeholder, always has value
+      ,
+      placeholder: "",
+      onChange: newValue => {
         const graph = {
           ...this.props.correct,
-          snapTo: e.target.value,
+          snapTo: newValue,
           coords: null
         };
         this.props.onChange({
           correct: graph
         });
-      }
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: "grid"
-    }, "grid"), this.props.correct?.numSides !== "unlimited" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("option", {
-      value: "angles"
-    }, "interior angles"), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "sides"
-    }, "side measures"))), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
-      tag: "label"
-    }, "Show angle measures:", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
-      checked: this.props.correct?.showAngles,
+      },
+      style: styles$a.singleSelectShort
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "grid",
+      label: "grid"
+    }), this.props.correct?.numSides !== "unlimited" && /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "angles",
+      label: "interior angles"
+    }), this.props.correct?.numSides !== "unlimited" && /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "sides",
+      label: "side measures"
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, "Show angle measures"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!this.props.correct?.showAngles,
       onChange: () => {
         this.props.onChange({
           correct: {
@@ -30300,11 +30417,13 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
-      tag: "label"
-    }, "Show side measures:", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
-      checked: this.props.correct?.showSides,
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$a.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, "Show side measures"),
+      checked:
+      // Don't show indeterminate checkbox state
+      !!this.props.correct?.showSides,
       onChange: () => {
         this.props.onChange({
           correct: {
@@ -30313,7 +30432,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the side lengths.")))), this.props.correct?.type === "segment" && /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React__namespace.createElement(SegmentCountSelector, {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the side lengths.")))), this.props.correct?.type === "segment" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Number of segments:"
+    }, /*#__PURE__*/React__namespace.createElement(SegmentCountSelector, {
       numSegments: this.props.correct?.numSegments,
       onChange: sides => {
         this.props.onChange({
@@ -30324,16 +30445,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Correct answer:"), /*#__PURE__*/React__namespace.createElement(Typography__namespace.BodyMonospace, {
-      style: {
-        fontSize: 12,
-        backgroundColor: "#eee",
-        paddingInline: Spacing__default["default"].xxSmall_6,
-        borderColor: "#ccc",
-        borderStyle: "solid",
-        borderWidth: 1
-      }
-    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.createElement(InteractiveGraphSettings, {
+    })), /*#__PURE__*/React__namespace.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
@@ -30349,38 +30461,64 @@ class InteractiveGraphEditor extends React__namespace.Component {
       rulerLabel: this.props.rulerLabel,
       rulerTicks: this.props.rulerTicks,
       onChange: this.props.onChange
-    }), this.props.correct.type === "polygon" && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "type-settings"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Student answer must", " ", /*#__PURE__*/React__namespace.createElement("select", {
-      value: this.props.correct.match,
+    }), this.props.correct.type === "polygon" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Student answer must"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+      selectedValue: this.props.correct.match || "exact",
       onChange: this.changeMatchType
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: "exact"
-    }, "match exactly"), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "congruent"
-    }, "be congruent"), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "approx"
-    }, "be approximately congruent"), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "similar"
-    }, "be similar"))), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("ul", null, /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-      className: "type-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Student answer must", " ", /*#__PURE__*/React__namespace.createElement("select", {
-      value: this.props.correct.match,
+      // Never uses placeholder, always has value
+      ,
+      placeholder: "",
+      style: styles$a.singleSelectShort
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "exact",
+      label: "match exactly"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "congruent",
+      label: "be congruent"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "approx",
+      label: "be approximately congruent"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "similar",
+      label: "be similar"
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("ul", null, /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement(LabeledRow, {
+      label: "Student answer must"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+      selectedValue: this.props.correct.match || "exact",
       onChange: this.changeMatchType
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: "exact"
-    }, "match exactly"), /*#__PURE__*/React__namespace.createElement("option", {
-      value: "congruent"
-    }, "be congruent"))), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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 = ___default["default"].extend({}, this.props.correct, {
-      match: e.target.value
-    });
+      // Never uses placeholder, always has value
+      ,
+      placeholder: "",
+      style: styles$a.singleSelectShort
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "exact",
+      label: "match exactly"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      value: "congruent",
+      label: "be congruent"
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.createElement(LabeledRow, {
+      label: "Correct answer:"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
+      style: {
+        fontSize: 12,
+        backgroundColor: "#eee",
+        paddingInline: Spacing__default["default"].xxSmall_6,
+        borderColor: "#ccc",
+        borderStyle: "solid",
+        borderWidth: 1
+      }
+    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph);
+  }
+  changeMatchType = newValue => {
+    const correct = {
+      ...this.props.correct,
+      match: newValue
+    };
     this.props.onChange({
       correct: correct
     });
-  }
+  };
   serialize() {
     const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep");
 
@@ -30406,6 +30544,18 @@ class InteractiveGraphEditor extends React__namespace.Component {
     return json;
   }
 }
+const styles$a = aphrodite.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__default["default"].xSmall_8,
+    alignItems: "center"
+  }
+});
 
 class FormWrappedTextField extends React__namespace.Component {
   state = {