@khanacademy/perseus-editor 4.1.9 → 4.2.0

package/dist/index.js

@@ -64,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "4.1.9";
+const libVersion = "4.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -25916,7 +25916,7 @@ class CSProgramEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$9
 } = perseus.components;
 class DefinitionEditor extends React__namespace.Component {
   static propTypes = {
@@ -25950,7 +25950,7 @@ class DefinitionEditor extends React__namespace.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$9, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26366,7 +26366,7 @@ class ExampleWidgetEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$7
+  TextInput: TextInput$8
 } = perseus.components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26403,14 +26403,14 @@ class ExplanationEditor extends React__namespace.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26988,7 +26988,7 @@ class AnswerOption extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InlineIcon: InlineIcon$5,
-  TextInput: TextInput$6
+  TextInput: TextInput$7
 } = perseus.components;
 const {
   iconPlus: iconPlus$2,
@@ -27044,7 +27044,7 @@ class GradedGroupEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
       className: aphrodite.css(styles$b.title)
-    }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
+    }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.title,
       className: aphrodite.css(styles$b.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
@@ -28460,7 +28460,7 @@ const styles$a = aphrodite.StyleSheet.create({
 });
 
 const {
-  NumberInput: NumberInput$g
+  NumberInput: NumberInput$h
 } = perseus.components;
 const {
   getDependencies: getDependencies$8
@@ -28520,7 +28520,7 @@ class FunctionEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$g, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$h, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28529,7 +28529,7 @@ class FunctionEditor extends React__namespace.Component {
 }
 
 const {
-  TextInput: TextInput$5
+  TextInput: TextInput$6
 } = perseus.components;
 const {
   getDependencies: getDependencies$7
@@ -28563,7 +28563,7 @@ class LabelEditor extends React__namespace.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(TextInput$5, {
+    }, /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.label,
       onChange: this.change("label"),
       style: {
@@ -28587,7 +28587,7 @@ class LabelEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$f
+  NumberInput: NumberInput$g
 } = perseus.components;
 const {
   getDependencies: getDependencies$6
@@ -28655,7 +28655,7 @@ class LineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$f, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$g, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28665,7 +28665,7 @@ class LineEditor extends React__namespace.Component {
 
 const {
   ButtonGroup: ButtonGroup$2,
-  NumberInput: NumberInput$e
+  NumberInput: NumberInput$f
 } = perseus.components;
 class ConstraintEditor extends React__namespace.Component {
   static defaultProps = {
@@ -28705,7 +28705,7 @@ class ConstraintEditor extends React__namespace.Component {
       onChange: this.change("constraint")
     })), this.props.constraint === "snap" && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
+    }, "Snap:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$f, {
       value: this.props.snap,
       placeholder: 0,
       onChange: this.change("snap")
@@ -28748,7 +28748,7 @@ class ConstraintEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$d
+  NumberInput: NumberInput$e
 } = perseus.components;
 const {
   getDependencies: getDependencies$5
@@ -28806,13 +28806,13 @@ class MovableLineEditor extends React__namespace.Component {
       onChange: this.change("endY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
+    }, "Start updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
+    }, "End updates ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "m ="), /*#__PURE__*/React__namespace.createElement(NumberInput$e, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -28823,7 +28823,7 @@ class MovableLineEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$d
 } = perseus.components;
 const {
   getDependencies: getDependencies$4
@@ -28871,7 +28871,7 @@ class MovablePointEditor extends React__namespace.Component {
       onChange: this.change("startY")
     }), /*#__PURE__*/React__namespace.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
+    }, "Update ", /*#__PURE__*/React__namespace.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React__namespace.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$d, {
       value: this.props.varSubscript,
       placeholder: 0,
       onChange: this.change("varSubscript")
@@ -28880,7 +28880,7 @@ class MovablePointEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$b
+  NumberInput: NumberInput$c
 } = perseus.components;
 const {
   getDependencies: getDependencies$3
@@ -28946,7 +28946,7 @@ class ParametricEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
+    }, "Width:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$c, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -31423,7 +31423,7 @@ const styles = aphrodite.StyleSheet.create({
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$c,
-  NumberInput: NumberInput$a,
+  NumberInput: NumberInput$b,
   PropCheckBox: PropCheckBox$7
 } = perseus.components;
 const MAX_SIZE = 8;
@@ -31555,11 +31555,11 @@ class LightsPuzzleEditor extends React__namespace.Component {
     };
   })();
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Width:", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Width:", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
       value: this._width(),
       placeholder: 5,
       onChange: this._changeWidth
-    }), ", ", "Height:", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
+    }), ", ", "Height:", /*#__PURE__*/React__namespace.createElement(NumberInput$b, {
       value: this._height(),
       placeholder: 5,
       onChange: this._changeHeight
@@ -31840,7 +31840,7 @@ class MatrixEditor extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$a,
-  NumberInput: NumberInput$9,
+  NumberInput: NumberInput$a,
   PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = perseus.components;
@@ -31893,14 +31893,14 @@ class MeasurerEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
       className: "perseus-widget-left-col"
-    }, "Pixels from top:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
+    }, "Pixels from top:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
       placeholder: 0,
       onChange: this._changeTop,
       value: image.top,
       useArrowKeys: true
     })), /*#__PURE__*/React__namespace.createElement("label", {
       className: "perseus-widget-right-col"
-    }, "Pixels from left:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
+    }, "Pixels from left:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
       placeholder: 0,
       onChange: this._changeLeft,
       value: image.left,
@@ -31946,14 +31946,14 @@ class MeasurerEditor extends React__namespace.Component {
         key: n,
         value: n
       }, n);
-    })))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
+    })))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
       placeholder: 40
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("rulerPixels"),
       value: this.props.rulerPixels,
       useArrowKeys: true
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$a, {
       placeholder: 10
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -32001,8 +32001,8 @@ class MeasurerEditor extends React__namespace.Component {
 }
 
 const {
-  NumberInput: NumberInput$8,
-  TextInput: TextInput$4
+  NumberInput: NumberInput$9,
+  TextInput: TextInput$5
 } = perseus.components;
 class MoleculeWidgetEditor extends React__namespace.Component {
   static propTypes = {
@@ -32036,10 +32036,10 @@ class MoleculeWidgetEditor extends React__namespace.Component {
     return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$4, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React__namespace.createElement(TextInput$5, {
       onChange: this.updateMolecule,
       value: this.props.smiles
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React__namespace.createElement(NumberInput$9, {
       onChange: this.updateRotation,
       value: this.props.rotationAngle
     }))));
@@ -32050,7 +32050,7 @@ class MoleculeWidgetEditor extends React__namespace.Component {
 const {
   ButtonGroup: ButtonGroup$1,
   InfoTip: InfoTip$9,
-  NumberInput: NumberInput$7,
+  NumberInput: NumberInput$8,
   PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = perseus.components;
@@ -32230,7 +32230,7 @@ class NumberLineEditor extends React__namespace.Component {
     }, "\u2264"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "ge",
       "aria-label": "Greater than or equal"
-    }, "\u2265")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }, "\u2265")), " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: this.props.correctX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32242,7 +32242,7 @@ class NumberLineEditor extends React__namespace.Component {
       useArrowKeys: true
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "This is the correct answer. The answer is validated (as right or wrong) by using only the end position of the point and the relation (=, <, >, \u2264, \u2265)."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, this.props.static ? /*#__PURE__*/React__namespace.createElement("label", null, "Range:") : /*#__PURE__*/React__namespace.createElement("label", null, "Position:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }, this.props.static ? /*#__PURE__*/React__namespace.createElement("label", null, "Range:") : /*#__PURE__*/React__namespace.createElement("label", null, "Position:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: this.props.initialX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32262,7 +32262,7 @@ class NumberLineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Labels:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }, "Labels:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: labelRange[0],
       placeholder: range[0],
       format: this.props.labelStyle,
@@ -32271,7 +32271,7 @@ class NumberLineEditor extends React__namespace.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 0),
       useArrowKeys: true
-    }), /*#__PURE__*/React__namespace.createElement("span", null, " & "), /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }), /*#__PURE__*/React__namespace.createElement("span", null, " & "), /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: labelRange[1],
       placeholder: range[1],
       format: this.props.labelStyle,
@@ -32309,7 +32309,7 @@ class NumberLineEditor extends React__namespace.Component {
       onChange: this.props.onChange
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }, isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32318,7 +32318,7 @@ class NumberLineEditor extends React__namespace.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "This controls the number (and position) of the tick marks. The number of divisions is constrained to", " " + divisionRange[0] + EN_DASH + divisionRange[1], ".", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32327,7 +32327,7 @@ class NumberLineEditor extends React__namespace.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), " ", /*#__PURE__*/React__namespace.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    })), " ", /*#__PURE__*/React__namespace.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: this.props.tickStep || null,
       format: this.props.labelStyle,
       onChange: this.onTickStepChange,
@@ -32338,7 +32338,7 @@ class NumberLineEditor extends React__namespace.Component {
       useArrowKeys: true
     })), /*#__PURE__*/React__namespace.createElement(InfoTip$9, null, /*#__PURE__*/React__namespace.createElement("p", null, "This controls the number (and position) of the tick marks; you can either set the number of divisions (2 divisions would split the entire range in two halves), or the tick step (the distance between ticks) and the other value will be updated accordingly.", " ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("strong", null, "Note:"), " There is no check to see if labels coordinate with the tick marks, which may be confusing for users if the blue labels and black ticks are off-step.")))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$8, {
       value: snapDivisions,
       checkValidity: val => val > 0,
       format: this.props.labelStyle
@@ -32356,9 +32356,9 @@ const {
   InfoTip: InfoTip$8,
   InlineIcon: InlineIcon$3,
   MultiButtonGroup,
-  NumberInput: NumberInput$6,
+  NumberInput: NumberInput$7,
   PropCheckBox: PropCheckBox$3,
-  TextInput: TextInput$3
+  TextInput: TextInput$4
 } = perseus.components;
 const {
   iconGear,
@@ -32462,7 +32462,7 @@ const NumericInputEditor = createReactClass__default["default"]({
     })));
     const maxError = i => /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Max error", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Max error", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
       className: "max-error",
       value: answers[i]["maxError"],
       onChange: this.updateAnswer(i, "maxError"),
@@ -32491,7 +32491,7 @@ const NumericInputEditor = createReactClass__default["default"]({
     }));
     const labelText = /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Label text:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Label text:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$4, {
       value: this.props.labelText,
       onChange: this.change("labelText")
     })), /*#__PURE__*/React__namespace.createElement(InfoTip$8, null, /*#__PURE__*/React__namespace.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
@@ -32532,7 +32532,7 @@ const NumericInputEditor = createReactClass__default["default"]({
         key: i
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "input-answer-editor-value-container" + (answer.maxError ? " with-max-error" : "")
-      }, /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+      }, /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
         value: answer.value,
         className: "numeric-input-value",
         placeholder: "answer",
@@ -32579,7 +32579,7 @@ const NumericInputEditor = createReactClass__default["default"]({
         className: "max-error-container"
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "max-error-plusmn"
-      }, "\xB1"), /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
+      }, "\xB1"), /*#__PURE__*/React__namespace.createElement(NumberInput$7, {
         placeholder: 0,
         value: answers[i]["maxError"],
         format: ___default["default"].last(answer.answerForms),
@@ -32909,8 +32909,8 @@ class PassageEditor extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$5,
-  NumberInput: NumberInput$5,
-  TextInput: TextInput$2
+  NumberInput: NumberInput$6,
+  TextInput: TextInput$3
 } = perseus.components;
 class PassageRefEditor extends React__namespace.Component {
   static propTypes = {
@@ -32938,17 +32938,17 @@ class PassageRefEditor extends React__namespace.Component {
     return perseus.EditorJsonify.serialize.call(this);
   };
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Passage Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Passage Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: this.props.passageNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("passageNumber")
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Reference Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Reference Number: ", /*#__PURE__*/React__namespace.createElement(NumberInput$6, {
       value: this.props.referenceNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("referenceNumber")
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Summary Text: ", /*#__PURE__*/React__namespace.createElement(TextInput$2, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Summary Text: ", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
       value: this.props.summaryText
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -32995,7 +32995,7 @@ class PassageRefTargetEditor extends React__namespace.Component {
 
 const {
   InfoTip: InfoTip$4,
-  NumberInput: NumberInput$4,
+  NumberInput: NumberInput$5,
   RangeInput,
   TextListEditor: TextListEditor$1
 } = perseus.components;
@@ -33245,7 +33245,7 @@ class PlotterEditor extends React__namespace.Component {
       className: "set-from-scale-box"
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: "categories-title"
-    }, "Set Categories From Scale"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
+    }, "Set Categories From Scale"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       placeholder: 1,
       useArrowKeys: true,
       value: this.state.tickStep,
@@ -33257,7 +33257,7 @@ class PlotterEditor extends React__namespace.Component {
       onChange: this.handleChangeRange
     }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.setCategoriesFromScale
-    }, "Set Categories", " "))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
+    }, "Set Categories", " "))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
       useArrowKeys: true,
       value: this.props.labelInterval,
       onChange: this.changeLabelInterval
@@ -33303,6 +33303,65 @@ class PlotterEditor extends React__namespace.Component {
   }
 }
 
+/**
+ * This editor is for embedding Khan Academy Python programs.
+ */
+const {
+  NumberInput: NumberInput$4,
+  TextInput: TextInput$2
+} = perseus.components;
+function validateOptions(height, programID) {
+  const errors = [];
+  if (programID === "") {
+    errors.push("The program ID is required.");
+  }
+  if (!Number.isInteger(height) || height < 1) {
+    errors.push("The height must be a positive integer.");
+  }
+  return errors;
+}
+
+/**
+ * This is the main editor for this widget, to specify all the options.
+ */
+class PythonProgramEditor extends React__namespace.Component {
+  static widgetName = "python-program";
+  static defaultProps = {
+    programID: "",
+    height: 400
+  };
+  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 perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  serialize() {
+    return {
+      programID: this.props.programID,
+      height: this.props.height
+    };
+  }
+  getSaveWarnings = () => {
+    return validateOptions(this.props.height, this.props.programID);
+  };
+  render() {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$2, {
+      value: this.props.programID,
+      onChange: this.change("programID"),
+      placeholder: "123"
+    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("label", null, "Height:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$4, {
+      value: this.props.height,
+      onChange: this.change("height"),
+      placeholder: "400"
+    })));
+  }
+}
+
 /* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types, react/sort-comp */
 const {
   InlineIcon: InlineIcon$2,
@@ -34435,7 +34494,7 @@ class VideoEditor extends React__namespace.Component {
   }
 }
 
-var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, LightsPuzzleEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, ReactionDiagramWidgetEditor, SequenceEditor, SimpleMarkdownTesterEditor, SimulatorEditor, SorterEditor, TableEditor, UnitInputEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
+var AllEditors = [CategorizerEditor, CSProgramEditor, DefinitionEditor, DropdownEditor, ExampleGraphieWidgetEditor, ExampleWidgetEditor, ExplanationEditor, ExpressionEditor, GradedGroupEditor, GradedGroupSetEditor, GrapherEditor, GroupEditor, IframeEditor, ImageEditor, InputNumberEditor, InteractionEditor, InteractiveGraphEditor, LabelImageEditor, LightsPuzzleEditor, MatcherEditor, MatrixEditor, MeasurerEditor, MoleculeWidgetEditor, NumberLineEditor, NumericInputEditor, OrdererEditor, PassageEditor, PassageRefEditor, PassageRefTargetEditor, PlotterEditor, PythonProgramEditor, ReactionDiagramWidgetEditor, SequenceEditor, SimpleMarkdownTesterEditor, SimulatorEditor, SorterEditor, TableEditor, UnitInputEditor, VideoEditor, RadioEditor, DeprecatedStandinEditor];
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class TextInput extends React__namespace.Component {