@khanacademy/perseus-editor 11.3.0 → 11.4.0

package/dist/es/index.js

@@ -13,15 +13,15 @@ import { View, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
-import { Checkbox as Checkbox$1, TextField } from '@khanacademy/wonder-blocks-form';
+import { Checkbox as Checkbox$1, LabeledTextField, TextField } from '@khanacademy/wonder-blocks-form';
 import ReactDOM from 'react-dom';
 import { point, vector, number } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
+import Button from '@khanacademy/wonder-blocks-button';
+import { HeadingSmall, HeadingXSmall, LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
 import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
-import { LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
-import Button from '@khanacademy/wonder-blocks-button';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import caretDoubleDownIcon from '@phosphor-icons/core/bold/caret-double-down-bold.svg';
@@ -37,7 +37,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // 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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -227,7 +227,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$P.button
+      style: styles$R.button
     }, ({
       hovered,
       focused,
@@ -235,7 +235,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$a, icon));
   }
 }
-const styles$P = StyleSheet.create({
+const styles$R = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20740,13 +20740,13 @@ class WidgetSelect extends React.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.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$O = StyleSheet.create({
+const styles$Q = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20779,16 +20779,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$N.errorContainer
+      style: styles$P.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$N.title,
+      style: styles$P.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(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.createElement(View, {
-      style: styles$N.error,
+      style: styles$P.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20797,7 +20797,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$N = StyleSheet.create({
+const styles$P = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23910,7 +23910,7 @@ ItemExtrasEditor.defaultProps = {
   zTable: false
 };
 const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
-  style: [styles$M.checkbox, props.indent ? styles$M.indented : undefined]
+  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
 }, /*#__PURE__*/React.createElement(Checkbox$1, {
   label: /*#__PURE__*/React.createElement(View, {
     style: {
@@ -23920,7 +23920,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$M = StyleSheet.create({
+const styles$O = StyleSheet.create({
   indented: {
     marginInlineStart: spacing.large_24
   }
@@ -24591,7 +24591,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$L.baseButton, color === "green" && styles$L.green, color === "orange" && styles$L.orange),
+      className: css(styles$N.baseButton, color === "green" && styles$N.green, color === "orange" && styles$N.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24606,7 +24606,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$L = StyleSheet.create({
+const styles$N = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24826,23 +24826,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.containerHeader)
+    className: css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$K.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.container)
+    className: css(styles$M.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$K.row, styles$K.rowHeading)
+    className: css(styles$M.row, styles$M.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$K.containerHeader)
+    className: "pod-title " + css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnRight)
+    className: css(styles$M.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24855,11 +24855,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.container)
+    className: css(styles$M.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnLeft, styles$K.containerHeader)
+    className: css(styles$M.columnLeft, styles$M.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24872,28 +24872,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.containerHeader)
+    className: css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$K.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.containerHeader, styles$K.previewCollectionHeader)
+    className: css(styles$M.containerHeader, styles$M.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$K.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.container)
+    className: css(styles$M.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$K.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnLeft)
+    className: css(styles$M.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnRight)
+    className: css(styles$M.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$K.contentIndent)
+    className: css(path.length > 0 && styles$M.contentIndent)
   }, children));
 };
 
@@ -25016,11 +25016,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$K.sticky)
+    className: css(sticky && styles$M.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25028,9 +25028,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnRight)
+    className: css(styles$M.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$K.sticky)
+    className: css(sticky && styles$M.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25046,13 +25046,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$K.sticky)
+    className: css(sticky && styles$M.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$K.hintEditor),
+    className: css(styles$M.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25067,9 +25067,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnRight)
+    className: css(styles$M.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$K.sticky)
+    className: css(sticky && styles$M.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25086,9 +25086,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$K.tagsEditor)
+    className: css(styles$M.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25119,23 +25119,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$K.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$K.verticalFlip)
+      className: css(styles$M.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$K.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$K.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25143,7 +25143,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$K.arrayElement, !elementIsLeaf && styles$K.arrayElementAndNotLeaf)
+      className: css(styles$M.arrayElement, !elementIsLeaf && styles$M.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25169,7 +25169,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$K.objectElement)
+    className: css(styles$M.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25336,7 +25336,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$K = StyleSheet.create({
+const styles$M = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25826,7 +25826,7 @@ CSProgramEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$9
+  TextInput: TextInput$8
 } = components;
 class DefinitionEditor extends React.Component {
   constructor(..._args) {
@@ -25846,7 +25846,7 @@ class DefinitionEditor extends React.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$9, {
+    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26255,7 +26255,7 @@ ExampleWidgetEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26279,14 +26279,14 @@ class ExplanationEditor extends React.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26323,9 +26323,106 @@ ExplanationEditor.propTypes = _extends({}, Changeable.propTypes, {
 ExplanationEditor.widgetName = "explanation";
 ExplanationEditor.defaultProps = defaultExplanationProps;
 
+const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [styles$L.grow, style]
+    });
+  }
+}
+const styles$L = StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
+  }
+}
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
 const PT = PropTypes;
 
-// 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({
   displayName: "SortableArea",
@@ -26482,6 +26579,7 @@ const SortableItem = createReactClass({
     e.preventDefault();
   },
   render: function () {
+    // I think these might be getting styles from Webapp
     let dragState = "sortable-disabled";
     if (this.props.dragging) {
       dragState = "sortable-dragging";
@@ -26490,7 +26588,7 @@ const SortableItem = createReactClass({
     }
     return /*#__PURE__*/React.createElement("li", {
       draggable: this.props.draggable,
-      className: dragState,
+      className: [dragState, css(styles$K.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26498,10 +26596,14 @@ const SortableItem = createReactClass({
     }, this.props.component);
   }
 });
+const styles$K = StyleSheet.create({
+  sortableListItem: {
+    margin: "5px 0"
+  }
+});
 
 const {
-  InfoTip: InfoTip$i,
-  TextInput: TextInput$7
+  InfoTip: InfoTip$i
 } = components;
 
 // types for iterables
@@ -26540,8 +26642,8 @@ const _makeNewKey = answerForms => {
   return usedKeys.length;
 };
 class ExpressionEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(_props) {
+    super(_props);
     this.serialize = () => {
       const formSerializables = ["value", "form", "simplify", "considered",
       // it's a little weird to serialize the react key, but saves some
@@ -26670,11 +26772,17 @@ class ExpressionEditor extends React.Component {
       this.refs.expression.insert(str);
     };
     // called when the function variables change
-    this.handleFunctions = e => {
+    this.handleFunctions = value => {
+      this.setState({
+        functionsInternal: value
+      });
       const newProps = {};
-      newProps.functions = e.target.value.split(/[ ,]+/).filter(isTruthy);
+      newProps.functions = value.split(/[ ,]+/).filter(isTruthy);
       this.props.onChange(newProps);
     };
+    this.state = {
+      functionsInternal: this.props.functions.join(" ")
+    };
   }
   change(...args) {
     return Changeable.change.apply(this, args);
@@ -26712,81 +26820,69 @@ class ExpressionEditor extends React.Component {
     }, obj)));
     const sortable = /*#__PURE__*/React.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.createElement("label", {
-        className: "button-set-label",
-        key: name
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "checkbox",
+      const isBasic = name === "basic";
+      const checked = this.props.buttonSets.includes(name) || isBasic;
+      return /*#__PURE__*/React.createElement(Checkbox$1, {
+        key: name,
+        label: name,
         checked: checked,
-        disabled: isFirst,
+        disabled: isBasic,
         onChange: () => this.handleButtonSet(name)
-      }), name);
+      });
     });
-    const {
-      TeX
-    } = Dependencies.getDependencies(); // OldExpression only
-
-    buttonSetChoices.unshift( /*#__PURE__*/React.createElement("label", {
-      className: "button-set-label",
-      key: "show-div"
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    buttonSetChoices.unshift( /*#__PURE__*/React.createElement(Checkbox$1, {
+      key: "show \xF7 button",
+      label: "show \xF7 button",
+      checked: this.props.buttonSets.includes("basic+div"),
       onChange: this.handleToggleDiv
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "show-div-button"
-    }, "show ", /*#__PURE__*/React.createElement(TeX, null, "\\div"), " button")));
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-expression-editor"
-    }, /*#__PURE__*/React.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Visible label:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
-      value: this.props.visibleLabel,
+    }));
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(HeadingSmall, null, "Global Options"), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(LabeledTextField, {
+      label: "Visible label",
+      value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Aria label:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
-      value: this.props.ariaLabel,
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(LabeledTextField, {
+      label: "Aria label",
+      value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("a", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
-    }, "this article.")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox$1, {
-      label: "Use \xD7 for rendering multiplication instead of a center dot.",
+    }, "this article.")))), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(LabeledTextField, {
+      label: "Function variables",
+      value: this.state.functionsInternal,
+      onChange: this.handleFunctions
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
       onChange: value => {
         this.props.onChange({
           times: value
         });
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      defaultValue: this.props.functions.join(" "),
-      onChange: this.handleFunctions
-    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Answers"), /*#__PURE__*/React.createElement("p", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React.createElement(HeadingSmall, null, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
         margin: "4px 0"
       }
-    }, "student responses area matched against these from top to bottom"), sortable, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.newAnswer
     }, "Add new answer")));
   }
 }
@@ -26810,17 +26906,17 @@ class AnswerOption extends React.Component {
     this.state = {
       deleteFocused: false
     };
-    this.handleDeleteBlur = () => {
-      this.setState({
-        deleteFocused: false
-      });
-    };
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
     this.handleImSure = () => {
       this.props.onDelete();
     };
+    this.handleCancelDelete = () => {
+      this.setState({
+        deleteFocused: false
+      });
+    };
     this.handleDelete = () => {
       this.setState({
         deleteFocused: true
@@ -26834,36 +26930,34 @@ class AnswerOption extends React.Component {
     };
   }
   render() {
-    let removeButton = null;
-    if (this.state.deleteFocused) {
-      removeButton = /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleImSure,
-        onBlur: this.handleDeleteBlur
-      }, "I'm sure!");
-    } else {
-      removeButton = /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleDelete
-      }, "Delete");
-    }
+    const removeButton = this.state.deleteFocused ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.handleImSure,
+      color: "destructive"
+    }, "I'm sure!"), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.small_12
+    }), /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.handleCancelDelete,
+      light: true
+    }, "Cancel")) : /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.handleDelete,
+      color: "destructive",
+      light: true
+    }, "Delete");
+    const answerStatusCss = 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.createElement("div", {
-      className: "expression-answer-option"
+      className: css(styles$J.answerOption)
     }, /*#__PURE__*/React.createElement("div", {
-      className: "answer-handle"
+      className: css(styles$J.answerHandle)
     }), /*#__PURE__*/React.createElement("div", {
-      className: "answer-body"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "answer-considered"
-    }, /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.answerBody)
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       onClick: this.toggleConsidered,
-      className: "answer-status " + this.props.considered
-    }, this.props.considered), /*#__PURE__*/React.createElement("div", {
-      className: "answer-expression"
-    }, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
-      className: "answer-option"
+      className: answerStatusCss
+    }, this.props.considered), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY, styles$J.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -26873,7 +26967,7 @@ class AnswerOption extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
-      className: "answer-option"
+      className: css(styles$J.paddedY, styles$J.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -26883,10 +26977,53 @@ class AnswerOption extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.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.createElement("div", {
-      className: "remove-container"
+      className: css(styles$J.buttonRow, styles$J.paddedY)
     }, removeButton)));
   }
 }
+const styles$J = StyleSheet.create({
+  paddedX: {
+    paddingLeft: spacing.xSmall_8,
+    paddingRight: spacing.xSmall_8
+  },
+  paddedY: {
+    paddingTop: spacing.xxSmall_6,
+    paddingBottom: 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: spacing.small_12,
+    paddingBottom: spacing.small_12
+  },
+  answerStatusWrong: {
+    backgroundColor: color.fadedRed16
+  },
+  answerStatusCorrect: {
+    backgroundColor: color.fadedGreen16
+  },
+  answerStatusUngraded: {
+    backgroundColor: color.fadedBlue16
+  },
+  answerBody: {},
+  buttonRow: {
+    display: "flex"
+  }
+});
 
 const {
   InlineIcon: InlineIcon$3,
@@ -26939,10 +27076,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$J.title)
+      className: css(styles$I.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$J.input)
+      className: css(styles$I.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26967,7 +27104,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$J.hintsTitle)
+      className: css(styles$I.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27004,7 +27141,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$J = StyleSheet.create({
+const styles$I = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28359,13 +28496,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$I.outerWrapper
+    style: styles$H.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$I = StyleSheet.create({
+const styles$H = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29411,16 +29548,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$H.label)
+    className: css(styles$G.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$H.row, style]
+    style: [styles$G.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$H.spaceEnd
+    style: styles$G.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$H.spaceStart
+    style: styles$G.spaceStart
   }, label)));
 };
-const styles$H = StyleSheet.create({
+const styles$G = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29438,98 +29575,6 @@ const styles$H = StyleSheet.create({
   }
 });
 
-const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.medium_16
-  }
-});
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.xxLarge_48
-  }
-});
-
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-const MediaLayoutContext = React.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-
-class Spring extends React.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    return React.createElement(View, {
-      "aria-hidden": "true",
-      style: [styles$G.grow, style]
-    });
-  }
-}
-const styles$G = StyleSheet.create({
-  grow: {
-    flexGrow: 1
-  }
-});
-
-class Strut extends React.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React.createElement(View, {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
-  }
-}
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
-
 function Heading({
   title,
   isOpen,
@@ -31942,6 +31987,29 @@ const StartCoordsCircle = props => {
     startCoords,
     onChange
   } = props;
+  const [radiusState, setRadiusState] = React.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.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.createElement(View, {
     style: styles$g.tile
   }, /*#__PURE__*/React.createElement(View, {
@@ -31957,18 +32025,14 @@ const StartCoordsCircle = props => {
     })
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(LabelLarge, {
+    tag: "label",
     style: styles$g.row
-  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Radius:"), /*#__PURE__*/React.createElement(Strut, {
+  }, "Radius:", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
-    value: startCoords.radius.toString(),
-    onChange: value => {
-      onChange({
-        center: startCoords.center,
-        radius: parseFloat(value)
-      });
-    },
+    value: radiusState,
+    onChange: handleRadiuschange,
     style: styles$g.textField
   })));
 };
@@ -31980,6 +32044,7 @@ const styles$g = StyleSheet.create({
     borderRadius: spacing.xSmall_8
   },
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
@@ -35121,7 +35186,7 @@ class NumericInputEditor extends React.Component {
     }));
     const labelText = /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Label text:", " ", /*#__PURE__*/React.createElement(TextInput$3, {
+    }, /*#__PURE__*/React.createElement("label", null, "Aria label", /*#__PURE__*/React.createElement(TextInput$3, {
       value: this.props.labelText,
       onChange: this.change("labelText")
     })), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
@@ -35265,11 +35330,11 @@ class NumericInputEditor extends React.Component {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-input-number-editor"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, labelText, inputSize, rightAlign, coefficientCheck, /*#__PURE__*/React.createElement("div", {
       className: "ui-title"
     }, "User input"), /*#__PURE__*/React.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);
   }
 }
 NumericInputEditor.contextType = PerseusI18nContext;