@khanacademy/perseus 19.8.0 → 20.0.0

package/dist/es/index.js

@@ -29,7 +29,7 @@ import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$1 from 'lodash.debounce';
-import { vec, Line as Line$4, MovablePoint as MovablePoint$6, Coordinates, Mafs } from 'mafs';
+import { vec, Line as Line$3, MovablePoint as MovablePoint$5, Coordinates, Mafs } from 'mafs';
 import createReactClass from 'create-react-class';
 import Switch from '@khanacademy/wonder-blocks-switch';
 import { LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -13697,7 +13697,7 @@ var GraphieClasses = {
 };
 
 const normalizeOptions$3 = InteractiveUtil.normalizeOptions;
-const assert$8 = InteractiveUtil.assert;
+const assert$7 = InteractiveUtil.assert;
 
 // Default "props" and "state". Both are added to this.state.
 // However, properties in DEFAULT_PROPS are updated on `modify()`,
@@ -13854,7 +13854,7 @@ class Movable {
    * Simulates a mouse grab event on the movable object.
    */
   grab(coord) {
-    assert$8(point.is(coord));
+    assert$7(point.is(coord));
     const graphie = this.graphie;
     const state = this.state;
     state.isHovering = true;
@@ -14340,7 +14340,7 @@ var objective_ = {
 /**
  * MovableLine
  */
-const assert$7 = InteractiveUtil.assert;
+const assert$6 = InteractiveUtil.assert;
 const normalizeOptions$2 = InteractiveUtil.normalizeOptions;
 
 // Default "props" and "state". Both are added to this.state and
@@ -14364,9 +14364,9 @@ const DEFAULT_STATE$2 = {
   visibleShape: null,
   mouseTarget: null
 };
-const MovableLine$4 = function MovableLine(graphie, movable, options) {
-  assert$7(graphie != null);
-  assert$7(options != null);
+const MovableLine$3 = function MovableLine(graphie, movable, options) {
+  assert$6(graphie != null);
+  assert$6(options != null);
 
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   _.extend(this, {
@@ -14382,10 +14382,10 @@ const MovableLine$4 = function MovableLine(graphie, movable, options) {
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   this.modify(_.extend({}, DEFAULT_STATE$2, options));
 };
-_.extend(MovableLine$4, MovableLineOptions);
-InteractiveUtil.createGettersFor(MovableLine$4, _.extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
-InteractiveUtil.addMovableHelperMethodsTo(MovableLine$4);
-_.extend(MovableLine$4.prototype, {
+_.extend(MovableLine$3, MovableLineOptions);
+InteractiveUtil.createGettersFor(MovableLine$3, _.extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
+InteractiveUtil.addMovableHelperMethodsTo(MovableLine$3);
+_.extend(MovableLine$3.prototype, {
   cloneState: function () {
     return _.extend(this.movable.cloneState(), {
       coords: this.coords()
@@ -14927,7 +14927,7 @@ var MovablePointOptions = {
   }
 };
 
-const assert$6 = InteractiveUtil.assert;
+const assert$5 = InteractiveUtil.assert;
 const normalizeOptions$1 = InteractiveUtil.normalizeOptions;
 const {
   processMath
@@ -14962,7 +14962,7 @@ const DEFAULT_STATE$1 = {
 // TODO(benchristel): this is a memory leak. We add items to
 // tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
-class MovablePoint$5 {
+class MovablePoint$4 {
   constructor(graphie, movable, options) {
     this.graphie = void 0;
     this.movable = void 0;
@@ -15004,7 +15004,7 @@ class MovablePoint$5 {
     const self = this;
     const graphie = self.graphie;
     const state = _.extend(self.state, normalizeOptions$1(options));
-    assert$6(point.is(state.coord));
+    assert$5(point.is(state.coord));
 
     // Default things inside the state.normalStyle object, because
     // _.extend is not deep.
@@ -15300,12 +15300,12 @@ class MovablePoint$5 {
     return this.state.coord;
   }
   setCoord(coord) {
-    assert$6(point.is(coord, 2));
+    assert$5(point.is(coord, 2));
     this.state.coord = _.clone(coord);
     this.draw();
   }
   setCoordConstrained(coord) {
-    assert$6(point.is(coord, 2));
+    assert$5(point.is(coord, 2));
     const result = this._applyConstraints(coord, this.coord());
     if (result !== false) {
       this.state.coord = _.clone(result);
@@ -15479,15 +15479,15 @@ class MovablePoint$5 {
     this.movable.toFront();
   }
 }
-MovablePoint$5.add = MovablePointOptions.add;
-MovablePoint$5.modify = MovablePointOptions.modify;
-MovablePoint$5.draw = MovablePointOptions.draw;
-MovablePoint$5.remove = MovablePointOptions.remove;
-MovablePoint$5.onMoveStart = MovablePointOptions.onMoveStart;
-MovablePoint$5.constraints = MovablePointOptions.constraints;
-MovablePoint$5.onMove = MovablePointOptions.onMove;
-MovablePoint$5.onMoveEnd = MovablePointOptions.onMoveEnd;
-MovablePoint$5.onClick = MovablePointOptions.onClick;
+MovablePoint$4.add = MovablePointOptions.add;
+MovablePoint$4.modify = MovablePointOptions.modify;
+MovablePoint$4.draw = MovablePointOptions.draw;
+MovablePoint$4.remove = MovablePointOptions.remove;
+MovablePoint$4.onMoveStart = MovablePointOptions.onMoveStart;
+MovablePoint$4.constraints = MovablePointOptions.constraints;
+MovablePoint$4.onMove = MovablePointOptions.onMove;
+MovablePoint$4.onMoveEnd = MovablePointOptions.onMoveEnd;
+MovablePoint$4.onClick = MovablePointOptions.onClick;
 function getKey(eventName, id) {
   return eventName + ":" + id;
 }
@@ -15813,7 +15813,7 @@ var MovablePolygonOptions = {
  * Creates and adds a polygon to the graph that can be dragged around.
  * It allows constraints on its movement and draws when moves happen.
  */
-const assert$5 = InteractiveUtil.assert;
+const assert$4 = InteractiveUtil.assert;
 const normalizeOptions = InteractiveUtil.normalizeOptions;
 
 // Default "props" and "state". Both are added to this.state and
@@ -15848,8 +15848,8 @@ const DEFAULT_STATE = {
   mouseTarget: null
 };
 const MovablePolygon = function MovablePolygon(graphie, movable, options) {
-  assert$5(graphie != null);
-  assert$5(options != null);
+  assert$4(graphie != null);
+  assert$4(options != null);
 
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   _.extend(this, {
@@ -16081,15 +16081,15 @@ _.extend(MovablePolygon.prototype, {
 });
 
 const Interactive2 = {
-  MovablePoint: MovablePoint$5,
+  MovablePoint: MovablePoint$4,
   addMovablePoint: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovablePoint$5(graphie, movable, options);
+    return new MovablePoint$4(graphie, movable, options);
   },
-  MovableLine: MovableLine$4,
+  MovableLine: MovableLine$3,
   addMovableLine: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovableLine$4(graphie, movable, options);
+    return new MovableLine$3(graphie, movable, options);
   },
   MovablePolygon: MovablePolygon,
   addMovablePolygon: function (graphie, options) {
@@ -16125,7 +16125,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$4 = GraphieClasses.createClass({
+const MovablePoint$3 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16182,8 +16182,8 @@ const MovablePoint$4 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-_.extend(MovablePoint$4, Interactive2.MovablePoint);
-const MovableLine$3 = GraphieClasses.createClass({
+_.extend(MovablePoint$3, Interactive2.MovablePoint);
+const MovableLine$2 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
   add: function (graphie) {
@@ -16211,8 +16211,8 @@ const MovableLine$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovableLine.constrain.snap()
-_.extend(MovableLine$3, Interactive2.MovableLine);
-const Label$2 = GraphieClasses.createSimpleClass((graphie, props) => {
+_.extend(MovableLine$2, Interactive2.MovableLine);
+const Label$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   let coord = props.coord;
   if (props.unscaled) {
     coord = graphie.unscalePoint(coord);
@@ -16231,7 +16231,7 @@ const Label$2 = GraphieClasses.createSimpleClass((graphie, props) => {
   }
   return elem;
 });
-const Line$3 = GraphieClasses.createClass({
+const Line$2 = GraphieClasses.createClass({
   displayName: "Line",
   movableProps: ["children"],
   add: function (graphie) {
@@ -16309,7 +16309,7 @@ const Point$1 = GraphieClasses.createSimpleClass((graphie, props) => {
     stroke: props.color || KhanColors.BLACK
   });
 });
-const Path$1 = GraphieClasses.createClass({
+const Path = GraphieClasses.createClass({
   displayName: "Path",
   movableProps: ["children"],
   add: function (graphie) {
@@ -16331,7 +16331,7 @@ const Path$1 = GraphieClasses.createClass({
     this.path.toFront();
   }
 });
-const Arc$1 = GraphieClasses.createSimpleClass((graphie, props) => {
+const Arc = GraphieClasses.createSimpleClass((graphie, props) => {
   let center = props.center;
   let radius = props.radius;
   if (props.unscaled) {
@@ -16340,21 +16340,21 @@ const Arc$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   }
   return graphie.arc(center, radius, props.startAngle, props.endAngle, props.sector, props.style);
 });
-const Circle$1 = GraphieClasses.createSimpleClass((graphie, props) => {
+const Circle = GraphieClasses.createSimpleClass((graphie, props) => {
   return graphie.circle(props.center, props.radius, props.style);
 });
 const Rect$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   return graphie.rect(props.x, props.y, props.width, props.height, props.style);
 });
 var Movables = {
-  Arc: Arc$1,
-  Circle: Circle$1,
-  Label: Label$2,
-  Line: Line$3,
-  MovableLine: MovableLine$3,
-  MovablePoint: MovablePoint$4,
+  Arc: Arc,
+  Circle: Circle,
+  Label: Label$1,
+  Line: Line$2,
+  MovableLine: MovableLine$2,
+  MovablePoint: MovablePoint$3,
   Parabola: Parabola,
-  Path: Path$1,
+  Path: Path,
   Plot: Plot$2,
   PlotParametric: PlotParametric$1,
   Point: Point$1,
@@ -16369,7 +16369,7 @@ const {
   nestedMap
 } = Util;
 const {
-  assert: assert$4
+  assert: assert$3
 } = InteractiveUtil;
 class Graphie extends React.Component {
   constructor(...args) {
@@ -16513,7 +16513,7 @@ class Graphie extends React.Component {
 
         // Instantiate the descriptor to turn it into a real Movable
         const child = new childDescriptor.type(childDescriptor.props);
-        assert$4(child instanceof GraphieMovable, "All children of a Graphie component must be Graphie " + "movables");
+        assert$3(child instanceof GraphieMovable, "All children of a Graphie component must be Graphie " + "movables");
 
         // Give each child a key
         const keyProp = childDescriptor.key;
@@ -18716,6 +18716,13 @@ const replaceWidget = (name, replacementName) => {
   }
   registerWidget(name, substituteWidget);
 };
+const replaceDeprecatedWidgets = () => {
+  replaceWidget("transformer", "deprecated-standin");
+  replaceWidget("lights-puzzle", "deprecated-standin");
+  replaceWidget("reaction-diagram", "deprecated-standin");
+  replaceWidget("sequence", "deprecated-standin");
+  replaceWidget("simulator", "deprecated-standin");
+};
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
     if (!editor.widgetName) {
@@ -18730,8 +18737,8 @@ const registerEditors = editorsToRegister => {
  * @param name - the widget that you are trying to replace
  * @param replacementName - the name of the widget that takes its place
  *
- * e.g. replaceEditor("transformer", "always-correct") will make it so the
- * transformer widget is replaced by the always correct widget
+ * e.g. replaceEditor("transformer", "deprecated-standin") will make it so the
+ * transformer widget is replaced by the deprecated stand-in widget
  */
 const replaceEditor = (name, replacementName) => {
   const substituteEditor = editors[replacementName];
@@ -18742,6 +18749,13 @@ const replaceEditor = (name, replacementName) => {
   }
   editors[name] = substituteEditor;
 };
+const replaceDeprecatedEditors = () => {
+  replaceEditor("transformer", "deprecated-standin");
+  replaceEditor("lights-puzzle", "deprecated-standin");
+  replaceEditor("reaction-diagram", "deprecated-standin");
+  replaceEditor("sequence", "deprecated-standin");
+  replaceEditor("simulator", "deprecated-standin");
+};
 const getWidget = name => {
   // TODO(alex): Consider referring to these as renderers to avoid
   // overloading "widget"
@@ -18924,7 +18938,7 @@ const getRendererPropsForWidgetInfo = (widgetInfo, problemNum) => {
   // widgetInfo.options are the widgetEditor's props:
   return transform(widgetInfo.options, problemNum);
 };
-const traverseChildWidgets$4 = (widgetInfo, traverseRenderer) => {
+const traverseChildWidgets$3 = (widgetInfo, traverseRenderer) => {
   if (!traverseRenderer) {
     throw new PerseusError("traverseRenderer must be provided, but was not", Errors.Internal);
   }
@@ -19053,8 +19067,10 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   registerWidget: registerWidget,
   registerWidgets: registerWidgets,
   replaceWidget: replaceWidget,
+  replaceDeprecatedWidgets: replaceDeprecatedWidgets,
   registerEditors: registerEditors,
   replaceEditor: replaceEditor,
+  replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getEditor: getEditor,
   getTransform: getTransform,
@@ -19065,7 +19081,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   getAllWidgetTypes: getAllWidgetTypes,
   upgradeWidgetInfoToLatestVersion: upgradeWidgetInfoToLatestVersion,
   getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
-  traverseChildWidgets: traverseChildWidgets$4,
+  traverseChildWidgets: traverseChildWidgets$3,
   getSupportedAlignments: getSupportedAlignments,
   getDefaultAlignment: getDefaultAlignment,
   validateAlignments: validateAlignments,
@@ -21736,7 +21752,7 @@ const styles$z = StyleSheet.create({
     border: "solid 1px #999"
   }
 });
-const propTransform$4 = widgetOptions => {
+const propTransform$3 = widgetOptions => {
   const {
     simplify,
     size,
@@ -21756,7 +21772,7 @@ var InputNumber$1 = {
   defaultAlignment: "inline-block",
   hidden: true,
   widget: InputNumber,
-  transform: propTransform$4,
+  transform: propTransform$3,
   isLintable: true
 };
 
@@ -25353,7 +25369,7 @@ GradedGroup.defaultProps = {
   hasHint: false,
   linterContext: linterContextDefault
 };
-const traverseChildWidgets$3 = function traverseChildWidgets(props, traverseRenderer) {
+const traverseChildWidgets$2 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
 const styles$m = StyleSheet.create({
@@ -25409,7 +25425,7 @@ var GradedGroup$1 = {
   name: "graded-group",
   displayName: "Graded group (articles only)",
   widget: GradedGroup,
-  traverseChildWidgets: traverseChildWidgets$3,
+  traverseChildWidgets: traverseChildWidgets$2,
   // TODO(aasmund): This widget should be available for articles only
   hidden: false,
   tracking: "all",
@@ -25571,7 +25587,7 @@ GradedGroupSet.defaultProps = {
   gradedGroups: [],
   linterContext: linterContextDefault
 };
-const traverseChildWidgets$2 = function traverseChildWidgets(props, traverseRenderer) {
+const traverseChildWidgets$1 = function traverseChildWidgets(props, traverseRenderer) {
   // NOTE(jared): I have no idea how this works
   return {
     groups: props.gradedGroups.map(traverseRenderer)
@@ -25581,7 +25597,7 @@ var GradedGroupSet$1 = {
   name: "graded-group-set",
   displayName: "Graded group set (articles only)",
   widget: GradedGroupSet,
-  traverseChildWidgets: traverseChildWidgets$2,
+  traverseChildWidgets: traverseChildWidgets$1,
   // TODO(michaelpolyak): This widget should be available for articles only
   hidden: false,
   tracking: "all",
@@ -26141,7 +26157,7 @@ function functionForType(
 type) {
   return functionTypeMapping[type];
 }
-const validate$2 = (state, rubric) => {
+const validate$1 = (state, rubric) => {
   if (state.type !== rubric.correct.type) {
     return {
       type: "points",
@@ -26301,7 +26317,7 @@ var util = /*#__PURE__*/Object.freeze({
   DEFAULT_BACKGROUND_IMAGE: DEFAULT_BACKGROUND_IMAGE,
   allTypes: allTypes,
   functionForType: functionForType,
-  validate: validate$2,
+  validate: validate$1,
   getEquationString: getEquationString,
   pointsFromNormalized: pointsFromNormalized,
   maybePointsFromNormalized: maybePointsFromNormalized,
@@ -26313,9 +26329,9 @@ var util = /*#__PURE__*/Object.freeze({
 });
 
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$3 = Graphie.MovablePoint;
+const MovablePoint$2 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
-const MovableLine$2 = Graphie.MovableLine;
+const MovableLine$1 = Graphie.MovableLine;
 function isFlipped(newCoord, oldCoord, line) {
   const CCW = (a, b, c) => {
     return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
@@ -26370,7 +26386,7 @@ class FunctionGrapher extends React.Component {
       const dashed = {
         strokeDasharray: "- "
       };
-      return asymptote && /*#__PURE__*/React.createElement(MovableLine$2, {
+      return asymptote && /*#__PURE__*/React.createElement(MovableLine$1, {
         onMove: (newCoord, oldCoord) => {
           // Calculate and apply displacement
           const delta = vector$1.subtract(newCoord, oldCoord);
@@ -26395,7 +26411,7 @@ class FunctionGrapher extends React.Component {
         }],
         normalStyle: dashed,
         highlightStyle: dashed
-      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$3, {
+      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$2, {
         key: `asymptoteCoord-${i}`,
         coord: coord,
         static: true,
@@ -26410,7 +26426,7 @@ class FunctionGrapher extends React.Component {
   }
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React.createElement(MovablePoint$3, {
+      return /*#__PURE__*/React.createElement(MovablePoint$2, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -26662,21 +26678,21 @@ class Grapher extends React.Component {
     return tickStep;
   }
   simpleValidate(rubric) {
-    return validate$2(this.getUserInput(), rubric);
+    return validate$1(this.getUserInput(), rubric);
   }
   getUserInput() {
     return Grapher.getUserInputFromProps(this.props);
   }
   focus() {}
   static validate(state, rubric) {
-    return validate$2(state, rubric);
+    return validate$1(state, rubric);
   }
   static getUserInputFromProps(props) {
     return props.plot;
   }
 }
 Grapher.defaultProps = DEFAULT_GRAPHER_PROPS;
-const propTransform$3 = editorProps => {
+const propTransform$2 = editorProps => {
   const widgetProps = {
     availableTypes: editorProps.availableTypes,
     graph: editorProps.graph
@@ -26695,7 +26711,7 @@ const propTransform$3 = editorProps => {
 // Note that in addition to the standard staticTransform, in static
 // mode we set static=true for the graph's handles in FunctionGrapher.
 const staticTransform$3 = editorProps => {
-  return _extends({}, propTransform$3(editorProps), {
+  return _extends({}, propTransform$2(editorProps), {
     // Don't display graph type choices if we're in static mode
     availableTypes: [editorProps.correct.type],
     // Display the same graph marked as correct in the widget editor.
@@ -26706,7 +26722,7 @@ var Grapher$1 = {
   name: "grapher",
   displayName: "Grapher",
   widget: Grapher,
-  transform: propTransform$3,
+  transform: propTransform$2,
   staticTransform: staticTransform$3
 };
 
@@ -26844,14 +26860,14 @@ Group.defaultProps = {
   images: {},
   linterContext: linterContextDefault
 };
-const traverseChildWidgets$1 = function traverseChildWidgets(props, traverseRenderer) {
+const traverseChildWidgets = function traverseChildWidgets(props, traverseRenderer) {
   return _extends({}, props, traverseRenderer(props));
 };
 var Group$1 = {
   name: "group",
   displayName: "Group (SAT only)",
   widget: Group,
-  traverseChildWidgets: traverseChildWidgets$1,
+  traverseChildWidgets: traverseChildWidgets,
   hidden: false,
   isLintable: true
 };
@@ -27018,7 +27034,7 @@ var Iframe$1 = {
 };
 
 /* eslint-disable react/sort-comp */
-const defaultBoxSize$1 = 400;
+const defaultBoxSize = 400;
 const defaultRange = [0, 10];
 const defaultBackgroundImage$2 = {
   url: null,
@@ -27216,7 +27232,7 @@ ImageWidget.defaultProps = {
   alignment: DEFAULT_ALIGNMENT,
   title: "",
   range: [defaultRange, defaultRange],
-  box: [defaultBoxSize$1, defaultBoxSize$1],
+  box: [defaultBoxSize, defaultBoxSize],
   backgroundImage: defaultBackgroundImage$2,
   labels: [],
   alt: "",
@@ -27240,13 +27256,13 @@ var Image$1 = {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 // @ts-expect-error - TS2339 - Property 'Label' does not exist on type 'typeof Graphie'.
-const Label$1 = Graphie.Label;
+const Label = Graphie.Label;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
-const Line$2 = Graphie.Line;
+const Line$1 = Graphie.Line;
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$2 = Graphie.MovablePoint;
+const MovablePoint$1 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
-const MovableLine$1 = Graphie.MovableLine;
+const MovableLine = Graphie.MovableLine;
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
 const Plot = Graphie.Plot;
 // @ts-expect-error - TS2339 - Property 'PlotParametric' does not exist on type 'typeof Graphie'.
@@ -27433,11 +27449,11 @@ class Interaction extends React.Component {
       options: this.props.graph,
       setup: this._setupGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
-    }, this.props.graph.markings === "graph" && /*#__PURE__*/React.createElement(Label$1, {
+    }, this.props.graph.markings === "graph" && /*#__PURE__*/React.createElement(Label, {
       coord: [0, range[1][1]],
       text: labels[1],
       direction: "above"
-    }), this.props.graph.markings === "graph" && /*#__PURE__*/React.createElement(Label$1, {
+    }), this.props.graph.markings === "graph" && /*#__PURE__*/React.createElement(Label, {
       coord: [range[0][1], 0],
       text: labels[0],
       direction: "right"
@@ -27464,7 +27480,7 @@ class Interaction extends React.Component {
         this._eval(element.options.endX),
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this._eval(element.options.endY)];
-        return /*#__PURE__*/React.createElement(Line$2, {
+        return /*#__PURE__*/React.createElement(Line$1, {
           key: element.key,
           start: start,
           end: end,
@@ -27493,7 +27509,7 @@ class Interaction extends React.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27515,7 +27531,7 @@ class Interaction extends React.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React.createElement(MovablePoint$2, {
+        return /*#__PURE__*/React.createElement(MovablePoint$1, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27550,7 +27566,7 @@ class Interaction extends React.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27578,7 +27594,7 @@ class Interaction extends React.Component {
         this.state.variables["x_" + element.options.endSubscript],
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this.state.variables["y_" + element.options.endSubscript]];
-        return /*#__PURE__*/React.createElement(MovableLine$1, {
+        return /*#__PURE__*/React.createElement(MovableLine, {
           key: element.key,
           constraints: constraints
           // eslint-disable-next-line react/jsx-no-bind
@@ -27591,14 +27607,14 @@ class Interaction extends React.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React.createElement(MovablePoint$2, {
+        }, /*#__PURE__*/React.createElement(MovablePoint$1, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React.createElement(MovablePoint$2, {
+        }), /*#__PURE__*/React.createElement(MovablePoint$1, {
           coord: end,
           static: true,
           normalStyle: {
@@ -27710,7 +27726,7 @@ class Interaction extends React.Component {
         this._eval(element.options.coordX),
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this._eval(element.options.coordY)];
-        return /*#__PURE__*/React.createElement(Label$1, {
+        return /*#__PURE__*/React.createElement(Label, {
           key: n + 1,
           coord: coord,
           text: unescapeMathMode(element.options.label),
@@ -28213,22 +28229,22 @@ const SegmentGraph = props => {
 const SegmentView = props => {
   const [pt1, pt2] = props.segment;
   const midpoint = vec.midpoint(pt1, pt2);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$4.Segment, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$3.Segment, {
     point1: pt1,
     point2: pt2
-  }), /*#__PURE__*/React.createElement(MovablePoint$6, {
+  }), /*#__PURE__*/React.createElement(MovablePoint$5, {
     point: midpoint,
     color: Color.blue,
     onMove: newPoint => {
       props.onMoveSegment(vec.sub(newPoint, midpoint));
     }
-  }), /*#__PURE__*/React.createElement(MovablePoint$6, {
+  }), /*#__PURE__*/React.createElement(MovablePoint$5, {
     point: pt1,
     color: Color.blue,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React.createElement(MovablePoint$6, {
+  }), /*#__PURE__*/React.createElement(MovablePoint$5, {
     point: pt2,
     color: Color.blue,
     onMove: newPoint => {
@@ -32890,276 +32906,6 @@ var LabelImage$1 = {
   isLintable: true
 };
 
-/* eslint-disable @typescript-eslint/no-unused-vars, react/sort-comp */
-
-// Styling
-const CELL_PADDING = 5;
-const TABLE_STYLE = {
-  display: "table",
-  tableLayout: "fixed"
-};
-const ROW_STYLE = {
-  display: "table-row"
-};
-const CELL_STYLE = {
-  display: "table-cell",
-  padding: CELL_PADDING
-};
-const BASE_TILE_STYLE = {
-  borderRadius: 10,
-  cursor: "pointer"
-};
-const MOVE_COUNT_STYLE = {
-  padding: CELL_PADDING,
-  display: "inline-block"
-};
-const RESET_BUTTON_STYLE = {
-  float: "right",
-  paddingRight: CELL_PADDING
-};
-const MAIN_TILE_SIZE = 50;
-const PATTERNS = {
-  plus: () => [[false, true, false], [true, true, true], [false, true, false]],
-  x: () => [[true, false, true], [false, true, false], [true, false, true]],
-  "plus/x": iter => {
-    return iter % 2 ? PATTERNS.x() : PATTERNS.plus();
-  }
-};
-
-// A single glowy cell
-class Tile extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._flip = () => {
-      // On change requires a value, but we don't actually have access
-      // to the coordinates here, so we just pass the inverse value as a workaround.
-      this.props.onChange({
-        value: !this.props.value
-      });
-    };
-  }
-  render() {
-    const color = this.props.value ? "#55dd55" : "#115511";
-    const style = _.extend({}, BASE_TILE_STYLE, {
-      width: this.props.size,
-      height: this.props.size,
-      backgroundColor: color
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      style: style,
-      onClick: this._flip
-    });
-  }
-}
-
-// A grid of glowy cells
-Tile.propTypes = {
-  value: PropTypes.bool.isRequired,
-  size: PropTypes.number.isRequired
-};
-class TileGrid extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: TABLE_STYLE,
-      className: "no-select"
-    }, this.props.cells && _.map(this.props.cells, (row, y) => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: y,
-        style: ROW_STYLE
-      }, _.map(row, (cell, x) => {
-        return /*#__PURE__*/React.createElement("div", {
-          key: x,
-          style: CELL_STYLE
-        }, /*#__PURE__*/React.createElement(Tile, {
-          value: cell,
-          size: this.props.size,
-          onChange: _.partial(this.props.onChange, {
-            value: {
-              y,
-              x
-            }
-          })
-        }));
-      }));
-    }));
-  }
-}
-
-// Returns a copy of the tiles, with tiles flipped according to
-// whether or not their y, x position satisfies the predicate
-const flipTilesPredicate = (oldCells, predicate) => {
-  return _.map(oldCells, (row, y) => {
-    return _.map(row, (cell, x) => {
-      return predicate(y, x) ? !cell : cell;
-    });
-  });
-};
-const flipTilesPattern = (oldCells, tileY, tileX, pattern) => {
-  return flipTilesPredicate(oldCells, (y, x) => {
-    const offsetY = y - tileY;
-    const offsetX = x - tileX;
-    if (Math.abs(offsetY) <= 1 && Math.abs(offsetX) <= 1) {
-      return pattern[offsetY + 1][offsetX + 1];
-    }
-    return false;
-  });
-};
-
-// The lights puzzle widget
-class LightsPuzzle extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this._currPattern = void 0;
-    this._nextPattern = void 0;
-    // @ts-expect-error - TS2564 - Property '_patternIndex' has no initializer and is not definitely assigned in the constructor.
-    this._patternIndex = void 0;
-    this.getUserInput = () => {
-      return WidgetJsonifyDeprecated.getUserInput.call(this);
-    };
-    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._width = () => {
-      if (this.props.cells && this.props.cells.length !== 0) {
-        return this.props.cells[0].length;
-      }
-      return 0; // default to 0
-    };
-    this._initNextPatterns = () => {
-      if (this.props.flipPattern) {
-        this._currPattern = PATTERNS[this.props.flipPattern](0);
-        this._nextPattern = PATTERNS[this.props.flipPattern](1);
-      }
-      this._patternIndex = 2;
-    };
-    this._shiftPatterns = () => {
-      if (this.props.flipPattern) {
-        this._currPattern = this._nextPattern;
-        this._nextPattern = PATTERNS[this.props.flipPattern](this._patternIndex);
-        this._patternIndex++;
-      }
-    };
-    this._flipTile = ({
-      value: {
-        y,
-        x
-      }
-    }) => {
-      const newCells = flipTilesPattern(this.props.cells, y, x, this._currPattern);
-      this._shiftPatterns();
-      this.change({
-        cells: newCells,
-        moveCount: (this.props.moveCount || 0) + 1
-      });
-    };
-    this._reset = () => {
-      this.change({
-        cells: this.props.startCells,
-        moveCount: 0
-      });
-    };
-    this.simpleValidate = rubric => {
-      return validate$1(rubric, this.getUserInput());
-    };
-  }
-  render() {
-    const width = this._width();
-    const tileSize = MAIN_TILE_SIZE;
-    const pxWidth = width * (tileSize + 2 * CELL_PADDING);
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TileGrid, {
-      cells: this.props.cells,
-      size: tileSize,
-      onChange: this._flipTile
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: pxWidth
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: MOVE_COUNT_STYLE
-    }, i18n.ngettext("Moves: %(num)s", "Moves: %(num)s", this.props.moveCount)), /*#__PURE__*/React.createElement("div", {
-      style: RESET_BUTTON_STYLE
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "button",
-      value: "Reset",
-      onClick: this._reset,
-      className: "simple-button"
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "clearfix"
-    }));
-  }
-  componentDidMount() {
-    this._initNextPatterns();
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.flipPattern !== this.props.flipPattern) {
-      this._initNextPatterns();
-    }
-  }
-}
-
-// grading function
-LightsPuzzle.defaultProps = {
-  cells: [[false, false, false], [false, false, false], [false, false, false]],
-  startCells: [[false, false, false], [false, false, false], [false, false, false]],
-  flipPattern: "plus",
-  moveCount: 0
-};
-const validate$1 = function validate(rubric, state) {
-  const empty = _.all(state.cells, (row, y) => {
-    return _.all(row, (cell, x) => {
-      return cell === rubric.startCells[y][x];
-    });
-  });
-  if (empty) {
-    return {
-      type: "invalid",
-      message: i18n._("Click on the tiles to change the lights.")
-    };
-  }
-  const correct = _.all(state.cells, row => {
-    return _.all(row, cell => {
-      return cell;
-    });
-  });
-  if (correct) {
-    return {
-      type: "points",
-      earned: 1,
-      total: 1,
-      message: null
-    };
-  }
-  if (rubric.gradeIncompleteAsWrong) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-  return {
-    type: "invalid",
-    message: i18n._("You must turn on all of the lights to continue.")
-  };
-};
-
-// The function run on the editor props to create the widget props
-const transformProps = function transformProps(editorProps) {
-  return {
-    cells: editorProps.startCells,
-    startCells: editorProps.startCells,
-    flipPattern: editorProps.flipPattern
-  };
-};
-var LightsPuzzle$1 = {
-  name: "lights-puzzle",
-  displayName: "Lights puzzle (deprecated)",
-  hidden: true,
-  widget: LightsPuzzle,
-  transform: transformProps
-};
-
 let Layout = /*#__PURE__*/function (Layout) {
   Layout["HORIZONTAL"] = "horizontal";
   Layout["VERTICAL"] = "vertical";
@@ -34105,7 +33851,7 @@ var Matcher$1 = {
 // Type imports
 
 const {
-  assert: assert$3
+  assert: assert$2
 } = InteractiveUtil;
 const {
   stringArrayOfSize
@@ -34139,12 +33885,12 @@ const getDefaultPath$1 = function getDefaultPath() {
 };
 const getRowFromPath$1 = function getRowFromPath(path) {
   // 'path' should be a (row, column) pair
-  assert$3(_.isArray(path) && path.length === 2);
+  assert$2(_.isArray(path) && path.length === 2);
   return +path[0];
 };
 const getColumnFromPath$1 = function getColumnFromPath(path) {
   // 'path' should be a (row, column) pair
-  assert$3(_.isArray(path) && path.length === 2);
+  assert$2(_.isArray(path) && path.length === 2);
   return +path[1];
 };
 const getRefForPath$1 = function getRefForPath(path) {
@@ -34541,7 +34287,7 @@ _.extend(Matrix, {
     };
   }
 });
-const propTransform$2 = editorProps => {
+const propTransform$1 = editorProps => {
   // Remove answers before passing to widget
   const blankAnswers = _(editorProps.matrixBoardSize[0]).times(function () {
     return stringArrayOfSize(editorProps.matrixBoardSize[1]);
@@ -34566,7 +34312,7 @@ var Matrix$1 = {
   name: "matrix",
   displayName: "Matrix",
   widget: Matrix,
-  transform: propTransform$2,
+  transform: propTransform$1,
   staticTransform: staticTransform$2,
   isLintable: true
 };
@@ -35636,11 +35382,11 @@ var Molecule$1 = {
 };
 
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$1 = Graphie.MovablePoint;
+const MovablePoint = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
-const Line$1 = Graphie.Line;
+const Line = Graphie.Line;
 const {
-  assert: assert$2
+  assert: assert$1
 } = InteractiveUtil;
 const bound = (x, gt, lt) => Math.min(Math.max(x, gt), lt);
 const EN_DASH = "\u2013";
@@ -35898,7 +35644,7 @@ class NumberLine extends React.Component {
       const snapX = props.tickStep / props.snapDivisions;
       let x = bound(numLinePosition, left, right);
       x = left + number.roundTo(x - left, snapX);
-      assert$2(_.isFinite(x));
+      assert$1(_.isFinite(x));
       return x;
     };
     // This function is intended to be used by the client code
@@ -35936,7 +35682,7 @@ class NumberLine extends React.Component {
         stroke: KhanColors.INTERACTIVE,
         "fill-opacity": isOpen ? 0 : 1
       } : {};
-      return /*#__PURE__*/React.createElement(MovablePoint$1
+      return /*#__PURE__*/React.createElement(MovablePoint
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "numberLinePoint",
@@ -35995,7 +35741,7 @@ class NumberLine extends React.Component {
           strokeWidth: 3.5
         };
         const isGreater = ["ge", "gt"].includes(props.rel);
-        return /*#__PURE__*/React.createElement(Line$1
+        return /*#__PURE__*/React.createElement(Line
         // We shift the line to either side of the dot so they don't
         // intersect
         , {
@@ -39881,803 +39627,6 @@ var PythonProgram$1 = {
   widget: PythonProgram
 };
 
-class Separator extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.arrowLength = 100;
-    this.drawArrow = () => {
-      // eslint-disable-next-line react/no-string-refs
-      const canvas = this.refs["arrowCanvas" + this.props.index];
-      // @ts-expect-error - TS2339 - Property 'getContext' does not exist on type 'ReactInstance'.
-      const ctx = canvas.getContext("2d");
-      // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      const path = new Path2D();
-      ctx.strokeStyle = "rgb(0,0,0)";
-      ctx.lineWidth = 1.2;
-      ctx.lineCap = "round";
-      const offset = 5;
-      // @ts-expect-error - TS2339 - Property 'height' does not exist on type 'ReactInstance'.
-      path.moveTo(offset, canvas.height / 2);
-      // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
-      path.lineTo(canvas.width - offset, canvas.height / 2);
-      // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
-      path.moveTo(canvas.width - 2 * offset, canvas.height / 2 - offset);
-      // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
-      path.lineTo(canvas.width - offset, canvas.height / 2);
-      // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
-      path.moveTo(canvas.width - 2 * offset, canvas.height / 2 + offset);
-      // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
-      path.lineTo(canvas.width - offset, canvas.height / 2);
-      ctx.stroke(path);
-    };
-  }
-  componentDidMount() {
-    this.drawArrow();
-  }
-  componentDidUpdate() {
-    this.drawArrow();
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "arrow-container"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "above-text"
-    }, this.props.data.topText), /*#__PURE__*/React.createElement("canvas", {
-      height: "30",
-      id: "arrowCanvas" + this.props.index,
-      ref: "arrowCanvas" + this.props.index,
-      width: this.arrowLength
-    }, i18n._("Reaction arrow pointing to the right.")), /*#__PURE__*/React.createElement("div", {
-      className: "below-text"
-    }, this.props.data.bottomText));
-  }
-}
-class ReactionDiagramWidget extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.simpleValidate = () => {
-      return {
-        type: "points",
-        earned: 0,
-        total: 0,
-        message: null
-      };
-    };
-    this.getUserInput = () => {
-      return [];
-    };
-    this.validate = (state, rubric) => {
-      // TODO(colin): this appears to be part of the perseus interface.
-      // Figure out if there's a more appropriate value to return.
-      return {
-        type: "points",
-        earned: 0,
-        total: 0,
-        message: null
-      };
-    };
-    this.focus = () => {
-      return true;
-    };
-  }
-  render() {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-string-refs
-      React.createElement("div", {
-        className: "reaction",
-        ref: "reaction"
-      }, this.props.smiles.map((s, i) => {
-        const id = this.props.widgetId + "-" + i;
-        return /*#__PURE__*/React.createElement("div", {
-          key: id,
-          className: "molecule-container"
-        }, /*#__PURE__*/React.createElement(Molecule, {
-          widgetId: id,
-          rotationAngle: this.props.rotationAngle[i],
-          smiles: s
-        }), i === this.props.smiles.length - 1 ? null : /*#__PURE__*/React.createElement(Separator, {
-          data: this.props.separators[i],
-          index: i
-        }));
-      }))
-    );
-  }
-}
-ReactionDiagramWidget.defaultProps = {
-  smiles: [],
-  rotationAngle: [],
-  separators: []
-};
-var ReactionDiagram = {
-  name: "reaction-diagram",
-  displayName: "Chemical reaction diagram (deprecated)",
-  hidden: true,
-  widget: ReactionDiagramWidget
-};
-
-class Sequence extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.state = {
-      visible: 1
-    };
-    this.change = (...args) => {
-      return change.apply(this, args);
-    };
-    this._handleInteraction = groupWidgetId => {
-      const step = parseInt(groupWidgetId.split(" ")[1]);
-      if (step === this.state.visible - 1) {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getWidgetInstance' does not exist on type 'ReactInstance'.
-        const widget = this.refs.renderer.getWidgetInstance("group " + step);
-        widget.showRationalesForCurrentlySelectedChoices();
-        const score = widget.simpleValidate();
-        if (score.type === "points" && score.total === score.earned) {
-          this.setState({
-            visible: this.state.visible + 1
-          });
-          this.props.trackInteraction({
-            visible: this.state.visible + 1
-          });
-        }
-      }
-    };
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    return nextProps !== this.props || nextState !== this.state;
-  }
-  render() {
-    const icon = /*#__PURE__*/React.createElement(InlineIcon, _extends({}, iconOk, {
-      style: {
-        color: "green"
-      }
-    }));
-    const content = _.chain(this.props.json).first(this.state.visible).map((step, i) => `[[${Util.snowman} group ${i}]]`).join("\n\n").value();
-    const widgets = {};
-    _.each(this.props.json, (step, i) => {
-      const widgetId = `group ${i}`;
-      widgets[widgetId] = {
-        type: "group",
-        graded: true,
-        version: {
-          major: 0,
-          minor: 0
-        },
-        options: _.extend({}, step, {
-          icon: i < this.state.visible - 1 ? icon : null
-        })
-      };
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-sequence"
-    }, /*#__PURE__*/React.createElement(Renderer
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "renderer",
-      content: content,
-      widgets: widgets,
-      onInteractWithWidget: this._handleInteraction,
-      apiOptions: this.props.apiOptions,
-      linterContext: this.props.linterContext
-    }));
-  }
-}
-Sequence.defaultProps = {
-  json: [{
-    content: "",
-    widgets: {},
-    images: {}
-  }],
-  linterContext: linterContextDefault
-};
-const traverseChildWidgets = function traverseChildWidgets(props, traverseRenderer) {
-  let oldJson = props.json;
-  if (!_.isArray(oldJson)) {
-    oldJson = [oldJson];
-  }
-  const json = _.map(oldJson, rendererOptions => {
-    return traverseRenderer(rendererOptions);
-  });
-  return _.extend({}, props, {
-    json: json
-  });
-};
-var Sequence$1 = {
-  name: "sequence",
-  displayName: "Graded sequence (deprecated)",
-  widget: Sequence,
-  traverseChildWidgets: traverseChildWidgets,
-  tracking: "all",
-  hidden: true,
-  isLintable: true
-};
-
-const {
-  assert: assert$1
-} = InteractiveUtil;
-// @ts-expect-error - TS2339 - Property 'Path' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Arc' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Circle' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Label' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Line' does not exist on type 'typeof Graphie'. | TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'. | TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
-const {
-  Path,
-  Arc,
-  Circle,
-  Label,
-  Line,
-  MovablePoint,
-  MovableLine
-} = Graphie;
-const defaultBoxSize = 400;
-const maxSampleSize = 1000;
-class Histogram extends React.Component {
-  constructor(...args) {
-    super(...args);
-    /* Renders the vertical line that users can drag across the histogram. */
-    this._renderThresholdLine = () => {
-      // Recall the the y-range goes from [-1, yMax] to allow for ticks on
-      // the x-axis.
-      // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-      const yRange = [0, this._range()[1][1]];
-      const coords = _.map(yRange, y => [this.state.threshold, y]);
-
-      // Returns an inivisble, placeholder coord that anchors the line
-      const invisiblePointForCoord = (coord, i) => {
-        return /*#__PURE__*/React.createElement(MovablePoint, {
-          key: i,
-          static: true,
-          coord: coord,
-          normalStyle: {
-            stroke: "none",
-            fill: "none"
-          }
-        });
-      };
-      return /*#__PURE__*/React.createElement(MovableLine, {
-        onMove: this.handleMouseInteraction
-      }, _.map(coords, invisiblePointForCoord));
-    };
-    /* Renders the shaded circle in the top right. */
-    this._renderCircle = () => {
-      const data = this.props.data;
-
-      // Get proportion of results below threshold
-      const total = _.reduce(data, (sum, next) => {
-        return sum + next;
-      }, 0);
-      const numBelow = _.reduce(data, (sum, next, i) => {
-        if (this.state.threshold != null && i <= this.state.threshold) {
-          return sum + next;
-        }
-        return sum;
-      }, 0);
-      const proportionBelow = numBelow / total;
-
-      // This is a hack around the arc taking angles modulo 360.
-      // TODO(charlie): Find a better way around this.
-      const epsilon = 1e-5;
-      const radius = 20;
-      const center = [this.props.box[0] - 1.5 * radius, 1.5 * radius];
-
-      // Plot little circle
-      const plotBelowCircle = () => {
-        const options = {
-          key: "below",
-          center: center,
-          radius: radius,
-          startAngle: 0,
-          endAngle: proportionBelow < 1 ? 360 * proportionBelow : 360 - epsilon,
-          sector: proportionBelow !== 1,
-          unscaled: true,
-          style: {
-            fill: KhanColors.LIGHT_RED,
-            stroke: KhanColors.RED
-          }
-        };
-        return /*#__PURE__*/React.createElement(Arc, options);
-      };
-      const plotAboveCircle = () => {
-        const options = {
-          key: "above",
-          center: center,
-          radius: radius,
-          startAngle: proportionBelow > 0 ? 360 * proportionBelow : epsilon,
-          endAngle: 360,
-          sector: proportionBelow !== 0,
-          unscaled: true,
-          style: {
-            fill: KhanColors.LIGHT_BLUE,
-            stroke: KhanColors.BLUE
-          }
-        };
-        return /*#__PURE__*/React.createElement(Arc, options);
-      };
-
-      // Plot the label below the circle
-      // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-      const xRange = this._range()[0];
-      const formattedThreshold = Math.min(Math.max(this.state.threshold, xRange[0]), xRange[1]).toFixed(2);
-      const plotLabel = () => {
-        const options = {
-          key: "label",
-          coord: [center[0], center[1] + 1.5 * radius],
-          text: numBelow + " of " + total + " results below " + formattedThreshold + "%",
-          direction: "center",
-          tex: false,
-          unscaled: true,
-          style: {
-            fontSize: "12px"
-          }
-        };
-        return /*#__PURE__*/React.createElement(Label, options);
-      };
-      return [proportionBelow > 0 && plotBelowCircle(), proportionBelow < 1 && plotAboveCircle(), plotLabel()];
-    };
-    /* Renders the actual bars of the histogram. */
-    this._renderData = () => {
-      const data = this.props.data;
-      // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-      this._range();
-
-      // Plot bars
-      const barWidth = 1;
-      const pathForData = (count, i) => {
-        // Avoid plotting bars of height 0, else you get a thick blue line
-        // over the x-axis. We don't filter these out of the data passed in
-        // to this function, however, to preserve absolute indices.
-        if (!count) {
-          return;
-        }
-        const isBelow = this.state.threshold != null && i <= this.state.threshold;
-        const style = {
-          fill: isBelow ? KhanColors.LIGHT_RED : KhanColors.LIGHT_BLUE,
-          stroke: isBelow ? KhanColors.RED : KhanColors.BLUE
-        };
-        const coords = [[i, 0], [i, count], [i + barWidth, count], [i + barWidth, 0]];
-        return /*#__PURE__*/React.createElement(Path, {
-          key: i,
-          coords: coords,
-          style: style
-        });
-      };
-      return _.map(data, pathForData);
-    };
-    this._setupGraphie = (graphie, options) => {
-      const data = options.data;
-      const range = options.range;
-      const scale = options.scale;
-
-      /* Plot the bars that run parallel to the x-axis. */
-      const xWidth = range[0][1] - range[0][0];
-      const yWidth = range[1][1] - 0;
-      const maxYAxisEntities = 20;
-      const ySkip = Math.ceil(yWidth / maxYAxisEntities);
-      _.each(_.range(0, range[1][1], ySkip), y => {
-        // If there's no data, we don't label the axes
-        if (data) {
-          graphie.label([range[0][0], y], KhanMath.roundToApprox(y, 2), "left", /* isTeX */true /* for the \approx symbol */);
-        }
-
-        graphie.line([range[0][0], y], [range[0][1], y], {
-          stroke: "#000",
-          strokeWidth: 1,
-          opacity: 0.3
-        });
-      });
-
-      // If there's no data, we don't label the x-axis at all
-      if (data) {
-        // Plot the labels below the bars
-        const maxXAxisEntities = 15;
-        const xSkip = Math.ceil(xWidth / maxXAxisEntities);
-        _.each(_.range(range[0][0], range[0][1], xSkip), x => {
-          graphie.label([x, 0], number.round(x, 2), "below", true);
-          const tickHeight = 8;
-          graphie.line([x, 0], [x, -tickHeight / scale[1]], {
-            stroke: "#000",
-            strokeWidth: 1
-          });
-        });
-      }
-
-      // Add y axis (x axis is added later to overlap the bars)
-      const axisStyle = {
-        stroke: "#000",
-        strokeWidth: 2,
-        opacity: 1.0
-      };
-      const origin = [range[0][0], 0];
-      const topLeft = [range[0][0], range[1][1]];
-      graphie.line(origin, topLeft, axisStyle);
-
-      // Add axis labels
-      const xMid = range[0][0] + xWidth / 2;
-      const xOffset = data ? 25 : 0;
-      graphie.label([xMid, -xOffset / scale[1]], options.xAxisLabel, "below", false).css("font-weight", "bold");
-      const yMid = 0 + yWidth / 2;
-      const yOffset = data ? 55 : 28;
-      graphie.label([range[0][0] - yOffset / scale[0], yMid], options.yAxisLabel, "center", false).css("font-weight", "bold").css("-webkit-transform", "rotate(-90deg)");
-    };
-    this.handleMouseInteraction = point => {
-      this.setState({
-        threshold: point[0]
-      });
-    };
-    /* Convenience functions that help calculate props based on other props. */
-    this._range = props => {
-      const defaultRange = [[0, 100], [-1, 10]];
-      props = props || this.props;
-      return props.data ? this._getRangeForData(props.data) : defaultRange;
-    };
-    this._getRangeForData = data => {
-      // Find first/last non-zero entry and add some padding
-      const padding = 10;
-      const firstIndex = _.indexOf(data, _.find(data, n => n > 0));
-      const xMin = Math.max(0, firstIndex - padding);
-      const lastIndex = _.lastIndexOf(data, _.last(_.filter(data, n => n > 0)));
-      const xMax = Math.min(100 + 1, lastIndex + 1 + padding);
-
-      // The y-axis is bounded above by largest value, and below by 0.
-      // However, the 'range' of the y-axis goes as low as -1 to allow
-      // Graphie to draw ticks on the x-Axis that extend vertically below
-      // y = 0.
-      const yMin = -1;
-      const yMax = _.max(data);
-      return [[xMin, xMax], [yMin, yMax]];
-    };
-    this._getInitialThreshold = range => {
-      // We pick a pretty-looking threshold, 1/3 of the way along the axis
-      const xRange = range[0];
-      return xRange[0] + (xRange[1] - xRange[0]) / 3;
-    };
-    this.state = {
-      // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-      threshold: this._getInitialThreshold(this._range())
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Reset the threshold if the range has changed
-    // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-    const oldRange = this._range();
-    const nextRange = this._range(nextProps);
-    if (!Util.deepEq(oldRange, nextRange)) {
-      this.setState({
-        threshold: this._getInitialThreshold(nextRange)
-      });
-    }
-  }
-  render() {
-    const data = this.props.data;
-    // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-    const range = this._range();
-    const options = {
-      xAxisLabel: this.props.xAxisLabel,
-      yAxisLabel: this.props.yAxisLabel,
-      box: this.props.box,
-      range: range,
-      data: data,
-      scale: [Util.scaleFromExtent(range[0], this.props.box[0]), Util.scaleFromExtent(range[1], this.props.box[1])]
-    };
-    const axisStyle = {
-      stroke: "#000",
-      strokeWidth: 1,
-      opacity: 1.0
-    };
-    const origin = [range[0][0], 0];
-    const bottomRight = [range[0][1], 0];
-    return /*#__PURE__*/React.createElement(Graphie, {
-      box: options.box,
-      range: options.range,
-      options: options,
-      setup: this._setupGraphie,
-      onMouseMove: this.handleMouseInteraction,
-      onMouseDown: this.handleMouseInteraction,
-      setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
-    }, /*#__PURE__*/React.createElement(Line, {
-      start: origin,
-      end: bottomRight,
-      style: axisStyle
-    }), data && this._renderData(), data && this._renderCircle(), data && this._renderThresholdLine());
-  }
-}
-Histogram.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.number),
-  xAxisLabel: PropTypes.string,
-  yAxisLabel: PropTypes.string,
-  box: PropTypes.arrayOf(PropTypes.number)
-};
-Histogram.defaultProps = {
-  data: null,
-  xAxisLabel: "Proportion (%)",
-  yAxisLabel: "Number of times seen",
-  box: [defaultBoxSize, defaultBoxSize]
-};
-class Simulator extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    // @ts-expect-error - TS2564 - Property 'generateNumber' has no initializer and is not definitely assigned in the constructor.
-    this.generateNumber = void 0;
-    this.state = {
-      invalidInput: false
-    };
-    this.calculateDisplayProportion = () => {
-      const userProportion = this.props.userProportion;
-
-      // If we want to display as a percentage, multiply proportion by 100.0.
-      if (this.props.proportionOrPercentage === "percentage") {
-        return Math.round(100 * userProportion);
-      }
-      return userProportion;
-    };
-    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.checkProportionValidity = value => {
-      return value >= 0.0 && this.props.proportionOrPercentage === "proportion" && value <= 1.0 || this.props.proportionOrPercentage === "percentage" && value <= 100.0;
-    };
-    this.handleUserProportionChange = (value, cb) => {
-      let userProportion;
-
-      // If "percentage" mode is enabled, user will have entered value as
-      // a percentage. However, we always store as a proportion, so we cast.
-      if (this.props.proportionOrPercentage === "percentage") {
-        userProportion = value / 100.0;
-      } else {
-        userProportion = value;
-      }
-
-      // If they entered a number, we may need to cap it
-      if (userProportion != null) {
-        userProportion = Math.min(1.0, Math.max(0.0, userProportion));
-      }
-      this.props.onChange({
-        userProportion: userProportion
-      }, cb);
-    };
-    // @ts-expect-error - TS2322 - Type '(sampleSize: any, cb: any) => void' is not assignable to type '(number: any) => void'.
-    this.handleSampleSizeChange = (sampleSize, cb) => {
-      if (sampleSize != null) {
-        sampleSize = Math.min(maxSampleSize, Math.max(0, Math.floor(sampleSize)));
-      }
-      this.props.onChange({
-        sampleSize: sampleSize
-      }, cb);
-    };
-    this.handleRunSimulation = () => {
-      // If they haven't filled out a parameter field, highlight it.
-      if (this.props.numTrials == null || this.props.userProportion == null || this.props.sampleSize == null) {
-        this.setState({
-          invalidInput: true
-        });
-        return;
-      }
-      this.setState({
-        invalidInput: false
-      });
-      this.props.onChange({
-        // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-        data: this.generateData()
-      });
-      this.props.trackInteraction();
-    };
-    this.generateData = props => {
-      props = props || this.props;
-      const getSampleDistribution = (sampleSize, numTrials, proportion) => {
-        const draw = () => {
-          return this.generateNumber() < proportion;
-        };
-        const sampleDistribution = _.times(100 + 1, () => 0);
-        _.times(numTrials, () => {
-          const results = _.times(sampleSize, draw);
-          const count = _.filter(results, _.identity).length;
-          const normalizedCount = Math.floor(100 * count / sampleSize);
-          sampleDistribution[normalizedCount]++;
-        });
-        return sampleDistribution;
-      };
-      return getSampleDistribution(props.sampleSize, props.numTrials, props.userProportion);
-    };
-    /* InputPath API */
-    this.getInputPaths = () => {
-      return [["userProportion"], ["sampleSize"]];
-    };
-    this.focus = () => {
-      const path = _.head(this.getInputPaths());
-      this.focusInputPath(path);
-      return true;
-    };
-    this.focusInputPath = path => {
-      assert$1(path.length > 0);
-      const inputID = _.head(path);
-      // eslint-disable-next-line react/no-string-refs
-      const inputComponent = this.refs[inputID];
-      // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-      inputComponent.focus();
-    };
-    this.blurInputPath = path => {
-      assert$1(path.length > 0);
-      const inputID = _.head(path);
-      // eslint-disable-next-line react/no-string-refs
-      const inputComponent = this.refs[inputID];
-      // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
-      inputComponent.blur();
-    };
-    this.getDOMNodeForPath = path => {
-      assert$1(path.length > 0);
-      const inputID = _.head(path);
-      // eslint-disable-next-line react/no-string-refs
-      return ReactDOM__default.findDOMNode(this.refs[inputID]);
-    };
-    this.getGrammarTypeForPath = path => {
-      assert$1(path.length > 0);
-      return "number";
-    };
-    this.setInputValue = (path, newValue, cb) => {
-      assert$1(path.length > 0);
-      const inputID = _.head(path);
-      const capitalizedID = inputID.charAt(0).toUpperCase() + inputID.slice(1);
-      const functionName = "handle" + capitalizedID + "Change";
-      this[functionName](newValue, cb);
-    };
-    this.getUserInput = () => {
-      return null;
-    };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Simulator'.
-      return Simulator.validate(this.getUserInput(), rubric);
-    };
-  }
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount() {
-    if (this.props.randomSeed != null) {
-      this.generateNumber = Util.seededRNG(this.props.randomSeed);
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.randomSeed !== this.props.randomSeed) {
-      this.generateNumber = Util.seededRNG(nextProps.randomSeed);
-    }
-  }
-  render() {
-    const inputStyle = {
-      marginLeft: "5px"
-    };
-    const highlight = "0px 0px 0px 2px rgba(255, 165, 0, 1)";
-    const highlightStyle = _.extend({}, inputStyle, {
-      boxShadow: highlight,
-      transition: "all 0.15s"
-    });
-    const unhighlightStyle = _.extend({}, inputStyle, {
-      transition: "all 0.15s"
-    });
-    const style = this.state.invalidInput ? highlightStyle : unhighlightStyle;
-    const proportionInput = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberInput
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "userProportion",
-      style: style,
-      value: this.calculateDisplayProportion(),
-      checkValidity: this.checkProportionValidity,
-      disabled: this.props.apiOptions.readOnly,
-      onChange: this.handleUserProportionChange,
-      onFocus: () => this.props.onFocus(["userProportion"]),
-      onBlur: () => this.props.onBlur(["userProportion"])
-    }), /*#__PURE__*/React.createElement(InfoTip, null, /*#__PURE__*/React.createElement("p", null, i18n._("This controls the proportion or percentage that will be used in your simulation."))));
-    const sampleSizeInput = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberInput
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "sampleSize",
-      style: style,
-      value: this.props.sampleSize,
-      checkValidity: val => val >= 0,
-      disabled: this.props.apiOptions.readOnly,
-      onChange: this.handleSampleSizeChange,
-      onFocus: () => this.props.onFocus(["sampleSize"]),
-      onBlur: () => this.props.onBlur(["sampleSize"])
-    }), /*#__PURE__*/React.createElement(InfoTip, null, /*#__PURE__*/React.createElement("p", null, i18n._("This controls the sample size that will be used in your simulation. For example, if you set this to 100, then for each trial, responses from 100 participants will be simulated."))));
-    const numTrialsDisplay = /*#__PURE__*/React.createElement("div", {
-      style: {
-        textAlign: "right"
-      }
-    }, /*#__PURE__*/React.createElement("b", null, this.props.numTrials), /*#__PURE__*/React.createElement(InfoTip, null, /*#__PURE__*/React.createElement("p", null, i18n._("This is the number of trials used in the simulation. For example, if set to 50, then the survey will be conducted 50 times."))));
-
-    // Generates a table from a set of titles and values.
-    const generateTable = contents => {
-      const header = /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, i18n._("Parameter")), /*#__PURE__*/React.createElement("th", null, i18n._("Value"))));
-      const body = /*#__PURE__*/React.createElement("tbody", null, _.map(contents, (row, i) => {
-        return /*#__PURE__*/React.createElement("tr", {
-          key: i
-        }, /*#__PURE__*/React.createElement("td", null, row.title), /*#__PURE__*/React.createElement("td", null, row.value));
-      }));
-      return /*#__PURE__*/React.createElement("table", null, header, body);
-    };
-
-    // Contents for the table to-be generated
-    const contents = [{
-      title: this.props.proportionLabel + ":",
-      value: proportionInput
-    }, {
-      title: i18n._("Sample size:"),
-      value: sampleSizeInput
-    }, {
-      title: i18n._("Number of trials:"),
-      value: numTrialsDisplay
-    }];
-
-    // The 'Run Simulation' button
-    const buttonStyle = {
-      margin: "20px 0"
-    };
-    const startButton = /*#__PURE__*/React.createElement("button", {
-      className: "simple-button",
-      style: buttonStyle,
-      disabled: this.props.apiOptions.readOnly,
-      onClick: this.handleRunSimulation
-    }, i18n._("Run simulation"));
-
-    // When we plot data, ticks on the x-axis require some vertical padding
-    const histogramStyle = {
-      paddingBottom: this.props.data ? 40 : 0
-    };
-    const histogram = /*#__PURE__*/React.createElement("div", {
-      style: histogramStyle
-    }, /*#__PURE__*/React.createElement(Histogram, {
-      data: this.props.data,
-      xAxisLabel: this.props.xAxisLabel,
-      yAxisLabel: this.props.yAxisLabel,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
-    }));
-    return /*#__PURE__*/React.createElement("div", null, generateTable(contents), startButton, histogram);
-  }
-}
-Simulator.propTypes = _extends({}, propTypes, {
-  apiOptions: ApiOptions.propTypes,
-  data: PropTypes.arrayOf(PropTypes.number),
-  numTrials: PropTypes.number,
-  proportionLabel: PropTypes.string,
-  proportionOrPercentage: PropTypes.string,
-  randomSeed: PropTypes.number,
-  sampleSize: PropTypes.number,
-  trackInteraction: PropTypes.func.isRequired,
-  userProportion: PropTypes.number,
-  xAxisLabel: PropTypes.string,
-  yAxisLabel: PropTypes.string
-});
-Simulator.defaultProps = {
-  data: null,
-  userProportion: null,
-  sampleSize: null,
-  numTrials: null,
-  randomSeed: 0,
-  xAxisLabel: "Proportion (%)",
-  yAxisLabel: "Number of times seen",
-  proportionLabel: "Underlying proportion",
-  proportionOrPercentage: "proportion",
-  apiOptions: ApiOptions.defaults
-};
-_.extend(Simulator, {
-  validate: function (state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
-});
-const propTransform$1 = editorProps => {
-  const widgetProps = _.clone(editorProps);
-  widgetProps.randomSeed = editorProps.problemNum;
-  return widgetProps;
-};
-var Simulator$1 = {
-  name: "simulator",
-  displayName: "Simulator (deprecated)",
-  widget: Simulator,
-  transform: propTransform$1,
-  hidden: true
-};
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   shuffle
@@ -42178,7 +41127,7 @@ var Video$1 = {
 };
 
 /* eslint-disable import/no-named-as-default */
-var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, LightsPuzzle$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, PythonProgram$1, ReactionDiagram, Sequence$1, Simulator$1, Sorter$1, Table$1, Unit, Video$1, DeprecatedStandin$1];
+var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, PythonProgram$1, Sorter$1, Table$1, Unit, Video$1, DeprecatedStandin$1];
 
 /**
  * This should be called by all clients, specifying whether extra widgets are
@@ -42192,7 +41141,7 @@ var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Defin
 const init = function init(options) {
   registerWidgets(basicWidgets);
   registerWidgets(extraWidgets);
-  replaceWidget("transformer", "deprecated-standin");
+  replaceDeprecatedWidgets();
 
   // Pass skipMathJax: true if MathJax is already loaded and configured.
   const skipMathJax = options.skipMathJax;
@@ -42218,7 +41167,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 = "19.8.0";
+const libVersion = "20.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42780,17 +41729,13 @@ class ServerItemRenderer extends React.Component {
     this.blurTimeoutID = void 0;
     this._handleFocusChange = (newFocus, oldFocus) => {
       if (newFocus != null) {
-        var _this$props$apiOption;
         this._setCurrentFocus(newFocus);
-
-        // Call the interactionCallback, if it exists, with the current user input data
-        (_this$props$apiOption = this.props.apiOptions) == null || _this$props$apiOption.interactionCallback == null || _this$props$apiOption.interactionCallback(this.questionRenderer.getUserInputForWidgets());
       } else {
         this._onRendererBlur(oldFocus);
       }
     };
     this.handleInteractWithWidget = widgetId => {
-      var _this$props$apiOption2;
+      var _this$props$apiOption;
       const withRemoved = _.difference(this.state.questionHighlightedWidgets, [widgetId]);
       this.setState({
         questionCompleted: false,
@@ -42798,7 +41743,7 @@ class ServerItemRenderer extends React.Component {
       });
 
       // Call the interactionCallback, if it exists, with the current user input data
-      (_this$props$apiOption2 = this.props.apiOptions) == null || _this$props$apiOption2.interactionCallback == null || _this$props$apiOption2.interactionCallback(this.questionRenderer.getUserInputForWidgets());
+      (_this$props$apiOption = this.props.apiOptions) == null || _this$props$apiOption.interactionCallback == null || _this$props$apiOption.interactionCallback(this.questionRenderer.getUserInputForWidgets());
     };
     // This must be pre-bound otherwise SvgImage's shouldComponentUpdate
     // won't behave correctly and we'll get an infinite loop.
@@ -43341,14 +42286,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -43397,7 +42334,7 @@ const deepCallbackFor = function deepCallbackFor(contentCallback, widgetCallback
     // on getDefaultProps, this will become easier.
     let newWidgetInfo;
     if (latestVersion && ((_upgradedWidgetInfo$v = upgradedWidgetInfo.version) == null ? void 0 : _upgradedWidgetInfo$v.major) === latestVersion.major) {
-      newWidgetInfo = traverseChildWidgets$4(upgradedWidgetInfo, rendererOptions => {
+      newWidgetInfo = traverseChildWidgets$3(upgradedWidgetInfo, rendererOptions => {
         return traverseRenderer$1(rendererOptions, contentCallback,
         // so that we traverse grandchildren, too:
         deepCallback, optionsCallback);
@@ -44479,7 +43416,7 @@ function violatingWidgets(itemData) {
  */
 const registerAllWidgetsForTesting = () => {
   registerWidgets(allWidgets);
-  replaceWidget("transformer", "deprecated-standin");
+  replaceDeprecatedWidgets();
 };
 
 /**