@khanacademy/perseus 31.1.0 → 32.0.0

package/dist/es/index.js

@@ -19467,6 +19467,14 @@ class WidgetContainer extends React.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;
+  }
   render() {
     let className = classNames({
       "perseus-widget-container": true,
@@ -19557,14 +19565,6 @@ class WidgetContainer extends React.Component {
       style: staticOverlayStyles
     }))));
   }
-  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;
-  }
 }
 WidgetContainer.defaultProps = {
   linterContext: linterContextDefault
@@ -21325,7 +21325,6 @@ Tooltip.defaultProps = {
   targetContainerStyle: {}
 };
 
-/* eslint-disable react/sort-comp */
 const {
   captureScratchpadTouchStart: captureScratchpadTouchStart$2
 } = Util;
@@ -21681,7 +21680,6 @@ var TexWrangler = {
   modifyTex
 };
 
-/* eslint-disable react/sort-comp */
 const ParseTex$1 = TexWrangler.parseTex;
 const answerTypes = {
   number: {
@@ -21819,55 +21817,6 @@ class InputNumber extends React.Component {
       return [strings.yourAnswer].concat(examples);
     };
   }
-  render() {
-    if (this.props.apiOptions.customKeypad) {
-      // TODO(charlie): Support "Review Mode".
-      const input = /*#__PURE__*/React.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.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: 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 /*#__PURE__*/React.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
-    });
-  }
   static validate(state, rubric, strings, onInputError = () => {}) {
     if (rubric.answerType == null) {
       rubric.answerType = "number";
@@ -21923,6 +21872,55 @@ class InputNumber extends React.Component {
     }
     return answerString;
   }
+  render() {
+    if (this.props.apiOptions.customKeypad) {
+      // TODO(charlie): Support "Review Mode".
+      const input = /*#__PURE__*/React.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.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: 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 /*#__PURE__*/React.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
+    });
+  }
 }
 InputNumber.contextType = PerseusI18nContext;
 InputNumber.defaultProps = {
@@ -22384,7 +22382,6 @@ var NumericInput$1 = {
   isLintable: true
 };
 
-/* eslint-disable react/sort-comp */
 const EN_DASH$1 = "\u2013";
 class PassageRef extends React.Component {
   constructor(..._args) {
@@ -22436,9 +22433,32 @@ class PassageRef extends React.Component {
       return PassageRef.validate(this.getUserInput(), rubric);
     };
   }
+  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 = _.throttle(this._deferredUpdateRange, 500);
+    window.addEventListener("resize", this._throttledUpdateRange);
+  }
   shouldComponentUpdate(nextProps, nextState) {
     return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
   }
+  componentDidUpdate() {
+    this._deferredUpdateRange();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this._throttledUpdateRange);
+    this._isMounted = false;
+  }
   render() {
     const {
       strings
@@ -22472,29 +22492,6 @@ class PassageRef extends React.Component {
       className: "perseus-sr-only"
     }, this.state.content));
   }
-  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 = _.throttle(this._deferredUpdateRange, 500);
-    window.addEventListener("resize", this._throttledUpdateRange);
-  }
-  componentDidUpdate() {
-    this._deferredUpdateRange();
-  }
-  componentWillUnmount() {
-    window.removeEventListener("resize", this._throttledUpdateRange);
-    this._isMounted = false;
-  }
-  static validate(userInput, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 PassageRef.contextType = PerseusI18nContext;
 PassageRef.defaultProps = {
@@ -24434,6 +24431,40 @@ class Categorizer extends React.Component {
       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);
+  }
+  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();
+  }
   render() {
     const self = this;
 
@@ -24510,40 +24541,6 @@ class Categorizer extends React.Component {
       className: extraClassNames + " " + 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();
-  }
-  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.
@@ -25053,8 +25050,6 @@ var Dropdown$1 = {
   transform: optionsTransform
 };
 
-/* eslint-disable react/sort-comp */
-
 // transform = _.identity
 
 function mediaQueryIsMatched(mediaQuery) {
@@ -26811,20 +26806,48 @@ class Grapher extends React.Component {
       }
     };
   }
-  render() {
-    const type = this.props.plot.type;
-    const coords = this.props.plot.coords;
-    const asymptote = this.props.plot.asymptote;
-    const typeSelector = /*#__PURE__*/React.createElement("div", {
-      style: typeSelectorStyle,
-      className: "above-scratchpad"
-    }, /*#__PURE__*/React.createElement(ButtonGroup, {
-      value: type,
-      allowEmpty: true,
-      buttons: _.map(this.props.availableTypes, typeToButton),
-      onChange: this.handleActiveTypeChange
-    }));
-    const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
+  static validate(state, rubric) {
+    return validate$1(state, rubric);
+  }
+  static getUserInputFromProps(props) {
+    return props.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;
+  }
+  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;
+    const asymptote = this.props.plot.asymptote;
+    const typeSelector = /*#__PURE__*/React.createElement("div", {
+      style: typeSelectorStyle,
+      className: "above-scratchpad"
+    }, /*#__PURE__*/React.createElement(ButtonGroup, {
+      value: type,
+      allowEmpty: true,
+      buttons: _.map(this.props.availableTypes, typeToButton),
+      onChange: this.handleActiveTypeChange
+    }));
+    const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
 
     // Calculate additional graph properties so that the same values are
     // passed in to both FunctionGrapher and Graphie.
@@ -26861,34 +26884,6 @@ class Grapher extends React.Component {
     };
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FunctionGrapher, grapherProps), this.props.availableTypes.length > 1 && typeSelector);
   }
-  _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;
-  }
-  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;
-  }
 }
 Grapher.defaultProps = DEFAULT_GRAPHER_PROPS;
 const propTransform$2 = editorProps => {
@@ -27234,7 +27229,6 @@ var Iframe$1 = {
   hidden: true
 };
 
-/* eslint-disable react/sort-comp */
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
 const defaultBackgroundImage$2 = {
@@ -27261,6 +27255,14 @@ class ImageWidget extends React.Component {
     };
     this.focus = () => {};
   }
+  static validate(userInput, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   // no-op
 
   render() {
@@ -27392,14 +27394,6 @@ class ImageWidget extends React.Component {
       }
     }, title, image, caption);
   }
-  static validate(userInput, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 ImageWidget.contextType = PerseusI18nContext;
 ImageWidget.defaultProps = {
@@ -27587,6 +27581,14 @@ class Interaction extends React.Component {
       return Interaction.validate(this.getUserInput(), rubric);
     };
   }
+  static validate(state, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   UNSAFE_componentWillReceiveProps(nextProps) {
     // HACK(michaelpolyak): This widget is not wired to use the Perseus
     // `onChange` callback to save user changes. Perseus re-rendering of the
@@ -27932,14 +27934,6 @@ class Interaction extends React.Component {
       }
     }, this));
   }
-  static validate(state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 Interaction.defaultProps = {
   graph: {
@@ -29539,6 +29533,11 @@ class NumberInput extends React.Component {
       $(ReactDOM__default.findDOMNode(this.refs.input)).val(toNumericString(val, format));
     };
   }
+  componentDidUpdate(prevProps) {
+    if (!number.equal(this.getValue(), this.props.value)) {
+      this._setValue(this.props.value, this.state.format);
+    }
+  }
   render() {
     let classes = classNames({
       "number-input": true,
@@ -29570,11 +29569,6 @@ class NumberInput extends React.Component {
       value: undefined
     }));
   }
-  componentDidUpdate(prevProps) {
-    if (!number.equal(this.getValue(), this.props.value)) {
-      this._setValue(this.props.value, this.state.format);
-    }
-  }
 }
 NumberInput.contextType = PerseusI18nContext;
 NumberInput.propTypes = {
@@ -29802,12 +29796,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -30208,6 +30196,9 @@ const GraphLockedLayer = props => {
 };
 
 const actions = {
+  global: {
+    deleteIntent
+  },
   angle: {
     movePoint
   },
@@ -30226,7 +30217,9 @@ const actions = {
   pointGraph: {
     movePoint,
     addPoint,
-    removePoint
+    removePoint,
+    focusPoint,
+    blurPoint
   },
   polygon: {
     movePoint,
@@ -30247,6 +30240,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 {
@@ -30269,6 +30268,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 {
@@ -31863,7 +31875,14 @@ function UnlimitedPointGraph(props) {
   }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.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) {
@@ -32019,6 +32038,7 @@ const MafsGraph = props => {
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
+  const graphRef = React.useRef(null);
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -32036,16 +32056,25 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(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") {
+        var _graphRef$current;
+        dispatch(actions.global.deleteIntent());
+        (_graphRef$current = graphRef.current) == null || _graphRef$current.focus();
+      }
+    },
+    ref: graphRef,
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
@@ -32226,7 +32255,8 @@ function initializeGraphState(params) {
       return _extends({}, shared, {
         type: graph.type,
         coords: getPointCoords(graph, range, step),
-        numPoints: graph.numPoints || 0
+        numPoints: graph.numPoints || 0,
+        focusedPointIndex: null
       });
     case "circle":
       return _extends({}, shared, {
@@ -32484,10 +32514,47 @@ 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 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 _extends({}, state, {
+        focusedPointIndex: action.index
+      });
+    default:
+      return state;
+  }
+}
+function doBlurPoint(state, action) {
+  switch (state.type) {
+    case "point":
+      return _extends({}, state, {
+        focusedPointIndex: null
+      });
+    default:
+      return state;
+  }
+}
 function doMovePointInFigure(state, action) {
   switch (state.type) {
     case "segment":
@@ -32836,7 +32903,8 @@ function doRemovePoint(state, action) {
     return state;
   }
   return _extends({}, state, {
-    coords: state.coords.filter((_, i) => i !== action.index)
+    coords: state.coords.filter((_, i) => i !== action.index),
+    focusedPointIndex: null
   });
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -37278,6 +37346,27 @@ class Draggable extends React.Component {
       passive: false
     } : false);
   }
+  componentDidUpdate(prevProps) {
+    if (this.props.state === prevProps.state) {
+      return;
+    }
+    if (this.props.state === ItemState.ANIMATING && this.props.endPosition) {
+      // Start animating
+      const current = this.getCurrentPosition();
+      const duration = 15 * Math.sqrt(Math.sqrt(Math.pow(this.props.endPosition.left - current.left, 2) + Math.pow(this.props.endPosition.top - current.top, 2)));
+
+      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'animate' does not exist on type 'JQueryStatic'.
+      $(ReactDOM__default.findDOMNode(this)).animate(this.props.endPosition, {
+        duration: Math.max(duration, 1),
+        // Animating -> Static
+        complete: this.props.onAnimationEnd
+      });
+    } else if (this.props.state === ItemState.STATIC) {
+      // Ensure that any animations are done
+      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'finish' does not exist on type 'JQueryStatic'.
+      $(ReactDOM__default.findDOMNode(this)).finish();
+    }
+  }
   componentWillUnmount() {
     this._mounted = false;
     // Event handlers should be unbound before component unmounting, but
@@ -37339,27 +37428,6 @@ class Draggable extends React.Component {
       strings: this.context.strings
     }));
   }
-  componentDidUpdate(prevProps) {
-    if (this.props.state === prevProps.state) {
-      return;
-    }
-    if (this.props.state === ItemState.ANIMATING && this.props.endPosition) {
-      // Start animating
-      const current = this.getCurrentPosition();
-      const duration = 15 * Math.sqrt(Math.sqrt(Math.pow(this.props.endPosition.left - current.left, 2) + Math.pow(this.props.endPosition.top - current.top, 2)));
-
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'animate' does not exist on type 'JQueryStatic'.
-      $(ReactDOM__default.findDOMNode(this)).animate(this.props.endPosition, {
-        duration: Math.max(duration, 1),
-        // Animating -> Static
-        complete: this.props.onAnimationEnd
-      });
-    } else if (this.props.state === ItemState.STATIC) {
-      // Ensure that any animations are done
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'finish' does not exist on type 'JQueryStatic'.
-      $(ReactDOM__default.findDOMNode(this)).finish();
-    }
-  }
 }
 Draggable.contextType = PerseusI18nContext;
 Draggable.defaultProps = {
@@ -37368,6 +37436,26 @@ Draggable.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
 class Sortable extends React.Component {
+  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 _extends({}, item, {
+        width: 0,
+        height: 0
+      });
+    });
+  }
   constructor(props) {
     super(props);
     // Don't call this.setState() here!
@@ -37407,26 +37495,6 @@ class Sortable extends React.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 _extends({}, 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
@@ -37478,124 +37546,6 @@ class Sortable extends React.Component {
       });
     });
   }
-  render() {
-    var _this$props$constrain, _this$props$constrain2;
-    // 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircularSpinner, null), /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "none"
-        }
-      }, /*#__PURE__*/React.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 = css(styles$d.sortable) + " perseus-sortable";
-    const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === Layout.VERTICAL;
-    const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === Layout.HORIZONTAL;
-    _.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.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.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.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.createElement("ul", {
-      className: className
-    }, cards);
-  }
   onMouseDown(key) {
     // Static -> Dragging
     const items = _.map(this.state.items, function (item) {
@@ -37723,23 +37673,141 @@ class Sortable extends React.Component {
       this.props.onChange && this.props.onChange({});
     });
 
-    // @ts-expect-error - TS2339 - Property 'animationFrameRequest' does not exist on type 'Sortable'.
-    this.animationFrameRequest = nextAnimationFrame;
-  }
-  onAnimationEnd(key) {
-    // Animating -> Static
-    const items = _.map(this.state.items, function (item) {
-      if (item.key === key) {
-        item.state = ItemState.STATIC;
+    // @ts-expect-error - TS2339 - Property 'animationFrameRequest' does not exist on type 'Sortable'.
+    this.animationFrameRequest = nextAnimationFrame;
+  }
+  onAnimationEnd(key) {
+    // Animating -> Static
+    const items = _.map(this.state.items, function (item) {
+      if (item.key === key) {
+        item.state = ItemState.STATIC;
+      }
+      return item;
+    });
+    this.setState({
+      items: items
+    });
+  }
+  getOptions() {
+    return _.pluck(this.state.items, "option");
+  }
+  render() {
+    var _this$props$constrain, _this$props$constrain2;
+    // 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircularSpinner, null), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React.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 = css(styles$d.sortable) + " perseus-sortable";
+    const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === Layout.VERTICAL;
+    const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === Layout.HORIZONTAL;
+    _.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.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.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.createElement(Placeholder, {
+          key: "placeholder_" + item.key,
+          ref: "placeholder_" + item.key,
+          width: item.width,
+          height: item.height,
+          layout: layout,
+          margin: isLast ? 0 : margin
+        }));
       }
-      return item;
-    });
-    this.setState({
-      items: items
-    });
-  }
-  getOptions() {
-    return _.pluck(this.state.items, "option");
+    }, this);
+    return /*#__PURE__*/React.createElement("ul", {
+      className: className
+    }, cards);
   }
 }
 Sortable.defaultProps = {
@@ -38504,7 +38572,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,
@@ -38546,30 +38614,6 @@ const Measurer = createReactClass({
   getInitialState: function () {
     return {};
   },
-  render: function () {
-    const image = _.extend({}, defaultImage, this.props.image);
-
-    // TODO(scottgrant): This isn't a11y-friendly! We should insist on
-    // finding some valid alt text when this widget is used.
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget perseus-widget-measurer " + "graphie-container above-scratchpad",
-      style: {
-        width: this.props.box[0],
-        height: this.props.box[1]
-      }
-    }, image.url && /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: "relative",
-        top: image.top,
-        left: image.left
-      }
-    }, /*#__PURE__*/React.createElement(SvgImage, {
-      src: image.url
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "graphie",
-      ref: "graphieDiv"
-    }));
-  },
   componentDidMount: function () {
     this.setupGraphie();
   },
@@ -38627,7 +38671,31 @@ const Measurer = createReactClass({
     // TODO(joel) - I don't understand how this is useful!
     return Measurer.validate(this.getUserInput(), rubric);
   },
-  focus: $.noop
+  focus: $.noop,
+  render: function () {
+    const image = _.extend({}, defaultImage, this.props.image);
+
+    // TODO(scottgrant): This isn't a11y-friendly! We should insist on
+    // finding some valid alt text when this widget is used.
+    return /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget perseus-widget-measurer " + "graphie-container above-scratchpad",
+      style: {
+        width: this.props.box[0],
+        height: this.props.box[1]
+      }
+    }, image.url && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        top: image.top,
+        left: image.left
+      }
+    }, /*#__PURE__*/React.createElement(SvgImage, {
+      src: image.url
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "graphie",
+      ref: "graphieDiv"
+    }));
+  }
 });
 _.extend(Measurer, {
   validate: function (state, rubric) {
@@ -40228,55 +40296,6 @@ class Card extends React.Component {
       }
     };
   }
-  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 = _.pick(this.props, "content");
-    const onMouseDown = this.props.animating ? $.noop : this.onMouseDown;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE,
-      style: style,
-      onMouseDown: onMouseDown,
-      onTouchStart: onMouseDown,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React.createElement("div", {
-      className: className.join(" ")
-    }, /*#__PURE__*/React.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;
 
@@ -40295,6 +40314,16 @@ class Card extends React.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.
@@ -40316,6 +40345,45 @@ class Card extends React.Component {
     }
     document.removeEventListener("touchmove", this.onMouseMove);
   }
+  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 = _.pick(this.props, "content");
+    const onMouseDown = this.props.animating ? $.noop : this.onMouseDown;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card-wrap " + ClassNames.INTERACTIVE,
+      style: style,
+      onMouseDown: onMouseDown,
+      onTouchStart: onMouseDown,
+      onTouchEnd: this.onMouseUp,
+      onTouchCancel: this.onMouseUp
+    }, /*#__PURE__*/React.createElement("div", {
+      className: className.join(" ")
+    }, /*#__PURE__*/React.createElement(Renderer, _extends({}, rendererProps, {
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
+    }))));
+  }
 }
 Card.contextType = PerseusI18nContext;
 Card.propTypes = {
@@ -41522,7 +41590,6 @@ class HighlightSetRenderer extends React.PureComponent {
       hoveredHighlightKey: null,
       hoveringTooltipFor: null
     };
-    // eslint-disable-next-line react/sort-comp
     this._highlightRenderers = {};
     this._handleMouseMove = e => {
       const mouseClientPosition = {
@@ -41866,8 +41933,6 @@ class WordIndexer extends React.PureComponent {
     super(...args);
     this._container = void 0;
   }
-  /* eslint-enable react/sort-comp */
-
   componentDidMount() {
     this._sendWordsUpdate();
   }
@@ -42537,6 +42602,14 @@ class Passage extends React.Component {
       });
     };
   }
+  static validate(state, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   componentDidMount() {
     this._updateState();
 
@@ -42754,17 +42827,6 @@ class Passage extends React.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
    *
@@ -42994,14 +43056,6 @@ class PhetSimulation extends React.Component {
       url: null,
       banner: null
     };
-    this.change = (...args) => {
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(this, args);
-    };
-    this.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
     // different abbreviations, so in points of divergence of abbreviations, we need to
@@ -43124,8 +43178,7 @@ class PhetSimulation extends React.Component {
       title: this.props.description,
       sandbox: sandboxProperties,
       style: {
-        minWidth: 400,
-        height: 360,
+        height: 225,
         width: "100%",
         borderWidth: 0
       },
@@ -43167,17 +43220,16 @@ const styles$6 = StyleSheet.create({
     borderRadius: borderRadiusLarge,
     borderWidth: 1,
     borderColor: basicBorderColor,
-    padding: phoneMargin,
+    padding: spacing.medium_16,
     paddingBottom: 0,
-    width: 650
+    // Include space for medium_16 padding on each side
+    width: 400 + 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
 };
 
@@ -44685,7 +44737,7 @@ const init = function init(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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46498,8 +46550,6 @@ class MultiRenderer extends React.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) {
@@ -48272,5 +48322,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map