@khanacademy/perseus 44.0.0 → 45.1.0

package/dist/es/index.js

@@ -3797,6 +3797,7 @@ Zoom.prototype.zoomImage = function () {
     this._zoomOriginal();
   }.bind(this);
   img.src = this._targetImage.src;
+  img.alt = this._targetImage.alt;
   this.$zoomedImage = $zoomedImage;
 };
 Zoom.prototype._zoomOriginal = function () {
@@ -8872,7 +8873,10 @@ var Tex$1 = {
       // We use createElement instead of JSX here because we can't name this file tex.tsx;
       // that name is already taken.
       // eslint-disable-next-line import/no-deprecated
-      render( /*#__PURE__*/React.createElement(TeX, {
+      render(
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-children-prop
+      React.createElement(TeX, {
         children: text,
         onRender: callback
       }), $texHolder[0]);
@@ -14609,36 +14613,15 @@ const pluck = function pluck(table, subKey) {
  *   });
  * {a: 2, b: 3}
  */
-const mapObject$1 = function mapObject(obj, lambda) {
+const mapObject = function mapObject(obj, lambda) {
   const result = {};
-  _.each(_.keys(obj), function (key) {
+  Object.keys(obj).forEach(key => {
     // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
     result[key] = lambda(obj[key], key);
   });
   return result;
 };
 
-/**
- * Maps an array to an object
- *
- * > mapObjectFromArray(['a', 'b'], function(elem) {
- *       return elem + elem;
- *   });
- * {a: 'aa', b: 'bb'}
- */
-const mapObjectFromArray = function mapObjectFromArray(arr, lambda) {
-  const result = {};
-  _.each(arr, function (elem) {
-    result[elem] = lambda(elem);
-  });
-  return result;
-};
-var objective_ = {
-  pluck: pluck,
-  mapObject: mapObject$1,
-  mapObjectFromArray: mapObjectFromArray
-};
-
 /**
  * MovableLine
  */
@@ -14703,7 +14686,7 @@ _.extend(MovableLine$4.prototype, {
     //    - are objects, not primitives (and need a deeper copy)
     //    - they don't need getters created for them
     // TODO(jack): Consider "default" once we es3ify perseus
-    objective_.pluck(MovableLineOptions, "standard")), DEFAULT_PROPS$2);
+    pluck(MovableLineOptions, "standard")), DEFAULT_PROPS$2);
   },
   /**
    * Resets the object to its state as if it were constructed with
@@ -15203,7 +15186,7 @@ class MovablePoint$5 {
     //    - are objects, not primitives (and need a deeper copy)
     //    - they don't need getters created for them
     // TODO(jack): Consider "default" once we es3ify perseus
-    objective_.pluck(MovablePointOptions, "standard")
+    pluck(MovablePointOptions, "standard")
     // We only update props here, because we want things on state to
     // be persistent, and updated appropriately in modify()
     ), DEFAULT_PROPS$1);
@@ -16094,7 +16077,7 @@ _.extend(MovablePolygon.prototype, {
     //    - are objects, not primitives (and need a deeper copy)
     //    - they don't need getters created for them
     // TODO(jack): Consider "default" once we es3ify perseus
-    objective_.pluck(MovablePolygonOptions, "standard")
+    pluck(MovablePolygonOptions, "standard")
 
     // We only update props here, because we want things on state to
     // be persistent, and updated appropriately in modify()
@@ -18719,6 +18702,140 @@ class QuestionParagraph extends React.Component {
   }
 }
 
+// These are all the current widgets that require user-input and are supported for automatic scoring
+const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
+
+/**
+ * Regex for widget placeholders in a string.
+ *
+ * First capture group is the widget ID (ex. 'radio 1')
+ * Second capture group is the widget type (ex. "radio)
+ * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
+ */
+function getWidgetRegex() {
+  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
+}
+
+/**
+ * Add a widget placeholder using the widget ID.
+ * ex. addWidget("radio 1") => "[[☃ radio 1]]"
+ *
+ * @param {string} id
+ * @returns {string}
+ */
+function addWidget(id) {
+  return `[[☃ ${id}]]`;
+}
+
+/**
+ * Get a widget type by a widget's ID
+ * (please don't derive type from ID)
+ *
+ * @param {string} widgetId the ID of the widget
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {string} the widget type (ie "radio")
+ */
+function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
+  var _widget$type;
+  const widget = widgetMap[WidgetId];
+  return (_widget$type = widget == null ? void 0 : widget.type) != null ? _widget$type : null;
+}
+
+/**
+ * Does the content have a specific type of widget?
+ *
+ * @param {string} type the type of the widget in question (ie "radio")
+ * @param {string} content the string to search through
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {boolean} if the content includes the widget type
+ */
+function contentHasWidgetType(type, content, widgetMap) {
+  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
+}
+
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {ReadonlyArray<string>} widgetIds
+ */
+function getWidgetIdsFromContent(content) {
+  const widgets = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    widgets.push(match[1]);
+    match = localWidgetRegex.exec(content);
+  }
+  return widgets;
+}
+
+/**
+ * Get a list of widget IDs from content,
+ * but only for specific widget types
+ *
+ * @param {string} type the type of widget (ie "radio")
+ * @param {string} content the string to parse
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {ReadonlyArray<string>} the widget type (ie "radio")
+ */
+function getWidgetIdsFromContentByType(type, content, widgetMap) {
+  const rv = [];
+  const widgetIdsInContent = getWidgetIdsFromContent(content);
+  widgetIdsInContent.forEach(widgetId => {
+    const widget = widgetMap[widgetId];
+    if ((widget == null ? void 0 : widget.type) === type) {
+      rv.push(widgetId);
+    }
+  });
+  return rv;
+}
+
+/**
+ * Pull the widget map out of ItemData
+ *
+ * @param {PerseusItem} PerseusItem containing a widgetMap
+ * @returns {WidgetMap} the widget map in the PerseusItem
+ */
+function getWidgetsMapFromItemData(itemData) {
+  return itemData.question.widgets;
+}
+
+/**
+ * Get the widget information from a WidgetMap
+ *
+ * @param {string} widgetId the ID of the widget
+ * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
+ */
+function getWidgetFromWidgetMap(widgetId, widgetMap) {
+  var _widgetMap$widgetId;
+  return (_widgetMap$widgetId = widgetMap[widgetId]) != null ? _widgetMap$widgetId : null;
+}
+
+/**
+ * Get select widgets from a widget map.
+ * Useful for multi-items that needs to split
+ * one PerseusItem into several
+ *
+ * @param {ReadonlyArray<string>} widgetIds to extract
+ * @param {PerseusWidgetsMap} widgetMap to extract from
+ * @return {PerseusWidgetsMap} a new widget map with requested widgets
+ */
+function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
+  const widgets = {};
+  widgetIds.forEach(widgetId => {
+    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
+    if (widget) {
+      widgets[widgetId] = widget;
+    }
+  });
+  return widgets;
+}
+
 const DEFAULT_ALIGNMENT$1 = "block";
 // NOTE(kevinb): "default" is not one in `validAlignments`.
 const DEFAULT_SUPPORTED_ALIGNMENTS = ["default"];
@@ -19150,36 +19267,64 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   isLintable: isLintable
 });
 
+function getUpgradedWidgetOptions(oldWidgetOptions) {
+  // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
+  return mapObject(oldWidgetOptions, (widgetInfo, widgetId) => {
+    if (!widgetInfo.type || !widgetInfo.alignment) {
+      const newValues = {};
+      if (!widgetInfo.type) {
+        // TODO: why does widget have no type?
+        // We don't want to derive type from widget ID
+        // see: LEMS-1845
+        newValues.type = widgetId.split(" ")[0];
+      }
+      if (!widgetInfo.alignment) {
+        newValues.alignment = "default";
+      }
+      widgetInfo = _extends({}, widgetInfo, newValues);
+    }
+    return upgradeWidgetInfoToLatestVersion(widgetInfo);
+  });
+}
 function emptyWidgetsFunctional(widgets,
 // This is a port of old code, I'm not sure why
 // we need widgetIds vs the keys of the widgets object
 widgetIds, userInputMap, strings, locale) {
+  const upgradedWidgets = getUpgradedWidgetOptions(widgets);
   return widgetIds.filter(id => {
-    const widget = widgets[id];
+    const widget = upgradedWidgets[id];
     if (!widget || widget.static) {
       // Static widgets shouldn't count as empty
       return false;
     }
-    let score = null;
-    const userInput = userInputMap[id];
     const scorer = getWidgetScorer(widget.type);
-    if (widget.type === "group") {
-      const scores = scoreWidgetsFunctional(widget.options.widgets, Object.keys(widget.options.widgets), userInputMap[id], strings, locale);
-      score = Util.flattenScores(scores);
-    } else if (scorer) {
-      score = scorer(userInput, widget.options, strings, locale);
-    }
+    const score = scorer == null ? void 0 : scorer(userInputMap[id], widget.options, strings, locale);
     if (score) {
       return Util.scoreIsEmpty(score);
     }
   });
 }
+
+// TODO: combine scorePerseusItem with scoreWidgetsFunctional
+// once scorePerseusItem is the only one calling scoreWidgetsFunctional
+function scorePerseusItem(perseusRenderData, userInputMap,
+// TODO(LEMS-2461,LEMS-2391): these probably
+// need to be removed before we move this to the server
+strings, locale) {
+  // There seems to be a chance that PerseusRenderer.widgets might include
+  // widget data for widgets that are not in PerseusRenderer.content,
+  // so this checks that the widgets are being used before scoring them
+  const usedWidgetIds = getWidgetIdsFromContent(perseusRenderData.content);
+  const scores = scoreWidgetsFunctional(perseusRenderData.widgets, usedWidgetIds, userInputMap, strings, locale);
+  return Util.flattenScores(scores);
+}
 function scoreWidgetsFunctional(widgets,
 // This is a port of old code, I'm not sure why
 // we need widgetIds vs the keys of the widgets object
 widgetIds, userInputMap, strings, locale) {
+  const upgradedWidgets = getUpgradedWidgetOptions(widgets);
   const gradedWidgetIds = widgetIds.filter(id => {
-    const props = widgets[id];
+    const props = upgradedWidgets[id];
     const widgetIsGraded = (props == null ? void 0 : props.graded) == null || props.graded;
     const widgetIsStatic = !!(props != null && props.static);
     // Ungraded widgets or widgets set to static shouldn't be graded.
@@ -19187,17 +19332,15 @@ widgetIds, userInputMap, strings, locale) {
   });
   const widgetScores = {};
   gradedWidgetIds.forEach(id => {
-    const widget = widgets[id];
+    const widget = upgradedWidgets[id];
     if (!widget) {
       return;
     }
     const userInput = userInputMap[id];
     const scorer = getWidgetScorer(widget.type);
-    if (widget.type === "group") {
-      const scores = scoreWidgetsFunctional(widget.options.widgets, Object.keys(widget.options.widgets), userInputMap[id], strings, locale);
-      widgetScores[id] = Util.flattenScores(scores);
-    } else if (scorer) {
-      widgetScores[id] = scorer(userInput, widget.options, strings, locale);
+    const score = scorer == null ? void 0 : scorer(userInput, widget.options, strings, locale);
+    if (score != null) {
+      widgetScores[id] = score;
     }
   });
   return widgetScores;
@@ -19503,9 +19646,6 @@ WidgetContainer.defaultProps = {
   linterContext: linterContextDefault
 };
 
-const {
-  mapObject
-} = objective_;
 const rContainsNonWhitespace = /\S/;
 const rImageURL = /(web\+graphie|https):\/\/[^\s]*/;
 const noopOnRender = () => {};
@@ -19556,31 +19696,12 @@ class Renderer extends React.Component {
       return _extends({}, ApiOptions.defaults, this.props.apiOptions);
     };
     this._getInitialWidgetState = props => {
-      const allWidgetInfo = this._getAllWidgetsInfo(props);
+      const allWidgetInfo = getUpgradedWidgetOptions(props.widgets);
       return {
         widgetInfo: allWidgetInfo,
         widgetProps: this._getAllWidgetsStartProps(allWidgetInfo, props)
       };
     };
-    // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
-    this._getAllWidgetsInfo = props => {
-      return mapObject(props.widgets, (widgetInfo, widgetId) => {
-        if (!widgetInfo.type || !widgetInfo.alignment) {
-          const newValues = {};
-          if (!widgetInfo.type) {
-            // TODO: why does widget have no type?
-            // We don't want to derive type from widget ID
-            // see: LEMS-1845
-            newValues.type = widgetId.split(" ")[0];
-          }
-          if (!widgetInfo.alignment) {
-            newValues.alignment = "default";
-          }
-          widgetInfo = _.extend({}, widgetInfo, newValues);
-        }
-        return upgradeWidgetInfoToLatestVersion(widgetInfo);
-      });
-    };
     this._getAllWidgetsStartProps = (allWidgetInfo, props) => {
       const {
         apiOptions,
@@ -20026,7 +20147,7 @@ class Renderer extends React.Component {
         // Instead, we center them with css magic in styles.less
         // /cry(aria)
         this._foundTextNodes = true;
-        if (_.contains(this.widgetIds, node.id)) {
+        if (this.widgetIds.includes(node.id)) {
           // We don't want to render a duplicate widget key/ref,
           // as this causes problems with react (for obvious
           // reasons). Instead we just notify the
@@ -20330,7 +20451,7 @@ class Renderer extends React.Component {
     };
     this.getInputPaths = () => {
       const inputPaths = [];
-      _.each(this.widgetIds, widgetId => {
+      this.widgetIds.forEach(widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         if (widget && widget.getInputPaths) {
           // Grab all input paths and add widgetID to the front
@@ -20338,7 +20459,7 @@ class Renderer extends React.Component {
           // Prefix paths with their widgetID and add to collective
           // list of paths.
           // @ts-expect-error - TS2345 - Argument of type '(inputPath: string) => void' is not assignable to parameter of type 'CollectionIterator<FocusPath, void, readonly FocusPath[]>'.
-          _.each(widgetInputPaths, inputPath => {
+          widgetInputPaths.forEach(inputPath => {
             const relativeInputPath = [widgetId].concat(inputPath);
             inputPaths.push(relativeInputPath);
           });
@@ -20450,7 +20571,7 @@ class Renderer extends React.Component {
         }, 0);
       });
     };
-    this.setInputValue = (path, newValue, focus) => {
+    this.setInputValue = (path, newValue, cb) => {
       // @ts-expect-error - TS2345 - Argument of type 'FocusPath' is not assignable to parameter of type 'List<any>'.
       const widgetId = _.first(path);
       // @ts-expect-error - TS2345 - Argument of type 'FocusPath' is not assignable to parameter of type 'List<any>'.
@@ -20458,7 +20579,7 @@ class Renderer extends React.Component {
       const widget = this.getWidgetInstance(widgetId);
 
       // Widget handles parsing of the interWidgetPath.
-      widget == null || widget.setInputValue == null || widget.setInputValue(interWidgetPath, newValue, focus);
+      widget == null || widget.setInputValue == null || widget.setInputValue(interWidgetPath, newValue, cb);
     };
     /**
      * Returns an array of all widget IDs in the order they occur in
@@ -20467,12 +20588,20 @@ class Renderer extends React.Component {
     this.getWidgetIds = () => {
       return this.widgetIds;
     };
+    /**
+     * @deprecated use scorePerseusItem
+     */
+    this.guessAndScore = () => {
+      const totalGuess = this.getUserInput();
+      const totalScore = this.score();
+      return [totalGuess, totalScore];
+    };
     this.examples = () => {
       const widgetIds = this.widgetIds;
-      const examples = _.compact(_.map(widgetIds, widgetId => {
+      const examples = widgetIds.map(widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         return widget != null && widget.examples ? widget.examples() : null;
-      }));
+      }).filter(Boolean);
 
       // no widgets with examples
       if (!examples.length) {
@@ -20671,6 +20800,12 @@ class Renderer extends React.Component {
       isLastUsedWidget: widgetId === this.state.lastUsedWidgetId
     });
   }
+  /**
+   * Returns an array of widget ids that are empty (meaning widgets where the
+   * learner has not interacted with the widget yet or has not filled in all
+   * fields).  For example, the `interactive-graph` widget is considered
+   * empty if the graph is in the starting state.
+   */
   emptyWidgets() {
     return emptyWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
   }
@@ -20727,27 +20862,15 @@ class Renderer extends React.Component {
   }
 
   /**
-   * Returns an object mapping from widget ID to perseus-style score.
-   * The keys of this object are the values of the array returned
-   * from `getWidgetIds`.
-   */
-  scoreWidgets() {
-    return scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
-  }
-
-  /**
-   * Grades the content.
+   * Scores the content.
+   *
+   * @deprecated use scorePerseusItem
    */
   score() {
-    const scores = this.scoreWidgets();
+    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
     const combinedScore = Util.flattenScores(scores);
     return combinedScore;
   }
-  guessAndScore() {
-    const totalGuess = this.getUserInput();
-    const totalScore = this.score();
-    return [totalGuess, totalScore];
-  }
   render() {
     const apiOptions = this.getApiOptions();
     if (this.reuseMarkdown) {
@@ -20947,6 +21070,7 @@ class TextInput extends React.Component {
       value: formattedValue,
       type: "text",
       "aria-label": labelText,
+      "aria-describedby": this.props["aria-describedby"],
       onChange: value => this.props.onChange(value),
       placeholder: placeholder,
       onFocus: onFocus,
@@ -21213,6 +21337,7 @@ class Tooltip extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       ref: this.tooltipContainerRef,
       className: "tooltipContainer",
+      role: "tooltip",
       style: {
         position: "absolute",
         // height must start out undefined, not null, so that
@@ -21293,9 +21418,15 @@ class InputWithExamples extends React.Component {
     };
     this._renderInput = () => {
       const id = this._getUniqueId();
+      const ariaId = `aria-for-${id}`;
+      // Generate text from a known set of format options that will read well in a screen reader
+      const examplesAria = this.props.examples.length === 7 ? "" : `${this.props.examples[0]}
+                   ${this.props.examples.slice(1).join(", or\n")}`
+      // @ts-expect-error TS2550: Property replaceAll does not exist on type string.
+      .replaceAll("*", "").replaceAll("$", "").replaceAll("\\ \\text{pi}", " pi").replaceAll("\\ ", " and ");
       const inputProps = {
         id: id,
-        "aria-describedby": id,
+        "aria-describedby": ariaId,
         ref: "input",
         className: this._getInputClassName(),
         labelText: this.props.labelText,
@@ -21311,7 +21442,12 @@ class InputWithExamples extends React.Component {
         autoCorrect: "off",
         spellCheck: "false"
       };
-      return /*#__PURE__*/React.createElement(TextInput, inputProps);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, inputProps), /*#__PURE__*/React.createElement("span", {
+        id: ariaId,
+        style: {
+          display: "none"
+        }
+      }, examplesAria));
     };
     this._handleFocus = () => {
       this.props.onFocus();
@@ -21353,8 +21489,12 @@ class InputWithExamples extends React.Component {
   }
   render() {
     const input = this._renderInput();
-    const examplesContent = _.map(this.props.examples, example => {
-      return "- " + example;
+    const examplesContent = this.props.examples.length <= 2 ? this.props.examples.join(" ") // A single item (with or without leading text) is not a "list"
+    : this.props.examples // 2 or more items should display as a list
+    .map((example, index) => {
+      // If the first example is bold, then it is most likely a heading/leading text.
+      // So, it shouldn't be part of the list.
+      return index === 0 && example.startsWith("**") ? `${example}\n` : `- ${example}`;
     }).join("\n");
     const showExamples = this.props.shouldShowExamples && this.state.showExamples;
     return /*#__PURE__*/React.createElement(Tooltip, {
@@ -22028,7 +22168,7 @@ function scoreNumericInput(userInput, rubric, strings) {
   // We may have received TeX; try to parse it before grading.
   // If `currentValue` is not TeX, this should be a no-op.
   const currentValue = ParseTex(userInput.currentValue);
-  const normalizedAnswerExpected = rubric.answers.filter(answer => answer.status === "correct").every(answer => Math.abs(answer.value) <= 1);
+  const normalizedAnswerExpected = rubric.answers.filter(answer => answer.status === "correct").every(answer => answer.value !== undefined && Math.abs(answer.value) <= 1);
 
   // The coefficient is an attribute of the widget
   let localValue = currentValue;
@@ -22089,7 +22229,8 @@ class NumericInput extends React.Component {
     this.state = {
       // keeps track of the other set of values when switching
       // between 0 and finite solutions
-      previousValues: [""]
+      previousValues: [""],
+      isFocused: false
     };
     // TODO(Nicole, Jeremy): This is maybe never used and should be removed
     this.examples = () => {
@@ -22152,9 +22293,19 @@ class NumericInput extends React.Component {
     };
     this._handleFocus = () => {
       this.props.onFocus([]);
+      this.setState(currentState => {
+        return _extends({}, currentState, {
+          isFocused: true
+        });
+      });
     };
     this._handleBlur = () => {
       this.props.onBlur([]);
+      this.setState(currentState => {
+        return _extends({}, currentState, {
+          isFocused: false
+        });
+      });
     };
   }
   static getUserInputFromProps(props) {
@@ -22197,13 +22348,20 @@ class NumericInput extends React.Component {
     // component.
     const styles = StyleSheet.create({
       input: {
+        borderRadius: "3px",
+        borderWidth: this.state.isFocused ? "2px" : "1px",
+        display: "inline-block",
+        fontFamily: `Symbola, "Times New Roman", serif`,
+        fontSize: "18px",
+        height: "32px",
+        lineHeight: "18px",
+        padding: this.state.isFocused ? "4px" : "4px 5px",
+        // account for added focus border thickness
         textAlign: this.props.rightAlign ? "right" : "left",
-        width: this.props.size === "small" ? 40 : 80,
-        padding: 0,
-        height: "auto"
+        width: this.props.size === "small" ? 40 : 80
       }
     });
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputWithExamples, {
+    return /*#__PURE__*/React.createElement(InputWithExamples, {
       ref: ref => this.inputRef = ref,
       value: this.props.currentValue,
       onChange: this.handleChange,
@@ -22215,7 +22373,7 @@ class NumericInput extends React.Component {
       id: this.props.widgetId,
       disabled: this.props.apiOptions.readOnly,
       style: styles.input
-    }));
+    });
   }
 }
 
@@ -27111,8 +27269,8 @@ var Definition$1 = {
   scorer: () => scoreNoop()
 };
 
-// The props are type `any` on purpose so that this can receive props
-// from any deprecated widget
+// There are no required props, but this component can receive props from any
+// deprecated widget
 class DeprecatedStandin extends React__default.Component {
   constructor(...args) {
     super(...args);
@@ -29222,6 +29380,13 @@ const getPromptJSON$f = rendererJSON => {
   });
 };
 
+// The `group` widget is basically a widget hosting a full Perseus system in
+// it. As such, scoring a group means scoring all widgets it contains.
+function scoreGroup(userInput, options, strings, locale) {
+  const scores = scoreWidgetsFunctional(options.widgets, Object.keys(options.widgets), userInput, strings, locale);
+  return Util.flattenScores(scores);
+}
+
 // exports has no 'transform'
 
 class Group extends React.Component {
@@ -29327,6 +29492,9 @@ class Group extends React.Component {
         this.change("widgets", this.rendererRef.props.widgets);
       }
     };
+
+    // TODO(LEMS-2391): replace this when there's a separate check
+    // for valid/invalid state
     const score = (_this$rendererRef12 = this.rendererRef) == null ? void 0 : _this$rendererRef12.score();
     const isValid = score && score.type !== "invalid";
     const isInvalid = score && score.type === "invalid";
@@ -29373,6 +29541,9 @@ var Group$1 = {
   displayName: "Group (SAT only)",
   widget: Group,
   traverseChildWidgets: traverseChildWidgets,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
+  scorer: scoreGroup,
   hidden: true,
   isLintable: true
 };
@@ -32082,6 +32253,61 @@ const LegacyGrid = ({
 
 // Range is replaced within this file with Interval, but it is used elsewhere
 // and exported from the package, so we need to keep it around.
+/**
+ * Our core set of Perseus widgets.
+ *
+ * This interface is the basis for "registering" all Perseus widget types.
+ * There should be one key/value pair for each supported widget. If you create
+ * a new widget, an entry should be added to this interface. Note that this
+ * only registers the widget options type, you'll also need to register the
+ * widget so that it's available at runtime (@see
+ * {@link file://./widgets.ts#registerWidget}).
+ *
+ * Importantly, the key should be the name that is used in widget IDs. For most
+ * widgets that is the same as the widget option's `type` field. In cases where
+ * a widget has been deprecated and replaced with the deprecated-standin
+ * widget, it should be the original widget type!
+ *
+ * If you define the widget outside of this package, you can still add the new
+ * widget to this interface by writing the following in that package that
+ * contains the widget. TypeScript will merge that definition of the
+ * `PerseusWidgets` with the one defined below.
+ *
+ * ```typescript
+ * declare module "@khanacademy/perseus" {
+ *     interface PerseusWidgetTypes {
+ *         // A new widget
+ *         "new-awesomeness": MyAwesomeNewWidget;
+ *
+ *         // A deprecated widget
+ *         "super-old-widget": AutoCorrectWidget;
+ *     }
+ * }
+ *
+ * // The new widget's options definition
+ * type MyAwesomeNewWidget = WidgetOptions<'new-awesomeness', MyAwesomeNewWidgetOptions>;
+ *
+ * // The deprecated widget's options definition
+ * type SuperOldWidget = WidgetOptions<'super-old-widget', object>;
+ * ```
+ *
+ * This interface can be extended through the magic of TypeScript "Declaration
+ * merging". Specifically, we augment this module and extend this interface.
+ *
+ * @see {@link https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation}
+ */
+/**
+ * A map of widget IDs to widget options. This is most often used as the type
+ * for a set of widgets defined in a `PerseusItem` but can also be useful to
+ * represent a function parameter where only `widgets` from a `PerseusItem` are
+ * needed. Today Widget IDs are made up of the widget type and an incrementing
+ * integer (eg. `interactive-graph 1` or `radio 3`). It is suggested to avoid
+ * reading/parsing the widget id to derive any information from it, except in
+ * the case of this map.
+ *
+ * @see {@link PerseusWidgetTypes} additional widgets can be added to this map type
+ * by augmenting the PerseusWidgetTypes with new widget types!
+ */
 /**
  * A "PerseusItem" is a classic Perseus item. It is rendered by the
  * `ServerItemRenderer` and the layout is pre-set.
@@ -32097,6 +32323,9 @@ const LegacyGrid = ({
  * A "MultiItem" is an advanced Perseus item. It is rendered by the
  * `MultiRenderer` and you can control the layout of individual parts of the
  * item.
+ *
+ * @deprecated MultiItem support is slated for removal in a future Perseus
+ * release.
  */
 const ItemExtras = [
 // The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
@@ -32118,6 +32347,11 @@ const ItemExtras = [
 // The user might benefit from using a statistics Z Table like https://www.ztable.net/
 "zTable"];
 
+/**
+ * The type representing the common structure of all widget's options. The
+ * `Options` generic type represents the widget-specific option data.
+ */
+
 // prettier-ignore
 
 // prettier-ignore
@@ -32186,7 +32420,9 @@ const ItemExtras = [
 
 //prettier-ignore
 
-// A background image applied to various widgets.
+/**
+ * A background image applied to various widgets.
+ */
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 
@@ -36754,8 +36990,6 @@ const makeInvalidTypeError = (functionName, graphType) => {
   });
 };
 
-// There's no transform function in exports
-
 // TODO: there's another, very similar getSinusoidCoefficients function
 // they should probably be merged
 function getSinusoidCoefficients(coords) {
@@ -41891,23 +42125,37 @@ const getPromptJSON$6 = (renderProps, userInput) => {
   };
 };
 
-function scoreNumberLine(state, rubric) {
-  const range = rubric.range;
-  const divisionRange = state.divisionRange;
-  const start = rubric.initialX != null ? rubric.initialX : range[0];
-  const startRel = rubric.isInequality ? "ge" : "eq";
-  const correctRel = rubric.correctRel || "eq";
-  const correctPos = number$1.equal(state.numLinePosition, rubric.correctX || 0);
-  const outsideAllowedRange = state.numDivisions > divisionRange[1] || state.numDivisions < divisionRange[0];
+/**
+ * Checks user input is within the allowed range and not the same as the initial
+ * state.
+ * @param userInput
+ * @see 'scoreNumberLine' for the scoring logic.
+ */
+function validateNumberLine(userInput) {
+  const divisionRange = userInput.divisionRange;
+  const outsideAllowedRange = userInput.numDivisions > divisionRange[1] || userInput.numDivisions < divisionRange[0];
 
   // TODO: I don't think isTickCrtl is a thing anymore
-  if (state.isTickCrtl && outsideAllowedRange) {
+  if (userInput.isTickCrtl && outsideAllowedRange) {
     return {
       type: "invalid",
       message: "Number of divisions is outside the allowed range."
     };
   }
-  if (correctPos && correctRel === state.rel) {
+  return null;
+}
+
+function scoreNumberLine(userInput, scoringData) {
+  const validationError = validateNumberLine(userInput);
+  if (validationError) {
+    return validationError;
+  }
+  const range = scoringData.range;
+  const start = scoringData.initialX != null ? scoringData.initialX : range[0];
+  const startRel = scoringData.isInequality ? "ge" : "eq";
+  const correctRel = scoringData.correctRel || "eq";
+  const correctPos = number$1.equal(userInput.numLinePosition, scoringData.correctX || 0);
+  if (correctPos && correctRel === userInput.rel) {
     return {
       type: "points",
       earned: 1,
@@ -41915,7 +42163,7 @@ function scoreNumberLine(state, rubric) {
       message: null
     };
   }
-  if (state.numLinePosition === start && state.rel === startRel) {
+  if (userInput.numLinePosition === start && userInput.rel === startRel) {
     // We're where we started.
     return {
       type: "invalid",
@@ -44861,7 +45109,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "44.0.0";
+const libVersion = "45.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45469,14 +45717,10 @@ class ServerItemRenderer extends React.Component {
     });
   }
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.apiOptions.answerableCallback) {
+    const answerableCallback = this.props.apiOptions.answerableCallback;
+    if (answerableCallback != null) {
       const isAnswerable = this.questionRenderer.emptyWidgets().length === 0;
-      const {
-        answerableCallback
-      } = this.props.apiOptions;
-      if (answerableCallback) {
-        answerableCallback(isAnswerable);
-      }
+      answerableCallback(isAnswerable);
     }
     if (!this._fullyRendered) {
       const assetsLoaded = Object.values(this.state.assetStatuses).every(Boolean);
@@ -45485,6 +45729,13 @@ class ServerItemRenderer extends React.Component {
         this.props.onRendered(true);
       }
     }
+    if (this.props.score && this.props.score !== prevProps.score) {
+      const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
+      this.setState({
+        questionCompleted: this.props.score.correct,
+        questionHighlightedWidgets: emptyQuestionAreaWidgets
+      });
+    }
   }
   componentWillUnmount() {
     if (this.blurTimeoutID != null) {
@@ -45602,18 +45853,37 @@ class ServerItemRenderer extends React.Component {
     return this.questionRenderer.getPromptJSON();
   }
 
+  /**
+   * Returns an array of the widget `.getUserInput()` results
+   *
+   * TODO: can we remove this? Seems to be just for backwards
+   * compatibility with old Perseus Chrome logging
+   * @deprecated use getUserInput
+   */
+  getUserInputLegacy() {
+    return this.questionRenderer.getUserInput();
+  }
+
+  /**
+   * Returns an object of the widget `.getUserInput()` results
+   */
+  getUserInput() {
+    return this.questionRenderer.getUserInputMap();
+  }
+
   /**
    * Grades the item.
+   *
+   * @deprecated use scorePerseusItem
    */
   scoreInput() {
-    const guessAndScore = this.questionRenderer.guessAndScore();
-    const guess = guessAndScore[0];
-    const score = guessAndScore[1];
+    const guess = this.getUserInput();
+    const score = scorePerseusItem(this.props.item.question, guess, this.context.strings, this.context.locale);
 
     // Continue to include an empty guess for the now defunct answer area.
     // TODO(alex): Check whether we rely on the format here for
     //             analyzing ProblemLogs. If not, remove this layer.
-    const maxCompatGuess = [guess, []];
+    const maxCompatGuess = [this.questionRenderer.getUserInput(), []];
     const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
     const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
     this.setState({
@@ -45793,7 +46063,7 @@ const traverseRenderer$1 = function traverseRenderer(rendererOptions, contentCal
       newContent = modifiedContent;
     }
   }
-  const newWidgets = objective_.mapObject(rendererOptions.widgets || {}, function (widgetInfo, widgetId) {
+  const newWidgets = mapObject(rendererOptions.widgets || {}, function (widgetInfo, widgetId) {
     // Widgets without info or a type are empty widgets, and
     // should always be renderable. It's also annoying to write
     // checks for this everywhere, so we just filter them out once and
@@ -47461,140 +47731,6 @@ const registerAllWidgetsForTesting = () => {
   replaceDeprecatedWidgets();
 };
 
-// These are all the current widgets that require user-input and are supported for automatic scoring
-const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
-
-/**
- * Regex for widget placeholders in a string.
- *
- * First capture group is the widget ID (ex. 'radio 1')
- * Second capture group is the widget type (ex. "radio)
- * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
- */
-function getWidgetRegex() {
-  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
-}
-
-/**
- * Add a widget placeholder using the widget ID.
- * ex. addWidget("radio 1") => "[[☃ radio 1]]"
- *
- * @param {string} id
- * @returns {string}
- */
-function addWidget(id) {
-  return `[[☃ ${id}]]`;
-}
-
-/**
- * Get a widget type by a widget's ID
- * (please don't derive type from ID)
- *
- * @param {string} widgetId the ID of the widget
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {string} the widget type (ie "radio")
- */
-function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
-  var _widget$type;
-  const widget = widgetMap[WidgetId];
-  return (_widget$type = widget == null ? void 0 : widget.type) != null ? _widget$type : null;
-}
-
-/**
- * Does the content have a specific type of widget?
- *
- * @param {string} type the type of the widget in question (ie "radio")
- * @param {string} content the string to search through
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {boolean} if the content includes the widget type
- */
-function contentHasWidgetType(type, content, widgetMap) {
-  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
-}
-
-/**
- * Extract all widget IDs, which includes the widget type and instance number.
- * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns {ReadonlyArray<string>} widgetIds
- */
-function getWidgetIdsFromContent(content) {
-  const widgets = [];
-  const localWidgetRegex = getWidgetRegex();
-  let match = localWidgetRegex.exec(content);
-  while (match !== null) {
-    widgets.push(match[1]);
-    match = localWidgetRegex.exec(content);
-  }
-  return widgets;
-}
-
-/**
- * Get a list of widget IDs from content,
- * but only for specific widget types
- *
- * @param {string} type the type of widget (ie "radio")
- * @param {string} content the string to parse
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {ReadonlyArray<string>} the widget type (ie "radio")
- */
-function getWidgetIdsFromContentByType(type, content, widgetMap) {
-  const rv = [];
-  const widgetIdsInContent = getWidgetIdsFromContent(content);
-  widgetIdsInContent.forEach(widgetId => {
-    const widget = widgetMap[widgetId];
-    if ((widget == null ? void 0 : widget.type) === type) {
-      rv.push(widgetId);
-    }
-  });
-  return rv;
-}
-
-/**
- * Pull the widget map out of ItemData
- *
- * @param {PerseusItem} PerseusItem containing a widgetMap
- * @returns {WidgetMap} the widget map in the PerseusItem
- */
-function getWidgetsMapFromItemData(itemData) {
-  return itemData.question.widgets;
-}
-
-/**
- * Get the widget information from a WidgetMap
- *
- * @param {string} widgetId the ID of the widget
- * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
- */
-function getWidgetFromWidgetMap(widgetId, widgetMap) {
-  var _widgetMap$widgetId;
-  return (_widgetMap$widgetId = widgetMap[widgetId]) != null ? _widgetMap$widgetId : null;
-}
-
-/**
- * Get select widgets from a widget map.
- * Useful for multi-items that needs to split
- * one PerseusItem into several
- *
- * @param {ReadonlyArray<string>} widgetIds to extract
- * @param {PerseusWidgetsMap} widgetMap to extract from
- * @return {PerseusWidgetsMap} a new widget map with requested widgets
- */
-function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
-  const widgets = {};
-  widgetIds.forEach(widgetId => {
-    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
-    if (widget) {
-      widgets[widgetId] = widget;
-    }
-  });
-  return widgets;
-}
-
 /**
  * This function extracts the answers from the widgets.
  *
@@ -48526,7 +48662,7 @@ const parseCSProgramWidget = parseWidget(constant("cs-program"), object({
 const parseDefinitionWidget = parseWidget(constant("definition"), object({
   togglePrompt: string,
   definition: string,
-  static: boolean
+  static: defaulted(boolean, () => false)
 }));
 
 const parseDropdownWidget = parseWidget(constant("dropdown"), object({
@@ -48728,15 +48864,26 @@ const parseIframeWidget = parseWidget(constant("iframe"), object({
   static: defaulted(boolean, () => false)
 }));
 
+const stringToNumber = (rawValue, ctx) => {
+  if (typeof rawValue === "number") {
+    return ctx.success(rawValue);
+  }
+  const parsedNumber = +rawValue;
+  if (rawValue === "" || isNaN(parsedNumber)) {
+    return ctx.failure("a number or numeric string", rawValue);
+  }
+  return ctx.success(parsedNumber);
+};
+
+const numericToNumber = pipeParsers(union(number).or(string).parser).then(stringToNumber).parser;
 const parsePerseusImageBackground = object({
   url: optional(nullable(string)),
-  width: optional(number),
-  height: optional(number),
-  top: optional(number),
-  left: optional(number),
-  bottom: optional(number),
-  // TODO(benchristel): convert scale to a number
-  scale: optional(union(number).or(string).parser)
+  width: optional(numericToNumber),
+  height: optional(numericToNumber),
+  top: optional(numericToNumber),
+  left: optional(numericToNumber),
+  bottom: optional(numericToNumber),
+  scale: optional(numericToNumber)
 });
 
 const pairOfNumbers$2 = pair(number, number);
@@ -48755,6 +48902,12 @@ const parseImageWidget = parseWidget(constant("image"), object({
   box: optional(pairOfNumbers$2)
 }));
 
+const booleanToString = (rawValue, ctx) => {
+  if (typeof rawValue === "boolean") {
+    return ctx.success(String(rawValue));
+  }
+  return ctx.failure("boolean", rawValue);
+};
 const parseInputNumberWidget = parseWidget(constant("input-number"), object({
   answerType: optional(enumeration("number", "decimal", "integer", "rational", "improper", "mixed", "percent", "pi")),
   inexact: optional(boolean),
@@ -48762,7 +48915,11 @@ const parseInputNumberWidget = parseWidget(constant("input-number"), object({
   rightAlign: optional(boolean),
   simplify: enumeration("required", "optional", "enforced"),
   size: enumeration("normal", "small"),
-  value: union(number).or(string).parser,
+  // TODO(benchristel): there are some content items where value is a
+  // boolean, even though that makes no sense. We should figure out if
+  // those content items are actually published anywhere, and consider
+  // updating them.
+  value: union(number).or(string).or(booleanToString).parser,
   customKeypad: optional(boolean)
 }));
 
@@ -49060,18 +49217,27 @@ const parseLockedFunctionType = object({
 const parseLockedFigure = union(parseLockedPointType).or(parseLockedLineType).or(parseLockedVectorType).or(parseLockedEllipseType).or(parseLockedPolygonType).or(parseLockedFunctionType).or(parseLockedLabelType).parser;
 const parseInteractiveGraphWidget = parseWidget(constant("interactive-graph"), object({
   step: pairOfNumbers,
-  gridStep: pairOfNumbers,
-  snapStep: pairOfNumbers,
+  // TODO(benchristel): rather than making gridStep and snapStep
+  // optional, we should duplicate the defaulting logic from the
+  // InteractiveGraph component. See parse-perseus-json/README.md for
+  // why.
+  gridStep: optional(pairOfNumbers),
+  snapStep: optional(pairOfNumbers),
   backgroundImage: optional(parsePerseusImageBackground),
   markings: enumeration("graph", "grid", "none"),
-  labels: array(string),
+  labels: optional(array(string)),
   showProtractor: boolean,
   showRuler: optional(boolean),
   showTooltips: optional(boolean),
   rulerLabel: optional(string),
   rulerTicks: optional(number),
   range: pair(pairOfNumbers, pairOfNumbers),
-  graph: parsePerseusGraphType,
+  // NOTE(benchristel): I copied the default graph from
+  // interactive-graph.tsx. See the parse-perseus-json/README.md for
+  // an explanation of why we want to duplicate the default here.
+  graph: defaulted(parsePerseusGraphType, () => ({
+    type: "linear"
+  })),
   correct: parsePerseusGraphType,
   // TODO(benchristel): default lockedFigures to empty array
   lockedFigures: optional(array(parseLockedFigure)),
@@ -49139,7 +49305,10 @@ const parseNumberLineWidget = parseWidget(constant("number-line"), object({
   isTickCtrl: optional(nullable(boolean)),
   divisionRange: array(number),
   numDivisions: optional(nullable(number)),
-  snapDivisions: number,
+  // NOTE(benchristel): I copied the default snapDivisions from
+  // number-line.tsx. See the parse-perseus-json/README.md for
+  // an explanation of why we want to duplicate the default here.
+  snapDivisions: defaulted(number, () => 2),
   tickStep: optional(nullable(number)),
   correctRel: optional(nullable(string)),
   correctX: number,
@@ -49152,18 +49321,18 @@ const parseMathFormat = enumeration("integer", "mixed", "improper", "proper", "d
 const parseNumericInputWidget = parseWidget(constant("numeric-input"), object({
   answers: array(object({
     message: string,
-    value: number,
+    value: optional(number),
     status: string,
     answerForms: optional(array(parseMathFormat)),
     strict: boolean,
     maxError: optional(nullable(number)),
     simplify: optional(nullable(string))
   })),
-  labelText: string,
+  labelText: optional(string),
   size: string,
   coefficient: boolean,
   rightAlign: optional(boolean),
-  static: boolean,
+  static: defaulted(boolean, () => false),
   answerForms: optional(array(object({
     name: parseMathFormat,
     simplify: optional(nullable(enumeration("required", "correct", "enforced", "optional")))
@@ -49176,12 +49345,18 @@ const parseNumericInputWidget = parseWidget(constant("numeric-input"), object({
 function parseRenderer(rawValue, ctx) {
   return parsePerseusRenderer(rawValue, ctx);
 }
+const largeToAuto = (height, ctx) => {
+  if (height === "large") {
+    return ctx.success("auto");
+  }
+  return ctx.success(height);
+};
 const parseOrdererWidget = parseWidget(constant("orderer"), object({
-  options: array(parseRenderer),
+  options: defaulted(array(parseRenderer), () => []),
   correctOptions: array(parseRenderer),
   otherOptions: array(parseRenderer),
-  height: enumeration("normal", "auto"),
-  layout: enumeration("horizontal", "vertical")
+  height: pipeParsers(enumeration("normal", "auto", "large")).then(largeToAuto).parser,
+  layout: defaulted(enumeration("horizontal", "vertical"), () => "horizontal")
 }));
 
 const parsePassageRefWidget = parseWidget(constant("passage-ref"), object({
@@ -49195,7 +49370,7 @@ const parsePassageWidget = parseWidget(constant("passage"), object({
   passageText: string,
   passageTitle: string,
   showLineNumbers: boolean,
-  static: boolean
+  static: defaulted(boolean, () => false)
 }));
 
 const parsePhetSimulationWidget = parseWidget(constant("phet-simulation"), object({
@@ -49216,7 +49391,10 @@ const parsePlotterWidget = parseWidget(constant("plotter"), object({
   picUrl: optional(nullable(string)),
   picSize: optional(nullable(number)),
   picBoxHeight: optional(nullable(number)),
-  plotDimensions: array(number)
+  // NOTE(benchristel): I copied the default plotDimensions from
+  // plotter.tsx. See the parse-perseus-json/README.md for an explanation
+  // of why we want to duplicate the defaults here.
+  plotDimensions: defaulted(array(number), () => [380, 300])
 }));
 
 const parsePythonProgramWidget = parseWidget(constant("python-program"), object({
@@ -49368,6 +49546,10 @@ const parseWidgetsMapEntry = ([key, widget], widgetMap, ctx) => {
       return parseAndAssign(`table ${id}`, parseTableWidget);
     case "video":
       return parseAndAssign(`video ${id}`, parseVideoWidget);
+    case "sequence":
+      // sequence is a deprecated widget type, and the corresponding
+      // widget component no longer exists.
+      return parseAndAssign(`sequence ${id}`, parseDeprecatedWidget);
     default:
       if (getWidget(type)) {
         // @ts-expect-error - 'type' is not a valid widget type
@@ -49376,6 +49558,11 @@ const parseWidgetsMapEntry = ([key, widget], widgetMap, ctx) => {
       return ctx.failure("a valid widget type", type);
   }
 };
+const parseDeprecatedWidget = parseWidget(
+// Ignore the incoming widget type and hardcode "deprecated-standin"
+(_, ctx) => ctx.success("deprecated-standin"),
+// Allow any widget options
+object({}));
 const parseStringToPositiveInt = (rawValue, ctx) => {
   if (typeof rawValue !== "string" || !/^[1-9][0-9]*$/.test(rawValue)) {
     return ctx.failure("numeric string", rawValue);
@@ -49651,5 +49838,5 @@ const GrapherUtil = {
   typeToButton
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map