@khanacademy/perseus-editor 6.9.0 → 6.11.0

package/dist/index.js

@@ -26,9 +26,9 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var Banner = require('@khanacademy/wonder-blocks-banner');
 var Button = require('@khanacademy/wonder-blocks-button');
-var Switch = require('@khanacademy/wonder-blocks-switch');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
+var Switch = require('@khanacademy/wonder-blocks-switch');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,12 +62,12 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.9.0";
+const libVersion = "6.11.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23464,7 +23464,7 @@ class StructuredItemDiff extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
+  InfoTip: InfoTip$m,
   InlineIcon: InlineIcon$7
 } = perseus.components;
 const {
@@ -23538,7 +23538,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", 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$m, 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'.
       ,
@@ -23773,7 +23773,7 @@ class CombinedHintsEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$l
 } = perseus.components;
 class ItemExtrasEditor extends React__namespace.Component {
   static defaultProps = {
@@ -23918,7 +23918,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$l, null, props.infoTip));
 
 const ITEM_DATA_VERSION = perseus.itemDataVersion;
 class ItemEditor extends React__namespace.Component {
@@ -25713,7 +25713,7 @@ class BlurInput extends React__namespace.Component {
 
 /* eslint-disable no-useless-escape */
 const {
-  InfoTip: InfoTip$l,
+  InfoTip: InfoTip$k,
   PropCheckBox: PropCheckBox$b
 } = perseus.components;
 const DEFAULT_WIDTH = 400;
@@ -25901,7 +25901,7 @@ class CSProgramEditor extends React__namespace.Component {
       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$b, {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
       label: "Show Buttons",
       showButtons: this.props.showButtons,
       onChange: this.props.onChange
@@ -25909,7 +25909,7 @@ 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$k, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
   }
 }
 
@@ -25986,7 +25986,7 @@ class DeprecatedStandinEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
+  InfoTip: InfoTip$j,
   InlineIcon: InlineIcon$5
 } = perseus.components;
 const {
@@ -26067,14 +26067,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$j, 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$j, 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"
@@ -26608,7 +26608,7 @@ const SortableItem = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$j,
+  InfoTip: InfoTip$i,
   PropCheckBox: PropCheckBox$a
 } = perseus.components;
 
@@ -26734,11 +26734,11 @@ class ExpressionEditor extends React__namespace.Component {
       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$i, 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$i, 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: {
@@ -26952,14 +26952,14 @@ class AnswerOption extends React__namespace.Component {
       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$i, 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$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$i, 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)));
   }
@@ -27184,7 +27184,7 @@ 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,
+  InfoTip: InfoTip$h,
   PropCheckBox: PropCheckBox$9,
   RangeInput: RangeInput$6
 } = perseus.components;
@@ -27645,7 +27645,7 @@ 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$h, 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"
@@ -27683,7 +27683,7 @@ const GraphSettings = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$g,
   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$g, 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,
@@ -28032,7 +28032,7 @@ class IframeEditor extends React__namespace.Component {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$f,
   InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = perseus.components;
@@ -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$f, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React__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$f, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28269,7 +28269,7 @@ class ImageEditor extends React__namespace.Component {
 
 /* eslint-disable react/sort-comp */
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$e
 } = perseus.components;
 const answerTypes = {
   number: {
@@ -28349,7 +28349,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$e, 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 => {
@@ -28385,7 +28385,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$e, 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'.
@@ -28397,7 +28397,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$e, 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 => {
@@ -29664,7 +29664,7 @@ const styles$t = aphrodite.StyleSheet.create({
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$e,
+  InfoTip: InfoTip$d,
   PropCheckBox: PropCheckBox$7,
   RangeInput: RangeInput$4
 } = perseus.components;
@@ -30117,7 +30117,7 @@ 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."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: styles$s.rulerSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: styles$s.checkboxRow
@@ -30344,80 +30344,146 @@ const styles$r = aphrodite.StyleSheet.create({
   }
 });
 
-const {
-  InfoTip: InfoTip$d
-} = perseus.components;
-const degreeToRadian = degrees => {
+function focusWithChromeStickyFocusBugWorkaround(element) {
+  // NOTE(marksandstrom) Chrome sticky focus bug.
+  //
+  // There is a bug in Chrome related to sticky positioning and
+  // focus: When a child of an element with sticky positioning is
+  // focused with the focus() method, the scrollable area
+  // containing that element will scroll to the top (even though
+  // the element is already visble on the page). For a dropdown
+  // this means that the area will be scrolled to the top when
+  // the user interacts with the dropdown (since we actively
+  // manage dropdown header and option focus for keyboard users).
+  //
+  // To work around this bug the `preventScroll` focus option is
+  // used.
+  //
+  // Using `focusOptions` is an experimental browser feature
+  // "that should not be used in production code". However, since
+  // Chrome is the only browser we support that exhibits this
+  // buggy behavior and using `focusOptions` works around the
+  // bug, it is perfectly reasonable to use the feature in this
+  // case. We are not relying on the effect of the
+  // `preventScroll` option otherwise.
+  //
+  // focusOptions documentation:
+  //
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+  //
+  // Note that there could be cases where we want default focus() behavior.
+  // One that comes to mind is a dropdown with a long list of options that
+  // might be rendered off screen when opened. With this workaround the
+  // selected option would not be scrolled into view if the option is near
+  // the end of the list. We're not aware of any uses of the dropdown where
+  // this is an issue, however, so there isn't currently a way to out of the
+  // `preventScroll` behavior.
+
+  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
+  element.focus({
+    preventScroll: true
+  });
+}
+const DEFAULT_COLOR = "grayH";
+function getDefaultFigureForType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0],
+        color: DEFAULT_COLOR,
+        filled: true
+      };
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), {
+          ...getDefaultFigureForType("point"),
+          coord: [2, 2]
+        }],
+        color: DEFAULT_COLOR,
+        lineStyle: "solid",
+        showPoint1: false,
+        showPoint2: false
+      };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
+    case "ellipse":
+      return {
+        type: "ellipse",
+        center: [0, 0],
+        radius: [1, 1],
+        angle: 0,
+        color: DEFAULT_COLOR,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        points: [[0, 2], [-1, 0], [1, 0]],
+        color: DEFAULT_COLOR,
+        showVertices: false,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(type);
+  }
+}
+function degreeToRadian(degrees) {
   return degrees / 180 * Math.PI;
-};
+}
+function radianToDegree(radians) {
+  return radians / Math.PI * 180;
+}
+
 const AngleInput = props => {
   const {
     angle,
     onChange
   } = props;
-  const [angleInput, setAngleInput] = React__namespace.useState(angle.toString());
-  const [isInDegrees, setIsInDegrees] = React__namespace.useState(false);
+  const [angleInput, setAngleInput] = React__namespace.useState(radianToDegree(angle).toString());
   function handleAngleChange(newValue) {
-    let useDegrees = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isInDegrees;
     // Update the local state (update the input field value).
     setAngleInput(newValue);
-    try {
-      // If the new value is a valid expression, update the props.
-      // Save the angle in radians.
-      const evaluatedAngle = KAS__namespace.parse(newValue).expr.eval();
-      if (useDegrees) {
-        onChange(degreeToRadian(evaluatedAngle));
-      } else {
-        onChange(evaluatedAngle);
-      }
-    } catch (e) {
-      // The user likely has not finished typing the expression.
-      // Do nothing.
+
+    // If the new value is not a number, don't update the props.
+    // If it's empty, keep the props the same value instead of setting to 0.
+    if (isNaN(+newValue) || newValue === "") {
       return;
     }
-  }
-  function handleAngleTypeChange() {
-    // Change the angle based on the new angle type.
-    handleAngleChange(angleInput, !isInDegrees);
 
-    // Update the angle to the new type.
-    setIsInDegrees(usingDegrees => !usingDegrees);
+    // Update the graph.
+    onChange(degreeToRadian(newValue));
   }
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.row, styles$q.spaceUnder]
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label"
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
     style: styles$q.row
-  }, "angle", /*#__PURE__*/React__namespace.createElement(Strut, {
+  }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    id: "",
+    type: "number",
     value: angleInput,
     onChange: handleAngleChange,
     style: styles$q.textField
-  }))), /*#__PURE__*/React__namespace.createElement(Strut, {
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.row
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, "radians"), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.switch
-  }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
-    onChange: handleAngleTypeChange,
-    checked: isInDegrees
-  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, "degrees")), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.createElement("p", null, "The angle of rotation for the ellipse (if the x radius and y radius are different)."), /*#__PURE__*/React__namespace.createElement("p", null, "Expressions will be evaluted (e.g. \"pi/2\" or \"5pi/4\").")));
+  }));
 };
 const styles$q = aphrodite.StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  switch: {
-    marginLeft: wonderBlocksTokens.spacing.xxSmall_6,
-    marginRight: wonderBlocksTokens.spacing.xxSmall_6
-  },
   textField: {
-    maxWidth: wonderBlocksTokens.spacing.xxxLarge_64
+    width: wonderBlocksTokens.spacing.xxxLarge_64
   }
 });
 
@@ -30455,16 +30521,14 @@ const ColorSelect = props => {
     style,
     onChange
   } = props;
-  const ids = wonderBlocksCore.useUniqueIdWithMock();
-  const id = ids.get("color-select");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles$o.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    htmlFor: id,
-    style: styles$o.label,
-    tag: "label"
-  }, "color"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    id: id,
+    tag: "label",
+    style: styles$o.row
+  }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: selectedValue,
     onChange: onChange
     // Placeholder is required, but never gets used.
@@ -30478,15 +30542,13 @@ const ColorSelect = props => {
       color: colorName,
       decorative: true
     })
-  }, colorName))));
+  }, colorName)))));
 };
 const styles$o = aphrodite.StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  },
-  label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
   }
 });
 
@@ -30503,12 +30565,6 @@ const CoordinatePairInput = props => {
   const [coordState, setCoordState] = React__namespace.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = wonderBlocksCore.useUniqueIdWithMock();
-  const xCoordId = ids.get("x-coord");
-  const yCoordId = ids.get("y-coord");
   function handleCoordChange(newValue, coordIndex) {
     // Update the local state (update the input field value).
     const newCoordState = [...coordState];
@@ -30529,40 +30585,38 @@ const CoordinatePairInput = props => {
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles$n.row, styles$n.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    htmlFor: xCoordId,
-    style: styles$n.label,
-    tag: "label"
-  }, labels ? labels[0] : "x coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    id: xCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
     style: [styles$n.textField, error ? styles$n.errorField : undefined]
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+  })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    htmlFor: yCoordId,
-    style: styles$n.label,
-    tag: "label"
-  }, labels ? labels[1] : "y coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    id: yCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
     style: [styles$n.textField, error ? styles$n.errorField : undefined]
-  })));
+  }))));
 };
 const styles$n = aphrodite.StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xxSmall_6
-  },
   textField: {
     width: wonderBlocksTokens.spacing.xxxLarge_64
   },
@@ -30586,7 +30640,7 @@ const EllipseSwatch = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles$m.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
-      opacity: perseus.lockedEllipseFillStyles[fillStyle]
+      opacity: perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
@@ -30704,9 +30758,6 @@ const LockedEllipseSettings = props => {
     onChangeProps,
     onRemove
   } = props;
-  const ids = wonderBlocksCore.useUniqueIdWithMock();
-  const strokeSelectId = ids.get("stroke-style-select");
-  const fillSelectId = ids.get("fill-style-select");
   function handleColorChange(newValue) {
     onChangeProps({
       color: newValue
@@ -30758,10 +30809,10 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    htmlFor: fillSelectId,
-    style: styles$j.label
-  }, "fill"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    id: fillSelectId,
+    style: styles$j.row
+  }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: fillStyle,
     onChange: value => onChangeProps({
       fillStyle: value
@@ -30769,18 +30820,16 @@ const LockedEllipseSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
-  }, Object.keys(perseus.lockedEllipseFillStyles).map(option => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+  }, Object.keys(perseus.lockedFigureFillStyles).map(option => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: option,
     value: option,
     label: option
-  }, option)))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$j.row
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+  }, option))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    htmlFor: strokeSelectId,
-    style: styles$j.label
-  }, "stroke"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    id: strokeSelectId,
+    style: styles$j.row
+  }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: strokeStyle,
     onChange: value => onChangeProps({
       strokeStyle: value
@@ -30801,12 +30850,10 @@ const LockedEllipseSettings = props => {
 };
 const styles$j = aphrodite.StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xxSmall_6
-  },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   }
@@ -30966,12 +31013,6 @@ const LockedLineSettings = props => {
     onRemove
   } = props;
   const [point1, point2] = points;
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = wonderBlocksCore.useUniqueIdWithMock();
-  const kindSelectId = ids.get("line-kind-select");
-  const styleSelectId = ids.get("line-style-select");
   const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
   const lineLabel = `${capitalizeKind} (${point1.coord[0]},
         ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
@@ -31012,14 +31053,12 @@ const LockedLineSettings = props => {
       color: lineColor,
       lineStyle: lineStyle
     }))
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$f.row, styles$f.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    htmlFor: kindSelectId,
-    style: styles$f.label,
-    tag: "label"
-  }, "kind"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    id: kindSelectId,
+    tag: "label",
+    style: [styles$f.row, styles$f.spaceUnder]
+  }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: kind,
     onChange: value => onChangeProps({
       kind: value
@@ -31037,20 +31076,18 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$f.row, styles$f.spaceUnder]
+    style: styles$f.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
     style: styles$f.row
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    htmlFor: styleSelectId,
-    style: styles$f.label,
-    tag: "label"
-  }, "style"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    id: styleSelectId,
+  }, "style", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: lineStyle,
     onChange: value => onChangeProps({
       lineStyle: value
@@ -31094,15 +31131,13 @@ const LockedLineSettings = props => {
 };
 const styles$f = aphrodite.StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
-  },
   selectMarginOffset: {
     // Align with the point settings accordions.
     marginInlineEnd: -wonderBlocksTokens.spacing.xxxSmall_4
@@ -31315,90 +31350,6 @@ const LockedFigureSettings = props => {
   return null;
 };
 
-function focusWithChromeStickyFocusBugWorkaround(element) {
-  // NOTE(marksandstrom) Chrome sticky focus bug.
-  //
-  // There is a bug in Chrome related to sticky positioning and
-  // focus: When a child of an element with sticky positioning is
-  // focused with the focus() method, the scrollable area
-  // containing that element will scroll to the top (even though
-  // the element is already visble on the page). For a dropdown
-  // this means that the area will be scrolled to the top when
-  // the user interacts with the dropdown (since we actively
-  // manage dropdown header and option focus for keyboard users).
-  //
-  // To work around this bug the `preventScroll` focus option is
-  // used.
-  //
-  // Using `focusOptions` is an experimental browser feature
-  // "that should not be used in production code". However, since
-  // Chrome is the only browser we support that exhibits this
-  // buggy behavior and using `focusOptions` works around the
-  // bug, it is perfectly reasonable to use the feature in this
-  // case. We are not relying on the effect of the
-  // `preventScroll` option otherwise.
-  //
-  // focusOptions documentation:
-  //
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-  //
-  // Note that there could be cases where we want default focus() behavior.
-  // One that comes to mind is a dropdown with a long list of options that
-  // might be rendered off screen when opened. With this workaround the
-  // selected option would not be scrolled into view if the option is near
-  // the end of the list. We're not aware of any uses of the dropdown where
-  // this is an issue, however, so there isn't currently a way to out of the
-  // `preventScroll` behavior.
-
-  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
-  element.focus({
-    preventScroll: true
-  });
-}
-const DEFAULT_COLOR = "grayH";
-function getDefaultFigureForType(type) {
-  switch (type) {
-    case "point":
-      return {
-        type: "point",
-        coord: [0, 0],
-        color: DEFAULT_COLOR,
-        filled: true
-      };
-    case "line":
-      return {
-        type: "line",
-        kind: "line",
-        points: [getDefaultFigureForType("point"), {
-          ...getDefaultFigureForType("point"),
-          coord: [2, 2]
-        }],
-        color: DEFAULT_COLOR,
-        lineStyle: "solid",
-        showPoint1: false,
-        showPoint2: false
-      };
-    case "ellipse":
-      return {
-        type: "ellipse",
-        center: [0, 0],
-        radius: [1, 1],
-        angle: 0,
-        color: DEFAULT_COLOR,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "vector":
-      return {
-        type: "vector",
-        points: [[0, 0], [2, 2]],
-        color: DEFAULT_COLOR
-      };
-    default:
-      throw new wonderStuffCore.UnreachableCaseError(type);
-  }
-}
-
 const LockedFiguresSection = props => {
   // Keep track of all figures' accordions' expanded states for the
   // expand/collapse all button. Set the whole array to false initially.
@@ -31451,6 +31402,12 @@ const LockedFiguresSection = props => {
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!figures?.length;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
+    if (figure.type === "polygon") {
+      // TODO(LEMS-1943): Implement locked polygon settings.
+      // Remove this block once locked polygon settings are
+      // implemented.
+      return;
+    }
     return /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
       showM2Features: props.showM2Features,
@@ -31573,6 +31530,15 @@ class InteractiveGraphEditor extends React__namespace.Component {
   UNSAFE_componentWillMount() {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
+  static buildGraphKey(correct) {
+    const testGraphKey = [];
+    for (const key in correct) {
+      if (correct[key]) {
+        typeof correct[key] === "number" || typeof correct[key] === "string" || typeof correct[key] === "boolean" ? testGraphKey.push(correct[key]) : testGraphKey.push(0);
+      }
+    }
+    return testGraphKey.join(":");
+  }
   render() {
     let graph;
     let equationString;
@@ -31615,10 +31581,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
           });
         }
       };
-
       // This is used to force a remount of the graph component
       // when there's a significant change
-      const graphKey = `${correct.type}:${correct.numSegments || 0}`;
+      const graphKey = InteractiveGraphEditor.buildGraphKey(correct);
       graph =
       /*#__PURE__*/
       // There are a bunch of props that renderer.jsx passes to widgets via