@khanacademy/perseus-editor 4.4.0 → 5.0.0

package/dist/index.js

@@ -64,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "4.4.0";
+const libVersion = "5.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -240,7 +240,7 @@ const JsonEditor = createReactClass__default["default"]({
 });
 
 const {
-  InlineIcon: InlineIcon$c
+  InlineIcon: InlineIcon$b
 } = perseus.components;
 class SectionControlButton extends React__namespace.Component {
   render() {
@@ -260,7 +260,7 @@ class SectionControlButton extends React__namespace.Component {
       "aria-label": title,
       style: styles$g.button
     }, _ref => {
-      return /*#__PURE__*/React__namespace.createElement(InlineIcon$c, icon);
+      return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
@@ -20587,12 +20587,12 @@ const DragTarget = createReactClass__default["default"]({
 });
 
 const {
-  InlineIcon: InlineIcon$b
+  InlineIcon: InlineIcon$a
 } = perseus.components;
 const {
   iconChevronDown: iconChevronDown$1,
   iconChevronRight,
-  iconTrash: iconTrash$8
+  iconTrash: iconTrash$7
 } = perseus.icons;
 const _upgradeWidgetInfo = props => {
   // We can't call serialize here because this.refs.widget
@@ -20696,7 +20696,7 @@ class WidgetEditor extends React__namespace.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$b, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$b, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement("input", {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement("input", {
       type: "button"
       // @ts-expect-error - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
       ,
@@ -20710,7 +20710,7 @@ class WidgetEditor extends React__namespace.Component {
     }, supportedAlignments.map(alignment => /*#__PURE__*/React__namespace.createElement("option", {
       key: alignment
     }, alignment))), /*#__PURE__*/React__namespace.createElement(SectionControlButton, {
-      icon: iconTrash$8,
+      icon: iconTrash$7,
       onClick: () => {
         this.props.onRemove();
       },
@@ -21784,13 +21784,13 @@ class IframeContentRenderer extends React__namespace.Component {
 
 const {
   HUD: HUD$1,
-  InlineIcon: InlineIcon$a
+  InlineIcon: InlineIcon$9
 } = perseus.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
 } = perseus.icons;
 class ArticleEditor extends React__namespace.Component {
   static defaultProps = {
@@ -21886,25 +21886,25 @@ class ArticleEditor extends React__namespace.Component {
           float: "right"
         }
       }, sectionImageUploadGenerator(i), /*#__PURE__*/React__namespace.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__namespace.createElement(SectionControlButton, {
-        icon: iconCircleArrowDown$2,
+        icon: iconCircleArrowDown$1,
         onClick: () => {
           this._handleMoveSectionLater(i);
         },
         title: "Move this section down"
       }), i > 0 && /*#__PURE__*/React__namespace.createElement(SectionControlButton, {
-        icon: iconCircleArrowUp$2,
+        icon: iconCircleArrowUp$1,
         onClick: () => {
           this._handleMoveSectionEarlier(i);
         },
         title: "Move this section up"
       }), /*#__PURE__*/React__namespace.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 */
@@ -21939,7 +21939,7 @@ class ArticleEditor extends React__namespace.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconPlus$5), " Add a section")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React__namespace.createElement(HUD$1, {
@@ -22092,7 +22092,7 @@ class ArticleEditor extends React__namespace.Component {
  */
 const {
   ButtonGroup: ButtonGroup$5,
-  InlineIcon: InlineIcon$9
+  InlineIcon: InlineIcon$8
 } = perseus.components;
 const {
   devices
@@ -22114,9 +22114,9 @@ class ViewportResizer extends React__namespace.Component {
     this.props.onViewportSizeChanged(value);
   };
   render() {
-    const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconMobilePhone), " Phone");
-    const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconTablet), " Tablet");
-    const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconDesktop), " Desktop");
+    const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconMobilePhone), " Phone");
+    const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconTablet), " Tablet");
+    const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconDesktop), " Desktop");
 
     // TODO(david): Allow input of custom viewport sizes.
     return /*#__PURE__*/React__namespace.createElement("span", {
@@ -23450,14 +23450,14 @@ class StructuredItemDiff extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
-  InlineIcon: InlineIcon$8
+  InfoTip: InfoTip$l,
+  InlineIcon: InlineIcon$7
 } = perseus.components;
 const {
-  iconCircleArrowDown: iconCircleArrowDown$1,
-  iconCircleArrowUp: iconCircleArrowUp$1,
-  iconPlus: iconPlus$4,
-  iconTrash: iconTrash$6
+  iconCircleArrowDown,
+  iconCircleArrowUp,
+  iconPlus: iconPlus$3,
+  iconTrash: iconTrash$5
 } = perseus.icons;
 /* Renders a hint editor box
  *
@@ -23520,11 +23520,11 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: this.props.isLast ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, 1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconCircleArrowDown$1)), " ", /*#__PURE__*/React__namespace.createElement("button", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowDown)), " ", /*#__PURE__*/React__namespace.createElement("button", {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconCircleArrowUp$1)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$n, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23534,7 +23534,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconTrash$6), "Remove this hint", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
   }
 }
 /* A single hint-row containing a hint editor and preview */
@@ -23753,13 +23753,13 @@ class CombinedHintsEditor extends React__namespace.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconPlus$4), " Add a hint"))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$k
 } = perseus.components;
 class ItemExtrasEditor extends React__namespace.Component {
   static defaultProps = {
@@ -23924,7 +23924,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement("
   type: "checkbox",
   checked: props.checked,
   onChange: props.onChange
-})), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, props.infoTip));
+})), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, props.infoTip));
 
 const ITEM_DATA_VERSION = perseus.itemDataVersion;
 class ItemEditor extends React__namespace.Component {
@@ -24631,11 +24631,11 @@ const styles$e = aphrodite.StyleSheet.create({
 });
 
 const {
-  InlineIcon: InlineIcon$7
+  InlineIcon: InlineIcon$6
 } = perseus.components;
 const {
   iconChevronDown,
-  iconTrash: iconTrash$5
+  iconTrash: iconTrash$4
 } = perseus.icons;
 const {
   MultiRenderer
@@ -25097,21 +25097,21 @@ const ArrayNodeContent = props => {
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$d.verticalFlip)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
       className: aphrodite.css(styles$d.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
       className: aphrodite.css(styles$d.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTrash$5)))];
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
       className: aphrodite.css(styles$d.arrayElement, !elementIsLeaf && styles$d.arrayElementAndNotLeaf)
@@ -25583,7 +25583,7 @@ const StatefulEditorPage = createReactClass__default["default"]({
 });
 
 const {
-  PropCheckBox: PropCheckBox$d,
+  PropCheckBox: PropCheckBox$c,
   TextListEditor: TextListEditor$4
 } = perseus.components;
 const Categorizer = perseus.Categorizer.widget;
@@ -25618,7 +25618,7 @@ class CategorizerEditor extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$d, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$c, {
       label: "Randomize item order",
       labelAlignment: "right",
       randomizeItems: this.props.randomizeItems,
@@ -25716,8 +25716,8 @@ class BlurInput extends React__namespace.Component {
 
 /* eslint-disable no-useless-escape */
 const {
-  InfoTip: InfoTip$l,
-  PropCheckBox: PropCheckBox$c
+  InfoTip: InfoTip$j,
+  PropCheckBox: PropCheckBox$b
 } = perseus.components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25900,11 +25900,11 @@ class CSProgramEditor extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Url or Program ID:", " ", /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: this.props.programID,
       onChange: this._handleProgramIDChange
-    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$c, {
+    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
       label: "Show Editor",
       showEditor: this.props.showEditor,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$c, {
+    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
       label: "Show Buttons",
       showButtons: this.props.showButtons,
       onChange: this.props.onChange
@@ -25912,13 +25912,13 @@ class CSProgramEditor extends React__namespace.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
   }
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$9
+  TextInput: TextInput$8
 } = perseus.components;
 class DefinitionEditor extends React__namespace.Component {
   static propTypes = {
@@ -25952,7 +25952,7 @@ class DefinitionEditor extends React__namespace.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$9, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -25989,12 +25989,12 @@ class DeprecatedStandinEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
-  InlineIcon: InlineIcon$6
+  InfoTip: InfoTip$i,
+  InlineIcon: InlineIcon$5
 } = perseus.components;
 const {
-  iconPlus: iconPlus$3,
-  iconTrash: iconTrash$4
+  iconPlus: iconPlus$2,
+  iconTrash: iconTrash$3
 } = perseus.icons;
 class DropdownEditor extends React__namespace.Component {
   static propTypes = {
@@ -26070,14 +26070,14 @@ class DropdownEditor extends React__namespace.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React__namespace.createElement("ul", {
       className: "dropdown-choices"
@@ -26122,14 +26122,14 @@ class DropdownEditor extends React__namespace.Component {
         this, i)
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))));
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$3)))));
     }, this)), /*#__PURE__*/React__namespace.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React__namespace.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconPlus$3), " Add a choice", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
   }
 }
 
@@ -26362,7 +26362,7 @@ class ExampleWidgetEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = perseus.components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26399,14 +26399,14 @@ class ExplanationEditor extends React__namespace.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26611,8 +26611,8 @@ const SortableItem = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$j,
-  PropCheckBox: PropCheckBox$b
+  InfoTip: InfoTip$h,
+  PropCheckBox: PropCheckBox$a
 } = perseus.components;
 
 // types for iterables
@@ -26731,16 +26731,16 @@ class ExpressionEditor extends React__namespace.Component {
       className: "perseus-widget-expression-editor"
     }, /*#__PURE__*/React__namespace.createElement("h3", {
       className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
+    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Function variables: ", /*#__PURE__*/React__namespace.createElement("input", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Function variables: ", /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       defaultValue: this.props.functions.join(" "),
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement("h3", {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement("h3", {
       className: "expression-editor-h3"
     }, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
@@ -26949,19 +26949,19 @@ class AnswerOption extends React__namespace.Component {
       className: "answer-expression"
     }, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
       form: this.props.form,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must have the same form."
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "answer-option"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
       simplify: this.props.simplify,
       onChange: this.props.onChange,
       labelAlignment: "right",
       label: "Answer expression must be fully expanded and simplified."
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "remove-container"
     }, removeButton)));
   }
@@ -26983,12 +26983,12 @@ class AnswerOption extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InlineIcon: InlineIcon$5,
-  TextInput: TextInput$7
+  InlineIcon: InlineIcon$4,
+  TextInput: TextInput$6
 } = perseus.components;
 const {
-  iconPlus: iconPlus$2,
-  iconTrash: iconTrash$3
+  iconPlus: iconPlus$1,
+  iconTrash: iconTrash$2
 } = perseus.icons;
 class GradedGroupEditor extends React__namespace.Component {
   static propTypes = {
@@ -27040,7 +27040,7 @@ class GradedGroupEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
       className: aphrodite.css(styles$b.title)
-    }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
+    }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
       className: aphrodite.css(styles$b.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
@@ -27064,7 +27064,7 @@ class GradedGroupEditor extends React__namespace.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconPlus$2), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$b.hintsTitle)
@@ -27086,7 +27086,7 @@ class GradedGroupEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$3), " Remove this hint")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
   }
   getSaveWarnings = () => {
     return this.editor.current?.getSaveWarnings();
@@ -27186,8 +27186,8 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$4,
-  InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a,
+  InfoTip: InfoTip$g,
+  PropCheckBox: PropCheckBox$9,
   RangeInput: RangeInput$6
 } = perseus.components;
 const defaultBackgroundImage$3 = {
@@ -27621,7 +27621,7 @@ const GraphSettings = createReactClass__default["default"]({
       onChange: this.change("markings")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
@@ -27646,19 +27646,19 @@ const GraphSettings = createReactClass__default["default"]({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change
@@ -27683,7 +27683,7 @@ const GraphSettings = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$f,
   MultiButtonGroup: MultiButtonGroup$1
 } = perseus.components;
 const {
@@ -27757,7 +27757,7 @@ class GrapherEditor extends React__namespace.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.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__namespace.createElement(GraphSettings, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass$1(sizeClass),
       range: this.props.graph.range,
@@ -27869,7 +27869,7 @@ class GroupEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  PropCheckBox: PropCheckBox$9
+  PropCheckBox: PropCheckBox$8
 } = perseus.components;
 /**
  * This is used for editing a name/value pair.
@@ -28009,11 +28009,11 @@ class IframeEditor extends React__namespace.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("height")
-    })), /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    })), /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
       label: "Allow full screen",
       allowFullScreen: this.props.allowFullScreen,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
       label: "Allow iframe content to redirect the page",
       allowTopNavigation: this.props.allowTopNavigation,
       onChange: this.props.onChange
@@ -28032,8 +28032,8 @@ class IframeEditor extends React__namespace.Component {
 
 /* 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
 } = perseus.components;
 const defaultBoxSize = 400;
@@ -28089,7 +28089,7 @@ class ImageEditor extends React__namespace.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28113,7 +28113,7 @@ class ImageEditor extends React__namespace.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28159,7 +28159,7 @@ class ImageEditor extends React__namespace.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, perseus.icons.iconTrash))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, perseus.icons.iconTrash))));
   }
   change() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -28269,7 +28269,7 @@ class ImageEditor extends React__namespace.Component {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$d
 } = perseus.components;
 const answerTypes = {
   number: {
@@ -28348,7 +28348,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28384,7 +28384,7 @@ class InputNumberEditor extends React__namespace.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28396,7 +28396,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -28481,7 +28481,7 @@ const styles$a = aphrodite.StyleSheet.create({
 });
 
 const {
-  NumberInput: NumberInput$h
+  NumberInput: NumberInput$e
 } = perseus.components;
 const {
   getDependencies: getDependencies$8
@@ -28541,7 +28541,7 @@ class FunctionEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$h, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28550,7 +28550,7 @@ class FunctionEditor extends React__namespace.Component {
 }
 
 const {
-  TextInput: TextInput$6
+  TextInput: TextInput$5
 } = perseus.components;
 const {
   getDependencies: getDependencies$7
@@ -28584,7 +28584,7 @@ class LabelEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TextInput$6, {
+    }, /*#__PURE__*/React__namespace.createElement(TextInput$5, {
       value: this.props.label,
       onChange: this.change("label"),
       style: {
@@ -28608,7 +28608,7 @@ class LabelEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$g
+  NumberInput: NumberInput$d
 } = perseus.components;
 const {
   getDependencies: getDependencies$6
@@ -28676,7 +28676,7 @@ class LineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$g, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28686,7 +28686,7 @@ class LineEditor extends React__namespace.Component {
 
 const {
   ButtonGroup: ButtonGroup$3,
-  NumberInput: NumberInput$f
+  NumberInput: NumberInput$c
 } = perseus.components;
 class ConstraintEditor extends React__namespace.Component {
   static defaultProps = {
@@ -28726,7 +28726,7 @@ class ConstraintEditor extends React__namespace.Component {
       onChange: this.change("constraint")
     })), this.props.constraint === "snap" && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$f, {
+    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
       value: this.props.snap,
       placeholder: 0,
       onChange: this.change("snap")
@@ -28769,7 +28769,7 @@ class ConstraintEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$e
+  NumberInput: NumberInput$b
 } = perseus.components;
 const {
   getDependencies: getDependencies$5
@@ -28827,13 +28827,13 @@ class MovableLineEditor extends React__namespace.Component {
       onChange: this.change("endY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
+    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
+    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -28844,7 +28844,7 @@ class MovableLineEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$d
+  NumberInput: NumberInput$a
 } = perseus.components;
 const {
   getDependencies: getDependencies$4
@@ -28892,7 +28892,7 @@ class MovablePointEditor extends React__namespace.Component {
       onChange: this.change("startY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
+    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
       value: this.props.varSubscript,
       placeholder: 0,
       onChange: this.change("varSubscript")
@@ -28901,7 +28901,7 @@ class MovablePointEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$9
 } = perseus.components;
 const {
   getDependencies: getDependencies$3
@@ -28967,7 +28967,7 @@ class ParametricEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -29593,8 +29593,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
 } = perseus.components;
 const defaultBackgroundImage$1 = {
@@ -30015,7 +30015,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change("markings")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show tooltips",
       showTooltips: this.props.showTooltips,
       onChange: this.change
@@ -30040,19 +30040,19 @@ class InteractiveGraphSettings extends React__namespace.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change
@@ -30095,7 +30095,7 @@ const SegmentCountSelector = _ref => {
 };
 
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$b
 } = perseus.components;
 const {
   containerSizeClass,
@@ -30287,7 +30287,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       value: "angles"
     }, "interior angles"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "sides"
-    }, "side measures"))), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
+    }, "side measures"))), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "The interior angle and side measure options guide the points to the nearest whole angle or side"), " ", "measure respectively.")), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
       tag: "label"
     }, "Show angle measures:", " ", /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
@@ -30300,7 +30300,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the interior angle measures."))), /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Typography__namespace.LabelSmall, {
       tag: "label"
     }, "Show side measures:", " ", /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
@@ -30313,7 +30313,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the side lengths.")))), this.props.correct?.type === "segment" && /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React__namespace.createElement(SegmentCountSelector, {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Displays the side lengths.")))), this.props.correct?.type === "segment" && /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(FieldLabel, null, "Number of segments: "), /*#__PURE__*/React__namespace.createElement(SegmentCountSelector, {
       numSegments: this.props.correct?.numSegments,
       onChange: sides => {
         this.props.onChange({
@@ -30333,7 +30333,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
         borderStyle: "solid",
         borderWidth: 1
       }
-    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.createElement(InteractiveGraphSettings, {
+    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
@@ -30362,7 +30362,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       value: "approx"
     }, "be approximately congruent"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "similar"
-    }, "be similar"))), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.createElement("ul", null, /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }, "be similar"))), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("ul", null, /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.createElement("b", null, "Be Congruent:"), " Be congruent in size and shape, but can be located anywhere on the grid.")), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("em", null, "Use this with snapping to angle measure."))), /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement("p", null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "type-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Student answer must", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.correct.match,
@@ -30371,7 +30371,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       value: "exact"
     }, "match exactly"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "congruent"
-    }, "be congruent"))), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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 = ___default["default"].extend({}, this.props.correct, {
@@ -31932,215 +31932,9 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-const {
-  InfoTip: InfoTip$c,
-  NumberInput: NumberInput$b,
-  PropCheckBox: PropCheckBox$7
-} = perseus.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 (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 ___default["default"].map(oldCells, (row, y) => {
-    return ___default["default"].map(row, (cell, x) => {
-      return predicate(y, x) ? !cell : cell;
-    });
-  });
-};
-// A single glowy cell
-class Tile extends React__namespace.Component {
-  static propTypes = {
-    value: PropTypes__default["default"].bool.isRequired,
-    size: PropTypes__default["default"].number.isRequired
-  };
-  render() {
-    const color = this.props.value ? "#55dd55" : "#115511";
-    const style = ___default["default"].extend({}, BASE_TILE_STYLE, {
-      width: this.props.size,
-      height: this.props.size,
-      backgroundColor: color
-    });
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: style,
-      onClick: this._flip
-    });
-  }
-  _flip = () => {
-    this.props.onChange(!this.props.value);
-  };
-}
-// A grid of glowy cells
-class TileGrid extends React__namespace.Component {
-  static propTypes = {
-    cells: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].bool)).isRequired,
-    size: PropTypes__default["default"].number.isRequired
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: TABLE_STYLE,
-      className: "no-select"
-    }, ___default["default"].map(this.props.cells, (row, y) => {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        key: y,
-        style: ROW_STYLE
-      }, ___default["default"].map(row, (cell, x) => {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          key: x,
-          style: CELL_STYLE
-        }, /*#__PURE__*/React__namespace.createElement(Tile, {
-          value: cell,
-          size: this.props.size,
-          onChange: ___default["default"].partial(this.props.onChange, y, x)
-        }));
-      }));
-    }));
-  }
-}
-// The widget editor
-class LightsPuzzleEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    startCells: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].bool)),
-    flipPattern: PropTypes__default["default"].string.isRequired,
-    gradeIncompleteAsWrong: PropTypes__default["default"].bool.isRequired
-  };
-  static widgetName = "lights-puzzle";
-  static defaultProps = {
-    startCells: [[false, false, false], [false, false, false], [false, false, false]],
-    flipPattern: "plus",
-    gradeIncompleteAsWrong: false
-  };
-  _height = () => {
-    return this.props.startCells.length;
-  };
-  _width = () => {
-    if (this.props.startCells.length !== 0) {
-      return this.props.startCells[0].length;
-    }
-    return 0; // default to 0
-  };
-
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Width:", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
-      value: this._width(),
-      placeholder: 5,
-      onChange: this._changeWidth
-    }), ", ", "Height:", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
-      value: this._height(),
-      placeholder: 5,
-      onChange: this._changeHeight
-    })), /*#__PURE__*/React__namespace.createElement("div", null, "Flip pattern:", /*#__PURE__*/React__namespace.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
-    }, ___default["default"].map(___default["default"].keys(PATTERNS), (pattern, i) => {
-      return /*#__PURE__*/React__namespace.createElement("option", {
-        value: pattern,
-        key: i
-      }, pattern);
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, "Grade incomplete puzzles as wrong:", " ", /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
-      gradeIncompleteAsWrong: this.props.gradeIncompleteAsWrong,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, "By default, incomplete puzzles are graded as empty.")), /*#__PURE__*/React__namespace.createElement("div", null, "Starting configuration:"), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        overflowX: "auto"
-      }
-    }, /*#__PURE__*/React__namespace.createElement(TileGrid, {
-      cells: this.props.startCells,
-      size: 50,
-      onChange: this._switchTile
-    })));
-  }
-  _handlePatternChange = e => {
-    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-    this.change("flipPattern", e.target.value);
-  };
-  _changeWidth = newWidth => {
-    newWidth = clampToInt(newWidth, 1, MAX_SIZE);
-    this._truncateCells(newWidth, this._height());
-  };
-  _changeHeight = newHeight => {
-    newHeight = clampToInt(newHeight, 1, MAX_SIZE);
-    this._truncateCells(this._width(), newHeight);
-  };
-  _truncateCells = (newWidth, newHeight) => {
-    const newCells = ___default["default"].times(newHeight, y => {
-      return ___default["default"].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
-    });
-  };
-  _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
-    });
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
-}
-
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 const {
-  InfoTip: InfoTip$b,
+  InfoTip: InfoTip$a,
   PropCheckBox: PropCheckBox$6,
   TextListEditor: TextListEditor$3
 } = perseus.components;
@@ -32163,7 +31957,7 @@ class MatcherEditor extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-matcher-editor"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-clearfix"
     }, /*#__PURE__*/React__namespace.createElement(TextListEditor$3, {
       options: this.props.left,
@@ -32181,7 +31975,7 @@ class MatcherEditor extends React__namespace.Component {
         }, cb);
       },
       layout: "vertical"
-    })), /*#__PURE__*/React__namespace.createElement("span", null, " ", "Labels:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "These are entirely optional."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
+    })), /*#__PURE__*/React__namespace.createElement("span", null, " ", "Labels:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.createElement("p", null, "These are entirely optional."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       defaultValue: this.props.labels[0]
       // eslint-disable-next-line react/jsx-no-bind
@@ -32197,11 +31991,11 @@ class MatcherEditor extends React__namespace.Component {
       label: "Order of the matched pairs matters:",
       orderMatters: this.props.orderMatters,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$6, {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$6, {
       label: "Padding:",
       padding: this.props.padding,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Padding is good for text, but not needed for images."))));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
   onLabelChange = (index, e) => {
     const labels = ___default["default"].clone(this.props.labels);
@@ -32351,8 +32145,8 @@ class MatrixEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$a,
-  NumberInput: NumberInput$a,
+  InfoTip: InfoTip$9,
+  NumberInput: NumberInput$8,
   PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = perseus.components;
@@ -32401,18 +32195,18 @@ class MeasurerEditor extends React__namespace.Component {
       ref: "image-url",
       defaultValue: image.url,
       onChange: this._changeUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), image.url && /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), image.url && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
       className: "perseus-widget-left-col"
-    }, "Pixels from top:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
+    }, "Pixels from top:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       placeholder: 0,
       onChange: this._changeTop,
       value: image.top,
       useArrowKeys: true
     })), /*#__PURE__*/React__namespace.createElement("label", {
       className: "perseus-widget-right-col"
-    }, "Pixels from left:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
+    }, "Pixels from left:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       placeholder: 0,
       onChange: this._changeLeft,
       value: image.left,
@@ -32458,14 +32252,14 @@ class MeasurerEditor extends React__namespace.Component {
         key: n,
         value: n
       }, n);
-    })))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
+    })))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       placeholder: 10
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -32513,8 +32307,8 @@ class MeasurerEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$9,
-  TextInput: TextInput$5
+  NumberInput: NumberInput$7,
+  TextInput: TextInput$4
 } = perseus.components;
 class MoleculeWidgetEditor extends React__namespace.Component {
   static propTypes = {
@@ -32548,10 +32342,10 @@ class MoleculeWidgetEditor extends React__namespace.Component {
     return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$5, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$4, {
       onChange: this.updateMolecule,
       value: this.props.smiles
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
       onChange: this.updateRotation,
       value: this.props.rotationAngle
     }))));
@@ -32561,8 +32355,8 @@ class MoleculeWidgetEditor extends React__namespace.Component {
 /* 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
 } = perseus.components;
@@ -32742,7 +32536,7 @@ class NumberLineEditor extends React__namespace.Component {
     }, "\u2264"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "ge",
       "aria-label": "Greater than or equal"
-    }, "\u2265")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }, "\u2265")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: this.props.correctX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32752,9 +32546,9 @@ class NumberLineEditor extends React__namespace.Component {
       placeholder: "answer",
       size: "normal",
       useArrowKeys: true
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, this.props.static ? /*#__PURE__*/React__namespace.createElement("label", null, "Range:") : /*#__PURE__*/React__namespace.createElement("label", null, "Position:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }, this.props.static ? /*#__PURE__*/React__namespace.createElement("label", null, "Range:") : /*#__PURE__*/React__namespace.createElement("label", null, "Position:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: this.props.initialX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32770,11 +32564,11 @@ class NumberLineEditor extends React__namespace.Component {
       onChange: this.onRangeChange,
       format: this.props.labelStyle,
       useArrowKeys: true
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "This controls the initial position of the point along the number line and the", /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "In static mode, the initial position of the point is determined by Correct x instead of position."))), /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.createElement("p", null, "This controls the initial position of the point along the number line and the", /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "In static mode, the initial position of the point is determined by Correct x instead of position."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Labels:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }, "Labels:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: labelRange[0],
       placeholder: range[0],
       format: this.props.labelStyle,
@@ -32783,7 +32577,7 @@ class NumberLineEditor extends React__namespace.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 0),
       useArrowKeys: true
-    }), /*#__PURE__*/React__namespace.createElement("span", null, " & "), /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }), /*#__PURE__*/React__namespace.createElement("span", null, " & "), /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: labelRange[1],
       placeholder: range[1],
       format: this.props.labelStyle,
@@ -32792,14 +32586,14 @@ class NumberLineEditor extends React__namespace.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 1),
       useArrowKeys: true
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "This controls the position of the left / right labels. By default, the labels are set by the range ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " Ensure that the labels line up with the tick marks, or it may be confusing for users.")))), /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.createElement("p", null, "This controls the position of the left / right labels. By default, the labels are set by the range ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " Ensure that the labels line up with the tick marks, or it may be confusing for users.")))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, "Style:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$1, {
       allowEmpty: false,
       value: this.props.labelStyle,
       buttons: labelStyleEditorButtons,
       onChange: this.onLabelStyleChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, !this.props.static && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
@@ -32821,7 +32615,7 @@ class NumberLineEditor extends React__namespace.Component {
       onChange: this.props.onChange
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }, isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32830,7 +32624,7 @@ class NumberLineEditor extends React__namespace.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32839,7 +32633,7 @@ class NumberLineEditor extends React__namespace.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), " ", /*#__PURE__*/React__namespace.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    })), " ", /*#__PURE__*/React__namespace.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: this.props.tickStep || null,
       format: this.props.labelStyle,
       onChange: this.onTickStepChange,
@@ -32848,9 +32642,9 @@ class NumberLineEditor extends React__namespace.Component {
       },
       placeholder: width / this.props.numDivisions,
       useArrowKeys: true
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: snapDivisions,
       checkValidity: val => val > 0,
       format: this.props.labelStyle
@@ -32858,23 +32652,23 @@ class NumberLineEditor extends React__namespace.Component {
       ,
       onChange: this.onNumChange.bind(this, "snapDivisions"),
       useArrowKeys: true
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "This determines the number of different places the point will snap between two adjacent tick marks.", " ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), "Ensure the required number of snap increments is provided to answer the question."))));
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.createElement("p", null, "This determines the number of different places the point will snap between two adjacent tick marks.", " ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), "Ensure the required number of snap increments is provided to answer the question."))));
   }
 }
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 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
 } = perseus.components;
 const {
   iconGear,
-  iconTrash: iconTrash$2
+  iconTrash: iconTrash$1
 } = perseus.icons;
 const {
   firstNumericalParse
@@ -32956,14 +32750,14 @@ const NumericInputEditor = createReactClass__default["default"]({
         content: "wrong"
       }],
       onChange: this.updateAnswer(i, "simplify")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"wrong\" ", /*#__PURE__*/React__namespace.createElement("em", null, "only"), " if we are specifically assessing the ability to simplify.")));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"wrong\" ", /*#__PURE__*/React__namespace.createElement("em", null, "only"), " if we are specifically assessing the ability to simplify.")));
     const suggestedAnswerTypes = i => /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", null, "Choose the suggested answer formats"), /*#__PURE__*/React__namespace.createElement(MultiButtonGroup, {
       buttons: answerFormButtons,
       values: answers[i]["answerForms"],
       onChange: this.updateAnswer(i, "answerForms")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "To restrict the answer to ", /*#__PURE__*/React__namespace.createElement("em", null, "only"), " an improper fraction (i.e. 7/4), select the improper fraction and toggle \"strict\" to true. This ", /*#__PURE__*/React__namespace.createElement("b", null, "will not"), " ", "accept 1.75 as an answer.", " "), /*#__PURE__*/React__namespace.createElement("p", null, "Unless you are testing that specific skill, please do not restrict the answer format."))), /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "To restrict the answer to ", /*#__PURE__*/React__namespace.createElement("em", null, "only"), " an improper fraction (i.e. 7/4), select the improper fraction and toggle \"strict\" to true. This ", /*#__PURE__*/React__namespace.createElement("b", null, "will not"), " ", "accept 1.75 as an answer.", " "), /*#__PURE__*/React__namespace.createElement("p", null, "Unless you are testing that specific skill, please do not restrict the answer format."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$3, {
       label: "Strictly match only these formats",
@@ -32974,7 +32768,7 @@ const NumericInputEditor = createReactClass__default["default"]({
     })));
     const maxError = i => /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Max error", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Max error", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       className: "max-error",
       value: answers[i]["maxError"],
       onChange: this.updateAnswer(i, "maxError"),
@@ -32993,7 +32787,7 @@ const NumericInputEditor = createReactClass__default["default"]({
         content: "Small (40px)"
       }],
       onChange: this.change("size")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$3, {
@@ -33003,17 +32797,17 @@ const NumericInputEditor = createReactClass__default["default"]({
     }));
     const labelText = /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Label text:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$4, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Label text:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
       value: this.props.labelText,
       onChange: this.change("labelText")
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
     const coefficientCheck = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$3, {
       label: "Coefficient",
       coefficient: this.props.coefficient,
       onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.createElement("p", null, "A coefficient style number allows the student to use - for -1 and an empty string to mean 1."))));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("a", {
       href: "javascript:void(0)",
       className: "simple-button orange",
@@ -33044,7 +32838,7 @@ const NumericInputEditor = createReactClass__default["default"]({
         key: i
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "input-answer-editor-value-container" + (answer.maxError ? " with-max-error" : "")
-      }, /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+      }, /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
         value: answer.value,
         className: "numeric-input-value",
         placeholder: "answer",
@@ -33091,7 +32885,7 @@ const NumericInputEditor = createReactClass__default["default"]({
         className: "max-error-container"
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "max-error-plusmn"
-      }, "\xB1"), /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+      }, "\xB1"), /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
         placeholder: 0,
         value: answers[i]["maxError"],
         format: ___default["default"].last(answer.answerForms),
@@ -33109,13 +32903,13 @@ const NumericInputEditor = createReactClass__default["default"]({
         "aria-label": "Delete answer",
         onClick: () => this.onTrashAnswer(i),
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer, i)
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconTrash$2)), /*#__PURE__*/React__namespace.createElement("a", {
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconTrash$1)), /*#__PURE__*/React__namespace.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__namespace.createElement(InlineIcon$3, iconGear))), /*#__PURE__*/React__namespace.createElement("div", {
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconGear))), /*#__PURE__*/React__namespace.createElement("div", {
         className: "input-answer-editor-message"
       }, editor), this.state.showOptions[i] && /*#__PURE__*/React__namespace.createElement("div", {
         className: "options-container"
@@ -33224,7 +33018,7 @@ const NumericInputEditor = createReactClass__default["default"]({
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$7,
+  InfoTip: InfoTip$6,
   TextListEditor: TextListEditor$2
 } = perseus.components;
 const NORMAL = "normal",
@@ -33253,13 +33047,13 @@ class OrdererEditor extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-orderer"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement(TextListEditor$2, {
+    }, /*#__PURE__*/React__namespace.createElement("div", null, " ", "Correct answer:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.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__namespace.createElement(TextListEditor$2, {
       options: ___default["default"].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__namespace.createElement("div", null, " ", "Other cards:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create cards that are not part of the answer."))), /*#__PURE__*/React__namespace.createElement(TextListEditor$2, {
+    }), /*#__PURE__*/React__namespace.createElement("div", null, " ", "Other cards:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create cards that are not part of the answer."))), /*#__PURE__*/React__namespace.createElement(TextListEditor$2, {
       options: ___default["default"].pluck(this.props.otherOptions, "content")
       // eslint-disable-next-line react/jsx-no-bind
       ,
@@ -33274,7 +33068,7 @@ class OrdererEditor extends React__namespace.Component {
       value: HORIZONTAL$1
     }, "Horizontal"), /*#__PURE__*/React__namespace.createElement("option", {
       value: VERTICAL$1
-    }, "Vertical"))), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Height:", " ", /*#__PURE__*/React__namespace.createElement("select", {
+    }, "Vertical"))), /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Height:", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.height
       // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
       ,
@@ -33283,7 +33077,7 @@ class OrdererEditor extends React__namespace.Component {
       value: NORMAL
     }, "Normal"), /*#__PURE__*/React__namespace.createElement("option", {
       value: AUTO
-    }, "Automatic"))), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
+    }, "Automatic"))), /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "Use \"Normal\" for text, \"Automatic\" for images."))));
   }
   onOptionsChange = (whichOptions, options, cb) => {
     const props = {};
@@ -33334,7 +33128,7 @@ class OrdererEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$6,
+  InfoTip: InfoTip$5,
   PropCheckBox: PropCheckBox$2
 } = perseus.components;
 class PassageEditor extends React__namespace.Component {
@@ -33405,7 +33199,7 @@ class PassageEditor extends React__namespace.Component {
       labelAlignment: "right",
       showLineNumbers: this.props.showLineNumbers,
       onChange: this.props.onChange
-    })), /*#__PURE__*/React__namespace.createElement("div", null, "Passage title:", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.createElement("p", null, "An optional title that will appear directly above the passage in the same font style. (E.g. Passage 1)")), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
+    })), /*#__PURE__*/React__namespace.createElement("div", null, "Passage title:", /*#__PURE__*/React__namespace.createElement(InfoTip$5, null, /*#__PURE__*/React__namespace.createElement("p", null, "An optional title that will appear directly above the passage in the same font style. (E.g. Passage 1)")), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       defaultValue: this.props.passageTitle,
       onChange: e => {
@@ -33414,15 +33208,15 @@ class PassageEditor extends React__namespace.Component {
           passageTitle: e.target.value
         });
       }
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, "Passage Text:", passageEditor), /*#__PURE__*/React__namespace.createElement("div", null, "Footnotes:", /*#__PURE__*/React__namespace.createElement(InfoTip$6, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, "Passage Text:", passageEditor), /*#__PURE__*/React__namespace.createElement("div", null, "Footnotes:", /*#__PURE__*/React__namespace.createElement(InfoTip$5, null, /*#__PURE__*/React__namespace.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));
   }
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$5,
-  NumberInput: NumberInput$6,
-  TextInput: TextInput$3
+  InfoTip: InfoTip$4,
+  NumberInput: NumberInput$4,
+  TextInput: TextInput$2
 } = perseus.components;
 class PassageRefEditor extends React__namespace.Component {
   static propTypes = {
@@ -33450,22 +33244,22 @@ class PassageRefEditor extends React__namespace.Component {
     return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Passage Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Passage Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
       value: this.props.passageNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("passageNumber")
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Reference Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Reference Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
       value: this.props.referenceNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("referenceNumber")
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Summary Text: ", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Summary Text: ", /*#__PURE__*/React__namespace.createElement(TextInput$2, {
       value: this.props.summaryText
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("summaryText")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$5, null, /*#__PURE__*/React__namespace.createElement("p", null, "Short summary of the referenced section. This will be included in parentheses and quotes automatically."), /*#__PURE__*/React__namespace.createElement("p", null, "Ex: The start ... the end")))));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$4, null, /*#__PURE__*/React__namespace.createElement("p", null, "Short summary of the referenced section. This will be included in parentheses and quotes automatically."), /*#__PURE__*/React__namespace.createElement("p", null, "Ex: The start ... the end")))));
   }
 }
 
@@ -33506,8 +33300,8 @@ class PassageRefTargetEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$4,
-  NumberInput: NumberInput$5,
+  InfoTip: InfoTip$3,
+  NumberInput: NumberInput$3,
   RangeInput,
   TextListEditor: TextListEditor$1
 } = perseus.components;
@@ -33757,27 +33551,27 @@ class PlotterEditor extends React__namespace.Component {
       className: "set-from-scale-box"
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: "categories-title"
-    }, "Set Categories From Scale"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
+    }, "Set Categories From Scale"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
       placeholder: 1,
       useArrowKeys: true,
       value: this.state.tickStep,
       onChange: this.handleChangeTickStep
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$4, null, /*#__PURE__*/React__namespace.createElement("p", null, "The difference between adjacent ticks."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Range:", " ", /*#__PURE__*/React__namespace.createElement(RangeInput, {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.createElement("p", null, "The difference between adjacent ticks."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Range:", " ", /*#__PURE__*/React__namespace.createElement(RangeInput, {
       placeholder: [0, 10],
       useArrowKeys: true,
       value: [this.state.minX, this.state.maxX],
       onChange: this.handleChangeRange
     }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.setCategoriesFromScale
-    }, "Set Categories", " "))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
+    }, "Set Categories", " "))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
       useArrowKeys: true,
       value: this.props.labelInterval,
       onChange: this.changeLabelInterval
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$4, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Picture:", " ", /*#__PURE__*/React__namespace.createElement(BlurInput, {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Picture:", " ", /*#__PURE__*/React__namespace.createElement(BlurInput, {
       className: "pic-url",
       value: this.props.picUrl,
       onChange: this.changePicUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$4, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", {
       className: "warning"
     }, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Categories:", " ", /*#__PURE__*/React__namespace.createElement(TextListEditor$1
     // eslint-disable-next-line react/no-string-refs
@@ -33801,14 +33595,14 @@ class PlotterEditor extends React__namespace.Component {
       type: "text",
       onChange: this.changeSnaps,
       defaultValue: this.props.snapsPerLine
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$4, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, "Editing values:", " ", editingStates.map(editing => /*#__PURE__*/React__namespace.createElement("label", {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, "Editing values:", " ", editingStates.map(editing => /*#__PURE__*/React__namespace.createElement("label", {
       key: editing
     }, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip$4, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "In static mode, the starting values are rendered out to the displayed widget."))), /*#__PURE__*/React__namespace.createElement(Plotter, _extends({}, props, {
+    }), editing)), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "In static mode, the starting values are rendered out to the displayed widget."))), /*#__PURE__*/React__namespace.createElement(Plotter, _extends({}, props, {
       starting: this.props[this.state.editing],
       onChange: this.handlePlotterChange
     })));
@@ -33819,8 +33613,8 @@ class PlotterEditor extends React__namespace.Component {
  * This editor is for embedding Khan Academy Python programs.
  */
 const {
-  NumberInput: NumberInput$4,
-  TextInput: TextInput$2
+  NumberInput: NumberInput$2,
+  TextInput: TextInput$1
 } = perseus.components;
 function validateOptions(height, programID) {
   const errors = [];
@@ -33862,11 +33656,11 @@ class PythonProgramEditor extends React__namespace.Component {
     return validateOptions(this.props.height, this.props.programID);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$2, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$1, {
       value: this.props.programID,
       onChange: this.change("programID"),
       placeholder: "123"
-    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("label", null, "Height:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
+    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("label", null, "Height:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$2, {
       value: this.props.height,
       onChange: this.change("height"),
       placeholder: "400"
@@ -33876,12 +33670,12 @@ class PythonProgramEditor extends React__namespace.Component {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types, react/sort-comp */
 const {
-  InlineIcon: InlineIcon$2,
+  InlineIcon: InlineIcon$1,
   PropCheckBox: PropCheckBox$1
 } = perseus.components;
 const {
-  iconPlus: iconPlus$1,
-  iconTrash: iconTrash$1
+  iconPlus,
+  iconTrash
 } = perseus.icons;
 class ChoiceEditor extends React__namespace.Component {
   static propTypes = {
@@ -33930,7 +33724,7 @@ class ChoiceEditor extends React__namespace.Component {
         this.props.onDelete();
       },
       title: "Remove this choice"
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconTrash$1));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconTrash));
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "choice-clue-editors"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -34041,13 +33835,13 @@ class RadioEditor extends React__namespace.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, false)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconPlus$1), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React__namespace.createElement("a", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconPlus), " Add a choice", " "), !this.props.hasNoneOfTheAbove && /*#__PURE__*/React__namespace.createElement("a", {
       className: "simple-button",
       href: "#"
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.addChoice.bind(this, true)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconPlus$1), " None of the above", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconPlus), " None of the above", " ")));
   }
   change = (() => {
     var _this = this;
@@ -34169,253 +33963,6 @@ class RadioEditor extends React__namespace.Component {
   };
 }
 
-const {
-  NumberInput: NumberInput$3,
-  TextInput: TextInput$1
-} = perseus.components;
-class ReactionDiagramWidgetEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    rotationAngle: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    // eslint-disable-next-line react/forbid-prop-types
-    separators: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
-    smiles: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
-  };
-  static widgetName = "reaction-diagram";
-  static defaultProps = {
-    smiles: ["", ""],
-    rotationAngle: [0, 0],
-    separators: [{
-      type: "right",
-      topText: "",
-      bottomText: ""
-    }]
-  };
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  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);
-  };
-  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);
-  };
-  updateSeparators = (idx, propName) => {
-    return newValue => {
-      const newSep = this.props.separators.map(sep => {
-        return {
-          ...sep
-        };
-      });
-      newSep[idx][propName] = newValue;
-      // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-      this.change({
-        separators: newSep
-      });
-    };
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
-  render() {
-    // TODO(colin): use styling instead of &nbsp hacks.
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "LHS SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$1, {
-      onChange: this.updateMolecule(0),
-      value: this.props.smiles[0]
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "LHS Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
-      onChange: this.updateRotation(0),
-      value: this.props.rotationAngle[0]
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "RHS SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$1, {
-      onChange: this.updateMolecule(1),
-      value: this.props.smiles[1]
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "RHS Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$3, {
-      onChange: this.updateRotation(1),
-      value: this.props.rotationAngle[1]
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Top of arrow text:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$1, {
-      onChange: this.updateSeparators(0, "topText"),
-      value: this.props.separators[0].topText
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Bottom of arrow text:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$1, {
-      onChange: this.updateSeparators(0, "bottomText"),
-      value: this.props.separators[0].bottomText
-    }))));
-  }
-}
-
-/* eslint-disable jsx-a11y/anchor-is-valid, no-alert, react/sort-comp */
-const {
-  InlineIcon: InlineIcon$1
-} = perseus.components;
-const {
-  iconCircleArrowDown,
-  iconCircleArrowUp,
-  iconPlus,
-  iconTrash
-} = perseus.icons;
-class StepControlButton extends React__namespace.Component {
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("a", {
-      href: "#",
-      className: "step-control-button " + "simple-button " + "simple-button--small " + "orange",
-      onClick: e => {
-        e.preventDefault();
-        this.props.onClick();
-      }
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, this.props.icon));
-  }
-}
-class SequenceEditor extends React__namespace.Component {
-  static propTypes = {
-    json: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-      content: PropTypes__default["default"].string,
-      widgets: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
-      images: PropTypes__default["default"].objectOf(PropTypes__default["default"].any)
-    })),
-    apiOptions: perseus.ApiOptions.propTypes,
-    onChange: PropTypes__default["default"].func.isRequired
-  };
-  static widgetName = "sequence";
-  static defaultProps = {
-    json: [{
-      content: "",
-      widgets: {},
-      images: {}
-    }]
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-sequence-editor"
-    }, ___default["default"].map(this.props.json, (json, i) => {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        key: i
-      }, "Step ", i + 1, /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          display: "inline-block",
-          float: "right"
-        }
-      }, i + 1 < this.props.json.length && /*#__PURE__*/React__namespace.createElement(StepControlButton, {
-        icon: iconCircleArrowDown,
-        onClick: () => {
-          this._handleMoveStepLater(i);
-        }
-      }), i > 0 && /*#__PURE__*/React__namespace.createElement(StepControlButton, {
-        icon: iconCircleArrowUp,
-        onClick: () => {
-          this._handleMoveStepEarlier(i);
-        }
-      }), /*#__PURE__*/React__namespace.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__namespace.createElement(StepControlButton, {
-        icon: iconPlus,
-        onClick: () => {
-          this._handleAddStepAfter(i);
-        }
-      })), /*#__PURE__*/React__namespace.createElement(Editor, {
-        ref: "editor" + i,
-        apiOptions: this.props.apiOptions,
-        content: json.content,
-        widgets: json.widgets,
-        images: json.images,
-        widgetEnabled: true,
-        immutableWidgets: false,
-        onChange: ___default["default"].partial(this._handleEditorChange, i)
-      }));
-    }));
-  }
-  _handleEditorChange = (i, newProps) => {
-    const steps = ___default["default"].clone(this.props.json);
-    steps[i] = ___default["default"].extend({}, steps[i], newProps);
-    this.props.onChange({
-      json: steps
-    });
-  };
-  serialize = () => {
-    return {
-      json: ___default["default"].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();
-      })
-    };
-  };
-  _handleMoveStepEarlier = i => {
-    if (i === 0) {
-      return;
-    }
-    const steps = ___default["default"].clone(this.props.json);
-    const step = steps[i];
-    steps.splice(i, 1);
-    steps.splice(i - 1, 0, step);
-    this.props.onChange({
-      json: steps
-    });
-  };
-  _handleMoveStepLater = i => {
-    const steps = ___default["default"].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
-    });
-  };
-  _handleAddStepAfter = i => {
-    // We do a full serialization here because we
-    // might be copying widgets:
-    const steps = ___default["default"].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
-    });
-  };
-  _handleRemoveStep = i => {
-    const steps = ___default["default"].clone(this.props.json);
-    steps.splice(i, 1);
-    this.props.onChange({
-      json: steps
-    });
-  };
-}
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class TextArea extends React__namespace.Component {
   render() {
@@ -34474,83 +34021,6 @@ class SimpleMarkdownTesterEditor extends React__namespace.Component {
   };
 }
 
-/* eslint-disable react/sort-comp */
-const {
-  InfoTip: InfoTip$3,
-  NumberInput: NumberInput$2
-} = perseus.components;
-const maxTrials = 5000;
-class SimulatorEditor extends React__namespace.Component {
-  static propTypes = {
-    ...perseus.Changeable.propTypes,
-    xAxisLabel: PropTypes__default["default"].string,
-    yAxisLabel: PropTypes__default["default"].string,
-    numTrials: PropTypes__default["default"].number,
-    proportionLabel: PropTypes__default["default"].string,
-    proportionOrPercentage: PropTypes__default["default"].string
-  };
-  static widgetName = "simulator";
-  static defaultProps = {
-    xAxisLabel: "Proportion (%)",
-    yAxisLabel: "Number of times seen",
-    numTrials: 100,
-    proportionLabel: "Underlying proportion",
-    proportionOrPercentage: "proportion"
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-simulator"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, i18n__namespace._("X-Axis Label"), ":", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      value: this.props.xAxisLabel,
-      onChange: ___default["default"].partial(this.handleTargetValueChange, "xAxisLabel")
-    })), /*#__PURE__*/React__namespace.createElement("div", null, i18n__namespace._("Y-Axis Label"), ":", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      value: this.props.yAxisLabel,
-      onChange: ___default["default"].partial(this.handleTargetValueChange, "yAxisLabel")
-    })), /*#__PURE__*/React__namespace.createElement("div", null, i18n__namespace._('"True Proportion" Label'), ":", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      value: this.props.proportionLabel,
-      onChange: ___default["default"].partial(this.handleTargetValueChange, "proportionLabel")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, i18n__namespace._("Proportion or Percentage"), ":", /*#__PURE__*/React__namespace.createElement("select", {
-      className: "perseus-widget-dropdown",
-      value: this.props.proportionOrPercentage,
-      onChange: ___default["default"].partial(this.handleTargetValueChange, "proportionOrPercentage")
-    }, /*#__PURE__*/React__namespace.createElement("option", {
-      key: "proportion",
-      value: "proportion"
-    }, "Proportion"), /*#__PURE__*/React__namespace.createElement("option", {
-      key: "percentage",
-      value: "percentage"
-    }, "Percentage")), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.createElement("p", null, "Do you want the user to describe their simulation in terms of a proportion or a percentage?"))), /*#__PURE__*/React__namespace.createElement("div", null, i18n__namespace._("Number of trials"), ":", /*#__PURE__*/React__namespace.createElement(NumberInput$2, {
-      value: this.props.numTrials,
-      checkValidity: val => {
-        return val >= 0 && val <= maxTrials;
-      },
-      onChange: this.change("numTrials")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$3, null, /*#__PURE__*/React__namespace.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."))));
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  handleTargetValueChange = (propName, e) => {
-    this.change(propName, e.target.value);
-  };
-  serialize = () => {
-    return perseus.EditorJsonify.serialize.call(this);
-  };
-}
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$2,
@@ -35006,7 +34476,7 @@ class VideoEditor extends React__namespace.Component {
   }
 }
 
-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__namespace.Component {
@@ -35225,8 +34695,8 @@ var AllWidgets = [...perseus.widgets, ...testingWidgets];
 
 perseus.Widgets.registerEditors(AllEditors);
 perseus.Widgets.registerWidgets(AllWidgets);
-perseus.Widgets.replaceEditor("transformer", "deprecated-standin");
-perseus.Widgets.replaceWidget("transformer", "deprecated-standin");
+perseus.Widgets.replaceDeprecatedWidgets();
+perseus.Widgets.replaceDeprecatedEditors();
 
 exports.AllEditors = AllEditors;
 exports.AllWidgets = AllWidgets;