@khanacademy/perseus-editor 13.1.0 → 14.0.1

package/dist/index.js

@@ -19,12 +19,12 @@ var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
 var classNames = require('classnames');
 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 kmath = require('@khanacademy/kmath');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
@@ -91,7 +91,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 = "13.1.0";
+const libVersion = "14.0.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -188,16 +188,6 @@ const JsonEditor = createReactClass__default["default"]({
       this.setState(this.getInitialState());
     }
   },
-  render: function () {
-    const classes = "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
-    return /*#__PURE__*/React__namespace.createElement("textarea", {
-      className: classes,
-      value: this.state.currentValue,
-      onChange: this.handleChange,
-      onKeyDown: this.handleKeyDown,
-      onBlur: this.handleBlur
-    });
-  },
   handleKeyDown: function (e) {
     // This handler allows the tab character to be entered by pressing
     // tab, instead of jumping to the next (non-existant) field
@@ -264,6 +254,16 @@ const JsonEditor = createReactClass__default["default"]({
         valid: true
       });
     }
+  },
+  render: function () {
+    const classes = "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
+    return /*#__PURE__*/React__namespace.createElement("textarea", {
+      className: classes,
+      value: this.state.currentValue,
+      onChange: this.handleChange,
+      onKeyDown: this.handleKeyDown,
+      onBlur: this.handleBlur
+    });
   }
 });
 
@@ -25549,7 +25549,7 @@ const styles$N = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 
 /* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
  *
@@ -25568,10 +25568,6 @@ const StatefulEditorPage = createReactClass__default["default"]({
       componentClass: EditorPage
     };
   },
-  render: function () {
-    const Component = this.props.componentClass;
-    return /*#__PURE__*/React__namespace.createElement(Component, this.state);
-  },
   getInitialState: function () {
     return ___default["default"]({}).extend(___default["default"].omit(this.props, "componentClass"), {
       onChange: this.handleChange,
@@ -25581,9 +25577,6 @@ const StatefulEditorPage = createReactClass__default["default"]({
   componentDidMount: function () {
     this._isMounted = true;
   },
-  componentWillUnmount: function () {
-    this._isMounted = false;
-  },
   // getInitialState isn't called if the react component is re-rendered
   // in-place on the dom, in which case this is called instead, so we
   // need to update the state here.
@@ -25591,6 +25584,9 @@ const StatefulEditorPage = createReactClass__default["default"]({
   UNSAFE_componentWillReceiveProps: function (nextProps) {
     this.setState(___default["default"](nextProps).pick("apiOptions", "imageUploader", "developerMode", "problemNum", "previewDevice", "frameSource"));
   },
+  componentWillUnmount: function () {
+    this._isMounted = false;
+  },
   getSaveWarnings: function () {
     // eslint-disable-next-line react/no-string-refs
     return this.refs.editor.getSaveWarnings();
@@ -25607,6 +25603,10 @@ const StatefulEditorPage = createReactClass__default["default"]({
   scorePreview: function () {
     // eslint-disable-next-line react/no-string-refs
     return this.refs.editor.scorePreview();
+  },
+  render: function () {
+    const Component = this.props.componentClass;
+    return /*#__PURE__*/React__namespace.createElement(Component, this.state);
   }
 });
 
@@ -25955,7 +25955,7 @@ class CSProgramEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = perseus.components;
 class DefinitionEditor extends React__namespace.Component {
   static propTypes = {
@@ -25989,7 +25989,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$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26170,236 +26170,9 @@ class DropdownEditor extends React__namespace.Component {
   }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars, react/forbid-prop-types, react/sort-comp */
-const {
-  Graphie
-} = perseus.components;
-
-// @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint = Graphie.MovablePoint;
-/**
- * This is the widget's renderer. It shows up in the right column
- * in the demo, and is what is visible to users, and where
- * users enter their answers.
- */
-class ExampleGraphieWidget$1 extends React__namespace.Component {
-  static defaultProps = {
-    // We want to allow our coord to be null to test if the
-    // user has interacted with this widget yet when grading it
-    coord: null,
-    graph: {
-      box: [400, 400],
-      labels: ["x", "y"],
-      range: [[-10, 10], [-10, 10]],
-      step: [1, 1],
-      gridStep: [1, 1],
-      valid: true,
-      backgroundImage: null,
-      markings: "grid",
-      showProtractor: false
-    }
-  };
-
-  /**
-   * This is the widget's grading function
-   */
-  static validate(state, rubric) {
-    if (state.coord == null) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    if (kmath.point.equal(state.coord, rubric.correct)) {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-  getUserInput = () => {
-    return perseus.WidgetJsonifyDeprecated.getUserInput.call(this);
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(Graphie
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "graphie",
-      box: this.props.graph.box,
-      range: this.props.graph.range,
-      options: this.props.graph,
-      setup: this.setupGraphie,
-      setDrawingAreaAvailable: this.props.apiOptions?.setDrawingAreaAvailable
-    }, /*#__PURE__*/React__namespace.createElement(MovablePoint, {
-      pointSize: 5,
-      coord: this.props.coord || [0, 0],
-      constraints: [MovablePoint.constraints.snap(), MovablePoint.constraints.bound()],
-      onMove: this.movePoint
-    }));
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  movePoint = newCoord => {
-    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-    this.change({
-      coord: newCoord
-    });
-  };
-  _getGridConfig = options => {
-    return ___default["default"].map(options.step, function (step, i) {
-      return perseus.Util.gridDimensionConfig(step, options.range[i], options.box[i], options.gridStep[i]);
-    });
-  };
-  setupGraphie = (graphie, options) => {
-    const gridConfig = this._getGridConfig(options);
-    graphie.graphInit({
-      range: options.range,
-      scale: ___default["default"].pluck(gridConfig, "scale"),
-      axisArrows: "<->",
-      labelFormat: function (s) {
-        return "\\small{" + s + "}";
-      },
-      gridStep: options.gridStep,
-      tickStep: ___default["default"].pluck(gridConfig, "tickStep"),
-      labelStep: 1,
-      unityLabels: ___default["default"].pluck(gridConfig, "unityLabel")
-    });
-    graphie.label([0, options.range[1][1]], options.labels[1], "above");
-  };
-  simpleValidate = rubric => {
-    return ExampleGraphieWidget$1.validate(this.getUserInput(), rubric);
-  };
-}
-
-/**
- * For this widget to work, we must export it.
- * We also must import this file in src/all-widgets.js
- */
-var ExampleGraphieWidget$2 = {
-  name: "example-graphie-widget",
-  displayName: "Example Graphie Widget",
-  hidden: true,
-  // Hides this widget from the Perseus.Editor widget select
-  widget: ExampleGraphieWidget$1
-};
-
-const ExampleGraphieWidget = ExampleGraphieWidget$2.widget;
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo page. Only the question writer sees this.
- */
-class ExampleGraphieWidgetEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes
-  };
-  static widgetName = "example-graphie-widget";
-  static defaultProps = {
-    correct: [4, 4],
-    graph: {
-      box: [340, 340],
-      labels: ["x", "y"],
-      range: [[-10, 10], [-10, 10]],
-      step: [1, 1],
-      gridStep: [1, 1],
-      valid: true,
-      backgroundImage: null,
-      markings: "grid",
-      showProtractor: false
-    }
-  };
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  handleChange = newProps => {
-    if (newProps.coord) {
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        correct: newProps.coord
-      });
-    }
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(ExampleGraphieWidget, {
-      graph: this.props.graph,
-      coord: this.props.correct,
-      onChange: this.handleChange,
-      apiOptions: this.props.apiOptions
-    }));
-  }
-}
-
-/* eslint-disable react/sort-comp */
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo. Only the question writer sees this.
- */
-class ExampleWidgetEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes
-  };
-  static widgetName = "example-widget";
-  static defaultProps = {
-    correct: ""
-  };
-  input = /*#__PURE__*/React__namespace.createRef();
-  handleAnswerChange = event => {
-    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-    this.change({
-      correct: event.target.value
-    });
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Correct answer:", /*#__PURE__*/React__namespace.createElement("input", {
-      value: this.props.correct,
-      onChange: this.handleAnswerChange,
-      ref: this.input
-    })));
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  focus = () => {
-    this.input.current?.focus();
-    return true;
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
-}
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$7
+  TextInput: TextInput$6
 } = perseus.components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26436,14 +26209,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$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       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$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26718,101 +26491,6 @@ class ExpressionEditor extends React__namespace.Component {
     }
     return perseus.Changeable.change.apply(this, args);
   }
-  render() {
-    const answerOptions = this.props.answerForms.map(ans => {
-      const key = parseAnswerKey(ans);
-      const expressionProps = {
-        // note we're using
-        // *this.props*.{times,functions,buttonSets} since each
-        // answer area has the same settings for those
-        times: this.props.times,
-        functions: this.props.functions,
-        buttonSets: this.props.buttonSets,
-        buttonsVisible: "focused",
-        form: ans.form,
-        simplify: ans.simplify,
-        value: ans.value,
-        onChange: props => this.updateForm(key, props),
-        trackInteraction: () => {},
-        widgetId: this.props.widgetId + "-" + ans.key
-      };
-      return lens(ans).merge([], {
-        key,
-        draggable: true,
-        onChange: props => this.updateForm(Number.parseInt(ans.key ?? ""), props),
-        onDelete: () => this.handleRemoveForm(key),
-        expressionProps: expressionProps
-      }).freeze();
-    }).map(obj => /*#__PURE__*/React__namespace.createElement(AnswerOption, _extends({
-      key: obj.key
-    }, obj)));
-    const sortable = /*#__PURE__*/React__namespace.createElement(SortableArea, {
-      components: answerOptions,
-      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 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: isBasic,
-        onChange: () => this.handleButtonSet(name)
-      });
-    });
-    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
-    }));
-    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$L.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: aphrodite.css(styles$L.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", {
-      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", {
-      className: aphrodite.css(styles$L.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$L.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", {
-      className: aphrodite.css(styles$L.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__default["default"], {
-      size: "small",
-      onClick: this.newAnswer
-    }, "Add new answer")));
-  }
   serialize = () => {
     const formSerializables = ["value", "form", "simplify", "considered",
     // it's a little weird to serialize the react key, but saves some
@@ -26953,6 +26631,101 @@ class ExpressionEditor extends React__namespace.Component {
     newProps.functions = value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
     this.props.onChange(newProps);
   };
+  render() {
+    const answerOptions = this.props.answerForms.map(ans => {
+      const key = parseAnswerKey(ans);
+      const expressionProps = {
+        // note we're using
+        // *this.props*.{times,functions,buttonSets} since each
+        // answer area has the same settings for those
+        times: this.props.times,
+        functions: this.props.functions,
+        buttonSets: this.props.buttonSets,
+        buttonsVisible: "focused",
+        form: ans.form,
+        simplify: ans.simplify,
+        value: ans.value,
+        onChange: props => this.updateForm(key, props),
+        trackInteraction: () => {},
+        widgetId: this.props.widgetId + "-" + ans.key
+      };
+      return lens(ans).merge([], {
+        key,
+        draggable: true,
+        onChange: props => this.updateForm(Number.parseInt(ans.key ?? ""), props),
+        onDelete: () => this.handleRemoveForm(key),
+        expressionProps: expressionProps
+      }).freeze();
+    }).map(obj => /*#__PURE__*/React__namespace.createElement(AnswerOption, _extends({
+      key: obj.key
+    }, obj)));
+    const sortable = /*#__PURE__*/React__namespace.createElement(SortableArea, {
+      components: answerOptions,
+      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 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: isBasic,
+        onChange: () => this.handleButtonSet(name)
+      });
+    });
+    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
+    }));
+    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$L.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: aphrodite.css(styles$L.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", {
+      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", {
+      className: aphrodite.css(styles$L.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$L.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", {
+      className: aphrodite.css(styles$L.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__default["default"], {
+      size: "small",
+      onClick: this.newAnswer
+    }, "Add new answer")));
+  }
 }
 
 // Find the next element in arr after val, wrapping around to the first.
@@ -26974,6 +26747,25 @@ class AnswerOption extends React__namespace.Component {
       return perseus.Changeable.change.apply(_this, args);
     };
   })();
+  handleImSure = () => {
+    this.props.onDelete();
+  };
+  handleCancelDelete = () => {
+    this.setState({
+      deleteFocused: false
+    });
+  };
+  handleDelete = () => {
+    this.setState({
+      deleteFocused: true
+    });
+  };
+  toggleConsidered = () => {
+    const newVal = findNextIn(perseus.PerseusExpressionAnswerFormConsidered, this.props.considered);
+    this.change({
+      considered: newVal
+    });
+  };
   render() {
     const removeButton = this.state.deleteFocused ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
       size: "small",
@@ -27025,25 +26817,6 @@ class AnswerOption extends React__namespace.Component {
       className: aphrodite.css(styles$L.buttonRow, styles$L.paddedY)
     }, removeButton)));
   }
-  handleImSure = () => {
-    this.props.onDelete();
-  };
-  handleCancelDelete = () => {
-    this.setState({
-      deleteFocused: false
-    });
-  };
-  handleDelete = () => {
-    this.setState({
-      deleteFocused: true
-    });
-  };
-  toggleConsidered = () => {
-    const newVal = findNextIn(perseus.PerseusExpressionAnswerFormConsidered, this.props.considered);
-    this.change({
-      considered: newVal
-    });
-  };
 }
 const styles$L = aphrodite.StyleSheet.create({
   paddedX: {
@@ -27092,7 +26865,7 @@ const styles$L = aphrodite.StyleSheet.create({
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InlineIcon: InlineIcon$3,
-  TextInput: TextInput$6
+  TextInput: TextInput$5
 } = perseus.components;
 const {
   iconPlus: iconPlus$1,
@@ -27141,6 +26914,16 @@ class GradedGroupEditor extends React__namespace.Component {
       hint: null
     });
   };
+  getSaveWarnings = () => {
+    return this.editor.current?.getSaveWarnings();
+  };
+  serialize = () => {
+    return {
+      title: this.props.title,
+      ...this.editor.current?.serialize(),
+      hint: this.hintEditor.current?.serialize()
+    };
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-group-editor"
@@ -27148,7 +26931,7 @@ class GradedGroupEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
       className: aphrodite.css(styles$K.title)
-    }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
+    }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$5, {
       value: this.props.title,
       className: aphrodite.css(styles$K.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
@@ -27196,16 +26979,6 @@ class GradedGroupEditor extends React__namespace.Component {
       onClick: this.handleRemoveHint
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconTrash$2), " Remove this hint")));
   }
-  getSaveWarnings = () => {
-    return this.editor.current?.getSaveWarnings();
-  };
-  serialize = () => {
-    return {
-      title: this.props.title,
-      ...this.editor.current?.serialize(),
-      hint: this.hintEditor.current?.serialize()
-    };
-  };
 }
 const styles$K = aphrodite.StyleSheet.create({
   title: {
@@ -27839,6 +27612,26 @@ class GrapherEditor extends React__namespace.Component {
       return perseus.Changeable.change.apply(_this, args);
     };
   })();
+  handleAvailableTypesChange = newAvailableTypes => {
+    let correct = this.props.correct;
+
+    // If the currently 'correct' type is removed from the list of types,
+    // we need to change it to avoid impossible questions.
+    if (!___default["default"].contains(newAvailableTypes, this.props.correct.type)) {
+      const graph = this.props.graph;
+      const newType = chooseType(newAvailableTypes);
+      correct = defaultPlotProps(newType, graph);
+    }
+    this.props.onChange({
+      availableTypes: newAvailableTypes,
+      correct: correct
+    });
+  };
+  serialize = () => {
+    return ___default["default"].chain(this.props).pick("correct", "availableTypes").extend({
+      graph: ___default["default"].omit(this.props.graph, "box")
+    }).value();
+  };
   render() {
     const sizeClass = containerSizeClass$1.SMALL;
     let equationString;
@@ -27904,26 +27697,6 @@ class GrapherEditor extends React__namespace.Component {
       onChange: this.handleAvailableTypesChange
     })), graph);
   }
-  handleAvailableTypesChange = newAvailableTypes => {
-    let correct = this.props.correct;
-
-    // If the currently 'correct' type is removed from the list of types,
-    // we need to change it to avoid impossible questions.
-    if (!___default["default"].contains(newAvailableTypes, this.props.correct.type)) {
-      const graph = this.props.graph;
-      const newType = chooseType(newAvailableTypes);
-      correct = defaultPlotProps(newType, graph);
-    }
-    this.props.onChange({
-      availableTypes: newAvailableTypes,
-      correct: correct
-    });
-  };
-  serialize = () => {
-    return ___default["default"].chain(this.props).pick("correct", "availableTypes").extend({
-      graph: ___default["default"].omit(this.props.graph, "box")
-    }).value();
-  };
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -27946,20 +27719,6 @@ class GroupEditor extends React__namespace.Component {
     metadata: undefined
   };
   editor = /*#__PURE__*/React__namespace.createRef();
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-group-editor"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, this._renderMetadataEditor()), /*#__PURE__*/React__namespace.createElement(Editor, {
-      ref: this.editor,
-      content: this.props.content,
-      widgets: this.props.widgets,
-      apiOptions: this.props.apiOptions,
-      images: this.props.images,
-      widgetEnabled: true,
-      immutableWidgets: false,
-      onChange: this.props.onChange
-    }));
-  }
   _renderMetadataEditor = () => {
     const GroupMetadataEditor = this.props.apiOptions.GroupMetadataEditor;
     return /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
@@ -27986,6 +27745,20 @@ class GroupEditor extends React__namespace.Component {
       metadata: this.props.metadata
     });
   };
+  render() {
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-group-editor"
+    }, /*#__PURE__*/React__namespace.createElement("div", null, this._renderMetadataEditor()), /*#__PURE__*/React__namespace.createElement(Editor, {
+      ref: this.editor,
+      content: this.props.content,
+      widgets: this.props.widgets,
+      apiOptions: this.props.apiOptions,
+      images: this.props.images,
+      widgetEnabled: true,
+      immutableWidgets: false,
+      onChange: this.props.onChange
+    }));
+  }
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -28011,6 +27784,9 @@ class PairEditor extends React__namespace.Component {
       return perseus.Changeable.change.apply(_this, args);
     };
   })();
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("fieldset", null, /*#__PURE__*/React__namespace.createElement("label", null, "Name:", /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: this.props.name,
@@ -28020,9 +27796,6 @@ class PairEditor extends React__namespace.Component {
       onChange: this.change("value")
     })));
   }
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 /**
  * This is used for editing a set of name/value pairs.
@@ -28035,19 +27808,6 @@ class PairsEditor extends React__namespace.Component {
       value: PropTypes__default["default"].string
     })).isRequired
   };
-  render() {
-    const editors = ___default["default"].map(this.props.pairs, (pair, i) => {
-      return /*#__PURE__*/React__namespace.createElement(PairEditor, {
-        key: i,
-        name: pair.name,
-        value: pair.value
-        // eslint-disable-next-line react/jsx-no-bind
-        ,
-        onChange: this.handlePairChange.bind(this, i)
-      });
-    });
-    return /*#__PURE__*/React__namespace.createElement("div", null, editors);
-  }
   change = (() => {
     var _this2 = this;
     return function () {
@@ -28073,6 +27833,19 @@ class PairsEditor extends React__namespace.Component {
   serialize = () => {
     return perseus.EditorJsonify.serialize.call(this);
   };
+  render() {
+    const editors = ___default["default"].map(this.props.pairs, (pair, i) => {
+      return /*#__PURE__*/React__namespace.createElement(PairEditor, {
+        key: i,
+        name: pair.name,
+        value: pair.value
+        // eslint-disable-next-line react/jsx-no-bind
+        ,
+        onChange: this.handlePairChange.bind(this, i)
+      });
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", null, editors);
+  }
 }
 /**
  * This is the main editor for this widget, to specify all the options.
@@ -28102,6 +27875,15 @@ class IframeEditor extends React__namespace.Component {
       return perseus.Changeable.change.apply(_this3, args);
     };
   })();
+  handleSettingsChange = settings => {
+    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
+    this.change({
+      settings: settings.pairs
+    });
+  };
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
@@ -28145,18 +27927,9 @@ class IframeEditor extends React__namespace.Component {
       }
     }));
   }
-  handleSettingsChange = settings => {
-    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-    this.change({
-      settings: settings.pairs
-    });
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 
-/* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 const {
   InfoTip: InfoTip$f,
   InlineIcon: InlineIcon$2,
@@ -28182,9 +27955,9 @@ const INTERNALLY_HOSTED_URL_RE = new RegExp("^(https?|web\\+graphie)://[^/]*" +
  */
 const captionAlignments = ["center", "above", "above right", "right", "below right", "below", "below left", "left", "above left"];
 class ImageEditor extends React__namespace.Component {
-  _isMounted = false;
   static displayName = "ImageEditor";
   static widgetName = "image";
+  _isMounted = false;
   static defaultProps = {
     title: "",
     range: [defaultRange, defaultRange],
@@ -28205,48 +27978,6 @@ class ImageEditor extends React__namespace.Component {
   componentWillUnmount() {
     this._isMounted = false;
   }
-  render() {
-    const backgroundImage = this.props.backgroundImage;
-    const imageSettings = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "image-settings"
-    }, !perseus.Util.isLabeledSVG(backgroundImage.url) && /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Preview:"), /*#__PURE__*/React__namespace.createElement("img", {
-      alt: "Editor preview of image",
-      src: backgroundImage.url,
-      style: {
-        width: "100%"
-      }
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React__namespace.createElement(Editor, {
-      apiOptions: this.props.apiOptions,
-      content: this.props.alt,
-      onChange: props => {
-        if (props.content != null) {
-          this.change("alt", props.content);
-        }
-      },
-      widgetEnabled: false
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Caption:"), /*#__PURE__*/React__namespace.createElement(Editor, {
-      apiOptions: this.props.apiOptions,
-      content: this.props.caption,
-      onChange: props => {
-        if (props.content != null) {
-          this.change("caption", props.content);
-        }
-      },
-      widgetEnabled: false
-    }))));
-    const backgroundImageErrorText = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "renderer-widget-error"
-    }, this.state.backgroundImageError);
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-image-editor"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
-      value: backgroundImage.url || "",
-      style: {
-        width: 332
-      },
-      onChange: url => this.onUrlChange(url, false)
-    })), backgroundImage.url && imageSettings);
-  }
   _renderRowForLabel(label, i) {
     return /*#__PURE__*/React__namespace.createElement("tr", {
       key: i
@@ -28391,9 +28122,50 @@ class ImageEditor extends React__namespace.Component {
   serialize() {
     return perseus.EditorJsonify.serialize.call(this);
   }
+  render() {
+    const backgroundImage = this.props.backgroundImage;
+    const imageSettings = /*#__PURE__*/React__namespace.createElement("div", {
+      className: "image-settings"
+    }, !perseus.Util.isLabeledSVG(backgroundImage.url) && /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Preview:"), /*#__PURE__*/React__namespace.createElement("img", {
+      alt: "Editor preview of image",
+      src: backgroundImage.url,
+      style: {
+        width: "100%"
+      }
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React__namespace.createElement(Editor, {
+      apiOptions: this.props.apiOptions,
+      content: this.props.alt,
+      onChange: props => {
+        if (props.content != null) {
+          this.change("alt", props.content);
+        }
+      },
+      widgetEnabled: false
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Caption:"), /*#__PURE__*/React__namespace.createElement(Editor, {
+      apiOptions: this.props.apiOptions,
+      content: this.props.caption,
+      onChange: props => {
+        if (props.content != null) {
+          this.change("caption", props.content);
+        }
+      },
+      widgetEnabled: false
+    }))));
+    const backgroundImageErrorText = /*#__PURE__*/React__namespace.createElement("div", {
+      className: "renderer-widget-error"
+    }, this.state.backgroundImageError);
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-image-editor"
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
+      value: backgroundImage.url || "",
+      style: {
+        width: 332
+      },
+      onChange: url => this.onUrlChange(url, false)
+    })), backgroundImage.url && imageSettings);
+  }
 }
 
-/* eslint-disable react/sort-comp */
 const {
   InfoTip: InfoTip$e
 } = perseus.components;
@@ -28450,6 +28222,19 @@ class InputNumberEditor extends React__namespace.Component {
       value: value
     });
   };
+  focus = () => {
+    this.input.current?.focus();
+    return true;
+  };
+  serialize = () => ({
+    value: this.props.value,
+    simplify: this.props.simplify,
+    size: this.props.size,
+    inexact: this.props.inexact,
+    maxError: this.props.maxError,
+    answerType: this.props.answerType,
+    rightAlign: this.props.rightAlign
+  });
   render() {
     const answerTypeOptions = ___default["default"].map(answerTypes, function (v, k) {
       return /*#__PURE__*/React__namespace.createElement("option", {
@@ -28533,19 +28318,6 @@ class InputNumberEditor extends React__namespace.Component {
       }
     }), " ", "Right alignment")));
   }
-  focus = () => {
-    this.input.current?.focus();
-    return true;
-  };
-  serialize = () => ({
-    value: this.props.value,
-    simplify: this.props.simplify,
-    size: this.props.size,
-    inexact: this.props.inexact,
-    maxError: this.props.maxError,
-    answerType: this.props.answerType,
-    rightAlign: this.props.rightAlign
-  });
 }
 
 /**
@@ -28681,7 +28453,7 @@ class FunctionEditor extends React__namespace.Component {
 }
 
 const {
-  TextInput: TextInput$5
+  TextInput: TextInput$4
 } = perseus.components;
 const {
   getDependencies: getDependencies$7
@@ -28715,7 +28487,7 @@ class LabelEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TextInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement(TextInput$4, {
       value: this.props.label,
       onChange: this.change("label"),
       style: {
@@ -32805,18 +32577,10 @@ const {
   containerSizeClass,
   getInteractiveBoxFromSizeClass
 } = perseus.SizingUtils;
-const DeprecationMixin = perseus.Util.DeprecationMixin;
 const InteractiveGraph = perseus.InteractiveGraphWidget.widget;
 const defaultBackgroundImage = {
   url: null
 };
-const deprecatedProps = {
-  showGraph: function (props) {
-    return {
-      markings: props.showGraph ? "graph" : "none"
-    };
-  }
-};
 const POLYGON_SIDES = ___default["default"].map(___default["default"].range(3, 13), function (value) {
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: `polygon-sides-${value}`,
@@ -32831,9 +32595,9 @@ const POLYGON_SIDES = ___default["default"].map(___default["default"].range(3, 1
  * Used in the exercise editor.
  */
 class InteractiveGraphEditor extends React__namespace.Component {
+  static widgetName = "interactive-graph";
   displayName = "InteractiveGraphEditor";
   className = "perseus-widget-interactive-graph";
-  static widgetName = "interactive-graph";
   static defaultProps = {
     ...InteractiveGraph.defaultProps,
     valid: true,
@@ -32844,14 +32608,68 @@ class InteractiveGraphEditor extends React__namespace.Component {
       coords: null
     }
   };
+  changeMatchType = newValue => {
+    const correct = {
+      ...this.props.correct,
+      match: newValue
+    };
+    this.props.onChange({
+      correct: correct
+    });
+  };
+  changeStartCoords = coords => {
+    if (!this.props.graph?.type) {
+      return;
+    }
+    const graph = {
+      ...this.props.graph,
+      startCoords: coords
+    };
+    this.props.onChange({
+      graph: graph
+    });
+  };
 
-  // TODO(jack): Use versioning instead of DeprecationMixin
-  deprecatedProps = deprecatedProps;
+  // serialize() is what makes copy/paste work. All the properties included
+  // in the serialization json are included when, for example, a graph
+  // is copied from the question editor and pasted into the hint editor
+  // (double brackets in the markdown).
+  serialize() {
+    const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures");
 
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount() {
-    DeprecationMixin.UNSAFE_componentWillMount.call(this);
+    // eslint-disable-next-line react/no-string-refs
+    const graph = this.refs.graph;
+    if (graph) {
+      // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
+      const correct = graph && graph.getUserInput();
+      ___default["default"].extend(json, {
+        graph: {
+          type: correct.type,
+          startCoords: this.props.graph?.startCoords
+        },
+        correct: correct
+      });
+      ___default["default"].each(["allowReflexAngles", "angleOffsetDeg", "numPoints", "numSides", "numSegments", "showAngles", "showSides", "snapTo", "snapDegrees"], function (key) {
+        if (___default["default"].has(correct, key)) {
+          // @ts-expect-error - TS2339 - Property 'graph' does not exist on type 'Pick<any, "step" | "range" | "backgroundImage" | "snapStep" | "labels" | "showTooltips" | "markings" | "gridStep" | "showProtractor">'.
+          json.graph[key] = correct[key];
+        }
+      });
+    }
+    // @ts-expect-error TS2739 Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "step" | "gridStep" | "snapStep" | "backgroundImage" | "markings" | "labels" | ... 5 more ... | "range">' is missing the following properties from type 'PerseusInteractiveGraphWidgetOptions': graph, correct
+    return json;
   }
+  getSaveWarnings = () => {
+    const issues = [];
+
+    // A locked line on the graph cannot have length 0.
+    for (const figure of this.props.lockedFigures ?? []) {
+      if (figure.type === "line" && kmath.vector.equal(figure.points[0].coord, figure.points[1].coord)) {
+        issues.push("The line cannot have length 0.");
+      }
+    }
+    return issues;
+  };
   render() {
     let graph;
     let equationString;
@@ -33127,68 +32945,6 @@ class InteractiveGraphEditor extends React__namespace.Component {
       onChange: this.props.onChange
     }));
   }
-  changeMatchType = newValue => {
-    const correct = {
-      ...this.props.correct,
-      match: newValue
-    };
-    this.props.onChange({
-      correct: correct
-    });
-  };
-  changeStartCoords = coords => {
-    if (!this.props.graph?.type) {
-      return;
-    }
-    const graph = {
-      ...this.props.graph,
-      startCoords: coords
-    };
-    this.props.onChange({
-      graph: graph
-    });
-  };
-
-  // serialize() is what makes copy/paste work. All the properties included
-  // in the serialization json are included when, for example, a graph
-  // is copied from the question editor and pasted into the hint editor
-  // (double brackets in the markdown).
-  serialize() {
-    const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures");
-
-    // eslint-disable-next-line react/no-string-refs
-    const graph = this.refs.graph;
-    if (graph) {
-      // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
-      const correct = graph && graph.getUserInput();
-      ___default["default"].extend(json, {
-        graph: {
-          type: correct.type,
-          startCoords: this.props.graph?.startCoords
-        },
-        correct: correct
-      });
-      ___default["default"].each(["allowReflexAngles", "angleOffsetDeg", "numPoints", "numSides", "numSegments", "showAngles", "showSides", "snapTo", "snapDegrees"], function (key) {
-        if (___default["default"].has(correct, key)) {
-          // @ts-expect-error - TS2339 - Property 'graph' does not exist on type 'Pick<any, "step" | "range" | "backgroundImage" | "snapStep" | "labels" | "showTooltips" | "markings" | "gridStep" | "showProtractor">'.
-          json.graph[key] = correct[key];
-        }
-      });
-    }
-    // @ts-expect-error TS2739 Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "step" | "gridStep" | "snapStep" | "backgroundImage" | "markings" | "labels" | ... 5 more ... | "range">' is missing the following properties from type 'PerseusInteractiveGraphWidgetOptions': graph, correct
-    return json;
-  }
-  getSaveWarnings = () => {
-    const issues = [];
-
-    // A locked line on the graph cannot have length 0.
-    for (const figure of this.props.lockedFigures ?? []) {
-      if (figure.type === "line" && kmath.vector.equal(figure.points[0].coord, figure.points[1].coord)) {
-        issues.push("The line cannot have length 0.");
-      }
-    }
-    return issues;
-  };
 }
 const styles$a = aphrodite.StyleSheet.create({
   singleSelectShort: {
@@ -33637,8 +33393,55 @@ const editorStyles = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/sort-comp */
+/**
+ * Add hover behavior to another component.
+ *
+ * This component provides hover and focus status updates in a consistent way
+ * across desktop and mobile.
+ *
+ * For advice on when to use this component instead of Button, see README.md.
+ *
+ * Many mobile browsers treat :hover as sticky which results in buttons looking
+ * pressed even when the user has lifted their finger.  This component ensures
+ * that when user lifts their finger the hover state is removed.
+ *
+ * We also chnage how the focus state works.  Browsers immediately set the
+ * focus state as soon as you click on a button.  This component only sets the
+ * focus state when a user starts navigating between elements via keybaord.
+ *
+ * HoverBehavior accepts a function as 'children' which is passed state and
+ * an object containing event handlers.  The 'children' function should return
+ * an React Element of some sort.
+ *
+ * Example:
+ *
+ * class MyButtonLikeComponent extends React.Component {
+ *     render(): React.Node {
+ *         return <HoverBehavior
+ *             disabled={this.props.disabled}
+ *             onClick={this.handleClick}
+ *         >
+ *             {({hovered}, handlers) =>
+ *                 <RoundRect
+ *                      textcolor='white'
+ *                      backgroundColor={hovered ? 'red' : 'blue'}/>}
+ *                      {...handlers}
+ *                 >
+ *                      {this.props.children}
+ *                 </RoundRect>
+ *             }
+ *         </HoverBehavior>
+ *     }
+ * }
+ *
+ * This follows a pattern call 'Function as Child Components':
+ * https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9#.sw0jiio8b
+ */
 class HoverBehavior extends React__namespace.Component {
+  // @ts-expect-error - TS2564 - Property 'focusFlag' has no initializer and is not definitely assigned in the constructor.
+  focusFlag;
+  // @ts-expect-error - TS2564 - Property 'waitingForClick' has no initializer and is not definitely assigned in the constructor.
+  waitingForClick;
   static defaultProps = {
     startHovered: false,
     shouldUpdate: () => true
@@ -33650,11 +33453,6 @@ class HoverBehavior extends React__namespace.Component {
       hovered: props.startHovered
     };
   }
-
-  // @ts-expect-error - TS2564 - Property 'focusFlag' has no initializer and is not definitely assigned in the constructor.
-  focusFlag;
-  // @ts-expect-error - TS2564 - Property 'waitingForClick' has no initializer and is not definitely assigned in the constructor.
-  waitingForClick;
   handleClick = e => {
     if (!this.props.disabled) {
       if (this.props.shouldUpdate()) {
@@ -34688,7 +34486,7 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
+/* eslint-disable react/forbid-prop-types */
 const {
   InfoTip: InfoTip$a,
   TextListEditor: TextListEditor$3
@@ -34709,6 +34507,22 @@ class MatcherEditor extends React__namespace.Component {
     orderMatters: false,
     padding: true
   };
+  onLabelChange = (index, e) => {
+    const labels = ___default["default"].clone(this.props.labels);
+    labels[index] = e.target.value;
+    this.props.onChange({
+      labels: labels
+    });
+  };
+  getSaveWarnings = () => {
+    if (this.props.left.length !== this.props.right.length) {
+      return ["The two halves of the matcher have different numbers" + " of cards."];
+    }
+    return [];
+  };
+  serialize = () => {
+    return ___default["default"].pick(this.props, "left", "right", "labels", "orderMatters", "padding");
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-matcher-editor"
@@ -34760,25 +34574,8 @@ class MatcherEditor extends React__namespace.Component {
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
-  onLabelChange = (index, e) => {
-    const labels = ___default["default"].clone(this.props.labels);
-    labels[index] = e.target.value;
-    this.props.onChange({
-      labels: labels
-    });
-  };
-  getSaveWarnings = () => {
-    if (this.props.left.length !== this.props.right.length) {
-      return ["The two halves of the matcher have different numbers" + " of cards."];
-    }
-    return [];
-  };
-  serialize = () => {
-    return ___default["default"].pick(this.props, "left", "right", "labels", "orderMatters", "padding");
-  };
 }
 
-/* eslint-disable react/sort-comp */
 const {
   RangeInput: RangeInput$3
 } = perseus.components;
@@ -34827,6 +34624,33 @@ class MatrixEditor extends React__namespace.Component {
     suffix: "",
     cursorPosition: [0, 0]
   };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  onMatrixBoardSizeChange = range => {
+    const matrixSize = getMatrixSize(this.props.answers);
+    if (range[0] !== null && range[1] !== null) {
+      range = [Math.round(Math.min(Math.max(range[0], 1), MAX_BOARD_SIZE)), Math.round(Math.min(Math.max(range[1], 1), MAX_BOARD_SIZE))];
+      const answers = ___default["default"](Math.min(range[0], matrixSize[0])).times(row => {
+        return ___default["default"](Math.min(range[1], matrixSize[1])).times(col => {
+          return this.props.answers[row][col];
+        });
+      });
+      this.props.onChange({
+        matrixBoardSize: range,
+        answers: answers
+      });
+    }
+  };
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const matrixProps = ___default["default"].extend({
       numericInput: true,
@@ -34877,33 +34701,6 @@ class MatrixEditor extends React__namespace.Component {
       }
     })));
   }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  onMatrixBoardSizeChange = range => {
-    const matrixSize = getMatrixSize(this.props.answers);
-    if (range[0] !== null && range[1] !== null) {
-      range = [Math.round(Math.min(Math.max(range[0], 1), MAX_BOARD_SIZE)), Math.round(Math.min(Math.max(range[1], 1), MAX_BOARD_SIZE))];
-      const answers = ___default["default"](Math.min(range[0], matrixSize[0])).times(row => {
-        return ___default["default"](Math.min(range[1], matrixSize[1])).times(col => {
-          return this.props.answers[row][col];
-        });
-      });
-      this.props.onChange({
-        matrixBoardSize: range,
-        answers: answers
-      });
-    }
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -34945,6 +34742,42 @@ class MeasurerEditor extends React__namespace.Component {
     rulerLength: 10
   };
   className = "perseus-widget-measurer";
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  _changeUrl = e => {
+    this._changeImage("url", e.target.value);
+  };
+  _changeTop = newTop => {
+    this._changeImage("top", newTop);
+  };
+  _changeLeft = newLeft => {
+    this._changeImage("left", newLeft);
+  };
+  _changeImage = (subProp, newValue) => {
+    const image = ___default["default"].clone(this.props.image);
+    image[subProp] = newValue;
+    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
+    this.change("image", image);
+  };
+  renderLabelChoices = choices => {
+    return ___default["default"].map(choices, function (nameAndValue) {
+      const [name, value] = nameAndValue;
+      return /*#__PURE__*/React__namespace.createElement("option", {
+        key: value,
+        value: value
+      }, name);
+    });
+  };
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const image = ___default["default"].extend({}, defaultImage, this.props.image);
     return /*#__PURE__*/React__namespace.createElement("div", {
@@ -35038,47 +34871,11 @@ class MeasurerEditor extends React__namespace.Component {
       useArrowKeys: true
     })))));
   }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  _changeUrl = e => {
-    this._changeImage("url", e.target.value);
-  };
-  _changeTop = newTop => {
-    this._changeImage("top", newTop);
-  };
-  _changeLeft = newLeft => {
-    this._changeImage("left", newLeft);
-  };
-  _changeImage = (subProp, newValue) => {
-    const image = ___default["default"].clone(this.props.image);
-    image[subProp] = newValue;
-    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-    this.change("image", image);
-  };
-  renderLabelChoices = choices => {
-    return ___default["default"].map(choices, function (nameAndValue) {
-      const [name, value] = nameAndValue;
-      return /*#__PURE__*/React__namespace.createElement("option", {
-        key: value,
-        value: value
-      }, name);
-    });
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 
 const {
   NumberInput: NumberInput$6,
-  TextInput: TextInput$4
+  TextInput: TextInput$3
 } = perseus.components;
 class MoleculeWidgetEditor extends React__namespace.Component {
   static propTypes = {
@@ -35112,7 +34909,7 @@ class MoleculeWidgetEditor extends React__namespace.Component {
     return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$4, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
       onChange: this.updateMolecule,
       value: this.props.smiles
     }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
@@ -35437,14 +35234,14 @@ class NumberLineEditor extends React__namespace.Component {
   }
 }
 
-/* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 const {
   ButtonGroup,
   InfoTip: InfoTip$7,
   InlineIcon: InlineIcon$1,
   MultiButtonGroup,
   NumberInput: NumberInput$4,
-  TextInput: TextInput$3
+  TextInput: TextInput$2
 } = perseus.components;
 const {
   iconGear,
@@ -35510,6 +35307,106 @@ class NumericInputEditor extends React__namespace.Component {
       showOptions: ___default["default"].map(this.props.answers, () => false)
     };
   }
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  onToggleOptions = choiceIndex => {
+    const showOptions = this.state.showOptions.slice();
+    showOptions[choiceIndex] = !showOptions[choiceIndex];
+    this.setState({
+      showOptions: showOptions
+    });
+  };
+  onTrashAnswer = choiceIndex => {
+    if (choiceIndex >= 0 && choiceIndex < this.props.answers.length) {
+      const answers = this.props.answers.slice(0);
+      answers.splice(choiceIndex, 1);
+      this.props.onChange({
+        answers: answers
+      });
+    }
+  };
+  onSpace = (() => {
+    var _this2 = this;
+    return function (e, callback) {
+      if (e.key === " ") {
+        e.preventDefault(); // prevent page shifting
+        for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+          args[_key2 - 2] = arguments[_key2];
+        }
+        callback.apply(_this2, args);
+      }
+    };
+  })();
+  onStatusChange = choiceIndex => {
+    const statuses = ["wrong", "ungraded", "correct"];
+    const answers = this.props.answers;
+    const i = ___default["default"].indexOf(statuses, answers[choiceIndex].status);
+    const newStatus = statuses[(i + 1) % statuses.length];
+    this.updateAnswer(choiceIndex, {
+      status: newStatus,
+      simplify: newStatus === "correct" ? "required" : "accepted"
+    });
+  };
+  updateAnswer = (choiceIndex, update) => {
+    if (!___default["default"].isObject(update)) {
+      return ___default["default"].partial((choiceIndex, key, value) => {
+        const update = {};
+        update[key] = value;
+        this.updateAnswer(choiceIndex, update);
+      }, choiceIndex, update);
+    }
+    let answers = [
+    // Have to do this to remove the `readonly` state from the prop
+    ...this.props.answers];
+
+    // Don't bother to make a new answer box unless we are editing the last
+    // one.
+    // TODO(oliver): This might not be necessary anymore.
+    if (choiceIndex === answers.length) {
+      const lastAnswer = initAnswer(this.state.lastStatus);
+      answers = answers.concat(lastAnswer);
+    }
+    answers[choiceIndex] = ___default["default"].extend({}, answers[choiceIndex], update);
+    this.props.onChange({
+      answers: answers
+    });
+  };
+  addAnswer = () => {
+    const lastAnswer = initAnswer(this.state.lastStatus);
+    const answers = this.props.answers.concat(lastAnswer);
+    this.props.onChange({
+      answers: answers
+    });
+  };
+  getSaveWarnings = () => {
+    // Filter out all the empty answers
+    const warnings = [];
+    // TODO(emily): This doesn't actually work, because the value is either
+    // null or undefined when undefined, probably.
+    if (___default["default"].contains(___default["default"].pluck(this.props.answers, "value"), "")) {
+      // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
+      warnings.push("One or more answers is empty");
+    }
+    this.props.answers.forEach((answer, i) => {
+      const formatError = answer.strict && (!answer.answerForms || answer.answerForms.length === 0);
+      if (formatError) {
+        warnings.push(
+        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
+        `Answer ${i + 1} is set to string format ` + "matching, but no format was selected");
+      }
+    });
+    return warnings;
+  };
+  serialize = () => {
+    return perseus.EditorJsonify.serialize.call(this);
+  };
   render() {
     const answers = this.props.answers;
     const unsimplifiedAnswers = i => /*#__PURE__*/React__namespace.createElement("div", {
@@ -35581,7 +35478,7 @@ class NumericInputEditor extends React__namespace.Component {
     }));
     const labelText = /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Aria label", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Aria label", /*#__PURE__*/React__namespace.createElement(TextInput$2, {
       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.")));
@@ -35731,106 +35628,6 @@ class NumericInputEditor extends React__namespace.Component {
       className: "msg-title"
     }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton, inputSize, rightAlign, coefficientCheck, labelText);
   }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  onToggleOptions = choiceIndex => {
-    const showOptions = this.state.showOptions.slice();
-    showOptions[choiceIndex] = !showOptions[choiceIndex];
-    this.setState({
-      showOptions: showOptions
-    });
-  };
-  onTrashAnswer = choiceIndex => {
-    if (choiceIndex >= 0 && choiceIndex < this.props.answers.length) {
-      const answers = this.props.answers.slice(0);
-      answers.splice(choiceIndex, 1);
-      this.props.onChange({
-        answers: answers
-      });
-    }
-  };
-  onSpace = (() => {
-    var _this2 = this;
-    return function (e, callback) {
-      if (e.key === " ") {
-        e.preventDefault(); // prevent page shifting
-        for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-          args[_key2 - 2] = arguments[_key2];
-        }
-        callback.apply(_this2, args);
-      }
-    };
-  })();
-  onStatusChange = choiceIndex => {
-    const statuses = ["wrong", "ungraded", "correct"];
-    const answers = this.props.answers;
-    const i = ___default["default"].indexOf(statuses, answers[choiceIndex].status);
-    const newStatus = statuses[(i + 1) % statuses.length];
-    this.updateAnswer(choiceIndex, {
-      status: newStatus,
-      simplify: newStatus === "correct" ? "required" : "accepted"
-    });
-  };
-  updateAnswer = (choiceIndex, update) => {
-    if (!___default["default"].isObject(update)) {
-      return ___default["default"].partial((choiceIndex, key, value) => {
-        const update = {};
-        update[key] = value;
-        this.updateAnswer(choiceIndex, update);
-      }, choiceIndex, update);
-    }
-    let answers = [
-    // Have to do this to remove the `readonly` state from the prop
-    ...this.props.answers];
-
-    // Don't bother to make a new answer box unless we are editing the last
-    // one.
-    // TODO(oliver): This might not be necessary anymore.
-    if (choiceIndex === answers.length) {
-      const lastAnswer = initAnswer(this.state.lastStatus);
-      answers = answers.concat(lastAnswer);
-    }
-    answers[choiceIndex] = ___default["default"].extend({}, answers[choiceIndex], update);
-    this.props.onChange({
-      answers: answers
-    });
-  };
-  addAnswer = () => {
-    const lastAnswer = initAnswer(this.state.lastStatus);
-    const answers = this.props.answers.concat(lastAnswer);
-    this.props.onChange({
-      answers: answers
-    });
-  };
-  getSaveWarnings = () => {
-    // Filter out all the empty answers
-    const warnings = [];
-    // TODO(emily): This doesn't actually work, because the value is either
-    // null or undefined when undefined, probably.
-    if (___default["default"].contains(___default["default"].pluck(this.props.answers, "value"), "")) {
-      // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
-      warnings.push("One or more answers is empty");
-    }
-    this.props.answers.forEach((answer, i) => {
-      const formatError = answer.strict && (!answer.answerForms || answer.answerForms.length === 0);
-      if (formatError) {
-        warnings.push(
-        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
-        `Answer ${i + 1} is set to string format ` + "matching, but no format was selected");
-      }
-    });
-    return warnings;
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -35861,41 +35658,6 @@ class OrdererEditor extends React__namespace.Component {
     height: NORMAL,
     layout: HORIZONTAL$1
   };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-orderer"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Place the cards in the correct order. The same card can be used more than once in the answer but will only be displayed once at the top of a stack of identical cards."))), /*#__PURE__*/React__namespace.createElement(TextListEditor$2, {
-      options: ___default["default"].pluck(this.props.correctOptions, "content")
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onChange: this.onOptionsChange.bind(this, "correctOptions"),
-      layout: this.props.layout
-    }), /*#__PURE__*/React__namespace.createElement("div", null, " ", "Other cards:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create cards that are not part of the answer."))), /*#__PURE__*/React__namespace.createElement(TextListEditor$2, {
-      options: ___default["default"].pluck(this.props.otherOptions, "content")
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onChange: this.onOptionsChange.bind(this, "otherOptions"),
-      layout: this.props.layout
-    }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Layout:", " ", /*#__PURE__*/React__namespace.createElement("select", {
-      value: this.props.layout
-      // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-      ,
-      onChange: this.onLayoutChange
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: HORIZONTAL$1
-    }, "Horizontal"), /*#__PURE__*/React__namespace.createElement("option", {
-      value: VERTICAL$1
-    }, "Vertical"))), /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text (e.g. proofs)."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Height:", " ", /*#__PURE__*/React__namespace.createElement("select", {
-      value: this.props.height
-      // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-      ,
-      onChange: this.onHeightChange
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      value: NORMAL
-    }, "Normal"), /*#__PURE__*/React__namespace.createElement("option", {
-      value: AUTO
-    }, "Automatic"))), /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
-  }
   onOptionsChange = (whichOptions, options, cb) => {
     const props = {};
     props[whichOptions] = ___default["default"].map(options, function (option) {
@@ -35942,6 +35704,41 @@ class OrdererEditor extends React__namespace.Component {
       layout: this.props.layout
     };
   };
+  render() {
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-orderer"
+    }, /*#__PURE__*/React__namespace.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Place the cards in the correct order. The same card can be used more than once in the answer but will only be displayed once at the top of a stack of identical cards."))), /*#__PURE__*/React__namespace.createElement(TextListEditor$2, {
+      options: ___default["default"].pluck(this.props.correctOptions, "content")
+      // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onChange: this.onOptionsChange.bind(this, "correctOptions"),
+      layout: this.props.layout
+    }), /*#__PURE__*/React__namespace.createElement("div", null, " ", "Other cards:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create cards that are not part of the answer."))), /*#__PURE__*/React__namespace.createElement(TextListEditor$2, {
+      options: ___default["default"].pluck(this.props.otherOptions, "content")
+      // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onChange: this.onOptionsChange.bind(this, "otherOptions"),
+      layout: this.props.layout
+    }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Layout:", " ", /*#__PURE__*/React__namespace.createElement("select", {
+      value: this.props.layout
+      // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
+      ,
+      onChange: this.onLayoutChange
+    }, /*#__PURE__*/React__namespace.createElement("option", {
+      value: HORIZONTAL$1
+    }, "Horizontal"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: VERTICAL$1
+    }, "Vertical"))), /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text (e.g. proofs)."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Height:", " ", /*#__PURE__*/React__namespace.createElement("select", {
+      value: this.props.height
+      // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
+      ,
+      onChange: this.onHeightChange
+    }, /*#__PURE__*/React__namespace.createElement("option", {
+      value: NORMAL
+    }, "Normal"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: AUTO
+    }, "Automatic"))), /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
+  }
 }
 
 const {
@@ -36035,7 +35832,7 @@ class PassageEditor extends React__namespace.Component {
 const {
   InfoTip: InfoTip$4,
   NumberInput: NumberInput$3,
-  TextInput: TextInput$2
+  TextInput: TextInput$1
 } = perseus.components;
 class PassageRefEditor extends React__namespace.Component {
   static propTypes = {
@@ -36073,7 +35870,7 @@ class PassageRefEditor extends React__namespace.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("referenceNumber")
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Summary Text: ", /*#__PURE__*/React__namespace.createElement(TextInput$2, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Summary Text: ", /*#__PURE__*/React__namespace.createElement(TextInput$1, {
       value: this.props.summaryText
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -36125,14 +35922,29 @@ class PhetSimulationEditor extends React__namespace.Component {
     description: ""
   };
   static widgetName = "phet-simulation";
+  serialize() {
+    return {
+      url: this.props.url,
+      description: this.props.description
+    };
+  }
+  getSaveWarnings = () => {
+    if (perseus.makeSafeUrl(this.props.url, "en") === null) {
+      return ["Please enter a URL from the PhET domain."];
+    }
+    return [];
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "URL",
       value: this.props.url,
       onChange: url => this.props.onChange({
         url
-      })
-    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      }),
+      style: {
+        marginBottom: wonderBlocksTokens.spacing.large_24
+      }
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Description",
       value: this.props.description,
       onChange: description => this.props.onChange({
@@ -36140,12 +35952,6 @@ class PhetSimulationEditor extends React__namespace.Component {
       })
     }));
   }
-  serialize() {
-    return {
-      url: this.props.url,
-      description: this.props.description
-    };
-  }
 }
 
 const {
@@ -36463,7 +36269,7 @@ class PlotterEditor extends React__namespace.Component {
  */
 const {
   NumberInput: NumberInput$1,
-  TextInput: TextInput$1
+  TextInput
 } = perseus.components;
 function validateOptions(height, programID) {
   const errors = [];
@@ -36505,7 +36311,7 @@ class PythonProgramEditor extends React__namespace.Component {
     return validateOptions(this.props.height, this.props.programID);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$1, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React__namespace.createElement(TextInput, {
       value: this.props.programID,
       onChange: this.change("programID"),
       placeholder: "123"
@@ -36517,7 +36323,7 @@ class PythonProgramEditor extends React__namespace.Component {
   }
 }
 
-/* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types, react/sort-comp */
+/* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types */
 const {
   InlineIcon
 } = perseus.components;
@@ -36610,94 +36416,6 @@ class RadioEditor extends React__namespace.Component {
     countChoices: false,
     deselectEnabled: false
   };
-  render() {
-    const numCorrect = ___default["default"].reduce(this.props.choices, function (memo, choice) {
-      return choice.correct ? memo + 1 : memo;
-    }, 0);
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("a", {
-      href:
-      // This is an editor component, not user-facing.
-      "https://docs.google.com/document/d/1frZf7yrWVWb1n4tVjqlzqVUiv1pn4cZXbxgP62-JDBY/edit#heading=h.8ng1isya19nu",
-      target: "_blank"
-    }, "Multiple choice style guide"), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      label: "Multiple selections",
-      checked: this.props.multipleSelect,
-      onChange: value => {
-        this.onMultipleSelectChange({
-          multipleSelect: value
-        });
-      }
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      label: "Randomize order",
-      checked: this.props.randomize,
-      onChange: value => {
-        this.props.onChange({
-          randomize: value
-        });
-      }
-    })), this.props.multipleSelect && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      label: "Specify number correct",
-      checked: this.props.countChoices,
-      onChange: value => {
-        this.onCountChoicesChange({
-          countChoices: value
-        });
-      }
-    }))), /*#__PURE__*/React__namespace.createElement(perseus.BaseRadio, {
-      multipleSelect: this.props.multipleSelect,
-      countChoices: this.props.countChoices,
-      numCorrect: numCorrect,
-      editMode: true,
-      labelWrap: false,
-      apiOptions: this.props.apiOptions,
-      choices: this.props.choices.map((choice, i) => {
-        return {
-          content: /*#__PURE__*/React__namespace.createElement(ChoiceEditor, {
-            ref: `choice-editor${i}`,
-            apiOptions: this.props.apiOptions,
-            choice: choice,
-            onContentChange: newProps => {
-              if ("content" in newProps) {
-                this.onContentChange(i, newProps.content);
-              }
-            },
-            onClueChange: newProps => {
-              if ("content" in newProps) {
-                this.onClueChange(i, newProps.content);
-              }
-            },
-            onDelete: () => this.onDelete(i),
-            showDelete: this.props.choices.length >= 2
-          }),
-          isNoneOfTheAbove: choice.isNoneOfTheAbove,
-          checked: choice.correct
-        };
-      }, this),
-      onChange: this.onChange
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "add-choice-container"
-    }, /*#__PURE__*/React__namespace.createElement("a", {
-      className: "simple-button orange",
-      href: "#"
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onClick: this.addChoice.bind(this, false)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React__namespace.createElement("a", {
-      className: "simple-button",
-      href: "#"
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onClick: this.addChoice.bind(this, true)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconPlus), " None of the above", " ")));
-  }
   change = (() => {
     var _this = this;
     return function () {
@@ -36816,64 +36534,94 @@ class RadioEditor extends React__namespace.Component {
   serialize = () => {
     return ___default["default"].pick(this.props, "choices", "randomize", "multipleSelect", "countChoices", "displayCount", "hasNoneOfTheAbove", "deselectEnabled");
   };
-}
-
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-class TextArea extends React__namespace.Component {
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("textarea", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "input",
-      value: this.props.value || "",
-      onChange: this.changeValue
-    });
-  }
-  focus = () => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-    this.refs.input.focus();
-    return true;
-  };
-  changeValue = e => {
-    // Translating from the js event e to the value
-    // of the textbox to send to onChange
-    this.props.onChange(e.target.value);
-  };
-}
-class SimpleMarkdownTesterEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes
-  };
-  static widgetName = "simple-markdown-tester";
-  static defaultProps = {
-    value: ""
-  };
-  input = /*#__PURE__*/React__namespace.createRef();
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Simple markdown contents:"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(TextArea, {
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
+    const numCorrect = ___default["default"].reduce(this.props.choices, function (memo, choice) {
+      return choice.correct ? memo + 1 : memo;
+    }, 0);
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("a", {
+      href:
+      // This is an editor component, not user-facing.
+      "https://docs.google.com/document/d/1frZf7yrWVWb1n4tVjqlzqVUiv1pn4cZXbxgP62-JDBY/edit#heading=h.8ng1isya19nu",
+      target: "_blank"
+    }, "Multiple choice style guide"), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Multiple selections",
+      checked: this.props.multipleSelect,
+      onChange: value => {
+        this.onMultipleSelectChange({
+          multipleSelect: value
+        });
+      }
+    })), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Randomize order",
+      checked: this.props.randomize,
+      onChange: value => {
+        this.props.onChange({
+          randomize: value
+        });
+      }
+    })), this.props.multipleSelect && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Specify number correct",
+      checked: this.props.countChoices,
+      onChange: value => {
+        this.onCountChoicesChange({
+          countChoices: value
+        });
+      }
+    }))), /*#__PURE__*/React__namespace.createElement(perseus.BaseRadio, {
+      multipleSelect: this.props.multipleSelect,
+      countChoices: this.props.countChoices,
+      numCorrect: numCorrect,
+      editMode: true,
+      labelWrap: false,
+      apiOptions: this.props.apiOptions,
+      choices: this.props.choices.map((choice, i) => {
+        return {
+          content: /*#__PURE__*/React__namespace.createElement(ChoiceEditor, {
+            ref: `choice-editor${i}`,
+            apiOptions: this.props.apiOptions,
+            choice: choice,
+            onContentChange: newProps => {
+              if ("content" in newProps) {
+                this.onContentChange(i, newProps.content);
+              }
+            },
+            onClueChange: newProps => {
+              if ("content" in newProps) {
+                this.onClueChange(i, newProps.content);
+              }
+            },
+            onDelete: () => this.onDelete(i),
+            showDelete: this.props.choices.length >= 2
+          }),
+          isNoneOfTheAbove: choice.isNoneOfTheAbove,
+          checked: choice.correct
+        };
+      }, this),
+      onChange: this.onChange
+    }), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "add-choice-container"
+    }, /*#__PURE__*/React__namespace.createElement("a", {
+      className: "simple-button orange",
+      href: "#"
+      // eslint-disable-next-line react/jsx-no-bind
       ,
-      onChange: this.change("value"),
-      ref: this.input
-    }))));
+      onClick: this.addChoice.bind(this, false)
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React__namespace.createElement("a", {
+      className: "simple-button",
+      href: "#"
+      // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onClick: this.addChoice.bind(this, true)
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconPlus), " None of the above", " ")));
   }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  focus = () => {
-    this.input.current?.focus();
-    return true;
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -36936,7 +36684,6 @@ class SorterEditor extends React__namespace.Component {
   }
 }
 
-/* eslint-disable react/sort-comp */
 const {
   InfoTip: InfoTip$1,
   NumberInput
@@ -36967,41 +36714,6 @@ class TableEditor extends React__namespace.Component {
   focus = () => {
     this.numberOfColumns.current?.focus();
   };
-  render() {
-    const tableProps = ___default["default"].pick(this.props, "headers", "answers", "onChange", "apiOptions");
-    ___default["default"].extend(tableProps, {
-      editableHeaders: true,
-      Editor,
-      onFocus: () => {},
-      onBlur: () => {},
-      trackInteraction: () => {}
-    });
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput, {
-      ref: this.numberOfColumns,
-      value: this.props.columns,
-      onChange: val => {
-        if (val) {
-          this.onSizeInput(this.props.rows, val);
-        }
-      },
-      useArrowKeys: true
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of rows:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "numberOfRows",
-      value: this.props.rows,
-      onChange: val => {
-        if (val) {
-          this.onSizeInput(val, this.props.columns);
-        }
-      },
-      useArrowKeys: true
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$1, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Table, tableProps)));
-  }
   onSizeInput = (numRawRows, numRawColumns) => {
     let rows = +numRawRows || 0;
     let columns = +numRawColumns || 0;
@@ -37044,6 +36756,41 @@ class TableEditor extends React__namespace.Component {
       answers: ___default["default"].map(this.props.answers, ___default["default"].clone)
     });
   };
+  render() {
+    const tableProps = ___default["default"].pick(this.props, "headers", "answers", "onChange", "apiOptions");
+    ___default["default"].extend(tableProps, {
+      editableHeaders: true,
+      Editor,
+      onFocus: () => {},
+      onBlur: () => {},
+      trackInteraction: () => {}
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput, {
+      ref: this.numberOfColumns,
+      value: this.props.columns,
+      onChange: val => {
+        if (val) {
+          this.onSizeInput(this.props.rows, val);
+        }
+      },
+      useArrowKeys: true
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of rows:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput
+    // eslint-disable-next-line react/no-string-refs
+    , {
+      ref: "numberOfRows",
+      value: this.props.rows,
+      onChange: val => {
+        if (val) {
+          this.onSizeInput(val, this.props.columns);
+        }
+      },
+      useArrowKeys: true
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$1, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Table, tableProps)));
+  }
 }
 
 const {
@@ -37103,230 +36850,18 @@ class VideoEditor extends React__namespace.Component {
   }
 }
 
-var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PhetSimulationEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, SorterEditor, TableEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
-
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-class TextInput extends React__namespace.Component {
-  input = /*#__PURE__*/React__namespace.createRef();
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("input", {
-      ref: this.input,
-      value: this.props.value || "",
-      onChange: this.changeValue
-    });
-  }
-  focus = () => {
-    this.input.current?.focus();
-    return true;
-  };
-  changeValue = e => {
-    // Translating from the js event e to the value
-    // of the textbox to send to onChange
-    this.props.onChange(e.target.value);
-  };
-}
-/**
- * This is the widget's renderer. It shows up in the right column
- * in the demo, and is what is visible to users, and where
- * users enter their answers.
- */
-class ExampleWidget extends React__namespace.Component {
-  static defaultProps = {
-    value: ""
-  };
-  input = /*#__PURE__*/React__namespace.createRef();
-
-  /**
-   * This is the widget's grading function. simpleValidate generally
-   * defers to this function.
-   *
-   * value is usually the result of getUserInput on the widget
-   * rubric is the result of calling serialize() on the editor
-   */
-  static validate(value, rubric) {
-    if (value === "") {
-      return {
-        type: "invalid",
-        message: "It looks like you haven't answered all of the " + "question yet."
-      };
-    }
-    if (value === rubric.correct) {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-
-  /**
-   * Tell our parent to update our props.
-   */
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(TextInput, {
-      ref: this.input,
-      value: this.props.value
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      ,
-      onChange: this.change("value")
-    });
-  }
-  getUserInput = () => {
-    return this.props.value;
-  };
-
-  /**
-   * Widgets that are focusable should add a focus method that returns
-   * true if focusing succeeded. The first such widget found will be
-   * focused on page load.
-   */
-  focus = () => {
-    this.input.current?.focus();
-    return true;
-  };
-
-  /**
-   * simpleValidate is called for grading. Rubric is the result of calling
-   * getUserInput() on the editor that created this widget.
-   *
-   * Should return an object representing the grading result, such as
-   * {
-   *     type: "points",
-   *     earned: 1,
-   *     total: 1,
-   *     message: null
-   * }
-   */
-  simpleValidate = rubric => {
-    return ExampleWidget.validate(this.getUserInput(), rubric);
-  };
-}
-
-/**
- * For this widget to work, we must import this file in src/all-widgets.js
- */
-var ExampleWidget$1 = {
-  name: "example-widget",
-  displayName: "Example Widget",
-  // Tell the renderer what type of `display:` style we would like
-  // for the component wrapping this one.
-  defaultAlignment: "inline-block",
-  hidden: true,
-  // Hides this widget from the Perseus.Editor widget select
-  widget: ExampleWidget
-};
-
-/* eslint-disable react/sort-comp */
-const mdParse = perseus.PerseusMarkdown.parse;
-const mdOutput = perseus.PerseusMarkdown.basicOutput;
-class SimpleMarkdownTester extends React__namespace.Component {
-  static defaultProps = {
-    value: ""
-  };
-
-  /**
-   * This is the widget's grading function.
-   *
-   * simpleValidate generally defers to this function
-   *
-   * state is usually the result of toJSON on the widget
-   * rubric is the result of calling toJSON() on the editor
-   */
-  static validate(state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  toJSON = () => {
-    return {};
-  };
-  render() {
-    // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-    const parsed = mdParse(this.props.value);
-    const output = mdOutput(parsed);
-    return /*#__PURE__*/React__namespace.createElement("div", null, output);
-  }
-
-  /**
-   * Widgets that are focusable should add a focus method that returns
-   * true if focusing succeeded. The first such widget found will be
-   * focused on page load.
-   */
-  focus = () => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-    this.refs.input.focus();
-    return true;
-  };
-
-  /**
-   * simpleValidate is called for grading. Rubric is the result of calling
-   * toJSON() on the editor that created this widget.
-   *
-   * Should return an object representing the grading result, such as
-   * {
-   *     type: "points",
-   *     earned: 1,
-   *     total: 1,
-   *     message: null
-   * }
-   */
-  simpleValidate = rubric => {
-    return SimpleMarkdownTester.validate(this.toJSON(), rubric);
-  };
-}
-
-/**
- * For this widget to work, we must import this file in src/all-widgets.js
- */
-var SimpleMarkdownTester$1 = {
-  name: "simple-markdown-tester",
-  displayName: "Simple Markdown Tester",
-  hidden: true,
-  // Hides this widget from the Perseus.Editor widget select
-  widget: SimpleMarkdownTester,
-  transform: ___default["default"].identity
-};
-
-var testingWidgets = [ExampleGraphieWidget$2, ExampleWidget$1, SimpleMarkdownTester$1];
-
-var AllWidgets = [...perseus.widgets, ...testingWidgets];
+var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PhetSimulationEditor, PlotterEditor, PythonProgramEditor, SorterEditor, TableEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
 
 perseus.Widgets.registerEditors(AllEditors);
-perseus.Widgets.registerWidgets(AllWidgets);
+perseus.Widgets.registerWidgets(perseus.widgets);
 perseus.Widgets.replaceDeprecatedWidgets();
 perseus.Widgets.replaceDeprecatedEditors();
 
+Object.defineProperty(exports, 'widgets', {
+  enumerable: true,
+  get: function () { return perseus.widgets; }
+});
 exports.AllEditors = AllEditors;
-exports.AllWidgets = AllWidgets;
 exports.ArticleDiff = ArticleDiff;
 exports.ArticleEditor = ArticleEditor;
 exports.DeviceFramer = DeviceFramer;