@khanacademy/perseus-editor 14.0.1 → 14.1.0

package/dist/index.js

@@ -33,6 +33,8 @@ var caretDoubleUpIcon = require('@phosphor-icons/core/bold/caret-double-up-bold.
 var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
 var caretUpIcon = require('@phosphor-icons/core/bold/caret-up-bold.svg');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
+var copyIcon = require('@phosphor-icons/core/assets/regular/copy.svg');
+var autoPasteIcon = require('@phosphor-icons/core/assets/regular/note-pencil.svg');
 var arrowFatDown = require('@phosphor-icons/core/regular/arrow-fat-down.svg');
 var arrowFatLeft = require('@phosphor-icons/core/regular/arrow-fat-left.svg');
 var arrowFatRight = require('@phosphor-icons/core/regular/arrow-fat-right.svg');
@@ -80,6 +82,8 @@ var caretDoubleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleU
 var caretDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDownIcon);
 var caretUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretUpIcon);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
+var copyIcon__default = /*#__PURE__*/_interopDefaultLegacy(copyIcon);
+var autoPasteIcon__default = /*#__PURE__*/_interopDefaultLegacy(autoPasteIcon);
 var arrowFatDown__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatDown);
 var arrowFatLeft__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatLeft);
 var arrowFatRight__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatRight);
@@ -91,7 +95,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.0.1";
+const libVersion = "14.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -268,7 +272,7 @@ const JsonEditor = createReactClass__default["default"]({
 });
 
 const {
-  InlineIcon: InlineIcon$a
+  InlineIcon: InlineIcon$b
 } = perseus.components;
 class SectionControlButton extends React__namespace.Component {
   render() {
@@ -286,13 +290,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$T.button
+      style: styles$U.button
     }, _ref => {
-      return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
+      return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$T = aphrodite.StyleSheet.create({
+const styles$U = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20673,11 +20677,11 @@ class Spring extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       "aria-hidden": "true",
-      style: [styles$S.grow, style]
+      style: [styles$T.grow, style]
     });
   }
 }
-const styles$S = aphrodite.StyleSheet.create({
+const styles$T = aphrodite.StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -20720,7 +20724,7 @@ const Spacing = {
 };
 
 const {
-  InlineIcon: InlineIcon$9
+  InlineIcon: InlineIcon$a
 } = perseus.components;
 const {
   iconChevronDown: iconChevronDown$1,
@@ -20830,7 +20834,7 @@ class WidgetEditor extends React__namespace.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement(LabeledSwitch$1, {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement(LabeledSwitch$1, {
       label: "Static",
       checked: !!widgetInfo.static,
       onChange: this._setStatic
@@ -20914,13 +20918,13 @@ class WidgetSelect extends React__namespace.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__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$R = aphrodite.StyleSheet.create({
+const styles$S = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20950,16 +20954,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.errorContainer
+      style: styles$R.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.title,
+      style: styles$R.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.error,
+      style: styles$R.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20968,7 +20972,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$Q = aphrodite.StyleSheet.create({
+const styles$R = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -21951,7 +21955,7 @@ class IframeContentRenderer extends React__namespace.Component {
 
 const {
   HUD: HUD$1,
-  InlineIcon: InlineIcon$8
+  InlineIcon: InlineIcon$9
 } = perseus.components;
 const {
   iconCircleArrowDown: iconCircleArrowDown$1,
@@ -22106,7 +22110,7 @@ class ArticleEditor extends React__namespace.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconPlus$4), " Add a section")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React__namespace.createElement(HUD$1, {
@@ -22258,8 +22262,8 @@ class ArticleEditor extends React__namespace.Component {
  * Renders three buttons: "Phone", "Tablet", and "Desktop".
  */
 const {
-  ButtonGroup: ButtonGroup$5,
-  InlineIcon: InlineIcon$7
+  ButtonGroup: ButtonGroup$8,
+  InlineIcon: InlineIcon$8
 } = perseus.components;
 const {
   devices
@@ -22270,14 +22274,14 @@ const {
   iconTablet
 } = perseus.icons;
 const ViewportResizer = props => {
-  const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconMobilePhone), " Phone");
-  const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTablet), " Tablet");
-  const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconDesktop), " Desktop");
+  const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconMobilePhone), " Phone");
+  const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconTablet), " Tablet");
+  const desktopButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconDesktop), " Desktop");
 
   // TODO(david): Allow input of custom viewport sizes.
   return /*#__PURE__*/React__namespace.createElement("span", {
     className: "viewport-resizer"
-  }, "Viewport:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$5, {
+  }, "Viewport:", " ", /*#__PURE__*/React__namespace.createElement(ButtonGroup$8, {
     value: props.deviceType,
     allowEmpty: false,
     buttons: [{
@@ -23606,7 +23610,7 @@ class StructuredItemDiff extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$m,
-  InlineIcon: InlineIcon$6
+  InlineIcon: InlineIcon$7
 } = perseus.components;
 const {
   iconCircleArrowDown,
@@ -23675,11 +23679,11 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: this.props.isLast ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, 1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconCircleArrowDown)), " ", /*#__PURE__*/React__namespace.createElement("button", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowDown)), " ", /*#__PURE__*/React__namespace.createElement("button", {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23689,7 +23693,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$5), "Remove this hint", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
   }
 }
 /* A single hint-row containing a hint editor and preview */
@@ -23901,7 +23905,7 @@ class CombinedHintsEditor extends React__namespace.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconPlus$3), " Add a hint"))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
@@ -24045,7 +24049,7 @@ class ItemExtrasEditor extends React__namespace.Component {
   }
 }
 const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
+  style: [styles$Q.checkbox, props.indent ? styles$Q.indented : undefined]
 }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
   label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -24055,7 +24059,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(w
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$P = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   indented: {
     marginInlineStart: wonderBlocksTokens.spacing.large_24
   }
@@ -24718,12 +24722,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$O.baseButton, color === "green" && styles$O.green, color === "orange" && styles$O.orange),
+      className: aphrodite.css(styles$P.baseButton, color === "green" && styles$P.green, color === "orange" && styles$P.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$O = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24768,7 +24772,7 @@ const styles$O = aphrodite.StyleSheet.create({
 });
 
 const {
-  InlineIcon: InlineIcon$5
+  InlineIcon: InlineIcon$6
 } = perseus.components;
 const {
   iconChevronDown,
@@ -24936,23 +24940,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader)
+    className: aphrodite.css(styles$O.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$O.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$N.row, styles$N.rowHeading)
+    className: aphrodite.css(styles$O.row, styles$O.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$N.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$O.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24965,11 +24969,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$O.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft, styles$N.containerHeader)
+    className: aphrodite.css(styles$O.columnLeft, styles$O.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24983,28 +24987,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader)
+    className: aphrodite.css(styles$O.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader, styles$N.previewCollectionHeader)
+    className: aphrodite.css(styles$O.containerHeader, styles$O.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$O.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$O.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$O.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$N.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$O.contentIndent)
   }, children));
 };
 
@@ -25124,11 +25128,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$O.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25136,9 +25140,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25154,13 +25158,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$O.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$N.hintEditor),
+    className: aphrodite.css(styles$O.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25175,9 +25179,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$O.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$O.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25194,9 +25198,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$O.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.tagsEditor)
+    className: aphrodite.css(styles$O.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25227,31 +25231,31 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$N.verticalFlip)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$O.verticalFlip)
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$4)))];
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$N.arrayElement, !elementIsLeaf && styles$N.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$O.arrayElement, !elementIsLeaf && styles$O.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25277,7 +25281,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__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$N.objectElement)
+    className: aphrodite.css(styles$O.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25447,7 +25451,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$N = aphrodite.StyleSheet.create({
+const styles$O = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -26027,7 +26031,7 @@ class DeprecatedStandinEditor extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$j,
-  InlineIcon: InlineIcon$4
+  InlineIcon: InlineIcon$5
 } = perseus.components;
 const {
   iconPlus: iconPlus$2,
@@ -26159,14 +26163,14 @@ class DropdownEditor extends React__namespace.Component {
         this, i)
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconTrash$3)))));
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$3)))));
     }, this)), /*#__PURE__*/React__namespace.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React__namespace.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$2), " Add a choice", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
   }
 }
 
@@ -26417,7 +26421,7 @@ const SortableItem = createReactClass__default["default"]({
     }
     return /*#__PURE__*/React__namespace.createElement("li", {
       draggable: this.props.draggable,
-      className: [dragState, aphrodite.css(styles$M.sortableListItem)].join(" "),
+      className: [dragState, aphrodite.css(styles$N.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26425,7 +26429,7 @@ const SortableItem = createReactClass__default["default"]({
     }, this.props.component);
   }
 });
-const styles$M = aphrodite.StyleSheet.create({
+const styles$N = aphrodite.StyleSheet.create({
   sortableListItem: {
     margin: "5px 0"
   }
@@ -26685,13 +26689,13 @@ class ExpressionEditor extends React__namespace.Component {
       onChange: this.handleToggleDiv
     }));
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Visible label",
       value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
@@ -26700,13 +26704,13 @@ class ExpressionEditor extends React__namespace.Component {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
     }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
@@ -26716,7 +26720,7 @@ class ExpressionEditor extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY)
+      className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
         margin: "4px 0"
@@ -26783,18 +26787,18 @@ class AnswerOption extends React__namespace.Component {
       color: "destructive",
       light: true
     }, "Delete");
-    const answerStatusCss = aphrodite.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 = aphrodite.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__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.answerOption)
+      className: aphrodite.css(styles$M.answerOption)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.answerHandle)
+      className: aphrodite.css(styles$M.answerHandle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.answerBody)
+      className: aphrodite.css(styles$M.answerBody)
     }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.toggleConsidered,
       className: answerStatusCss
     }, this.props.considered), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY, styles$L.paddedX)
+      className: aphrodite.css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -26804,7 +26808,7 @@ class AnswerOption extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.paddedY, styles$L.paddedX)
+      className: aphrodite.css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -26814,11 +26818,11 @@ class AnswerOption extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$L.buttonRow, styles$L.paddedY)
+      className: aphrodite.css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
   }
 }
-const styles$L = aphrodite.StyleSheet.create({
+const styles$M = aphrodite.StyleSheet.create({
   paddedX: {
     paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
     paddingRight: wonderBlocksTokens.spacing.xSmall_8
@@ -26864,7 +26868,7 @@ const styles$L = aphrodite.StyleSheet.create({
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InlineIcon: InlineIcon$3,
+  InlineIcon: InlineIcon$4,
   TextInput: TextInput$5
 } = perseus.components;
 const {
@@ -26930,10 +26934,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$K.title)
+      className: aphrodite.css(styles$L.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$5, {
       value: this.props.title,
-      className: aphrodite.css(styles$K.input)
+      className: aphrodite.css(styles$L.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26955,10 +26959,10 @@ class GradedGroupEditor extends React__namespace.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$K.hintsTitle)
+      className: aphrodite.css(styles$L.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -26977,10 +26981,10 @@ class GradedGroupEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconTrash$2), " Remove this hint")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
   }
 }
-const styles$K = aphrodite.StyleSheet.create({
+const styles$L = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27066,7 +27070,7 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
-  ButtonGroup: ButtonGroup$4,
+  ButtonGroup: ButtonGroup$7,
   InfoTip: InfoTip$h,
   RangeInput: RangeInput$6
 } = perseus.components;
@@ -27486,7 +27490,7 @@ const GraphSettings = createReactClass__default["default"]({
       onChange: this.changeSnapStep
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Markings: "), /*#__PURE__*/React__namespace.createElement(ButtonGroup$4, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Markings: "), /*#__PURE__*/React__namespace.createElement(ButtonGroup$7, {
       value: this.props.markings,
       allowEmpty: false,
       buttons: [{
@@ -27932,7 +27936,7 @@ class IframeEditor extends React__namespace.Component {
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const {
   InfoTip: InfoTip$f,
-  InlineIcon: InlineIcon$2,
+  InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = perseus.components;
 const defaultBoxSize = 400;
@@ -28016,7 +28020,7 @@ class ImageEditor extends React__namespace.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconTrash))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, perseus.icons.iconTrash))));
   }
   change() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -28320,6 +28324,111 @@ class InputNumberEditor extends React__namespace.Component {
   }
 }
 
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const {
+  InlineIcon: InlineIcon$2
+} = perseus.components;
+class ElementContainer extends React__namespace.Component {
+  static defaultProps = {
+    initiallyVisible: false,
+    title: "More"
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: props.initiallyVisible
+    };
+  }
+  toggle = e => {
+    e.preventDefault();
+    this.setState({
+      show: !this.state.show
+    });
+  };
+  render() {
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-interaction-element"
+    }, /*#__PURE__*/React__namespace.createElement("a", {
+      href: "#",
+      className: "perseus-interaction-element-title " + (this.state.show ? "open" : "closed"),
+      onClick: this.toggle
+    }, this.state.show ? /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconChevronDown) : /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconChevronRight), this.props.title), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: "edit-controls"
+    }, this.props.onUp != null && /*#__PURE__*/React__namespace.createElement("button", {
+      onClick: this.props.onUp
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React__namespace.createElement("button", {
+      onClick: this.props.onDown
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React__namespace.createElement("button", {
+      onClick: this.props.onDelete
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconTrash)))));
+  }
+}
+
+const {
+  ButtonGroup: ButtonGroup$6
+} = perseus.components;
+const COLORS = [perseus.KhanColors.BLACK, perseus.KhanColors.BLUE, perseus.KhanColors.GREEN, perseus.KhanColors.PINK, perseus.KhanColors.PURPLE, perseus.KhanColors.RED, perseus.KhanColors.GRAY];
+const LIGHT_COLORS = [perseus.KhanColors.LIGHT_BLUE, perseus.KhanColors.LIGHT_ORANGE, perseus.KhanColors.LIGHT_PINK, perseus.KhanColors.LIGHT_GREEN, perseus.KhanColors.LIGHT_PURPLE, perseus.KhanColors.LIGHT_RED, "#fff"];
+class ColorPicker extends React__namespace.Component {
+  static defaultProps = {
+    value: perseus.KhanColors.BLACK,
+    lightColors: false
+  };
+  render() {
+    const colors = this.props.lightColors ? LIGHT_COLORS : COLORS;
+    return /*#__PURE__*/React__namespace.createElement(ButtonGroup$6, {
+      value: this.props.value,
+      allowEmpty: false,
+      buttons: ___default["default"].map(colors, color => {
+        return {
+          value: color,
+          content: /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("span", {
+            className: "colorpicker-circle",
+            style: {
+              background: color
+            }
+          }), "\xA0")
+        };
+      }),
+      onChange: this.props.onChange
+    });
+  }
+}
+
+const {
+  ButtonGroup: ButtonGroup$5
+} = perseus.components;
+class DashPicker extends React__namespace.Component {
+  static defaultProps = {
+    value: ""
+  };
+  render() {
+    return /*#__PURE__*/React__namespace.createElement(ButtonGroup$5, {
+      value: this.props.value,
+      allowEmpty: false,
+      buttons: [{
+        value: "",
+        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2014")
+      }, {
+        value: "-",
+        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2013\u2013\u2013")
+      }, {
+        value: "- ",
+        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2013\xA0\xA0\u2013")
+      }, {
+        value: ".",
+        content: /*#__PURE__*/React__namespace.createElement("span", null, "\xB7\xB7\xB7\xB7")
+      }, {
+        value: ". ",
+        content: /*#__PURE__*/React__namespace.createElement("span", null, "\xB7 \xB7 \xB7")
+      }],
+      onChange: this.props.onChange
+    });
+  }
+}
+
 /**
  * A simple Mathquill MathField input for the InteractionEditor.
  * Unlike our other uses of Mathquill, we're not using a keypad here;
@@ -28366,13 +28475,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$J.outerWrapper
+    style: styles$K.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$J = aphrodite.StyleSheet.create({
+const styles$K = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -28432,12 +28541,12 @@ class FunctionEditor extends React__namespace.Component {
       onChange: this.change("rangeMax")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(ColorPicker, {
       value: this.props.color,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(DashPicker, {
       value: this.props.strokeDasharray,
       onChange: this.change("strokeDasharray")
     })), /*#__PURE__*/React__namespace.createElement("div", {
@@ -28503,13 +28612,42 @@ class LabelEditor extends React__namespace.Component {
       onChange: this.change("coordY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(ColorPicker, {
       value: this.props.color,
       onChange: this.change("color")
     })));
   }
 }
 
+const {
+  ButtonGroup: ButtonGroup$4
+} = perseus.components;
+class ArrowPicker extends React__namespace.Component {
+  static defaultProps = {
+    value: ""
+  };
+  render() {
+    return /*#__PURE__*/React__namespace.createElement(ButtonGroup$4, {
+      value: this.props.value,
+      allowEmpty: false,
+      buttons: [{
+        value: "",
+        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2014")
+      }, {
+        value: "->",
+        content: /*#__PURE__*/React__namespace.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
+    });
+  }
+}
+
 const {
   NumberInput: NumberInput$c
 } = perseus.components;
@@ -28564,15 +28702,15 @@ class LineEditor extends React__namespace.Component {
       onChange: this.change("endY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(ColorPicker, {
       value: this.props.color,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(DashPicker, {
       value: this.props.strokeDasharray,
       onChange: this.change("strokeDasharray")
-    }), "\xA0 \xA0", /*#__PURE__*/React__namespace.createElement(perseus.ArrowPicker, {
+    }), "\xA0 \xA0", /*#__PURE__*/React__namespace.createElement(ArrowPicker, {
       value: this.props.arrows,
       onChange: this.change("arrows")
     })), /*#__PURE__*/React__namespace.createElement("div", {
@@ -28858,12 +28996,12 @@ class ParametricEditor extends React__namespace.Component {
       onChange: this.change("rangeMax")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(ColorPicker, {
       value: this.props.color,
       onChange: this.change("color")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.DashPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(DashPicker, {
       value: this.props.strokeDasharray,
       onChange: this.change("strokeDasharray")
     })), /*#__PURE__*/React__namespace.createElement("div", {
@@ -28916,7 +29054,7 @@ class PointEditor extends React__namespace.Component {
       onChange: this.change("coordY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(ColorPicker, {
       value: this.props.color,
       onChange: this.change("color")
     })));
@@ -28973,7 +29111,7 @@ class RectangleEditor extends React__namespace.Component {
       onChange: this.change("height")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ColorPicker, {
+    }, /*#__PURE__*/React__namespace.createElement(ColorPicker, {
       value: this.props.color,
       lightColors: true,
       onChange: this.change("color")
@@ -29116,7 +29254,7 @@ class InteractionEditor extends React__namespace.Component {
     } = getDependencies();
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-interaction-editor"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+    }, /*#__PURE__*/React__namespace.createElement(ElementContainer, {
       title: "Grid settings"
     }, /*#__PURE__*/React__namespace.createElement(GraphSettings, {
       editableSettings: ["canvas", "graph"],
@@ -29129,7 +29267,7 @@ class InteractionEditor extends React__namespace.Component {
       onChange: this._updateGraphProps
     }), /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, this.props.graph.valid !== true && /*#__PURE__*/React__namespace.createElement("div", null, this.props.graph.valid))), ___default["default"].map(this.props.elements, function (element, n) {
       if (element.type === "movable-point") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Movable point", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_{" + element.options.varSubscript + "}, y_{" + element.options.varSubscript + "})"))
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29164,7 +29302,7 @@ class InteractionEditor extends React__namespace.Component {
         })));
       }
       if (element.type === "movable-line") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Movable line", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_{" + element.options.startSubscript + "}, y_{" + element.options.startSubscript + "})"), " ", "to", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_{" + element.options.endSubscript + "}, y_{" + element.options.endSubscript + "})"))
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29199,7 +29337,7 @@ class InteractionEditor extends React__namespace.Component {
         })));
       }
       if (element.type === "point") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Point", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(" + element.options.coordX + ", " + element.options.coordY + ")"))
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29234,7 +29372,7 @@ class InteractionEditor extends React__namespace.Component {
         })));
       }
       if (element.type === "line") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Line", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(" + element.options.startX + ", " + element.options.startY + ")"), " ", "to", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(" + element.options.endX + ", " + element.options.endY + ")"))
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29269,7 +29407,7 @@ class InteractionEditor extends React__namespace.Component {
         })));
       }
       if (element.type === "function") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Function", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, element.options.funcName + "(x) = " + element.options.value))
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29303,7 +29441,7 @@ class InteractionEditor extends React__namespace.Component {
         })));
       }
       if (element.type === "parametric") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Parametric")
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29337,7 +29475,7 @@ class InteractionEditor extends React__namespace.Component {
         })));
       }
       if (element.type === "label") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Label", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, unescapeMathMode(element.options.label)), " ")
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29371,7 +29509,7 @@ class InteractionEditor extends React__namespace.Component {
         })));
       }
       if (element.type === "rectangle") {
-        return /*#__PURE__*/React__namespace.createElement(perseus.ElementContainer, {
+        return /*#__PURE__*/React__namespace.createElement(ElementContainer, {
           title: /*#__PURE__*/React__namespace.createElement("span", null, "Rectangle", " ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(" + element.options.coordX + ", " + element.options.coordY + ")"), "\xA0\u2014\xA0", /*#__PURE__*/React__namespace.createElement(TeX, null, element.options.width + " \\times " + element.options.height))
           // eslint-disable-next-line react/jsx-no-bind
           ,
@@ -29433,6 +29571,20 @@ class InteractionEditor extends React__namespace.Component {
   }
 }
 
+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 {
@@ -29442,16 +29594,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$I.label)
+    className: aphrodite.css(styles$J.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$I.row, style]
+    style: [styles$J.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$I.spaceEnd
+    style: styles$J.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$I.spaceStart
+    style: styles$J.spaceStart
   }, label)));
 };
-const styles$I = aphrodite.StyleSheet.create({
+const styles$J = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29477,11 +29629,11 @@ function Heading(_ref) {
     onToggle
   } = _ref;
   return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-    style: [styles$H.container, !isCollapsible && styles$H.notClickable],
+    style: [styles$I.container, !isCollapsible && styles$I.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
   }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$H.heading
+    style: styles$I.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29491,7 +29643,7 @@ function Heading(_ref) {
     isExpanded: isOpen
   })));
 }
-const styles$H = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29778,17 +29930,17 @@ const LockedFigureSelect = props => {
     figureTypes.push("label");
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$G.container
+    style: styles$H.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$G.addElementSelect
+    style: styles$H.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$G = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -29858,18 +30010,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$F.row
+    style: styles$G.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$F.textField
+    style: styles$G.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$F = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29918,30 +30070,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$E.row, style]
+    style: [styles$F.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$E.row
+    style: styles$F.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.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__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$E.row
+    style: styles$F.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.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 = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29974,14 +30126,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$D.accordionPanel, panelStyle]
+    style: [styles$E.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$D = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30012,13 +30164,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$C.colorSwatch, {
+    style: [styles$D.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30037,10 +30189,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$B.row, style]
+    style: [styles$C.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$B.row
+    style: styles$C.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30059,7 +30211,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30078,17 +30230,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$A.container, {
+    style: [styles$B.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$A.innerCircle, {
+    style: [styles$B.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$A = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30114,7 +30266,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$z.lineStrokeSelect
+    style: styles$A.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30131,7 +30283,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30153,40 +30305,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$y.container
+    style: styles$z.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$y.deleteButton
+    style: styles$z.deleteButton
   }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$y.iconButton
+    style: styles$z.iconButton
   }));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30233,7 +30385,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$x.row
+      style: styles$y.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(EllipseSwatch, {
@@ -30242,19 +30394,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$x.row
+    style: styles$y.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$x.spaceUnder,
+    style: styles$y.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$x.spaceUnder
+    style: styles$y.spaceUnder
   }, /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$x.spaceUnder,
+    style: styles$y.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30266,7 +30418,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$x.row, styles$x.spaceUnder]
+    style: [styles$y.row, styles$y.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30274,7 +30426,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$x.row, styles$x.truncatedWidth]
+    style: [styles$y.row, styles$y.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30300,7 +30452,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30321,15 +30473,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$w.container
+    style: styles$x.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$w.lineSwatch, {
+    style: [styles$x.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30341,6 +30493,12 @@ const styles$w = aphrodite.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.
@@ -30359,18 +30517,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] = React.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  const [exampleCategory, setExampleCategory] = React.useState("");
   React.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;
@@ -30378,8 +30538,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.
    */
@@ -30399,13 +30559,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__namespace.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$v.row
+      style: styles$w.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-      style: styles$v.accordionHeader
+      style: styles$w.accordionHeader
     }, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30413,7 +30576,7 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.row, styles$v.spaceUnder]
+    style: [styles$w.row, styles$w.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: newValue => {
@@ -30427,14 +30590,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.row, styles$v.rowSpace]
+    style: [styles$w.row, styles$w.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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: ""
@@ -30453,17 +30616,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$v.textField]
+    style: [styles$w.textField]
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.row, styles$v.rowSpace]
+    style: [styles$w.row, styles$w.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$v.domainMin
-  }, "domain min", /*#__PURE__*/React__namespace.createElement(Strut, {
+    style: [styles$w.dropdownLabel, styles$w.domainMin]
+  }, `${domainRangeText} min`, /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$v.domainMinField,
+    style: styles$w.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -30472,24 +30635,83 @@ const LockedFunctionSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$v.domainMaxField,
+    style: styles$w.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
     }
-  }))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  }))), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Example Functions"),
+    expanded: false,
+    containerStyle: styles$w.exampleWorkspace,
+    panelStyle: styles$w.exampleAccordionPanel
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: styles$w.dropdownLabel
+  }, "Choose a category", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: exampleCategory,
+    onChange: setExampleCategory,
+    placeholder: "examples"
+  }, exampleCategories.map(category => {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      key: category,
+      value: category,
+      label: category
+    });
+  }))), exampleCategorySelected && /*#__PURE__*/React__namespace.createElement("ul", {
+    className: aphrodite.css(styles$w.exampleContainer)
+  }, exampleContent.map((example, index) => /*#__PURE__*/React__namespace.createElement(ExampleItem, {
+    category: exampleCategory,
+    example: example,
+    index: index,
+    pasteEquationFn: handlePropChange
+  })))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const ExampleItem = props => {
+  const {
+    category,
+    example,
+    index,
+    pasteEquationFn
+  } = props;
+  const exampleId = React.useId();
+  return /*#__PURE__*/React__namespace.createElement("li", {
+    key: `${category}-${index}`,
+    className: aphrodite.css(styles$w.exampleRow)
+  }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    icon: autoPasteIcon__default["default"],
+    "aria-label": "paste example",
+    "aria-describedby": exampleId,
+    onClick: () => pasteEquationFn("equation", example),
+    size: "medium",
+    style: styles$w.copyPasteButton
+  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    icon: copyIcon__default["default"],
+    "aria-label": "copy example",
+    "aria-describedby": exampleId,
+    onClick: () => navigator.clipboard.writeText(example),
+    size: "medium",
+    style: styles$w.copyPasteButton
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$w.exampleContent,
+    id: exampleId
+  }, example));
+};
+const styles$w = aphrodite.StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -30499,17 +30721,20 @@ const styles$v = aphrodite.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"
@@ -30522,8 +30747,6 @@ const styles$v = aphrodite.StyleSheet.create({
   },
 
   domainMax: {
-    alignItems: "center",
-    display: "flex",
     // See explanation for "domainMin" for the calculation below.
     width: "calc(((100% - 141px) / 2) + 36.2px)"
   },
@@ -30531,6 +30754,44 @@ const styles$v = aphrodite.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 ${wonderBlocksTokens.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: wonderBlocksTokens.color.offBlack
+  },
+  exampleRow: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    minHeight: "44px"
+  },
+  exampleWorkspace: {
+    background: wonderBlocksTokens.color.white50
+  },
   rowSpace: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -30568,14 +30829,14 @@ function LockedLabelSettings(props) {
     expanded: expanded,
     onToggle: onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$u.row, styles$u.accordionHeaderContainer]
+      style: [styles$v.row, styles$v.accordionHeaderContainer]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), text !== "" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
       style: [{
         backgroundColor: wonderBlocksTokens.color.white,
         color: perseus.lockedFigureColors[color]
-      }, styles$u.accordionHeader]
+      }, styles$v.accordionHeader]
     }, text))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
@@ -30584,10 +30845,10 @@ function LockedLabelSettings(props) {
         coord: newCoords
       });
     },
-    style: styles$u.spaceUnder
+    style: styles$v.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$u.row, styles$u.spaceUnder]
+    style: [styles$v.row, styles$v.spaceUnder]
   }, "TeX", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
@@ -30597,7 +30858,7 @@ function LockedLabelSettings(props) {
       text: newValue
     })
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$u.row
+    style: styles$v.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: newColor => {
@@ -30605,12 +30866,12 @@ function LockedLabelSettings(props) {
         color: newColor
       });
     },
-    style: styles$u.spaceUnder
+    style: styles$v.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, "size", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30637,7 +30898,7 @@ function LockedLabelSettings(props) {
     onRemove: onRemove
   }));
 }
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   accordionHeaderContainer: {
     // Stop the label summary from wrapping.
     whiteSpace: "nowrap"
@@ -30671,7 +30932,7 @@ const LabeledSwitch = props => {
   const ids = wonderBlocksCore.useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.row, style]
+    style: [styles$u.row, style]
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: checked,
@@ -30683,7 +30944,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30717,13 +30978,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$s.row
+      style: styles$t.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30733,7 +30994,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$s.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30742,12 +31003,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$s.spaceUnder,
+    style: showPoint && styles$t.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$s.spaceUnder
+    style: styles$t.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30758,7 +31019,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
     marginBottom: 0,
@@ -30826,7 +31087,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$r.row
+      style: styles$s.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30835,7 +31096,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$r.row, styles$r.spaceUnder]
+    style: [styles$s.row, styles$s.spaceUnder]
   }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30856,7 +31117,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$r.row
+    style: styles$s.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30868,7 +31129,7 @@ const LockedLineSettings = props => {
       lineStyle: value
     })
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$r.errorText
+    style: styles$s.errorText
   }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30893,7 +31154,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30934,7 +31195,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$q.row
+      style: styles$r.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30943,7 +31204,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$q.spaceUnder,
+    style: styles$r.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30952,7 +31213,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$q.spaceUnder
+    style: styles$r.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30967,7 +31228,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30985,17 +31246,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$p.container, {
+    style: [styles$q.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$p.innerSquare, {
+    style: [styles$q.innerSquare, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$p = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -31073,7 +31334,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.row
+      style: styles$p.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(PolygonSwatch, {
@@ -31082,7 +31343,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$o.row, styles$o.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -31090,7 +31351,7 @@ const LockedPolygonSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$o.row, styles$o.truncatedWidth]
+    style: [styles$p.row, styles$p.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -31116,17 +31377,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$o.spaceUnder
+    style: styles$p.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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__namespace.createElement(wonderBlocksCore.View, {
       key: `locked-polygon-point-index-${index}`,
-      style: [styles$o.row, styles$o.spaceUnder]
+      style: [styles$p.row, styles$p.spaceUnder]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.medium_16
     }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31154,10 +31415,10 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$o.icon
+      style: styles$p.icon
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$o.row, styles$o.polygonActionsContainer]
+    style: [styles$p.row, styles$p.polygonActionsContainer]
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
     startIcon: plusCircle__default["default"],
@@ -31167,30 +31428,30 @@ const LockedPolygonSettings = props => {
       });
     }
   }, "Add point"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$o.movementButtonsContainer
+    style: styles$p.movementButtonsContainer
   }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     "aria-label": "Move polygon up",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatUp__default["default"],
     onClick: () => handlePolygonMove("up")
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$o.row
+    style: styles$p.row
   }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     "aria-label": "Move polygon left",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatLeft__default["default"],
     onClick: () => handlePolygonMove("left")
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     "aria-label": "Move polygon down",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatDown__default["default"],
     onClick: () => handlePolygonMove("down")
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     "aria-label": "Move polygon right",
-    style: styles$o.iconButton,
+    style: styles$p.iconButton,
     size: "small",
     icon: arrowFatRight__default["default"],
     onClick: () => handlePolygonMove("right")
@@ -31200,7 +31461,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -31274,7 +31535,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -31282,19 +31543,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$n.row, styles$n.spaceUnder]
+    style: [styles$o.row, styles$o.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$n.errorText
+    style: styles$o.errorText
   }, lengthErrorMessage), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tail,
@@ -31305,10 +31566,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$n.row
+      style: styles$o.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tip,
@@ -31322,7 +31583,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   accordionPanel: {
     paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
@@ -31495,7 +31756,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$m.buttonContainer
+    style: styles$n.buttonContainer
   }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     showM2bFeatures: props.showM2bFeatures,
     showLabelsFlag: props.showLabelsFlag,
@@ -31506,10 +31767,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$m.button
+    style: styles$n.button
   }, buttonLabel))));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31545,7 +31806,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$l.singleSelectShort
+    style: styles$m.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -31556,7 +31817,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31569,7 +31830,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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31602,7 +31863,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31633,6 +31894,54 @@ function InteractiveGraphCorrectAnswer(props) {
   }, props.equationString)), props.children));
 }
 
+function InteractiveGraphDescription(props) {
+  const {
+    ariaLabelValue,
+    ariaDescriptionValue,
+    onChange
+  } = props;
+  const [isOpen, setIsOpen] = React__namespace.useState(true);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Description",
+    isCollapsible: true,
+    isOpen: isOpen,
+    onToggle: setIsOpen
+  }), isOpen && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    tag: "label"
+  }, "Title", /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    value: ariaLabelValue,
+    onChange: newValue => onChange({
+      fullGraphAriaLabel: newValue
+    })
+  })), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    tag: "label"
+    // TODO(LEMS-2332): Remove this style prop after
+    // switching to WB TextArea
+    ,
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, "Description", /*#__PURE__*/React__namespace.createElement("textarea", {
+    rows: 8,
+    value: ariaDescriptionValue,
+    onChange: e => onChange({
+      fullGraphAriaDescription: e.target.value
+    })
+  }))));
+}
+const styles$k = aphrodite.StyleSheet.create({
+  caption: {
+    color: wonderBlocksTokens.color.offBlack64,
+    paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+    paddingBottom: wonderBlocksTokens.spacing.xxSmall_6
+  }
+});
+
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$2,
@@ -32608,15 +32917,6 @@ class InteractiveGraphEditor extends React__namespace.Component {
       coords: null
     }
   };
-  changeMatchType = newValue => {
-    const correct = {
-      ...this.props.correct,
-      match: newValue
-    };
-    this.props.onChange({
-      correct: correct
-    });
-  };
   changeStartCoords = coords => {
     if (!this.props.graph?.type) {
       return;
@@ -32635,7 +32935,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
   // is copied from the question editor and pasted into the hint editor
   // (double brackets in the markdown).
   serialize() {
-    const json = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showTooltips", "range", "gridStep", "snapStep", "lockedFigures");
+    const json = ___default["default"].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;
@@ -32694,18 +32994,22 @@ class InteractiveGraphEditor extends React__namespace.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: _ref => {
+          let {
+            graph: newGraph
+          } = _ref;
           let correct = this.props.correct;
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          if (correct.type === newProps.graph.type) {
-            correct = {
-              ...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,
@@ -32749,7 +33053,11 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InteractiveGraphCorrectAnswer, {
+    })), this.props.graph && this.props.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(InteractiveGraphDescription, {
+      ariaLabelValue: this.props.fullGraphAriaLabel ?? "",
+      ariaDescriptionValue: this.props.fullGraphAriaDescription ?? "",
+      onChange: this.props.onChange
+    }), /*#__PURE__*/React__namespace.createElement(InteractiveGraphCorrectAnswer, {
       equationString: equationString
     }, graph), this.props.correct?.type === "point" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Number of Points:"
@@ -32774,8 +33082,8 @@ class InteractiveGraphEditor extends React__namespace.Component {
       selectedValue: this.props.correct?.numSides ? `${this.props.correct.numSides}` : "3",
       placeholder: "",
       onChange: newValue => {
-        const graph = {
-          ...this.props.correct,
+        invariant(this.props.graph?.type === "polygon");
+        const updates = {
           numSides: parsePointCount(newValue),
           coords: null,
           // reset the snap for UNLIMITED, which
@@ -32784,8 +33092,14 @@ class InteractiveGraphEditor extends React__namespace.Component {
           snapTo: "grid"
         };
         this.props.onChange({
-          correct: graph,
-          graph: graph
+          correct: {
+            ...this.props.correct,
+            ...updates
+          },
+          graph: {
+            ...this.props.graph,
+            ...updates
+          }
         });
       },
       style: styles$a.singleSelectShort
@@ -32801,14 +33115,21 @@ class InteractiveGraphEditor extends React__namespace.Component {
       ,
       placeholder: "",
       onChange: newValue => {
-        const graph = {
-          ...this.props.correct,
+        invariant(this.props.correct.type === "polygon", `Expected correct answer type to be polygon, but got ${this.props.correct.type}`);
+        invariant(this.props.graph?.type === "polygon", `Expected graph type to be polygon, but got ${this.props.graph?.type}`);
+        const updates = {
           snapTo: newValue,
           coords: null
         };
         this.props.onChange({
-          correct: graph,
-          graph: graph
+          correct: {
+            ...this.props.correct,
+            ...updates
+          },
+          graph: {
+            ...this.props.graph,
+            ...updates
+          }
         });
       },
       style: styles$a.singleSelectShort
@@ -32830,6 +33151,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       !!this.props.correct?.showAngles,
       onChange: () => {
         if (this.props.graph?.type === "polygon") {
+          invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
           this.props.onChange({
             correct: {
               ...this.props.correct,
@@ -32850,7 +33172,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       // Don't show indeterminate checkbox state
       !!this.props.correct?.showSides,
       onChange: () => {
-        if (this.props.graph?.type === "polygon") {
+        if (this.props.graph?.type === "polygon" && this.props.correct.type === "polygon") {
           this.props.onChange({
             correct: {
               ...this.props.correct,
@@ -32903,7 +33225,23 @@ class InteractiveGraphEditor extends React__namespace.Component {
       label: "Student answer must"
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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 = {
+          ...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: "",
@@ -32924,7 +33262,21 @@ class InteractiveGraphEditor extends React__namespace.Component {
       label: "Student answer must"
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       selectedValue: this.props.correct.match || "exact",
-      onChange: this.changeMatchType
+      onChange: newValue => {
+        this.props.onChange({
+          correct: {
+            ...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: "",
@@ -32946,6 +33298,79 @@ class InteractiveGraphEditor extends React__namespace.Component {
     }));
   }
 }
+
+// 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.
+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 {
+        ...a,
+        ...b
+      };
+    case "circle":
+      invariant(b.type === "circle");
+      return {
+        ...a,
+        ...b
+      };
+    case "linear":
+      invariant(b.type === "linear");
+      return {
+        ...a,
+        ...b
+      };
+    case "linear-system":
+      invariant(b.type === "linear-system");
+      return {
+        ...a,
+        ...b
+      };
+    case "point":
+      invariant(b.type === "point");
+      return {
+        ...a,
+        ...b
+      };
+    case "polygon":
+      invariant(b.type === "polygon");
+      return {
+        ...a,
+        ...b
+      };
+    case "quadratic":
+      invariant(b.type === "quadratic");
+      return {
+        ...a,
+        ...b
+      };
+    case "ray":
+      invariant(b.type === "ray");
+      return {
+        ...a,
+        ...b
+      };
+    case "segment":
+      invariant(b.type === "segment");
+      return {
+        ...a,
+        ...b
+      };
+    case "sinusoid":
+      invariant(b.type === "sinusoid");
+      return {
+        ...a,
+        ...b
+      };
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(a);
+  }
+}
 const styles$a = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go