@khanacademy/perseus 19.9.0 → 20.0.1

package/dist/index.js

@@ -13703,7 +13703,7 @@ var GraphieClasses = {
  * take appropriate action in onMoveStart, onMove, onMoveEnd
  */
 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()`,
@@ -13871,7 +13871,7 @@ class Movable {
    * Simulates a mouse grab event on the movable object.
    */
   grab(coord) {
-    assert$8(kmath.point.is(coord));
+    assert$7(kmath.point.is(coord));
     const graphie = this.graphie;
     const state = this.state;
     state.isHovering = true;
@@ -14357,7 +14357,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
@@ -14381,9 +14381,9 @@ const DEFAULT_STATE$2 = {
   visibleShape: null,
   mouseTarget: null
 };
-const MovableLine$4 = function (graphie, movable, options) {
-  assert$7(graphie != null);
-  assert$7(options != null);
+const MovableLine$3 = function (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.
   ___default["default"].extend(this, {
@@ -14399,10 +14399,10 @@ const MovableLine$4 = function (graphie, movable, options) {
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   this.modify(___default["default"].extend({}, DEFAULT_STATE$2, options));
 };
-___default["default"].extend(MovableLine$4, MovableLineOptions);
-InteractiveUtil.createGettersFor(MovableLine$4, ___default["default"].extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
-InteractiveUtil.addMovableHelperMethodsTo(MovableLine$4);
-___default["default"].extend(MovableLine$4.prototype, {
+___default["default"].extend(MovableLine$3, MovableLineOptions);
+InteractiveUtil.createGettersFor(MovableLine$3, ___default["default"].extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
+InteractiveUtil.addMovableHelperMethodsTo(MovableLine$3);
+___default["default"].extend(MovableLine$3.prototype, {
   cloneState: function () {
     return ___default["default"].extend(this.movable.cloneState(), {
       coords: this.coords()
@@ -14948,7 +14948,7 @@ var MovablePointOptions = {
   }
 };
 
-const assert$6 = InteractiveUtil.assert;
+const assert$5 = InteractiveUtil.assert;
 const normalizeOptions$1 = InteractiveUtil.normalizeOptions;
 const {
   processMath
@@ -14983,7 +14983,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 {
   // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
 
   _listenerMap = {};
@@ -15030,7 +15030,7 @@ class MovablePoint$5 {
     const self = this;
     const graphie = self.graphie;
     const state = ___default["default"].extend(self.state, normalizeOptions$1(options));
-    assert$6(kmath.point.is(state.coord));
+    assert$5(kmath.point.is(state.coord));
 
     // Default things inside the state.normalStyle object, because
     // _.extend is not deep.
@@ -15330,12 +15330,12 @@ class MovablePoint$5 {
     return this.state.coord;
   }
   setCoord(coord) {
-    assert$6(kmath.point.is(coord, 2));
+    assert$5(kmath.point.is(coord, 2));
     this.state.coord = ___default["default"].clone(coord);
     this.draw();
   }
   setCoordConstrained(coord) {
-    assert$6(kmath.point.is(coord, 2));
+    assert$5(kmath.point.is(coord, 2));
     const result = this._applyConstraints(coord, this.coord());
     if (result !== false) {
       this.state.coord = ___default["default"].clone(result);
@@ -15843,7 +15843,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
@@ -15878,8 +15878,8 @@ const DEFAULT_STATE = {
   mouseTarget: null
 };
 const MovablePolygon = function (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.
   ___default["default"].extend(this, {
@@ -16111,15 +16111,15 @@ ___default["default"].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) {
@@ -16156,7 +16156,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$4 = GraphieClasses.createClass({
+const MovablePoint$3 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16214,8 +16214,8 @@ const MovablePoint$4 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-___default["default"].extend(MovablePoint$4, Interactive2.MovablePoint);
-const MovableLine$3 = GraphieClasses.createClass({
+___default["default"].extend(MovablePoint$3, Interactive2.MovablePoint);
+const MovableLine$2 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
   add: function (graphie) {
@@ -16243,8 +16243,8 @@ const MovableLine$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovableLine.constrain.snap()
-___default["default"].extend(MovableLine$3, Interactive2.MovableLine);
-const Label$2 = GraphieClasses.createSimpleClass((graphie, props) => {
+___default["default"].extend(MovableLine$2, Interactive2.MovableLine);
+const Label$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   let coord = props.coord;
   if (props.unscaled) {
     coord = graphie.unscalePoint(coord);
@@ -16263,7 +16263,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) {
@@ -16341,7 +16341,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) {
@@ -16363,7 +16363,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) {
@@ -16372,21 +16372,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,
@@ -16401,7 +16401,7 @@ const {
   nestedMap
 } = Util;
 const {
-  assert: assert$4
+  assert: assert$3
 } = InteractiveUtil;
 class Graphie extends React__namespace.Component {
   graphieDivRef = /*#__PURE__*/React__namespace.createRef();
@@ -16579,7 +16579,7 @@ class Graphie extends React__namespace.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;
@@ -18775,6 +18775,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) {
@@ -18789,8 +18796,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];
@@ -18801,6 +18808,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"
@@ -18986,7 +19000,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);
   }
@@ -19115,8 +19129,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,
@@ -19127,7 +19143,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,
@@ -21835,7 +21851,7 @@ const styles$z = aphrodite.StyleSheet.create({
     border: "solid 1px #999"
   }
 });
-const propTransform$4 = widgetOptions => {
+const propTransform$3 = widgetOptions => {
   const {
     simplify,
     size,
@@ -21855,7 +21871,7 @@ var InputNumber$1 = {
   defaultAlignment: "inline-block",
   hidden: true,
   widget: InputNumber,
-  transform: propTransform$4,
+  transform: propTransform$3,
   isLintable: true
 };
 
@@ -25485,7 +25501,7 @@ class GradedGroup extends React__namespace.Component {
     }));
   }
 }
-const traverseChildWidgets$3 = function (props, traverseRenderer) {
+const traverseChildWidgets$2 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
 const styles$m = aphrodite.StyleSheet.create({
@@ -25541,7 +25557,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",
@@ -25710,7 +25726,7 @@ class GradedGroupSet extends React__namespace.Component {
     })));
   }
 }
-const traverseChildWidgets$2 = function (props, traverseRenderer) {
+const traverseChildWidgets$1 = function (props, traverseRenderer) {
   // NOTE(jared): I have no idea how this works
   return {
     groups: props.gradedGroups.map(traverseRenderer)
@@ -25720,7 +25736,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",
@@ -26276,7 +26292,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",
@@ -26436,7 +26452,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,
@@ -26448,9 +26464,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]);
@@ -26494,7 +26510,7 @@ class FunctionGrapher extends React__namespace.Component {
   })();
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
+      return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -26606,7 +26622,7 @@ class FunctionGrapher extends React__namespace.Component {
     const dashed = {
       strokeDasharray: "- "
     };
-    return asymptote && /*#__PURE__*/React__namespace.createElement(MovableLine$2, {
+    return asymptote && /*#__PURE__*/React__namespace.createElement(MovableLine$1, {
       onMove: (newCoord, oldCoord) => {
         // Calculate and apply displacement
         const delta = kmath.vector.subtract(newCoord, oldCoord);
@@ -26631,7 +26647,7 @@ class FunctionGrapher extends React__namespace.Component {
       }],
       normalStyle: dashed,
       highlightStyle: dashed
-    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
+    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
       key: `asymptoteCoord-${i}`,
       coord: coord,
       static: true,
@@ -26804,20 +26820,20 @@ class Grapher extends React__namespace.Component {
     }
   };
   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;
   }
 }
-const propTransform$3 = editorProps => {
+const propTransform$2 = editorProps => {
   const widgetProps = {
     availableTypes: editorProps.availableTypes,
     graph: editorProps.graph
@@ -26837,7 +26853,7 @@ const propTransform$3 = editorProps => {
 // mode we set static=true for the graph's handles in FunctionGrapher.
 const staticTransform$3 = editorProps => {
   return {
-    ...propTransform$3(editorProps),
+    ...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.
@@ -26848,7 +26864,7 @@ var Grapher$1 = {
   name: "grapher",
   displayName: "Grapher",
   widget: Grapher,
-  transform: propTransform$3,
+  transform: propTransform$2,
   staticTransform: staticTransform$3
 };
 
@@ -26980,7 +26996,7 @@ class Group extends React__namespace.Component {
     }, this.props.icon));
   }
 }
-const traverseChildWidgets$1 = function (props, traverseRenderer) {
+const traverseChildWidgets = function (props, traverseRenderer) {
   return {
     ...props,
     ...traverseRenderer(props)
@@ -26990,7 +27006,7 @@ var Group$1 = {
   name: "group",
   displayName: "Group (SAT only)",
   widget: Group,
-  traverseChildWidgets: traverseChildWidgets$1,
+  traverseChildWidgets: traverseChildWidgets,
   hidden: false,
   isLintable: true
 };
@@ -27163,7 +27179,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,
@@ -27180,7 +27196,7 @@ class ImageWidget extends React__namespace.Component {
     alignment: DEFAULT_ALIGNMENT,
     title: "",
     range: [defaultRange, defaultRange],
-    box: [defaultBoxSize$1, defaultBoxSize$1],
+    box: [defaultBoxSize, defaultBoxSize],
     backgroundImage: defaultBackgroundImage$2,
     labels: [],
     alt: "",
@@ -27390,13 +27406,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'.
@@ -27588,11 +27604,11 @@ class Interaction extends React__namespace.Component {
       options: this.props.graph,
       setup: this._setupGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
-    }, this.props.graph.markings === "graph" && /*#__PURE__*/React__namespace.createElement(Label$1, {
+    }, this.props.graph.markings === "graph" && /*#__PURE__*/React__namespace.createElement(Label, {
       coord: [0, range[1][1]],
       text: labels[1],
       direction: "above"
-    }), this.props.graph.markings === "graph" && /*#__PURE__*/React__namespace.createElement(Label$1, {
+    }), this.props.graph.markings === "graph" && /*#__PURE__*/React__namespace.createElement(Label, {
       coord: [range[0][1], 0],
       text: labels[0],
       direction: "right"
@@ -27619,7 +27635,7 @@ class Interaction extends React__namespace.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__namespace.createElement(Line$2, {
+        return /*#__PURE__*/React__namespace.createElement(Line$1, {
           key: element.key,
           start: start,
           end: end,
@@ -27648,7 +27664,7 @@ class Interaction extends React__namespace.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 [
@@ -27670,7 +27686,7 @@ class Interaction extends React__namespace.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+        return /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27705,7 +27721,7 @@ class Interaction extends React__namespace.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 [
@@ -27733,7 +27749,7 @@ class Interaction extends React__namespace.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__namespace.createElement(MovableLine$1, {
+        return /*#__PURE__*/React__namespace.createElement(MovableLine, {
           key: element.key,
           constraints: constraints
           // eslint-disable-next-line react/jsx-no-bind
@@ -27746,14 +27762,14 @@ class Interaction extends React__namespace.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
           coord: end,
           static: true,
           normalStyle: {
@@ -27865,7 +27881,7 @@ class Interaction extends React__namespace.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__namespace.createElement(Label$1, {
+        return /*#__PURE__*/React__namespace.createElement(Label, {
           key: n + 1,
           coord: coord,
           text: unescapeMathMode(element.options.label),
@@ -33027,276 +33043,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__namespace.Component {
-  static propTypes = {
-    value: PropTypes__default["default"].bool.isRequired,
-    size: PropTypes__default["default"].number.isRequired
-  };
-  render() {
-    const color = this.props.value ? "#55dd55" : "#115511";
-    const style = ___default["default"].extend({}, BASE_TILE_STYLE, {
-      width: this.props.size,
-      height: this.props.size,
-      backgroundColor: color
-    });
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: style,
-      onClick: this._flip
-    });
-  }
-  _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
-    });
-  };
-}
-
-// A grid of glowy cells
-class TileGrid extends React__namespace.Component {
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: TABLE_STYLE,
-      className: "no-select"
-    }, this.props.cells && ___default["default"].map(this.props.cells, (row, y) => {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        key: y,
-        style: ROW_STYLE
-      }, ___default["default"].map(row, (cell, x) => {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          key: x,
-          style: CELL_STYLE
-        }, /*#__PURE__*/React__namespace.createElement(Tile, {
-          value: cell,
-          size: this.props.size,
-          onChange: ___default["default"].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 ___default["default"].map(oldCells, (row, y) => {
-    return ___default["default"].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__namespace.Component {
-  // @ts-expect-error - TS2564 - Property '_patternIndex' has no initializer and is not definitely assigned in the constructor.
-
-  static 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
-  };
-  getUserInput = () => {
-    return WidgetJsonifyDeprecated.getUserInput.call(this);
-  };
-  render() {
-    const width = this._width();
-    const tileSize = MAIN_TILE_SIZE;
-    const pxWidth = width * (tileSize + 2 * CELL_PADDING);
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(TileGrid, {
-      cells: this.props.cells,
-      size: tileSize,
-      onChange: this._flipTile
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        width: pxWidth
-      }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: MOVE_COUNT_STYLE
-    }, i18n__namespace.ngettext("Moves: %(num)s", "Moves: %(num)s", this.props.moveCount)), /*#__PURE__*/React__namespace.createElement("div", {
-      style: RESET_BUTTON_STYLE
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "button",
-      value: "Reset",
-      onClick: this._reset,
-      className: "simple-button"
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "clearfix"
-    }));
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(_this, args);
-    };
-  })();
-  _width = () => {
-    if (this.props.cells && this.props.cells.length !== 0) {
-      return this.props.cells[0].length;
-    }
-    return 0; // default to 0
-  };
-
-  componentDidMount() {
-    this._initNextPatterns();
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.flipPattern !== this.props.flipPattern) {
-      this._initNextPatterns();
-    }
-  }
-  _initNextPatterns = () => {
-    if (this.props.flipPattern) {
-      this._currPattern = PATTERNS[this.props.flipPattern](0);
-      this._nextPattern = PATTERNS[this.props.flipPattern](1);
-    }
-    this._patternIndex = 2;
-  };
-  _shiftPatterns = () => {
-    if (this.props.flipPattern) {
-      this._currPattern = this._nextPattern;
-      this._nextPattern = PATTERNS[this.props.flipPattern](this._patternIndex);
-      this._patternIndex++;
-    }
-  };
-  _flipTile = _ref => {
-    let {
-      value: {
-        y,
-        x
-      }
-    } = _ref;
-    const newCells = flipTilesPattern(this.props.cells, y, x, this._currPattern);
-    this._shiftPatterns();
-    this.change({
-      cells: newCells,
-      moveCount: (this.props.moveCount || 0) + 1
-    });
-  };
-  _reset = () => {
-    this.change({
-      cells: this.props.startCells,
-      moveCount: 0
-    });
-  };
-  simpleValidate = rubric => {
-    return validate$1(rubric, this.getUserInput());
-  };
-}
-
-// grading function
-const validate$1 = function (rubric, state) {
-  const empty = ___default["default"].all(state.cells, (row, y) => {
-    return ___default["default"].all(row, (cell, x) => {
-      return cell === rubric.startCells[y][x];
-    });
-  });
-  if (empty) {
-    return {
-      type: "invalid",
-      message: i18n__namespace._("Click on the tiles to change the lights.")
-    };
-  }
-  const correct = ___default["default"].all(state.cells, row => {
-    return ___default["default"].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__namespace._("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 (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
-};
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 let Layout = /*#__PURE__*/function (Layout) {
   Layout["HORIZONTAL"] = "horizontal";
@@ -34239,7 +33985,7 @@ var Matcher$1 = {
 // Type imports
 
 const {
-  assert: assert$3
+  assert: assert$2
 } = InteractiveUtil;
 const {
   stringArrayOfSize
@@ -34273,12 +34019,12 @@ const getDefaultPath$1 = function () {
 };
 const getRowFromPath$1 = function (path) {
   // 'path' should be a (row, column) pair
-  assert$3(___default["default"].isArray(path) && path.length === 2);
+  assert$2(___default["default"].isArray(path) && path.length === 2);
   return +path[0];
 };
 const getColumnFromPath$1 = function (path) {
   // 'path' should be a (row, column) pair
-  assert$3(___default["default"].isArray(path) && path.length === 2);
+  assert$2(___default["default"].isArray(path) && path.length === 2);
   return +path[1];
 };
 const getRefForPath$1 = function (path) {
@@ -34674,7 +34420,7 @@ ___default["default"].extend(Matrix, {
     };
   }
 });
-const propTransform$2 = editorProps => {
+const propTransform$1 = editorProps => {
   // Remove answers before passing to widget
   const blankAnswers = ___default["default"](editorProps.matrixBoardSize[0]).times(function () {
     return stringArrayOfSize(editorProps.matrixBoardSize[1]);
@@ -34699,7 +34445,7 @@ var Matrix$1 = {
   name: "matrix",
   displayName: "Matrix",
   widget: Matrix,
-  transform: propTransform$2,
+  transform: propTransform$1,
   staticTransform: staticTransform$2,
   isLintable: true
 };
@@ -35768,11 +35514,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";
@@ -36048,7 +35794,7 @@ class NumberLine extends React__namespace.Component {
     const snapX = props.tickStep / props.snapDivisions;
     let x = bound(numLinePosition, left, right);
     x = left + kmath.number.roundTo(x - left, snapX);
-    assert$2(___default["default"].isFinite(x));
+    assert$1(___default["default"].isFinite(x));
     return x;
   };
 
@@ -36087,7 +35833,7 @@ class NumberLine extends React__namespace.Component {
       stroke: KhanColors.INTERACTIVE,
       "fill-opacity": isOpen ? 0 : 1
     } : {};
-    return /*#__PURE__*/React__namespace.createElement(MovablePoint$1
+    return /*#__PURE__*/React__namespace.createElement(MovablePoint
     // eslint-disable-next-line react/no-string-refs
     , {
       ref: "numberLinePoint",
@@ -36148,7 +35894,7 @@ class NumberLine extends React__namespace.Component {
         strokeWidth: 3.5
       };
       const isGreater = ["ge", "gt"].includes(props.rel);
-      return /*#__PURE__*/React__namespace.createElement(Line$1
+      return /*#__PURE__*/React__namespace.createElement(Line
       // We shift the line to either side of the dot so they don't
       // intersect
       , {
@@ -40013,843 +39759,40 @@ var PythonProgram$1 = {
   widget: PythonProgram
 };
 
-class Separator extends React__namespace.Component {
-  arrowLength = 100;
-  componentDidMount() {
-    this.drawArrow();
-  }
-  componentDidUpdate() {
-    this.drawArrow();
-  }
-  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);
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
+const {
+  shuffle
+} = Util;
+const HORIZONTAL = "horizontal";
+const VERTICAL = "vertical";
+class Sorter extends React__namespace.Component {
+  // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
+
+  static propTypes = {
+    apiOptions: ApiOptions.propTypes,
+    // eslint-disable-next-line react/forbid-prop-types
+    correct: PropTypes__default["default"].array,
+    layout: PropTypes__default["default"].oneOf([HORIZONTAL, VERTICAL]),
+    onChange: PropTypes__default["default"].func,
+    padding: PropTypes__default["default"].bool,
+    problemNum: PropTypes__default["default"].number,
+    trackInteraction: PropTypes__default["default"].func.isRequired,
+    linterContext: PerseusLinter.linterContextProps
   };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "arrow-container"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "above-text"
-    }, this.props.data.topText), /*#__PURE__*/React__namespace.createElement("canvas", {
-      height: "30",
-      id: "arrowCanvas" + this.props.index,
-      ref: "arrowCanvas" + this.props.index,
-      width: this.arrowLength
-    }, i18n__namespace._("Reaction arrow pointing to the right.")), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "below-text"
-    }, this.props.data.bottomText));
-  }
-}
-class ReactionDiagramWidget extends React__namespace.Component {
   static defaultProps = {
-    smiles: [],
-    rotationAngle: [],
-    separators: []
-  };
-  simpleValidate = () => {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  };
-  getUserInput = () => {
-    return [];
+    correct: [],
+    layout: HORIZONTAL,
+    padding: true,
+    problemNum: 0,
+    onChange: function () {},
+    linterContext: PerseusLinter.linterContextDefault
   };
-  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.
+  static validate(state, rubric) {
+    const correct = ___default["default"].isEqual(state.options, rubric.correct);
     return {
       type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  };
-  focus = () => {
-    return true;
-  };
-  render() {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-string-refs
-      React__namespace.createElement("div", {
-        className: "reaction",
-        ref: "reaction"
-      }, this.props.smiles.map((s, i) => {
-        const id = this.props.widgetId + "-" + i;
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          key: id,
-          className: "molecule-container"
-        }, /*#__PURE__*/React__namespace.createElement(Molecule, {
-          widgetId: id,
-          rotationAngle: this.props.rotationAngle[i],
-          smiles: s
-        }), i === this.props.smiles.length - 1 ? null : /*#__PURE__*/React__namespace.createElement(Separator, {
-          data: this.props.separators[i],
-          index: i
-        }));
-      }))
-    );
-  }
-}
-var ReactionDiagram = {
-  name: "reaction-diagram",
-  displayName: "Chemical reaction diagram (deprecated)",
-  hidden: true,
-  widget: ReactionDiagramWidget
-};
-
-class Sequence extends React__namespace.Component {
-  static defaultProps = {
-    json: [{
-      content: "",
-      widgets: {},
-      images: {}
-    }],
-    linterContext: PerseusLinter.linterContextDefault
-  };
-  state = {
-    visible: 1
-  };
-  shouldComponentUpdate(nextProps, nextState) {
-    return nextProps !== this.props || nextState !== this.state;
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return change.apply(_this, args);
-    };
-  })();
-  _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
-        });
-      }
-    }
-  };
-  render() {
-    const icon = /*#__PURE__*/React__namespace.createElement(InlineIcon, _extends({}, iconOk, {
-      style: {
-        color: "green"
-      }
-    }));
-    const content = ___default["default"].chain(this.props.json).first(this.state.visible).map((step, i) => `[[${Util.snowman} group ${i}]]`).join("\n\n").value();
-    const widgets = {};
-    ___default["default"].each(this.props.json, (step, i) => {
-      const widgetId = `group ${i}`;
-      widgets[widgetId] = {
-        type: "group",
-        graded: true,
-        version: {
-          major: 0,
-          minor: 0
-        },
-        options: ___default["default"].extend({}, step, {
-          icon: i < this.state.visible - 1 ? icon : null
-        })
-      };
-    });
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-sequence"
-    }, /*#__PURE__*/React__namespace.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
-    }));
-  }
-}
-const traverseChildWidgets = function (props, traverseRenderer) {
-  let oldJson = props.json;
-  if (!___default["default"].isArray(oldJson)) {
-    oldJson = [oldJson];
-  }
-  const json = ___default["default"].map(oldJson, rendererOptions => {
-    return traverseRenderer(rendererOptions);
-  });
-  return ___default["default"].extend({}, props, {
-    json: json
-  });
-};
-var Sequence$1 = {
-  name: "sequence",
-  displayName: "Graded sequence (deprecated)",
-  widget: Sequence,
-  traverseChildWidgets: traverseChildWidgets,
-  tracking: "all",
-  hidden: true,
-  isLintable: true
-};
-
-/* eslint-disable @typescript-eslint/no-unused-vars, react/no-unsafe, react/sort-comp */
-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__namespace.Component {
-  static propTypes = {
-    data: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    xAxisLabel: PropTypes__default["default"].string,
-    yAxisLabel: PropTypes__default["default"].string,
-    box: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)
-  };
-  static defaultProps = {
-    data: null,
-    xAxisLabel: "Proportion (%)",
-    yAxisLabel: "Number of times seen",
-    box: [defaultBoxSize, defaultBoxSize]
-  };
-  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)
-      });
-    }
-  }
-
-  /* Renders the vertical line that users can drag across the histogram. */
-  _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 = ___default["default"].map(yRange, y => [this.state.threshold, y]);
-
-    // Returns an inivisble, placeholder coord that anchors the line
-    const invisiblePointForCoord = (coord, i) => {
-      return /*#__PURE__*/React__namespace.createElement(MovablePoint, {
-        key: i,
-        static: true,
-        coord: coord,
-        normalStyle: {
-          stroke: "none",
-          fill: "none"
-        }
-      });
-    };
-    return /*#__PURE__*/React__namespace.createElement(MovableLine, {
-      onMove: this.handleMouseInteraction
-    }, ___default["default"].map(coords, invisiblePointForCoord));
-  };
-
-  /* Renders the shaded circle in the top right. */
-  _renderCircle = () => {
-    const data = this.props.data;
-
-    // Get proportion of results below threshold
-    const total = ___default["default"].reduce(data, (sum, next) => {
-      return sum + next;
-    }, 0);
-    const numBelow = ___default["default"].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__namespace.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__namespace.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__namespace.createElement(Label, options);
-    };
-    return [proportionBelow > 0 && plotBelowCircle(), proportionBelow < 1 && plotAboveCircle(), plotLabel()];
-  };
-
-  /* Renders the actual bars of the histogram. */
-  _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__namespace.createElement(Path, {
-        key: i,
-        coords: coords,
-        style: style
-      });
-    };
-    return ___default["default"].map(data, pathForData);
-  };
-  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__namespace.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__namespace.createElement(Line, {
-      start: origin,
-      end: bottomRight,
-      style: axisStyle
-    }), data && this._renderData(), data && this._renderCircle(), data && this._renderThresholdLine());
-  }
-  _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);
-    ___default["default"].each(___default["default"].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);
-      ___default["default"].each(___default["default"].range(range[0][0], range[0][1], xSkip), x => {
-        graphie.label([x, 0], kmath.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)");
-  };
-  handleMouseInteraction = point => {
-    this.setState({
-      threshold: point[0]
-    });
-  };
-
-  /* Convenience functions that help calculate props based on other props. */
-  _range = props => {
-    const defaultRange = [[0, 100], [-1, 10]];
-    props = props || this.props;
-    return props.data ? this._getRangeForData(props.data) : defaultRange;
-  };
-  _getRangeForData = data => {
-    // Find first/last non-zero entry and add some padding
-    const padding = 10;
-    const firstIndex = ___default["default"].indexOf(data, ___default["default"].find(data, n => n > 0));
-    const xMin = Math.max(0, firstIndex - padding);
-    const lastIndex = ___default["default"].lastIndexOf(data, ___default["default"].last(___default["default"].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 = ___default["default"].max(data);
-    return [[xMin, xMax], [yMin, yMax]];
-  };
-  _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;
-  };
-  state = {
-    // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-    threshold: this._getInitialThreshold(this._range())
-  };
-}
-class Simulator extends React__namespace.Component {
-  // @ts-expect-error - TS2564 - Property 'generateNumber' has no initializer and is not definitely assigned in the constructor.
-
-  static propTypes = {
-    ...propTypes,
-    apiOptions: ApiOptions.propTypes,
-    data: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    numTrials: PropTypes__default["default"].number,
-    proportionLabel: PropTypes__default["default"].string,
-    proportionOrPercentage: PropTypes__default["default"].string,
-    randomSeed: PropTypes__default["default"].number,
-    sampleSize: PropTypes__default["default"].number,
-    trackInteraction: PropTypes__default["default"].func.isRequired,
-    userProportion: PropTypes__default["default"].number,
-    xAxisLabel: PropTypes__default["default"].string,
-    yAxisLabel: PropTypes__default["default"].string
-  };
-  static 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
-  };
-  state = {
-    invalidInput: false
-  };
-
-  // 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 = ___default["default"].extend({}, inputStyle, {
-      boxShadow: highlight,
-      transition: "all 0.15s"
-    });
-    const unhighlightStyle = ___default["default"].extend({}, inputStyle, {
-      transition: "all 0.15s"
-    });
-    const style = this.state.invalidInput ? highlightStyle : unhighlightStyle;
-    const proportionInput = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip, null, /*#__PURE__*/React__namespace.createElement("p", null, i18n__namespace._("This controls the proportion or percentage that will be used in your simulation."))));
-    const sampleSizeInput = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip, null, /*#__PURE__*/React__namespace.createElement("p", null, i18n__namespace._("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__namespace.createElement("div", {
-      style: {
-        textAlign: "right"
-      }
-    }, /*#__PURE__*/React__namespace.createElement("b", null, this.props.numTrials), /*#__PURE__*/React__namespace.createElement(InfoTip, null, /*#__PURE__*/React__namespace.createElement("p", null, i18n__namespace._("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__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("th", null, i18n__namespace._("Parameter")), /*#__PURE__*/React__namespace.createElement("th", null, i18n__namespace._("Value"))));
-      const body = /*#__PURE__*/React__namespace.createElement("tbody", null, ___default["default"].map(contents, (row, i) => {
-        return /*#__PURE__*/React__namespace.createElement("tr", {
-          key: i
-        }, /*#__PURE__*/React__namespace.createElement("td", null, row.title), /*#__PURE__*/React__namespace.createElement("td", null, row.value));
-      }));
-      return /*#__PURE__*/React__namespace.createElement("table", null, header, body);
-    };
-
-    // Contents for the table to-be generated
-    const contents = [{
-      title: this.props.proportionLabel + ":",
-      value: proportionInput
-    }, {
-      title: i18n__namespace._("Sample size:"),
-      value: sampleSizeInput
-    }, {
-      title: i18n__namespace._("Number of trials:"),
-      value: numTrialsDisplay
-    }];
-
-    // The 'Run Simulation' button
-    const buttonStyle = {
-      margin: "20px 0"
-    };
-    const startButton = /*#__PURE__*/React__namespace.createElement("button", {
-      className: "simple-button",
-      style: buttonStyle,
-      disabled: this.props.apiOptions.readOnly,
-      onClick: this.handleRunSimulation
-    }, i18n__namespace._("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__namespace.createElement("div", {
-      style: histogramStyle
-    }, /*#__PURE__*/React__namespace.createElement(Histogram, {
-      data: this.props.data,
-      xAxisLabel: this.props.xAxisLabel,
-      yAxisLabel: this.props.yAxisLabel,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
-    }));
-    return /*#__PURE__*/React__namespace.createElement("div", null, generateTable(contents), startButton, histogram);
-  }
-  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;
-  };
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(_this, args);
-    };
-  })();
-  checkProportionValidity = value => {
-    return value >= 0.0 && this.props.proportionOrPercentage === "proportion" && value <= 1.0 || this.props.proportionOrPercentage === "percentage" && value <= 100.0;
-  };
-  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'.
-  handleSampleSizeChange = (sampleSize, cb) => {
-    if (sampleSize != null) {
-      sampleSize = Math.min(maxSampleSize, Math.max(0, Math.floor(sampleSize)));
-    }
-    this.props.onChange({
-      sampleSize: sampleSize
-    }, cb);
-  };
-  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();
-  };
-  generateData = props => {
-    props = props || this.props;
-    const getSampleDistribution = (sampleSize, numTrials, proportion) => {
-      const draw = () => {
-        return this.generateNumber() < proportion;
-      };
-      const sampleDistribution = ___default["default"].times(100 + 1, () => 0);
-      ___default["default"].times(numTrials, () => {
-        const results = ___default["default"].times(sampleSize, draw);
-        const count = ___default["default"].filter(results, ___default["default"].identity).length;
-        const normalizedCount = Math.floor(100 * count / sampleSize);
-        sampleDistribution[normalizedCount]++;
-      });
-      return sampleDistribution;
-    };
-    return getSampleDistribution(props.sampleSize, props.numTrials, props.userProportion);
-  };
-
-  /* InputPath API */
-  getInputPaths = () => {
-    return [["userProportion"], ["sampleSize"]];
-  };
-  focus = () => {
-    const path = ___default["default"].head(this.getInputPaths());
-    this.focusInputPath(path);
-    return true;
-  };
-  focusInputPath = path => {
-    assert$1(path.length > 0);
-    const inputID = ___default["default"].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();
-  };
-  blurInputPath = path => {
-    assert$1(path.length > 0);
-    const inputID = ___default["default"].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();
-  };
-  getDOMNodeForPath = path => {
-    assert$1(path.length > 0);
-    const inputID = ___default["default"].head(path);
-    // eslint-disable-next-line react/no-string-refs
-    return ReactDOM__default["default"].findDOMNode(this.refs[inputID]);
-  };
-  getGrammarTypeForPath = path => {
-    assert$1(path.length > 0);
-    return "number";
-  };
-  setInputValue = (path, newValue, cb) => {
-    assert$1(path.length > 0);
-    const inputID = ___default["default"].head(path);
-    const capitalizedID = inputID.charAt(0).toUpperCase() + inputID.slice(1);
-    const functionName = "handle" + capitalizedID + "Change";
-    this[functionName](newValue, cb);
-  };
-  getUserInput = () => {
-    return null;
-  };
-  simpleValidate = rubric => {
-    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Simulator'.
-    return Simulator.validate(this.getUserInput(), rubric);
-  };
-}
-___default["default"].extend(Simulator, {
-  validate: function (state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
-});
-const propTransform$1 = editorProps => {
-  const widgetProps = ___default["default"].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
-} = Util;
-const HORIZONTAL = "horizontal";
-const VERTICAL = "vertical";
-class Sorter extends React__namespace.Component {
-  // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-
-  static propTypes = {
-    apiOptions: ApiOptions.propTypes,
-    // eslint-disable-next-line react/forbid-prop-types
-    correct: PropTypes__default["default"].array,
-    layout: PropTypes__default["default"].oneOf([HORIZONTAL, VERTICAL]),
-    onChange: PropTypes__default["default"].func,
-    padding: PropTypes__default["default"].bool,
-    problemNum: PropTypes__default["default"].number,
-    trackInteraction: PropTypes__default["default"].func.isRequired,
-    linterContext: PerseusLinter.linterContextProps
-  };
-  static defaultProps = {
-    correct: [],
-    layout: HORIZONTAL,
-    padding: true,
-    problemNum: 0,
-    onChange: function () {},
-    linterContext: PerseusLinter.linterContextDefault
-  };
-  static validate(state, rubric) {
-    const correct = ___default["default"].isEqual(state.options, rubric.correct);
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
+      earned: correct ? 1 : 0,
+      total: 1,
       message: null
     };
   }
@@ -42313,7 +41256,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
@@ -42327,7 +41270,7 @@ var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Defin
 const init = function (options) {
   registerWidgets(basicWidgets);
   registerWidgets(extraWidgets);
-  replaceWidget("transformer", "deprecated-standin");
+  replaceDeprecatedWidgets();
 
   // Pass skipMathJax: true if MathJax is already loaded and configured.
   const skipMathJax = options.skipMathJax;
@@ -42353,7 +41296,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.9.0";
+const libVersion = "20.0.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43477,14 +42420,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -43532,7 +42467,7 @@ const deepCallbackFor = function (contentCallback, widgetCallback, optionsCallba
     // on getDefaultProps, this will become easier.
     let newWidgetInfo;
     if (latestVersion && upgradedWidgetInfo.version?.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);
@@ -44607,7 +43542,7 @@ function violatingWidgets(itemData) {
  */
 const registerAllWidgetsForTesting = () => {
   registerWidgets(allWidgets);
-  replaceWidget("transformer", "deprecated-standin");
+  replaceDeprecatedWidgets();
 };
 
 /**