@khanacademy/perseus-editor 14.0.0 → 14.1.0

package/dist/es/index.js

@@ -1,8 +1,8 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 export { widgets } from '@khanacademy/perseus';
 import * as React from 'react';
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState, useId } from 'react';
 import _ from 'underscore';
 import createReactClass from 'create-react-class';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
@@ -31,6 +31,8 @@ import caretDoubleUpIcon from '@phosphor-icons/core/bold/caret-double-up-bold.sv
 import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
 import caretUpIcon from '@phosphor-icons/core/bold/caret-up-bold.svg';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
+import copyIcon from '@phosphor-icons/core/assets/regular/copy.svg';
+import autoPasteIcon from '@phosphor-icons/core/assets/regular/note-pencil.svg';
 import arrowFatDown from '@phosphor-icons/core/regular/arrow-fat-down.svg';
 import arrowFatLeft from '@phosphor-icons/core/regular/arrow-fat-left.svg';
 import arrowFatRight from '@phosphor-icons/core/regular/arrow-fat-right.svg';
@@ -42,7 +44,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.0.0";
+const libVersion = "14.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -209,7 +211,7 @@ const JsonEditor = createReactClass({
 });
 
 const {
-  InlineIcon: InlineIcon$a
+  InlineIcon: InlineIcon$b
 } = components;
 class SectionControlButton extends React.Component {
   render() {
@@ -227,15 +229,15 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$T.button
+      style: styles$U.button
     }, ({
       hovered,
       focused,
       pressed
-    }) => /*#__PURE__*/React.createElement(InlineIcon$a, icon));
+    }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$T = StyleSheet.create({
+const styles$U = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20626,11 +20628,11 @@ class Spring extends React.Component {
     } = this.props;
     return React.createElement(View, {
       "aria-hidden": "true",
-      style: [styles$S.grow, style]
+      style: [styles$T.grow, style]
     });
   }
 }
-const styles$S = StyleSheet.create({
+const styles$T = StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -20674,7 +20676,7 @@ const Spacing = {
 
 const _excluded$4 = ["label"];
 const {
-  InlineIcon: InlineIcon$9
+  InlineIcon: InlineIcon$a
 } = components;
 const {
   iconChevronDown: iconChevronDown$1,
@@ -20780,7 +20782,7 @@ class WidgetEditor extends React.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement(LabeledSwitch$1, {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement(LabeledSwitch$1, {
       label: "Static",
       checked: !!widgetInfo.static,
       onChange: this._setStatic
@@ -20867,13 +20869,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$R.expanded : styles$R.collapsed;
+  const iconStyle = props.isExpanded ? styles$S.expanded : styles$S.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$R = StyleSheet.create({
+const styles$S = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20906,16 +20908,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.errorContainer
+      style: styles$R.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.title,
+      style: styles$R.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.errorExplanation
+      style: styles$R.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.error,
+      style: styles$R.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20924,7 +20926,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$Q = StyleSheet.create({
+const styles$R = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -21913,7 +21915,7 @@ class IframeContentRenderer extends React.Component {
 
 const {
   HUD: HUD$1,
-  InlineIcon: InlineIcon$8
+  InlineIcon: InlineIcon$9
 } = components;
 const {
   iconCircleArrowDown: iconCircleArrowDown$1,
@@ -22072,7 +22074,7 @@ class ArticleEditor extends React.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React.createElement(InlineIcon$8, iconPlus$4), " Add a section")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React.createElement(HUD$1, {
@@ -22219,8 +22221,8 @@ ArticleEditor.defaultProps = {
  * Renders three buttons: "Phone", "Tablet", and "Desktop".
  */
 const {
-  ButtonGroup: ButtonGroup$5,
-  InlineIcon: InlineIcon$7
+  ButtonGroup: ButtonGroup$8,
+  InlineIcon: InlineIcon$8
 } = components;
 const {
   devices
@@ -22231,14 +22233,14 @@ const {
   iconTablet
 } = icons;
 const ViewportResizer = props => {
-  const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$7, iconMobilePhone), " Phone");
-  const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$7, iconTablet), " Tablet");
-  const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$7, iconDesktop), " Desktop");
+  const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconMobilePhone), " Phone");
+  const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconTablet), " Tablet");
+  const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconDesktop), " Desktop");
 
   // TODO(david): Allow input of custom viewport sizes.
   return /*#__PURE__*/React.createElement("span", {
     className: "viewport-resizer"
-  }, "Viewport:", " ", /*#__PURE__*/React.createElement(ButtonGroup$5, {
+  }, "Viewport:", " ", /*#__PURE__*/React.createElement(ButtonGroup$8, {
     value: props.deviceType,
     allowEmpty: false,
     buttons: [{
@@ -23581,7 +23583,7 @@ class StructuredItemDiff extends React.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$m,
-  InlineIcon: InlineIcon$6
+  InlineIcon: InlineIcon$7
 } = components;
 const {
   iconCircleArrowDown,
@@ -23648,11 +23650,11 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isLast ? "hidden" : "",
       onClick: _.partial(this.props.onMove, 1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconCircleArrowDown)), " ", /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowDown)), " ", /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$m, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$m, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23662,7 +23664,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$5), "Remove this hint", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
   }
 }
 HintEditor.defaultProps = {
@@ -23886,7 +23888,7 @@ class CombinedHintsEditor extends React.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconPlus$3), " Add a hint"))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
@@ -24037,7 +24039,7 @@ ItemExtrasEditor.defaultProps = {
   zTable: false
 };
 const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
-  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
+  style: [styles$Q.checkbox, props.indent ? styles$Q.indented : undefined]
 }, /*#__PURE__*/React.createElement(Checkbox$1, {
   label: /*#__PURE__*/React.createElement(View, {
     style: {
@@ -24047,7 +24049,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$P = StyleSheet.create({
+const styles$Q = StyleSheet.create({
   indented: {
     marginInlineStart: spacing.large_24
   }
@@ -24705,7 +24707,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$O.baseButton, color === "green" && styles$O.green, color === "orange" && styles$O.orange),
+      className: css(styles$P.baseButton, color === "green" && styles$P.green, color === "orange" && styles$P.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24720,7 +24722,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$O = StyleSheet.create({
+const styles$P = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24770,7 +24772,7 @@ const _excluded$2 = ["depth"],
   _excluded4 = ["shape", "data", "path", "actions"],
   _excluded5 = ["shape", "data", "path"];
 const {
-  InlineIcon: InlineIcon$5
+  InlineIcon: InlineIcon$6
 } = components;
 const {
   iconChevronDown,
@@ -24940,23 +24942,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerHeader)
+    className: css(styles$O.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$N.containerTitle)
+    className: css(styles$O.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.container)
+    className: css(styles$O.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$N.row, styles$N.rowHeading)
+    className: css(styles$O.row, styles$O.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$O.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$N.containerHeader)
+    className: "pod-title " + css(styles$O.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerTitle)
+    className: css(styles$O.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$O.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24969,11 +24971,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.container)
+    className: css(styles$O.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft, styles$N.containerHeader)
+    className: css(styles$O.columnLeft, styles$O.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$O.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24986,28 +24988,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerHeader)
+    className: css(styles$O.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$N.containerTitle)
+    className: css(styles$O.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerHeader, styles$N.previewCollectionHeader)
+    className: css(styles$O.containerHeader, styles$O.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$N.containerTitle)
+    className: css(styles$O.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.container)
+    className: css(styles$O.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$N.row)
+    className: css(styles$O.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$O.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$O.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$N.contentIndent)
+    className: css(path.length > 0 && styles$O.contentIndent)
   }, children));
 };
 
@@ -25130,11 +25132,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.row)
+    className: css(styles$O.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$O.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$O.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25142,9 +25144,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$O.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$O.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25160,13 +25162,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.row)
+    className: css(styles$O.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$O.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$O.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$N.hintEditor),
+    className: css(styles$O.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25181,9 +25183,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$O.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$O.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25200,9 +25202,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$O.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.tagsEditor)
+    className: css(styles$O.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25233,31 +25235,31 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$N.control)
+      className: css(styles$O.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$N.verticalFlip)
-    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
+      className: css(styles$O.verticalFlip)
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$N.control)
+      className: css(styles$O.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
-    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$N.control)
+      className: css(styles$O.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$4)))];
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$N.arrayElement, !elementIsLeaf && styles$N.arrayElementAndNotLeaf)
+      className: css(styles$O.arrayElement, !elementIsLeaf && styles$O.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25283,7 +25285,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$N.objectElement)
+    className: css(styles$O.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25450,7 +25452,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$N = StyleSheet.create({
+const styles$O = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -26008,7 +26010,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$j,
-  InlineIcon: InlineIcon$4
+  InlineIcon: InlineIcon$5
 } = components;
 const {
   iconPlus: iconPlus$2,
@@ -26128,14 +26130,14 @@ class DropdownEditor extends React.Component {
         this, i)
       }, /*#__PURE__*/React.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React.createElement(InlineIcon$4, iconTrash$3)))));
+      }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$3)))));
     }, this)), /*#__PURE__*/React.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$2), " Add a choice", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
   }
 }
 DropdownEditor.propTypes = {
@@ -26396,7 +26398,7 @@ const SortableItem = createReactClass({
     }
     return /*#__PURE__*/React.createElement("li", {
       draggable: this.props.draggable,
-      className: [dragState, css(styles$M.sortableListItem)].join(" "),
+      className: [dragState, css(styles$N.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26404,7 +26406,7 @@ const SortableItem = createReactClass({
     }, this.props.component);
   }
 });
-const styles$M = StyleSheet.create({
+const styles$N = StyleSheet.create({
   sortableListItem: {
     margin: "5px 0"
   }
@@ -26652,13 +26654,13 @@ class ExpressionEditor extends React.Component {
       onChange: this.handleToggleDiv
     }));
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(HeadingSmall, null, "Global Options"), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.paddedY)
+      className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Visible label",
       value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.paddedY)
+      className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
@@ -26667,13 +26669,13 @@ class ExpressionEditor extends React.Component {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
     }, "this article.")))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.paddedY)
+      className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.paddedY)
+      className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
@@ -26683,7 +26685,7 @@ class ExpressionEditor extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.paddedY)
+      className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React.createElement(HeadingSmall, null, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
         margin: "4px 0"
@@ -26754,18 +26756,18 @@ class AnswerOption extends React.Component {
       color: "destructive",
       light: true
     }, "Delete");
-    const answerStatusCss = css(styles$L.answerStatus, this.props.considered === "wrong" && styles$L.answerStatusWrong, this.props.considered === "correct" && styles$L.answerStatusCorrect, this.props.considered === "ungraded" && styles$L.answerStatusUngraded);
+    const answerStatusCss = css(styles$M.answerStatus, this.props.considered === "wrong" && styles$M.answerStatusWrong, this.props.considered === "correct" && styles$M.answerStatusCorrect, this.props.considered === "ungraded" && styles$M.answerStatusUngraded);
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.answerOption)
+      className: css(styles$M.answerOption)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.answerHandle)
+      className: css(styles$M.answerHandle)
     }), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.answerBody)
+      className: css(styles$M.answerBody)
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       onClick: this.toggleConsidered,
       className: answerStatusCss
     }, this.props.considered), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.paddedY, styles$L.paddedX)
+      className: css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -26775,7 +26777,7 @@ class AnswerOption extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.paddedY, styles$L.paddedX)
+      className: css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -26785,11 +26787,11 @@ class AnswerOption extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$L.buttonRow, styles$L.paddedY)
+      className: css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
   }
 }
-const styles$L = StyleSheet.create({
+const styles$M = StyleSheet.create({
   paddedX: {
     paddingLeft: spacing.xSmall_8,
     paddingRight: spacing.xSmall_8
@@ -26834,7 +26836,7 @@ const styles$L = StyleSheet.create({
 });
 
 const {
-  InlineIcon: InlineIcon$3,
+  InlineIcon: InlineIcon$4,
   TextInput: TextInput$5
 } = components;
 const {
@@ -26884,10 +26886,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$K.title)
+      className: css(styles$L.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$5, {
       value: this.props.title,
-      className: css(styles$K.input)
+      className: css(styles$L.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26909,10 +26911,10 @@ class GradedGroupEditor extends React.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$K.hintsTitle)
+      className: css(styles$L.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -26931,7 +26933,7 @@ class GradedGroupEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$3, iconTrash$2), " Remove this hint")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
   }
 }
 GradedGroupEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -26949,7 +26951,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$K = StyleSheet.create({
+const styles$L = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27026,7 +27028,7 @@ GradedGroupSetEditor.defaultProps = {
 const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.slice(i + 1)];
 
 const {
-  ButtonGroup: ButtonGroup$4,
+  ButtonGroup: ButtonGroup$7,
   InfoTip: InfoTip$h,
   RangeInput: RangeInput$6
 } = components;
@@ -27441,7 +27443,7 @@ const GraphSettings = createReactClass({
       onChange: this.changeSnapStep
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Markings: "), /*#__PURE__*/React.createElement(ButtonGroup$4, {
+    }, /*#__PURE__*/React.createElement("label", null, "Markings: "), /*#__PURE__*/React.createElement(ButtonGroup$7, {
       value: this.props.markings,
       allowEmpty: false,
       buttons: [{
@@ -27866,7 +27868,7 @@ IframeEditor.defaultProps = {
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const {
   InfoTip: InfoTip$f,
-  InlineIcon: InlineIcon$2,
+  InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = components;
 const defaultBoxSize = 400;
@@ -27942,7 +27944,7 @@ class ImageEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconTrash))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$3, icons.iconTrash))));
   }
   change(...args) {
     return Changeable.change.apply(this, args);
@@ -28258,6 +28260,111 @@ InputNumberEditor.defaultProps = {
   rightAlign: false
 };
 
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const {
+  InlineIcon: InlineIcon$2
+} = components;
+class ElementContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.toggle = e => {
+      e.preventDefault();
+      this.setState({
+        show: !this.state.show
+      });
+    };
+    this.state = {
+      show: props.initiallyVisible
+    };
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "perseus-interaction-element"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "perseus-interaction-element-title " + (this.state.show ? "open" : "closed"),
+      onClick: this.toggle
+    }, this.state.show ? /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconChevronDown) : /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconChevronRight), this.props.title), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-interaction-element-content " + (this.state.show ? "enter" : "leave")
+    }, this.props.children, (this.props.onUp != null || this.props.onDown != null || this.props.onDelete != null) && /*#__PURE__*/React.createElement("div", {
+      className: "edit-controls"
+    }, this.props.onUp != null && /*#__PURE__*/React.createElement("button", {
+      onClick: this.props.onUp
+    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React.createElement("button", {
+      onClick: this.props.onDown
+    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React.createElement("button", {
+      onClick: this.props.onDelete
+    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconTrash)))));
+  }
+}
+ElementContainer.defaultProps = {
+  initiallyVisible: false,
+  title: "More"
+};
+
+const {
+  ButtonGroup: ButtonGroup$6
+} = components;
+const COLORS = [KhanColors.BLACK, KhanColors.BLUE, KhanColors.GREEN, KhanColors.PINK, KhanColors.PURPLE, KhanColors.RED, KhanColors.GRAY];
+const LIGHT_COLORS = [KhanColors.LIGHT_BLUE, KhanColors.LIGHT_ORANGE, KhanColors.LIGHT_PINK, KhanColors.LIGHT_GREEN, KhanColors.LIGHT_PURPLE, KhanColors.LIGHT_RED, "#fff"];
+class ColorPicker extends React.Component {
+  render() {
+    const colors = this.props.lightColors ? LIGHT_COLORS : COLORS;
+    return /*#__PURE__*/React.createElement(ButtonGroup$6, {
+      value: this.props.value,
+      allowEmpty: false,
+      buttons: _.map(colors, color => {
+        return {
+          value: color,
+          content: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+            className: "colorpicker-circle",
+            style: {
+              background: color
+            }
+          }), "\xA0")
+        };
+      }),
+      onChange: this.props.onChange
+    });
+  }
+}
+ColorPicker.defaultProps = {
+  value: KhanColors.BLACK,
+  lightColors: false
+};
+
+const {
+  ButtonGroup: ButtonGroup$5
+} = components;
+class DashPicker extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(ButtonGroup$5, {
+      value: this.props.value,
+      allowEmpty: false,
+      buttons: [{
+        value: "",
+        content: /*#__PURE__*/React.createElement("span", null, "\u2014")
+      }, {
+        value: "-",
+        content: /*#__PURE__*/React.createElement("span", null, "\u2013\u2013\u2013")
+      }, {
+        value: "- ",
+        content: /*#__PURE__*/React.createElement("span", null, "\u2013\xA0\xA0\u2013")
+      }, {
+        value: ".",
+        content: /*#__PURE__*/React.createElement("span", null, "\xB7\xB7\xB7\xB7")
+      }, {
+        value: ". ",
+        content: /*#__PURE__*/React.createElement("span", null, "\xB7 \xB7 \xB7")
+      }],
+      onChange: this.props.onChange
+    });
+  }
+}
+DashPicker.defaultProps = {
+  value: ""
+};
+
 /**
  * A simple Mathquill MathField input for the InteractionEditor.
  * Unlike our other uses of Mathquill, we're not using a keypad here;
@@ -28303,13 +28410,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$J.outerWrapper
+    style: styles$K.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$J = StyleSheet.create({
+const styles$K = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -28441,6 +28548,35 @@ LabelEditor.defaultProps = {
   label: "\\phi"
 };
 
+const {
+  ButtonGroup: ButtonGroup$4
+} = components;
+class ArrowPicker extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(ButtonGroup$4, {
+      value: this.props.value,
+      allowEmpty: false,
+      buttons: [{
+        value: "",
+        content: /*#__PURE__*/React.createElement("span", null, "\u2014")
+      }, {
+        value: "->",
+        content: /*#__PURE__*/React.createElement("span", null, "\u2192")
+      }
+      /*
+      TODO(eater): fix khan-exercises so these are supported
+      {value: "<-", content: <span>&#x2190;</span>},
+      {value: "<->", content: <span>&#x2194;</span>}
+      */],
+
+      onChange: this.props.onChange
+    });
+  }
+}
+ArrowPicker.defaultProps = {
+  value: ""
+};
+
 const {
   NumberInput: NumberInput$c
 } = components;
@@ -29346,6 +29482,20 @@ class InteractionEditor extends React.Component {
 InteractionEditor.widgetName = "interaction";
 InteractionEditor.defaultProps = defaultInteractionProps;
 
+var isProduction = process.env.NODE_ENV === 'production';
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (isProduction) {
+        throw new Error(prefix);
+    }
+    var provided = typeof message === 'function' ? message() : message;
+    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+    throw new Error(value);
+}
+
 // Renders the given children in a View laid out horizontally.
 const LabeledRow = props => {
   const {
@@ -29355,16 +29505,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$I.label)
+    className: css(styles$J.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$I.row, style]
+    style: [styles$J.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$I.spaceEnd
+    style: styles$J.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$I.spaceStart
+    style: styles$J.spaceStart
   }, label)));
 };
-const styles$I = StyleSheet.create({
+const styles$J = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29389,11 +29539,11 @@ function Heading({
   onToggle
 }) {
   return /*#__PURE__*/React.createElement(Clickable, {
-    style: [styles$H.container, !isCollapsible && styles$H.notClickable],
+    style: [styles$I.container, !isCollapsible && styles$I.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
   }, () => /*#__PURE__*/React.createElement(View, {
-    style: styles$H.heading
+    style: styles$I.heading
   }, /*#__PURE__*/React.createElement(LabelLarge, {
     style: {
       fontSize: 14,
@@ -29403,7 +29553,7 @@ function Heading({
     isExpanded: isOpen
   })));
 }
-const styles$H = StyleSheet.create({
+const styles$I = StyleSheet.create({
   container: {
     marginTop: spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29681,17 +29831,17 @@ const LockedFigureSelect = props => {
     figureTypes.push("label");
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$G.container
+    style: styles$H.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$G.addElementSelect
+    style: styles$H.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$G = StyleSheet.create({
+const styles$H = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -29761,18 +29911,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$F.row
+    style: styles$G.row
   }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$F.textField
+    style: styles$G.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }));
 };
-const styles$F = StyleSheet.create({
+const styles$G = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29821,30 +29971,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$E.row, style]
+    style: [styles$F.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$E.row
+    style: styles$F.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$E.textField, error ? styles$E.errorField : undefined]
+    style: [styles$F.textField, error ? styles$F.errorField : undefined]
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$E.row
+    style: styles$F.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$E.textField, error ? styles$E.errorField : undefined]
+    style: [styles$F.textField, error ? styles$F.errorField : undefined]
   })));
 };
-const styles$E = StyleSheet.create({
+const styles$F = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29877,14 +30027,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$D.container, containerStyle],
-    headerStyle: styles$D.accordionHeader,
+    style: [styles$E.container, containerStyle],
+    headerStyle: styles$E.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$D.accordionPanel, panelStyle]
+    style: [styles$E.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$D = StyleSheet.create({
+const styles$E = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -29915,13 +30065,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$C.colorSwatch, {
+    style: [styles$D.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$C = StyleSheet.create({
+const styles$D = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -29940,10 +30090,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$B.row, style]
+    style: [styles$C.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$B.row
+    style: styles$C.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -29962,7 +30112,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$B = StyleSheet.create({
+const styles$C = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29981,17 +30131,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$A.container, {
+    style: [styles$B.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$A.innerCircle, {
+    style: [styles$B.innerCircle, {
       backgroundColor: lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$A = StyleSheet.create({
+const styles$B = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30017,7 +30167,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$z.lineStrokeSelect
+    style: styles$A.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30034,7 +30184,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$z = StyleSheet.create({
+const styles$A = StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30056,40 +30206,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$y.container
+    style: styles$z.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$y.deleteButton
+    style: styles$z.deleteButton
   }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }));
 };
-const styles$y = StyleSheet.create({
+const styles$z = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30136,7 +30286,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$x.row
+      style: styles$y.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(EllipseSwatch, {
@@ -30145,19 +30295,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$x.row
+    style: styles$y.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$x.spaceUnder,
+    style: styles$y.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$x.spaceUnder
+    style: styles$y.spaceUnder
   }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$x.spaceUnder,
+    style: styles$y.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30169,7 +30319,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$x.row, styles$x.spaceUnder]
+    style: [styles$y.row, styles$y.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30177,7 +30327,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$x.row, styles$x.truncatedWidth]
+    style: [styles$y.row, styles$y.truncatedWidth]
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30203,7 +30353,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$x = StyleSheet.create({
+const styles$y = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30224,15 +30374,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$w.container
+    style: styles$x.container
   }, /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$w.lineSwatch, {
+    style: [styles$x.lineSwatch, {
       border: `5px ${lineStyle} ${lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$w = StyleSheet.create({
+const styles$x = StyleSheet.create({
   container: {
     backgroundColor: color.white,
     justifyContent: "center",
@@ -30244,6 +30394,12 @@ const styles$w = StyleSheet.create({
   }
 });
 
+const examples = {
+  linear: ["x + 5", "1/2x - 2"],
+  polynomial: ["1/2x^2 + 3x - 4", "(1/3)x^3 - 2x^2 + 3x - 4"],
+  trigonometric: ["sin(x) * 3", "arctan(2x) + 4"]
+};
+
 /**
  * LockedFunctionSettings is a component that allows the user to edit the
  * settings of specifically a locked function on the graph.
@@ -30262,18 +30418,20 @@ const LockedFunctionSettings = props => {
     onRemove
   } = props;
   const equationPrefix = directionalAxis === "x" ? "y=" : "x=";
+  const domainRangeText = directionalAxis === "x" ? "domain" : "range";
   const lineLabel = `Function (${equationPrefix}${equation})`;
 
-  // Tracking the string value of domain constraints to handle interim state of
+  // Tracking the string value of domain/range constraints to handle interim state of
   //     entering a negative value, as well as representing Infinity as an empty string.
   // This variable is used when specifying the values of the input fields.
   const [domainEntries, setDomainEntries] = useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  const [exampleCategory, setExampleCategory] = useState("");
   useEffect(() => {
-    // "useEffect" used to maintain parity between domain constraints and their string representation.
+    // "useEffect" used to maintain parity between domain/range constraints and their string representation.
     setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
   }, [domain]);
 
-  // Generic function for handling property changes (except for 'domain')
+  // Generic function for handling property changes (except for 'domain/range')
   function handlePropChange(property, newValue) {
     const updatedProps = {};
     updatedProps[property] = newValue;
@@ -30281,8 +30439,8 @@ const LockedFunctionSettings = props => {
   }
 
   /*
-   Reason for having a separate 'propChange' function for 'domain':
-      Domain entries are optional. Their default value is +/- Infinity.
+   Reason for having a separate 'propChange' function for 'domain/range':
+      Domain/Range entries are optional. Their default value is +/- Infinity.
       Since input fields that are empty evaluate to zero, there needs to be
           dedicated code to convert empty to Infinity.
    */
@@ -30302,13 +30460,16 @@ const LockedFunctionSettings = props => {
       domain: newDomain
     });
   }
+  const exampleCategories = Object.keys(examples);
+  const exampleCategorySelected = exampleCategory !== "";
+  const exampleContent = exampleCategorySelected ? examples[exampleCategory] : ["Select category to see example equations"];
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$v.row
+      style: styles$w.row
     }, /*#__PURE__*/React.createElement(LabelLarge, {
-      style: styles$v.accordionHeader
+      style: styles$w.accordionHeader
     }, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30316,7 +30477,7 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$v.row, styles$v.spaceUnder]
+    style: [styles$w.row, styles$w.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: newValue => {
@@ -30330,14 +30491,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$v.row, styles$v.rowSpace]
+    style: [styles$w.row, styles$w.rowSpace]
   }, /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: directionalAxis,
     onChange: newValue => {
       handlePropChange("directionalAxis", newValue);
     },
     "aria-label": "equation prefix",
-    style: styles$v.equationPrefix
+    style: [styles$w.dropdownLabel, styles$w.axisMenu]
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
@@ -30356,17 +30517,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$v.textField]
+    style: [styles$w.textField]
   })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$v.row, styles$v.rowSpace]
+    style: [styles$w.row, styles$w.rowSpace]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$v.domainMin
-  }, "domain min", /*#__PURE__*/React.createElement(Strut, {
+    style: [styles$w.dropdownLabel, styles$w.domainMin]
+  }, `${domainRangeText} min`, /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
-    style: styles$v.domainMinField,
+    style: styles$w.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -30375,24 +30536,83 @@ const LockedFunctionSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    "aria-label": "domain max",
-    style: styles$v.domainMax
+    "aria-label": `${domainRangeText} max`,
+    style: [styles$w.dropdownLabel, styles$w.domainMax]
   }, "max", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
-    style: styles$v.domainMaxField,
+    style: styles$w.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
     }
-  }))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  }))), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    header: /*#__PURE__*/React.createElement(LabelLarge, null, "Example Functions"),
+    expanded: false,
+    containerStyle: styles$w.exampleWorkspace,
+    panelStyle: styles$w.exampleAccordionPanel
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$w.dropdownLabel
+  }, "Choose a category", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: exampleCategory,
+    onChange: setExampleCategory,
+    placeholder: "examples"
+  }, exampleCategories.map(category => {
+    return /*#__PURE__*/React.createElement(OptionItem, {
+      key: category,
+      value: category,
+      label: category
+    });
+  }))), exampleCategorySelected && /*#__PURE__*/React.createElement("ul", {
+    className: css(styles$w.exampleContainer)
+  }, exampleContent.map((example, index) => /*#__PURE__*/React.createElement(ExampleItem, {
+    category: exampleCategory,
+    example: example,
+    index: index,
+    pasteEquationFn: handlePropChange
+  })))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$v = StyleSheet.create({
+const ExampleItem = props => {
+  const {
+    category,
+    example,
+    index,
+    pasteEquationFn
+  } = props;
+  const exampleId = useId();
+  return /*#__PURE__*/React.createElement("li", {
+    key: `${category}-${index}`,
+    className: css(styles$w.exampleRow)
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: autoPasteIcon,
+    "aria-label": "paste example",
+    "aria-describedby": exampleId,
+    onClick: () => pasteEquationFn("equation", example),
+    size: "medium",
+    style: styles$w.copyPasteButton
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: copyIcon,
+    "aria-label": "copy example",
+    "aria-describedby": exampleId,
+    onClick: () => navigator.clipboard.writeText(example),
+    size: "medium",
+    style: styles$w.copyPasteButton
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$w.exampleContent,
+    id: exampleId
+  }, example));
+};
+const styles$w = StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -30402,17 +30622,20 @@ const styles$v = StyleSheet.create({
     overflow: "hidden",
     whiteSpace: "nowrap"
   },
-  equationPrefix: {
+  axisMenu: {
     minWidth: "auto"
   },
+  copyPasteButton: {
+    flexShrink: "0",
+    margin: "0 2px"
+  },
   domainMin: {
-    alignItems: "center",
-    display: "flex",
+    justifyContent: "space-between",
     // The 'width' property is applied to the label, which wraps the text and the input field.
     // The width of the input fields (min/max) should be the same (to have a consistent look),
     //     so the following calculation distributes the space accordingly.
-    // For the "domain min" block, the text is 82.7px, and the strut is 6px (88.7px total).
-    // The "domain max" block is 30.23px, and the strut is 6px (36.23px total).
+    // For the "domain/range min" block, the text is 82.7px, and the strut is 6px (88.7px total).
+    // The "domain/range max" block is 30.23px, and the strut is 6px (36.23px total).
     // The calculation takes the remain space after the text & struts (141px total) are removed,
     //     and divides it between the two input fields equally.
     // The calculation reads: "Take 1/2 of the non-text space, and add the required space for this label's text"
@@ -30425,8 +30648,6 @@ const styles$v = StyleSheet.create({
   },
 
   domainMax: {
-    alignItems: "center",
-    display: "flex",
     // See explanation for "domainMin" for the calculation below.
     width: "calc(((100% - 141px) / 2) + 36.2px)"
   },
@@ -30434,6 +30655,44 @@ const styles$v = StyleSheet.create({
     width: "calc(100% - 36.2px)" // make room for the label
   },
 
+  dropdownLabel: {
+    alignItems: "center",
+    display: "flex"
+  },
+  exampleAccordionPanel: {
+    alignItems: "start",
+    paddingBottom: "12px",
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  exampleContainer: {
+    background: "white",
+    border: `1px solid ${color.fadedOffBlack16}`,
+    borderRadius: "4px",
+    flexGrow: "1",
+    listStyleType: "none",
+    // Nothing special about the maxHeight value,
+    //    just a good height to partially show a 3rd example in the list
+    //    to hint at scrollable content.
+    maxHeight: "88px",
+    margin: "8px 0 0 0",
+    overflowY: "scroll",
+    padding: "4px 12px 4px 4px"
+  },
+  exampleContent: {
+    fontFamily: `"Lato", sans-serif`,
+    flexGrow: "1",
+    color: color.offBlack
+  },
+  exampleRow: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    minHeight: "44px"
+  },
+  exampleWorkspace: {
+    background: color.white50
+  },
   rowSpace: {
     marginTop: spacing.xSmall_8
   },
@@ -30471,14 +30730,14 @@ function LockedLabelSettings(props) {
     expanded: expanded,
     onToggle: onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: [styles$u.row, styles$u.accordionHeaderContainer]
+      style: [styles$v.row, styles$v.accordionHeaderContainer]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), text !== "" && /*#__PURE__*/React.createElement(LabelLarge, {
       style: [{
         backgroundColor: color.white,
         color: lockedFigureColors[color$1]
-      }, styles$u.accordionHeader]
+      }, styles$v.accordionHeader]
     }, text))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
@@ -30487,10 +30746,10 @@ function LockedLabelSettings(props) {
         coord: newCoords
       });
     },
-    style: styles$u.spaceUnder
+    style: styles$v.spaceUnder
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$u.row, styles$u.spaceUnder]
+    style: [styles$v.row, styles$v.spaceUnder]
   }, "TeX", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(TextField, {
@@ -30500,7 +30759,7 @@ function LockedLabelSettings(props) {
       text: newValue
     })
   })), /*#__PURE__*/React.createElement(View, {
-    style: styles$u.row
+    style: styles$v.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color$1,
     onChange: newColor => {
@@ -30508,12 +30767,12 @@ function LockedLabelSettings(props) {
         color: newColor
       });
     },
-    style: styles$u.spaceUnder
+    style: styles$v.spaceUnder
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, "size", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30540,7 +30799,7 @@ function LockedLabelSettings(props) {
     onRemove: onRemove
   }));
 }
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   accordionHeaderContainer: {
     // Stop the label summary from wrapping.
     whiteSpace: "nowrap"
@@ -30574,7 +30833,7 @@ const LabeledSwitch = props => {
   const ids = useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.row, style]
+    style: [styles$u.row, style]
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: checked,
@@ -30586,7 +30845,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30620,13 +30879,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    containerStyle: styles$s.container,
-    panelStyle: styles$s.accordionPanel,
+    containerStyle: styles$t.container,
+    panelStyle: styles$t.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$s.row
+      style: styles$t.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30636,7 +30895,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$s.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30645,12 +30904,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$s.spaceUnder,
+    style: showPoint && styles$t.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$s.spaceUnder
+    style: styles$t.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30661,7 +30920,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8,
     marginBottom: 0,
@@ -30724,7 +30983,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$r.row
+      style: styles$s.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30733,7 +30992,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$r.row, styles$r.spaceUnder]
+    style: [styles$s.row, styles$s.spaceUnder]
   }, "kind", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30754,7 +31013,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$r.row
+    style: styles$s.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30766,7 +31025,7 @@ const LockedLineSettings = props => {
       lineStyle: value
     })
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$r.errorText
+    style: styles$s.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30791,7 +31050,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30832,7 +31091,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$q.row
+      style: styles$r.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30841,7 +31100,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$q.spaceUnder,
+    style: styles$r.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30850,7 +31109,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$q.spaceUnder
+    style: styles$r.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30865,7 +31124,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30883,17 +31142,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$p.container, {
+    style: [styles$q.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$p.innerSquare, {
+    style: [styles$q.innerSquare, {
       backgroundColor: lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30959,7 +31218,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React.createElement(View, {
-      style: styles$o.row
+      style: styles$p.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(PolygonSwatch, {
@@ -30968,7 +31227,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$o.row, styles$o.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30976,7 +31235,7 @@ const LockedPolygonSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$o.row, styles$o.truncatedWidth]
+    style: [styles$p.row, styles$p.truncatedWidth]
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -31002,17 +31261,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$o.spaceUnder
+    style: styles$p.spaceUnder
   }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$o.pointAccordionContainer,
-    panelStyle: styles$o.pointAccordionPanel
+    containerStyle: styles$p.pointAccordionContainer,
+    panelStyle: styles$p.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React.createElement(View, {
       key: `locked-polygon-point-index-${index}`,
-      style: [styles$o.row, styles$o.spaceUnder]
+      style: [styles$p.row, styles$p.spaceUnder]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.medium_16
     }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31040,10 +31299,10 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$o.icon
+      style: styles$p.icon
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$o.row, styles$o.polygonActionsContainer]
+    style: [styles$p.row, styles$p.polygonActionsContainer]
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
     startIcon: plusCircle,
@@ -31053,30 +31312,30 @@ const LockedPolygonSettings = props => {
       });
     }
   }, "Add point"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(View, {
-    style: styles$o.movementButtonsContainer
+    style: styles$p.movementButtonsContainer
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon up",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatUp,
     onClick: () => handlePolygonMove("up")
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$o.row
+    style: styles$p.row
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon left",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatLeft,
     onClick: () => handlePolygonMove("left")
   }), /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon down",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatDown,
     onClick: () => handlePolygonMove("down")
   }), /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon right",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatRight,
     onClick: () => handlePolygonMove("right")
@@ -31086,7 +31345,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -31160,7 +31419,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -31168,19 +31427,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$n.row, styles$n.spaceUnder]
+    style: [styles$o.row, styles$o.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$n.errorText
+    style: styles$o.errorText
   }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$n.container,
-    panelStyle: styles$n.accordionPanel,
+    containerStyle: styles$o.container,
+    panelStyle: styles$o.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tail,
@@ -31191,10 +31450,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$n.container,
-    panelStyle: styles$n.accordionPanel,
+    containerStyle: styles$o.container,
+    panelStyle: styles$o.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tip,
@@ -31208,7 +31467,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   accordionPanel: {
     paddingBottom: spacing.medium_16
   },
@@ -31379,7 +31638,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$m.buttonContainer
+    style: styles$n.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
     showM2bFeatures: props.showM2bFeatures,
     showLabelsFlag: props.showLabelsFlag,
@@ -31390,10 +31649,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$m.button
+    style: styles$n.button
   }, buttonLabel))));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31428,7 +31687,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$l.singleSelectShort
+    style: styles$m.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -31439,7 +31698,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31452,7 +31711,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$k.singleSelectShort
+    style: styles$l.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31485,7 +31744,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31516,6 +31775,54 @@ function InteractiveGraphCorrectAnswer(props) {
   }, props.equationString)), props.children));
 }
 
+function InteractiveGraphDescription(props) {
+  const {
+    ariaLabelValue,
+    ariaDescriptionValue,
+    onChange
+  } = props;
+  const [isOpen, setIsOpen] = React.useState(true);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Description",
+    isCollapsible: true,
+    isOpen: isOpen,
+    onToggle: setIsOpen
+  }), isOpen && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
+    style: styles$k.caption
+  }, "Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who are visually impaired."), /*#__PURE__*/React.createElement(LabelLarge, {
+    tag: "label"
+  }, "Title", /*#__PURE__*/React.createElement(TextField, {
+    value: ariaLabelValue,
+    onChange: newValue => onChange({
+      fullGraphAriaLabel: newValue
+    })
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(LabelLarge, {
+    tag: "label"
+    // TODO(LEMS-2332): Remove this style prop after
+    // switching to WB TextArea
+    ,
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, "Description", /*#__PURE__*/React.createElement("textarea", {
+    rows: 8,
+    value: ariaDescriptionValue,
+    onChange: e => onChange({
+      fullGraphAriaDescription: e.target.value
+    })
+  }))));
+}
+const styles$k = StyleSheet.create({
+  caption: {
+    color: color.offBlack64,
+    paddingTop: spacing.xxSmall_6,
+    paddingBottom: spacing.xxSmall_6
+  }
+});
+
 const {
   ButtonGroup: ButtonGroup$2,
   InfoTip: InfoTip$c,
@@ -32443,18 +32750,10 @@ const {
   containerSizeClass,
   getInteractiveBoxFromSizeClass
 } = SizingUtils;
-const DeprecationMixin = Util.DeprecationMixin;
 const InteractiveGraph = InteractiveGraphWidget.widget;
 const defaultBackgroundImage = {
   url: null
 };
-const deprecatedProps = {
-  showGraph: function (props) {
-    return {
-      markings: props.showGraph ? "graph" : "none"
-    };
-  }
-};
 const POLYGON_SIDES = _.map(_.range(3, 13), function (value) {
   return /*#__PURE__*/React.createElement(OptionItem, {
     key: `polygon-sides-${value}`,
@@ -32473,16 +32772,6 @@ class InteractiveGraphEditor extends React.Component {
     super(...args);
     this.displayName = "InteractiveGraphEditor";
     this.className = "perseus-widget-interactive-graph";
-    // TODO(jack): Use versioning instead of DeprecationMixin
-    this.deprecatedProps = deprecatedProps;
-    this.changeMatchType = newValue => {
-      const correct = _extends({}, this.props.correct, {
-        match: newValue
-      });
-      this.props.onChange({
-        correct: correct
-      });
-    };
     this.changeStartCoords = coords => {
       var _this$props$graph;
       if (!((_this$props$graph = this.props.graph) != null && _this$props$graph.type)) {
@@ -32508,16 +32797,12 @@ class InteractiveGraphEditor extends React.Component {
       return issues;
     };
   }
-  // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-  UNSAFE_componentWillMount() {
-    DeprecationMixin.UNSAFE_componentWillMount.call(this);
-  }
   // serialize() is what makes copy/paste work. All the properties included
   // in the serialization json are included when, for example, a graph
   // is copied from the question editor and pasted into the hint editor
   // (double brackets in the markdown).
   serialize() {
-    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures");
+    const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures", "fullGraphAriaLabel", "fullGraphAriaDescription");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
@@ -32543,7 +32828,7 @@ class InteractiveGraphEditor extends React.Component {
     return json;
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph3, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph6, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3;
+    var _this$props$graph$typ, _this$props$graph3, _this$props$apiOption, _this$props$fullGraph, _this$props$fullGraph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph9, _this$props$apiOption2, _this$props$apiOption3, _this$props$apiOption4;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -32567,15 +32852,21 @@ class InteractiveGraphEditor extends React.Component {
         showProtractor: this.props.showProtractor,
         showTooltips: this.props.showTooltips,
         lockedFigures: this.props.lockedFigures,
+        fullGraphAriaLabel: this.props.fullGraphAriaLabel,
+        fullGraphAriaDescription: this.props.fullGraphAriaDescription,
         trackInteraction: function () {},
-        onChange: newProps => {
+        onChange: ({
+          graph: newGraph
+        }) => {
           let correct = this.props.correct;
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          if (correct.type === newProps.graph.type) {
-            correct = _extends({}, correct, newProps.graph);
+          // TODO(benchristel): can we improve the type of onChange
+          // so this invariant isn't necessary?
+          invariant(newGraph != null);
+          if (correct.type === newGraph.type) {
+            correct = mergeGraphs(correct, newGraph);
           } else {
             // Clear options from previous graph
-            correct = newProps.graph;
+            correct = newGraph;
           }
           this.props.onChange({
             correct: correct,
@@ -32618,7 +32909,11 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), /*#__PURE__*/React.createElement(InteractiveGraphCorrectAnswer, {
+    })), this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(InteractiveGraphDescription, {
+      ariaLabelValue: (_this$props$fullGraph = this.props.fullGraphAriaLabel) != null ? _this$props$fullGraph : "",
+      ariaDescriptionValue: (_this$props$fullGraph2 = this.props.fullGraphAriaDescription) != null ? _this$props$fullGraph2 : "",
+      onChange: this.props.onChange
+    }), /*#__PURE__*/React.createElement(InteractiveGraphCorrectAnswer, {
       equationString: equationString
     }, graph), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Number of Points:"
@@ -32643,17 +32938,19 @@ class InteractiveGraphEditor extends React.Component {
       selectedValue: (_this$props$correct4 = this.props.correct) != null && _this$props$correct4.numSides ? `${this.props.correct.numSides}` : "3",
       placeholder: "",
       onChange: newValue => {
-        const graph = _extends({}, this.props.correct, {
+        var _this$props$graph4;
+        invariant(((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon");
+        const updates = {
           numSides: parsePointCount(newValue),
           coords: null,
           // reset the snap for UNLIMITED, which
           // only supports "grid"
           // From: D6578
           snapTo: "grid"
-        });
+        };
         this.props.onChange({
-          correct: graph,
-          graph: graph
+          correct: _extends({}, this.props.correct, updates),
+          graph: _extends({}, this.props.graph, updates)
         });
       },
       style: styles$a.singleSelectShort
@@ -32669,13 +32966,16 @@ class InteractiveGraphEditor extends React.Component {
       ,
       placeholder: "",
       onChange: newValue => {
-        const graph = _extends({}, this.props.correct, {
+        var _this$props$graph5, _this$props$graph6;
+        invariant(this.props.correct.type === "polygon", `Expected correct answer type to be polygon, but got ${this.props.correct.type}`);
+        invariant(((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type}`);
+        const updates = {
           snapTo: newValue,
           coords: null
-        });
+        };
         this.props.onChange({
-          correct: graph,
-          graph: graph
+          correct: _extends({}, this.props.correct, updates),
+          graph: _extends({}, this.props.graph, updates)
         });
       },
       style: styles$a.singleSelectShort
@@ -32696,8 +32996,9 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
       onChange: () => {
-        var _this$props$graph4;
-        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon") {
+        var _this$props$graph7;
+        if (((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon") {
+          invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showAngles: !this.props.correct.showAngles
@@ -32716,8 +33017,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
       onChange: () => {
-        var _this$props$graph5;
-        if (((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "polygon") {
+        var _this$props$graph8;
+        if (((_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.type) === "polygon" && this.props.correct.type === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showSides: !this.props.correct.showSides
@@ -32745,7 +33046,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) &&
+    })), ((_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.type) &&
     // TODO(LEMS-2228): Remove flags once this is fully released
     shouldShowStartCoordsUI(this.props.apiOptions.flags, this.props.graph) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
@@ -32768,7 +33069,22 @@ class InteractiveGraphEditor extends React.Component {
       label: "Student answer must"
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       selectedValue: this.props.correct.match || "exact",
-      onChange: this.changeMatchType
+      onChange: newValue => {
+        invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
+        const correct = _extends({}, this.props.correct, {
+          // TODO(benchristel): this cast is necessary
+          // because "exact" is not actually a valid
+          // value for `match`; a value of undefined
+          // means exact matching. The code happens
+          // to work because "exact" falls through
+          // to the correct else branch in
+          // InteractiveGraph.validate()
+          match: newValue
+        });
+        this.props.onChange({
+          correct
+        });
+      }
       // Never uses placeholder, always has value
       ,
       placeholder: "",
@@ -32789,7 +33105,20 @@ class InteractiveGraphEditor extends React.Component {
       label: "Student answer must"
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       selectedValue: this.props.correct.match || "exact",
-      onChange: this.changeMatchType
+      onChange: newValue => {
+        this.props.onChange({
+          correct: _extends({}, this.props.correct, {
+            // TODO(benchristel): this cast is necessary
+            // because "exact" is not actually a valid
+            // value for `match`; a value of undefined
+            // means exact matching. The code happens
+            // to work because "exact" falls through
+            // to the correct else branch in
+            // InteractiveGraph.validate()
+            match: newValue
+          })
+        });
+      }
       // Never uses placeholder, always has value
       ,
       placeholder: "",
@@ -32803,14 +33132,18 @@ class InteractiveGraphEditor extends React.Component {
     })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))),
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
-    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
-      showM2bFeatures: (_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2["interactive-graph-locked-features-m2b"],
-      showLabelsFlag: (_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3["interactive-graph-locked-features-labels"],
+    this.props.graph && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+      showM2bFeatures: (_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3["interactive-graph-locked-features-m2b"],
+      showLabelsFlag: (_this$props$apiOption4 = this.props.apiOptions) == null || (_this$props$apiOption4 = _this$props$apiOption4.flags) == null || (_this$props$apiOption4 = _this$props$apiOption4.mafs) == null ? void 0 : _this$props$apiOption4["interactive-graph-locked-features-labels"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));
   }
 }
+
+// Merges two graphs that have the same `type`. Properties defined in `b`
+// overwrite properties of the same name in `a`. Throws an exception if the
+// types are different or not recognized.
 InteractiveGraphEditor.widgetName = "interactive-graph";
 InteractiveGraphEditor.defaultProps = _extends({}, InteractiveGraph.defaultProps, {
   valid: true,
@@ -32821,6 +33154,45 @@ InteractiveGraphEditor.defaultProps = _extends({}, InteractiveGraph.defaultProps
     coords: null
   }
 });
+function mergeGraphs(a, b) {
+  if (a.type !== b.type) {
+    throw new Error(`Cannot merge graphs with different types (${a.type} and ${b.type})`);
+  }
+  switch (a.type) {
+    case "angle":
+      invariant(b.type === "angle");
+      return _extends({}, a, b);
+    case "circle":
+      invariant(b.type === "circle");
+      return _extends({}, a, b);
+    case "linear":
+      invariant(b.type === "linear");
+      return _extends({}, a, b);
+    case "linear-system":
+      invariant(b.type === "linear-system");
+      return _extends({}, a, b);
+    case "point":
+      invariant(b.type === "point");
+      return _extends({}, a, b);
+    case "polygon":
+      invariant(b.type === "polygon");
+      return _extends({}, a, b);
+    case "quadratic":
+      invariant(b.type === "quadratic");
+      return _extends({}, a, b);
+    case "ray":
+      invariant(b.type === "ray");
+      return _extends({}, a, b);
+    case "segment":
+      invariant(b.type === "segment");
+      return _extends({}, a, b);
+    case "sinusoid":
+      invariant(b.type === "sinusoid");
+      return _extends({}, a, b);
+    default:
+      throw new UnreachableCaseError(a);
+  }
+}
 const styles$a = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go