@khanacademy/perseus-editor 4.4.1 → 5.0.0

package/dist/es/index.js

@@ -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 = "4.4.1";
+const libVersion = "5.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -201,7 +201,7 @@ const JsonEditor = createReactClass({
 });
 
 const {
-  InlineIcon: InlineIcon$c
+  InlineIcon: InlineIcon$b
 } = components;
 class SectionControlButton extends React.Component {
   render() {
@@ -224,7 +224,7 @@ class SectionControlButton extends React.Component {
       hovered,
       focused,
       pressed
-    }) => /*#__PURE__*/React.createElement(InlineIcon$c, icon));
+    }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
 const styles$g = StyleSheet.create({
@@ -20550,12 +20550,12 @@ const DragTarget = createReactClass({
 });
 
 const {
-  InlineIcon: InlineIcon$b
+  InlineIcon: InlineIcon$a
 } = components;
 const {
   iconChevronDown: iconChevronDown$1,
   iconChevronRight,
-  iconTrash: iconTrash$8
+  iconTrash: iconTrash$7
 } = icons;
 const _upgradeWidgetInfo = props => {
   // We can't call serialize here because this.refs.widget
@@ -20657,7 +20657,7 @@ class WidgetEditor extends React.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$b, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$b, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement("input", {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement("input", {
       type: "button"
       // @ts-expect-error - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
       ,
@@ -20671,7 +20671,7 @@ class WidgetEditor extends React.Component {
     }, supportedAlignments.map(alignment => /*#__PURE__*/React.createElement("option", {
       key: alignment
     }, alignment))), /*#__PURE__*/React.createElement(SectionControlButton, {
-      icon: iconTrash$8,
+      icon: iconTrash$7,
       onClick: () => {
         this.props.onRemove();
       },
@@ -21762,13 +21762,13 @@ class IframeContentRenderer extends React.Component {
 
 const {
   HUD: HUD$1,
-  InlineIcon: InlineIcon$a
+  InlineIcon: InlineIcon$9
 } = components;
 const {
-  iconCircleArrowDown: iconCircleArrowDown$2,
-  iconCircleArrowUp: iconCircleArrowUp$2,
-  iconPlus: iconPlus$5,
-  iconTrash: iconTrash$7
+  iconCircleArrowDown: iconCircleArrowDown$1,
+  iconCircleArrowUp: iconCircleArrowUp$1,
+  iconPlus: iconPlus$4,
+  iconTrash: iconTrash$6
 } = icons;
 class ArticleEditor extends React.Component {
   constructor(...args) {
@@ -21868,25 +21868,25 @@ class ArticleEditor extends React.Component {
           float: "right"
         }
       }, sectionImageUploadGenerator(i), /*#__PURE__*/React.createElement(SectionControlButton, {
-        icon: iconPlus$5,
+        icon: iconPlus$4,
         onClick: () => {
           this._handleAddSectionAfter(i);
         },
         title: "Add a new section after this one"
       }), i + 1 < sections.length && /*#__PURE__*/React.createElement(SectionControlButton, {
-        icon: iconCircleArrowDown$2,
+        icon: iconCircleArrowDown$1,
         onClick: () => {
           this._handleMoveSectionLater(i);
         },
         title: "Move this section down"
       }), i > 0 && /*#__PURE__*/React.createElement(SectionControlButton, {
-        icon: iconCircleArrowUp$2,
+        icon: iconCircleArrowUp$1,
         onClick: () => {
           this._handleMoveSectionEarlier(i);
         },
         title: "Move this section up"
       }), /*#__PURE__*/React.createElement(SectionControlButton, {
-        icon: iconTrash$7,
+        icon: iconTrash$6,
         onClick: () => {
           const msg = "Are you sure you " + "want to delete section " + (i + 1) + "?";
           /* eslint-disable no-alert */
@@ -21921,7 +21921,7 @@ class ArticleEditor extends React.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React.createElement(InlineIcon$a, iconPlus$5), " Add a section")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React.createElement(HUD$1, {
@@ -22069,7 +22069,7 @@ ArticleEditor.defaultProps = {
  */
 const {
   ButtonGroup: ButtonGroup$5,
-  InlineIcon: InlineIcon$9
+  InlineIcon: InlineIcon$8
 } = components;
 const {
   devices
@@ -22087,9 +22087,9 @@ class ViewportResizer extends React.Component {
     };
   }
   render() {
-    const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$9, iconMobilePhone), " Phone");
-    const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$9, iconTablet), " Tablet");
-    const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$9, iconDesktop), " Desktop");
+    const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconMobilePhone), " Phone");
+    const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconTablet), " Tablet");
+    const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconDesktop), " Desktop");
 
     // TODO(david): Allow input of custom viewport sizes.
     return /*#__PURE__*/React.createElement("span", {
@@ -23444,14 +23444,14 @@ class StructuredItemDiff extends React.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
-  InlineIcon: InlineIcon$8
+  InfoTip: InfoTip$l,
+  InlineIcon: InlineIcon$7
 } = components;
 const {
-  iconCircleArrowDown: iconCircleArrowDown$1,
-  iconCircleArrowUp: iconCircleArrowUp$1,
-  iconPlus: iconPlus$4,
-  iconTrash: iconTrash$6
+  iconCircleArrowDown,
+  iconCircleArrowUp,
+  iconPlus: iconPlus$3,
+  iconTrash: iconTrash$5
 } = icons;
 /* Renders a hint editor box
  *
@@ -23512,11 +23512,11 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isLast ? "hidden" : "",
       onClick: _.partial(this.props.onMove, 1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconCircleArrowDown$1)), " ", /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowDown)), " ", /*#__PURE__*/React.createElement("button", {
       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$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$l, 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'.
       ,
@@ -23526,7 +23526,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconTrash$6), "Remove this hint", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
   }
 }
 HintEditor.defaultProps = {
@@ -23757,7 +23757,7 @@ class CombinedHintsEditor extends React.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconPlus$4), " Add a hint"))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
@@ -23769,7 +23769,7 @@ CombinedHintsEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$k
 } = components;
 class ItemExtrasEditor extends React.Component {
   constructor(props) {
@@ -23932,7 +23932,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$k, null, props.infoTip));
 
 const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {
@@ -24664,11 +24664,11 @@ const _excluded$2 = ["depth"],
   _excluded4 = ["shape", "data", "path", "actions"],
   _excluded5 = ["shape", "data", "path"];
 const {
-  InlineIcon: InlineIcon$7
+  InlineIcon: InlineIcon$6
 } = components;
 const {
   iconChevronDown,
-  iconTrash: iconTrash$5
+  iconTrash: iconTrash$4
 } = icons;
 const {
   MultiRenderer
@@ -25134,21 +25134,21 @@ const ArrayNodeContent = props => {
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
       className: css(styles$d.verticalFlip)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
       className: css(styles$d.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
       className: css(styles$d.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconTrash$5)))];
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
       className: css(styles$d.arrayElement, !elementIsLeaf && styles$d.arrayElementAndNotLeaf)
@@ -25618,7 +25618,7 @@ const StatefulEditorPage = createReactClass({
 });
 
 const {
-  PropCheckBox: PropCheckBox$d,
+  PropCheckBox: PropCheckBox$c,
   TextListEditor: TextListEditor$4
 } = components;
 const Categorizer = Categorizer$1.widget;
@@ -25635,7 +25635,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,
@@ -25747,8 +25747,8 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$l,
-  PropCheckBox: PropCheckBox$c
+  InfoTip: InfoTip$j,
+  PropCheckBox: PropCheckBox$b
 } = components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25904,11 +25904,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$j, 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
@@ -25916,7 +25916,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$j, 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);
@@ -25935,7 +25935,7 @@ CSProgramEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$9
+  TextInput: TextInput$8
 } = components;
 class DefinitionEditor extends React.Component {
   constructor(..._args) {
@@ -25955,7 +25955,7 @@ class DefinitionEditor extends React.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$9, {
+    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26002,12 +26002,12 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
-  InlineIcon: InlineIcon$6
+  InfoTip: InfoTip$i,
+  InlineIcon: InlineIcon$5
 } = components;
 const {
-  iconPlus: iconPlus$3,
-  iconTrash: iconTrash$4
+  iconPlus: iconPlus$2,
+  iconTrash: iconTrash$3
 } = icons;
 class DropdownEditor extends React.Component {
   constructor(...args) {
@@ -26071,14 +26071,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$i, 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$i, 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"
@@ -26123,14 +26123,14 @@ class DropdownEditor extends React.Component {
         this, i)
       }, /*#__PURE__*/React.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))));
+      }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$3)))));
     }, this)), /*#__PURE__*/React.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconPlus$3), " Add a choice", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
   }
 }
 DropdownEditor.propTypes = {
@@ -26364,7 +26364,7 @@ ExampleWidgetEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26388,14 +26388,14 @@ class ExplanationEditor extends React.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26609,8 +26609,8 @@ const SortableItem = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$j,
-  PropCheckBox: PropCheckBox$b
+  InfoTip: InfoTip$h,
+  PropCheckBox: PropCheckBox$a
 } = components;
 
 // types for iterables
@@ -26857,16 +26857,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$h, 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$h, 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: {
@@ -26956,31 +26956,31 @@ 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$h, 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$h, 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)));
   }
 }
 
 const {
-  InlineIcon: InlineIcon$5,
-  TextInput: TextInput$7
+  InlineIcon: InlineIcon$4,
+  TextInput: TextInput$6
 } = components;
 const {
-  iconPlus: iconPlus$2,
-  iconTrash: iconTrash$3
+  iconPlus: iconPlus$1,
+  iconTrash: iconTrash$2
 } = icons;
 class GradedGroupEditor extends React.Component {
   constructor(..._args) {
@@ -27026,7 +27026,7 @@ class GradedGroupEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
       className: css(styles$b.title)
-    }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+    }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
       className: css(styles$b.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
@@ -27050,7 +27050,7 @@ class GradedGroupEditor extends React.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconPlus$2), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: css(styles$b.hintsTitle)
@@ -27072,7 +27072,7 @@ class GradedGroupEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$3), " Remove this hint")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
   }
 }
 GradedGroupEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -27168,8 +27168,8 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 const {
   ButtonGroup: ButtonGroup$4,
-  InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a,
+  InfoTip: InfoTip$g,
+  PropCheckBox: PropCheckBox$9,
   RangeInput: RangeInput$6
 } = components;
 const defaultBackgroundImage$3 = {
@@ -27599,7 +27599,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
@@ -27624,19 +27624,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$g, 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
@@ -27661,7 +27661,7 @@ const GraphSettings = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$f,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
 const {
@@ -27744,7 +27744,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$f, 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,
@@ -27839,7 +27839,7 @@ GroupEditor.defaultProps = {
 };
 
 const {
-  PropCheckBox: PropCheckBox$9
+  PropCheckBox: PropCheckBox$8
 } = components;
 /**
  * This is used for editing a name/value pair.
@@ -27962,11 +27962,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
@@ -27989,8 +27989,8 @@ IframeEditor.defaultProps = {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
-  InfoTip: InfoTip$g,
-  InlineIcon: InlineIcon$4,
+  InfoTip: InfoTip$e,
+  InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = components;
 const defaultBoxSize = 400;
@@ -28038,7 +28038,7 @@ class ImageEditor extends React.Component {
       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$e, 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 => {
@@ -28062,7 +28062,7 @@ class ImageEditor extends React.Component {
     }, 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$e, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28108,7 +28108,7 @@ class ImageEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React.createElement(InlineIcon$4, icons.iconTrash))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$3, icons.iconTrash))));
   }
   change(...args) {
     return Changeable.change.apply(this, args);
@@ -28226,7 +28226,7 @@ ImageEditor.defaultProps = {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$d
 } = components;
 const answerTypes = {
   number: {
@@ -28312,7 +28312,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$d, 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 => {
@@ -28348,7 +28348,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$d, 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'.
@@ -28360,7 +28360,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$d, 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 => {
@@ -28441,7 +28441,7 @@ const styles$a = StyleSheet.create({
 });
 
 const {
-  NumberInput: NumberInput$h
+  NumberInput: NumberInput$e
 } = components;
 const {
   getDependencies: getDependencies$8
@@ -28490,7 +28490,7 @@ class FunctionEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$h, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$e, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28507,7 +28507,7 @@ FunctionEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$6
+  TextInput: TextInput$5
 } = components;
 const {
   getDependencies: getDependencies$7
@@ -28532,7 +28532,7 @@ class LabelEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TextInput$6, {
+    }, /*#__PURE__*/React.createElement(TextInput$5, {
       value: this.props.label,
       onChange: this.change("label"),
       style: {
@@ -28562,7 +28562,7 @@ LabelEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$g
+  NumberInput: NumberInput$d
 } = components;
 const {
   getDependencies: getDependencies$6
@@ -28617,7 +28617,7 @@ class LineEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$g, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$d, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28637,7 +28637,7 @@ LineEditor.defaultProps = {
 
 const {
   ButtonGroup: ButtonGroup$3,
-  NumberInput: NumberInput$f
+  NumberInput: NumberInput$c
 } = components;
 class ConstraintEditor extends React.Component {
   constructor(...args) {
@@ -28671,7 +28671,7 @@ class ConstraintEditor extends React.Component {
       onChange: this.change("constraint")
     })), this.props.constraint === "snap" && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$f, {
+    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$c, {
       value: this.props.snap,
       placeholder: 0,
       onChange: this.change("snap")
@@ -28723,7 +28723,7 @@ ConstraintEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$e
+  NumberInput: NumberInput$b
 } = components;
 const {
   getDependencies: getDependencies$5
@@ -28764,13 +28764,13 @@ class MovableLineEditor extends React.Component {
       onChange: this.change("endY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$e, {
+    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$b, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$e, {
+    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$b, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -28795,7 +28795,7 @@ MovableLineEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$d
+  NumberInput: NumberInput$a
 } = components;
 const {
   getDependencies: getDependencies$4
@@ -28828,7 +28828,7 @@ class MovablePointEditor extends React.Component {
       onChange: this.change("startY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$d, {
+    }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$a, {
       value: this.props.varSubscript,
       placeholder: 0,
       onChange: this.change("varSubscript")
@@ -28849,7 +28849,7 @@ MovablePointEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$9
 } = components;
 const {
   getDependencies: getDependencies$3
@@ -28903,7 +28903,7 @@ class ParametricEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$c, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$9, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -29528,8 +29528,8 @@ const GraphTypeSelector = props => {
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$e,
-  PropCheckBox: PropCheckBox$8,
+  InfoTip: InfoTip$c,
+  PropCheckBox: PropCheckBox$7,
   RangeInput: RangeInput$4
 } = components;
 const defaultBackgroundImage$1 = {
@@ -29925,7 +29925,7 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change("markings")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$8, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
@@ -29950,19 +29950,19 @@ class InteractiveGraphSettings extends React.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$e, 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$c, 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$8, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$8, {
+    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change
@@ -30019,7 +30019,7 @@ const SegmentCountSelector = ({
 }, `${n} segment${n > 1 ? "s" : ""}`)));
 
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$b
 } = components;
 const {
   containerSizeClass,
@@ -30198,7 +30198,7 @@ class InteractiveGraphEditor extends React.Component {
       value: "angles"
     }, "interior angles"), /*#__PURE__*/React.createElement("option", {
       value: "sides"
-    }, "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, {
+    }, "side measures"))), /*#__PURE__*/React.createElement(InfoTip$b, 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",
@@ -30210,7 +30210,7 @@ class InteractiveGraphEditor extends React.Component {
           })
         });
       }
-    })), /*#__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, {
+    })), /*#__PURE__*/React.createElement(InfoTip$b, 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",
@@ -30222,7 +30222,7 @@ class InteractiveGraphEditor extends React.Component {
           })
         });
       }
-    })), /*#__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, {
+    })), /*#__PURE__*/React.createElement(InfoTip$b, 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({
@@ -30242,7 +30242,7 @@ class InteractiveGraphEditor extends React.Component {
         borderStyle: "solid",
         borderWidth: 1
       }
-    }, 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(InteractiveGraphSettings, {
+    }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, 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(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
@@ -30271,7 +30271,7 @@ class InteractiveGraphEditor extends React.Component {
       value: "approx"
     }, "be approximately congruent"), /*#__PURE__*/React.createElement("option", {
       value: "similar"
-    }, "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", {
+    }, "be similar"))), /*#__PURE__*/React.createElement(InfoTip$b, 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,
@@ -30280,7 +30280,7 @@ class InteractiveGraphEditor extends React.Component {
       value: "exact"
     }, "match exactly"), /*#__PURE__*/React.createElement("option", {
       value: "congruent"
-    }, "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);
+    }, "be congruent"))), /*#__PURE__*/React.createElement(InfoTip$b, 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, {
@@ -31824,212 +31824,9 @@ const styles = StyleSheet.create({
   }
 });
 
-const {
-  InfoTip: InfoTip$c,
-  NumberInput: NumberInput$b,
-  PropCheckBox: PropCheckBox$7
-} = components;
-const MAX_SIZE = 8;
-
-// styling
-const CELL_PADDING = 5;
-const TABLE_STYLE = {
-  display: "table",
-  tableLayout: "fixed"
-};
-const ROW_STYLE = {
-  display: "table-row"
-};
-const CELL_STYLE = {
-  display: "table-cell",
-  padding: CELL_PADDING
-};
-const BASE_TILE_STYLE = {
-  borderRadius: 10,
-  cursor: "pointer"
-};
-const PATTERNS = {
-  plus: () => [[false, true, false], [true, true, true], [false, true, false]],
-  x: () => [[true, false, true], [false, true, false], [true, false, true]],
-  "plus/x": iter => {
-    return iter % 2 ? PATTERNS.x() : PATTERNS.plus();
-  }
-};
-
-/**
- * Clamps value to an integer in the range [min, max]
- */
-const clampToInt = function clampToInt(value, min, max) {
-  value = Math.floor(value);
-  value = Math.max(value, min);
-  value = Math.min(value, max);
-  return value;
-};
-
-// Returns a copy of the tiles, with tiles flipped according to
-// whether or not their y, x position satisfies the predicate
-const flipTilesPredicate = (oldCells, predicate) => {
-  return _.map(oldCells, (row, y) => {
-    return _.map(row, (cell, x) => {
-      return predicate(y, x) ? !cell : cell;
-    });
-  });
-};
-// A single glowy cell
-class Tile extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._flip = () => {
-      this.props.onChange(!this.props.value);
-    };
-  }
-  render() {
-    const color = this.props.value ? "#55dd55" : "#115511";
-    const style = _.extend({}, BASE_TILE_STYLE, {
-      width: this.props.size,
-      height: this.props.size,
-      backgroundColor: color
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      style: style,
-      onClick: this._flip
-    });
-  }
-}
-Tile.propTypes = {
-  value: PropTypes.bool.isRequired,
-  size: PropTypes.number.isRequired
-};
-// A grid of glowy cells
-class TileGrid extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: TABLE_STYLE,
-      className: "no-select"
-    }, _.map(this.props.cells, (row, y) => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: y,
-        style: ROW_STYLE
-      }, _.map(row, (cell, x) => {
-        return /*#__PURE__*/React.createElement("div", {
-          key: x,
-          style: CELL_STYLE
-        }, /*#__PURE__*/React.createElement(Tile, {
-          value: cell,
-          size: this.props.size,
-          onChange: _.partial(this.props.onChange, y, x)
-        }));
-      }));
-    }));
-  }
-}
-TileGrid.propTypes = {
-  cells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)).isRequired,
-  size: PropTypes.number.isRequired
-};
-// The widget editor
-class LightsPuzzleEditor extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this._height = () => {
-      return this.props.startCells.length;
-    };
-    this._width = () => {
-      if (this.props.startCells.length !== 0) {
-        return this.props.startCells[0].length;
-      }
-      return 0; // default to 0
-    };
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this._handlePatternChange = e => {
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-      this.change("flipPattern", e.target.value);
-    };
-    this._changeWidth = newWidth => {
-      newWidth = clampToInt(newWidth, 1, MAX_SIZE);
-      this._truncateCells(newWidth, this._height());
-    };
-    this._changeHeight = newHeight => {
-      newHeight = clampToInt(newHeight, 1, MAX_SIZE);
-      this._truncateCells(this._width(), newHeight);
-    };
-    this._truncateCells = (newWidth, newHeight) => {
-      const newCells = _.times(newHeight, y => {
-        return _.times(newWidth, x => {
-          // explicitly cast the result to a boolean with !!
-          return !!(this.props.startCells[y] && this.props.startCells[y][x]);
-        });
-      });
-
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        startCells: newCells
-      });
-    };
-    this._switchTile = (tileY, tileX) => {
-      const newCells = flipTilesPredicate(this.props.startCells, (y, x) => {
-        return y === tileY && x === tileX;
-      });
-
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        startCells: newCells
-      });
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Width:", /*#__PURE__*/React.createElement(NumberInput$b, {
-      value: this._width(),
-      placeholder: 5,
-      onChange: this._changeWidth
-    }), ", ", "Height:", /*#__PURE__*/React.createElement(NumberInput$b, {
-      value: this._height(),
-      placeholder: 5,
-      onChange: this._changeHeight
-    })), /*#__PURE__*/React.createElement("div", null, "Flip pattern:", /*#__PURE__*/React.createElement("select", {
-      value: this.props.flipPattern
-      // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-      ,
-      onChange: this._handlePatternChange
-    }, _.map(_.keys(PATTERNS), (pattern, i) => {
-      return /*#__PURE__*/React.createElement("option", {
-        value: pattern,
-        key: i
-      }, pattern);
-    }))), /*#__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$c, null, "By default, incomplete puzzles are graded as empty.")), /*#__PURE__*/React.createElement("div", null, "Starting configuration:"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        overflowX: "auto"
-      }
-    }, /*#__PURE__*/React.createElement(TileGrid, {
-      cells: this.props.startCells,
-      size: 50,
-      onChange: this._switchTile
-    })));
-  }
-}
-LightsPuzzleEditor.propTypes = _extends({}, Changeable.propTypes, {
-  startCells: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.bool)),
-  flipPattern: PropTypes.string.isRequired,
-  gradeIncompleteAsWrong: PropTypes.bool.isRequired
-});
-LightsPuzzleEditor.widgetName = "lights-puzzle";
-LightsPuzzleEditor.defaultProps = {
-  startCells: [[false, false, false], [false, false, false], [false, false, false]],
-  flipPattern: "plus",
-  gradeIncompleteAsWrong: false
-};
-
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 const {
-  InfoTip: InfoTip$b,
+  InfoTip: InfoTip$a,
   PropCheckBox: PropCheckBox$6,
   TextListEditor: TextListEditor$3
 } = components;
@@ -32056,7 +31853,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$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", {
+    }, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$a, 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,
@@ -32074,7 +31871,7 @@ class MatcherEditor extends React.Component {
         }, cb);
       },
       layout: "vertical"
-    })), /*#__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", {
+    })), /*#__PURE__*/React.createElement("span", null, " ", "Labels:", " ", /*#__PURE__*/React.createElement(InfoTip$a, 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
@@ -32090,11 +31887,11 @@ class MatcherEditor extends React.Component {
       label: "Order of the matched pairs matters:",
       orderMatters: this.props.orderMatters,
       onChange: this.props.onChange
-    }), /*#__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, {
+    }), /*#__PURE__*/React.createElement(InfoTip$a, 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$b, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
+    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
 }
 MatcherEditor.propTypes = {
@@ -32237,8 +32034,8 @@ MatrixEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$a,
-  NumberInput: NumberInput$a,
+  InfoTip: InfoTip$9,
+  NumberInput: NumberInput$8,
   PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = components;
@@ -32294,18 +32091,18 @@ class MeasurerEditor extends React.Component {
       ref: "image-url",
       defaultValue: image.url,
       onChange: this._changeUrl
-    }), /*#__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", {
+    }), /*#__PURE__*/React.createElement(InfoTip$9, 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"
-    }, "Pixels from top:", " ", /*#__PURE__*/React.createElement(NumberInput$a, {
+    }, "Pixels from top:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       placeholder: 0,
       onChange: this._changeTop,
       value: image.top,
       useArrowKeys: true
     })), /*#__PURE__*/React.createElement("label", {
       className: "perseus-widget-right-col"
-    }, "Pixels from left:", " ", /*#__PURE__*/React.createElement(NumberInput$a, {
+    }, "Pixels from left:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       placeholder: 0,
       onChange: this._changeLeft,
       value: image.left,
@@ -32351,14 +32148,14 @@ class MeasurerEditor extends React.Component {
         key: n,
         value: n
       }, n);
-    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React.createElement(NumberInput$a, {
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       placeholder: 40
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("rulerPixels"),
       value: this.props.rulerPixels,
       useArrowKeys: true
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React.createElement(NumberInput$a, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       placeholder: 10
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -32395,8 +32192,8 @@ MeasurerEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$9,
-  TextInput: TextInput$5
+  NumberInput: NumberInput$7,
+  TextInput: TextInput$4
 } = components;
 class MoleculeWidgetEditor extends React.Component {
   constructor(..._args) {
@@ -32421,10 +32218,10 @@ class MoleculeWidgetEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$5, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$4, {
       onChange: this.updateMolecule,
       value: this.props.smiles
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$9, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$7, {
       onChange: this.updateRotation,
       value: this.props.rotationAngle
     }))));
@@ -32439,8 +32236,8 @@ MoleculeWidgetEditor.widgetName = "molecule-renderer";
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   ButtonGroup: ButtonGroup$1,
-  InfoTip: InfoTip$9,
-  NumberInput: NumberInput$8,
+  InfoTip: InfoTip$8,
+  NumberInput: NumberInput$6,
   PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = components;
@@ -32591,7 +32388,7 @@ class NumberLineEditor extends React.Component {
     }, "\u2264"), /*#__PURE__*/React.createElement("option", {
       value: "ge",
       "aria-label": "Greater than or equal"
-    }, "\u2265")), " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    }, "\u2265")), " ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: this.props.correctX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32601,9 +32398,9 @@ class NumberLineEditor extends React.Component {
       placeholder: "answer",
       size: "normal",
       useArrowKeys: true
-    }), /*#__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", {
+    }), /*#__PURE__*/React.createElement(InfoTip$8, 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$8, {
+    }, this.props.static ? /*#__PURE__*/React.createElement("label", null, "Range:") : /*#__PURE__*/React.createElement("label", null, "Position:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: this.props.initialX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32619,11 +32416,11 @@ class NumberLineEditor extends React.Component {
       onChange: this.onRangeChange,
       format: this.props.labelStyle,
       useArrowKeys: true
-    }), /*#__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", {
+    }), /*#__PURE__*/React.createElement(InfoTip$8, 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"
-    }, "Labels:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    }, "Labels:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: labelRange[0],
       placeholder: range[0],
       format: this.props.labelStyle,
@@ -32632,7 +32429,7 @@ class NumberLineEditor extends React.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 0),
       useArrowKeys: true
-    }), /*#__PURE__*/React.createElement("span", null, " & "), /*#__PURE__*/React.createElement(NumberInput$8, {
+    }), /*#__PURE__*/React.createElement("span", null, " & "), /*#__PURE__*/React.createElement(NumberInput$6, {
       value: labelRange[1],
       placeholder: range[1],
       format: this.props.labelStyle,
@@ -32641,14 +32438,14 @@ class NumberLineEditor extends React.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 1),
       useArrowKeys: true
-    }), /*#__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", {
+    }), /*#__PURE__*/React.createElement(InfoTip$8, 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$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", {
+    }), /*#__PURE__*/React.createElement(InfoTip$8, 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"
@@ -32670,7 +32467,7 @@ class NumberLineEditor extends React.Component {
       onChange: this.props.onChange
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32679,7 +32476,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__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$8, {
+    })), /*#__PURE__*/React.createElement(InfoTip$8, 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$6, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32688,7 +32485,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
+    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: this.props.tickStep || null,
       format: this.props.labelStyle,
       onChange: this.onTickStepChange,
@@ -32697,9 +32494,9 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.numDivisions,
       useArrowKeys: true
-    })), /*#__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", {
+    })), /*#__PURE__*/React.createElement(InfoTip$8, 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$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: snapDivisions,
       checkValidity: val => val > 0,
       format: this.props.labelStyle
@@ -32707,7 +32504,7 @@ class NumberLineEditor extends React.Component {
       ,
       onChange: this.onNumChange.bind(this, "snapDivisions"),
       useArrowKeys: true
-    })), /*#__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."))));
+    })), /*#__PURE__*/React.createElement(InfoTip$8, 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 = {
@@ -32745,16 +32542,16 @@ NumberLineEditor.defaultProps = {
 
 const {
   ButtonGroup,
-  InfoTip: InfoTip$8,
-  InlineIcon: InlineIcon$3,
+  InfoTip: InfoTip$7,
+  InlineIcon: InlineIcon$2,
   MultiButtonGroup,
-  NumberInput: NumberInput$7,
+  NumberInput: NumberInput$5,
   PropCheckBox: PropCheckBox$3,
-  TextInput: TextInput$4
+  TextInput: TextInput$3
 } = components;
 const {
   iconGear,
-  iconTrash: iconTrash$2
+  iconTrash: iconTrash$1
 } = icons;
 const {
   firstNumericalParse
@@ -32834,14 +32631,14 @@ const NumericInputEditor = createReactClass({
         content: "wrong"
       }],
       onChange: this.updateAnswer(i, "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.")));
+    }), /*#__PURE__*/React.createElement(InfoTip$7, 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$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", {
+    }), /*#__PURE__*/React.createElement(InfoTip$7, 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$3, {
       label: "Strictly match only these formats",
@@ -32852,7 +32649,7 @@ const NumericInputEditor = createReactClass({
     })));
     const maxError = i => /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Max error", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Max error", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       className: "max-error",
       value: answers[i]["maxError"],
       onChange: this.updateAnswer(i, "maxError"),
@@ -32871,7 +32668,7 @@ const NumericInputEditor = createReactClass({
         content: "Small (40px)"
       }],
       onChange: this.change("size")
-    }), /*#__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.")));
+    }), /*#__PURE__*/React.createElement(InfoTip$7, 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$3, {
@@ -32881,17 +32678,17 @@ const NumericInputEditor = createReactClass({
     }));
     const labelText = /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Label text:", " ", /*#__PURE__*/React.createElement(TextInput$4, {
+    }, /*#__PURE__*/React.createElement("label", null, "Label text:", " ", /*#__PURE__*/React.createElement(TextInput$3, {
       value: this.props.labelText,
       onChange: this.change("labelText")
-    })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
+    })), /*#__PURE__*/React.createElement(InfoTip$7, 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$3, {
       label: "Coefficient",
       coefficient: this.props.coefficient,
       onChange: this.props.onChange
-    }), /*#__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."))));
+    }), /*#__PURE__*/React.createElement(InfoTip$7, 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",
@@ -32922,7 +32719,7 @@ const NumericInputEditor = createReactClass({
         key: i
       }, /*#__PURE__*/React.createElement("div", {
         className: "input-answer-editor-value-container" + (answer.maxError ? " with-max-error" : "")
-      }, /*#__PURE__*/React.createElement(NumberInput$7, {
+      }, /*#__PURE__*/React.createElement(NumberInput$5, {
         value: answer.value,
         className: "numeric-input-value",
         placeholder: "answer",
@@ -32969,7 +32766,7 @@ const NumericInputEditor = createReactClass({
         className: "max-error-container"
       }, /*#__PURE__*/React.createElement("div", {
         className: "max-error-plusmn"
-      }, "\xB1"), /*#__PURE__*/React.createElement(NumberInput$7, {
+      }, "\xB1"), /*#__PURE__*/React.createElement(NumberInput$5, {
         placeholder: 0,
         value: answers[i]["maxError"],
         format: _.last(answer.answerForms),
@@ -32987,13 +32784,13 @@ const NumericInputEditor = createReactClass({
         "aria-label": "Delete answer",
         onClick: () => this.onTrashAnswer(i),
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer, i)
-      }, /*#__PURE__*/React.createElement(InlineIcon$3, iconTrash$2)), /*#__PURE__*/React.createElement("a", {
+      }, /*#__PURE__*/React.createElement(InlineIcon$2, iconTrash$1)), /*#__PURE__*/React.createElement("a", {
         href: "javascript:void(0)",
         className: "options-toggle",
         "aria-label": "Toggle options",
         onClick: () => this.onToggleOptions(i),
         onKeyDown: e => this.onSpace(e, this.onToggleOptions, i)
-      }, /*#__PURE__*/React.createElement(InlineIcon$3, iconGear))), /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(InlineIcon$2, iconGear))), /*#__PURE__*/React.createElement("div", {
         className: "input-answer-editor-message"
       }, editor), this.state.showOptions[i] && /*#__PURE__*/React.createElement("div", {
         className: "options-container"
@@ -33099,7 +32896,7 @@ const NumericInputEditor = createReactClass({
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$7,
+  InfoTip: InfoTip$6,
   TextListEditor: TextListEditor$2
 } = components;
 const NORMAL = "normal",
@@ -33159,13 +32956,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$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, {
+    }, /*#__PURE__*/React.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React.createElement(InfoTip$6, 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$7, 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$6, 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
       ,
@@ -33180,7 +32977,7 @@ class OrdererEditor extends React.Component {
       value: HORIZONTAL$1
     }, "Horizontal"), /*#__PURE__*/React.createElement("option", {
       value: VERTICAL$1
-    }, "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", {
+    }, "Vertical"))), /*#__PURE__*/React.createElement(InfoTip$6, 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>'.
       ,
@@ -33189,7 +32986,7 @@ class OrdererEditor extends React.Component {
       value: NORMAL
     }, "Normal"), /*#__PURE__*/React.createElement("option", {
       value: AUTO
-    }, "Automatic"))), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
+    }, "Automatic"))), /*#__PURE__*/React.createElement(InfoTip$6, null, /*#__PURE__*/React.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
   }
 }
 OrdererEditor.propTypes = {
@@ -33212,7 +33009,7 @@ OrdererEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$6,
+  InfoTip: InfoTip$5,
   PropCheckBox: PropCheckBox$2
 } = components;
 class PassageEditor extends React.Component {
@@ -33266,7 +33063,7 @@ class PassageEditor extends React.Component {
       labelAlignment: "right",
       showLineNumbers: this.props.showLineNumbers,
       onChange: this.props.onChange
-    })), /*#__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", {
+    })), /*#__PURE__*/React.createElement("div", null, "Passage title:", /*#__PURE__*/React.createElement(InfoTip$5, 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 => {
@@ -33275,7 +33072,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$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));
+    }))), /*#__PURE__*/React.createElement("div", null, "Passage Text:", passageEditor), /*#__PURE__*/React.createElement("div", null, "Footnotes:", /*#__PURE__*/React.createElement(InfoTip$5, 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, {
@@ -33293,9 +33090,9 @@ PassageEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$5,
-  NumberInput: NumberInput$6,
-  TextInput: TextInput$3
+  InfoTip: InfoTip$4,
+  NumberInput: NumberInput$4,
+  TextInput: TextInput$2
 } = components;
 class PassageRefEditor extends React.Component {
   constructor(..._args) {
@@ -33308,22 +33105,22 @@ class PassageRefEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Passage Number: ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Passage Number: ", /*#__PURE__*/React.createElement(NumberInput$4, {
       value: this.props.passageNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("passageNumber")
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Reference Number: ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Reference Number: ", /*#__PURE__*/React.createElement(NumberInput$4, {
       value: this.props.referenceNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("referenceNumber")
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Summary Text: ", /*#__PURE__*/React.createElement(TextInput$3, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Summary Text: ", /*#__PURE__*/React.createElement(TextInput$2, {
       value: this.props.summaryText
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("summaryText")
-    }), /*#__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")))));
+    }), /*#__PURE__*/React.createElement(InfoTip$4, 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, {
@@ -33371,8 +33168,8 @@ PassageRefTargetEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$4,
-  NumberInput: NumberInput$5,
+  InfoTip: InfoTip$3,
+  NumberInput: NumberInput$3,
   RangeInput,
   TextListEditor: TextListEditor$1
 } = components;
@@ -33601,27 +33398,27 @@ class PlotterEditor extends React.Component {
       className: "set-from-scale-box"
     }, /*#__PURE__*/React.createElement("span", {
       className: "categories-title"
-    }, "Set Categories From Scale"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    }, "Set Categories From Scale"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React.createElement(NumberInput$3, {
       placeholder: 1,
       useArrowKeys: true,
       value: this.state.tickStep,
       onChange: this.handleChangeTickStep
-    })), /*#__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, {
+    })), /*#__PURE__*/React.createElement(InfoTip$3, 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],
       onChange: this.handleChangeRange
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       onClick: this.setCategoriesFromScale
-    }, "Set Categories", " "))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    }, "Set Categories", " "))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React.createElement(NumberInput$3, {
       useArrowKeys: true,
       value: this.props.labelInterval,
       onChange: this.changeLabelInterval
-    })), /*#__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, {
+    })), /*#__PURE__*/React.createElement(InfoTip$3, 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$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", {
+    }), /*#__PURE__*/React.createElement(InfoTip$3, 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
@@ -33645,14 +33442,14 @@ class PlotterEditor extends React.Component {
       type: "text",
       onChange: this.changeSnaps,
       defaultValue: this.props.snapsPerLine
-    })), /*#__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", {
+    })), /*#__PURE__*/React.createElement(InfoTip$3, 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$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, {
+    }), editing)), /*#__PURE__*/React.createElement(InfoTip$3, 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
     })));
@@ -33683,8 +33480,8 @@ PlotterEditor.defaultProps = _extends({}, editorDefaults, {
  * This editor is for embedding Khan Academy Python programs.
  */
 const {
-  NumberInput: NumberInput$4,
-  TextInput: TextInput$2
+  NumberInput: NumberInput$2,
+  TextInput: TextInput$1
 } = components;
 function validateOptions(height, programID) {
   const errors = [];
@@ -33718,11 +33515,11 @@ class PythonProgramEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React.createElement(TextInput$2, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React.createElement(TextInput$1, {
       value: this.props.programID,
       onChange: this.change("programID"),
       placeholder: "123"
-    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("label", null, "Height:", " ", /*#__PURE__*/React.createElement(NumberInput$4, {
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("label", null, "Height:", " ", /*#__PURE__*/React.createElement(NumberInput$2, {
       value: this.props.height,
       onChange: this.change("height"),
       placeholder: "400"
@@ -33736,12 +33533,12 @@ PythonProgramEditor.defaultProps = {
 };
 
 const {
-  InlineIcon: InlineIcon$2,
+  InlineIcon: InlineIcon$1,
   PropCheckBox: PropCheckBox$1
 } = components;
 const {
-  iconPlus: iconPlus$1,
-  iconTrash: iconTrash$1
+  iconPlus,
+  iconTrash
 } = icons;
 class ChoiceEditor extends React.Component {
   render() {
@@ -33782,7 +33579,7 @@ class ChoiceEditor extends React.Component {
         this.props.onDelete();
       },
       title: "Remove this choice"
-    }, /*#__PURE__*/React.createElement(InlineIcon$2, iconTrash$1));
+    }, /*#__PURE__*/React.createElement(InlineIcon$1, iconTrash));
     return /*#__PURE__*/React.createElement("div", {
       className: "choice-clue-editors"
     }, /*#__PURE__*/React.createElement("div", {
@@ -33986,13 +33783,13 @@ class RadioEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, false)
-    }, /*#__PURE__*/React.createElement(InlineIcon$2, iconPlus$1), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React.createElement("a", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$1, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React.createElement("a", {
       className: "simple-button",
       href: "#"
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, true)
-    }, /*#__PURE__*/React.createElement(InlineIcon$2, iconPlus$1), " None of the above", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$1, iconPlus), " None of the above", " ")));
   }
 }
 RadioEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -34024,250 +33821,6 @@ RadioEditor.defaultProps = {
   deselectEnabled: false
 };
 
-const {
-  NumberInput: NumberInput$3,
-  TextInput: TextInput$1
-} = components;
-class ReactionDiagramWidgetEditor extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.updateMolecule = idx => {
-      return function (newValue) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        const newSmiles = [...this.props.smiles];
-        newSmiles[idx] = newValue;
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.change({
-          smiles: newSmiles
-        });
-      }.bind(this);
-    };
-    this.updateRotation = idx => {
-      return function (newValue) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        const newRot = [...this.props.rotationAngle];
-        newRot[idx] = newValue;
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.change({
-          rotationAngle: newRot
-        });
-      }.bind(this);
-    };
-    this.updateSeparators = (idx, propName) => {
-      return newValue => {
-        const newSep = this.props.separators.map(sep => {
-          return _extends({}, sep);
-        });
-        newSep[idx][propName] = newValue;
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({
-          separators: newSep
-        });
-      };
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
-    };
-  }
-  render() {
-    // TODO(colin): use styling instead of &nbsp hacks.
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "LHS SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$1, {
-      onChange: this.updateMolecule(0),
-      value: this.props.smiles[0]
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "LHS Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$3, {
-      onChange: this.updateRotation(0),
-      value: this.props.rotationAngle[0]
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "RHS SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$1, {
-      onChange: this.updateMolecule(1),
-      value: this.props.smiles[1]
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "RHS Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$3, {
-      onChange: this.updateRotation(1),
-      value: this.props.rotationAngle[1]
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Top of arrow text:\xA0", /*#__PURE__*/React.createElement(TextInput$1, {
-      onChange: this.updateSeparators(0, "topText"),
-      value: this.props.separators[0].topText
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Bottom of arrow text:\xA0", /*#__PURE__*/React.createElement(TextInput$1, {
-      onChange: this.updateSeparators(0, "bottomText"),
-      value: this.props.separators[0].bottomText
-    }))));
-  }
-}
-ReactionDiagramWidgetEditor.propTypes = _extends({}, Changeable.propTypes, {
-  rotationAngle: PropTypes.arrayOf(PropTypes.number),
-  // eslint-disable-next-line react/forbid-prop-types
-  separators: PropTypes.arrayOf(PropTypes.object),
-  smiles: PropTypes.arrayOf(PropTypes.string)
-});
-ReactionDiagramWidgetEditor.widgetName = "reaction-diagram";
-ReactionDiagramWidgetEditor.defaultProps = {
-  smiles: ["", ""],
-  rotationAngle: [0, 0],
-  separators: [{
-    type: "right",
-    topText: "",
-    bottomText: ""
-  }]
-};
-
-/* eslint-disable jsx-a11y/anchor-is-valid, no-alert, react/sort-comp */
-const {
-  InlineIcon: InlineIcon$1
-} = components;
-const {
-  iconCircleArrowDown,
-  iconCircleArrowUp,
-  iconPlus,
-  iconTrash
-} = icons;
-class StepControlButton extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("a", {
-      href: "#",
-      className: "step-control-button " + "simple-button " + "simple-button--small " + "orange",
-      onClick: e => {
-        e.preventDefault();
-        this.props.onClick();
-      }
-    }, /*#__PURE__*/React.createElement(InlineIcon$1, this.props.icon));
-  }
-}
-class SequenceEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._handleEditorChange = (i, newProps) => {
-      const steps = _.clone(this.props.json);
-      steps[i] = _.extend({}, steps[i], newProps);
-      this.props.onChange({
-        json: steps
-      });
-    };
-    this.serialize = () => {
-      return {
-        json: _.times(this.props.json.length, i => {
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-          return this.refs["editor" + i].serialize();
-        })
-      };
-    };
-    this._handleMoveStepEarlier = i => {
-      if (i === 0) {
-        return;
-      }
-      const steps = _.clone(this.props.json);
-      const step = steps[i];
-      steps.splice(i, 1);
-      steps.splice(i - 1, 0, step);
-      this.props.onChange({
-        json: steps
-      });
-    };
-    this._handleMoveStepLater = i => {
-      const steps = _.clone(this.props.json);
-      if (i + 1 === steps.length) {
-        return;
-      }
-      const step = steps[i];
-      steps.splice(i, 1);
-      steps.splice(i + 1, 0, step);
-      this.props.onChange({
-        json: steps
-      });
-    };
-    this._handleAddStepAfter = i => {
-      // We do a full serialization here because we
-      // might be copying widgets:
-      const steps = _.clone(this.props.json);
-      // Here we do magic to allow you to copy-paste
-      // things from the previous section into the new
-      // section while preserving widgets.
-      // To enable this, we preserve the widgets
-      // object for the new section, but wipe out
-      // the content.
-      const newStep = i >= 0 ? {
-        widgets: steps[i].widgets
-      } : {};
-      steps.splice(i + 1, 0, newStep);
-      this.props.onChange({
-        json: steps
-      });
-    };
-    this._handleRemoveStep = i => {
-      const steps = _.clone(this.props.json);
-      steps.splice(i, 1);
-      this.props.onChange({
-        json: steps
-      });
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-sequence-editor"
-    }, _.map(this.props.json, (json, i) => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: i
-      }, "Step ", i + 1, /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "inline-block",
-          float: "right"
-        }
-      }, i + 1 < this.props.json.length && /*#__PURE__*/React.createElement(StepControlButton, {
-        icon: iconCircleArrowDown,
-        onClick: () => {
-          this._handleMoveStepLater(i);
-        }
-      }), i > 0 && /*#__PURE__*/React.createElement(StepControlButton, {
-        icon: iconCircleArrowUp,
-        onClick: () => {
-          this._handleMoveStepEarlier(i);
-        }
-      }), /*#__PURE__*/React.createElement(StepControlButton, {
-        icon: iconTrash,
-        onClick: () => {
-          const msg = "Are you sure you " + "want to remove step " + (i + 1) + "?";
-          if (confirm(msg)) {
-            this._handleRemoveStep(i);
-          }
-        }
-      }), /*#__PURE__*/React.createElement(StepControlButton, {
-        icon: iconPlus,
-        onClick: () => {
-          this._handleAddStepAfter(i);
-        }
-      })), /*#__PURE__*/React.createElement(Editor, {
-        ref: "editor" + i,
-        apiOptions: this.props.apiOptions,
-        content: json.content,
-        widgets: json.widgets,
-        images: json.images,
-        widgetEnabled: true,
-        immutableWidgets: false,
-        onChange: _.partial(this._handleEditorChange, i)
-      }));
-    }));
-  }
-}
-SequenceEditor.propTypes = {
-  json: PropTypes.arrayOf(PropTypes.shape({
-    content: PropTypes.string,
-    widgets: PropTypes.objectOf(PropTypes.any),
-    images: PropTypes.objectOf(PropTypes.any)
-  })),
-  apiOptions: ApiOptions.propTypes,
-  onChange: PropTypes.func.isRequired
-};
-SequenceEditor.widgetName = "sequence";
-SequenceEditor.defaultProps = {
-  json: [{
-    content: "",
-    widgets: {},
-    images: {}
-  }]
-};
-
 class TextArea extends React.Component {
   constructor(...args) {
     super(...args);
@@ -34324,78 +33877,6 @@ SimpleMarkdownTesterEditor.defaultProps = {
   value: ""
 };
 
-const {
-  InfoTip: InfoTip$3,
-  NumberInput: NumberInput$2
-} = components;
-const maxTrials = 5000;
-class SimulatorEditor extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this.change = (...args) => {
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return Changeable.change.apply(this, args);
-    };
-    this.handleTargetValueChange = (propName, e) => {
-      this.change(propName, e.target.value);
-    };
-    this.serialize = () => {
-      return EditorJsonify.serialize.call(this);
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-simulator"
-    }, /*#__PURE__*/React.createElement("div", null, i18n$1._("X-Axis Label"), ":", /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      value: this.props.xAxisLabel,
-      onChange: _.partial(this.handleTargetValueChange, "xAxisLabel")
-    })), /*#__PURE__*/React.createElement("div", null, i18n$1._("Y-Axis Label"), ":", /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      value: this.props.yAxisLabel,
-      onChange: _.partial(this.handleTargetValueChange, "yAxisLabel")
-    })), /*#__PURE__*/React.createElement("div", null, i18n$1._('"True Proportion" Label'), ":", /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      value: this.props.proportionLabel,
-      onChange: _.partial(this.handleTargetValueChange, "proportionLabel")
-    }), /*#__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")
-    }, /*#__PURE__*/React.createElement("option", {
-      key: "proportion",
-      value: "proportion"
-    }, "Proportion"), /*#__PURE__*/React.createElement("option", {
-      key: "percentage",
-      value: "percentage"
-    }, "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$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, {
-  xAxisLabel: PropTypes.string,
-  yAxisLabel: PropTypes.string,
-  numTrials: PropTypes.number,
-  proportionLabel: PropTypes.string,
-  proportionOrPercentage: PropTypes.string
-});
-SimulatorEditor.widgetName = "simulator";
-SimulatorEditor.defaultProps = {
-  xAxisLabel: "Proportion (%)",
-  yAxisLabel: "Number of times seen",
-  numTrials: 100,
-  proportionLabel: "Underlying proportion",
-  proportionOrPercentage: "proportion"
-};
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$2,
@@ -34851,7 +34332,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, PythonProgramEditor, ReactionDiagramWidgetEditor, SequenceEditor, SimpleMarkdownTesterEditor, SimulatorEditor, SorterEditor, TableEditor, UnitInputEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
+var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, SorterEditor, TableEditor, UnitInputEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class TextInput extends React.Component {
@@ -35062,8 +34543,8 @@ var AllWidgets = [...widgets, ...testingWidgets];
 
 Widgets.registerEditors(AllEditors);
 Widgets.registerWidgets(AllWidgets);
-Widgets.replaceEditor("transformer", "deprecated-standin");
-Widgets.replaceWidget("transformer", "deprecated-standin");
+Widgets.replaceDeprecatedWidgets();
+Widgets.replaceDeprecatedEditors();
 
 export { AllEditors, AllWidgets, ArticleDiff, ArticleEditor, DeviceFramer, Editor, EditorPage, IframeContentRenderer, ItemDiff, MultiRendererEditor, StatefulArticleEditor, StatefulEditorPage, StructuredItemDiff, ViewportResizer, i18n, libVersion };
 //# sourceMappingURL=index.js.map