@khanacademy/perseus 31.1.0 → 32.0.1

package/dist/es/index.js

@@ -3161,45 +3161,6 @@ function constrainedTickStepsFromTickSteps(tickSteps, ranges) {
   return [constrainTickStep(tickSteps[0], ranges[0]), constrainTickStep(tickSteps[1], ranges[1])];
 }
 
-/**
- * Transparently update deprecated props so that the code to deal
- * with them only lives in one place: (Widget).deprecatedProps
- *
- * For example, if a boolean `foo` was deprecated in favor of a
- * number 'bar':
- *      deprecatedProps: {
- *          foo: function(props) {
- *              return {bar: props.foo ? 1 : 0};
- *          }
- *      }
- */
-const DeprecationMixin$1 = {
-  // This lifecycle stage is only called before first render
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount: function () {
-    const newProps = {};
-    _.each(this.deprecatedProps, function (func, prop) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (_.has(this.props, prop)) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        _.extend(newProps, func(this.props));
-      }
-    }, this);
-    if (!_.isEmpty(newProps)) {
-      // Set new props directly so that widget renders correctly
-      // when it first mounts, even though these will be overwritten
-      // almost immediately afterwards...
-      _.extend(this.props, newProps);
-
-      // ...when we propagate the new props upwards and they come
-      // back down again.
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-      // eslint-disable-next-line no-restricted-syntax
-      setTimeout(this.props.onChange, 0, newProps);
-    }
-  }
-};
-
 /**
  * Approximate equality on numbers and primitives.
  */
@@ -3547,7 +3508,6 @@ const Util = {
   gridStepFromTickStep,
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
-  DeprecationMixin: DeprecationMixin$1,
   eq: eq$3,
   deepEq: deepEq$5,
   parseQueryString,
@@ -19467,6 +19427,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 +19525,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 +21285,6 @@ Tooltip.defaultProps = {
   targetContainerStyle: {}
 };
 
-/* eslint-disable react/sort-comp */
 const {
   captureScratchpadTouchStart: captureScratchpadTouchStart$2
 } = Util;
@@ -21681,7 +21640,6 @@ var TexWrangler = {
   modifyTex
 };
 
-/* eslint-disable react/sort-comp */
 const ParseTex$1 = TexWrangler.parseTex;
 const answerTypes = {
   number: {
@@ -21819,55 +21777,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 +21832,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 +22342,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 +22393,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 +22452,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,89 +24391,6 @@ class Categorizer extends React.Component {
       return Categorizer.validate(this.getUserInput(), rubric, this.context.strings);
     };
   }
-  render() {
-    const self = this;
-
-    // In this context, isMobile is used to differentiate mobile from
-    // desktop.
-    const isMobile = this.props.apiOptions.isMobile;
-    let indexedItems = this.props.items.map((item, n) => [item, n]);
-    if (this.props.randomizeItems) {
-      // @ts-expect-error - TS4104 - The type 'readonly (string | number)[][]' is 'readonly' and cannot be assigned to the mutable type '(string | number)[][]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | RNG'.
-      indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
-    }
-    const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$s.mobileTable)
-    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$s.emptyHeaderCell)
-    }), this.props.categories.map((category, i) => {
-      // Array index is the correct key here, as that's
-      // how category grading actually works -- no way
-      // to add or remove categories or items in the
-      // middle. (If we later add that, this should be
-      // fixed.)
-      return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$s.header),
-        key: i
-      }, /*#__PURE__*/React.createElement(Renderer, {
-        content: category,
-        linterContext: this.props.linterContext,
-        strings: this.context.strings
-      }));
-    }))), /*#__PURE__*/React.createElement("tbody", null, indexedItems.map(indexedItem => {
-      const item = indexedItem[0];
-      const itemNum = indexedItem[1];
-      const uniqueId = self.state.uniqueId + "_" + itemNum;
-      return /*#__PURE__*/React.createElement("tr", {
-        key: itemNum
-      }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Renderer
-      // @ts-expect-error - TS2322 - Type 'string | number' is not assignable to type 'string | undefined'.
-      , {
-        content: item,
-        linterContext: this.props.linterContext,
-        strings: this.context.strings
-      })), self.props.categories.map((catName, catNum) => {
-        const selected = self.props.values[itemNum] === catNum;
-        return /*#__PURE__*/React.createElement("td", {
-          className: "category " + css(styles$s.cell),
-          key: catNum
-        }, /*#__PURE__*/React.createElement("div", {
-          className: ClassNames.INTERACTIVE,
-          role: "button",
-          "aria-label": catName,
-          onClick: () => this.onChange(itemNum, catNum)
-        }, isMobile && /*#__PURE__*/React.createElement("input", {
-          type: "radio",
-          name: uniqueId,
-          className: css(sharedStyles.responsiveInput, sharedStyles.responsiveRadioInput),
-          checked: selected,
-          onChange: () => this.onChange(itemNum, catNum),
-          onClick: e => e.stopPropagation()
-        }), !isMobile && /*#__PURE__*/React.createElement("span", {
-          className: css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
-        }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
-      }));
-      /* eslint-enable max-len */
-    })));
-
-    // TODO(benkomalo): kill CSS-based styling and move everything to
-    // aphrodite.
-    const extraClassNames = classNames({
-      "categorizer-container": true,
-      "static-mode": this.props.static
-    });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$s.fullBleedContainer] : [];
-    return /*#__PURE__*/React.createElement("div", {
-      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;
@@ -24544,6 +24418,89 @@ class Categorizer extends React.Component {
   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;
+
+    // In this context, isMobile is used to differentiate mobile from
+    // desktop.
+    const isMobile = this.props.apiOptions.isMobile;
+    let indexedItems = this.props.items.map((item, n) => [item, n]);
+    if (this.props.randomizeItems) {
+      // @ts-expect-error - TS4104 - The type 'readonly (string | number)[][]' is 'readonly' and cannot be assigned to the mutable type '(string | number)[][]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | RNG'.
+      indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
+    }
+    const table = /*#__PURE__*/React.createElement("table", {
+      className: "categorizer-table " + css(styles$s.mobileTable)
+    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      className: css(styles$s.emptyHeaderCell)
+    }), this.props.categories.map((category, i) => {
+      // Array index is the correct key here, as that's
+      // how category grading actually works -- no way
+      // to add or remove categories or items in the
+      // middle. (If we later add that, this should be
+      // fixed.)
+      return /*#__PURE__*/React.createElement("th", {
+        className: css(styles$s.header),
+        key: i
+      }, /*#__PURE__*/React.createElement(Renderer, {
+        content: category,
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
+      }));
+    }))), /*#__PURE__*/React.createElement("tbody", null, indexedItems.map(indexedItem => {
+      const item = indexedItem[0];
+      const itemNum = indexedItem[1];
+      const uniqueId = self.state.uniqueId + "_" + itemNum;
+      return /*#__PURE__*/React.createElement("tr", {
+        key: itemNum
+      }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Renderer
+      // @ts-expect-error - TS2322 - Type 'string | number' is not assignable to type 'string | undefined'.
+      , {
+        content: item,
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
+      })), self.props.categories.map((catName, catNum) => {
+        const selected = self.props.values[itemNum] === catNum;
+        return /*#__PURE__*/React.createElement("td", {
+          className: "category " + css(styles$s.cell),
+          key: catNum
+        }, /*#__PURE__*/React.createElement("div", {
+          className: ClassNames.INTERACTIVE,
+          role: "button",
+          "aria-label": catName,
+          onClick: () => this.onChange(itemNum, catNum)
+        }, isMobile && /*#__PURE__*/React.createElement("input", {
+          type: "radio",
+          name: uniqueId,
+          className: css(sharedStyles.responsiveInput, sharedStyles.responsiveRadioInput),
+          checked: selected,
+          onChange: () => this.onChange(itemNum, catNum),
+          onClick: e => e.stopPropagation()
+        }), !isMobile && /*#__PURE__*/React.createElement("span", {
+          className: css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
+        }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
+      }));
+      /* eslint-enable max-len */
+    })));
+
+    // TODO(benkomalo): kill CSS-based styling and move everything to
+    // aphrodite.
+    const extraClassNames = classNames({
+      "categorizer-container": true,
+      "static-mode": this.props.static
+    });
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$s.fullBleedContainer] : [];
+    return /*#__PURE__*/React.createElement("div", {
+      className: extraClassNames + " " + css(...inlineStyles)
+    }, table);
+  }
 }
 
 // TODO(benkomalo): inject page-margin into Perseus instead of hardcoding.
@@ -25053,8 +25010,6 @@ var Dropdown$1 = {
   transform: optionsTransform
 };
 
-/* eslint-disable react/sort-comp */
-
 // transform = _.identity
 
 function mediaQueryIsMatched(mediaQuery) {
@@ -26811,6 +26766,34 @@ class Grapher extends React.Component {
       }
     };
   }
+  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;
@@ -26861,34 +26844,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 +27189,6 @@ var Iframe$1 = {
   hidden: true
 };
 
-/* eslint-disable react/sort-comp */
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
 const defaultBackgroundImage$2 = {
@@ -27261,6 +27215,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 +27354,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 +27541,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 +27894,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 +29493,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 +29529,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 +29756,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -30208,6 +30156,9 @@ const GraphLockedLayer = props => {
 };
 
 const actions = {
+  global: {
+    deleteIntent
+  },
   angle: {
     movePoint
   },
@@ -30226,7 +30177,9 @@ const actions = {
   pointGraph: {
     movePoint,
     addPoint,
-    removePoint
+    removePoint,
+    focusPoint,
+    blurPoint
   },
   polygon: {
     movePoint,
@@ -30247,6 +30200,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 +30228,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 +31835,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 +31998,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 +32016,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 +32215,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 +32474,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 +32863,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) => {
@@ -33248,9 +33276,6 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 
-const {
-  DeprecationMixin
-} = Util;
 const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
 const defaultBackgroundImage = {
   url: null
@@ -33279,13 +33304,6 @@ function capitalize(str) {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const deprecatedProps = {
-  showGraph: function (props) {
-    return {
-      markings: props.showGraph ? "graph" : "none"
-    };
-  }
-};
 const _getShouldShowInstructions = props => {
   return _isClickToAddPoints(props) && (
   // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
@@ -33338,7 +33356,6 @@ class LegacyInteractiveGraph extends React.Component {
       // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
       props.graph.coords == null || props.graph.coords.length === 0);
     };
-    this.deprecatedProps = deprecatedProps;
     this.setGraphie = newGraphie => {
       this.graphie = newGraphie;
       this.setupGraphie();
@@ -34411,10 +34428,6 @@ class LegacyInteractiveGraph extends React.Component {
     };
     this.focus = $.noop;
   }
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount() {
-    DeprecationMixin.UNSAFE_componentWillMount.call(this);
-  }
   componentDidMount() {
     if (this.refs.graph) {
       // eslint-disable-next-line react/no-string-refs
@@ -37278,6 +37291,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 +37373,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 +37381,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 +37440,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 +37491,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) {
@@ -37741,6 +37636,124 @@ class Sortable extends React.Component {
   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
+        }));
+      }
+    }, this);
+    return /*#__PURE__*/React.createElement("ul", {
+      className: className
+    }, cards);
+  }
 }
 Sortable.defaultProps = {
   layout: Layout.HORIZONTAL,
@@ -38504,7 +38517,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 +38559,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 +38616,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 +40241,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 +40259,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 +40290,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 +41535,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 +41878,6 @@ class WordIndexer extends React.PureComponent {
     super(...args);
     this._container = void 0;
   }
-  /* eslint-enable react/sort-comp */
-
   componentDidMount() {
     this._sendWordsUpdate();
   }
@@ -42537,6 +42547,14 @@ class Passage extends React.Component {
       });
     };
   }
+  static validate(state, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   componentDidMount() {
     this._updateState();
 
@@ -42754,17 +42772,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 +43001,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
@@ -43107,7 +43106,7 @@ class PhetSimulation extends React.Component {
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     const sandboxProperties = "allow-same-origin allow-scripts";
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$6.container
+      style: styles$6.widgetContainer
     }, this.state.banner !== null &&
     /*#__PURE__*/
     // TODO(anna): Make this banner focusable
@@ -43119,19 +43118,16 @@ class PhetSimulation extends React.Component {
       layout: "floating",
       kind: this.state.banner.kind,
       text: this.state.banner.message
-    })), /*#__PURE__*/React.createElement("iframe", {
+    })), /*#__PURE__*/React.createElement(View, {
+      style: styles$6.iframeContainer
+    }, /*#__PURE__*/React.createElement("iframe", {
       ref: this.iframeRef,
       title: this.props.description,
       sandbox: sandboxProperties,
-      style: {
-        minWidth: 400,
-        height: 360,
-        width: "100%",
-        borderWidth: 0
-      },
+      className: css(styles$6.iframeResponsive),
       src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
       allow: "fullscreen"
-    }), /*#__PURE__*/React.createElement(IconButton, {
+    })), /*#__PURE__*/React.createElement(IconButton, {
       icon: cornersOutIcon,
       onClick: () => {
         var _this$iframeRef$curre;
@@ -43163,21 +43159,35 @@ const makeSafeUrl = (urlString, locale) => {
   return url;
 };
 const styles$6 = StyleSheet.create({
-  container: {
+  widgetContainer: {
     borderRadius: borderRadiusLarge,
     borderWidth: 1,
     borderColor: basicBorderColor,
-    padding: phoneMargin,
-    paddingBottom: 0,
-    width: 650
+    padding: spacing.medium_16,
+    paddingBottom: 0
+  },
+  iframeContainer: {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    // 16:9 aspect ratio
+    paddingTop: "56.25%"
+  },
+  iframeResponsive: {
+    borderWidth: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: "100%",
+    height: "100%"
   }
 });
 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 +44695,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.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46498,8 +46508,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 +48280,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