@khanacademy/perseus 31.1.0 → 32.0.0

package/dist/index.js

@@ -1009,32 +1009,6 @@ class TextListEditor extends React__namespace.Component {
       items: nextProps.options.concat("")
     });
   }
-  render() {
-    const className = ["perseus-text-list-editor", "perseus-clearfix", "layout-" + this.props.layout].join(" ");
-    const inputs = ___default["default"].map(this.state.items, function (item, i) {
-      return /*#__PURE__*/React__namespace.createElement("li", {
-        key: i
-      }, /*#__PURE__*/React__namespace.createElement("input", {
-        ref: "input_" + i,
-        type: "text",
-        value: item
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onChange: this.onChange.bind(this, i)
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onKeyDown: this.onKeyDown.bind(this, i),
-        style: {
-          width: getTextWidth(item)
-        }
-      }));
-    }, this);
-    return /*#__PURE__*/React__namespace.createElement("ul", {
-      className: className
-    }, inputs);
-  }
   onChange = (index, event) => {
     let items = ___default["default"].clone(this.state.items);
     items[index] = event.target.value;
@@ -1110,6 +1084,32 @@ class TextListEditor extends React__namespace.Component {
       }
     }
   };
+  render() {
+    const className = ["perseus-text-list-editor", "perseus-clearfix", "layout-" + this.props.layout].join(" ");
+    const inputs = ___default["default"].map(this.state.items, function (item, i) {
+      return /*#__PURE__*/React__namespace.createElement("li", {
+        key: i
+      }, /*#__PURE__*/React__namespace.createElement("input", {
+        ref: "input_" + i,
+        type: "text",
+        value: item
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onChange: this.onChange.bind(this, i)
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onKeyDown: this.onKeyDown.bind(this, i),
+        style: {
+          width: getTextWidth(item)
+        }
+      }));
+    }, this);
+    return /*#__PURE__*/React__namespace.createElement("ul", {
+      className: className
+    }, inputs);
+  }
 }
 
 /**
@@ -19651,6 +19651,22 @@ class WidgetContainer extends React__namespace.Component {
     }
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.type !== nextProps.type) {
+      throw new Error("WidgetContainer can't change widget type; set a different " + "key instead to recreate the container.");
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.shouldHighlight !== nextProps.shouldHighlight || this.props.type !== nextProps.type || this.state.widgetProps !== nextState.widgetProps || this.state.sizeClass !== nextState.sizeClass;
+  }
+  getWidget = () => {
+    return this.widgetRef.current;
+  };
+  replaceWidgetProps = newWidgetProps => {
+    this.setState({
+      widgetProps: newWidgetProps
+    });
+  };
   render() {
     let className = classNames__default["default"]({
       "perseus-widget-container": true,
@@ -19745,22 +19761,6 @@ class WidgetContainer extends React__namespace.Component {
       }));
     }));
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.type !== nextProps.type) {
-      throw new Error("WidgetContainer can't change widget type; set a different " + "key instead to recreate the container.");
-    }
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.props.shouldHighlight !== nextProps.shouldHighlight || this.props.type !== nextProps.type || this.state.widgetProps !== nextState.widgetProps || this.state.sizeClass !== nextState.sizeClass;
-  }
-  getWidget = () => {
-    return this.widgetRef.current;
-  };
-  replaceWidgetProps = newWidgetProps => {
-    this.setState({
-      widgetProps: newWidgetProps
-    });
-  };
 }
 
 const {
@@ -21261,6 +21261,34 @@ class TextInput extends React__namespace.Component {
       this.id = uniqueIdForInput();
     }
   }
+  focus = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+    ReactDOM__default["default"].findDOMNode(this).focus();
+  };
+  blur = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
+    ReactDOM__default["default"].findDOMNode(this).blur();
+  };
+  getValue = () => {
+    // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
+    return ReactDOM__default["default"].findDOMNode(this)?.value;
+  };
+  getStringValue = () => {
+    // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
+    return ReactDOM__default["default"].findDOMNode(this)?.value.toString();
+  };
+  setSelectionRange = (selectionStart, selectionEnd) => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
+    ReactDOM__default["default"].findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
+  };
+  getSelectionStart = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
+    return ReactDOM__default["default"].findDOMNode(this).selectionStart;
+  };
+  getSelectionEnd = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
+    return ReactDOM__default["default"].findDOMNode(this).selectionEnd;
+  };
   render() {
     const {
       labelText,
@@ -21292,34 +21320,6 @@ class TextInput extends React__namespace.Component {
       autoComplete: "off"
     });
   }
-  focus = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).focus();
-  };
-  blur = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).blur();
-  };
-  getValue = () => {
-    // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this)?.value;
-  };
-  getStringValue = () => {
-    // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this)?.value.toString();
-  };
-  setSelectionRange = (selectionStart, selectionEnd) => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
-  };
-  getSelectionStart = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionStart;
-  };
-  getSelectionEnd = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionEnd;
-  };
 }
 
 /* eslint-disable react/no-unsafe */
@@ -21569,7 +21569,6 @@ class Tooltip extends React__namespace.Component {
   }
 }
 
-/* eslint-disable react/sort-comp */
 const {
   captureScratchpadTouchStart: captureScratchpadTouchStart$2
 } = Util;
@@ -21623,31 +21622,6 @@ class InputWithExamples extends React__namespace.Component {
     };
     return /*#__PURE__*/React__namespace.createElement(TextInput, inputProps);
   };
-  render() {
-    const input = this._renderInput();
-    const examplesContent = ___default["default"].map(this.props.examples, example => {
-      return "- " + example;
-    }).join("\n");
-    const showExamples = this.props.shouldShowExamples && this.state.showExamples;
-    return /*#__PURE__*/React__namespace.createElement(Tooltip
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "tooltip",
-      className: "perseus-formats-tooltip preview-measure",
-      horizontalPosition: HorizontalDirection.Left,
-      horizontalAlign: HorizontalDirection.Left,
-      verticalPosition: VerticalDirection.Bottom,
-      arrowSize: 10,
-      borderColor: "#ccc",
-      show: showExamples
-    }, input, /*#__PURE__*/React__namespace.createElement("div", {
-      id: this._getUniqueId()
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-      content: examplesContent,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "input-with-examples"),
-      strings: this.context.strings
-    })));
-  }
   _handleFocus = () => {
     this.props.onFocus();
     this.setState({
@@ -21685,6 +21659,31 @@ class InputWithExamples extends React__namespace.Component {
   handleChange = e => {
     this.props.onChange(e.target.value);
   };
+  render() {
+    const input = this._renderInput();
+    const examplesContent = ___default["default"].map(this.props.examples, example => {
+      return "- " + example;
+    }).join("\n");
+    const showExamples = this.props.shouldShowExamples && this.state.showExamples;
+    return /*#__PURE__*/React__namespace.createElement(Tooltip
+    // eslint-disable-next-line react/no-string-refs
+    , {
+      ref: "tooltip",
+      className: "perseus-formats-tooltip preview-measure",
+      horizontalPosition: HorizontalDirection.Left,
+      horizontalAlign: HorizontalDirection.Left,
+      verticalPosition: VerticalDirection.Bottom,
+      arrowSize: 10,
+      borderColor: "#ccc",
+      show: showExamples
+    }, input, /*#__PURE__*/React__namespace.createElement("div", {
+      id: this._getUniqueId()
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
+      content: examplesContent,
+      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "input-with-examples"),
+      strings: this.context.strings
+    })));
+  }
 }
 
 class SimpleKeypadInput extends React__namespace.Component {
@@ -21915,7 +21914,6 @@ var TexWrangler = {
   modifyTex
 };
 
-/* eslint-disable react/sort-comp */
 const ParseTex$1 = TexWrangler.parseTex;
 const answerTypes = {
   number: {
@@ -21992,58 +21990,65 @@ class InputNumber extends React__namespace.Component {
     apiOptions: ApiOptions.defaults,
     linterContext: PerseusLinter.linterContextDefault
   };
-  shouldShowExamples = () => {
-    return this.props.answerType !== "number";
-  };
-  render() {
-    if (this.props.apiOptions.customKeypad) {
-      // TODO(charlie): Support "Review Mode".
-      const input = /*#__PURE__*/React__namespace.createElement(SimpleKeypadInput
-      // eslint-disable-next-line react/no-string-refs
-      , {
-        ref: "input",
-        value: this.props.currentValue,
-        keypadElement: this.props.keypadElement,
-        onChange: this.handleChange,
-        onFocus: this._handleFocus,
-        onBlur: this._handleBlur
-      });
-      if (this.props.rightAlign) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "perseus-input-right-align"
-        }, input);
-      }
-      return input;
+  static validate(state, rubric, strings) {
+    let onInputError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
+    if (rubric.answerType == null) {
+      rubric.answerType = "number";
     }
-    // HACK(johnsullivan): Create a function with shared logic between
-    // this and NumericInput.
-    // TODO(jeremy): Deprecate this widget and prefer numeric-input.
-    const rubric = this.props.reviewModeRubric;
 
-    // Note: This is _very_ similar to what `numeric-input.jsx` does. If
-    // you modify this, double-check if you also need to modify that
-    // component.
-    const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
-    // Unanswered
-    if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$A.answerStateUnanswered);
+    // note(matthewc): this will get immediately parsed again by
+    // `KhanAnswerTypes.number.convertToPredicate`, but a string is
+    // expected here
+    const stringValue = `${rubric.value}`;
+    const val = KhanAnswerTypes.number.createValidatorFunctional(stringValue, {
+      simplify: rubric.simplify,
+      inexact: rubric.inexact || undefined,
+      maxError: rubric.maxError,
+      forms: answerTypes[rubric.answerType].forms
+    }, strings);
+
+    // We may have received TeX; try to parse it before grading.
+    // If `currentValue` is not TeX, this should be a no-op.
+    const currentValue = ParseTex$1(state.currentValue);
+    const result = val(currentValue);
+
+    // TODO(eater): Seems silly to translate result to this invalid/points
+    // thing and immediately translate it back in ItemRenderer.scoreInput()
+    if (result.empty) {
+      // TODO(FEI-3867): remove null-check once we have APIOptionsInternal
+      const apiResult = onInputError?.(null,
+      // reserved for some widget identifier
+      state.currentValue, result.message);
+      return {
+        type: "invalid",
+        message: apiResult === false ? null : result.message
+      };
     }
-    return /*#__PURE__*/React__namespace.createElement(InputWithExamples
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "input",
-      value: this.props.currentValue,
-      onChange: this.handleChange,
-      style: inputStyles,
-      examples: this.examples(),
-      shouldShowExamples: this.shouldShowExamples(),
-      onFocus: this._handleFocus,
-      onBlur: this._handleBlur,
-      id: this.props.widgetId,
-      disabled: this.props.apiOptions.readOnly,
-      linterContext: this.props.linterContext
-    });
+    return {
+      type: "points",
+      earned: result.correct ? 1 : 0,
+      total: 1,
+      message: result.message
+    };
   }
+  static getUserInputFromProps(props) {
+    return {
+      currentValue: props.currentValue
+    };
+  }
+  static getOneCorrectAnswerFromRubric(rubric) {
+    if (rubric.value == null) {
+      return;
+    }
+    let answerString = String(rubric.value);
+    if (rubric.inexact && rubric.maxError) {
+      answerString += " \u00B1 " + rubric.maxError;
+    }
+    return answerString;
+  }
+  shouldShowExamples = () => {
+    return this.props.answerType !== "number";
+  };
   handleChange = (newValue, cb) => {
     this.props.onChange({
       currentValue: newValue
@@ -22109,61 +22114,54 @@ class InputNumber extends React__namespace.Component {
     const examples = ___default["default"].map(forms, form => formExamples$1[form](this.props, strings));
     return [strings.yourAnswer].concat(examples);
   };
-  static validate(state, rubric, strings) {
-    let onInputError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
-    if (rubric.answerType == null) {
-      rubric.answerType = "number";
+  render() {
+    if (this.props.apiOptions.customKeypad) {
+      // TODO(charlie): Support "Review Mode".
+      const input = /*#__PURE__*/React__namespace.createElement(SimpleKeypadInput
+      // eslint-disable-next-line react/no-string-refs
+      , {
+        ref: "input",
+        value: this.props.currentValue,
+        keypadElement: this.props.keypadElement,
+        onChange: this.handleChange,
+        onFocus: this._handleFocus,
+        onBlur: this._handleBlur
+      });
+      if (this.props.rightAlign) {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          className: "perseus-input-right-align"
+        }, input);
+      }
+      return input;
     }
+    // HACK(johnsullivan): Create a function with shared logic between
+    // this and NumericInput.
+    // TODO(jeremy): Deprecate this widget and prefer numeric-input.
+    const rubric = this.props.reviewModeRubric;
 
-    // note(matthewc): this will get immediately parsed again by
-    // `KhanAnswerTypes.number.convertToPredicate`, but a string is
-    // expected here
-    const stringValue = `${rubric.value}`;
-    const val = KhanAnswerTypes.number.createValidatorFunctional(stringValue, {
-      simplify: rubric.simplify,
-      inexact: rubric.inexact || undefined,
-      maxError: rubric.maxError,
-      forms: answerTypes[rubric.answerType].forms
-    }, strings);
-
-    // We may have received TeX; try to parse it before grading.
-    // If `currentValue` is not TeX, this should be a no-op.
-    const currentValue = ParseTex$1(state.currentValue);
-    const result = val(currentValue);
-
-    // TODO(eater): Seems silly to translate result to this invalid/points
-    // thing and immediately translate it back in ItemRenderer.scoreInput()
-    if (result.empty) {
-      // TODO(FEI-3867): remove null-check once we have APIOptionsInternal
-      const apiResult = onInputError?.(null,
-      // reserved for some widget identifier
-      state.currentValue, result.message);
-      return {
-        type: "invalid",
-        message: apiResult === false ? null : result.message
-      };
-    }
-    return {
-      type: "points",
-      earned: result.correct ? 1 : 0,
-      total: 1,
-      message: result.message
-    };
-  }
-  static getUserInputFromProps(props) {
-    return {
-      currentValue: props.currentValue
-    };
-  }
-  static getOneCorrectAnswerFromRubric(rubric) {
-    if (rubric.value == null) {
-      return;
-    }
-    let answerString = String(rubric.value);
-    if (rubric.inexact && rubric.maxError) {
-      answerString += " \u00B1 " + rubric.maxError;
+    // Note: This is _very_ similar to what `numeric-input.jsx` does. If
+    // you modify this, double-check if you also need to modify that
+    // component.
+    const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
+    // Unanswered
+    if (rubric && !this.props.currentValue) {
+      inputStyles.push(styles$A.answerStateUnanswered);
     }
-    return answerString;
+    return /*#__PURE__*/React__namespace.createElement(InputWithExamples
+    // eslint-disable-next-line react/no-string-refs
+    , {
+      ref: "input",
+      value: this.props.currentValue,
+      onChange: this.handleChange,
+      style: inputStyles,
+      examples: this.examples(),
+      shouldShowExamples: this.shouldShowExamples(),
+      onFocus: this._handleFocus,
+      onBlur: this._handleBlur,
+      id: this.props.widgetId,
+      disabled: this.props.apiOptions.readOnly,
+      linterContext: this.props.linterContext
+    });
   }
 }
 const styles$A = aphrodite.StyleSheet.create({
@@ -22607,7 +22605,6 @@ var NumericInput$1 = {
   isLintable: true
 };
 
-/* eslint-disable react/sort-comp */
 const EN_DASH$1 = "\u2013";
 class PassageRef extends React__namespace.Component {
   static contextType = PerseusI18nContext;
@@ -22625,48 +22622,38 @@ class PassageRef extends React__namespace.Component {
     lineRange: null,
     content: null
   };
+  static validate(userInput, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
+  componentDidMount() {
+    // TODO(scottgrant): This is a hack to remove the deprecated call to
+    // this.isMounted() but is still considered an anti-pattern.
+    this._isMounted = true;
+    this._deferredUpdateRange();
+    this._throttledUpdateRange = ___default["default"].throttle(this._deferredUpdateRange, 500);
+    window.addEventListener("resize", this._throttledUpdateRange);
+  }
   shouldComponentUpdate(nextProps, nextState) {
     return !___default["default"].isEqual(this.props, nextProps) || !___default["default"].isEqual(this.state, nextState);
   }
+  componentDidUpdate() {
+    this._deferredUpdateRange();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this._throttledUpdateRange);
+    this._isMounted = false;
+  }
 
   // TODO(tamarab): getUserInput needs to be updated to only return
   // props input by the user. Currently returns all the widget's props.
   getUserInput = () => {
     return removeDenylistProps(this.props);
   };
-  render() {
-    const {
-      strings
-    } = this.context;
-    const lineRange = this.state.lineRange;
-    let lineRangeOutput;
-    if (!lineRange) {
-      lineRangeOutput = strings.lineRange({
-        lineRange: `?${EN_DASH$1}?`
-      });
-    } else if (lineRange[0] === lineRange[1]) {
-      lineRangeOutput = strings.lineNumber({
-        lineNumber: String(lineRange[0])
-      });
-    } else {
-      lineRangeOutput = strings.lineRange({
-        lineRange: lineRange[0] + EN_DASH$1 + lineRange[1]
-      });
-    }
-    let summaryOutput;
-    if (this.props.summaryText) {
-      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-      const summaryTree = PerseusMarkdown.parseInline(this.props.summaryText);
-      summaryOutput = /*#__PURE__*/React__namespace.createElement("span", {
-        "aria-hidden": true
-      }, " ", "(\u201C", PerseusMarkdown.basicOutput(summaryTree), "\u201D)");
-    } else {
-      summaryOutput = null;
-    }
-    return /*#__PURE__*/React__namespace.createElement("span", null, lineRangeOutput, summaryOutput, lineRange && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-sr-only"
-    }, this.state.content));
-  }
   change = (() => {
     var _this = this;
     return function () {
@@ -22676,21 +22663,6 @@ class PassageRef extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  componentDidMount() {
-    // TODO(scottgrant): This is a hack to remove the deprecated call to
-    // this.isMounted() but is still considered an anti-pattern.
-    this._isMounted = true;
-    this._deferredUpdateRange();
-    this._throttledUpdateRange = ___default["default"].throttle(this._deferredUpdateRange, 500);
-    window.addEventListener("resize", this._throttledUpdateRange);
-  }
-  componentDidUpdate() {
-    this._deferredUpdateRange();
-  }
-  componentWillUnmount() {
-    window.removeEventListener("resize", this._throttledUpdateRange);
-    this._isMounted = false;
-  }
   _deferredUpdateRange = () => {
     ___default["default"].defer(this._updateRange);
   };
@@ -22720,13 +22692,38 @@ class PassageRef extends React__namespace.Component {
   simpleValidate = rubric => {
     return PassageRef.validate(this.getUserInput(), rubric);
   };
-  static validate(userInput, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
+  render() {
+    const {
+      strings
+    } = this.context;
+    const lineRange = this.state.lineRange;
+    let lineRangeOutput;
+    if (!lineRange) {
+      lineRangeOutput = strings.lineRange({
+        lineRange: `?${EN_DASH$1}?`
+      });
+    } else if (lineRange[0] === lineRange[1]) {
+      lineRangeOutput = strings.lineNumber({
+        lineNumber: String(lineRange[0])
+      });
+    } else {
+      lineRangeOutput = strings.lineRange({
+        lineRange: lineRange[0] + EN_DASH$1 + lineRange[1]
+      });
+    }
+    let summaryOutput;
+    if (this.props.summaryText) {
+      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
+      const summaryTree = PerseusMarkdown.parseInline(this.props.summaryText);
+      summaryOutput = /*#__PURE__*/React__namespace.createElement("span", {
+        "aria-hidden": true
+      }, " ", "(\u201C", PerseusMarkdown.basicOutput(summaryTree), "\u201D)");
+    } else {
+      summaryOutput = null;
+    }
+    return /*#__PURE__*/React__namespace.createElement("span", null, lineRangeOutput, summaryOutput, lineRange && /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-sr-only"
+    }, this.state.content));
   }
 }
 var PassageRef$1 = {
@@ -24678,6 +24675,33 @@ class Categorizer extends React__namespace.Component {
   state = {
     uniqueId: ___default["default"].uniqueId("perseus_radio_")
   };
+  static validate(userInput, rubric, strings) {
+    let completed = true;
+    let allCorrect = true;
+    rubric.values.forEach((value, i) => {
+      if (userInput.values[i] == null) {
+        completed = false;
+      }
+      if (userInput.values[i] !== value) {
+        allCorrect = false;
+      }
+    });
+    if (!completed) {
+      return {
+        type: "invalid",
+        message: strings.invalidSelection
+      };
+    }
+    return {
+      type: "points",
+      earned: allCorrect ? 1 : 0,
+      total: 1,
+      message: null
+    };
+  }
+  static getUserInputFromProps(props) {
+    return WidgetJsonifyDeprecated.getUserInputFromProps(props);
+  }
   change = (() => {
     var _this = this;
     return function () {
@@ -24691,6 +24715,16 @@ class Categorizer extends React__namespace.Component {
   getUserInput = () => {
     return Categorizer.getUserInputFromProps(this.props);
   };
+  onChange(itemNum, catNum) {
+    const values = [...this.props.values];
+    // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
+    values[itemNum] = catNum;
+    this.change("values", values);
+    this.props.trackInteraction();
+  }
+  simpleValidate = rubric => {
+    return Categorizer.validate(this.getUserInput(), rubric, this.context.strings);
+  };
   render() {
     const self = this;
 
@@ -24767,43 +24801,6 @@ class Categorizer extends React__namespace.Component {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
   }
-  onChange(itemNum, catNum) {
-    const values = [...this.props.values];
-    // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
-    values[itemNum] = catNum;
-    this.change("values", values);
-    this.props.trackInteraction();
-  }
-  simpleValidate = rubric => {
-    return Categorizer.validate(this.getUserInput(), rubric, this.context.strings);
-  };
-  static validate(userInput, rubric, strings) {
-    let completed = true;
-    let allCorrect = true;
-    rubric.values.forEach((value, i) => {
-      if (userInput.values[i] == null) {
-        completed = false;
-      }
-      if (userInput.values[i] !== value) {
-        allCorrect = false;
-      }
-    });
-    if (!completed) {
-      return {
-        type: "invalid",
-        message: strings.invalidSelection
-      };
-    }
-    return {
-      type: "points",
-      earned: allCorrect ? 1 : 0,
-      total: 1,
-      message: null
-    };
-  }
-  static getUserInputFromProps(props) {
-    return WidgetJsonifyDeprecated.getUserInputFromProps(props);
-  }
 }
 
 // TODO(benkomalo): inject page-margin into Perseus instead of hardcoding.
@@ -25311,8 +25308,6 @@ var Dropdown$1 = {
   transform: optionsTransform
 };
 
-/* eslint-disable react/sort-comp */
-
 // transform = _.identity
 
 function mediaQueryIsMatched(mediaQuery) {
@@ -25323,6 +25318,10 @@ function mediaQueryIsMatched(mediaQuery) {
 }
 class Explanation extends React__namespace.Component {
   static contextType = PerseusI18nContext;
+  state = {
+    expanded: false
+  };
+  _mounted = false;
   static defaultProps = {
     showPrompt: "Explain",
     hidePrompt: "Hide explanation",
@@ -25338,10 +25337,6 @@ class Explanation extends React__namespace.Component {
       message: null
     };
   }
-  state = {
-    expanded: false
-  };
-  _mounted = false;
   componentDidMount() {
     this._mounted = true;
   }
@@ -25363,6 +25358,12 @@ class Explanation extends React__namespace.Component {
     });
     this.props.trackInteraction();
   };
+  getUserInput = () => {
+    return {};
+  };
+  simpleValidate = rubric => {
+    return Explanation.validate(this.getUserInput(), rubric);
+  };
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp__default["default"] : caretDown__default["default"];
@@ -25418,12 +25419,6 @@ class Explanation extends React__namespace.Component {
       strings: this.context.strings
     })))));
   }
-  getUserInput = () => {
-    return {};
-  };
-  simpleValidate = rubric => {
-    return Explanation.validate(this.getUserInput(), rubric);
-  };
 }
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
@@ -26847,6 +26842,70 @@ class FunctionGrapher extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
+  renderPlot = () => {
+    const model = this.props.model;
+    const xRange = this.props.graph.range[0];
+    const style = {
+      stroke: this.props.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC,
+      ...(this.props.isMobile ? {
+        "stroke-width": 3
+      } : {})
+    };
+    const coeffs = model.getCoefficients(this._coords(), this._asymptote());
+    if (!coeffs) {
+      return;
+    }
+    const functionProps = model.getPropsForCoeffs(coeffs, xRange);
+    return /*#__PURE__*/React__namespace.createElement(model.Movable, _extends({}, functionProps, {
+      key: this.props.model.url,
+      range: xRange,
+      style: style
+    }));
+  };
+  renderAsymptote = () => {
+    const model = this.props.model;
+    const graph = this.props.graph;
+    const asymptote = this._asymptote();
+    const dashed = {
+      strokeDasharray: "- "
+    };
+    return asymptote && /*#__PURE__*/React__namespace.createElement(MovableLine$2, {
+      onMove: (newCoord, oldCoord) => {
+        // Calculate and apply displacement
+        const delta = kmath.vector.subtract(newCoord, oldCoord);
+        const newAsymptote = ___default["default"].map(this._asymptote(), coord => kmath.vector.add(coord, delta));
+        this.props.onChange({
+          asymptote: newAsymptote
+        });
+      },
+      constraints: [
+      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+      Interactive2.MovableLine.constraints.bound(),
+      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
+      Interactive2.MovableLine.constraints.snap(), (newCoord, oldCoord) => {
+        // Calculate and apply proposed displacement
+        const delta = kmath.vector.subtract(newCoord, oldCoord);
+        const proposedAsymptote = ___default["default"].map(this._asymptote(), coord => kmath.vector.add(coord, delta));
+        // Verify that resulting asymptote is valid for graph
+        if (model.extraAsymptoteConstraint) {
+          return model.extraAsymptoteConstraint(newCoord, oldCoord, this._coords(), proposedAsymptote, graph);
+        }
+        return true;
+      }],
+      normalStyle: dashed,
+      highlightStyle: dashed
+    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
+      key: `asymptoteCoord-${i}`,
+      coord: coord,
+      static: true,
+      draw: null,
+      extendLine: true,
+      showHairlines: this.props.showHairlines,
+      hideHairlines: this.props.hideHairlines,
+      showTooltips: this.props.showTooltips,
+      isMobile: this.props.isMobile
+    })));
+  };
   render() {
     const pointForCoord = (coord, i) => {
       return /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
@@ -26934,70 +26993,6 @@ class FunctionGrapher extends React__namespace.Component {
       setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
     }), this.props.model && this.renderPlot(), this.props.model && this.renderAsymptote(), this.props.model && points)));
   }
-  renderPlot = () => {
-    const model = this.props.model;
-    const xRange = this.props.graph.range[0];
-    const style = {
-      stroke: this.props.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC,
-      ...(this.props.isMobile ? {
-        "stroke-width": 3
-      } : {})
-    };
-    const coeffs = model.getCoefficients(this._coords(), this._asymptote());
-    if (!coeffs) {
-      return;
-    }
-    const functionProps = model.getPropsForCoeffs(coeffs, xRange);
-    return /*#__PURE__*/React__namespace.createElement(model.Movable, _extends({}, functionProps, {
-      key: this.props.model.url,
-      range: xRange,
-      style: style
-    }));
-  };
-  renderAsymptote = () => {
-    const model = this.props.model;
-    const graph = this.props.graph;
-    const asymptote = this._asymptote();
-    const dashed = {
-      strokeDasharray: "- "
-    };
-    return asymptote && /*#__PURE__*/React__namespace.createElement(MovableLine$2, {
-      onMove: (newCoord, oldCoord) => {
-        // Calculate and apply displacement
-        const delta = kmath.vector.subtract(newCoord, oldCoord);
-        const newAsymptote = ___default["default"].map(this._asymptote(), coord => kmath.vector.add(coord, delta));
-        this.props.onChange({
-          asymptote: newAsymptote
-        });
-      },
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovableLine.constraints.bound(),
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovableLine.constraints.snap(), (newCoord, oldCoord) => {
-        // Calculate and apply proposed displacement
-        const delta = kmath.vector.subtract(newCoord, oldCoord);
-        const proposedAsymptote = ___default["default"].map(this._asymptote(), coord => kmath.vector.add(coord, delta));
-        // Verify that resulting asymptote is valid for graph
-        if (model.extraAsymptoteConstraint) {
-          return model.extraAsymptoteConstraint(newCoord, oldCoord, this._coords(), proposedAsymptote, graph);
-        }
-        return true;
-      }],
-      normalStyle: dashed,
-      highlightStyle: dashed
-    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
-      key: `asymptoteCoord-${i}`,
-      coord: coord,
-      static: true,
-      draw: null,
-      extendLine: true,
-      showHairlines: this.props.showHairlines,
-      hideHairlines: this.props.hideHairlines,
-      showTooltips: this.props.showTooltips,
-      isMobile: this.props.isMobile
-    })));
-  };
 }
 
 // Really this is props.plot, I think
@@ -27007,6 +27002,118 @@ class Grapher extends React__namespace.Component {
   horizHairline;
   vertHairline;
   static defaultProps = DEFAULT_GRAPHER_PROPS;
+  static validate(state, rubric) {
+    return validate$1(state, rubric);
+  }
+  static getUserInputFromProps(props) {
+    return props.plot;
+  }
+  handlePlotChanges = newPlot => {
+    const plot = ___default["default"].extend({}, this.props.plot, newPlot);
+    this.props.onChange({
+      plot: plot
+    });
+    this.props.trackInteraction();
+  };
+  handleActiveTypeChange = newType => {
+    const graph = this.props.graph;
+    const plot = ___default["default"].extend({}, this.props.plot, defaultPlotProps(newType, graph));
+    this.props.onChange({
+      plot: plot
+    });
+  };
+  _getGridConfig(options) {
+    return options.step.map((step, i) => {
+      return Util.gridDimensionConfig(step, options.range[i], options.box[i], options.gridStep[i]);
+    });
+  }
+  _calculateMobileTickStep(gridStep, step, ranges) {
+    const tickStep = Util.constrainedTickStepsFromTickSteps(step, ranges);
+
+    // According to the graphInit documentation in graphie.js, tickStep is
+    // relative to the grid units so we need to adjust all values by the
+    // grid step.
+    tickStep[0] = tickStep[0] / gridStep[0];
+    tickStep[1] = tickStep[1] / gridStep[1];
+    return tickStep;
+  }
+  _setupGraphie = (graphie, options) => {
+    const isMobile = this.props.apiOptions.isMobile;
+    if (options.markings === "graph") {
+      graphie.graphInit({
+        range: options.range,
+        scale: ___default["default"].pluck(options.gridConfig, "scale"),
+        axisArrows: "<->",
+        labelFormat: function (s) {
+          return "\\small{" + s + "}";
+        },
+        gridStep: options.gridStep,
+        snapStep: options.snapStep,
+        tickStep: isMobile ? this._calculateMobileTickStep(options.gridStep, options.step, options.range) : ___default["default"].pluck(options.gridConfig, "tickStep"),
+        labelStep: 1,
+        unityLabels: ___default["default"].pluck(options.gridConfig, "unityLabel"),
+        isMobile: isMobile
+      });
+      graphie.label([0, options.range[1][1]], options.labels[1], isMobile ? "below right" : "above");
+      graphie.label([options.range[0][1], 0], options.labels[0], isMobile ? "above left" : "right");
+    } else if (options.markings === "grid") {
+      graphie.graphInit({
+        range: options.range,
+        scale: ___default["default"].pluck(options.gridConfig, "scale"),
+        gridStep: options.gridStep,
+        axes: false,
+        ticks: false,
+        labels: false,
+        isMobile: isMobile
+      });
+    } else if (options.markings === "none") {
+      graphie.init({
+        range: options.range,
+        scale: ___default["default"].pluck(options.gridConfig, "scale")
+      });
+    }
+    if (this.props.apiOptions.isMobile) {
+      const hairlineStyle = {
+        normalStyle: {
+          strokeWidth: 1
+        }
+      };
+      this.horizHairline = new WrappedLine(graphie, [0, 0], [0, 0], hairlineStyle);
+      this.horizHairline.attr({
+        stroke: KhanColors.INTERACTIVE
+      });
+      this.horizHairline.hide();
+      this.vertHairline = new WrappedLine(graphie, [0, 0], [0, 0], hairlineStyle);
+      this.vertHairline.attr({
+        stroke: KhanColors.INTERACTIVE
+      });
+      this.vertHairline.hide();
+    }
+  };
+  showHairlines = point => {
+    if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
+      // Hairlines are already initialized when the graph is loaded, so
+      // here we just move them to the updated location and make them
+      // visible.
+      this.horizHairline.moveTo([this.props.graph.range[0][0], point[1]], [this.props.graph.range[0][1], point[1]]);
+      this.horizHairline.show();
+      this.vertHairline.moveTo([point[0], this.props.graph.range[1][0]], [point[0], this.props.graph.range[1][1]]);
+      this.vertHairline.show();
+    }
+  };
+  hideHairlines = () => {
+    if (this.props.apiOptions.isMobile) {
+      this.horizHairline.hide();
+      this.vertHairline.hide();
+    }
+  };
+  simpleValidate(rubric) {
+    return validate$1(this.getUserInput(), rubric);
+  }
+  getUserInput() {
+    return Grapher.getUserInputFromProps(this.props);
+  }
+  focus() {}
   render() {
     const type = this.props.plot.type;
     const coords = this.props.plot.coords;
@@ -27061,118 +27168,6 @@ class Grapher extends React__namespace.Component {
     };
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(FunctionGrapher, grapherProps), this.props.availableTypes.length > 1 && typeSelector);
   }
-  handlePlotChanges = newPlot => {
-    const plot = ___default["default"].extend({}, this.props.plot, newPlot);
-    this.props.onChange({
-      plot: plot
-    });
-    this.props.trackInteraction();
-  };
-  handleActiveTypeChange = newType => {
-    const graph = this.props.graph;
-    const plot = ___default["default"].extend({}, this.props.plot, defaultPlotProps(newType, graph));
-    this.props.onChange({
-      plot: plot
-    });
-  };
-  _getGridConfig(options) {
-    return options.step.map((step, i) => {
-      return Util.gridDimensionConfig(step, options.range[i], options.box[i], options.gridStep[i]);
-    });
-  }
-  _calculateMobileTickStep(gridStep, step, ranges) {
-    const tickStep = Util.constrainedTickStepsFromTickSteps(step, ranges);
-
-    // According to the graphInit documentation in graphie.js, tickStep is
-    // relative to the grid units so we need to adjust all values by the
-    // grid step.
-    tickStep[0] = tickStep[0] / gridStep[0];
-    tickStep[1] = tickStep[1] / gridStep[1];
-    return tickStep;
-  }
-  _setupGraphie = (graphie, options) => {
-    const isMobile = this.props.apiOptions.isMobile;
-    if (options.markings === "graph") {
-      graphie.graphInit({
-        range: options.range,
-        scale: ___default["default"].pluck(options.gridConfig, "scale"),
-        axisArrows: "<->",
-        labelFormat: function (s) {
-          return "\\small{" + s + "}";
-        },
-        gridStep: options.gridStep,
-        snapStep: options.snapStep,
-        tickStep: isMobile ? this._calculateMobileTickStep(options.gridStep, options.step, options.range) : ___default["default"].pluck(options.gridConfig, "tickStep"),
-        labelStep: 1,
-        unityLabels: ___default["default"].pluck(options.gridConfig, "unityLabel"),
-        isMobile: isMobile
-      });
-      graphie.label([0, options.range[1][1]], options.labels[1], isMobile ? "below right" : "above");
-      graphie.label([options.range[0][1], 0], options.labels[0], isMobile ? "above left" : "right");
-    } else if (options.markings === "grid") {
-      graphie.graphInit({
-        range: options.range,
-        scale: ___default["default"].pluck(options.gridConfig, "scale"),
-        gridStep: options.gridStep,
-        axes: false,
-        ticks: false,
-        labels: false,
-        isMobile: isMobile
-      });
-    } else if (options.markings === "none") {
-      graphie.init({
-        range: options.range,
-        scale: ___default["default"].pluck(options.gridConfig, "scale")
-      });
-    }
-    if (this.props.apiOptions.isMobile) {
-      const hairlineStyle = {
-        normalStyle: {
-          strokeWidth: 1
-        }
-      };
-      this.horizHairline = new WrappedLine(graphie, [0, 0], [0, 0], hairlineStyle);
-      this.horizHairline.attr({
-        stroke: KhanColors.INTERACTIVE
-      });
-      this.horizHairline.hide();
-      this.vertHairline = new WrappedLine(graphie, [0, 0], [0, 0], hairlineStyle);
-      this.vertHairline.attr({
-        stroke: KhanColors.INTERACTIVE
-      });
-      this.vertHairline.hide();
-    }
-  };
-  showHairlines = point => {
-    if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
-      // Hairlines are already initialized when the graph is loaded, so
-      // here we just move them to the updated location and make them
-      // visible.
-      this.horizHairline.moveTo([this.props.graph.range[0][0], point[1]], [this.props.graph.range[0][1], point[1]]);
-      this.horizHairline.show();
-      this.vertHairline.moveTo([point[0], this.props.graph.range[1][0]], [point[0], this.props.graph.range[1][1]]);
-      this.vertHairline.show();
-    }
-  };
-  hideHairlines = () => {
-    if (this.props.apiOptions.isMobile) {
-      this.horizHairline.hide();
-      this.vertHairline.hide();
-    }
-  };
-  simpleValidate(rubric) {
-    return validate$1(this.getUserInput(), rubric);
-  }
-  getUserInput() {
-    return Grapher.getUserInputFromProps(this.props);
-  }
-  focus() {}
-  static validate(state, rubric) {
-    return validate$1(state, rubric);
-  }
-  static getUserInputFromProps(props) {
-    return props.plot;
-  }
 }
 const propTransform$2 = editorProps => {
   const widgetProps = {
@@ -27355,7 +27350,7 @@ var Group$1 = {
   isLintable: true
 };
 
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
+/* eslint-disable react/forbid-prop-types */
 const {
   updateQueryString
 } = Util;
@@ -27380,6 +27375,12 @@ class Iframe extends React__namespace.Component {
     allowFullScreen: false,
     allowTopNavigation: false
   };
+  componentDidMount() {
+    $__default["default"](window).on("message", this.handleMessageEvent);
+  }
+  componentWillUnmount() {
+    $__default["default"](window).off("message", this.handleMessageEvent);
+  }
   getUserInput = () => {
     return WidgetJsonifyDeprecated.getUserInput.call(this);
   };
@@ -27402,12 +27403,20 @@ class Iframe extends React__namespace.Component {
       message: data.message
     });
   };
-  componentDidMount() {
-    $__default["default"](window).on("message", this.handleMessageEvent);
-  }
-  componentWillUnmount() {
-    $__default["default"](window).off("message", this.handleMessageEvent);
-  }
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+      return change.apply(_this, args);
+    };
+  })();
+  simpleValidate = rubric => {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Iframe'.
+    return Iframe.validate(this.getUserInput(), rubric);
+  };
   render() {
     const style = {
       width: String(this.props.width),
@@ -27469,20 +27478,6 @@ class Iframe extends React__namespace.Component {
       allowFullScreen: this.props.allowFullScreen
     });
   }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(_this, args);
-    };
-  })();
-  simpleValidate = rubric => {
-    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Iframe'.
-    return Iframe.validate(this.getUserInput(), rubric);
-  };
 }
 
 /**
@@ -27522,7 +27517,6 @@ var Iframe$1 = {
   hidden: true
 };
 
-/* eslint-disable react/sort-comp */
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
 const defaultBackgroundImage$2 = {
@@ -27548,6 +27542,14 @@ class ImageWidget extends React__namespace.Component {
     caption: "",
     linterContext: PerseusLinter.linterContextDefault
   };
+  static validate(userInput, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   change = (() => {
     var _this = this;
     return function () {
@@ -27697,14 +27699,6 @@ class ImageWidget extends React__namespace.Component {
       }
     }, title, image, caption);
   }
-  static validate(userInput, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 var Image$1 = {
   name: "image",
@@ -27796,6 +27790,14 @@ class Interaction extends React__namespace.Component {
     },
     elements: []
   };
+  static validate(state, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   state = {
     variables: _getInitialVariables(this.props.elements),
     functions: _getInitialFunctions(this.props.elements)
@@ -27903,6 +27905,16 @@ class Interaction extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
+  getUserInput = () => {
+    // TODO(eater): Perhaps we want to be able to record the state of the
+    // user's interaction. Unfortunately sending all the props will
+    // probably make the attempt payload too large. So for now, don't send
+    // anything.
+    return {};
+  };
+  simpleValidate = rubric => {
+    return Interaction.validate(this.getUserInput(), rubric);
+  };
   render() {
     const range = this.props.graph.range;
     let labels = this.props.graph.labels;
@@ -28230,24 +28242,6 @@ class Interaction extends React__namespace.Component {
       }
     }, this));
   }
-  getUserInput = () => {
-    // TODO(eater): Perhaps we want to be able to record the state of the
-    // user's interaction. Unfortunately sending all the props will
-    // probably make the attempt payload too large. So for now, don't send
-    // anything.
-    return {};
-  };
-  simpleValidate = rubric => {
-    return Interaction.validate(this.getUserInput(), rubric);
-  };
-  static validate(state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 const _getInitialVariables = elements => {
   const variables = {};
@@ -29756,44 +29750,6 @@ class NumberInput extends React__namespace.Component {
   state = {
     format: this.props.format
   };
-  render() {
-    let classes = classNames__default["default"]({
-      "number-input": true,
-      "invalid-input": !this._checkValidity(this.props.value),
-      mini: this.props.size === "mini",
-      small: this.props.size === "small",
-      normal: this.props.size === "normal"
-    });
-    if (this.props.className != null) {
-      classes = classes + " " + this.props.className;
-    }
-    const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onFormatChange,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      checkValidity,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      useArrowKeys,
-      ...restProps
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement("input", _extends({}, restProps, {
-      className: classes,
-      type: "text"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "input",
-      onChange: this._handleChange,
-      onFocus: this._handleFocus,
-      onBlur: this._handleBlur,
-      onKeyPress: this._handleBlur,
-      onKeyDown: this._onKeyDown
-      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLInputElement>'.
-      ,
-      onTouchStart: captureScratchpadTouchStart,
-      defaultValue: toNumericString(this.props.value, this.state.format),
-      value: undefined
-    }));
-  }
   componentDidUpdate(prevProps) {
     if (!kmath.number.equal(this.getValue(), this.props.value)) {
       this._setValue(this.props.value, this.state.format);
@@ -29910,6 +29866,44 @@ class NumberInput extends React__namespace.Component {
     // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'val' does not exist on type 'JQueryStatic'.
     $__default["default"](ReactDOM__default["default"].findDOMNode(this.refs.input)).val(toNumericString(val, format));
   };
+  render() {
+    let classes = classNames__default["default"]({
+      "number-input": true,
+      "invalid-input": !this._checkValidity(this.props.value),
+      mini: this.props.size === "mini",
+      small: this.props.size === "small",
+      normal: this.props.size === "normal"
+    });
+    if (this.props.className != null) {
+      classes = classes + " " + this.props.className;
+    }
+    const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onFormatChange,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      checkValidity,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      useArrowKeys,
+      ...restProps
+    } = this.props;
+    return /*#__PURE__*/React__namespace.createElement("input", _extends({}, restProps, {
+      className: classes,
+      type: "text"
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "input",
+      onChange: this._handleChange,
+      onFocus: this._handleFocus,
+      onBlur: this._handleBlur,
+      onKeyPress: this._handleBlur,
+      onKeyDown: this._onKeyDown
+      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLInputElement>'.
+      ,
+      onTouchStart: captureScratchpadTouchStart,
+      defaultValue: toNumericString(this.props.value, this.state.format),
+      value: undefined
+    }));
+  }
 }
 
 const truth = () => true;
@@ -29927,6 +29921,14 @@ class RangeInput extends React__namespace.Component {
   static defaultProps = {
     placeholder: [null, null]
   };
+  onChange = (i, newVal) => {
+    const value = this.props.value;
+    if (i === 0) {
+      this.props.onChange([newVal, value[1]]);
+    } else {
+      this.props.onChange([value[0], newVal]);
+    }
+  };
   render() {
     const value = this.props.value;
     const checkValidity = this.props.checkValidity || truth;
@@ -29948,14 +29950,6 @@ class RangeInput extends React__namespace.Component {
       placeholder: this.props.placeholder[1]
     })));
   }
-  onChange = (i, newVal) => {
-    const value = this.props.value;
-    if (i === 0) {
-      this.props.onChange([newVal, value[1]]);
-    } else {
-      this.props.onChange([value[0], newVal]);
-    }
-  };
 }
 
 var components = /*#__PURE__*/Object.freeze({
@@ -30119,12 +30113,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -30525,6 +30513,9 @@ const GraphLockedLayer = props => {
 };
 
 const actions = {
+  global: {
+    deleteIntent
+  },
   angle: {
     movePoint
   },
@@ -30543,7 +30534,9 @@ const actions = {
   pointGraph: {
     movePoint,
     addPoint,
-    removePoint
+    removePoint,
+    focusPoint,
+    blurPoint
   },
   polygon: {
     movePoint,
@@ -30564,6 +30557,12 @@ const actions = {
     movePoint
   }
 };
+const DELETE_INTENT = "delete-intent";
+function deleteIntent() {
+  return {
+    type: DELETE_INTENT
+  };
+}
 const MOVE_LINE = "move-line";
 function moveLine(itemIndex, delta) {
   return {
@@ -30586,6 +30585,19 @@ function removePoint(index) {
     index
   };
 }
+const FOCUS_POINT = "focus-point";
+function focusPoint(index) {
+  return {
+    type: FOCUS_POINT,
+    index
+  };
+}
+const BLUR_POINT = "blur-point";
+function blurPoint() {
+  return {
+    type: BLUR_POINT
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -32199,7 +32211,14 @@ function UnlimitedPointGraph(props) {
   }), props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     key: i,
     point: point,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
+    onFocusChange: isFocused => {
+      if (isFocused) {
+        dispatch(actions.pointGraph.focusPoint(i));
+      } else {
+        dispatch(actions.pointGraph.blurPoint());
+      }
+    }
   })));
 }
 function PointGraph(props) {
@@ -32355,6 +32374,7 @@ const MafsGraph = props => {
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
+  const graphRef = React__namespace.useRef(null);
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -32372,16 +32392,24 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     className: "mafs-graph",
     style: {
-      height,
-      width: "intrinsic",
       position: "relative",
       padding: "25px 25px 0 0",
       boxSizing: "content-box",
       marginLeft: "20px",
       marginBottom: "20px",
       pointerEvents: props.static ? "none" : "auto",
-      userSelect: "none"
-    }
+      userSelect: "none",
+      width,
+      height
+    },
+    onKeyUp: event => {
+      if (event.key === "Backspace") {
+        dispatch(actions.global.deleteIntent());
+        graphRef.current?.focus();
+      }
+    },
+    ref: graphRef,
+    tabIndex: 0
   }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
@@ -32567,7 +32595,8 @@ function initializeGraphState(params) {
         ...shared,
         type: graph.type,
         coords: getPointCoords(graph, range, step),
-        numPoints: graph.numPoints || 0
+        numPoints: graph.numPoints || 0,
+        focusedPointIndex: null
       };
     case "circle":
       return {
@@ -32827,10 +32856,49 @@ function interactiveGraphReducer(state, action) {
       return doAddPoint(state, action);
     case REMOVE_POINT:
       return doRemovePoint(state, action);
+    case FOCUS_POINT:
+      return doFocusPoint(state, action);
+    case BLUR_POINT:
+      return doBlurPoint(state);
+    case DELETE_INTENT:
+      return doDeleteIntent(state);
     default:
       throw new wonderStuffCore.UnreachableCaseError(action);
   }
 }
+function doDeleteIntent(state, action) {
+  // For unlimited point graphs
+  if (state.type === "point" && state.numPoints === "unlimited") {
+    // if there's a focused point
+    if (state.focusedPointIndex !== null) {
+      // Remove the focused focus
+      return doRemovePoint(state, actions.pointGraph.removePoint(state.focusedPointIndex));
+    }
+  }
+  return state;
+}
+function doFocusPoint(state, action) {
+  switch (state.type) {
+    case "point":
+      return {
+        ...state,
+        focusedPointIndex: action.index
+      };
+    default:
+      return state;
+  }
+}
+function doBlurPoint(state, action) {
+  switch (state.type) {
+    case "point":
+      return {
+        ...state,
+        focusedPointIndex: null
+      };
+    default:
+      return state;
+  }
+}
 function doMovePointInFigure(state, action) {
   switch (state.type) {
     case "segment":
@@ -33196,7 +33264,8 @@ function doRemovePoint(state, action) {
   }
   return {
     ...state,
-    coords: state.coords.filter((_, i) => i !== action.index)
+    coords: state.coords.filter((_, i) => i !== action.index),
+    focusedPointIndex: null
   };
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -37552,73 +37621,6 @@ class Draggable extends React__namespace.Component {
       passive: false
     } : false);
   }
-  componentWillUnmount() {
-    this._mounted = false;
-    // Event handlers should be unbound before component unmounting, but
-    // just in case...
-    if (this.isMouseMoveUpBound) {
-      this.unbindMouseMoveUp();
-    }
-    if (this.animationFrameRequest) {
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // eslint-disable-next-line no-restricted-syntax
-      cancelAnimationFrame(this.animationFrameRequest);
-    }
-    document.removeEventListener("touchmove", this.onMouseMove);
-  }
-  getCurrentPosition = () => {
-    return {
-      left: this.state.startPosition.left + this.state.mouse.left - this.state.startMouse.left,
-      top: this.state.startPosition.top + this.state.mouse.top - this.state.startMouse.top
-    };
-  };
-  render() {
-    const {
-      includePadding,
-      layout,
-      state: type
-    } = this.props;
-
-    // We need to keep backwards compatbility with rules specified directly
-    // in CSS. Hence the hacky tacking on of manual classNames.
-    // See sortable.less for details.
-    let className = aphrodite.css(styles$d.card, styles$d.draggable, layout === Layout.HORIZONTAL && styles$d.horizontalCard, layout === Layout.VERTICAL && styles$d.verticalCard, type === ItemState.DRAGGING && styles$d.dragging, type === ItemState.DISABLED && styles$d.disabled, !includePadding && styles$d.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
-    if (!includePadding) {
-      className += " perseus-sortable-draggable-unpadded";
-    }
-    const style = {
-      position: "static"
-    };
-    if (this.props.state === ItemState.DRAGGING || this.props.state === ItemState.ANIMATING) {
-      ___default["default"].extend(style, {
-        position: "absolute"
-      }, this.getCurrentPosition());
-    }
-    if (this.props.width) {
-      style.width = this.props.width + 1; // Fix for non-integer widths
-    }
-
-    if (this.props.height) {
-      style.height = this.props.height;
-    }
-    if (this.props.margin != null) {
-      style.margin = this.props.margin;
-    }
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      className: className,
-      style: style,
-      onMouseDown: this.onMouseDown,
-      onTouchStart: this.onMouseDown,
-      onTouchMove: this.onMouseMove,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-      content: this.props.content,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "draggable"),
-      onRender: this.props.onRender,
-      strings: this.context.strings
-    }));
-  }
   componentDidUpdate(prevProps) {
     if (this.props.state === prevProps.state) {
       return;
@@ -37640,6 +37642,26 @@ class Draggable extends React__namespace.Component {
       $__default["default"](ReactDOM__default["default"].findDOMNode(this)).finish();
     }
   }
+  componentWillUnmount() {
+    this._mounted = false;
+    // Event handlers should be unbound before component unmounting, but
+    // just in case...
+    if (this.isMouseMoveUpBound) {
+      this.unbindMouseMoveUp();
+    }
+    if (this.animationFrameRequest) {
+      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
+      // eslint-disable-next-line no-restricted-syntax
+      cancelAnimationFrame(this.animationFrameRequest);
+    }
+    document.removeEventListener("touchmove", this.onMouseMove);
+  }
+  getCurrentPosition = () => {
+    return {
+      left: this.state.startPosition.left + this.state.mouse.left - this.state.startMouse.left,
+      top: this.state.startPosition.top + this.state.mouse.top - this.state.startMouse.top
+    };
+  };
   bindMouseMoveUp = () => {
     this.isMouseMoveUpBound = true;
     $__default["default"](document).on("mousemove", this.onMouseMove);
@@ -37727,6 +37749,53 @@ class Draggable extends React__namespace.Component {
       this.props.onMouseUp();
     }
   };
+  render() {
+    const {
+      includePadding,
+      layout,
+      state: type
+    } = this.props;
+
+    // We need to keep backwards compatbility with rules specified directly
+    // in CSS. Hence the hacky tacking on of manual classNames.
+    // See sortable.less for details.
+    let className = aphrodite.css(styles$d.card, styles$d.draggable, layout === Layout.HORIZONTAL && styles$d.horizontalCard, layout === Layout.VERTICAL && styles$d.verticalCard, type === ItemState.DRAGGING && styles$d.dragging, type === ItemState.DISABLED && styles$d.disabled, !includePadding && styles$d.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
+    if (!includePadding) {
+      className += " perseus-sortable-draggable-unpadded";
+    }
+    const style = {
+      position: "static"
+    };
+    if (this.props.state === ItemState.DRAGGING || this.props.state === ItemState.ANIMATING) {
+      ___default["default"].extend(style, {
+        position: "absolute"
+      }, this.getCurrentPosition());
+    }
+    if (this.props.width) {
+      style.width = this.props.width + 1; // Fix for non-integer widths
+    }
+
+    if (this.props.height) {
+      style.height = this.props.height;
+    }
+    if (this.props.margin != null) {
+      style.margin = this.props.margin;
+    }
+    return /*#__PURE__*/React__namespace.createElement("li", {
+      className: className,
+      style: style,
+      onMouseDown: this.onMouseDown,
+      onTouchStart: this.onMouseDown,
+      onTouchMove: this.onMouseMove,
+      onTouchEnd: this.onMouseUp,
+      onTouchCancel: this.onMouseUp
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
+      content: this.props.content,
+      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "draggable"),
+      onRender: this.props.onRender,
+      strings: this.context.strings
+    }));
+  }
 }
 class Sortable extends React__namespace.Component {
   static defaultProps = {
@@ -37740,6 +37809,33 @@ class Sortable extends React__namespace.Component {
     linterContext: PerseusLinter__namespace.linterContextDefault,
     waitForTexRendererToLoad: true
   };
+  remeasureItems = ___default["default"].debounce(() => {
+    this.setState({
+      // Clear item measurements
+      items: Sortable.clearItemMeasurements(this.state.items)
+    });
+  }, 20);
+  static itemsFromProps(props) {
+    const state = props.disabled ? ItemState.DISABLED : ItemState.STATIC;
+    return props.options.map((option, i) => {
+      return {
+        option: option,
+        key: i,
+        state,
+        width: 0,
+        height: 0
+      };
+    });
+  }
+  static clearItemMeasurements(items) {
+    return items.map(item => {
+      return {
+        ...item,
+        width: 0,
+        height: 0
+      };
+    });
+  }
   constructor(props) {
     super(props);
     // Don't call this.setState() here!
@@ -37773,27 +37869,6 @@ class Sortable extends React__namespace.Component {
       }, 0);
     }
   }
-  static itemsFromProps(props) {
-    const state = props.disabled ? ItemState.DISABLED : ItemState.STATIC;
-    return props.options.map((option, i) => {
-      return {
-        option: option,
-        key: i,
-        state,
-        width: 0,
-        height: 0
-      };
-    });
-  }
-  static clearItemMeasurements(items) {
-    return items.map(item => {
-      return {
-        ...item,
-        width: 0,
-        height: 0
-      };
-    });
-  }
   measureItems() {
     // Measure all items and cache what their dimensions should be, taking
     // into account constraints and the current layout. This allows syncing
@@ -37845,129 +37920,6 @@ class Sortable extends React__namespace.Component {
       });
     });
   }
-  remeasureItems = ___default["default"].debounce(() => {
-    this.setState({
-      // Clear item measurements
-      items: Sortable.clearItemMeasurements(this.state.items)
-    });
-  }, 20);
-  render() {
-    // To minimize layout shift, we display a spinner until our math
-    // renderer is ready to render the math inside the sortable. To
-    // do this, we:
-    // - render a dummy TeX component to force the math renderer to load
-    // - display a spinner until the TeX component calls its onRender
-    //   callback, signifying that the math is rendered (from which we can
-    //   infer that the math renderer has loaded)
-    //
-    // If we didn't do this, the user might see a sortable with empty
-    // cells on first render, and then the math would pop in a few moments
-    // later once the rendering library loaded.
-    if (this.props.waitForTexRendererToLoad && !this.state.texRendererLoaded) {
-      const {
-        TeX
-      } = getDependencies();
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, null), /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          display: "none"
-        }
-      }, /*#__PURE__*/React__namespace.createElement(TeX, {
-        onRender: () => this.setState({
-          texRendererLoaded: true
-        })
-      }, "1")));
-    }
-    const cards = [];
-    const {
-      layout
-    } = this.props;
-    // We need to keep backwards compatbility with rules specified directly
-    // in CSS. See sortable.less for details.
-    const className = aphrodite.css(styles$d.sortable) + " perseus-sortable";
-    const syncWidth = this.props.constraints?.width || layout === Layout.VERTICAL;
-    const syncHeight = this.props.constraints?.height || layout === Layout.HORIZONTAL;
-    ___default["default"].each(this.state.items, function (item, i, items) {
-      const isLast = i === items.length - 1;
-      const isStatic = item.state === ItemState.STATIC || item.state === ItemState.DISABLED;
-      let margin;
-
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.layout === Layout.HORIZONTAL) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        margin = "0 " + this.props.margin + "px 0 0"; // right
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      } else if (this.props.layout === Layout.VERTICAL) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        margin = "0 0 " + this.props.margin + "px 0"; // bottom
-      }
-
-      cards.push( /*#__PURE__*/React__namespace.createElement(Draggable, {
-        content: item.option,
-        key: item.key,
-        state: item.state
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        ,
-        ref: item.key,
-        width: syncWidth ? item.width : undefined,
-        height: syncHeight ? item.height : undefined,
-        layout: layout
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        includePadding: this.props.padding,
-        margin: isLast && isStatic ? 0 : margin,
-        endPosition: item.endPosition,
-        linterContext: PerseusLinter__namespace.pushContextStack(
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.props.linterContext, "sortable")
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onRender: this.remeasureItems
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onMouseDown: this.onMouseDown.bind(this, item.key)
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onMouseMove: this.onMouseMove.bind(this, item.key)
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onMouseUp: this.onMouseUp.bind(this, item.key)
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onTouchMove: this.onMouseMove.bind(this, item.key)
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onTouchEnd: this.onMouseUp.bind(this, item.key)
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onTouchCancel: this.onMouseUp.bind(this, item.key)
-        // eslint-disable-next-line react/jsx-no-bind
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onAnimationEnd: this.onAnimationEnd.bind(
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this, item.key)
-      }));
-      if (item.state === ItemState.DRAGGING || item.state === ItemState.ANIMATING) {
-        cards.push( /*#__PURE__*/React__namespace.createElement(Placeholder, {
-          key: "placeholder_" + item.key,
-          ref: "placeholder_" + item.key,
-          width: item.width,
-          height: item.height,
-          layout: layout,
-          margin: isLast ? 0 : margin
-        }));
-      }
-    }, this);
-    return /*#__PURE__*/React__namespace.createElement("ul", {
-      className: className
-    }, cards);
-  }
   onMouseDown(key) {
     // Static -> Dragging
     const items = ___default["default"].map(this.state.items, function (item) {
@@ -38113,6 +38065,123 @@ class Sortable extends React__namespace.Component {
   getOptions() {
     return ___default["default"].pluck(this.state.items, "option");
   }
+  render() {
+    // To minimize layout shift, we display a spinner until our math
+    // renderer is ready to render the math inside the sortable. To
+    // do this, we:
+    // - render a dummy TeX component to force the math renderer to load
+    // - display a spinner until the TeX component calls its onRender
+    //   callback, signifying that the math is rendered (from which we can
+    //   infer that the math renderer has loaded)
+    //
+    // If we didn't do this, the user might see a sortable with empty
+    // cells on first render, and then the math would pop in a few moments
+    // later once the rendering library loaded.
+    if (this.props.waitForTexRendererToLoad && !this.state.texRendererLoaded) {
+      const {
+        TeX
+      } = getDependencies();
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, null), /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React__namespace.createElement(TeX, {
+        onRender: () => this.setState({
+          texRendererLoaded: true
+        })
+      }, "1")));
+    }
+    const cards = [];
+    const {
+      layout
+    } = this.props;
+    // We need to keep backwards compatbility with rules specified directly
+    // in CSS. See sortable.less for details.
+    const className = aphrodite.css(styles$d.sortable) + " perseus-sortable";
+    const syncWidth = this.props.constraints?.width || layout === Layout.VERTICAL;
+    const syncHeight = this.props.constraints?.height || layout === Layout.HORIZONTAL;
+    ___default["default"].each(this.state.items, function (item, i, items) {
+      const isLast = i === items.length - 1;
+      const isStatic = item.state === ItemState.STATIC || item.state === ItemState.DISABLED;
+      let margin;
+
+      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      if (this.props.layout === Layout.HORIZONTAL) {
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        margin = "0 " + this.props.margin + "px 0 0"; // right
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      } else if (this.props.layout === Layout.VERTICAL) {
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        margin = "0 0 " + this.props.margin + "px 0"; // bottom
+      }
+
+      cards.push( /*#__PURE__*/React__namespace.createElement(Draggable, {
+        content: item.option,
+        key: item.key,
+        state: item.state
+        // @ts-expect-error - TS2769 - No overload matches this call.
+        ,
+        ref: item.key,
+        width: syncWidth ? item.width : undefined,
+        height: syncHeight ? item.height : undefined,
+        layout: layout
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        includePadding: this.props.padding,
+        margin: isLast && isStatic ? 0 : margin,
+        endPosition: item.endPosition,
+        linterContext: PerseusLinter__namespace.pushContextStack(
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        this.props.linterContext, "sortable")
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onRender: this.remeasureItems
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onMouseDown: this.onMouseDown.bind(this, item.key)
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onMouseMove: this.onMouseMove.bind(this, item.key)
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onMouseUp: this.onMouseUp.bind(this, item.key)
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onTouchMove: this.onMouseMove.bind(this, item.key)
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onTouchEnd: this.onMouseUp.bind(this, item.key)
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onTouchCancel: this.onMouseUp.bind(this, item.key)
+        // eslint-disable-next-line react/jsx-no-bind
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onAnimationEnd: this.onAnimationEnd.bind(
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        this, item.key)
+      }));
+      if (item.state === ItemState.DRAGGING || item.state === ItemState.ANIMATING) {
+        cards.push( /*#__PURE__*/React__namespace.createElement(Placeholder, {
+          key: "placeholder_" + item.key,
+          ref: "placeholder_" + item.key,
+          width: item.width,
+          height: item.height,
+          layout: layout,
+          margin: isLast ? 0 : margin
+        }));
+      }
+    }, this);
+    return /*#__PURE__*/React__namespace.createElement("ul", {
+      className: className
+    }, cards);
+  }
 }
 const styles$d = aphrodite.StyleSheet.create({
   sortable: {
@@ -38198,6 +38267,61 @@ class Matcher extends React__namespace.Component {
     rightHeight: 0,
     texRendererLoaded: false
   };
+  changeAndTrack = e => {
+    this.props.onChange(e);
+    this.props.trackInteraction();
+  };
+  onMeasureLeft = dimensions => {
+    const height = ___default["default"].max(dimensions.heights);
+    this.setState({
+      leftHeight: height
+    });
+  };
+  onMeasureRight = dimensions => {
+    const height = ___default["default"].max(dimensions.heights);
+    this.setState({
+      rightHeight: height
+    });
+  };
+  getUserInput = () => {
+    // If the math renderer hasn't loaded then we won't be able to get the
+    // contents of the sortables on the left and right, so we just return
+    // empty arrays until we render for the first time.
+    if (!this.state.texRendererLoaded) {
+      return {
+        left: [],
+        right: []
+      };
+    }
+    return {
+      // eslint-disable-next-line react/no-string-refs
+      // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
+      left: this.refs.left.getOptions(),
+      // eslint-disable-next-line react/no-string-refs
+      // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
+      right: this.refs.right.getOptions()
+    };
+  };
+
+  // Programatic API for moving options
+  // This is used by testing
+  moveLeftOptionToIndex = (option, index) => {
+    // eslint-disable-next-line react/no-string-refs
+    // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
+    this.refs.left.moveOptionToIndex(option, index);
+  };
+
+  // Programatic API for moving options
+  // This is used by testing
+  moveRightOptionToIndex = (option, index) => {
+    // eslint-disable-next-line react/no-string-refs
+    // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
+    this.refs.right.moveOptionToIndex(option, index);
+  };
+  simpleValidate = rubric => {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Matcher'.
+    return Matcher.validate(this.getUserInput(), rubric);
+  };
   render() {
     // To minimize layout shift, we display a spinner until our math
     // renderer is ready to render the math inside the matcher. To
@@ -38293,61 +38417,6 @@ class Matcher extends React__namespace.Component {
       ref: "right"
     })))));
   }
-  changeAndTrack = e => {
-    this.props.onChange(e);
-    this.props.trackInteraction();
-  };
-  onMeasureLeft = dimensions => {
-    const height = ___default["default"].max(dimensions.heights);
-    this.setState({
-      leftHeight: height
-    });
-  };
-  onMeasureRight = dimensions => {
-    const height = ___default["default"].max(dimensions.heights);
-    this.setState({
-      rightHeight: height
-    });
-  };
-  getUserInput = () => {
-    // If the math renderer hasn't loaded then we won't be able to get the
-    // contents of the sortables on the left and right, so we just return
-    // empty arrays until we render for the first time.
-    if (!this.state.texRendererLoaded) {
-      return {
-        left: [],
-        right: []
-      };
-    }
-    return {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
-      left: this.refs.left.getOptions(),
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
-      right: this.refs.right.getOptions()
-    };
-  };
-
-  // Programatic API for moving options
-  // This is used by testing
-  moveLeftOptionToIndex = (option, index) => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
-    this.refs.left.moveOptionToIndex(option, index);
-  };
-
-  // Programatic API for moving options
-  // This is used by testing
-  moveRightOptionToIndex = (option, index) => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
-    this.refs.right.moveOptionToIndex(option, index);
-  };
-  simpleValidate = rubric => {
-    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Matcher'.
-    return Matcher.validate(this.getUserInput(), rubric);
-  };
 }
 ___default["default"].extend(Matcher, {
   validate: function (state, rubric) {
@@ -38539,6 +38608,144 @@ class Matrix extends React__namespace.Component {
     // Used in the `onBlur` and `onFocus` handlers
     this.cursorPosition = [0, 0];
   }
+  getInputPaths = () => {
+    const inputPaths = [];
+    const maxRows = this.props.matrixBoardSize[0];
+    const maxCols = this.props.matrixBoardSize[1];
+    ___default["default"](maxRows).times(row => {
+      ___default["default"](maxCols).times(col => {
+        const inputPath = getInputPath$1(row, col);
+        inputPaths.push(inputPath);
+      });
+    });
+    return inputPaths;
+  };
+  getGrammarTypeForPath = inputPath => {
+    return "number";
+  };
+  _handleFocus = (row, col) => {
+    this.props.onFocus(getInputPath$1(row, col));
+  };
+  _handleBlur = (row, col) => {
+    this.props.onBlur(getInputPath$1(row, col));
+  };
+  focus = () => {
+    this.focusInputPath(getDefaultPath$1());
+    return true;
+  };
+  focusInputPath = path => {
+    const inputID = getRefForPath$1(path);
+    // eslint-disable-next-line react/no-string-refs
+    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+    this.refs[inputID].focus();
+  };
+  blurInputPath = path => {
+    if (path.length === 0) {
+      path = getDefaultPath$1();
+    }
+    const inputID = getRefForPath$1(path);
+    // eslint-disable-next-line react/no-string-refs
+    // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
+    this.refs[inputID].blur();
+  };
+  getDOMNodeForPath = inputPath => {
+    const inputID = getRefForPath$1(inputPath);
+    // eslint-disable-next-line react/no-string-refs
+    return ReactDOM__default["default"].findDOMNode(this.refs[inputID]);
+  };
+  setInputValue = (inputPath, value, callback) => {
+    const row = getRowFromPath$1(inputPath);
+    const col = getColumnFromPath$1(inputPath);
+    this.onValueChange(row, col, value, callback);
+  };
+  handleKeyDown = (row, col, e) => {
+    const maxRow = this.props.matrixBoardSize[0];
+    const maxCol = this.props.matrixBoardSize[1];
+    let enterTheMatrix = null;
+
+    // eslint-disable-next-line react/no-string-refs
+    const curInput = this.refs[getRefForPath$1(getInputPath$1(row, col))];
+    // @ts-expect-error - TS2339 - Property 'getStringValue' does not exist on type 'ReactInstance'.
+    const curValueString = curInput.getStringValue();
+    // @ts-expect-error - TS2339 - Property 'getSelectionStart' does not exist on type 'ReactInstance'.
+    const cursorStartPosition = curInput.getSelectionStart();
+    // @ts-expect-error - TS2339 - Property 'getSelectionEnd' does not exist on type 'ReactInstance'.
+    const cursorEndPosition = curInput.getSelectionEnd();
+    let nextPath = null;
+    if (e.key === "ArrowUp" && row > 0) {
+      // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
+      nextPath = getInputPath$1(row - 1, col);
+    } else if (e.key === "ArrowDown" && row + 1 < maxRow) {
+      // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
+      nextPath = getInputPath$1(row + 1, col);
+    } else if (e.key === "ArrowLeft" && col > 0) {
+      if (cursorStartPosition === 0 && cursorEndPosition === 0) {
+        // Only go to next input if we're at the *start* of the content
+        // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
+        nextPath = getInputPath$1(row, col - 1);
+      }
+    } else if (e.key === "ArrowRight" && col + 1 < maxCol) {
+      if (cursorStartPosition === curValueString.length) {
+        // Only go to next input if we're at the *end* of the content
+        // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
+        nextPath = getInputPath$1(row, col + 1);
+      }
+    } else if (e.key === "Enter") {
+      // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
+      enterTheMatrix = this.state.enterTheMatrix + 1;
+    } else if (e.key === "Escape") {
+      // @ts-expect-error - TS2322 - Type '0' is not assignable to type 'null'.
+      enterTheMatrix = 0;
+    }
+    if (nextPath) {
+      // Prevent the cursor from jumping again inside the next input
+      e.preventDefault();
+
+      // Focus the input and move the cursor to the end of it.
+      // eslint-disable-next-line react/no-string-refs
+      const input = this.refs[getRefForPath$1(nextPath)];
+
+      // Multiply by 2 to ensure the cursor always ends up at the end;
+      // Opera sometimes sees a carriage return as 2 characters.
+      // @ts-expect-error - TS2339 - Property 'getStringValue' does not exist on type 'ReactInstance'.
+      const inputValString = input.getStringValue();
+      const valueLength = inputValString.length * 2;
+
+      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+      input.focus();
+      if (e.key === "ArrowRight") {
+        // @ts-expect-error - TS2339 - Property 'setSelectionRange' does not exist on type 'ReactInstance'.
+        input.setSelectionRange(0, 0);
+      } else {
+        // @ts-expect-error - TS2339 - Property 'setSelectionRange' does not exist on type 'ReactInstance'.
+        input.setSelectionRange(valueLength, valueLength);
+      }
+    }
+    if (enterTheMatrix != null) {
+      this.setState({
+        enterTheMatrix: enterTheMatrix
+      });
+    }
+  };
+  onValueChange = (row, column, value, cb) => {
+    const answers = this.props.answers.map(answer => [...answer]);
+    if (!answers[row]) {
+      answers[row] = [];
+    }
+    answers[row][column] = value;
+    this.props.onChange({
+      answers
+    }, cb);
+    this.props.trackInteraction();
+  };
+  getUserInput = () => {
+    return {
+      answers: this.props.answers
+    };
+  };
+  simpleValidate = rubric => {
+    return Matrix.validate(this.getUserInput(), rubric, this.context.strings);
+  };
   render() {
     // Set the input sizes through JS so we can control the size of the
     // brackets. (If we set them in CSS we won't know values until the
@@ -38694,144 +38901,6 @@ class Matrix extends React__namespace.Component {
       strings: this.context.strings
     })));
   }
-  getInputPaths = () => {
-    const inputPaths = [];
-    const maxRows = this.props.matrixBoardSize[0];
-    const maxCols = this.props.matrixBoardSize[1];
-    ___default["default"](maxRows).times(row => {
-      ___default["default"](maxCols).times(col => {
-        const inputPath = getInputPath$1(row, col);
-        inputPaths.push(inputPath);
-      });
-    });
-    return inputPaths;
-  };
-  getGrammarTypeForPath = inputPath => {
-    return "number";
-  };
-  _handleFocus = (row, col) => {
-    this.props.onFocus(getInputPath$1(row, col));
-  };
-  _handleBlur = (row, col) => {
-    this.props.onBlur(getInputPath$1(row, col));
-  };
-  focus = () => {
-    this.focusInputPath(getDefaultPath$1());
-    return true;
-  };
-  focusInputPath = path => {
-    const inputID = getRefForPath$1(path);
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-    this.refs[inputID].focus();
-  };
-  blurInputPath = path => {
-    if (path.length === 0) {
-      path = getDefaultPath$1();
-    }
-    const inputID = getRefForPath$1(path);
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-    this.refs[inputID].blur();
-  };
-  getDOMNodeForPath = inputPath => {
-    const inputID = getRefForPath$1(inputPath);
-    // eslint-disable-next-line react/no-string-refs
-    return ReactDOM__default["default"].findDOMNode(this.refs[inputID]);
-  };
-  setInputValue = (inputPath, value, callback) => {
-    const row = getRowFromPath$1(inputPath);
-    const col = getColumnFromPath$1(inputPath);
-    this.onValueChange(row, col, value, callback);
-  };
-  handleKeyDown = (row, col, e) => {
-    const maxRow = this.props.matrixBoardSize[0];
-    const maxCol = this.props.matrixBoardSize[1];
-    let enterTheMatrix = null;
-
-    // eslint-disable-next-line react/no-string-refs
-    const curInput = this.refs[getRefForPath$1(getInputPath$1(row, col))];
-    // @ts-expect-error - TS2339 - Property 'getStringValue' does not exist on type 'ReactInstance'.
-    const curValueString = curInput.getStringValue();
-    // @ts-expect-error - TS2339 - Property 'getSelectionStart' does not exist on type 'ReactInstance'.
-    const cursorStartPosition = curInput.getSelectionStart();
-    // @ts-expect-error - TS2339 - Property 'getSelectionEnd' does not exist on type 'ReactInstance'.
-    const cursorEndPosition = curInput.getSelectionEnd();
-    let nextPath = null;
-    if (e.key === "ArrowUp" && row > 0) {
-      // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
-      nextPath = getInputPath$1(row - 1, col);
-    } else if (e.key === "ArrowDown" && row + 1 < maxRow) {
-      // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
-      nextPath = getInputPath$1(row + 1, col);
-    } else if (e.key === "ArrowLeft" && col > 0) {
-      if (cursorStartPosition === 0 && cursorEndPosition === 0) {
-        // Only go to next input if we're at the *start* of the content
-        // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
-        nextPath = getInputPath$1(row, col - 1);
-      }
-    } else if (e.key === "ArrowRight" && col + 1 < maxCol) {
-      if (cursorStartPosition === curValueString.length) {
-        // Only go to next input if we're at the *end* of the content
-        // @ts-expect-error - TS2322 - Type 'readonly string[]' is not assignable to type 'null'.
-        nextPath = getInputPath$1(row, col + 1);
-      }
-    } else if (e.key === "Enter") {
-      // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
-      enterTheMatrix = this.state.enterTheMatrix + 1;
-    } else if (e.key === "Escape") {
-      // @ts-expect-error - TS2322 - Type '0' is not assignable to type 'null'.
-      enterTheMatrix = 0;
-    }
-    if (nextPath) {
-      // Prevent the cursor from jumping again inside the next input
-      e.preventDefault();
-
-      // Focus the input and move the cursor to the end of it.
-      // eslint-disable-next-line react/no-string-refs
-      const input = this.refs[getRefForPath$1(nextPath)];
-
-      // Multiply by 2 to ensure the cursor always ends up at the end;
-      // Opera sometimes sees a carriage return as 2 characters.
-      // @ts-expect-error - TS2339 - Property 'getStringValue' does not exist on type 'ReactInstance'.
-      const inputValString = input.getStringValue();
-      const valueLength = inputValString.length * 2;
-
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      input.focus();
-      if (e.key === "ArrowRight") {
-        // @ts-expect-error - TS2339 - Property 'setSelectionRange' does not exist on type 'ReactInstance'.
-        input.setSelectionRange(0, 0);
-      } else {
-        // @ts-expect-error - TS2339 - Property 'setSelectionRange' does not exist on type 'ReactInstance'.
-        input.setSelectionRange(valueLength, valueLength);
-      }
-    }
-    if (enterTheMatrix != null) {
-      this.setState({
-        enterTheMatrix: enterTheMatrix
-      });
-    }
-  };
-  onValueChange = (row, column, value, cb) => {
-    const answers = this.props.answers.map(answer => [...answer]);
-    if (!answers[row]) {
-      answers[row] = [];
-    }
-    answers[row][column] = value;
-    this.props.onChange({
-      answers
-    }, cb);
-    this.props.trackInteraction();
-  };
-  getUserInput = () => {
-    return {
-      answers: this.props.answers
-    };
-  };
-  simpleValidate = rubric => {
-    return Matrix.validate(this.getUserInput(), rubric, this.context.strings);
-  };
 }
 const propTransform$1 = editorProps => {
   // Remove answers before passing to widget
@@ -38863,7 +38932,7 @@ var Matrix$1 = {
   isLintable: true
 };
 
-/* eslint-disable @babel/no-invalid-this, react/sort-comp */
+/* eslint-disable @babel/no-invalid-this */
 const defaultImage = {
   url: null,
   top: 0,
@@ -38905,6 +38974,64 @@ const Measurer = createReactClass__default["default"]({
   getInitialState: function () {
     return {};
   },
+  componentDidMount: function () {
+    this.setupGraphie();
+  },
+  componentDidUpdate: function (prevProps) {
+    const shouldSetupGraphie = ___default["default"].any(["box", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "rulerPixels", "rulerLength"], function (prop) {
+      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      return prevProps[prop] !== this.props[prop];
+    }, this);
+    if (shouldSetupGraphie) {
+      this.setupGraphie();
+    }
+  },
+  setupGraphie: function () {
+    // eslint-disable-next-line react/no-string-refs
+    const graphieDiv = ReactDOM__default["default"].findDOMNode(this.refs.graphieDiv);
+    // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
+    $__default["default"](graphieDiv).empty();
+    // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
+    const graphie = this.graphie = GraphUtils.createGraphie(graphieDiv);
+    const scale = [40, 40];
+    const range = [[0, this.props.box[0] / scale[0]], [0, this.props.box[1] / scale[1]]];
+    graphie.init({
+      range: range,
+      scale: scale
+    });
+    graphie.addMouseLayer({
+      allowScratchpad: true,
+      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
+    });
+    if (this.protractor) {
+      this.protractor.remove();
+    }
+    if (this.props.showProtractor) {
+      // @ts-expect-error - Property 'protractor' does not exist on type 'Graphie'.
+      this.protractor = graphie.protractor([this.props.protractorX, this.props.protractorY]);
+    }
+    if (this.ruler) {
+      this.ruler.remove();
+    }
+    if (this.props.showRuler) {
+      // @ts-expect-error - Property 'ruler' does not exist on type 'Graphie'.
+      this.ruler = graphie.ruler({
+        center: [(range[0][0] + range[0][1]) / 2, (range[1][0] + range[1][1]) / 2],
+        label: this.props.rulerLabel,
+        pixelsPerUnit: this.props.rulerPixels,
+        ticksPerUnit: this.props.rulerTicks,
+        units: this.props.rulerLength
+      });
+    }
+  },
+  getUserInput: function () {
+    return {};
+  },
+  simpleValidate: function (rubric) {
+    // TODO(joel) - I don't understand how this is useful!
+    return Measurer.validate(this.getUserInput(), rubric);
+  },
+  focus: $__default["default"].noop,
   render: function () {
     const image = ___default["default"].extend({}, defaultImage, this.props.image);
 
@@ -38928,65 +39055,7 @@ const Measurer = createReactClass__default["default"]({
       className: "graphie",
       ref: "graphieDiv"
     }));
-  },
-  componentDidMount: function () {
-    this.setupGraphie();
-  },
-  componentDidUpdate: function (prevProps) {
-    const shouldSetupGraphie = ___default["default"].any(["box", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "rulerPixels", "rulerLength"], function (prop) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return prevProps[prop] !== this.props[prop];
-    }, this);
-    if (shouldSetupGraphie) {
-      this.setupGraphie();
-    }
-  },
-  setupGraphie: function () {
-    // eslint-disable-next-line react/no-string-refs
-    const graphieDiv = ReactDOM__default["default"].findDOMNode(this.refs.graphieDiv);
-    // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-    $__default["default"](graphieDiv).empty();
-    // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
-    const graphie = this.graphie = GraphUtils.createGraphie(graphieDiv);
-    const scale = [40, 40];
-    const range = [[0, this.props.box[0] / scale[0]], [0, this.props.box[1] / scale[1]]];
-    graphie.init({
-      range: range,
-      scale: scale
-    });
-    graphie.addMouseLayer({
-      allowScratchpad: true,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
-    });
-    if (this.protractor) {
-      this.protractor.remove();
-    }
-    if (this.props.showProtractor) {
-      // @ts-expect-error - Property 'protractor' does not exist on type 'Graphie'.
-      this.protractor = graphie.protractor([this.props.protractorX, this.props.protractorY]);
-    }
-    if (this.ruler) {
-      this.ruler.remove();
-    }
-    if (this.props.showRuler) {
-      // @ts-expect-error - Property 'ruler' does not exist on type 'Graphie'.
-      this.ruler = graphie.ruler({
-        center: [(range[0][0] + range[0][1]) / 2, (range[1][0] + range[1][1]) / 2],
-        label: this.props.rulerLabel,
-        pixelsPerUnit: this.props.rulerPixels,
-        ticksPerUnit: this.props.rulerTicks,
-        units: this.props.rulerLength
-      });
-    }
-  },
-  getUserInput: function () {
-    return {};
-  },
-  simpleValidate: function (rubric) {
-    // TODO(joel) - I don't understand how this is useful!
-    return Measurer.validate(this.getUserInput(), rubric);
-  },
-  focus: $__default["default"].noop
+  }
 });
 ___default["default"].extend(Measurer, {
   validate: function (state, rubric) {
@@ -40568,55 +40637,6 @@ class Card extends React__namespace.Component {
   state = {
     dragging: false
   };
-  render() {
-    let style = {};
-    if (this.props.floating) {
-      style = {
-        position: "absolute",
-        left: this.props.startOffset.left,
-        top: this.props.startOffset.top
-      };
-    }
-    if (this.props.width) {
-      style.width = this.props.width;
-    }
-    const className = ["card"];
-    if (this.props.stack) {
-      className.push("stack");
-    }
-    if (this.props.floating && !this.props.animating) {
-      className.push("dragging");
-      style.left += this.props.mouse.left - this.props.startMouse.left;
-      style.top += this.props.mouse.top - this.props.startMouse.top;
-    }
-
-    // Pull out the content to get rendered
-    const rendererProps = ___default["default"].pick(this.props, "content");
-    const onMouseDown = this.props.animating ? $__default["default"].noop : this.onMouseDown;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE,
-      style: style,
-      onMouseDown: onMouseDown,
-      onTouchStart: onMouseDown,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: className.join(" ")
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
-      linterContext: this.props.linterContext,
-      strings: this.context.strings
-    }))));
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    // Cards in the bank or drag list don't usually change -- they only
-    // reorder themselves -- so we want to skip the update to things a
-    // little faster. We also need to re-render if the content changes,
-    // which happens only in the editor. (We do want to update the floating
-    // card on mouse move to update its position.)
-    return this.props.floating || nextProps.floating || this.props.content !== nextProps.content ||
-    // TODO(alpert): Remove ref here after fixing facebook/react#1392.
-    this.props.fakeRef !== nextProps.fakeRef;
-  }
   componentDidMount() {
     this.mouseMoveUpBound = false;
 
@@ -40635,6 +40655,16 @@ class Card extends React__namespace.Component {
       passive: false
     } : false);
   }
+  shouldComponentUpdate(nextProps, nextState) {
+    // Cards in the bank or drag list don't usually change -- they only
+    // reorder themselves -- so we want to skip the update to things a
+    // little faster. We also need to re-render if the content changes,
+    // which happens only in the editor. (We do want to update the floating
+    // card on mouse move to update its position.)
+    return this.props.floating || nextProps.floating || this.props.content !== nextProps.content ||
+    // TODO(alpert): Remove ref here after fixing facebook/react#1392.
+    this.props.fakeRef !== nextProps.fakeRef;
+  }
   componentDidUpdate(prevProps, prevState) {
     if (this.props.animating && !prevProps.animating) {
       // If we just were changed into animating, start the animation.
@@ -40698,6 +40728,45 @@ class Card extends React__namespace.Component {
       this.props.onMouseUp && this.props.onMouseUp(loc);
     }
   };
+  render() {
+    let style = {};
+    if (this.props.floating) {
+      style = {
+        position: "absolute",
+        left: this.props.startOffset.left,
+        top: this.props.startOffset.top
+      };
+    }
+    if (this.props.width) {
+      style.width = this.props.width;
+    }
+    const className = ["card"];
+    if (this.props.stack) {
+      className.push("stack");
+    }
+    if (this.props.floating && !this.props.animating) {
+      className.push("dragging");
+      style.left += this.props.mouse.left - this.props.startMouse.left;
+      style.top += this.props.mouse.top - this.props.startMouse.top;
+    }
+
+    // Pull out the content to get rendered
+    const rendererProps = ___default["default"].pick(this.props, "content");
+    const onMouseDown = this.props.animating ? $__default["default"].noop : this.onMouseDown;
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "card-wrap " + ClassNames.INTERACTIVE,
+      style: style,
+      onMouseDown: onMouseDown,
+      onTouchStart: onMouseDown,
+      onTouchEnd: this.onMouseUp,
+      onTouchCancel: this.onMouseUp
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: className.join(" ")
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
+    }))));
+  }
 }
 const NORMAL = "normal",
   HORIZONTAL$1 = "horizontal";
@@ -40730,109 +40799,6 @@ class Orderer extends React__namespace.Component {
       });
     }
   }
-  render() {
-    // This is the card we are currently dragging
-    const dragging = this.state.dragging && /*#__PURE__*/React__namespace.createElement(Card
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "dragging",
-      floating: true,
-      content: this.state.dragContent,
-      startOffset: this.state.offsetPos,
-      startMouse: this.state.grabPos,
-      mouse: this.state.mousePos,
-      width: this.state.dragWidth,
-      onMouseUp: this.onRelease,
-      onMouseMove: this.onMouseMove,
-      key: this.state.dragKey || "draggingCard",
-      linterContext: this.props.linterContext
-    });
-
-    // This is the card that is currently animating
-    const animating = this.state.animating && /*#__PURE__*/React__namespace.createElement(Card, {
-      floating: true,
-      animating: true,
-      content: this.state.dragContent,
-      startOffset: this.state.offsetPos,
-      width: this.state.dragWidth,
-      animateTo: this.state.animateTo,
-      onAnimationEnd: this.state.onAnimationEnd,
-      key: this.state.dragKey || "draggingCard",
-      linterContext: this.props.linterContext
-    });
-
-    // This is the list of draggable, rearrangable cards
-    const sortableCards = ___default["default"].map(this.state.current, function (opt, i) {
-      return /*#__PURE__*/React__namespace.createElement(Card, {
-        key: `sortableCard${i}`,
-        ref: "sortable" + i,
-        fakeRef: "sortable" + i,
-        floating: false,
-        content: opt.content,
-        width: opt.width
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        linterContext: this.props.linterContext
-        // eslint-disable-next-line react/jsx-no-bind
-        ,
-        onMouseDown:
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.state.animating ? $__default["default"].noop :
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.onClick.bind(null, "current", i)
-      });
-    }, this);
-    if (this.state.placeholderIndex != null) {
-      const placeholder = /*#__PURE__*/React__namespace.createElement(PlaceholderCard
-      // eslint-disable-next-line react/no-string-refs
-      , {
-        ref: "placeholder",
-        width: this.state.dragWidth,
-        height: this.state.dragHeight,
-        key: "placeholder"
-      });
-      sortableCards.splice(this.state.placeholderIndex, 0, placeholder);
-    }
-    const anySortableCards = sortableCards.length > 0;
-    // @ts-expect-error - TS2345 - Argument of type 'false | Element' is not assignable to parameter of type 'Element'.
-    sortableCards.push(dragging, animating);
-
-    // If there are no cards in the list, then add a "hint" card
-    const sortable = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-clearfix draggable-box"
-    }, !anySortableCards && /*#__PURE__*/React__namespace.createElement(DragHintCard, null), /*#__PURE__*/React__namespace.createElement("div", {
-      ref: "dragList"
-    }, sortableCards));
-
-    // This is the bank of stacks of cards
-    const bank =
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-string-refs
-    React__namespace.createElement("div", {
-      ref: "bank",
-      className: "bank perseus-clearfix"
-    }, ___default["default"].map(this.props.options, (opt, i) => {
-      return /*#__PURE__*/React__namespace.createElement(Card, {
-        ref: "bank" + i,
-        floating: false,
-        content: opt.content,
-        stack: true,
-        key: i,
-        linterContext: this.props.linterContext
-        // eslint-disable-next-line react/jsx-no-bind
-        ,
-        onMouseDown: this.state.animating ? $__default["default"].noop : this.onClick.bind(null, "bank", i),
-        onMouseMove: this.onMouseMove,
-        onMouseUp: this.onRelease
-      });
-    }, this));
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "draggy-boxy-thing orderer " + "height-" + this.props.height + " " + "layout-" + this.props.layout + " " + "above-scratchpad blank-background " + "perseus-clearfix " + ClassNames.INTERACTIVE
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "orderer"
-    }, bank, sortable);
-  }
   onClick = (type, index, loc, draggable) => {
     // @ts-expect-error - TS2769 - No overload matches this call.
     const $draggable = $__default["default"](ReactDOM__default["default"].findDOMNode(draggable));
@@ -41069,6 +41035,109 @@ class Orderer extends React__namespace.Component {
     // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Orderer'.
     return Orderer.validate(this.getUserInput(), rubric);
   };
+  render() {
+    // This is the card we are currently dragging
+    const dragging = this.state.dragging && /*#__PURE__*/React__namespace.createElement(Card
+    // eslint-disable-next-line react/no-string-refs
+    , {
+      ref: "dragging",
+      floating: true,
+      content: this.state.dragContent,
+      startOffset: this.state.offsetPos,
+      startMouse: this.state.grabPos,
+      mouse: this.state.mousePos,
+      width: this.state.dragWidth,
+      onMouseUp: this.onRelease,
+      onMouseMove: this.onMouseMove,
+      key: this.state.dragKey || "draggingCard",
+      linterContext: this.props.linterContext
+    });
+
+    // This is the card that is currently animating
+    const animating = this.state.animating && /*#__PURE__*/React__namespace.createElement(Card, {
+      floating: true,
+      animating: true,
+      content: this.state.dragContent,
+      startOffset: this.state.offsetPos,
+      width: this.state.dragWidth,
+      animateTo: this.state.animateTo,
+      onAnimationEnd: this.state.onAnimationEnd,
+      key: this.state.dragKey || "draggingCard",
+      linterContext: this.props.linterContext
+    });
+
+    // This is the list of draggable, rearrangable cards
+    const sortableCards = ___default["default"].map(this.state.current, function (opt, i) {
+      return /*#__PURE__*/React__namespace.createElement(Card, {
+        key: `sortableCard${i}`,
+        ref: "sortable" + i,
+        fakeRef: "sortable" + i,
+        floating: false,
+        content: opt.content,
+        width: opt.width
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        linterContext: this.props.linterContext
+        // eslint-disable-next-line react/jsx-no-bind
+        ,
+        onMouseDown:
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        this.state.animating ? $__default["default"].noop :
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        this.onClick.bind(null, "current", i)
+      });
+    }, this);
+    if (this.state.placeholderIndex != null) {
+      const placeholder = /*#__PURE__*/React__namespace.createElement(PlaceholderCard
+      // eslint-disable-next-line react/no-string-refs
+      , {
+        ref: "placeholder",
+        width: this.state.dragWidth,
+        height: this.state.dragHeight,
+        key: "placeholder"
+      });
+      sortableCards.splice(this.state.placeholderIndex, 0, placeholder);
+    }
+    const anySortableCards = sortableCards.length > 0;
+    // @ts-expect-error - TS2345 - Argument of type 'false | Element' is not assignable to parameter of type 'Element'.
+    sortableCards.push(dragging, animating);
+
+    // If there are no cards in the list, then add a "hint" card
+    const sortable = /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-clearfix draggable-box"
+    }, !anySortableCards && /*#__PURE__*/React__namespace.createElement(DragHintCard, null), /*#__PURE__*/React__namespace.createElement("div", {
+      ref: "dragList"
+    }, sortableCards));
+
+    // This is the bank of stacks of cards
+    const bank =
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-string-refs
+    React__namespace.createElement("div", {
+      ref: "bank",
+      className: "bank perseus-clearfix"
+    }, ___default["default"].map(this.props.options, (opt, i) => {
+      return /*#__PURE__*/React__namespace.createElement(Card, {
+        ref: "bank" + i,
+        floating: false,
+        content: opt.content,
+        stack: true,
+        key: i,
+        linterContext: this.props.linterContext
+        // eslint-disable-next-line react/jsx-no-bind
+        ,
+        onMouseDown: this.state.animating ? $__default["default"].noop : this.onClick.bind(null, "bank", i),
+        onMouseMove: this.onMouseMove,
+        onMouseUp: this.onRelease
+      });
+    }, this));
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "draggy-boxy-thing orderer " + "height-" + this.props.height + " " + "layout-" + this.props.layout + " " + "above-scratchpad blank-background " + "perseus-clearfix " + ClassNames.INTERACTIVE
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "orderer"
+    }, bank, sortable);
+  }
 }
 ___default["default"].extend(Orderer, {
   validate: function (state, rubric) {
@@ -41882,8 +41951,6 @@ class HighlightSetRenderer extends React__namespace.PureComponent {
     hoveredHighlightKey: null,
     hoveringTooltipFor: null
   };
-
-  // eslint-disable-next-line react/sort-comp
   _highlightRenderers = {};
   componentDidMount() {
     this._updateEditListeners(false, this.props.editable);
@@ -42219,8 +42286,6 @@ class HighlightingUI extends React__namespace.PureComponent {
  */
 class WordIndexer extends React__namespace.PureComponent {
   _container;
-  /* eslint-enable react/sort-comp */
-
   componentDidMount() {
     this._sendWordsUpdate();
   }
@@ -42482,7 +42547,6 @@ const styles$8 = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable react/sort-comp */
 function getInitialParseState() {
   return {
     currentRef: [],
@@ -42497,16 +42561,15 @@ function getInitialParseState() {
   };
 }
 class RefStart extends React__namespace.Component {
+  // @ts-expect-error - TS2322 - Type '() => React.ReactNode' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
+  getRefContent = () => {
+    return this.props.refContent;
+  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("span", {
       style: REF_STYLE
     }, "_");
   }
-
-  // @ts-expect-error - TS2322 - Type '() => React.ReactNode' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
-  getRefContent = () => {
-    return this.props.refContent;
-  };
 }
 class RefEnd extends React__namespace.Component {
   render() {
@@ -42905,6 +42968,14 @@ class Passage extends React__namespace.Component {
     startLineNumbersAfter: 0,
     stylesAreApplied: false
   };
+  static validate(state, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   componentDidMount() {
     this._updateState();
 
@@ -43126,17 +43197,6 @@ class Passage extends React__namespace.Component {
     return Passage.validate(this.getUserInput(), rubric);
   }
 
-  /* eslint-disable react/sort-comp */
-  static validate(state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
-  /* eslint-enable react/sort-comp */
-
   /**
    * Rendering
    *
@@ -43375,20 +43435,6 @@ class PhetSimulation extends React__namespace.Component {
   getUserInput() {
     return 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];
-      }
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(_this, args);
-    };
-  })();
-  simpleValidate = rubric => {
-    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSimulation'.
-    return PhetSimulation.validate(this.getUserInput(), rubric);
-  };
 
   // kaLocales and PhET locales use different formats and abbreviations.
   // PhET accepts different formats, i.e. kaLocale's hyphens, but it does not accept
@@ -43497,8 +43543,7 @@ class PhetSimulation extends React__namespace.Component {
       title: this.props.description,
       sandbox: sandboxProperties,
       style: {
-        minWidth: 400,
-        height: 360,
+        height: 225,
         width: "100%",
         borderWidth: 0
       },
@@ -43538,17 +43583,16 @@ const styles$6 = aphrodite.StyleSheet.create({
     borderRadius: borderRadiusLarge,
     borderWidth: 1,
     borderColor: basicBorderColor,
-    padding: phoneMargin,
+    padding: wonderBlocksTokens.spacing.medium_16,
     paddingBottom: 0,
-    width: 650
+    // Include space for medium_16 padding on each side
+    width: 400 + wonderBlocksTokens.spacing.xLarge_32
   }
 });
 var PhetSimulation$1 = {
   name: "phet-simulation",
   displayName: "PhET Simulation",
   widget: PhetSimulation,
-  // Hides widget from content creators until full release
-  hidden: true,
   isLintable: true
 };
 
@@ -44605,65 +44649,6 @@ class Table extends React__namespace.Component {
   _getColumns = () => {
     return this.props.answers[0].length;
   };
-  render() {
-    const rows = this._getRows();
-    const columns = this._getColumns();
-    const headers = this.props.headers;
-    let InputComponent;
-    let inputStyle;
-    const extraInputProps = {};
-    if (this.props.apiOptions.customKeypad) {
-      InputComponent = SimpleKeypadInput;
-      // NOTE(charlie): This is intended to match the "width: 80px" in
-      // input in table.less. Those values should be kept in-sync.
-      inputStyle = {
-        width: 80
-      };
-      extraInputProps.keypadElement = this.props.keypadElement;
-    } else {
-      InputComponent = "input";
-      inputStyle = {};
-    }
-    return /*#__PURE__*/React__namespace.createElement("table", {
-      className: "perseus-widget-table-of-values non-markdown"
-    }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, ___default["default"].map(headers, (header, i) => {
-      if (this.props.editableHeaders) {
-        return /*#__PURE__*/React__namespace.createElement("th", {
-          key: i
-        }, /*#__PURE__*/React__namespace.createElement(this.props.Editor, {
-          ref: "columnHeader" + i,
-          apiOptions: this.props.apiOptions,
-          content: header,
-          widgetEnabled: false,
-          onChange: ___default["default"].partial(this.onHeaderChange, i)
-        }));
-      }
-      return /*#__PURE__*/React__namespace.createElement("th", {
-        key: i
-      }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-        content: header,
-        linterContext: this.props.linterContext,
-        strings: this.context.strings
-      }));
-    }))), /*#__PURE__*/React__namespace.createElement("tbody", null, ___default["default"](rows).times(r => {
-      return /*#__PURE__*/React__namespace.createElement("tr", {
-        key: r
-      }, ___default["default"](columns).times(c => {
-        return /*#__PURE__*/React__namespace.createElement("td", {
-          key: c
-        }, /*#__PURE__*/React__namespace.createElement(InputComponent, _extends({
-          ref: getRefForPath(getInputPath(r, c)),
-          type: "text",
-          value: this.props.answers[r][c],
-          disabled: this.props.apiOptions.readOnly,
-          onFocus: ___default["default"].partial(this._handleFocus, getInputPath(r, c)),
-          onBlur: ___default["default"].partial(this._handleBlur, getInputPath(r, c)),
-          onChange: ___default["default"].partial(this.onValueChange, r, c),
-          style: inputStyle
-        }, extraInputProps)));
-      }));
-    })));
-  }
   getUserInput = () => {
     return ___default["default"].map(this.props.answers, ___default["default"].clone);
   };
@@ -44755,6 +44740,65 @@ class Table extends React__namespace.Component {
       answers: answers
     }, cb);
   };
+  render() {
+    const rows = this._getRows();
+    const columns = this._getColumns();
+    const headers = this.props.headers;
+    let InputComponent;
+    let inputStyle;
+    const extraInputProps = {};
+    if (this.props.apiOptions.customKeypad) {
+      InputComponent = SimpleKeypadInput;
+      // NOTE(charlie): This is intended to match the "width: 80px" in
+      // input in table.less. Those values should be kept in-sync.
+      inputStyle = {
+        width: 80
+      };
+      extraInputProps.keypadElement = this.props.keypadElement;
+    } else {
+      InputComponent = "input";
+      inputStyle = {};
+    }
+    return /*#__PURE__*/React__namespace.createElement("table", {
+      className: "perseus-widget-table-of-values non-markdown"
+    }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, ___default["default"].map(headers, (header, i) => {
+      if (this.props.editableHeaders) {
+        return /*#__PURE__*/React__namespace.createElement("th", {
+          key: i
+        }, /*#__PURE__*/React__namespace.createElement(this.props.Editor, {
+          ref: "columnHeader" + i,
+          apiOptions: this.props.apiOptions,
+          content: header,
+          widgetEnabled: false,
+          onChange: ___default["default"].partial(this.onHeaderChange, i)
+        }));
+      }
+      return /*#__PURE__*/React__namespace.createElement("th", {
+        key: i
+      }, /*#__PURE__*/React__namespace.createElement(Renderer, {
+        content: header,
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
+      }));
+    }))), /*#__PURE__*/React__namespace.createElement("tbody", null, ___default["default"](rows).times(r => {
+      return /*#__PURE__*/React__namespace.createElement("tr", {
+        key: r
+      }, ___default["default"](columns).times(c => {
+        return /*#__PURE__*/React__namespace.createElement("td", {
+          key: c
+        }, /*#__PURE__*/React__namespace.createElement(InputComponent, _extends({
+          ref: getRefForPath(getInputPath(r, c)),
+          type: "text",
+          value: this.props.answers[r][c],
+          disabled: this.props.apiOptions.readOnly,
+          onFocus: ___default["default"].partial(this._handleFocus, getInputPath(r, c)),
+          onBlur: ___default["default"].partial(this._handleBlur, getInputPath(r, c)),
+          onChange: ___default["default"].partial(this.onValueChange, r, c),
+          style: inputStyle
+        }, extraInputProps)));
+      }));
+    })));
+  }
 }
 ___default["default"].extend(Table, {
   validate: function (state, rubric, strings) {
@@ -45053,7 +45097,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "31.1.0";
+const libVersion = "32.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46865,8 +46909,6 @@ class MultiRenderer extends React__namespace.Component {
     // Keep state in sync with props.
     this.state = this._tryMakeRendererState(this.props);
   }
-  /* eslint-enable react/sort-comp */
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     // Keep state in sync with props.
     if (nextProps.item !== this.props.item) {
@@ -48748,6 +48790,7 @@ exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
 exports.lockedFigureColors = lockedFigureColors;
 exports.lockedFigureFillStyles = lockedFigureFillStyles;
+exports.makeSafeUrl = makeSafeUrl;
 exports.mediaQueries = mediaQueries;
 exports.parsePerseusItem = parsePerseusItem;
 exports.plotterPlotTypes = plotterPlotTypes;