@khanacademy/perseus-editor 3.0.1 → 4.1.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, TransformerWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
@@ -14,7 +14,7 @@ import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
 import ReactDOM from 'react-dom';
-import { point, number, line, ray, vector } from '@khanacademy/kmath';
+import { point, number } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
 import { isTruthy } from '@khanacademy/wonder-stuff-core';
 import { createMathField } from '@khanacademy/math-input';
@@ -25,7 +25,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "3.0.1";
+const libVersion = "4.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23452,7 +23452,7 @@ class StructuredItemDiff extends React.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
+  InfoTip: InfoTip$m,
   InlineIcon: InlineIcon$8
 } = components;
 const {
@@ -23524,7 +23524,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconCircleArrowUp$1)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$n, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconCircleArrowUp$1)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$m, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23777,7 +23777,7 @@ CombinedHintsEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$l
 } = components;
 class ItemExtrasEditor extends React.Component {
   constructor(...args) {
@@ -23935,7 +23935,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement("div", {
   type: "checkbox",
   checked: props.checked,
   onChange: props.onChange
-})), /*#__PURE__*/React.createElement(InfoTip$m, null, props.infoTip));
+})), /*#__PURE__*/React.createElement(InfoTip$l, null, props.infoTip));
 
 const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {
@@ -24322,8 +24322,6 @@ function widgetCallback(widgetInfo, images) {
     images.push(widgetInfo.options.image.url);
   } else if (widgetInfo.type === "plotter") {
     images.push(widgetInfo.options.picUrl);
-  } else if (widgetInfo.type === "transformer") {
-    handleBackgroundImage(widgetInfo.options.graph, images);
   }
 }
 function findImagesInRenderers(renderers) {
@@ -25767,7 +25765,7 @@ const StatefulEditorPage = createReactClass({
 });
 
 const {
-  PropCheckBox: PropCheckBox$d,
+  PropCheckBox: PropCheckBox$c,
   TextListEditor: TextListEditor$4
 } = components;
 const Categorizer = Categorizer$1.widget;
@@ -25784,7 +25782,7 @@ class CategorizerEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$d, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$c, {
       label: "Randomize item order",
       labelAlignment: "right",
       randomizeItems: this.props.randomizeItems,
@@ -25896,8 +25894,8 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$l,
-  PropCheckBox: PropCheckBox$c
+  InfoTip: InfoTip$k,
+  PropCheckBox: PropCheckBox$b
 } = components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -26053,11 +26051,11 @@ class CSProgramEditor extends React.Component {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Url or Program ID:", " ", /*#__PURE__*/React.createElement(BlurInput, {
       value: this.props.programID,
       onChange: this._handleProgramIDChange
-    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$c, {
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
       label: "Show Editor",
       showEditor: this.props.showEditor,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$c, {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
       label: "Show Buttons",
       showButtons: this.props.showButtons,
       onChange: this.props.onChange
@@ -26065,7 +26063,7 @@ class CSProgramEditor extends React.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
   }
 }
 CSProgramEditor.propTypes = _extends({}, Changeable.propTypes);
@@ -26151,7 +26149,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
+  InfoTip: InfoTip$j,
   InlineIcon: InlineIcon$6
 } = components;
 const {
@@ -26220,14 +26218,14 @@ class DropdownEditor extends React.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React.createElement("ul", {
       className: "dropdown-choices"
@@ -26761,8 +26759,8 @@ const SortableItem = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$j,
-  PropCheckBox: PropCheckBox$b
+  InfoTip: InfoTip$i,
+  PropCheckBox: PropCheckBox$a
 } = components;
 
 // types for iterables
@@ -27009,16 +27007,16 @@ class ExpressionEditor extends React.Component {
       className: "perseus-widget-expression-editor"
     }, /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    }, "Global Options"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       times: this.props.times,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Use \xD7 for rendering multiplication instead of a center dot."
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
       type: "text",
       defaultValue: this.props.functions.join(" "),
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
+    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
     }, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
@@ -27108,19 +27106,19 @@ class AnswerOption extends React.Component {
       className: "answer-expression"
     }, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       form: this.props.form,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must have the same form."
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       simplify: this.props.simplify,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must be fully expanded and simplified."
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
       className: "remove-container"
     }, removeButton)));
   }
@@ -27320,14 +27318,14 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 const {
   ButtonGroup: ButtonGroup$3,
-  InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a,
+  InfoTip: InfoTip$h,
+  PropCheckBox: PropCheckBox$9,
   RangeInput: RangeInput$5
 } = components;
 const {
   getDependencies: getDependencies$9
 } = Dependencies;
-const defaultBackgroundImage$3 = {
+const defaultBackgroundImage$2 = {
   url: null,
   width: 0,
   height: 0
@@ -27364,7 +27362,7 @@ const GraphSettings = createReactClass({
       gridStep: [1, 1],
       snapStep: [1, 1],
       valid: true,
-      backgroundImage: defaultBackgroundImage$3,
+      backgroundImage: defaultBackgroundImage$2,
       markings: "graph",
       showProtractor: false,
       showRuler: false,
@@ -27729,7 +27727,7 @@ const GraphSettings = createReactClass({
       onChange: this.change("markings")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
@@ -27751,19 +27749,19 @@ const GraphSettings = createReactClass({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change
@@ -27788,7 +27786,7 @@ const GraphSettings = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$g,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
 const {
@@ -27871,7 +27869,7 @@ class GrapherEditor extends React.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass$1(sizeClass),
       range: this.props.graph.range,
@@ -27966,7 +27964,7 @@ GroupEditor.defaultProps = {
 };
 
 const {
-  PropCheckBox: PropCheckBox$9
+  PropCheckBox: PropCheckBox$8
 } = components;
 /**
  * This is used for editing a name/value pair.
@@ -28089,11 +28087,11 @@ class IframeEditor extends React.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("height")
-    })), /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    })), /*#__PURE__*/React.createElement(PropCheckBox$8, {
       label: "Allow full screen",
       allowFullScreen: this.props.allowFullScreen,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$8, {
       label: "Allow iframe content to redirect the page",
       allowTopNavigation: this.props.allowTopNavigation,
       onChange: this.props.onChange
@@ -28114,14 +28112,15 @@ IframeEditor.defaultProps = {
   allowTopNavigation: false
 };
 
+/* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$f,
   InlineIcon: InlineIcon$4,
   RangeInput: RangeInput$4
 } = components;
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
-const defaultBackgroundImage$2 = {
+const defaultBackgroundImage$1 = {
   url: null,
   width: 0,
   height: 0
@@ -28138,37 +28137,23 @@ const INTERNALLY_HOSTED_URL_RE = new RegExp("^(https?|web\\+graphie)://[^/]*" +
  * Alignment option for captions, relative to specified coordinates.
  */
 const captionAlignments = ["center", "above", "above right", "right", "below right", "below", "below left", "left", "above left"];
-const ImageEditor = createReactClass({
-  displayName: "ImageEditor",
-  propTypes: _extends({}, Changeable.propTypes),
-  statics: {
-    widgetName: "image"
-  },
-  componentDidMount: function () {
+class ImageEditor extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this._isMounted = false;
+    this.state = {
+      backgroundImageError: ""
+    };
+  }
+  componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
     this._isMounted = true;
-  },
-  componentWillUnmount: function () {
+  }
+  componentWillUnmount() {
     this._isMounted = false;
-  },
-  getDefaultProps: function () {
-    return {
-      title: "",
-      range: [defaultRange, defaultRange],
-      box: [defaultBoxSize, defaultBoxSize],
-      backgroundImage: defaultBackgroundImage$2,
-      labels: [],
-      alt: "",
-      caption: ""
-    };
-  },
-  getInitialState: function () {
-    return {
-      backgroundImageError: ""
-    };
-  },
-  render: function () {
+  }
+  render() {
     const backgroundImage = this.props.backgroundImage;
     const imageSettings = /*#__PURE__*/React.createElement("div", {
       className: "image-settings"
@@ -28178,7 +28163,7 @@ const ImageEditor = createReactClass({
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$f, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28202,15 +28187,15 @@ const ImageEditor = createReactClass({
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
+    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
       },
       onChange: url => this.onUrlChange(url, false)
     })), backgroundImage.url && imageSettings);
-  },
-  _renderRowForLabel: function (label, i) {
+  }
+  _renderRowForLabel(label, i) {
     return /*#__PURE__*/React.createElement("tr", {
       key: i
     }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(RangeInput$4, {
@@ -28249,19 +28234,19 @@ const ImageEditor = createReactClass({
       ,
       onClick: this.removeLabel.bind(this, i)
     }, /*#__PURE__*/React.createElement(InlineIcon$4, icons.iconTrash))));
-  },
+  }
   change(...args) {
     return Changeable.change.apply(this, args);
-  },
-  removeLabel: function (labelIndex, e) {
+  }
+  removeLabel(labelIndex, e) {
     e.preventDefault();
-    const labels = _(this.props.labels).clone();
+    const labels = [...this.props.labels];
     labels.splice(labelIndex, 1);
     this.props.onChange({
       labels: labels
     });
-  },
-  onCoordinateChange: function (labelIndex, newCoordinates) {
+  }
+  onCoordinateChange(labelIndex, newCoordinates) {
     const labels = this.props.labels.slice();
     labels[labelIndex] = _.extend({}, labels[labelIndex], {
       coordinates: newCoordinates
@@ -28269,8 +28254,8 @@ const ImageEditor = createReactClass({
     this.props.onChange({
       labels: labels
     });
-  },
-  onContentChange: function (labelIndex, e) {
+  }
+  onContentChange(labelIndex, e) {
     const newContent = e.target.value;
     const labels = this.props.labels.slice();
     labels[labelIndex] = _.extend({}, labels[labelIndex], {
@@ -28279,8 +28264,8 @@ const ImageEditor = createReactClass({
     this.props.onChange({
       labels: labels
     });
-  },
-  onAlignmentChange: function (labelIndex, e) {
+  }
+  onAlignmentChange(labelIndex, e) {
     const newAlignment = e.target.value;
     const labels = this.props.labels.slice();
     labels[labelIndex] = _.extend({}, labels[labelIndex], {
@@ -28289,8 +28274,8 @@ const ImageEditor = createReactClass({
     this.props.onChange({
       labels: labels
     });
-  },
-  setUrl: function (url, width, height, silent) {
+  }
+  setUrl(url, width, height, silent) {
     // Because this calls into WidgetEditor._handleWidgetChange, which
     // checks for this widget's ref to serialize it.
     //
@@ -28308,11 +28293,12 @@ const ImageEditor = createReactClass({
       backgroundImage: image,
       box: box
     }, null, silent);
-  },
+  }
+
   // silently load the image when the component mounts
   // silently update url and sizes when the image loads
   // noisily load the image in response to the author changing it
-  onUrlChange: async function (url, silent) {
+  async onUrlChange(url, silent) {
     // Check if we've been passed something that looks like a URL
     if (!url) {
       this.setUrl(url, 0, 0, silent);
@@ -28339,22 +28325,33 @@ const ImageEditor = createReactClass({
         backgroundImageError: `There was an error loading the image URL: ${JSON.stringify(error, null, 2)}`
       });
     }
-  },
-  onRangeChange: function (type, newRange) {
+  }
+  onRangeChange(type, newRange) {
     const range = this.props.range.slice();
     range[type] = newRange;
     this.props.onChange({
       range: range
     });
-  },
+  }
   serialize() {
     return EditorJsonify.serialize.call(this);
   }
-});
+}
+ImageEditor.displayName = "ImageEditor";
+ImageEditor.widgetName = "image";
+ImageEditor.defaultProps = {
+  title: "",
+  range: [defaultRange, defaultRange],
+  box: [defaultBoxSize, defaultBoxSize],
+  backgroundImage: defaultBackgroundImage$1,
+  labels: [],
+  alt: "",
+  caption: ""
+};
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$e
 } = components;
 const answerTypes = {
   number: {
@@ -28440,7 +28437,7 @@ class InputNumberEditor extends React.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28476,7 +28473,7 @@ class InputNumberEditor extends React.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28488,7 +28485,7 @@ class InputNumberEditor extends React.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -29669,7 +29666,7 @@ const SegmentCountSelector = ({
 }, `${n} segment${n > 1 ? "s" : ""}`)));
 
 const {
-  InfoTip: InfoTip$e
+  InfoTip: InfoTip$d
 } = components;
 const {
   containerSizeClass,
@@ -29677,7 +29674,7 @@ const {
 } = SizingUtils;
 const DeprecationMixin = Util.DeprecationMixin;
 const InteractiveGraph = InteractiveGraphWidget.widget;
-const defaultBackgroundImage$1 = {
+const defaultBackgroundImage = {
   url: null
 };
 const deprecatedProps = {
@@ -29843,7 +29840,7 @@ class InteractiveGraphEditor extends React.Component {
       value: "angles"
     }, "interior angles"), /*#__PURE__*/React.createElement("option", {
       value: "sides"
-    }, "side measures"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."), /*#__PURE__*/React.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
+    }, "side measures"))), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."), /*#__PURE__*/React.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
       tag: "label"
     }, "Show angle measures:", " ", /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
@@ -29855,7 +29852,7 @@ class InteractiveGraphEditor extends React.Component {
           })
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
+    })), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Typography.LabelSmall, {
       tag: "label"
     }, "Show side measures:", " ", /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
@@ -29867,7 +29864,7 @@ class InteractiveGraphEditor extends React.Component {
           })
         });
       }
-    })), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct9 = this.props.correct) == null ? void 0 : _this$props$correct9.type) === "segment" && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React.createElement(SegmentCountSelector, {
+    })), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Displays the side lengths.")))), ((_this$props$correct9 = this.props.correct) == null ? void 0 : _this$props$correct9.type) === "segment" && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React.createElement(SegmentCountSelector, {
       numSegments: (_this$props$correct10 = this.props.correct) == null ? void 0 : _this$props$correct10.numSegments,
       onChange: sides => {
         this.props.onChange({
@@ -29887,7 +29884,7 @@ class InteractiveGraphEditor extends React.Component {
         borderStyle: "solid",
         borderWidth: 1
       }
-    }, equationString), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), /*#__PURE__*/React.createElement(GraphSettings, {
+    }, equationString), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), /*#__PURE__*/React.createElement(GraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
@@ -29916,7 +29913,7 @@ class InteractiveGraphEditor extends React.Component {
       value: "approx"
     }, "be approximately congruent"), /*#__PURE__*/React.createElement("option", {
       value: "similar"
-    }, "be similar"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Match Exactly:"), " Match exactly in size, orientation, and location on the grid even if it is not shown in the background.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Approximately Congruent:"), " Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid.", " ", /*#__PURE__*/React.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Similar:"), " Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."))))), this.props.correct.type === "angle" && /*#__PURE__*/React.createElement("div", {
+    }, "be similar"))), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Match Exactly:"), " Match exactly in size, orientation, and location on the grid even if it is not shown in the background.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Approximately Congruent:"), " Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid.", " ", /*#__PURE__*/React.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "Be Similar:"), " Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."))))), this.props.correct.type === "angle" && /*#__PURE__*/React.createElement("div", {
       className: "type-settings"
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Student answer must", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.correct.match,
@@ -29925,7 +29922,7 @@ class InteractiveGraphEditor extends React.Component {
       value: "exact"
     }, "match exactly"), /*#__PURE__*/React.createElement("option", {
       value: "congruent"
-    }, "be congruent"))), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position.")))), graph);
+    }, "be congruent"))), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position.")))), graph);
   }
   changeMatchType(e) {
     const correct = _.extend({}, this.props.correct, {
@@ -29963,7 +29960,7 @@ class InteractiveGraphEditor extends React.Component {
 InteractiveGraphEditor.widgetName = "interactive-graph";
 InteractiveGraphEditor.defaultProps = _extends({}, InteractiveGraph.defaultProps, {
   valid: true,
-  backgroundImage: defaultBackgroundImage$1,
+  backgroundImage: defaultBackgroundImage,
   showTooltips: false,
   correct: {
     type: InteractiveGraph.defaultProps.graph.type,
@@ -31470,9 +31467,9 @@ const styles = StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$d,
+  InfoTip: InfoTip$c,
   NumberInput: NumberInput$a,
-  PropCheckBox: PropCheckBox$8
+  PropCheckBox: PropCheckBox$7
 } = components;
 const MAX_SIZE = 8;
 
@@ -31646,10 +31643,10 @@ class LightsPuzzleEditor extends React.Component {
         value: pattern,
         key: i
       }, pattern);
-    }))), /*#__PURE__*/React.createElement("div", null, "Grade incomplete puzzles as wrong:", " ", /*#__PURE__*/React.createElement(PropCheckBox$8, {
+    }))), /*#__PURE__*/React.createElement("div", null, "Grade incomplete puzzles as wrong:", " ", /*#__PURE__*/React.createElement(PropCheckBox$7, {
       gradeIncompleteAsWrong: this.props.gradeIncompleteAsWrong,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$d, null, "By default, incomplete puzzles are graded as empty.")), /*#__PURE__*/React.createElement("div", null, "Starting configuration:"), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$c, null, "By default, incomplete puzzles are graded as empty.")), /*#__PURE__*/React.createElement("div", null, "Starting configuration:"), /*#__PURE__*/React.createElement("div", {
       style: {
         overflowX: "auto"
       }
@@ -31674,8 +31671,8 @@ LightsPuzzleEditor.defaultProps = {
 
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 const {
-  InfoTip: InfoTip$c,
-  PropCheckBox: PropCheckBox$7,
+  InfoTip: InfoTip$b,
+  PropCheckBox: PropCheckBox$6,
   TextListEditor: TextListEditor$3
 } = components;
 class MatcherEditor extends React.Component {
@@ -31701,7 +31698,7 @@ class MatcherEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-matcher-editor"
-    }, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Enter the correct answers here. The preview on the right will show the cards in a randomized order, which is how the student will see them."))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Enter the correct answers here. The preview on the right will show the cards in a randomized order, which is how the student will see them."))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-clearfix"
     }, /*#__PURE__*/React.createElement(TextListEditor$3, {
       options: this.props.left,
@@ -31719,7 +31716,7 @@ class MatcherEditor extends React.Component {
         }, cb);
       },
       layout: "vertical"
-    })), /*#__PURE__*/React.createElement("span", null, " ", "Labels:", " ", /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "These are entirely optional."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    })), /*#__PURE__*/React.createElement("span", null, " ", "Labels:", " ", /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "These are entirely optional."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
       type: "text",
       defaultValue: this.props.labels[0]
       // eslint-disable-next-line react/jsx-no-bind
@@ -31731,15 +31728,15 @@ class MatcherEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this.onLabelChange.bind(this, 1)
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$6, {
       label: "Order of the matched pairs matters:",
       orderMatters: this.props.orderMatters,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "With this option enabled, only the order provided above will be treated as correct. This is useful when ordering is significant, such as in the context of a proof."), /*#__PURE__*/React.createElement("p", null, "If disabled, pairwise matching is sufficient. To make this clear, the left column becomes fixed in the provided order and only the cards in the right column can be moved."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "With this option enabled, only the order provided above will be treated as correct. This is useful when ordering is significant, such as in the context of a proof."), /*#__PURE__*/React.createElement("p", null, "If disabled, pairwise matching is sufficient. To make this clear, the left column becomes fixed in the provided order and only the cards in the right column can be moved."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$6, {
       label: "Padding:",
       padding: this.props.padding,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
+    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
 }
 MatcherEditor.propTypes = {
@@ -31882,9 +31879,9 @@ MatrixEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$b,
+  InfoTip: InfoTip$a,
   NumberInput: NumberInput$9,
-  PropCheckBox: PropCheckBox$6,
+  PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = components;
 const defaultImage = {
@@ -31939,7 +31936,7 @@ class MeasurerEditor extends React.Component {
       ref: "image-url",
       defaultValue: image.url,
       onChange: this._changeUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), image.url && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), image.url && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
       className: "perseus-widget-left-col"
@@ -31965,13 +31962,13 @@ class MeasurerEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$6, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$5, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.props.onChange
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$6, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$5, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.props.onChange
@@ -32084,9 +32081,9 @@ MoleculeWidgetEditor.widgetName = "molecule-renderer";
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   ButtonGroup: ButtonGroup$1,
-  InfoTip: InfoTip$a,
+  InfoTip: InfoTip$9,
   NumberInput: NumberInput$7,
-  PropCheckBox: PropCheckBox$5,
+  PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = components;
 const bound = (x, gt, lt) => Math.min(Math.max(x, gt), lt);
@@ -32246,7 +32243,7 @@ class NumberLineEditor extends React.Component {
       placeholder: "answer",
       size: "normal",
       useArrowKeys: true
-    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "This is the correct answer. The answer is validated (as right or wrong) by using only the end position of the point and the relation (=, <, >, \u2264, \u2265)."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "This is the correct answer. The answer is validated (as right or wrong) by using only the end position of the point and the relation (=, <, >, \u2264, \u2265)."))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, this.props.static ? /*#__PURE__*/React.createElement("label", null, "Range:") : /*#__PURE__*/React.createElement("label", null, "Position:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       value: this.props.initialX,
@@ -32264,7 +32261,7 @@ class NumberLineEditor extends React.Component {
       onChange: this.onRangeChange,
       format: this.props.labelStyle,
       useArrowKeys: true
-    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "This controls the initial position of the point along the number line and the", /*#__PURE__*/React.createElement("strong", null, "range"), ", the position of the endpoints of the number line. Setting the range constrains the position of the answer and the labels."), /*#__PURE__*/React.createElement("p", null, "In static mode, the initial position of the point is determined by Correct x instead of position."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "This controls the initial position of the point along the number line and the", /*#__PURE__*/React.createElement("strong", null, "range"), ", the position of the endpoints of the number line. Setting the range constrains the position of the answer and the labels."), /*#__PURE__*/React.createElement("p", null, "In static mode, the initial position of the point is determined by Correct x instead of position."))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
@@ -32286,30 +32283,30 @@ class NumberLineEditor extends React.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 1),
       useArrowKeys: true
-    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "This controls the position of the left / right labels. By default, the labels are set by the range ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " Ensure that the labels line up with the tick marks, or it may be confusing for users.")))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "This controls the position of the left / right labels. By default, the labels are set by the range ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " Ensure that the labels line up with the tick marks, or it may be confusing for users.")))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, "Style:", " ", /*#__PURE__*/React.createElement(ButtonGroup$1, {
       allowEmpty: false,
       value: this.props.labelStyle,
       buttons: labelStyleEditorButtons,
       onChange: this.onLabelStyleChange
-    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "This controls the styling of the labels for the two main labels as well as all the tick mark labels, if applicable. Your choices are decimal, improper fractions, mixed fractions, and non-reduced fractions."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "This controls the styling of the labels for the two main labels as well as all the tick mark labels, if applicable. Your choices are decimal, improper fractions, mixed fractions, and non-reduced fractions."))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, !this.props.static && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$5, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$4, {
       label: "Show tick controller",
       isTickCtrl: this.props.isTickCtrl,
       onChange: this.props.onChange
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$5, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$4, {
       label: "Show label ticks",
       labelTicks: this.props.labelTicks,
       onChange: this.props.onChange
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, !this.props.static && /*#__PURE__*/React.createElement(PropCheckBox$5, {
+    }, !this.props.static && /*#__PURE__*/React.createElement(PropCheckBox$4, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.props.onChange
@@ -32324,7 +32321,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    })), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32342,7 +32339,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.numDivisions,
       useArrowKeys: true
-    })), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks; you can either set the number of divisions (2 divisions would split the entire range in two halves), or the tick step (the distance between ticks) and the other value will be updated accordingly.", " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " There is no check to see if labels coordinate with the tick marks, which may be confusing for users if the blue labels and black ticks are off-step.")))), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "This controls the number (and position) of the tick marks; you can either set the number of divisions (2 divisions would split the entire range in two halves), or the tick step (the distance between ticks) and the other value will be updated accordingly.", " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " There is no check to see if labels coordinate with the tick marks, which may be confusing for users if the blue labels and black ticks are off-step.")))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       value: snapDivisions,
@@ -32352,7 +32349,7 @@ class NumberLineEditor extends React.Component {
       ,
       onChange: this.onNumChange.bind(this, "snapDivisions"),
       useArrowKeys: true
-    })), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "This determines the number of different places the point will snap between two adjacent tick marks.", " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), "Ensure the required number of snap increments is provided to answer the question."))));
+    })), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "This determines the number of different places the point will snap between two adjacent tick marks.", " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), "Ensure the required number of snap increments is provided to answer the question."))));
   }
 }
 NumberLineEditor.propTypes = {
@@ -32390,11 +32387,11 @@ NumberLineEditor.defaultProps = {
 
 const {
   ButtonGroup,
-  InfoTip: InfoTip$9,
+  InfoTip: InfoTip$8,
   InlineIcon: InlineIcon$3,
   MultiButtonGroup,
   NumberInput: NumberInput$6,
-  PropCheckBox: PropCheckBox$4,
+  PropCheckBox: PropCheckBox$3,
   TextInput: TextInput$3
 } = components;
 const {
@@ -32479,16 +32476,16 @@ const NumericInputEditor = createReactClass({
         content: "wrong"
       }],
       onChange: this.updateAnswer(i, "simplify")
-    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"ungraded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and after)"), /*#__PURE__*/React.createElement("p", null, "Select \"accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"wrong\" ", /*#__PURE__*/React.createElement("em", null, "only"), " if we are specifically assessing the ability to simplify.")));
+    }), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"ungraded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and after)"), /*#__PURE__*/React.createElement("p", null, "Select \"accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"wrong\" ", /*#__PURE__*/React.createElement("em", null, "only"), " if we are specifically assessing the ability to simplify.")));
     const suggestedAnswerTypes = i => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", null, "Choose the suggested answer formats"), /*#__PURE__*/React.createElement(MultiButtonGroup, {
       buttons: answerFormButtons,
       values: answers[i]["answerForms"],
       onChange: this.updateAnswer(i, "answerForms")
-    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "Formats will be autoselected for you based on the given answer; to show no suggested formats and accept all types, simply have a decimal/integer be the answer. Values with \u03C0 will have format \"pi\", and values that are fractions will have some subset (mixed will be \"mixed\" and \"proper\"; improper/proper will both be \"improper\" and \"proper\"). If you would like to specify that it is only a proper fraction (or only a mixed/improper fraction), deselect the other format. Except for specific cases, you should not need to change the autoselected formats."), /*#__PURE__*/React.createElement("p", null, "To restrict the answer to ", /*#__PURE__*/React.createElement("em", null, "only"), " an improper fraction (i.e. 7/4), select the improper fraction and toggle \"strict\" to true. This ", /*#__PURE__*/React.createElement("b", null, "will not"), " ", "accept 1.75 as an answer.", " "), /*#__PURE__*/React.createElement("p", null, "Unless you are testing that specific skill, please do not restrict the answer format."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Formats will be autoselected for you based on the given answer; to show no suggested formats and accept all types, simply have a decimal/integer be the answer. Values with \u03C0 will have format \"pi\", and values that are fractions will have some subset (mixed will be \"mixed\" and \"proper\"; improper/proper will both be \"improper\" and \"proper\"). If you would like to specify that it is only a proper fraction (or only a mixed/improper fraction), deselect the other format. Except for specific cases, you should not need to change the autoselected formats."), /*#__PURE__*/React.createElement("p", null, "To restrict the answer to ", /*#__PURE__*/React.createElement("em", null, "only"), " an improper fraction (i.e. 7/4), select the improper fraction and toggle \"strict\" to true. This ", /*#__PURE__*/React.createElement("b", null, "will not"), " ", "accept 1.75 as an answer.", " "), /*#__PURE__*/React.createElement("p", null, "Unless you are testing that specific skill, please do not restrict the answer format."))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$4, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$3, {
       label: "Strictly match only these formats",
       strict: answers[i]["strict"]
       // eslint-disable-next-line react/jsx-no-bind
@@ -32516,10 +32513,10 @@ const NumericInputEditor = createReactClass({
         content: "Small (40px)"
       }],
       onChange: this.change("size")
-    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them.")));
+    }), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them.")));
     const rightAlign = /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$4, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$3, {
       label: "Right alignment",
       rightAlign: this.props.rightAlign,
       onChange: this.props.onChange
@@ -32529,14 +32526,14 @@ const NumericInputEditor = createReactClass({
     }, /*#__PURE__*/React.createElement("label", null, "Label text:", " ", /*#__PURE__*/React.createElement(TextInput$3, {
       value: this.props.labelText,
       onChange: this.change("labelText")
-    })), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
+    })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
     const coefficientCheck = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$4, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$3, {
       label: "Coefficient",
       coefficient: this.props.coefficient,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.createElement("p", null, "A coefficient style number allows the student to use - for -1 and an empty string to mean 1."))));
+    }), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "A coefficient style number allows the student to use - for -1 and an empty string to mean 1."))));
     const addAnswerButton = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
       href: "javascript:void(0)",
       className: "simple-button orange",
@@ -32744,7 +32741,7 @@ const NumericInputEditor = createReactClass({
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$8,
+  InfoTip: InfoTip$7,
   TextListEditor: TextListEditor$2
 } = components;
 const NORMAL = "normal",
@@ -32804,13 +32801,13 @@ class OrdererEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-orderer"
-    }, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Place the cards in the correct order. The same card can be used more than once in the answer but will only be displayed once at the top of a stack of identical cards."))), /*#__PURE__*/React.createElement(TextListEditor$2, {
+    }, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Place the cards in the correct order. The same card can be used more than once in the answer but will only be displayed once at the top of a stack of identical cards."))), /*#__PURE__*/React.createElement(TextListEditor$2, {
       options: _.pluck(this.props.correctOptions, "content")
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this.onOptionsChange.bind(this, "correctOptions"),
       layout: this.props.layout
-    }), /*#__PURE__*/React.createElement("div", null, " ", "Other cards:", " ", /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Create cards that are not part of the answer."))), /*#__PURE__*/React.createElement(TextListEditor$2, {
+    }), /*#__PURE__*/React.createElement("div", null, " ", "Other cards:", " ", /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Create cards that are not part of the answer."))), /*#__PURE__*/React.createElement(TextListEditor$2, {
       options: _.pluck(this.props.otherOptions, "content")
       // eslint-disable-next-line react/jsx-no-bind
       ,
@@ -32825,7 +32822,7 @@ class OrdererEditor extends React.Component {
       value: HORIZONTAL$1
     }, "Horizontal"), /*#__PURE__*/React.createElement("option", {
       value: VERTICAL$1
-    }, "Vertical"))), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text (e.g. proofs)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Height:", " ", /*#__PURE__*/React.createElement("select", {
+    }, "Vertical"))), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text (e.g. proofs)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Height:", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.height
       // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
       ,
@@ -32834,7 +32831,7 @@ class OrdererEditor extends React.Component {
       value: NORMAL
     }, "Normal"), /*#__PURE__*/React.createElement("option", {
       value: AUTO
-    }, "Automatic"))), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
+    }, "Automatic"))), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
   }
 }
 OrdererEditor.propTypes = {
@@ -32857,8 +32854,8 @@ OrdererEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$7,
-  PropCheckBox: PropCheckBox$3
+  InfoTip: InfoTip$6,
+  PropCheckBox: PropCheckBox$2
 } = components;
 class PassageEditor extends React.Component {
   constructor(..._args) {
@@ -32906,12 +32903,12 @@ class PassageEditor extends React.Component {
       className: "perseus-widget-passage-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$3, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$2, {
       label: "Show line numbers",
       labelAlignment: "right",
       showLineNumbers: this.props.showLineNumbers,
       onChange: this.props.onChange
-    })), /*#__PURE__*/React.createElement("div", null, "Passage title:", /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "An optional title that will appear directly above the passage in the same font style. (E.g. Passage 1)")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+    })), /*#__PURE__*/React.createElement("div", null, "Passage title:", /*#__PURE__*/React.createElement(InfoTip$6, null, /*#__PURE__*/React.createElement("p", null, "An optional title that will appear directly above the passage in the same font style. (E.g. Passage 1)")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
       type: "text",
       defaultValue: this.props.passageTitle,
       onChange: e => {
@@ -32920,7 +32917,7 @@ class PassageEditor extends React.Component {
           passageTitle: e.target.value
         });
       }
-    }))), /*#__PURE__*/React.createElement("div", null, "Passage Text:", passageEditor), /*#__PURE__*/React.createElement("div", null, "Footnotes:", /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "To add footnotes, add ^ characters where they belong in the passage. Then, add ^ in the footnotes area to reference the footnotes in the passage.")), footnotesEditor));
+    }))), /*#__PURE__*/React.createElement("div", null, "Passage Text:", passageEditor), /*#__PURE__*/React.createElement("div", null, "Footnotes:", /*#__PURE__*/React.createElement(InfoTip$6, null, /*#__PURE__*/React.createElement("p", null, "To add footnotes, add ^ characters where they belong in the passage. Then, add ^ in the footnotes area to reference the footnotes in the passage.")), footnotesEditor));
   }
 }
 PassageEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -32938,7 +32935,7 @@ PassageEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$6,
+  InfoTip: InfoTip$5,
   NumberInput: NumberInput$5,
   TextInput: TextInput$2
 } = components;
@@ -32968,7 +32965,7 @@ class PassageRefEditor extends React.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("summaryText")
-    }), /*#__PURE__*/React.createElement(InfoTip$6, null, /*#__PURE__*/React.createElement("p", null, "Short summary of the referenced section. This will be included in parentheses and quotes automatically."), /*#__PURE__*/React.createElement("p", null, "Ex: The start ... the end")))));
+    }), /*#__PURE__*/React.createElement(InfoTip$5, null, /*#__PURE__*/React.createElement("p", null, "Short summary of the referenced section. This will be included in parentheses and quotes automatically."), /*#__PURE__*/React.createElement("p", null, "Ex: The start ... the end")))));
   }
 }
 PassageRefEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -33016,7 +33013,7 @@ PassageRefTargetEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$5,
+  InfoTip: InfoTip$4,
   NumberInput: NumberInput$4,
   RangeInput,
   TextListEditor: TextListEditor$1
@@ -33251,7 +33248,7 @@ class PlotterEditor extends React.Component {
       useArrowKeys: true,
       value: this.state.tickStep,
       onChange: this.handleChangeTickStep
-    })), /*#__PURE__*/React.createElement(InfoTip$5, null, /*#__PURE__*/React.createElement("p", null, "The difference between adjacent ticks."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Range:", " ", /*#__PURE__*/React.createElement(RangeInput, {
+    })), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "The difference between adjacent ticks."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Range:", " ", /*#__PURE__*/React.createElement(RangeInput, {
       placeholder: [0, 10],
       useArrowKeys: true,
       value: [this.state.minX, this.state.maxX],
@@ -33262,11 +33259,11 @@ class PlotterEditor extends React.Component {
       useArrowKeys: true,
       value: this.props.labelInterval,
       onChange: this.changeLabelInterval
-    })), /*#__PURE__*/React.createElement(InfoTip$5, null, /*#__PURE__*/React.createElement("p", null, "Which ticks to display the labels for. For instance, setting this to \"4\" will only show every 4th label (plus the last one)"))), this.props.type === "pic" && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Picture:", " ", /*#__PURE__*/React.createElement(BlurInput, {
+    })), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "Which ticks to display the labels for. For instance, setting this to \"4\" will only show every 4th label (plus the last one)"))), this.props.type === "pic" && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Picture:", " ", /*#__PURE__*/React.createElement(BlurInput, {
       className: "pic-url",
       value: this.props.picUrl,
       onChange: this.changePicUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$5, null, /*#__PURE__*/React.createElement("p", null, "Use the default picture of Earth, or insert the URL for a different picture using the \"Add image\" function."))), this.state.pic && this.state.pic.width !== this.state.pic.height && /*#__PURE__*/React.createElement("p", {
+    }), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "Use the default picture of Earth, or insert the URL for a different picture using the \"Add image\" function."))), this.state.pic && this.state.pic.width !== this.state.pic.height && /*#__PURE__*/React.createElement("p", {
       className: "warning"
     }, /*#__PURE__*/React.createElement("b", null, "Warning"), ": You are using a picture which is not square. This means the image will get distorted. You should probably crop it to be square.")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Categories:", " ", /*#__PURE__*/React.createElement(TextListEditor$1
     // eslint-disable-next-line react/no-string-refs
@@ -33290,14 +33287,14 @@ class PlotterEditor extends React.Component {
       type: "text",
       onChange: this.changeSnaps,
       defaultValue: this.props.snapsPerLine
-    })), /*#__PURE__*/React.createElement(InfoTip$5, null, /*#__PURE__*/React.createElement("p", null, "Creates the specified number of divisions between the horizontal lines. Fewer snaps between lines makes the graph easier for the student to create correctly."))), /*#__PURE__*/React.createElement("div", null, "Editing values:", " ", editingStates.map(editing => /*#__PURE__*/React.createElement("label", {
+    })), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "Creates the specified number of divisions between the horizontal lines. Fewer snaps between lines makes the graph easier for the student to create correctly."))), /*#__PURE__*/React.createElement("div", null, "Editing values:", " ", editingStates.map(editing => /*#__PURE__*/React.createElement("label", {
       key: editing
     }, /*#__PURE__*/React.createElement("input", {
       type: "radio",
       disabled: editing === CORRECT && this.props.static,
       checked: this.props.static ? editing === STARTING : this.state.editing === editing,
       onChange: e => this.changeEditing(editing)
-    }), editing)), /*#__PURE__*/React.createElement(InfoTip$5, null, /*#__PURE__*/React.createElement("p", null, "Use this toggle to switch between editing the correct answer (what the student will be graded on) and the starting values (what the student will see plotted when they start the problem). Note: These cannot be the same."), /*#__PURE__*/React.createElement("p", null, "In static mode, the starting values are rendered out to the displayed widget."))), /*#__PURE__*/React.createElement(Plotter, _extends({}, props, {
+    }), editing)), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "Use this toggle to switch between editing the correct answer (what the student will be graded on) and the starting values (what the student will see plotted when they start the problem). Note: These cannot be the same."), /*#__PURE__*/React.createElement("p", null, "In static mode, the starting values are rendered out to the displayed widget."))), /*#__PURE__*/React.createElement(Plotter, _extends({}, props, {
       starting: this.props[this.state.editing],
       onChange: this.handlePlotterChange
     })));
@@ -33326,7 +33323,7 @@ PlotterEditor.defaultProps = _extends({}, editorDefaults, {
 
 const {
   InlineIcon: InlineIcon$2,
-  PropCheckBox: PropCheckBox$2
+  PropCheckBox: PropCheckBox$1
 } = components;
 const {
   iconPlus: iconPlus$1,
@@ -33517,21 +33514,21 @@ class RadioEditor extends React.Component {
       target: "_blank"
     }, "Multiple choice style guide"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$2, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$1, {
       label: "Multiple selections",
       labelAlignment: "right",
       multipleSelect: this.props.multipleSelect,
       onChange: this.onMultipleSelectChange
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$2, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$1, {
       label: "Randomize order",
       labelAlignment: "right",
       randomize: this.props.randomize,
       onChange: this.props.onChange
     })), this.props.multipleSelect && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$2, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$1, {
       label: "Specify number correct",
       labelAlignment: "right",
       countChoices: this.props.countChoices,
@@ -33914,7 +33911,7 @@ SimpleMarkdownTesterEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$4,
+  InfoTip: InfoTip$3,
   NumberInput: NumberInput$2
 } = components;
 const maxTrials = 5000;
@@ -33950,7 +33947,7 @@ class SimulatorEditor extends React.Component {
       className: "graph-settings-axis-label",
       value: this.props.proportionLabel,
       onChange: _.partial(this.handleTargetValueChange, "proportionLabel")
-    }), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "This text will be displayed next to the box in which the user enters the sample proportion for their simulation. For example, if your question is about surveying for approval ratings, you might want this to say \"Sample approval rating\"."))), /*#__PURE__*/React.createElement("div", null, i18n$1._("Proportion or Percentage"), ":", /*#__PURE__*/React.createElement("select", {
+    }), /*#__PURE__*/React.createElement(InfoTip$3, null, /*#__PURE__*/React.createElement("p", null, "This text will be displayed next to the box in which the user enters the sample proportion for their simulation. For example, if your question is about surveying for approval ratings, you might want this to say \"Sample approval rating\"."))), /*#__PURE__*/React.createElement("div", null, i18n$1._("Proportion or Percentage"), ":", /*#__PURE__*/React.createElement("select", {
       className: "perseus-widget-dropdown",
       value: this.props.proportionOrPercentage,
       onChange: _.partial(this.handleTargetValueChange, "proportionOrPercentage")
@@ -33960,13 +33957,13 @@ class SimulatorEditor extends React.Component {
     }, "Proportion"), /*#__PURE__*/React.createElement("option", {
       key: "percentage",
       value: "percentage"
-    }, "Percentage")), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "Do you want the user to describe their simulation in terms of a proportion or a percentage?"))), /*#__PURE__*/React.createElement("div", null, i18n$1._("Number of trials"), ":", /*#__PURE__*/React.createElement(NumberInput$2, {
+    }, "Percentage")), /*#__PURE__*/React.createElement(InfoTip$3, null, /*#__PURE__*/React.createElement("p", null, "Do you want the user to describe their simulation in terms of a proportion or a percentage?"))), /*#__PURE__*/React.createElement("div", null, i18n$1._("Number of trials"), ":", /*#__PURE__*/React.createElement(NumberInput$2, {
       value: this.props.numTrials,
       checkValidity: val => {
         return val >= 0 && val <= maxTrials;
       },
       onChange: this.change("numTrials")
-    }), /*#__PURE__*/React.createElement(InfoTip$4, null, /*#__PURE__*/React.createElement("p", null, "This controls the number of trials used in the simulation. For example, if you set this to 50, then the survey will be conducted 50 times. Warning: setting this too high (i.e., greater than 5000 or so) will freeze the page."))));
+    }), /*#__PURE__*/React.createElement(InfoTip$3, null, /*#__PURE__*/React.createElement("p", null, "This controls the number of trials used in the simulation. For example, if you set this to 50, then the survey will be conducted 50 times. Warning: setting this too high (i.e., greater than 5000 or so) will freeze the page."))));
   }
 }
 SimulatorEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -33987,8 +33984,8 @@ SimulatorEditor.defaultProps = {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$3,
-  PropCheckBox: PropCheckBox$1,
+  InfoTip: InfoTip$2,
+  PropCheckBox,
   TextListEditor
 } = components;
 const HORIZONTAL = "horizontal";
@@ -34007,7 +34004,7 @@ class SorterEditor extends React.Component {
   }
   render() {
     const editor = this;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$3, null, /*#__PURE__*/React.createElement("p", null, "Enter the correct answer (in the correct order) here. The preview on the right will have the cards in a randomized order, which is how the student will see them."))), /*#__PURE__*/React.createElement(TextListEditor, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$2, null, /*#__PURE__*/React.createElement("p", null, "Enter the correct answer (in the correct order) here. The preview on the right will have the cards in a randomized order, which is how the student will see them."))), /*#__PURE__*/React.createElement(TextListEditor, {
       options: this.props.correct
       // eslint-disable-next-line react/jsx-no-bind
       ,
@@ -34026,11 +34023,11 @@ class SorterEditor extends React.Component {
       value: HORIZONTAL
     }, "Horizontal"), /*#__PURE__*/React.createElement("option", {
       value: VERTICAL
-    }, "Vertical"))), /*#__PURE__*/React.createElement(InfoTip$3, null, /*#__PURE__*/React.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text and larger images."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$1, {
+    }, "Vertical"))), /*#__PURE__*/React.createElement(InfoTip$2, null, /*#__PURE__*/React.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text and larger images."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox, {
       label: "Padding:",
       padding: this.props.padding,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$3, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
+    }), /*#__PURE__*/React.createElement(InfoTip$2, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
 }
 SorterEditor.propTypes = {
@@ -34047,7 +34044,7 @@ SorterEditor.defaultProps = {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$2,
+  InfoTip: InfoTip$1,
   NumberInput: NumberInput$1
 } = components;
 const Table = TableWidget.widget;
@@ -34135,7 +34132,7 @@ class TableEditor extends React.Component {
         }
       },
       useArrowKeys: true
-    }))), /*#__PURE__*/React.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React.createElement(InfoTip$2, null, /*#__PURE__*/React.createElement("p", null, "The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, tableProps)));
+    }))), /*#__PURE__*/React.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React.createElement(InfoTip$1, null, /*#__PURE__*/React.createElement("p", null, "The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, tableProps)));
   }
 }
 TableEditor.propTypes = {
@@ -34159,776 +34156,6 @@ TableEditor.defaultProps = function () {
   };
 }();
 
-const {
-  Graph,
-  InfoTip: InfoTip$1,
-  PropCheckBox
-} = components;
-const Transformer = TransformerWidget.widget;
-const {
-  deepEq,
-  getGridStep
-} = Util;
-function arraySum(array) {
-  return _.reduce(array, function (memo, arg) {
-    return memo + arg;
-  }, 0);
-}
-const defaultBackgroundImage = {
-  url: null
-};
-
-/* Scales a distance from the default range of
- * [-10, 10] to a given props.range pair
- *
- * Used for sizing various transformation tools
- * (rotation handle, dilation circle)
- */
-function scaleToRange(dist, range) {
-  const spreadX = range[0][1] - range[0][0];
-  const spreadY = range[1][1] - range[1][0];
-  return dist * Math.max(spreadX, spreadY) / 20;
-}
-function orderInsensitiveCoordsEqual(coords1, coords2) {
-  coords1 = _.clone(coords1).sort(point.compare);
-  coords2 = _.clone(coords2).sort(point.compare);
-  return _.all(_.map(coords1, function (coord1, i) {
-    const coord2 = coords2[i];
-    return point.equal(coord1, coord2);
-  }));
-}
-const defaultGraphProps = function defaultGraphProps(setProps, boxSize) {
-  setProps = setProps || {};
-  const labels = setProps.labels || ["x", "y"];
-  const range = setProps.range || [[-10, 10], [-10, 10]];
-  const step = setProps.step || [1, 1];
-  const gridStep = setProps.gridStep || getGridStep(range, step, boxSize);
-  return {
-    box: [boxSize, boxSize],
-    labels: labels,
-    range: range,
-    step: step,
-    gridStep: gridStep,
-    valid: true,
-    backgroundImage: defaultBackgroundImage,
-    markings: "grid",
-    showProtractor: false
-  };
-};
-const defaultTransformerProps = {
-  apiOptions: ApiOptions.defaults,
-  gradeEmpty: false,
-  graphMode: "interactive",
-  listMode: "dynamic",
-  graph: {},
-  tools: {
-    translation: {
-      enabled: true,
-      required: false,
-      constraints: {}
-    },
-    rotation: {
-      enabled: true,
-      required: false,
-      constraints: {
-        fixed: false
-      },
-      coord: [1, 6]
-    },
-    reflection: {
-      enabled: true,
-      required: false,
-      constraints: {
-        fixed: false
-      },
-      coords: [[2, -4], [2, 2]]
-    },
-    dilation: {
-      enabled: true,
-      required: false,
-      constraints: {
-        fixed: false
-      },
-      coord: [6, 6]
-    }
-  },
-  drawSolutionShape: true,
-  starting: {
-    shape: {
-      type: "polygon-3",
-      coords: [[2, 2], [2, 6], [7, 2]]
-    },
-    transformations: []
-  },
-  correct: {
-    shape: {
-      type: "polygon-3",
-      coords: [[2, 2], [2, 6], [7, 2]]
-    },
-    transformations: []
-  }
-};
-class ToolSettings extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.changeConstraints = changed => {
-      const newConstraints = _.extend({}, this.props.constraints, changed);
-      this.props.onChange({
-        constraints: newConstraints
-      });
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.name, ":", " ", /*#__PURE__*/React.createElement(PropCheckBox, {
-      label: "enabled:",
-      enabled: this.props.settings.enabled,
-      onChange: this.props.onChange
-    }), " ", this.props.settings.enabled && /*#__PURE__*/React.createElement(PropCheckBox, {
-      label: "required:",
-      required: this.props.settings.required,
-      onChange: this.props.onChange
-    }), this.props.settings.enabled && /*#__PURE__*/React.createElement(InfoTip$1, null, "'Required' will only grade the answer as correct if the student has used at least one such transformation."), " ", this.props.allowFixed && this.props.settings.enabled && /*#__PURE__*/React.createElement(PropCheckBox, {
-      label: "fixed:",
-      fixed: this.props.settings.constraints.fixed,
-      onChange: this.changeConstraints
-    }), this.props.allowFixed && this.props.settings.enabled && /*#__PURE__*/React.createElement(InfoTip$1, null, "Enable 'fixed' to prevent the student from repositioning the tool. The tool will appear in the position at which it is placed in the editor below."));
-  }
-}
-ToolSettings.defaultProps = {
-  allowFixed: true
-};
-class TransformationExplorerSettings extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.getMode = () => {
-      return this.props.graphMode + "," + this.props.listMode;
-    };
-    this.changeMode = e => {
-      const selected = e.target.value;
-      const modes = selected.split(",");
-      this.props.onChange({
-        graphMode: modes[0],
-        listMode: modes[1]
-      });
-    };
-    this.changeHandlerFor = toolName => {
-      return change => {
-        const newTools = _.clone(this.props.tools);
-        newTools[toolName] = _.extend({}, this.props.tools[toolName], change);
-        this.props.onChange({
-          tools: newTools
-        });
-      };
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "transformer-settings"
-    }, /*#__PURE__*/React.createElement("div", null, " ", "Mode:", " ", /*#__PURE__*/React.createElement("select", {
-      value: this.getMode(),
-      onChange: this.changeMode
-    }, /*#__PURE__*/React.createElement("option", {
-      value: "interactive,dynamic"
-    }, " ", "Exploration with text", " "), /*#__PURE__*/React.createElement("option", {
-      value: "interactive,static"
-    }, " ", "Exploration without text", " "), /*#__PURE__*/React.createElement("option", {
-      value: "dynamic,interactive"
-    }, " ", "Formal with movement", " "), /*#__PURE__*/React.createElement("option", {
-      value: "static,interactive"
-    }, " ", "Formal without movement", " ")), /*#__PURE__*/React.createElement(InfoTip$1, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "Exploration:"), " Students create transformations with tools on the graph.", " "), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "Formal with movement:"), " Students specify transformations mathematically in the transformation list. Graph shows the results of these transformations.", " "), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "Formal without movement:"), " Students specify transformations mathematically in the transformation list. Graph does not update.", " ")))), /*#__PURE__*/React.createElement(ToolSettings, {
-      name: "Translations",
-      settings: this.props.tools.translation,
-      allowFixed: false,
-      onChange: this.changeHandlerFor("translation")
-    }), /*#__PURE__*/React.createElement(ToolSettings, {
-      name: "Rotations",
-      settings: this.props.tools.rotation,
-      onChange: this.changeHandlerFor("rotation")
-    }), /*#__PURE__*/React.createElement(ToolSettings, {
-      name: "Reflections",
-      settings: this.props.tools.reflection,
-      onChange: this.changeHandlerFor("reflection")
-    }), /*#__PURE__*/React.createElement(ToolSettings, {
-      name: "Dilations",
-      settings: this.props.tools.dilation,
-      onChange: this.changeHandlerFor("dilation")
-    }), /*#__PURE__*/React.createElement(PropCheckBox, {
-      label: "Draw Solution:",
-      drawSolutionShape: this.props.drawSolutionShape,
-      onChange: this.props.onChange
-    }));
-  }
-}
-const ShapeTypes = {
-  getPointCountForType: function (type) {
-    const splitType = type.split("-");
-    if (splitType[0] === "polygon") {
-      return splitType[1] || 3;
-    }
-    if (splitType[0] === "line" || splitType[0] === "lineSegment") {
-      return 2;
-    }
-    if (splitType[0] === "angle") {
-      return 3;
-    }
-    if (splitType[0] === "circle") {
-      return 2;
-    }
-    if (splitType[0] === "point") {
-      return 1;
-    }
-  },
-  addMovableShape: function (graphie, options) {
-    if (options.editable && options.translatable) {
-      throw new PerseusError("It doesn't make sense to have a movable shape " + "where you can stretch the points and translate them " + "simultaneously.", Errors.InvalidInput, {
-        metadata: {
-          options
-        }
-      });
-    }
-    const points = _.map(options.shape.coords, function (coord) {
-      let isMoving = false;
-      let previousCoord = coord;
-      const onMove = function onMove(x, y) {
-        if (!isMoving) {
-          previousCoord = currentPoint.coord;
-          isMoving = true;
-        }
-        let moveVector = vector.subtract([x, y], currentPoint.coord);
-
-        // Translate from (x, y) semantics to (dX, dY) semantics
-        // This is more useful for translations on multiple points,
-        // where we care about how the points moved, not where any
-        // individual point ended up
-        if (options.onMove) {
-          moveVector = options.onMove(moveVector[0], moveVector[1]);
-        }
-
-        // Perform a translation on all points in this shape when
-        // any point moves
-        if (options.translatable) {
-          _.each(points, function (point) {
-            // The point itself will be updated by the
-            // movablePoint class, so only translate the other
-            // points
-            if (point !== currentPoint) {
-              point.setCoord(vector.add(point.coord, moveVector));
-            }
-          });
-        }
-
-        // Update our shape and our currentPoint
-        // Without this, some shapes (circles, angles) appear
-        // "bouncy" as they are updated with currentPoint at the
-        // current mouse coordinate (oldCoord), rather than newCoord
-        const oldCoord = currentPoint.coord;
-        const newCoord = vector.add(currentPoint.coord, moveVector);
-        // Temporarily change our coordinate so that
-        // shape.update() sees the new coordinate
-        currentPoint.coord = newCoord;
-        shape.update();
-        // ...But don't break onMove, which assumes it
-        // is the only thing changing our coord
-        currentPoint.coord = oldCoord;
-        return newCoord;
-      };
-      const onMoveEnd = function onMoveEnd() {
-        // onMove isn't guaranteed to be called before onMoveEnd, so
-        // we have to take into account that we may not have moved and
-        // set previousCoord.
-        if (options.onMoveEnd && isMoving) {
-          isMoving = false;
-          // We don't use the supplied x and y parameters here
-          // because MovablePoint's onMoveEnd semantics suck.
-          // It returns the mouseX, mouseY without processing them
-          // through onMove, leaving us with weird fractional moves
-          const change = vector.subtract(currentPoint.coord, previousCoord);
-          options.onMoveEnd(change[0], change[1]);
-        }
-        shape.update();
-      };
-      const currentPoint = graphie.addMovablePoint({
-        coord: coord,
-        normalStyle: options.normalPointStyle,
-        highlightStyle: options.highlightPointStyle,
-        constraints: {
-          fixed: !options.translatable && !options.editable
-        },
-        visible: options.showPoints,
-        snapX: options.snap && options.snap[0] || 0,
-        snapY: options.snap && options.snap[1] || 0,
-        bounded: false,
-        // Don't bound it when placing it on the graph
-        onMove: onMove,
-        onMoveEnd: onMoveEnd
-      });
-
-      // Bound it when moving
-      // We can't set this earlier, because doing so would mean any
-      // points outside of the graph would be moved into a moved into
-      // a position that doesn't preserve the shape
-      currentPoint.bounded = true;
-      return currentPoint;
-    });
-    const shape = ShapeTypes.addShape(graphie, options, points);
-    const removeShapeWithoutPoints = shape.remove;
-    shape.remove = function () {
-      removeShapeWithoutPoints.apply(shape);
-      _.invoke(points, "remove");
-    };
-    return shape;
-  },
-  addShape: function (graphie, options, points) {
-    points = points || options.shape.coords;
-    const types = ShapeTypes._typesOf(options.shape);
-    const typeOptions = options.shape.options || ShapeTypes.defaultOptions(types);
-    const shapes = ShapeTypes._mapTypes(types, points, function (type, points, i) {
-      const shapeOptions = _.extend({}, options, typeOptions[i]);
-      return ShapeTypes._addType(graphie, type, points, shapeOptions);
-    });
-    const updateFuncs = _.filter(_.pluck(shapes, "update"), _.identity);
-    const update = function update() {
-      _.invoke(updateFuncs, "call");
-    };
-    const removeFuncs = _.filter(_.pluck(shapes, "remove"), _.identity);
-    const remove = function remove() {
-      _.invoke(removeFuncs, "call");
-    };
-    const getOptions = function getOptions() {
-      return _.map(shapes, function (shape) {
-        if (shape.getOptions) {
-          return shape.getOptions();
-        }
-        return {};
-      });
-    };
-    const toJSON = function toJSON() {
-      const coords = _.map(points, function (pt) {
-        if (_.isArray(pt)) {
-          return pt;
-        }
-        return pt.coord;
-      });
-      return {
-        type: types,
-        coords: coords,
-        options: getOptions()
-      };
-    };
-    return {
-      type: types,
-      points: points,
-      update: update,
-      remove: remove,
-      toJSON: toJSON,
-      getOptions: getOptions
-    };
-  },
-  equal: function (shape1, shape2) {
-    const types1 = ShapeTypes._typesOf(shape1);
-    const types2 = ShapeTypes._typesOf(shape2);
-    if (types1.length !== types2.length) {
-      return false;
-    }
-    const shapes1 = ShapeTypes._mapTypes(types1, shape1.coords, ShapeTypes._combine);
-    const shapes2 = ShapeTypes._mapTypes(types2, shape2.coords, ShapeTypes._combine);
-    return _.all(_.map(shapes1, function (partialShape1, i) {
-      const partialShape2 = shapes2[i];
-      if (partialShape1.type !== partialShape2.type) {
-        return false;
-      }
-      return ShapeTypes._forType(partialShape1.type).equal(partialShape1.coords, partialShape2.coords);
-    }));
-  },
-  _typesOf: function (shape) {
-    let types = shape.type;
-    if (!_.isArray(types)) {
-      types = [types];
-    }
-    return _.map(types, function (type) {
-      if (type === "polygon") {
-        return "polygon-3";
-      }
-      return type;
-    });
-  },
-  defaultOptions: function (types) {
-    return _.map(types, function (type) {
-      const typeDefaultOptions = ShapeTypes._forType(type).defaultOptions;
-      return _.extend({}, typeDefaultOptions);
-    });
-  },
-  _forType: function (type) {
-    const baseType = type.split("-")[0];
-    return ShapeTypes[baseType];
-  },
-  _mapTypes: function (types, points, func, context) {
-    return _.map(types, function (type, i) {
-      const pointCount = ShapeTypes.getPointCountForType(type);
-      const currentPoints = _.first(points, pointCount);
-      points = _.rest(points, pointCount);
-      return func.call(context, type, currentPoints, i);
-    });
-  },
-  _addType: function (graphie, type, points, options) {
-    const lineCoords = _.isArray(points[0]) ? {
-      coordA: points[0],
-      coordZ: points[1]
-    } : {
-      pointA: points[0],
-      pointZ: points[1]
-    };
-    type = type.split("-")[0];
-    if (type === "polygon") {
-      const polygon = graphie.addMovablePolygon(_.extend({}, options, {
-        fixed: !options.editable,
-        snapX: options.snap && options.snap[0] || 0,
-        snapY: options.snap && options.snap[1] || 0,
-        points: points,
-        constrainToGraph: false
-      }));
-      return {
-        update: polygon.transform.bind(polygon),
-        remove: polygon.remove.bind(polygon)
-      };
-    }
-    if (type === "line" || type === "lineSegment") {
-      const line = graphie.addMovableLineSegment(_.extend({}, options, lineCoords, {
-        movePointsWithLine: true,
-        fixed: true,
-        constraints: {
-          fixed: true
-        },
-        extendLine: type === "line"
-      }));
-
-      // TODO(jack): Hide points on uneditable lines when translation
-      // is a vector.
-      // We can't just remove the points yet, because they are the
-      // translation handle for the line.
-      return {
-        update: line.transform.bind(line, true),
-        remove: line.remove.bind(line)
-      };
-    }
-    if (type === "angle") {
-      // If this angle is editable, we want to be able to make angles
-      // both larger and smaller than 180 degrees.
-      // If this angle is not editable, it should always maintain
-      // it's angle measure, even if it is reflected (causing the
-      // clockwise-ness of the points to change)
-      const shouldChangeReflexivity = options.editable ? null : false;
-      const angle = graphie.addMovableAngle({
-        angleLabel: "$deg0",
-        fixed: true,
-        points: points,
-        normalStyle: options.normalStyle,
-        reflex: options.reflex
-      });
-
-      // Hide non-vertex points on uneditable angles
-      if (!_.isArray(points[0]) && !options.editable) {
-        points[0].remove();
-        points[2].remove();
-      }
-      return {
-        update: angle.update.bind(angle, shouldChangeReflexivity),
-        remove: angle.remove.bind(angle),
-        getOptions: function () {
-          return {
-            reflex: angle.isReflex()
-          };
-        }
-      };
-    }
-    if (type === "circle") {
-      let perimeter = {
-        // temporary object for the first removal
-        remove: _.identity
-      };
-      const redrawPerim = function redrawPerim() {
-        const coord0 = points[0].coord || points[0];
-        const coord1 = points[1].coord || points[1];
-        const radius = point.distanceToPoint(coord0, coord1);
-        // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-        perimeter.remove();
-        perimeter = graphie.circle(coord0, radius, _.extend({
-          stroke: KhanColors.DYNAMIC,
-          "stroke-width": 2
-        }, options.normalStyle));
-      };
-      redrawPerim();
-      if (points[1].remove && !options.editable) {
-        points[1].remove();
-      }
-      return {
-        update: redrawPerim,
-        remove: function () {
-          // Not _.bind because the remove function changes
-          // when the perimeter is redrawn
-          // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-          perimeter.remove();
-        }
-      };
-    }
-    if (type === "point") {
-      // do nothing
-      return {
-        update: null,
-        remove: null
-      };
-    }
-    throw new PerseusError("Invalid shape type " + type, Errors.InvalidInput);
-  },
-  _combine: function (type, coords) {
-    return {
-      type: type,
-      coords: coords
-    };
-  },
-  polygon: {
-    equal: orderInsensitiveCoordsEqual
-  },
-  line: {
-    equal: line.equal
-  },
-  lineSegment: {
-    equal: orderInsensitiveCoordsEqual
-  },
-  angle: {
-    equal: function (points1, points2) {
-      if (!point.equal(points1[1], points2[1])) {
-        return false;
-      }
-      const line1_0 = [points1[1], points1[0]];
-      const line1_2 = [points1[1], points1[2]];
-      const line2_0 = [points2[1], points2[0]];
-      const line2_2 = [points2[1], points2[2]];
-      const equalUnflipped =
-      // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'. | TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'.
-      ray.equal(line1_0, line2_0) && ray.equal(line1_2, line2_2);
-      const equalFlipped =
-      // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'. | TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'.
-      ray.equal(line1_0, line2_2) && ray.equal(line1_2, line2_0);
-      return equalUnflipped || equalFlipped;
-    },
-    defaultOptions: {
-      reflex: false
-    }
-  },
-  circle: {
-    equal: function (points1, points2) {
-      const radius1 = point.distanceToPoint(points1[0], points1[1]);
-      const radius2 = point.distanceToPoint(points2[0], points2[1]);
-      return point.equal(points1[0], points2[0]) && number.equal(radius1, radius2);
-    }
-  },
-  point: {
-    equal: point.equal
-  }
-};
-class TransformationsShapeEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
-    /* Return the option string for a given type */
-    this.getTypeString = type => {
-      if (_.isArray(type)) {
-        return _.map(type, this.getTypeString).join(",");
-      }
-      if (type === "polygon") {
-        return "polygon-" + this.props.shape.coords.length;
-      }
-      return type;
-    };
-    /* Change the type on the window event e
-     *
-     * e.target.value is the new type string
-     */
-    this.changeType = e => {
-      const types = String(e.target.value).split(",");
-      const pointCount = arraySum(_.map(types, ShapeTypes.getPointCountForType));
-
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'props' does not exist on type 'ReactInstance'.
-      const radius = scaleToRange(4, this.refs.graph.props.range);
-      const offset = (1 / 2 - 1 / pointCount) * 180;
-      const coords = _.times(pointCount, function (i) {
-        return point.rotateDeg([radius, 0], 360 * i / pointCount + offset);
-      });
-      this.props.onChange({
-        shape: {
-          type: types,
-          coords: coords,
-          options: ShapeTypes.defaultOptions(types)
-        }
-      });
-    };
-    this.updateCoords = () => {
-      this.props.onChange({
-        // @ts-expect-error - TS2339 - Property 'shape' does not exist on type 'TransformationsShapeEditor'.
-        shape: this.shape.toJSON()
-      });
-    };
-    this.setupGraphie = graphie => {
-      // @ts-expect-error - TS2339 - Property 'shape' does not exist on type 'TransformationsShapeEditor'.
-      this.shape = ShapeTypes.addMovableShape(graphie, {
-        editable: true,
-        snap: graphie.snap,
-        shape: this.props.shape,
-        onMoveEnd: this.updateCoords
-      });
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Graph
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "graph",
-      box: this.props.graph.box,
-      range: this.props.graph.range,
-      labels: this.props.graph.labels,
-      step: this.props.graph.step,
-      gridStep: this.props.graph.gridStep,
-      markings: this.props.graph.markings,
-      backgroundImage: this.props.graph.backgroundImage,
-      onGraphieUpdated: this.setupGraphie
-    }), /*#__PURE__*/React.createElement("select", {
-      key: "type-select",
-      value: this.getTypeString(this.props.shape.type),
-      onChange: this.changeType
-    }, /*#__PURE__*/React.createElement("option", {
-      value: "polygon-3"
-    }, "Triangle"), /*#__PURE__*/React.createElement("option", {
-      value: "polygon-4"
-    }, "Quadrilateral"), /*#__PURE__*/React.createElement("option", {
-      value: "polygon-5"
-    }, "Pentagon"), /*#__PURE__*/React.createElement("option", {
-      value: "polygon-6"
-    }, "Hexagon"), /*#__PURE__*/React.createElement("option", {
-      value: "line"
-    }, "Line"), /*#__PURE__*/React.createElement("option", {
-      value: "line,line"
-    }, "2 lines"), /*#__PURE__*/React.createElement("option", {
-      value: "lineSegment"
-    }, "Line segment"), /*#__PURE__*/React.createElement("option", {
-      value: "lineSegment,lineSegment"
-    }, " ", "2 line segments", " "), /*#__PURE__*/React.createElement("option", {
-      value: "angle"
-    }, "Angle"), /*#__PURE__*/React.createElement("option", {
-      value: "circle"
-    }, "Circle")));
-  }
-  componentDidMount() {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-    this.setupGraphie(this.refs.graph.graphie());
-  }
-  componentDidUpdate(prevProps) {
-    if (!deepEq(prevProps.shape, this.props.shape)) {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'reset' does not exist on type 'ReactInstance'.
-      this.refs.graph.reset();
-    }
-  }
-}
-class TransformerEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
-    // propagate a props change on our graph settings to
-    // this.props.graph
-    this.changeGraph = (graphChanges, callback) => {
-      const newGraph = _.extend({}, this.props.graph, graphChanges);
-      this.props.onChange({
-        graph: newGraph
-      }, callback);
-    };
-    // propagate a props change on our starting graph to
-    // this.props.starting
-    this.changeStarting = startingChanges => {
-      const newStarting = _.extend({}, this.props.starting, startingChanges);
-      this.props.onChange({
-        starting: newStarting
-      });
-    };
-    // propagate a transformations change onto correct.transformations
-    this.changeTransformer = (changes, callback) => {
-      if (changes.transformations) {
-        changes.correct = _extends({}, this.props.correct, {
-          transformations: changes.transformations
-        });
-        delete changes.transformations;
-      }
-      this.props.onChange(changes, callback);
-    };
-    this.serialize = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getEditorJSON' does not exist on type 'ReactInstance'.
-      const json = this.refs.explorer.getEditorJSON();
-      json.correct = json.answer;
-      delete json.answer;
-      return json;
-    };
-  }
-  render() {
-    // Fill in any missing value in this.props.graph
-    // this can happen because the graph json doesn't include
-    // box, for example
-    const graph = _.extend(defaultGraphProps(this.props.graph, 340), this.props.graph);
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox, {
-      label: "Grade empty answers as wrong:",
-      gradeEmpty: this.props.gradeEmpty,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$1, null, /*#__PURE__*/React.createElement("p", null, "We generally do not grade empty answers. This usually works well, but sometimes can result in giving away part of an answer in a multi-part question."), /*#__PURE__*/React.createElement("p", null, "If this is a multi-part question (there is another widget), you probably want to enable this option. Otherwise, you should leave it disabled."), /*#__PURE__*/React.createElement("p", null, "Confused? Talk to Elizabeth."))), /*#__PURE__*/React.createElement("div", null, "Graph settings:"), /*#__PURE__*/React.createElement(GraphSettings, {
-      box: graph.box,
-      labels: graph.labels,
-      range: graph.range,
-      step: graph.step,
-      gridStep: graph.gridStep,
-      valid: graph.valid,
-      backgroundImage: graph.backgroundImage,
-      markings: graph.markings,
-      showProtractor: graph.showProtractor,
-      onChange: this.changeGraph
-    }), /*#__PURE__*/React.createElement("div", null, "Transformation settings:"), /*#__PURE__*/React.createElement(TransformationExplorerSettings
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "transformationSettings",
-      graphMode: this.props.graphMode,
-      listMode: this.props.listMode,
-      tools: this.props.tools,
-      drawSolutionShape: this.props.drawSolutionShape,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement("div", null, "Starting location:"), /*#__PURE__*/React.createElement(TransformationsShapeEditor
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "shapeEditor",
-      graph: graph,
-      shape: this.props.starting.shape,
-      onChange: this.changeStarting,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
-    }), /*#__PURE__*/React.createElement("div", null, "Solution transformations:"), /*#__PURE__*/React.createElement(Transformer
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "explorer",
-      graph: graph,
-      graphMode: this.props.graphMode,
-      listMode: this.props.listMode,
-      gradeEmpty: this.props.gradeEmpty,
-      tools: this.props.tools,
-      drawSolutionShape: this.props.drawSolutionShape,
-      starting: this.props.starting,
-      correct: this.props.starting,
-      transformations: this.props.correct.transformations,
-      onChange: this.changeTransformer,
-      trackInteraction: () => {}
-    }));
-  }
-}
-// TODO (jack): These should be refactored into a nice object at the top
-// so that we don't have all this duplication
-TransformerEditor.defaultProps = defaultTransformerProps;
-TransformerEditor.widgetName = "transformer";
-
 const {
   InlineIcon,
   NumberInput
@@ -35210,7 +34437,7 @@ VideoEditor.defaultProps = {
   location: ""
 };
 
-var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, LightsPuzzleEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, ReactionDiagramWidgetEditor, SequenceEditor, SimpleMarkdownTesterEditor, SimulatorEditor, SorterEditor, TableEditor, TransformerEditor, UnitInputEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
+var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, LightsPuzzleEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, ReactionDiagramWidgetEditor, SequenceEditor, SimpleMarkdownTesterEditor, SimulatorEditor, SorterEditor, TableEditor, UnitInputEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
 
 class TextInput extends React.Component {
   constructor(...args) {
@@ -35426,6 +34653,8 @@ var AllWidgets = [...widgets, ...testingWidgets];
 
 Widgets.registerEditors(AllEditors);
 Widgets.registerWidgets(AllWidgets);
+Widgets.replaceEditor("transformer", "deprecated-standin");
+Widgets.replaceWidget("transformer", "deprecatd-standin");
 
 export { AllEditors, AllWidgets, ArticleDiff, ArticleEditor, DeviceFramer, Editor, EditorPage, IframeContentRenderer, ItemDiff, MultiRendererEditor, StatefulArticleEditor, StatefulEditorPage, StructuredItemDiff, ViewportResizer, i18n, libVersion };
 //# sourceMappingURL=index.js.map