@khanacademy/perseus-editor 4.1.9 → 4.2.0

package/dist/components/widget-editor.d.ts

@@ -21,7 +21,7 @@ declare class WidgetEditor extends React.Component<WidgetEditorProps, WidgetEdit
     _handleAlignmentChange: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
     getSaveWarnings: () => any;
     serialize: () => {
-        type: "categorizer" | "iframe" | "table" | "video" | "image" | "radio" | "cs-program" | "definition" | "group" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "lights-puzzle" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "reaction-diagtram" | "passage-ref-target" | "sequence" | "simple-markdown-tester" | "simulator" | "sorter" | "unit-input" | "deprecated-standin";
+        type: "categorizer" | "iframe" | "table" | "video" | "image" | "radio" | "cs-program" | "definition" | "group" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "lights-puzzle" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "python-program" | "reaction-diagtram" | "passage-ref-target" | "sequence" | "simple-markdown-tester" | "simulator" | "sorter" | "unit-input" | "deprecated-standin";
         alignment: string | undefined;
         static: boolean | undefined;
         graded: boolean | undefined;

package/dist/es/index.js

@@ -25,7 +25,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // 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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -25936,7 +25936,7 @@ CSProgramEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$9
 } = components;
 class DefinitionEditor extends React.Component {
   constructor(..._args) {
@@ -25956,7 +25956,7 @@ class DefinitionEditor extends React.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$9, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26368,7 +26368,7 @@ ExampleWidgetEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$7
+  TextInput: TextInput$8
 } = components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26392,14 +26392,14 @@ class ExplanationEditor extends React.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26980,7 +26980,7 @@ class AnswerOption extends React.Component {
 
 const {
   InlineIcon: InlineIcon$5,
-  TextInput: TextInput$6
+  TextInput: TextInput$7
 } = components;
 const {
   iconPlus: iconPlus$2,
@@ -27030,7 +27030,7 @@ class GradedGroupEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
       className: css(styles$b.title)
-    }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
+    }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.title,
       className: css(styles$b.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
@@ -28420,7 +28420,7 @@ const styles$a = StyleSheet.create({
 });
 
 const {
-  NumberInput: NumberInput$g
+  NumberInput: NumberInput$h
 } = components;
 const {
   getDependencies: getDependencies$8
@@ -28469,7 +28469,7 @@ class FunctionEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$g, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$h, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28486,7 +28486,7 @@ FunctionEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$5
+  TextInput: TextInput$6
 } = components;
 const {
   getDependencies: getDependencies$7
@@ -28511,7 +28511,7 @@ class LabelEditor extends React.Component {
       className: "graph-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(TextInput$5, {
+    }, /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.label,
       onChange: this.change("label"),
       style: {
@@ -28541,7 +28541,7 @@ LabelEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$f
+  NumberInput: NumberInput$g
 } = components;
 const {
   getDependencies: getDependencies$6
@@ -28596,7 +28596,7 @@ class LineEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$f, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$g, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -28616,7 +28616,7 @@ LineEditor.defaultProps = {
 
 const {
   ButtonGroup: ButtonGroup$2,
-  NumberInput: NumberInput$e
+  NumberInput: NumberInput$f
 } = components;
 class ConstraintEditor extends React.Component {
   constructor(...args) {
@@ -28650,7 +28650,7 @@ class ConstraintEditor extends React.Component {
       onChange: this.change("constraint")
     })), this.props.constraint === "snap" && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$e, {
+    }, "Snap:", " ", /*#__PURE__*/React.createElement(NumberInput$f, {
       value: this.props.snap,
       placeholder: 0,
       onChange: this.change("snap")
@@ -28702,7 +28702,7 @@ ConstraintEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$d
+  NumberInput: NumberInput$e
 } = components;
 const {
   getDependencies: getDependencies$5
@@ -28743,13 +28743,13 @@ class MovableLineEditor extends React.Component {
       onChange: this.change("endY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$d, {
+    }, "Start updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), /*#__PURE__*/React.createElement(NumberInput$e, {
       value: this.props.startSubscript,
       placeholder: 0,
       onChange: this.change("startSubscript")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$d, {
+    }, "End updates ", /*#__PURE__*/React.createElement(TeX, null, "(x_m, y_m)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "m ="), /*#__PURE__*/React.createElement(NumberInput$e, {
       value: this.props.endSubscript,
       placeholder: 0,
       onChange: this.change("endSubscript")
@@ -28774,7 +28774,7 @@ MovableLineEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$c
+  NumberInput: NumberInput$d
 } = components;
 const {
   getDependencies: getDependencies$4
@@ -28807,7 +28807,7 @@ class MovablePointEditor extends React.Component {
       onChange: this.change("startY")
     }), /*#__PURE__*/React.createElement(TeX, null, "\\Large)")), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$c, {
+    }, "Update ", /*#__PURE__*/React.createElement(TeX, null, "(x_n, y_n)"), " for ", /*#__PURE__*/React.createElement(TeX, null, "n ="), " ", /*#__PURE__*/React.createElement(NumberInput$d, {
       value: this.props.varSubscript,
       placeholder: 0,
       onChange: this.change("varSubscript")
@@ -28828,7 +28828,7 @@ MovablePointEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$b
+  NumberInput: NumberInput$c
 } = components;
 const {
   getDependencies: getDependencies$3
@@ -28882,7 +28882,7 @@ class ParametricEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$b, {
+    }, "Width:", " ", /*#__PURE__*/React.createElement(NumberInput$c, {
       value: this.props.strokeWidth,
       placeholder: 2,
       onChange: this.change("strokeWidth")
@@ -31322,7 +31322,7 @@ const styles = StyleSheet.create({
 
 const {
   InfoTip: InfoTip$c,
-  NumberInput: NumberInput$a,
+  NumberInput: NumberInput$b,
   PropCheckBox: PropCheckBox$7
 } = components;
 const MAX_SIZE = 8;
@@ -31479,11 +31479,11 @@ class LightsPuzzleEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Width:", /*#__PURE__*/React.createElement(NumberInput$a, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Width:", /*#__PURE__*/React.createElement(NumberInput$b, {
       value: this._width(),
       placeholder: 5,
       onChange: this._changeWidth
-    }), ", ", "Height:", /*#__PURE__*/React.createElement(NumberInput$a, {
+    }), ", ", "Height:", /*#__PURE__*/React.createElement(NumberInput$b, {
       value: this._height(),
       placeholder: 5,
       onChange: this._changeHeight
@@ -31734,7 +31734,7 @@ MatrixEditor.defaultProps = {
 
 const {
   InfoTip: InfoTip$a,
-  NumberInput: NumberInput$9,
+  NumberInput: NumberInput$a,
   PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = components;
@@ -31794,14 +31794,14 @@ class MeasurerEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
       className: "perseus-widget-left-col"
-    }, "Pixels from top:", " ", /*#__PURE__*/React.createElement(NumberInput$9, {
+    }, "Pixels from top:", " ", /*#__PURE__*/React.createElement(NumberInput$a, {
       placeholder: 0,
       onChange: this._changeTop,
       value: image.top,
       useArrowKeys: true
     })), /*#__PURE__*/React.createElement("label", {
       className: "perseus-widget-right-col"
-    }, "Pixels from left:", " ", /*#__PURE__*/React.createElement(NumberInput$9, {
+    }, "Pixels from left:", " ", /*#__PURE__*/React.createElement(NumberInput$a, {
       placeholder: 0,
       onChange: this._changeLeft,
       value: image.left,
@@ -31847,14 +31847,14 @@ class MeasurerEditor extends React.Component {
         key: n,
         value: n
       }, n);
-    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React.createElement(NumberInput$9, {
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler pixels per unit:", " ", /*#__PURE__*/React.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.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React.createElement(NumberInput$9, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Ruler length in units:", " ", /*#__PURE__*/React.createElement(NumberInput$a, {
       placeholder: 10
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -31891,8 +31891,8 @@ MeasurerEditor.defaultProps = {
 };
 
 const {
-  NumberInput: NumberInput$8,
-  TextInput: TextInput$4
+  NumberInput: NumberInput$9,
+  TextInput: TextInput$5
 } = components;
 class MoleculeWidgetEditor extends React.Component {
   constructor(..._args) {
@@ -31917,10 +31917,10 @@ class MoleculeWidgetEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$4, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "SMILES:\xA0", /*#__PURE__*/React.createElement(TextInput$5, {
       onChange: this.updateMolecule,
       value: this.props.smiles
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$8, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Rotation (deg):\xA0", /*#__PURE__*/React.createElement(NumberInput$9, {
       onChange: this.updateRotation,
       value: this.props.rotationAngle
     }))));
@@ -31936,7 +31936,7 @@ MoleculeWidgetEditor.widgetName = "molecule-renderer";
 const {
   ButtonGroup: ButtonGroup$1,
   InfoTip: InfoTip$9,
-  NumberInput: NumberInput$7,
+  NumberInput: NumberInput$8,
   PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = components;
@@ -32087,7 +32087,7 @@ class NumberLineEditor extends React.Component {
     }, "\u2264"), /*#__PURE__*/React.createElement("option", {
       value: "ge",
       "aria-label": "Greater than or equal"
-    }, "\u2265")), " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    }, "\u2265")), " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: this.props.correctX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32099,7 +32099,7 @@ class NumberLineEditor extends React.Component {
       useArrowKeys: true
     }), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
-    }, this.props.static ? /*#__PURE__*/React.createElement("label", null, "Range:") : /*#__PURE__*/React.createElement("label", null, "Position:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    }, this.props.static ? /*#__PURE__*/React.createElement("label", null, "Range:") : /*#__PURE__*/React.createElement("label", null, "Position:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: this.props.initialX,
       format: this.props.labelStyle
       // eslint-disable-next-line react/jsx-no-bind
@@ -32119,7 +32119,7 @@ class NumberLineEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, "Labels:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    }, "Labels:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: labelRange[0],
       placeholder: range[0],
       format: this.props.labelStyle,
@@ -32128,7 +32128,7 @@ class NumberLineEditor extends React.Component {
       ,
       onChange: this.onLabelRangeChange.bind(this, 0),
       useArrowKeys: true
-    }), /*#__PURE__*/React.createElement("span", null, " & "), /*#__PURE__*/React.createElement(NumberInput$7, {
+    }), /*#__PURE__*/React.createElement("span", null, " & "), /*#__PURE__*/React.createElement(NumberInput$8, {
       value: labelRange[1],
       placeholder: range[1],
       format: this.props.labelStyle,
@@ -32166,7 +32166,7 @@ class NumberLineEditor extends React.Component {
       onChange: this.props.onChange
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32175,7 +32175,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.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.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    })), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.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.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "Note:"), " The user will be able to specify the number of divisions in a number input."))), !isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Num divisions:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: this.props.numDivisions || null,
       format: "decimal",
       onChange: this.onNumDivisionsChange,
@@ -32184,7 +32184,7 @@ class NumberLineEditor extends React.Component {
       },
       placeholder: width / this.props.tickStep,
       useArrowKeys: true
-    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    })), " ", /*#__PURE__*/React.createElement("label", null, "or tick step:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: this.props.tickStep || null,
       format: this.props.labelStyle,
       onChange: this.onTickStepChange,
@@ -32195,7 +32195,7 @@ class NumberLineEditor extends React.Component {
       useArrowKeys: true
     })), /*#__PURE__*/React.createElement(InfoTip$9, null, /*#__PURE__*/React.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.createElement("br", null), /*#__PURE__*/React.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.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Snap increments per tick:", " ", /*#__PURE__*/React.createElement(NumberInput$8, {
       value: snapDivisions,
       checkValidity: val => val > 0,
       format: this.props.labelStyle
@@ -32244,9 +32244,9 @@ const {
   InfoTip: InfoTip$8,
   InlineIcon: InlineIcon$3,
   MultiButtonGroup,
-  NumberInput: NumberInput$6,
+  NumberInput: NumberInput$7,
   PropCheckBox: PropCheckBox$3,
-  TextInput: TextInput$3
+  TextInput: TextInput$4
 } = components;
 const {
   iconGear,
@@ -32348,7 +32348,7 @@ const NumericInputEditor = createReactClass({
     })));
     const maxError = i => /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Max error", " ", /*#__PURE__*/React.createElement(NumberInput$6, {
+    }, /*#__PURE__*/React.createElement("label", null, "Max error", " ", /*#__PURE__*/React.createElement(NumberInput$7, {
       className: "max-error",
       value: answers[i]["maxError"],
       onChange: this.updateAnswer(i, "maxError"),
@@ -32377,7 +32377,7 @@ const NumericInputEditor = createReactClass({
     }));
     const labelText = /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Label text:", " ", /*#__PURE__*/React.createElement(TextInput$3, {
+    }, /*#__PURE__*/React.createElement("label", null, "Label text:", " ", /*#__PURE__*/React.createElement(TextInput$4, {
       value: this.props.labelText,
       onChange: this.change("labelText")
     })), /*#__PURE__*/React.createElement(InfoTip$8, null, /*#__PURE__*/React.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
@@ -32418,7 +32418,7 @@ const NumericInputEditor = createReactClass({
         key: i
       }, /*#__PURE__*/React.createElement("div", {
         className: "input-answer-editor-value-container" + (answer.maxError ? " with-max-error" : "")
-      }, /*#__PURE__*/React.createElement(NumberInput$6, {
+      }, /*#__PURE__*/React.createElement(NumberInput$7, {
         value: answer.value,
         className: "numeric-input-value",
         placeholder: "answer",
@@ -32465,7 +32465,7 @@ const NumericInputEditor = createReactClass({
         className: "max-error-container"
       }, /*#__PURE__*/React.createElement("div", {
         className: "max-error-plusmn"
-      }, "\xB1"), /*#__PURE__*/React.createElement(NumberInput$6, {
+      }, "\xB1"), /*#__PURE__*/React.createElement(NumberInput$7, {
         placeholder: 0,
         value: answers[i]["maxError"],
         format: _.last(answer.answerForms),
@@ -32790,8 +32790,8 @@ PassageEditor.defaultProps = {
 
 const {
   InfoTip: InfoTip$5,
-  NumberInput: NumberInput$5,
-  TextInput: TextInput$2
+  NumberInput: NumberInput$6,
+  TextInput: TextInput$3
 } = components;
 class PassageRefEditor extends React.Component {
   constructor(..._args) {
@@ -32804,17 +32804,17 @@ class PassageRefEditor extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Passage Number: ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Passage Number: ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: this.props.passageNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("passageNumber")
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Reference Number: ", /*#__PURE__*/React.createElement(NumberInput$5, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Reference Number: ", /*#__PURE__*/React.createElement(NumberInput$6, {
       value: this.props.referenceNumber
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("referenceNumber")
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Summary Text: ", /*#__PURE__*/React.createElement(TextInput$2, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Summary Text: ", /*#__PURE__*/React.createElement(TextInput$3, {
       value: this.props.summaryText
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -32868,7 +32868,7 @@ PassageRefTargetEditor.defaultProps = {
 
 const {
   InfoTip: InfoTip$4,
-  NumberInput: NumberInput$4,
+  NumberInput: NumberInput$5,
   RangeInput,
   TextListEditor: TextListEditor$1
 } = components;
@@ -33097,7 +33097,7 @@ class PlotterEditor extends React.Component {
       className: "set-from-scale-box"
     }, /*#__PURE__*/React.createElement("span", {
       className: "categories-title"
-    }, "Set Categories From Scale"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React.createElement(NumberInput$4, {
+    }, "Set Categories From Scale"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Tick Step:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       placeholder: 1,
       useArrowKeys: true,
       value: this.state.tickStep,
@@ -33109,7 +33109,7 @@ class PlotterEditor extends React.Component {
       onChange: this.handleChangeRange
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       onClick: this.setCategoriesFromScale
-    }, "Set Categories", " "))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React.createElement(NumberInput$4, {
+    }, "Set Categories", " "))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Label Interval:", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
       useArrowKeys: true,
       value: this.props.labelInterval,
       onChange: this.changeLabelInterval
@@ -33175,6 +33175,62 @@ PlotterEditor.defaultProps = _extends({}, editorDefaults, {
   }
 });
 
+/**
+ * This editor is for embedding Khan Academy Python programs.
+ */
+const {
+  NumberInput: NumberInput$4,
+  TextInput: TextInput$2
+} = 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.Component {
+  constructor(..._args) {
+    super(..._args);
+    this.change = (...args) => {
+      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+      return Changeable.change.apply(this, args);
+    };
+    this.getSaveWarnings = () => {
+      return validateOptions(this.props.height, this.props.programID);
+    };
+  }
+  serialize() {
+    return {
+      programID: this.props.programID,
+      height: this.props.height
+    };
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "User Program ID:", " ", /*#__PURE__*/React.createElement(TextInput$2, {
+      value: this.props.programID,
+      onChange: this.change("programID"),
+      placeholder: "123"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("label", null, "Height:", " ", /*#__PURE__*/React.createElement(NumberInput$4, {
+      value: this.props.height,
+      onChange: this.change("height"),
+      placeholder: "400"
+    })));
+  }
+}
+PythonProgramEditor.widgetName = "python-program";
+PythonProgramEditor.defaultProps = {
+  programID: "",
+  height: 400
+};
+
 const {
   InlineIcon: InlineIcon$2,
   PropCheckBox: PropCheckBox$1
@@ -34291,7 +34347,7 @@ VideoEditor.defaultProps = {
   location: ""
 };
 
-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];
 
 class TextInput extends React.Component {
   constructor(...args) {