@khanacademy/perseus 30.0.1 → 31.0.1

package/dist/index.js

@@ -41,6 +41,8 @@ var Switch = require('@khanacademy/wonder-blocks-switch');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 var reactPopper = require('react-popper');
 var createReactClass = require('create-react-class');
+var IconButton = require('@khanacademy/wonder-blocks-icon-button');
+var cornersOutIcon = require('@phosphor-icons/core/regular/corners-out.svg');
 var Link = require('@khanacademy/wonder-blocks-link');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -85,6 +87,8 @@ var questionIcon__default = /*#__PURE__*/_interopDefaultLegacy(questionIcon);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+var cornersOutIcon__default = /*#__PURE__*/_interopDefaultLegacy(cornersOutIcon);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
 function _extends() {
@@ -360,7 +364,9 @@ const mockStrings = {
   mathInputDescription: "Use keyboard/mouse to interact with math-based input fields",
   sin: "sin",
   cos: "cos",
-  tan: "tan"
+  tan: "tan",
+  simulationLoadFail: "Sorry, this simulation cannot load.",
+  simulationLocaleWarning: "Sorry, this simulation isn't available in your language."
 };
 
 /**
@@ -619,7 +625,7 @@ class InnerMathInput extends React__namespace.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$D.outerWrapper, this.state.focused && styles$D.wrapperFocused, this.props.hasError && styles$D.wrapperError]
+      style: [styles$E.outerWrapper, this.state.focused && styles$E.wrapperFocused, this.props.hasError && styles$E.wrapperError]
     }, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -654,7 +660,7 @@ class InnerMathInput extends React__namespace.Component {
         style: a11y.srOnly
       }, this.context.strings.mathInputDescription), /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$D.popoverContent
+        style: styles$E.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
@@ -719,9 +725,9 @@ const MathInputIcon = _ref => {
       fillColor = wonderBlocksTokens.color.offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
+  const dynamicClass = active || focused ? styles$E.iconActive : styles$E.iconInactive;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$D.iconContainer, dynamicClass]
+    style: [styles$E.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -766,7 +772,7 @@ const inputFocused = {
   borderColor: wonderBlocksTokens.color.blue,
   margin: -1
 };
-const styles$D = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -2601,7 +2607,7 @@ class Expression extends React__namespace.Component {
   render() {
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        className: aphrodite.css(styles$C.mobileLabelInputWrapper)
+        className: aphrodite.css(styles$D.mobileLabelInputWrapper)
       }, !!this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
         htmlFor: this._textareaId,
         tag: "label"
@@ -2635,7 +2641,7 @@ class Expression extends React__namespace.Component {
       ERROR_TITLE
     } = this.context.strings;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      className: aphrodite.css(styles$C.desktopLabelInputWrapper)
+      className: aphrodite.css(styles$D.desktopLabelInputWrapper)
     }, !!this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       htmlFor: this._textareaId,
       tag: "label"
@@ -2676,7 +2682,7 @@ class Expression extends React__namespace.Component {
     }))));
   }
 }
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   mobileLabelInputWrapper: {
     padding: "15px 4px 0"
   },
@@ -18371,33 +18377,33 @@ class Lint extends React__namespace.Component {
     let warningText;
     let warningTextStyle;
     if (this.props.severity === Severity.Error) {
-      severityStyle = styles$B.indicatorError;
+      severityStyle = styles$C.indicatorError;
       warningText = "Error";
-      warningTextStyle = styles$B.publishBlockingError;
+      warningTextStyle = styles$C.publishBlockingError;
     } else if (this.props.severity === Severity.Warning) {
-      severityStyle = styles$B.indicatorWarning;
+      severityStyle = styles$C.indicatorWarning;
       warningText = "Warning";
-      warningTextStyle = styles$B.warning;
+      warningTextStyle = styles$C.warning;
     } else {
-      severityStyle = styles$B.indicatorGuideline;
+      severityStyle = styles$C.indicatorGuideline;
       warningText = "Recommendation";
-      warningTextStyle = styles$B.warning;
+      warningTextStyle = styles$C.warning;
     }
     return /*#__PURE__*/React__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$B.indicator, severityStyle)
+      className: aphrodite.css(styles$C.indicator, severityStyle)
     }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+      className: aphrodite.css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
     }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
       key: i,
-      className: aphrodite.css(styles$B.tooltipParagraph)
+      className: aphrodite.css(styles$C.tooltipParagraph)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(warningTextStyle)
     }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+      className: aphrodite.css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
     })));
   };
 
@@ -18425,20 +18431,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$C.lintContainer, styles$C.lintContainerBlock)
+      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$C.lintContainer)
+      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$C.lintContainer)
+    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -20572,7 +20578,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$A.mobileZoomableParentFix
+          ...styles$B.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -20712,7 +20718,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$A.mobileZoomableParentFix
+        ...styles$B.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -21220,7 +21226,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-const styles$A = {
+const styles$B = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -22016,10 +22022,10 @@ class InputNumber extends React__namespace.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign];
+    const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$z.answerStateUnanswered);
+      inputStyles.push(styles$A.answerStateUnanswered);
     }
     return /*#__PURE__*/React__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -22159,7 +22165,7 @@ class InputNumber extends React__namespace.Component {
     return answerString;
   }
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -23152,7 +23158,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-testid": "focus-ring",
-    className: aphrodite.css(styles$y.ring),
+    className: aphrodite.css(styles$z.ring),
     style: style
   }, children);
 };
@@ -23161,7 +23167,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -23188,7 +23194,7 @@ function getChoiceLetter(pos, strings) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -23211,7 +23217,7 @@ const CrossOutLine = function (props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: aphrodite.css(styles$w.crossOutLine),
+    className: aphrodite.css(styles$x.crossOutLine),
     "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -23226,7 +23232,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -23310,7 +23316,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$x.iconWrapper)
+    className: aphrodite.css(styles$y.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: wonderBlocksTokens.color.blue,
     visible: focused || hovered,
@@ -23319,13 +23325,13 @@ const ChoiceIcon = function (props) {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
+    className: aphrodite.css(styles$w.circle, showCorrectness && correct && styles$w.circleCorrect, showCorrectness && !correct && styles$w.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$w.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$v.innerWrapper)
+    className: aphrodite.css(styles$w.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -23334,7 +23340,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23429,19 +23435,19 @@ const OptionStatus = function (props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$u.correct;
+    textStyle = styles$v.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$u.incorrectAnswered;
+      textStyle = styles$v.incorrectAnswered;
     } else {
-      textStyle = styles$u.incorrect;
+      textStyle = styles$v.incorrect;
     }
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$u.text, textStyle)
+    className: aphrodite.css(styles$v.text, textStyle)
   }, renderText(checked, correct, crossedOut, strings));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23510,8 +23516,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$t.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$t.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$u.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$u.rationale));
 
   // We want to show the choices as dimmed out when the choices are disabled.
   // However, we don't want to do this when we're in review mode in the
@@ -23678,7 +23684,7 @@ const Choice = function (props) {
     "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23877,10 +23883,10 @@ const BaseRadio = function (props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
-  const responsiveClassName = aphrodite.css(styles$s.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$t.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23931,7 +23937,7 @@ const BaseRadio = function (props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.css(sharedStyles.aboveScratchpad, styles$s.item, styles$s.responsiveItem, checked && styles$s.selectedItem, checked && choice.highlighted && styles$s.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$s.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$s.nextHighlighted);
+      return aphrodite.css(sharedStyles.aboveScratchpad, styles$t.item, styles$t.responsiveItem, checked && styles$t.selectedItem, checked && choice.highlighted && styles$t.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$t.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$t.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -24005,14 +24011,14 @@ const BaseRadio = function (props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.responsiveContainer)
+    className: aphrodite.css(styles$t.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24696,9 +24702,9 @@ class Categorizer extends React__namespace.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React__namespace.createElement("table", {
-      className: "categorizer-table " + aphrodite.css(styles$r.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$s.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$r.emptyHeaderCell)
+      className: aphrodite.css(styles$s.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -24706,7 +24712,7 @@ class Categorizer extends React__namespace.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React__namespace.createElement("th", {
-        className: aphrodite.css(styles$r.header),
+        className: aphrodite.css(styles$s.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -24728,7 +24734,7 @@ class Categorizer extends React__namespace.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React__namespace.createElement("td", {
-          className: "category " + aphrodite.css(styles$r.cell),
+          className: "category " + aphrodite.css(styles$s.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24743,7 +24749,7 @@ class Categorizer extends React__namespace.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24755,7 +24761,7 @@ class Categorizer extends React__namespace.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$r.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$s.fullBleedContainer] : [];
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24804,7 +24810,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -25067,7 +25073,7 @@ class CSProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$q.widthOverride, styleContainer && styles$q.container)
+      className: aphrodite.css(styles$r.widthOverride, styleContainer && styles$r.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -25077,7 +25083,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -25124,7 +25130,7 @@ class Definition extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
         content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
           color: "white",
-          style: styles$p.tooltipBody,
+          style: styles$q.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -25156,7 +25162,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$p = {
+const styles$q = {
   tooltipBody: {
     color: wonderBlocksTokens.color.offBlack,
     fontSize: 20,
@@ -25383,7 +25389,7 @@ class Explanation extends React__namespace.Component {
       marginRight: "-6px",
       "white-space": "normal"
     };
-    const contentStyling = [styles$o.content, this.state.expanded ? styles$o.contentExpanded : styles$o.contentCollapsed, allowTransition && (this.state.expanded ? styles$o.transitionExpanded : styles$o.transitionCollapsed)];
+    const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "explanation-widget"
@@ -25402,7 +25408,7 @@ class Explanation extends React__namespace.Component {
       "aria-hidden": !this.state.expanded,
       testId: "content-container"
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.contentWrapper
+      style: styles$p.contentWrapper
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
@@ -25421,7 +25427,7 @@ class Explanation extends React__namespace.Component {
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
 const arrowHeight = 14;
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   content: {
     borderLeft: "0px solid #ccc",
     display: "inline-grid",
@@ -25487,15 +25493,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       nextQuestion
     } = this.context.strings;
     const answerBarStyle = {
-      ...styles$n.answerBar,
+      ...styles$o.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? wonderBlocksTokens.color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     };
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.tryAgainIcon
+      style: styles$o.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -25514,7 +25520,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -25536,7 +25542,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$n = {
+const styles$o = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25736,7 +25742,7 @@ class GradedGroup extends React__namespace.Component {
       }));
       gradeStatus = this.context.strings.incorrect;
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$m.gradedGroupInSet) : aphrodite.css(styles$m.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$n.gradedGroupInSet) : aphrodite.css(styles$n.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25755,7 +25761,7 @@ class GradedGroup extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.title)
+      className: aphrodite.css(styles$n.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25789,7 +25795,7 @@ class GradedGroup extends React__namespace.Component {
     }, this.context.strings.nextQuestion), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: aphrodite.css(styles$m.explanationTitle),
+      className: aphrodite.css(styles$n.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25822,7 +25828,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$m.showHintLink)
+      className: aphrodite.css(styles$n.showHintLink)
     }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25834,7 +25840,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$2 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25905,20 +25911,20 @@ class Indicators extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames__default["default"](aphrodite.css(styles$l.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$m.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$l.indicator),
+        className: aphrodite.css(styles$m.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": this.context.strings.skipToTitle({
           title
         }),
-        style: styles$l.indicatorButton,
+        style: styles$m.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
       }, _ref2 => {
@@ -25928,9 +25934,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: [styles$l.indicatorDot, (hovered || focused || pressed) && styles$l.indicatorDotFocused]
+          style: [styles$m.indicatorDot, (hovered || focused || pressed) && styles$m.indicatorDotFocused]
         }, i === this.props.currentGroup && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$l.indicatorDotActive
+          style: styles$m.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, this.context.strings.current)));
@@ -26006,7 +26012,7 @@ class GradedGroupSet extends React__namespace.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$l.container)
+        className: aphrodite.css(styles$m.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -26029,13 +26035,13 @@ class GradedGroupSet extends React__namespace.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.container)
+      className: aphrodite.css(styles$m.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.top)
+      className: aphrodite.css(styles$m.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.title)
+      className: aphrodite.css(styles$m.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.spacer)
+      className: aphrodite.css(styles$m.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -26073,7 +26079,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -26179,7 +26185,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
+        className: aphrodite.css(styles$l.buttonStyle, button.value === value && styles$l.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -26192,7 +26198,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -28625,72 +28631,6 @@ class Graph extends React__namespace.Component {
   }
 }
 
-const defaultGraphConfig = {
-  range: [[0, 1], [0, 1]],
-  tickStep: [1, 1],
-  gridStep: [1, 1],
-  snapStep: [1, 1],
-  markings: "none",
-  showTooltips: false,
-  graphDimensionsInPixels: [1, 1],
-  width: 0,
-  height: 0,
-  labels: [],
-  disableKeyboardInteraction: false
-};
-const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
-function useGraphConfig() {
-  return React__default["default"].useContext(GraphConfigContext);
-}
-
-const matrixBuilder = mafs.vec.matrixBuilder;
-
-// When converting vectors, we don't need to translate because a vector
-// is like a pair of x and y distances, which are not bound to specific graph locations.
-function vectorsToPixels(vectors, graphState) {
-  let translation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
-  const {
-    range,
-    width,
-    height
-  } = graphState;
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const transformToPx = matrixBuilder().translate(...translation).scale(width / (xMax - xMin), -height / (yMax - yMin)).get();
-  return vectors.map(p => mafs.vec.transform(p, transformToPx));
-}
-function dimensionsToPixels(dimens, graphState) {
-  const {
-    range,
-    width,
-    height
-  } = graphState;
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const transformToPx = matrixBuilder().scale(width / (xMax - xMin), height / (yMax - yMin)).get();
-  return dimens.map(d => mafs.vec.transform(d, transformToPx));
-}
-
-// When converting points, we translate so the pixel point ends up in the right location.
-// This is because points are specific locations on graphs, unlike vectors.
-function pointToPixel(point, graphState) {
-  const [[xMin], [, yMax]] = graphState.range;
-  const [a, b] = [-xMin, -yMax];
-  return vectorsToPixels([point], graphState, [a, b])[0];
-}
-const useTransformVectorsToPixels = function () {
-  const graphState = useGraphConfig();
-  for (var _len = arguments.length, vectors = new Array(_len), _key = 0; _key < _len; _key++) {
-    vectors[_key] = arguments[_key];
-  }
-  return vectorsToPixels(vectors, graphState);
-};
-const useTransformDimensionsToPixels = function () {
-  const graphState = useGraphConfig();
-  for (var _len2 = arguments.length, dimens = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    dimens[_key2] = arguments[_key2];
-  }
-  return dimensionsToPixels(dimens, graphState);
-};
-
 // Restricts `value` to be between `min` and `max`.
 function clamp(value, min, max) {
   if (value < min) {
@@ -28840,6 +28780,86 @@ const findAngle = (point1, point2, vertex) => {
   return findAngle(point1, vertex) - findAngle(point2, vertex);
 };
 
+const defaultGraphConfig = {
+  range: [[0, 1], [0, 1]],
+  tickStep: [1, 1],
+  gridStep: [1, 1],
+  snapStep: [1, 1],
+  markings: "none",
+  showTooltips: false,
+  graphDimensionsInPixels: [1, 1],
+  width: 0,
+  height: 0,
+  labels: [],
+  disableKeyboardInteraction: false
+};
+const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
+function useGraphConfig() {
+  return React__default["default"].useContext(GraphConfigContext);
+}
+
+const matrixBuilder = mafs.vec.matrixBuilder;
+
+// When converting vectors, we don't need to translate because a vector
+// is like a pair of x and y distances, which are not bound to specific graph locations.
+function vectorsToPixels(vectors, graphState) {
+  let translation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
+  const {
+    range,
+    width,
+    height
+  } = graphState;
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const transformToPx = matrixBuilder().translate(...translation).scale(width / (xMax - xMin), -height / (yMax - yMin)).get();
+  return vectors.map(p => mafs.vec.transform(p, transformToPx));
+}
+function dimensionsToPixels(dimens, graphState) {
+  const {
+    range,
+    width,
+    height
+  } = graphState;
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const transformToPx = matrixBuilder().scale(width / (xMax - xMin), height / (yMax - yMin)).get();
+  return dimens.map(d => mafs.vec.transform(d, transformToPx));
+}
+
+// When converting points, we translate so the pixel point ends up in the right location.
+// This is because points are specific locations on graphs, unlike vectors.
+function pointToPixel(point, graphState) {
+  const [[xMin], [, yMax]] = graphState.range;
+  const [a, b] = [-xMin, -yMax];
+  return vectorsToPixels([point], graphState, [a, b])[0];
+}
+const useTransformVectorsToPixels = function () {
+  const graphState = useGraphConfig();
+  for (var _len = arguments.length, vectors = new Array(_len), _key = 0; _key < _len; _key++) {
+    vectors[_key] = arguments[_key];
+  }
+  return vectorsToPixels(vectors, graphState);
+};
+const useTransformDimensionsToPixels = function () {
+  const graphState = useGraphConfig();
+  for (var _len2 = arguments.length, dimens = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    dimens[_key2] = arguments[_key2];
+  }
+  return dimensionsToPixels(dimens, graphState);
+};
+function pixelsToVectors(pixels, graphState) {
+  const [[xMin, xMax], [yMin, yMax]] = graphState.range;
+  const {
+    width,
+    height
+  } = graphState;
+  const xSpan = xMax - xMin;
+  const ySpan = yMax - yMin;
+  return pixels.map(pixel => {
+    const x = pixel[X] / width * xSpan + xMin;
+    const y = yMax - pixel[Y] / height * ySpan;
+    return [x, y];
+  });
+}
+
 function AxisLabels() {
   const {
     range,
@@ -29430,7 +29450,7 @@ const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$j.icon)
+  className: aphrodite.css(styles$k.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " + "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " + "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " + "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" + "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " + "0 0 0 0 6z"
@@ -29461,7 +29481,7 @@ const HiddenIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$j.icon)
+  className: aphrodite.css(styles$k.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " + "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " + "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." + "604.401 1.268.401 1.966 0 1.02-.305 " + "1.967-.828 2.757l2.535 2.536a1 1 0 0 " + "1-1.414 1.414l-12-12a1 1 0 0 1 " + "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " + "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " + "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " + "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " + "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " + "2.363-3.085 3.929-4z"
@@ -29496,20 +29516,20 @@ const HUD = _ref => {
   let state;
   let icon;
   if (enabled) {
-    state = styles$j.enabled;
+    state = styles$k.enabled;
     icon = /*#__PURE__*/React__namespace.createElement(VisibleIcon, null);
   } else {
-    state = styles$j.disabled;
+    state = styles$k.disabled;
     icon = /*#__PURE__*/React__namespace.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React__namespace.createElement("button", {
-    className: aphrodite.css(styles$j.hud, fixedPosition && styles$j.hudFixedPosition, state),
+    className: aphrodite.css(styles$k.hud, fixedPosition && styles$k.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -29562,16 +29582,16 @@ const styles$j = aphrodite.StyleSheet.create({
 const InfoTipBase = props => {
   return /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
     content: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.Body, {
-      style: styles$i.body
+      style: styles$j.body
     }, props.children),
     placement: "right"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     size: "small",
     icon: questionIcon__default["default"],
-    style: styles$i.spacingLeft
+    style: styles$j.spacingLeft
   }));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   spacingLeft: {
     marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
   },
@@ -29647,7 +29667,7 @@ class MultiButtonGroup extends React__namespace.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: aphrodite.css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
+        className: aphrodite.css(styles$i.buttonStyle, selected && styles$i.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -29659,7 +29679,7 @@ class MultiButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -30102,6 +30122,8 @@ const ItemExtras = [
 
 // prettier-ignore
 
+// prettier-ignore
+
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -30122,8 +30144,53 @@ const lockedFigureFillStyles = {
   translucent: 0.4,
   solid: 1
 };
+
+// Not associated with a specific figure
+
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
+function LockedLabel(props) {
+  const {
+    coord,
+    text,
+    color,
+    size
+  } = props;
+  const [x, y] = pointToPixel(coord, useGraphConfig());
+  const {
+    TeX
+  } = getDependencies();
+
+  // Move this all outside the SVG element
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    className: "locked-label",
+    style: {
+      position: "absolute",
+      left: x,
+      top: y,
+      color: lockedFigureColors[color],
+      fontSize: wonderBlocksTokens.font.size[size]
+    }
+  }, /*#__PURE__*/React__namespace.createElement(TeX, null, text));
+}
+
+function GraphLockedLabelsLayer(props) {
+  const {
+    lockedFigures
+  } = props;
+  return lockedFigures.map((figure, i) => {
+    if (figure.type === "label") {
+      return /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+        key: `label-${i}`
+      }, figure));
+    }
+
+    // TODO(LEMS-2271): Add support for labels within
+    // other locked figure types
+    return null;
+  });
+}
+
 const LockedEllipse = props => {
   const {
     center,
@@ -30438,6 +30505,12 @@ const GraphLockedLayer = props => {
         return /*#__PURE__*/React__namespace.createElement(LockedFunction, _extends({
           key: `function-${index}`
         }, figure));
+      case "label":
+        // This is rendered outside the SVG element, since
+        // TeX cannot be rendered inside an SVG.
+        // See graph-locked-labels-layer.tsx for
+        // the component that renders these.
+        return null;
       default:
         /**
          * Devlopment-time future-proofing: This should
@@ -30467,7 +30540,8 @@ const actions = {
     movePointInFigure
   },
   pointGraph: {
-    movePoint
+    movePoint,
+    addPoint
   },
   polygon: {
     movePoint,
@@ -30496,6 +30570,13 @@ function moveLine(itemIndex, delta) {
     delta
   };
 }
+const ADD_POINT = "add-point";
+function addPoint(location) {
+  return {
+    type: ADD_POINT,
+    location
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -32054,7 +32135,7 @@ function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
   };
 }
 
-function PointGraph(props) {
+function LimitedPointGraph(props) {
   const {
     dispatch
   } = props;
@@ -32064,6 +32145,46 @@ function PointGraph(props) {
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
   })));
 }
+function UnlimitedPointGraph(props) {
+  const {
+    dispatch
+  } = props;
+  const graphState = useGraphConfig();
+  const {
+    range: [[minX, maxX], [minY, maxY]]
+  } = graphState;
+  const width = maxX - minX;
+  const height = maxY - minY;
+  const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
+  const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
+    style: {
+      fill: "rgba(0,0,0,0)"
+    },
+    width: widthPx,
+    height: heightPx,
+    x: left,
+    y: top,
+    onClick: event => {
+      const elementRect = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - elementRect.x;
+      const y = event.clientY - elementRect.y;
+      const graphCoordinates = pixelsToVectors([[x, y]], graphState);
+      dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
+    }
+  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
+  })));
+}
+function PointGraph(props) {
+  const numPoints = props.graphState.numPoints;
+  if (numPoints === "unlimited") {
+    return UnlimitedPointGraph(props);
+  }
+  return LimitedPointGraph(props);
+}
 
 const protractorImage = "https://ka-perseus-graphie.s3.amazonaws.com/e9d032f2ab8b95979f674fbfa67056442ba1ff6a.png";
 
@@ -32224,11 +32345,11 @@ const MafsGraph = props => {
       labels,
       disableKeyboardInteraction: readOnly || !!props.static
     }
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     className: "mafs-graph",
     style: {
-      width,
       height,
+      width: "intrinsic",
       position: "relative",
       padding: "25px 25px 0 0",
       boxSizing: "content-box",
@@ -32240,6 +32361,8 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
+  }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
+    lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       position: "absolute",
@@ -32269,7 +32392,41 @@ const MafsGraph = props => {
   }), props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
     state,
     dispatch
-  })))));
+  })))), renderGraphControls({
+    state,
+    dispatch
+  })));
+};
+const renderPointGraphControls = props => /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+  kind: "secondary",
+  style: {
+    width: "100%",
+    marginLeft: "20px"
+  },
+  onClick: () => {
+    props.dispatch(actions.pointGraph.addPoint([0, 0]));
+  }
+}, "Add Point");
+const renderGraphControls = props => {
+  const {
+    state,
+    dispatch
+  } = props;
+  const {
+    type
+  } = state;
+  switch (type) {
+    case "point":
+      if (state.numPoints === "unlimited") {
+        return renderPointGraphControls({
+          state,
+          dispatch
+        });
+      }
+      return null;
+    default:
+      return null;
+  }
 };
 const renderGraph = props => {
   const {
@@ -32385,7 +32542,8 @@ function initializeGraphState(params) {
       return {
         ...shared,
         type: graph.type,
-        coords: getPointCoords(graph, range, step)
+        coords: getPointCoords(graph, range, step),
+        numPoints: graph.numPoints || 0
       };
     case "circle":
       return {
@@ -32641,6 +32799,8 @@ function interactiveGraphReducer(state, action) {
       return doChangeSnapStep(state, action);
     case CHANGE_RANGE:
       return doChangeRange(state, action);
+    case ADD_POINT:
+      return doAddPoint(state, action);
     default:
       throw new wonderStuffCore.UnreachableCaseError(action);
   }
@@ -32981,6 +33141,29 @@ function doChangeRange(state, action) {
     range: action.range
   };
 }
+function doAddPoint(state, action) {
+  if (state.type !== "point") {
+    return state;
+  }
+  const {
+    snapStep
+  } = state;
+  const snappedPoint = snap(snapStep, action.location);
+
+  // Check if there's already a point in that spot
+  for (const point of state.coords) {
+    if (point[X] === snappedPoint[X] && point[Y] === snappedPoint[Y]) {
+      return state;
+    }
+  }
+
+  // If there's no point in spot where we want the new point to go we add it there
+  return {
+    ...state,
+    hasBeenInteractedWith: true,
+    coords: [...state.coords, snappedPoint]
+  };
+}
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
   const [deltaX, deltaY] = delta;
   const maxXMove = Math.min(...maxMoves.map(move => move[X]));
@@ -34698,6 +34881,7 @@ class InteractiveGraph extends React__namespace.Component {
       const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
       const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
       return /*#__PURE__*/React__namespace.createElement(StatefulMafsGraph, _extends({}, this.props, {
+        showLabelsFlag: this.props.apiOptions?.flags?.["mafs"]?.["interactive-graph-locked-features-labels"],
         ref: this.mafsRef,
         gridStep: gridStep,
         snapStep: snapStep,
@@ -35260,10 +35444,7 @@ function shouldUseMafs(mafsFlags, graph) {
   switch (graph.type) {
     case "point":
       if (graph.numPoints === UNLIMITED) {
-        // TODO(benchristel): add a feature flag for the "unlimited"
-        // case once we've implemented point graphs with unlimited
-        // points
-        return false;
+        return Boolean(mafsFlags["unlimited-point"]);
       }
       return Boolean(mafsFlags["point"]);
     case "polygon":
@@ -36319,7 +36500,7 @@ const HideAnswersToggle = props => {
     strings
   } = usePerseusI18n();
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$g.switchWrapper
+    style: styles$h.switchWrapper
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -36331,7 +36512,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -36389,7 +36570,7 @@ const AnswerPill = props => {
       id: idFactory.get("perseus-label-image-widget-answer-pill"),
       onClick: correct ? undefined : onClick,
       ref: ref,
-      style: [style, popperStyle, styles$f.pill, correct && styles$f.correct, incorrect && styles$f.incorrect, (focused || hovered) && BringToFront]
+      style: [style, popperStyle, styles$g.pill, correct && styles$g.correct, incorrect && styles$g.incorrect, (focused || hovered) && BringToFront]
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: answerString,
       strings: strings,
@@ -36397,7 +36578,7 @@ const AnswerPill = props => {
     }));
   });
 };
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -36463,25 +36644,25 @@ class Marker extends React__namespace.Component {
       icon: iconNull
     };
     if (showCorrectness) {
-      iconStyles = [styles$e.markerGraded, showCorrectness === "correct" ? styles$e.markerCorrect : styles$e.markerIncorrect, isOpen && styles$e.markerSelected];
+      iconStyles = [styles$f.markerGraded, showCorrectness === "correct" ? styles$f.markerCorrect : styles$f.markerIncorrect, isOpen && styles$f.markerSelected];
       args = {
         ...args,
         icon: showCorrectness === "correct" ? iconCheck : iconMinus
       };
     } else if (selectedAnswers && selectedAnswers.length > 0) {
-      iconStyles = [styles$e.markerFilled, isOpen && styles$e.markerSelected];
+      iconStyles = [styles$f.markerFilled, isOpen && styles$f.markerSelected];
     } else if (isOpen) {
-      iconStyles = [styles$e.markerSelected];
+      iconStyles = [styles$f.markerSelected];
       args = {
         ...args,
         icon: iconChevronDown,
         size: 8
       };
     } else if (showPulsate) {
-      iconStyles = [styles$e.markerPulsateBase, this._mounted && shouldReduceMotion() ? showPulsate && styles$e.markerUnfilledPulsateOnce : showPulsate && styles$e.markerUnfilledPulsateInfinite];
+      iconStyles = [styles$f.markerPulsateBase, this._mounted && shouldReduceMotion() ? showPulsate && styles$f.markerUnfilledPulsateOnce : showPulsate && styles$f.markerUnfilledPulsateInfinite];
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$e.markerIcon, iconStyles],
+      style: [styles$f.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React__namespace.createElement(Icon, args));
   }
@@ -36502,7 +36683,7 @@ class Marker extends React__namespace.Component {
     const markerDisabled = showCorrectness === "correct";
     const active = hovered || focused;
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$e.marker, active && !markerDisabled && styles$e.markerActive],
+      style: [styles$f.marker, active && !markerDisabled && styles$f.markerActive],
       "aria-label": markerDisabled ? this.context.strings.correctExcited : label
     }, this.renderIcon()), !!selected && showAnswer && /*#__PURE__*/React__namespace.createElement(AnswerPill, {
       selectedAnswers: selected,
@@ -36515,7 +36696,7 @@ class Marker extends React__namespace.Component {
     }));
   }
 }
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: wonderBlocksTokens.color.white,
@@ -37105,13 +37286,13 @@ class LabelImage extends React__namespace.Component {
     const promptString = isMobile ? multipleAnswers ? strings.tapMultiple : strings.tapSingle : multipleAnswers ? strings.clickMultiple : strings.clickSingle;
     const choicesString = strings.choices;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$d.instructions))
+      className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$e.instructions))
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$d.instructionsCaption)
+      className: aphrodite.css(styles$e.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$d.instructionsChoices)
+      className: aphrodite.css(styles$e.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$d.instructionsChoice),
+      className: aphrodite.css(styles$e.instructionsChoice),
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: choice,
@@ -37129,20 +37310,20 @@ class LabelImage extends React__namespace.Component {
       activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$d.markersCanvas),
+      className: aphrodite.css(styles$e.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$d.imageContainer,
+      className: aphrodite.css(styles$e.imageContainer,
       // Ensure image interaction is disabled while answer
       // choices popup is visible. This addresses specific
       // case where user may click on question image to
       // dismiss the popup. If the image is larger in size
       // than its rendered in the widget, this would
       // result in a zoom of the image.
-      activeMarkerIndex !== -1 && styles$d.imageInteractionDisabled)
+      activeMarkerIndex !== -1 && styles$e.imageInteractionDisabled)
     }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref3 => {
       let {
         setAssetStatus
@@ -37168,7 +37349,7 @@ class LabelImage extends React__namespace.Component {
     }));
   }
 }
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -37267,7 +37448,7 @@ class Placeholder extends React__namespace.Component {
     const {
       layout
     } = this.props;
-    const className = aphrodite.css(styles$c.card, styles$c.placeholder, layout === Layout.HORIZONTAL && styles$c.horizontalCard);
+    const className = aphrodite.css(styles$d.card, styles$d.placeholder, layout === Layout.HORIZONTAL && styles$d.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -37366,7 +37547,7 @@ class Draggable extends React__namespace.Component {
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. Hence the hacky tacking on of manual classNames.
     // See sortable.less for details.
-    let className = aphrodite.css(styles$c.card, styles$c.draggable, layout === Layout.HORIZONTAL && styles$c.horizontalCard, layout === Layout.VERTICAL && styles$c.verticalCard, type === ItemState.DRAGGING && styles$c.dragging, type === ItemState.DISABLED && styles$c.disabled, !includePadding && styles$c.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
+    let className = aphrodite.css(styles$d.card, styles$d.draggable, layout === Layout.HORIZONTAL && styles$d.horizontalCard, layout === Layout.VERTICAL && styles$d.verticalCard, type === ItemState.DRAGGING && styles$d.dragging, type === ItemState.DISABLED && styles$d.disabled, !includePadding && styles$d.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
     if (!includePadding) {
       className += " perseus-sortable-draggable-unpadded";
     }
@@ -37667,7 +37848,7 @@ class Sortable extends React__namespace.Component {
     } = this.props;
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. See sortable.less for details.
-    const className = aphrodite.css(styles$c.sortable) + " perseus-sortable";
+    const className = aphrodite.css(styles$d.sortable) + " perseus-sortable";
     const syncWidth = this.props.constraints?.width || layout === Layout.VERTICAL;
     const syncHeight = this.props.constraints?.height || layout === Layout.HORIZONTAL;
     ___default["default"].each(this.state.items, function (item, i, items) {
@@ -37898,7 +38079,7 @@ class Sortable extends React__namespace.Component {
     return ___default["default"].pluck(this.state.items, "option");
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -38027,25 +38208,25 @@ class Matcher extends React__namespace.Component {
     };
     const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
     return /*#__PURE__*/React__namespace.createElement("table", {
-      className: aphrodite.css(styles$b.widget) + " " + HACKY_CSS_CLASSNAME
+      className: aphrodite.css(styles$c.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React__namespace.createElement("tbody", null, showLabels && /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$b.row)
+      className: aphrodite.css(styles$c.row)
     }, /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$b.column, styles$b.columnLabel)
+      className: aphrodite.css(styles$c.column, styles$c.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     })), /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$b.column, styles$b.columnRight, styles$b.columnLabel)
+      className: aphrodite.css(styles$c.column, styles$c.columnRight, styles$c.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     }))), /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$b.row)
+      className: aphrodite.css(styles$c.row)
     }, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$b.column)
+      className: aphrodite.css(styles$c.column)
     }, /*#__PURE__*/React__namespace.createElement(Sortable, {
       options: left,
       layout: Layout.VERTICAL,
@@ -38060,7 +38241,7 @@ class Matcher extends React__namespace.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$b.column, styles$b.columnRight)
+      className: aphrodite.css(styles$c.column, styles$c.columnRight)
     }, /*#__PURE__*/React__namespace.createElement(Sortable
     // @ts-expect-error - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
     , {
@@ -38146,7 +38327,7 @@ ___default["default"].extend(Matcher, {
 });
 const padding = 5;
 const border = "1px solid #444";
-const styles$b = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -38821,9 +39002,9 @@ function drawText(ctx, item) {
   if (item.value === null) {
     return;
   }
-  ctx.fillStyle = styles$a.fgColor;
-  ctx.font = styles$a.font;
-  ctx.fillText(item.value, item.pos[0] - styles$a.fontSizePx / 2 + 1, item.pos[1] + styles$a.fontSizePx / 2);
+  ctx.fillStyle = styles$b.fgColor;
+  ctx.font = styles$b.font;
+  ctx.fillText(item.value, item.pos[0] - styles$b.fontSizePx / 2 + 1, item.pos[1] + styles$b.fontSizePx / 2);
 }
 
 /**
@@ -38844,16 +39025,16 @@ function drawText(ctx, item) {
 function drawDoubleLine(ctx, item) {
   // Outer line that forms both of the bond lines.
   let path = new Path2D();
-  ctx.lineWidth = 5 * styles$a.lineWidth;
-  ctx.strokeStyle = styles$a.fgColor;
+  ctx.lineWidth = 5 * styles$b.lineWidth;
+  ctx.strokeStyle = styles$b.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
 
   // Inner white line that separates the two bond lines.
   path = new Path2D();
-  ctx.lineWidth = 3 * styles$a.lineWidth;
-  ctx.strokeStyle = styles$a.bgColor;
+  ctx.lineWidth = 3 * styles$b.lineWidth;
+  ctx.strokeStyle = styles$b.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -38880,16 +39061,16 @@ function drawTripleLine(ctx, item) {
 
   // Outer line that will form the two outer bond lines.
   let path = new Path2D();
-  ctx.lineWidth = 7 * styles$a.lineWidth;
-  ctx.strokeStyle = styles$a.fgColor;
+  ctx.lineWidth = 7 * styles$b.lineWidth;
+  ctx.strokeStyle = styles$b.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
 
   // Middle white line that separates the bonds
   path = new Path2D();
-  ctx.lineWidth = 5 * styles$a.lineWidth;
-  ctx.strokeStyle = styles$a.bgColor;
+  ctx.lineWidth = 5 * styles$b.lineWidth;
+  ctx.strokeStyle = styles$b.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -38911,8 +39092,8 @@ function drawTripleLine(ctx, item) {
  */
 function drawLine(ctx, item) {
   const path = new Path2D();
-  ctx.lineWidth = styles$a.lineWidth;
-  ctx.strokeStyle = styles$a.fgColor;
+  ctx.lineWidth = styles$b.lineWidth;
+  ctx.strokeStyle = styles$b.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -38964,7 +39145,7 @@ function compareElements(item0, item1) {
 function draw(ctx, items) {
   items.sort(compareElements).forEach(drawItem(ctx));
 }
-const styles$a = {
+const styles$b = {
   bgColor: "rgb(255, 255, 255)",
   fgColor: "rgb(0, 0, 0)",
   fontSizePx: 12,
@@ -41525,7 +41706,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
     const rects = this.state.cachedHighlightRects;
     return /*#__PURE__*/React__namespace.createElement("div", null, rects.map((rect, index) => /*#__PURE__*/React__namespace.createElement("div", {
       key: index,
-      className: aphrodite.css(styles$9.highlightRect),
+      className: aphrodite.css(styles$a.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -41544,7 +41725,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
     })));
   }
 }
-const styles$9 = aphrodite.StyleSheet.create({
+const styles$a = aphrodite.StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -41625,7 +41806,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
     const content = /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$8.tooltipLabel),
+      className: aphrodite.css(styles$9.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -41645,7 +41826,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
     }, /*#__PURE__*/React__namespace.createElement("div", null)));
   }
 }
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   tooltipLabel: {
     // Unlike most tooltip contents, we don't want this label to be
     // selectable. Selecting it is not only unhelpful, but dangerous: if
@@ -42207,7 +42388,7 @@ class HighlightableContent extends React__namespace.PureComponent {
     //     starting point: https://phabricator.khanacademy.org/D35623?id=170698
     const buildHighlight = r => this._buildHighlight(r);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$7.container),
+      className: aphrodite.css(styles$8.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React__namespace.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React__namespace.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -42228,14 +42409,14 @@ class HighlightableContent extends React__namespace.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$7.content),
+      className: aphrodite.css(styles$8.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React__namespace.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$7 = aphrodite.StyleSheet.create({
+const styles$8 = aphrodite.StyleSheet.create({
   // We render content with z-index 1, and highlights with z-index 0, so that
   // content will receive the browser's native pointer events. (Highlights
   // have their own magic code to manage hover detection, despite being
@@ -42645,7 +42826,7 @@ class LineHeightMeasurer extends React__namespace.Component {
   }
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$6.measurer),
+      className: aphrodite.css(styles$7.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       ref: ref => this._line = ref,
@@ -42653,7 +42834,7 @@ class LineHeightMeasurer extends React__namespace.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$6 = aphrodite.StyleSheet.create({
+const styles$7 = aphrodite.StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -43127,6 +43308,212 @@ var PassageRefTarget$1 = {
   isLintable: true
 };
 
+/* eslint-disable react/forbid-prop-types, react/sort-comp */
+
+// For returning user input, but currently the PhET widget
+// does not support accessing user input
+// This renders the PhET sim
+class PhetSimulation extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  iframeRef = /*#__PURE__*/React__namespace.createRef();
+  locale;
+  state = {
+    url: null,
+    banner: null
+  };
+  constructor(props) {
+    super(props);
+    this.locale = this.getPhetCompatibleLocale(getDependencies().kaLocale);
+  }
+  getUserInput() {
+    return null;
+  }
+  async componentDidMount() {
+    await this.updateSimState(this.props.url);
+  }
+  async componentDidUpdate(prevProps) {
+    // If the URL has changed, update our state
+    if (prevProps.url !== this.props.url) {
+      await this.updateSimState(this.props.url);
+    }
+  }
+  render() {
+    // We sandbox the iframe so that we allowlist only the functionality
+    // that we need. This makes it safer to present third-party content
+    // from the PhET website.
+    // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+    const sandboxProperties = "allow-same-origin allow-scripts";
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$6.container
+    }, this.state.banner !== null &&
+    /*#__PURE__*/
+    // TODO(anna): Make this banner focusable
+    React__namespace.createElement(wonderBlocksCore.View, {
+      style: {
+        marginBottom: phoneMargin
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
+      layout: "floating",
+      kind: this.state.banner.kind,
+      text: this.state.banner.message
+    })), /*#__PURE__*/React__namespace.createElement("iframe", {
+      ref: this.iframeRef,
+      title: this.props.description,
+      sandbox: sandboxProperties,
+      style: {
+        minWidth: 400,
+        height: 360,
+        width: "100%",
+        borderWidth: 0
+      },
+      src: this.state.url?.toString(),
+      allow: "fullscreen"
+    }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+      icon: cornersOutIcon__default["default"],
+      onClick: () => {
+        this.iframeRef.current?.requestFullscreen();
+      },
+      kind: "secondary",
+      "aria-label": "Fullscreen",
+      style: {
+        marginTop: 5,
+        marginBottom: 5,
+        alignSelf: "flex-end"
+      },
+      disabled: this.state.url === null
+    }));
+  }
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+      return change.apply(_this, args);
+    };
+  })();
+  simpleValidate = rubric => {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSimulation'.
+    return PhetSimulation.validate(this.getUserInput(), rubric);
+  };
+
+  // kaLocales and PhET locales use different formats and abbreviations.
+  // PhET accepts different formats, i.e. kaLocale's hyphens, but it does not accept
+  // different abbreviations, so in points of divergence of abbreviations, we need to
+  // convert kaLocale abbreviations into abbreviations recognized by PhET.
+  getPhetCompatibleLocale = kaLocale => {
+    switch (kaLocale) {
+      case "pt-pt":
+        return "pt";
+      case "zh-hans":
+        return "zh_CN";
+      case "zh-hant":
+        return "zh_TW";
+      case "fa-af":
+        return "fa_DA";
+      default:
+        return kaLocale;
+    }
+  };
+  displayLoadFailure = () => {
+    this.setState({
+      url: null,
+      banner: {
+        message: this.context.strings.simulationLoadFail,
+        kind: "critical"
+      }
+    });
+  };
+  async updateSimState(urlString) {
+    const url = makeSafeUrl(urlString, this.locale);
+    if (url === null) {
+      this.displayLoadFailure();
+      return;
+    }
+    const response = await fetch(url);
+    if (!response.ok) {
+      this.displayLoadFailure();
+      return;
+    }
+    const showLocaleWarning = await this.showLocaleWarning(url);
+    this.setState({
+      url: url,
+      banner: showLocaleWarning ? {
+        message: this.context.strings.simulationLocaleWarning,
+        kind: "warning"
+      } : null
+    });
+  }
+  async showLocaleWarning(url) {
+    // Do not show a locale warning on an invalid URL
+    if (!url) {
+      return false;
+    }
+    // Grab the simulation name
+    const phetRegex = /https:\/\/phet\.colorado\.edu\/sims\/html\/([a-zA-Z0-9-]+)\/.*/g;
+    const match = phetRegex.exec(url.toString());
+    // Do not show a locale warning on a non-simulation URL
+    if (match === null) {
+      return false;
+    }
+    const simName = match[1];
+    const response = await fetch(`https://phet.colorado.edu/sims/html/${simName}/latest/string-map.json`);
+    if (!response.ok) {
+      return false;
+    }
+    let responseJson;
+    try {
+      responseJson = await response.json();
+    } catch {
+      // If the file exists but there is no content to parse into a JSON,
+      // response.json() will throw an error that we want to catch.
+      return false;
+    }
+    const locales = Object.keys(responseJson);
+
+    // Only display a locale warning if there is no fallback language
+    const baseLocale = this.locale.split("_")[0];
+    for (const l of locales) {
+      if (baseLocale === l.split("_")[0]) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+
+// Setting URL to null will display an error message in the iframe
+const makeSafeUrl = (urlString, locale) => {
+  if (!URL.canParse(urlString)) {
+    return null;
+  }
+  const url = new URL(urlString);
+  if (url.origin !== "https://phet.colorado.edu") {
+    return null;
+  }
+  url.searchParams.set("locale", locale);
+  return url;
+};
+var PhetSimulation$1 = {
+  name: "phet-simulation",
+  displayName: "PhET Simulation",
+  widget: PhetSimulation,
+  // Hides widget from content creators until full release
+  hidden: true,
+  isLintable: true
+};
+const styles$6 = aphrodite.StyleSheet.create({
+  container: {
+    borderRadius: borderRadiusLarge,
+    borderWidth: 1,
+    borderColor: basicBorderColor,
+    padding: phoneMargin,
+    paddingBottom: 0,
+    width: 650
+  }
+});
+
 /* eslint-disable react/no-unsafe */
 const {
   deepEq
@@ -44588,7 +44975,7 @@ var Video$1 = {
 };
 
 /* eslint-disable import/no-named-as-default */
-var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, PythonProgram$1, Sorter$1, Table$1, Video$1, DeprecatedStandin$1];
+var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, PhetSimulation$1, Plotter$1, PythonProgram$1, Sorter$1, Table$1, Video$1, DeprecatedStandin$1];
 
 /**
  * This should be called by all clients, specifying whether extra widgets are
@@ -44628,7 +45015,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "30.0.1";
+const libVersion = "31.0.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48203,6 +48590,7 @@ const widgetNameToEnum = {
   passage: "PASSAGE",
   "passage-ref": "PASSAGE_REF",
   "passage-ref-target": "PASSAGE_REF_TARGET",
+  "phet-simulation": "PHET_SIMULATION",
   plotter: "PLOTTER",
   "python-program": "PYTHON_PROGRAM",
   "reaction-diagram": "REACTION_DIAGRAM",