@khanacademy/perseus-editor 11.3.0 → 11.4.0

package/dist/index.js

@@ -20,11 +20,11 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var ReactDOM = require('react-dom');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
+var Button = require('@khanacademy/wonder-blocks-button');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var mathInput = require('@khanacademy/math-input');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
-var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var caretDoubleDownIcon = require('@phosphor-icons/core/bold/caret-double-down-bold.svg');
@@ -83,7 +83,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "11.3.0";
+const libVersion = "11.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -278,13 +278,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$P.button
+      style: styles$R.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$P = aphrodite.StyleSheet.create({
+const styles$R = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20789,13 +20789,13 @@ class WidgetSelect extends React__namespace.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$O.expanded : styles$O.collapsed;
+  const iconStyle = props.isExpanded ? styles$Q.expanded : styles$Q.collapsed;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$O = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20825,16 +20825,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$N.errorContainer
+      style: styles$P.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$N.title,
+      style: styles$P.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$N.errorExplanation
+      style: styles$P.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$N.error,
+      style: styles$P.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20843,7 +20843,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$N = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23920,7 +23920,7 @@ class ItemExtrasEditor extends React__namespace.Component {
   }
 }
 const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-  style: [styles$M.checkbox, props.indent ? styles$M.indented : undefined]
+  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
 }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
   label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -23930,7 +23930,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(w
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$M = aphrodite.StyleSheet.create({
+const styles$O = aphrodite.StyleSheet.create({
   indented: {
     marginInlineStart: wonderBlocksTokens.spacing.large_24
   }
@@ -24593,12 +24593,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$L.baseButton, color === "green" && styles$L.green, color === "orange" && styles$L.orange),
+      className: aphrodite.css(styles$N.baseButton, color === "green" && styles$N.green, color === "orange" && styles$N.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$L = aphrodite.StyleSheet.create({
+const styles$N = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24811,23 +24811,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$K.containerHeader)
+    className: aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$K.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.container)
+    className: aphrodite.css(styles$M.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$K.row, styles$K.rowHeading)
+    className: aphrodite.css(styles$M.row, styles$M.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$K.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24840,11 +24840,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.container)
+    className: aphrodite.css(styles$M.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnLeft, styles$K.containerHeader)
+    className: aphrodite.css(styles$M.columnLeft, styles$M.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24858,28 +24858,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.containerHeader)
+    className: aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$K.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.containerHeader, styles$K.previewCollectionHeader)
+    className: aphrodite.css(styles$M.containerHeader, styles$M.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$K.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.container)
+    className: aphrodite.css(styles$M.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$K.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$K.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$M.contentIndent)
   }, children));
 };
 
@@ -24999,11 +24999,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$K.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$K.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25011,9 +25011,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$K.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25029,13 +25029,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$K.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$K.hintEditor),
+    className: aphrodite.css(styles$M.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25050,9 +25050,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$K.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25069,9 +25069,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$K.tagsEditor)
+    className: aphrodite.css(styles$M.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25102,23 +25102,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$K.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$K.verticalFlip)
+      className: aphrodite.css(styles$M.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$K.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$K.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25126,7 +25126,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$K.arrayElement, !elementIsLeaf && styles$K.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$M.arrayElement, !elementIsLeaf && styles$M.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25152,7 +25152,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$K.objectElement)
+    className: aphrodite.css(styles$M.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25322,7 +25322,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$K = aphrodite.StyleSheet.create({
+const styles$M = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25830,7 +25830,7 @@ class CSProgramEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$9
+  TextInput: TextInput$8
 } = perseus.components;
 class DefinitionEditor extends React__namespace.Component {
   static propTypes = {
@@ -25864,7 +25864,7 @@ class DefinitionEditor extends React__namespace.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$9, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26274,7 +26274,7 @@ class ExampleWidgetEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = perseus.components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26311,14 +26311,14 @@ class ExplanationEditor extends React__namespace.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26346,9 +26346,106 @@ class ExplanationEditor extends React__namespace.Component {
   }
 }
 
+const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React__namespace.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [styles$L.grow, style]
+    });
+  }
+}
+const styles$L = aphrodite.StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React__namespace.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
+  }
+}
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
 const PT = PropTypes__default["default"];
 
-// Takes an array of components to sort
+/**
+ * Takes an array of components to sort.
+ * As of 08/05/24, there are two sortable components
+ * (one in perseus and one in perseus-editor).
+ * As far as I can tell, this one is only used in ExpressionEditor.
+ */
 // eslint-disable-next-line react/no-unsafe
 const SortableArea = createReactClass__default["default"]({
   displayName: "SortableArea",
@@ -26505,6 +26602,7 @@ const SortableItem = createReactClass__default["default"]({
     e.preventDefault();
   },
   render: function () {
+    // I think these might be getting styles from Webapp
     let dragState = "sortable-disabled";
     if (this.props.dragging) {
       dragState = "sortable-dragging";
@@ -26513,7 +26611,7 @@ const SortableItem = createReactClass__default["default"]({
     }
     return /*#__PURE__*/React__namespace.createElement("li", {
       draggable: this.props.draggable,
-      className: dragState,
+      className: [dragState, aphrodite.css(styles$K.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26521,10 +26619,14 @@ const SortableItem = createReactClass__default["default"]({
     }, this.props.component);
   }
 });
+const styles$K = aphrodite.StyleSheet.create({
+  sortableListItem: {
+    margin: "5px 0"
+  }
+});
 
 const {
-  InfoTip: InfoTip$i,
-  TextInput: TextInput$7
+  InfoTip: InfoTip$i
 } = perseus.components;
 
 // types for iterables
@@ -26571,6 +26673,12 @@ class ExpressionEditor extends React__namespace.Component {
     buttonSets: ["basic"],
     functions: ["f", "g", "h"]
   };
+  constructor(props) {
+    super(props);
+    this.state = {
+      functionsInternal: this.props.functions.join(" ")
+    };
+  }
   change() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -26607,81 +26715,69 @@ class ExpressionEditor extends React__namespace.Component {
     }, obj)));
     const sortable = /*#__PURE__*/React__namespace.createElement(SortableArea, {
       components: answerOptions,
-      onReorder: this.handleReorder,
-      className: "answer-options-list"
+      onReorder: this.handleReorder
     });
 
     // checkboxes to choose which sets of input buttons are shown
     const buttonSetChoices = buttonSetsList.map(name => {
       // The first one gets special cased to always be checked, disabled,
       // and float left.
-      const isFirst = name === "basic";
-      const checked = this.props.buttonSets.includes(name) || isFirst;
-      return /*#__PURE__*/React__namespace.createElement("label", {
-        className: "button-set-label",
-        key: name
-      }, /*#__PURE__*/React__namespace.createElement("input", {
-        type: "checkbox",
+      const isBasic = name === "basic";
+      const checked = this.props.buttonSets.includes(name) || isBasic;
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+        key: name,
+        label: name,
         checked: checked,
-        disabled: isFirst,
+        disabled: isBasic,
         onChange: () => this.handleButtonSet(name)
-      }), name);
+      });
     });
-    const {
-      TeX
-    } = perseus.Dependencies.getDependencies(); // OldExpression only
-
-    buttonSetChoices.unshift( /*#__PURE__*/React__namespace.createElement("label", {
-      className: "button-set-label",
-      key: "show-div"
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    buttonSetChoices.unshift( /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      key: "show \xF7 button",
+      label: "show \xF7 button",
+      checked: this.props.buttonSets.includes("basic+div"),
       onChange: this.handleToggleDiv
-    }), /*#__PURE__*/React__namespace.createElement("span", {
-      className: "show-div-button"
-    }, "show ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\div"), " button")));
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-expression-editor"
-    }, /*#__PURE__*/React__namespace.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Visible label:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
-      value: this.props.visibleLabel,
+    }));
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "Visible label",
+      value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Aria label:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
-      value: this.props.ariaLabel,
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "Aria label",
+      value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React__namespace.createElement("a", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React__namespace.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
-    }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      label: "Use \xD7 for rendering multiplication instead of a center dot.",
+    }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "Function variables",
+      value: this.state.functionsInternal,
+      onChange: this.handleFunctions
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
       onChange: value => {
         this.props.onChange({
           times: value
         });
       }
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Function variables: ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      defaultValue: this.props.functions.join(" "),
-      onChange: this.handleFunctions
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
         margin: "4px 0"
       }
-    }, "student responses area matched against these from top to bottom"), sortable, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
-      className: "simple-button orange",
-      style: {
-        fontSize: 13
-      },
-      onClick: this.newAnswer,
-      type: "button"
+    }, "student responses area matched against these from top to bottom"), sortable, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.newAnswer
     }, "Add new answer")));
   }
   serialize = () => {
@@ -26816,9 +26912,12 @@ class ExpressionEditor extends React__namespace.Component {
   };
 
   // called when the function variables change
-  handleFunctions = e => {
+  handleFunctions = value => {
+    this.setState({
+      functionsInternal: value
+    });
     const newProps = {};
-    newProps.functions = e.target.value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
+    newProps.functions = value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
     this.props.onChange(newProps);
   };
 }
@@ -26833,11 +26932,6 @@ class AnswerOption extends React__namespace.Component {
   state = {
     deleteFocused: false
   };
-  handleDeleteBlur = () => {
-    this.setState({
-      deleteFocused: false
-    });
-  };
   change = (() => {
     var _this = this;
     return function () {
@@ -26848,36 +26942,34 @@ class AnswerOption extends React__namespace.Component {
     };
   })();
   render() {
-    let removeButton = null;
-    if (this.state.deleteFocused) {
-      removeButton = /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleImSure,
-        onBlur: this.handleDeleteBlur
-      }, "I'm sure!");
-    } else {
-      removeButton = /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleDelete
-      }, "Delete");
-    }
+    const removeButton = this.state.deleteFocused ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.handleImSure,
+      color: "destructive"
+    }, "I'm sure!"), /*#__PURE__*/React__namespace.createElement(Strut, {
+      size: wonderBlocksTokens.spacing.small_12
+    }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.handleCancelDelete,
+      light: true
+    }, "Cancel")) : /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.handleDelete,
+      color: "destructive",
+      light: true
+    }, "Delete");
+    const answerStatusCss = aphrodite.css(styles$J.answerStatus, this.props.considered === "wrong" && styles$J.answerStatusWrong, this.props.considered === "correct" && styles$J.answerStatusCorrect, this.props.considered === "ungraded" && styles$J.answerStatusUngraded);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "expression-answer-option"
+      className: aphrodite.css(styles$J.answerOption)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-handle"
+      className: aphrodite.css(styles$J.answerHandle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-body"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-considered"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.answerBody)
+    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.toggleConsidered,
-      className: "answer-status " + this.props.considered
-    }, this.props.considered), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-expression"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-option"
+      className: answerStatusCss
+    }, this.props.considered), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY, styles$J.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -26887,7 +26979,7 @@ class AnswerOption extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-option"
+      className: aphrodite.css(styles$J.paddedY, styles$J.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -26897,12 +26989,17 @@ class AnswerOption extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "remove-container"
+      className: aphrodite.css(styles$J.buttonRow, styles$J.paddedY)
     }, removeButton)));
   }
   handleImSure = () => {
     this.props.onDelete();
   };
+  handleCancelDelete = () => {
+    this.setState({
+      deleteFocused: false
+    });
+  };
   handleDelete = () => {
     this.setState({
       deleteFocused: true
@@ -26915,6 +27012,49 @@ class AnswerOption extends React__namespace.Component {
     });
   };
 }
+const styles$J = aphrodite.StyleSheet.create({
+  paddedX: {
+    paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
+    paddingRight: wonderBlocksTokens.spacing.xSmall_8
+  },
+  paddedY: {
+    paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+    paddingBottom: wonderBlocksTokens.spacing.xxSmall_6
+  },
+  answerOption: {
+    border: "1px solid #ddd",
+    borderRadius: "3px",
+    display: "flex"
+  },
+  answerHandle: {
+    // textured draggy handle
+    background: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==) no-repeat 50% 50%",
+    borderRight: "1px solid #ddd",
+    cursor: "move",
+    width: "20px",
+    minWidth: "20px"
+  },
+  answerStatus: {
+    border: "none",
+    userSelect: "none",
+    width: "100px",
+    paddingTop: wonderBlocksTokens.spacing.small_12,
+    paddingBottom: wonderBlocksTokens.spacing.small_12
+  },
+  answerStatusWrong: {
+    backgroundColor: wonderBlocksTokens.color.fadedRed16
+  },
+  answerStatusCorrect: {
+    backgroundColor: wonderBlocksTokens.color.fadedGreen16
+  },
+  answerStatusUngraded: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue16
+  },
+  answerBody: {},
+  buttonRow: {
+    display: "flex"
+  }
+});
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
@@ -26974,10 +27114,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$J.title)
+      className: aphrodite.css(styles$I.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$J.input)
+      className: aphrodite.css(styles$I.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27002,7 +27142,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, 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$J.hintsTitle)
+      className: aphrodite.css(styles$I.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27034,7 +27174,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$J = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28421,13 +28561,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$I.outerWrapper
+    style: styles$H.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$I = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29497,16 +29637,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$H.label)
+    className: aphrodite.css(styles$G.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$H.row, style]
+    style: [styles$G.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$H.spaceEnd
+    style: styles$G.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$H.spaceStart
+    style: styles$G.spaceStart
   }, label)));
 };
-const styles$H = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29524,98 +29664,6 @@ const styles$H = aphrodite.StyleSheet.create({
   }
 });
 
-const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  }
-});
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
-  }
-});
-
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-const MediaLayoutContext = React__namespace.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-
-class Spring extends React__namespace.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      "aria-hidden": "true",
-      style: [styles$G.grow, style]
-    });
-  }
-}
-const styles$G = aphrodite.StyleSheet.create({
-  grow: {
-    flexGrow: 1
-  }
-});
-
-class Strut extends React__namespace.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
-  }
-}
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
-
 function Heading(_ref) {
   let {
     title,
@@ -32063,6 +32111,29 @@ const StartCoordsCircle = props => {
     startCoords,
     onChange
   } = props;
+  const [radiusState, setRadiusState] = React__namespace.useState(startCoords.radius.toString());
+
+  // Update the local state when the props change. (Specifically, when
+  // the radius is reset from the "Use default start coordinates" button.)
+  React__namespace.useEffect(() => {
+    setRadiusState(startCoords.radius.toString());
+  }, [startCoords.radius]);
+  function handleRadiuschange(newValue) {
+    // Update the local state to update the input field.
+    setRadiusState(newValue);
+
+    // Assume the user is in the middle of typing. Don't update
+    // the props until they've finished typing a valid number.
+    if (isNaN(+newValue) || newValue === "" || +newValue === 0) {
+      return;
+    }
+
+    // Update the props (update the graph).
+    onChange({
+      center: startCoords.center,
+      radius: parseFloat(newValue)
+    });
+  }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$g.tile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -32078,18 +32149,14 @@ const StartCoordsCircle = props => {
     })
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    tag: "label",
     style: styles$g.row
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Radius:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+  }, "Radius:", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
-    value: startCoords.radius.toString(),
-    onChange: value => {
-      onChange({
-        center: startCoords.center,
-        radius: parseFloat(value)
-      });
-    },
+    value: radiusState,
+    onChange: handleRadiuschange,
     style: styles$g.textField
   })));
 };
@@ -32101,6 +32168,7 @@ const styles$g = aphrodite.StyleSheet.create({
     borderRadius: wonderBlocksTokens.spacing.xSmall_8
   },
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
@@ -35207,7 +35275,7 @@ class NumericInputEditor extends React__namespace.Component {
     }));
     const labelText = /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Label text:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Aria label", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
       value: this.props.labelText,
       onChange: this.change("labelText")
     })), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
@@ -35351,11 +35419,11 @@ class NumericInputEditor extends React__namespace.Component {
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-input-number-editor"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, labelText, inputSize, rightAlign, coefficientCheck, /*#__PURE__*/React__namespace.createElement("div", {
       className: "ui-title"
     }, "User input"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "msg-title"
-    }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton, inputSize, rightAlign, coefficientCheck, labelText);
+    }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton);
   }
   change = (() => {
     var _this = this;