@khanacademy/perseus-editor 12.0.0 → 13.0.0

package/dist/index.js

@@ -91,7 +91,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 = "12.0.0";
+const libVersion = "13.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -286,13 +286,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$S.button
+      style: styles$T.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$S = aphrodite.StyleSheet.create({
+const styles$T = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20673,11 +20673,11 @@ class Spring extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       "aria-hidden": "true",
-      style: [styles$R.grow, style]
+      style: [styles$S.grow, style]
     });
   }
 }
-const styles$R = aphrodite.StyleSheet.create({
+const styles$S = aphrodite.StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -20914,13 +20914,13 @@ class WidgetSelect extends React__namespace.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$Q.expanded : styles$Q.collapsed;
+  const iconStyle = props.isExpanded ? styles$R.expanded : styles$R.collapsed;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$Q = aphrodite.StyleSheet.create({
+const styles$R = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20950,16 +20950,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$P.errorContainer
+      style: styles$Q.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$P.title,
+      style: styles$Q.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$P.errorExplanation
+      style: styles$Q.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$P.error,
+      style: styles$Q.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20968,7 +20968,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$P = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24045,7 +24045,7 @@ class ItemExtrasEditor extends React__namespace.Component {
   }
 }
 const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
+  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
 }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
   label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -24055,7 +24055,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(w
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$O = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   indented: {
     marginInlineStart: wonderBlocksTokens.spacing.large_24
   }
@@ -24718,12 +24718,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$N.baseButton, color === "green" && styles$N.green, color === "orange" && styles$N.orange),
+      className: aphrodite.css(styles$O.baseButton, color === "green" && styles$O.green, color === "orange" && styles$O.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$N = aphrodite.StyleSheet.create({
+const styles$O = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24936,23 +24936,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$M.containerHeader)
+    className: aphrodite.css(styles$N.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$M.containerTitle)
+    className: aphrodite.css(styles$N.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.container)
+    className: aphrodite.css(styles$N.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$M.row, styles$M.rowHeading)
+    className: aphrodite.css(styles$N.row, styles$N.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnLeft)
+    className: aphrodite.css(styles$N.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$M.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$N.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.containerTitle)
+    className: aphrodite.css(styles$N.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnRight)
+    className: aphrodite.css(styles$N.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24965,11 +24965,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.container)
+    className: aphrodite.css(styles$N.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnLeft, styles$M.containerHeader)
+    className: aphrodite.css(styles$N.columnLeft, styles$N.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnLeft)
+    className: aphrodite.css(styles$N.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24983,28 +24983,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.containerHeader)
+    className: aphrodite.css(styles$N.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$M.containerTitle)
+    className: aphrodite.css(styles$N.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.containerHeader, styles$M.previewCollectionHeader)
+    className: aphrodite.css(styles$N.containerHeader, styles$N.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$M.containerTitle)
+    className: aphrodite.css(styles$N.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.container)
+    className: aphrodite.css(styles$N.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$M.row)
+    className: aphrodite.css(styles$N.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnLeft)
+    className: aphrodite.css(styles$N.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnRight)
+    className: aphrodite.css(styles$N.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$M.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$N.contentIndent)
   }, children));
 };
 
@@ -25124,11 +25124,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$M.row)
+    className: aphrodite.css(styles$N.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnLeft)
+    className: aphrodite.css(styles$N.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$M.sticky)
+    className: aphrodite.css(sticky && styles$N.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25136,9 +25136,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnRight)
+    className: aphrodite.css(styles$N.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$M.sticky)
+    className: aphrodite.css(sticky && styles$N.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25154,13 +25154,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.row)
+    className: aphrodite.css(styles$N.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnLeft)
+    className: aphrodite.css(styles$N.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$M.sticky)
+    className: aphrodite.css(sticky && styles$N.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$M.hintEditor),
+    className: aphrodite.css(styles$N.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25175,9 +25175,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnRight)
+    className: aphrodite.css(styles$N.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$M.sticky)
+    className: aphrodite.css(sticky && styles$N.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25194,9 +25194,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.columnLeft)
+    className: aphrodite.css(styles$N.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$M.tagsEditor)
+    className: aphrodite.css(styles$N.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25227,23 +25227,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$M.control)
+      className: aphrodite.css(styles$N.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$M.verticalFlip)
+      className: aphrodite.css(styles$N.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$M.control)
+      className: aphrodite.css(styles$N.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", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$M.control)
+      className: aphrodite.css(styles$N.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25251,7 +25251,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$M.arrayElement, !elementIsLeaf && styles$M.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$N.arrayElement, !elementIsLeaf && styles$N.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25277,7 +25277,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$M.objectElement)
+    className: aphrodite.css(styles$N.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25447,7 +25447,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$M = aphrodite.StyleSheet.create({
+const styles$N = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -26644,7 +26644,7 @@ const SortableItem = createReactClass__default["default"]({
     }
     return /*#__PURE__*/React__namespace.createElement("li", {
       draggable: this.props.draggable,
-      className: [dragState, aphrodite.css(styles$L.sortableListItem)].join(" "),
+      className: [dragState, aphrodite.css(styles$M.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26652,7 +26652,7 @@ const SortableItem = createReactClass__default["default"]({
     }, this.props.component);
   }
 });
-const styles$L = aphrodite.StyleSheet.create({
+const styles$M = aphrodite.StyleSheet.create({
   sortableListItem: {
     margin: "5px 0"
   }
@@ -26772,13 +26772,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$K.paddedY)
+      className: aphrodite.css(styles$L.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$K.paddedY)
+      className: aphrodite.css(styles$L.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
@@ -26787,13 +26787,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$K.paddedY)
+      className: aphrodite.css(styles$L.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$K.paddedY)
+      className: aphrodite.css(styles$L.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
@@ -26803,7 +26803,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$K.paddedY)
+      className: aphrodite.css(styles$L.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"
@@ -26991,18 +26991,18 @@ class AnswerOption extends React__namespace.Component {
       color: "destructive",
       light: true
     }, "Delete");
-    const answerStatusCss = aphrodite.css(styles$K.answerStatus, this.props.considered === "wrong" && styles$K.answerStatusWrong, this.props.considered === "correct" && styles$K.answerStatusCorrect, this.props.considered === "ungraded" && styles$K.answerStatusUngraded);
+    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);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$K.answerOption)
+      className: aphrodite.css(styles$L.answerOption)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$K.answerHandle)
+      className: aphrodite.css(styles$L.answerHandle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$K.answerBody)
+      className: aphrodite.css(styles$L.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$K.paddedY, styles$K.paddedX)
+      className: aphrodite.css(styles$L.paddedY, styles$L.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -27012,7 +27012,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$K.paddedY, styles$K.paddedX)
+      className: aphrodite.css(styles$L.paddedY, styles$L.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -27022,7 +27022,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 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$K.buttonRow, styles$K.paddedY)
+      className: aphrodite.css(styles$L.buttonRow, styles$L.paddedY)
     }, removeButton)));
   }
   handleImSure = () => {
@@ -27045,7 +27045,7 @@ class AnswerOption extends React__namespace.Component {
     });
   };
 }
-const styles$K = aphrodite.StyleSheet.create({
+const styles$L = aphrodite.StyleSheet.create({
   paddedX: {
     paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
     paddingRight: wonderBlocksTokens.spacing.xSmall_8
@@ -27147,10 +27147,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$J.title)
+      className: aphrodite.css(styles$K.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$J.input)
+      className: aphrodite.css(styles$K.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27175,7 +27175,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, 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$J.hintsTitle)
+      className: aphrodite.css(styles$K.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27207,7 +27207,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$J = aphrodite.StyleSheet.create({
+const styles$K = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28594,13 +28594,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$I.outerWrapper
+    style: styles$J.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$I = aphrodite.StyleSheet.create({
+const styles$J = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29670,16 +29670,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$H.label)
+    className: aphrodite.css(styles$I.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$H.row, style]
+    style: [styles$I.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$H.spaceEnd
+    style: styles$I.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$H.spaceStart
+    style: styles$I.spaceStart
   }, label)));
 };
-const styles$H = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29705,11 +29705,11 @@ function Heading(_ref) {
     onToggle
   } = _ref;
   return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-    style: [styles$G.container, !isCollapsible && styles$G.notClickable],
+    style: [styles$H.container, !isCollapsible && styles$H.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
   }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$G.heading
+    style: styles$H.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29719,7 +29719,7 @@ function Heading(_ref) {
     isExpanded: isOpen
   })));
 }
-const styles$G = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29839,6 +29839,14 @@ function getDefaultFigureForType(type) {
         equation: "x^2",
         directionalAxis: "x"
       };
+    case "label":
+      return {
+        type: "label",
+        coord: [0, 0],
+        text: "",
+        color: DEFAULT_COLOR,
+        size: "medium"
+      };
     default:
       throw new wonderStuffCore.UnreachableCaseError(type);
   }
@@ -29991,19 +29999,24 @@ const LockedFigureSelect = props => {
     onChange
   } = props;
   const figureTypes = ["point", "line", "vector", "ellipse", "polygon"];
-  const figureTypesCurrent = props.showM2bFeatures ? [...figureTypes, "function"] : figureTypes;
+  if (props.showM2bFeatures) {
+    figureTypes.push("function");
+  }
+  if (props.showLabelsFlag) {
+    figureTypes.push("label");
+  }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$F.container
+    style: styles$G.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$F.addElementSelect
-  }, figureTypesCurrent.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
+    style: styles$G.addElementSelect
+  }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$F = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -30073,18 +30086,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$E.row
+    style: styles$F.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$E.textField
+    style: styles$F.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$E = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30133,30 +30146,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$D.row, style]
+    style: [styles$E.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$D.row
+    style: styles$E.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$D.textField, error ? styles$D.errorField : undefined]
+    style: [styles$E.textField, error ? styles$E.errorField : undefined]
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$D.row
+    style: styles$E.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$D.textField, error ? styles$D.errorField : undefined]
+    style: [styles$E.textField, error ? styles$E.errorField : undefined]
   })));
 };
-const styles$D = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30189,14 +30202,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$C.container, containerStyle],
-    headerStyle: styles$C.accordionHeader,
+    style: [styles$D.container, containerStyle],
+    headerStyle: styles$D.accordionHeader,
     header: header
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$C.accordionPanel, panelStyle]
+    style: [styles$D.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30227,13 +30240,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$B.colorSwatch, {
+    style: [styles$C.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = 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.
@@ -30252,10 +30265,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$A.row, style]
+    style: [styles$B.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$A.row
+    style: styles$B.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30274,7 +30287,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$A = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30293,17 +30306,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$z.container, {
+    style: [styles$A.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$z.innerCircle, {
+    style: [styles$A.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = 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.
@@ -30329,7 +30342,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$y.lineStrokeSelect
+    style: styles$z.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30346,7 +30359,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30368,40 +30381,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$x.container
+    style: styles$y.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$x.deleteButton
+    style: styles$y.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$x.iconButton
+    style: styles$y.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$x.iconButton
+    style: styles$y.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$x.iconButton
+    style: styles$y.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$x.iconButton
+    style: styles$y.iconButton
   }));
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30448,7 +30461,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$w.row
+      style: styles$x.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, {
@@ -30457,19 +30470,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$w.row
+    style: styles$x.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$w.spaceUnder,
+    style: styles$x.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$w.spaceUnder
+    style: styles$x.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$w.spaceUnder,
+    style: styles$x.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30481,7 +30494,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$w.row, styles$w.spaceUnder]
+    style: [styles$x.row, styles$x.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30489,7 +30502,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$w.row, styles$w.truncatedWidth]
+    style: [styles$x.row, styles$x.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30515,7 +30528,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30536,15 +30549,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$v.container
+    style: styles$w.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$v.lineSwatch, {
+    style: [styles$w.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30618,9 +30631,9 @@ const LockedFunctionSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$u.row
+      style: styles$v.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-      style: styles$u.accordionHeader
+      style: styles$v.accordionHeader
     }, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30628,7 +30641,7 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$u.row, styles$u.spaceUnder]
+    style: [styles$v.row, styles$v.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: newValue => {
@@ -30642,14 +30655,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$u.row, styles$u.rowSpace]
+    style: [styles$v.row, styles$v.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: directionalAxis,
     onChange: newValue => {
       handlePropChange("directionalAxis", newValue);
     },
     "aria-label": "equation prefix",
-    style: styles$u.equationPrefix
+    style: styles$v.equationPrefix
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
@@ -30668,17 +30681,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$u.textField]
+    style: [styles$v.textField]
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$u.row, styles$u.rowSpace]
+    style: [styles$v.row, styles$v.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$u.domainMin
+    style: styles$v.domainMin
   }, "domain min", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$u.domainMinField,
+    style: styles$v.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -30688,12 +30701,12 @@ const LockedFunctionSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     "aria-label": "domain max",
-    style: styles$u.domainMax
+    style: styles$v.domainMax
   }, "max", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$u.domainMaxField,
+    style: styles$v.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
@@ -30704,7 +30717,7 @@ const LockedFunctionSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -30759,6 +30772,123 @@ const styles$u = aphrodite.StyleSheet.create({
   }
 });
 
+/**
+ * LockedLabelSettings is a component that allows the user to edit the
+ * settings of specifically a locked label on the graph within the
+ * Interactive Graph widget.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+function LockedLabelSettings(props) {
+  const {
+    type,
+    coord,
+    color,
+    size,
+    text,
+    expanded,
+    onChangeProps,
+    onMove,
+    onRemove,
+    onToggle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
+    expanded: expanded,
+    onToggle: onToggle,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$u.row, styles$u.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]
+    }, text))
+  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: coord,
+    onChange: newCoords => {
+      onChangeProps({
+        coord: newCoords
+      });
+    },
+    style: styles$u.spaceUnder
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: [styles$u.row, styles$u.spaceUnder]
+  }, "TeX", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    value: text,
+    placeholder: "ex. x^2 or \\frac{1}{2}",
+    onChange: newValue => onChangeProps({
+      text: newValue
+    })
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$u.row
+  }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+    selectedValue: color,
+    onChange: newColor => {
+      onChangeProps({
+        color: newColor
+      });
+    },
+    style: styles$u.spaceUnder
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.medium_16
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: styles$u.row
+  }, "size", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: size,
+    onChange: newValue => onChangeProps({
+      size: newValue
+    })
+    // Placeholder is required, but never gets used since
+    // we have a label for the select.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "small",
+    label: "small"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "medium",
+    label: "medium"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "large",
+    label: "large"
+  })))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+    figureType: type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+}
+const styles$u = aphrodite.StyleSheet.create({
+  accordionHeaderContainer: {
+    // Stop the label summary from wrapping.
+    whiteSpace: "nowrap"
+  },
+  accordionHeader: {
+    padding: wonderBlocksTokens.spacing.xxxSmall_4,
+    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  },
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
+  },
+  spaceUnder: {
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  }
+});
+
 const LabeledSwitch = props => {
   const {
     checked,
@@ -31467,6 +31597,11 @@ const LockedFigureSettings = props => {
         return /*#__PURE__*/React__namespace.createElement(LockedFunctionSettings, props);
       }
       break;
+    case "label":
+      if (props.showLabelsFlag) {
+        return /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, props);
+      }
+      break;
   }
   return null;
 };
@@ -31572,9 +31707,16 @@ const LockedFiguresSection = props => {
     onToggle: () => setIsExpanded(!isExpanded),
     isCollapsible: true
   }), isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
+    if (figure.type === "label") {
+      // TODO(LEMS-1795): Add locked label settings.
+      // Remove this block once label locked figure
+      // settings are implemented.
+      return;
+    }
     return /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
       showM2bFeatures: props.showM2bFeatures,
+      showLabelsFlag: props.showLabelsFlag,
       expanded: expandedStates[index],
       onToggle: newValue => {
         const newExpanded = [...expandedStates];
@@ -31590,6 +31732,7 @@ const LockedFiguresSection = props => {
     style: styles$m.buttonContainer
   }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     showM2bFeatures: props.showM2bFeatures,
+    showLabelsFlag: props.showLabelsFlag,
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
@@ -32985,6 +33128,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
     // is using Mafs.
     this.props.graph && this.props.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(LockedFiguresSection, {
       showM2bFeatures: this.props.apiOptions?.flags?.mafs?.["interactive-graph-locked-features-m2b"],
+      showLabelsFlag: this.props.apiOptions?.flags?.mafs?.["interactive-graph-locked-features-labels"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));
@@ -35587,11 +35731,11 @@ class NumericInputEditor extends React__namespace.Component {
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-input-number-editor"
-    }, labelText, inputSize, rightAlign, coefficientCheck, /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "ui-title"
     }, "User input"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "msg-title"
-    }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton);
+    }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton, inputSize, rightAlign, coefficientCheck, labelText);
   }
   change = (() => {
     var _this = this;
@@ -35980,6 +36124,36 @@ class PassageRefTargetEditor extends React__namespace.Component {
   }
 }
 
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
+class PhetSimEditor extends React__namespace.Component {
+  static defaultProps = {
+    url: "",
+    description: ""
+  };
+  static widgetName = "phet-sim";
+  render() {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "URL",
+      value: this.props.url,
+      onChange: url => this.props.onChange({
+        url
+      })
+    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "Description",
+      value: this.props.description,
+      onChange: description => this.props.onChange({
+        description
+      })
+    }));
+  }
+  serialize() {
+    return {
+      url: this.props.url,
+      description: this.props.description
+    };
+  }
+}
+
 const {
   InfoTip: InfoTip$3,
   NumberInput: NumberInput$2,
@@ -36935,7 +37109,7 @@ class VideoEditor extends React__namespace.Component {
   }
 }
 
-var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, SorterEditor, TableEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
+var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PhetSimEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, SorterEditor, TableEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class TextInput extends React__namespace.Component {