@khanacademy/perseus 30.0.1 → 31.0.1

package/dist/es/index.js

@@ -15,7 +15,7 @@ import ReactDOM__default from 'react-dom';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
-import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
+import { color, spacing, font } from '@khanacademy/wonder-blocks-tokens';
 import $ from 'jquery';
 import { v4 } from 'uuid';
 import PropTypes from 'prop-types';
@@ -40,6 +40,8 @@ import Switch from '@khanacademy/wonder-blocks-switch';
 import Pill from '@khanacademy/wonder-blocks-pill';
 import { Popper } from 'react-popper';
 import createReactClass from 'create-react-class';
+import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import cornersOutIcon from '@phosphor-icons/core/regular/corners-out.svg';
 import Link from '@khanacademy/wonder-blocks-link';
 
 function _extends() {
@@ -250,7 +252,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."
 };
 
 /**
@@ -503,7 +507,7 @@ class InnerMathInput extends React.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(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.createElement("div", {
       style: {
         display: "flex",
@@ -540,7 +544,7 @@ class InnerMathInput extends React.Component {
           style: a11y.srOnly
         }, this.context.strings.mathInputDescription), /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$D.popoverContent
+          style: styles$E.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
@@ -616,9 +620,9 @@ const MathInputIcon = ({
       fillColor = 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.createElement(View, {
-    style: [styles$D.iconContainer, dynamicClass]
+    style: [styles$E.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -663,7 +667,7 @@ const inputFocused = {
   borderColor: color.blue,
   margin: -1
 };
-const styles$D = StyleSheet.create({
+const styles$E = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -2489,7 +2493,7 @@ class Expression extends React.Component {
     var _this$props$keypadCon, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(View, {
-        className: css(styles$C.mobileLabelInputWrapper)
+        className: css(styles$D.mobileLabelInputWrapper)
       }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
         htmlFor: this._textareaId,
         tag: "label"
@@ -2524,7 +2528,7 @@ class Expression extends React.Component {
       ERROR_TITLE
     } = this.context.strings;
     return /*#__PURE__*/React.createElement(View, {
-      className: css(styles$C.desktopLabelInputWrapper)
+      className: css(styles$D.desktopLabelInputWrapper)
     }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
       htmlFor: this._textareaId,
       tag: "label"
@@ -2576,7 +2580,7 @@ Expression.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$C = StyleSheet.create({
+const styles$D = StyleSheet.create({
   mobileLabelInputWrapper: {
     padding: "15px 4px 0"
   },
@@ -18199,33 +18203,33 @@ class Lint extends React.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.createElement("a", {
         href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.indicator, severityStyle)
+        className: css(styles$C.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+        className: css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$B.tooltipParagraph)
+        className: css(styles$C.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+        className: css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
       })));
     };
   }
@@ -18263,20 +18267,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$C.lintContainer, styles$C.lintContainerBlock)
+      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$C.lintContainer)
+      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$C.lintContainer)
+    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$B = StyleSheet.create({
+const styles$C = 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.
@@ -20210,7 +20214,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -20334,7 +20338,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20982,7 +20986,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-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
@@ -21852,10 +21856,10 @@ class InputNumber extends React.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.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21940,7 +21944,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$z = StyleSheet.create({
+const styles$A = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22935,7 +22939,7 @@ const FocusRing = function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "focus-ring",
-    className: css(styles$y.ring),
+    className: css(styles$z.ring),
     style: style
   }, children);
 };
@@ -22944,7 +22948,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$y = StyleSheet.create({
+const styles$z = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22971,7 +22975,7 @@ function getChoiceLetter(pos, strings) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$x = StyleSheet.create({
+const styles$y = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22994,7 +22998,7 @@ const CrossOutLine = function CrossOutLine(props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: css(styles$w.crossOutLine),
+    className: css(styles$x.crossOutLine),
     "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -23009,7 +23013,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$w = StyleSheet.create({
+const styles$x = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -23093,7 +23097,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$x.iconWrapper)
+    className: css(styles$y.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: color.blue,
     visible: focused || hovered,
@@ -23102,13 +23106,13 @@ const ChoiceIcon = function ChoiceIcon(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: css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
+    className: 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.createElement("div", {
-    className: css(styles$v.innerWrapper)
+    className: css(styles$w.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -23117,7 +23121,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$w = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23212,19 +23216,19 @@ const OptionStatus = function OptionStatus(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.createElement("div", {
-    className: css(styles$u.text, textStyle)
+    className: css(styles$v.text, textStyle)
   }, renderText(checked, correct, crossedOut, strings));
 };
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23294,8 +23298,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$t.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$t.rationale));
+  const descriptionClassName = classNames("description", css(styles$u.description));
+  const rationaleClassName = classNames("perseus-radio-rationale-content", 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
@@ -23455,7 +23459,7 @@ const Choice = function Choice(props) {
     "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23654,10 +23658,10 @@ const BaseRadio = function BaseRadio(props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
+  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$t.radio, styles$t.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$t.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$t.radioContainerLastHighlighted));
+  const instructionsClassName = classNames("instructions", css(styles$t.instructions, isMobile && styles$t.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
-  const responsiveClassName = css(styles$s.responsiveFieldset);
+  const responsiveClassName = css(styles$t.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -23708,7 +23712,7 @@ const BaseRadio = function BaseRadio(props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return 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 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
@@ -23782,14 +23786,14 @@ const BaseRadio = function BaseRadio(props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$s.responsiveContainer)
+    className: css(styles$t.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24451,9 +24455,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$r.mobileTable)
+      className: "categorizer-table " + css(styles$s.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$r.emptyHeaderCell)
+      className: 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
@@ -24461,7 +24465,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$r.header),
+        className: css(styles$s.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -24483,7 +24487,7 @@ class Categorizer extends React.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React.createElement("td", {
-          className: "category " + css(styles$r.cell),
+          className: "category " + css(styles$s.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24498,7 +24502,7 @@ class Categorizer extends React.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React.createElement("span", {
-          className: css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
+          className: css(styles$s.radioSpan, selected && styles$s.checkedRadioSpan, this.props.static && selected && styles$s.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24510,7 +24514,7 @@ class Categorizer extends React.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.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -24563,7 +24567,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24799,7 +24803,7 @@ class CSProgram extends React.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$q.widthOverride, styleContainer && styles$q.container)
+      className: css(styles$r.widthOverride, styleContainer && styles$r.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24828,7 +24832,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24871,7 +24875,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$p.tooltipBody,
+        style: styles$q.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -24904,7 +24908,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$p = {
+const styles$q = {
   tooltipBody: {
     color: color.offBlack,
     fontSize: 20,
@@ -25132,7 +25136,7 @@ class Explanation extends React.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.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "explanation-widget"
@@ -25151,7 +25155,7 @@ class Explanation extends React.Component {
       "aria-hidden": !this.state.expanded,
       testId: "content-container"
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$o.contentWrapper
+      style: styles$p.contentWrapper
     }, /*#__PURE__*/React.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
@@ -25172,7 +25176,7 @@ Explanation.defaultProps = {
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
 const arrowHeight = 14;
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   content: {
     borderLeft: "0px solid #ccc",
     display: "inline-grid",
@@ -25236,15 +25240,15 @@ class GradedGroupAnswerBar extends React.Component {
       correctExcited,
       nextQuestion
     } = this.context.strings;
-    const answerBarStyle = _extends({}, styles$n.answerBar, {
+    const answerBarStyle = _extends({}, styles$o.answerBar, {
       backgroundColor: answerBarState === "CORRECT" ? 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.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$n.tryAgainIcon
+      style: styles$o.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -25263,7 +25267,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$n.text
+      style: styles$o.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -25286,7 +25290,7 @@ class GradedGroupAnswerBar extends React.Component {
 }
 GradedGroupAnswerBar.contextType = PerseusI18nContext;
 const fontSize = 17;
-const styles$n = {
+const styles$o = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25471,7 +25475,7 @@ class GradedGroup extends React.Component {
       }));
       gradeStatus = this.context.strings.incorrect;
     }
-    const mobileClass = this.props.inGradedGroupSet ? css(styles$m.gradedGroupInSet) : css(styles$m.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$n.gradedGroupInSet) : css(styles$n.gradedGroup);
     const classes = classNames({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25490,7 +25494,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.title)
+      className: css(styles$n.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25523,7 +25527,7 @@ class GradedGroup extends React.Component {
     }, this.context.strings.nextQuestion), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: css(styles$m.explanationTitle),
+      className: css(styles$n.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25556,7 +25560,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$m.showHintLink)
+      className: css(styles$n.showHintLink)
     }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25578,7 +25582,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$2 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25651,18 +25655,18 @@ class Indicators extends React.Component {
     return /*#__PURE__*/React.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames(css(styles$l.indicatorContainer), "indicatorContainer")
+      className: classNames(css(styles$m.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
-      className: css(styles$l.indicator),
+      className: css(styles$m.indicator),
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       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)
     }, ({
@@ -25670,9 +25674,9 @@ class Indicators extends React.Component {
       focused,
       pressed
     }) => /*#__PURE__*/React.createElement(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.createElement(View, {
-      style: styles$l.indicatorDotActive
+      style: styles$m.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
     }, this.context.strings.current)))))));
@@ -25736,7 +25740,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$l.container)
+        className: css(styles$m.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25759,13 +25763,13 @@ class GradedGroupSet extends React.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.container)
+      className: css(styles$m.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.top)
+      className: css(styles$m.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.title)
+      className: css(styles$m.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.spacer)
+      className: css(styles$m.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25807,7 +25811,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25912,7 +25916,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
+        className: css(styles$l.buttonStyle, button.value === value && styles$l.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25929,7 +25933,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -28339,65 +28343,6 @@ Graph.defaultProps = {
   isMobile: false
 };
 
-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__*/createContext(defaultGraphConfig);
-function useGraphConfig() {
-  return React__default.useContext(GraphConfigContext);
-}
-
-const matrixBuilder = 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, translation = [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 => 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 => 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 = (...vectors) => {
-  const graphState = useGraphConfig();
-  return vectorsToPixels(vectors, graphState);
-};
-const useTransformDimensionsToPixels = (...dimens) => {
-  const graphState = useGraphConfig();
-  return dimensionsToPixels(dimens, graphState);
-};
-
 // Restricts `value` to be between `min` and `max`.
 function clamp(value, min, max) {
   if (value < min) {
@@ -28541,6 +28486,79 @@ 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__*/createContext(defaultGraphConfig);
+function useGraphConfig() {
+  return React__default.useContext(GraphConfigContext);
+}
+
+const matrixBuilder = 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, translation = [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 => 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 => 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 = (...vectors) => {
+  const graphState = useGraphConfig();
+  return vectorsToPixels(vectors, graphState);
+};
+const useTransformDimensionsToPixels = (...dimens) => {
+  const graphState = useGraphConfig();
+  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,
@@ -29127,7 +29145,7 @@ const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$j.icon)
+  className: css(styles$k.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.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"
@@ -29158,7 +29176,7 @@ const HiddenIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$j.icon)
+  className: css(styles$k.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.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"
@@ -29192,20 +29210,20 @@ const HUD = ({
   let state;
   let icon;
   if (enabled) {
-    state = styles$j.enabled;
+    state = styles$k.enabled;
     icon = /*#__PURE__*/React.createElement(VisibleIcon, null);
   } else {
-    state = styles$j.disabled;
+    state = styles$k.disabled;
     icon = /*#__PURE__*/React.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React.createElement("button", {
-    className: css(styles$j.hud, _fixedPosition && styles$j.hudFixedPosition, state),
+    className: css(styles$k.hud, _fixedPosition && styles$k.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -29258,16 +29276,16 @@ const styles$j = StyleSheet.create({
 const InfoTipBase = props => {
   return /*#__PURE__*/React.createElement(Tooltip$1, {
     content: /*#__PURE__*/React.createElement(Body, {
-      style: styles$i.body
+      style: styles$j.body
     }, props.children),
     placement: "right"
   }, /*#__PURE__*/React.createElement(PhosphorIcon, {
     size: "small",
     icon: questionIcon,
-    style: styles$i.spacingLeft
+    style: styles$j.spacingLeft
   }));
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   spacingLeft: {
     marginInlineStart: spacing.xxxSmall_4
   },
@@ -29346,7 +29364,7 @@ class MultiButtonGroup extends React.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
+        className: css(styles$i.buttonStyle, selected && styles$i.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -29362,7 +29380,7 @@ MultiButtonGroup.defaultProps = {
   values: [],
   allowEmpty: true
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -29797,6 +29815,8 @@ const ItemExtras = [
 
 // prettier-ignore
 
+// prettier-ignore
+
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -29817,8 +29837,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.createElement("span", {
+    className: "locked-label",
+    style: {
+      position: "absolute",
+      left: x,
+      top: y,
+      color: lockedFigureColors[color],
+      fontSize: font.size[size]
+    }
+  }, /*#__PURE__*/React.createElement(TeX, null, text));
+}
+
+function GraphLockedLabelsLayer(props) {
+  const {
+    lockedFigures
+  } = props;
+  return lockedFigures.map((figure, i) => {
+    if (figure.type === "label") {
+      return /*#__PURE__*/React.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,
@@ -30133,6 +30198,12 @@ const GraphLockedLayer = props => {
         return /*#__PURE__*/React.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
@@ -30162,7 +30233,8 @@ const actions = {
     movePointInFigure
   },
   pointGraph: {
-    movePoint
+    movePoint,
+    addPoint
   },
   polygon: {
     movePoint,
@@ -30191,6 +30263,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 {
@@ -31727,7 +31806,7 @@ function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
   };
 }
 
-function PointGraph(props) {
+function LimitedPointGraph(props) {
   const {
     dispatch
   } = props;
@@ -31737,6 +31816,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.createElement(React.Fragment, null, /*#__PURE__*/React.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.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";
 
@@ -31897,11 +32016,11 @@ const MafsGraph = props => {
       labels,
       disableKeyboardInteraction: readOnly || !!props.static
     }
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     className: "mafs-graph",
     style: {
-      width,
       height,
+      width: "intrinsic",
       position: "relative",
       padding: "25px 25px 0 0",
       boxSizing: "content-box",
@@ -31913,6 +32032,8 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
+  }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
+    lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React.createElement(View, {
     style: {
       position: "absolute",
@@ -31942,7 +32063,41 @@ const MafsGraph = props => {
   }), props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
     state,
     dispatch
-  })))));
+  })))), renderGraphControls({
+    state,
+    dispatch
+  })));
+};
+const renderPointGraphControls = props => /*#__PURE__*/React.createElement(Button, {
+  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 {
@@ -32053,7 +32208,8 @@ function initializeGraphState(params) {
     case "point":
       return _extends({}, shared, {
         type: graph.type,
-        coords: getPointCoords(graph, range, step)
+        coords: getPointCoords(graph, range, step),
+        numPoints: graph.numPoints || 0
       });
     case "circle":
       return _extends({}, shared, {
@@ -32307,6 +32463,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 UnreachableCaseError(action);
   }
@@ -32632,6 +32790,28 @@ 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 _extends({}, 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]));
@@ -34344,17 +34524,18 @@ class InteractiveGraph extends React.Component {
     // Mafs shim
     const mafsFlags = (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null ? void 0 : _this$props$apiOption["mafs"];
     if (shouldUseMafs(mafsFlags, this.props.graph)) {
-      var _this$props$apiOption2;
+      var _this$props$apiOption2, _this$props$apiOption3;
       const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
       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.createElement(StatefulMafsGraph, _extends({}, this.props, {
+        showLabelsFlag: (_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2["mafs"]) == null ? void 0 : _this$props$apiOption2["interactive-graph-locked-features-labels"],
         ref: this.mafsRef,
         gridStep: gridStep,
         snapStep: snapStep,
         box: box,
         showTooltips: !!this.props.showTooltips,
-        readOnly: (_this$props$apiOption2 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption2.readOnly
+        readOnly: (_this$props$apiOption3 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption3.readOnly
       }));
     }
     return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
@@ -34925,10 +35106,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":
@@ -35979,7 +36157,7 @@ const HideAnswersToggle = props => {
     strings
   } = usePerseusI18n();
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$g.switchWrapper
+    style: styles$h.switchWrapper
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -35991,7 +36169,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -36047,14 +36225,14 @@ 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.createElement(Renderer, {
     content: answerString,
     strings: strings,
     inline: true
   })));
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -36118,23 +36296,23 @@ class Marker extends React.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 = _extends({}, 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 = _extends({}, 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.createElement(View, {
-      style: [styles$e.markerIcon, iconStyles],
+      style: [styles$f.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React.createElement(Icon, args));
   }
@@ -36156,7 +36334,7 @@ class Marker extends React.Component {
     const markerDisabled = showCorrectness === "correct";
     const active = hovered || focused;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(AnswerPill, {
       selectedAnswers: selected,
@@ -36173,7 +36351,7 @@ Marker.contextType = PerseusI18nContext;
 Marker.defaultProps = {
   selected: []
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: color.white,
@@ -36755,13 +36933,13 @@ class LabelImage extends React.Component {
     const promptString = isMobile ? multipleAnswers ? strings.tapMultiple : strings.tapSingle : multipleAnswers ? strings.clickMultiple : strings.clickSingle;
     const choicesString = strings.choices;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames("perseus-label-image-widget-instructions", css(styles$d.instructions))
+      className: classNames("perseus-label-image-widget-instructions", css(styles$e.instructions))
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$d.instructionsCaption)
+      className: css(styles$e.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$d.instructionsChoices)
+      className: css(styles$e.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React.createElement("div", {
-      className: css(styles$d.instructionsChoice),
+      className: css(styles$e.instructionsChoice),
       key: index
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: choice,
@@ -36779,20 +36957,20 @@ class LabelImage extends React.Component {
       activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$d.markersCanvas),
+      className: css(styles$e.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$d.imageContainer,
+      className: 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.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(SvgImage, {
@@ -36817,7 +36995,7 @@ class LabelImage extends React.Component {
   }
 }
 LabelImage.contextType = PerseusI18nContext;
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -36914,7 +37092,7 @@ class Placeholder extends React.Component {
     const {
       layout
     } = this.props;
-    const className = css(styles$c.card, styles$c.placeholder, layout === Layout.HORIZONTAL && styles$c.horizontalCard);
+    const className = css(styles$d.card, styles$d.placeholder, layout === Layout.HORIZONTAL && styles$d.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -37097,7 +37275,7 @@ class Draggable extends React.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 = 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 = 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";
     }
@@ -37306,7 +37484,7 @@ class Sortable extends React.Component {
     } = this.props;
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. See sortable.less for details.
-    const className = css(styles$c.sortable) + " perseus-sortable";
+    const className = css(styles$d.sortable) + " perseus-sortable";
     const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === Layout.VERTICAL;
     const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === Layout.HORIZONTAL;
     _.each(this.state.items, function (item, i, items) {
@@ -37548,7 +37726,7 @@ Sortable.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault,
   waitForTexRendererToLoad: true
 };
-const styles$c = StyleSheet.create({
+const styles$d = StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -37710,25 +37888,25 @@ class Matcher extends React.Component {
     };
     const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
     return /*#__PURE__*/React.createElement("table", {
-      className: css(styles$b.widget) + " " + HACKY_CSS_CLASSNAME
+      className: css(styles$c.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React.createElement("tbody", null, showLabels && /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$b.row)
+      className: css(styles$c.row)
     }, /*#__PURE__*/React.createElement("th", {
-      className: css(styles$b.column, styles$b.columnLabel)
+      className: css(styles$c.column, styles$c.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     })), /*#__PURE__*/React.createElement("th", {
-      className: css(styles$b.column, styles$b.columnRight, styles$b.columnLabel)
+      className: css(styles$c.column, styles$c.columnRight, styles$c.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     }))), /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$b.row)
+      className: css(styles$c.row)
     }, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$b.column)
+      className: css(styles$c.column)
     }, /*#__PURE__*/React.createElement(Sortable, {
       options: left,
       layout: Layout.VERTICAL,
@@ -37743,7 +37921,7 @@ class Matcher extends React.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React.createElement("td", {
-      className: css(styles$b.column, styles$b.columnRight)
+      className: css(styles$c.column, styles$c.columnRight)
     }, /*#__PURE__*/React.createElement(Sortable
     // @ts-expect-error - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
     , {
@@ -37797,7 +37975,7 @@ _.extend(Matcher, {
 });
 const padding = 5;
 const border = "1px solid #444";
-const styles$b = StyleSheet.create({
+const styles$c = StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -38473,9 +38651,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);
 }
 
 /**
@@ -38496,16 +38674,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);
@@ -38532,16 +38710,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);
@@ -38563,8 +38741,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);
@@ -38616,7 +38794,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,
@@ -41175,7 +41353,7 @@ class HighlightRenderer extends React.PureComponent {
     const rects = this.state.cachedHighlightRects;
     return /*#__PURE__*/React.createElement("div", null, rects.map((rect, index) => /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: css(styles$9.highlightRect),
+      className: css(styles$a.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -41194,7 +41372,7 @@ class HighlightRenderer extends React.PureComponent {
     })));
   }
 }
-const styles$9 = StyleSheet.create({
+const styles$a = StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -41275,7 +41453,7 @@ class HighlightTooltip extends React.PureComponent {
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
     const content = /*#__PURE__*/React.createElement("div", {
-      className: css(styles$8.tooltipLabel),
+      className: css(styles$9.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -41295,7 +41473,7 @@ class HighlightTooltip extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("div", null)));
   }
 }
-const styles$8 = StyleSheet.create({
+const styles$9 = 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
@@ -41849,7 +42027,7 @@ class HighlightableContent extends React.PureComponent {
     //     starting point: https://phabricator.khanacademy.org/D35623?id=170698
     const buildHighlight = r => this._buildHighlight(r);
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$7.container),
+      className: css(styles$8.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -41870,14 +42048,14 @@ class HighlightableContent extends React.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$7.content),
+      className: css(styles$8.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$7 = StyleSheet.create({
+const styles$8 = 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
@@ -42289,7 +42467,7 @@ class LineHeightMeasurer extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$6.measurer),
+      className: css(styles$7.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
       ref: ref => this._line = ref,
@@ -42297,7 +42475,7 @@ class LineHeightMeasurer extends React.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$6 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -42772,6 +42950,207 @@ 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.Component {
+  constructor(props) {
+    super(props);
+    this.iframeRef = /*#__PURE__*/React.createRef();
+    this.locale = void 0;
+    this.state = {
+      url: null,
+      banner: null
+    };
+    this.change = (...args) => {
+      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+      return change.apply(this, args);
+    };
+    this.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.
+    this.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;
+      }
+    };
+    this.displayLoadFailure = () => {
+      this.setState({
+        url: null,
+        banner: {
+          message: this.context.strings.simulationLoadFail,
+          kind: "critical"
+        }
+      });
+    };
+    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() {
+    var _this$state$url;
+    // 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.createElement(View, {
+      style: styles$6.container
+    }, this.state.banner !== null &&
+    /*#__PURE__*/
+    // TODO(anna): Make this banner focusable
+    React.createElement(View, {
+      style: {
+        marginBottom: phoneMargin
+      }
+    }, /*#__PURE__*/React.createElement(Banner, {
+      layout: "floating",
+      kind: this.state.banner.kind,
+      text: this.state.banner.message
+    })), /*#__PURE__*/React.createElement("iframe", {
+      ref: this.iframeRef,
+      title: this.props.description,
+      sandbox: sandboxProperties,
+      style: {
+        minWidth: 400,
+        height: 360,
+        width: "100%",
+        borderWidth: 0
+      },
+      src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
+      allow: "fullscreen"
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      icon: cornersOutIcon,
+      onClick: () => {
+        var _this$iframeRef$curre;
+        (_this$iframeRef$curre = this.iframeRef.current) == null || _this$iframeRef$curre.requestFullscreen();
+      },
+      kind: "secondary",
+      "aria-label": "Fullscreen",
+      style: {
+        marginTop: 5,
+        marginBottom: 5,
+        alignSelf: "flex-end"
+      },
+      disabled: this.state.url === null
+    }));
+  }
+  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 (_unused) {
+      // 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
+PhetSimulation.contextType = PerseusI18nContext;
+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 = StyleSheet.create({
+  container: {
+    borderRadius: borderRadiusLarge,
+    borderWidth: 1,
+    borderColor: basicBorderColor,
+    padding: phoneMargin,
+    paddingBottom: 0,
+    width: 650
+  }
+});
+
 /* eslint-disable react/no-unsafe */
 const {
   deepEq
@@ -44236,7 +44615,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
@@ -44276,7 +44655,7 @@ const init = function init(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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47836,6 +48215,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",