@khanacademy/perseus 42.0.3 → 43.0.1

package/dist/es/index.js

@@ -22,8 +22,7 @@ import PropTypes from 'prop-types';
 import { number as number$1, point, vector as vector$1, line } from '@khanacademy/kmath';
 import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
-import SimpleMarkdown$1 from '@khanacademy/simple-markdown';
-import * as SimpleMarkdown from '@khanacademy/pure-markdown';
+import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
 import { TextField } from '@khanacademy/wonder-blocks-form';
 import Button from '@khanacademy/wonder-blocks-button';
@@ -33,7 +32,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, Text as Text$1, useTransformContext, Mafs } from 'mafs';
+import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, Text as Text$1, useTransformContext, Polyline, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { useDrag } from '@use-gesture/react';
@@ -240,6 +239,8 @@ const mockStrings = {
   addPoint: "Add Point",
   removePoint: "Remove Point",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+  closePolygon: "Close shape",
+  openPolygon: "Re-open shape",
   srPointAtCoordinates: ({
     num,
     x,
@@ -370,7 +371,10 @@ class InnerMathInput extends React.Component {
           locale
         } = this.context;
         // Initialize MathQuill.MathField instance
-        this.__mathField = createMathField(this.__mathFieldWrapperRef, locale, this.props.mathInputStrings, baseConfig => _extends({}, baseConfig, {
+        this.__mathField = createMathField(this.__mathFieldWrapperRef, locale, this.props.mathInputStrings,
+        // TODO(LEMS-2656): remove TS suppression
+        // @ts-expect-error: Type 'EditableMathQuill' is not assignable to type 'MathFieldInterface'.
+        baseConfig => _extends({}, baseConfig, {
           handlers: {
             edit: debounce(mathField => {
               // This handler is guaranteed to be called on change, but
@@ -2134,6 +2138,24 @@ const KhanAnswerTypes = {
   }
 };
 
+/**
+ * Checks user input from the expression widget to see if it is scorable.
+ *
+ * Note: Most of the expression widget's validation requires the Rubric because
+ * of its use of KhanAnswerTypes as a core part of scoring.
+ *
+ * @see `scoreExpression()` for more details.
+ */
+function validateExpression(userInput) {
+  if (userInput === "") {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  return null;
+}
+
 /* Content creators input a list of answers which are matched from top to
  * bottom. The intent is that they can include spcific solutions which should
  * be graded as correct or incorrect (or ungraded!) first, then get more
@@ -2153,6 +2175,10 @@ const KhanAnswerTypes = {
  * - Otherwise, pass through the resulting points and message.
  */
 function scoreExpression(userInput, rubric, strings, locale) {
+  const validationError = validateExpression(userInput);
+  if (validationError) {
+    return validationError;
+  }
   const options = _.clone(rubric);
   _.extend(options, {
     decimal_separator: getDecimalSeparator(locale)
@@ -2405,11 +2431,16 @@ class Expression extends React.Component {
   getPromptJSON() {
     return getPromptJSON$t(this.props, this.getUserInput());
   }
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'FocusPath' is not assignable to type 'InputPath'.
   focusInputPath(inputPath) {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
     this.refs.input.focus();
   }
+
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'FocusPath' is not assignable to type 'InputPath'.
   blurInputPath(inputPath) {
     var _this$refs$input;
     // eslint-disable-next-line react/no-string-refs
@@ -2592,7 +2623,7 @@ const keypadConfigurationForProps = widgetOptions => {
     times: widgetOptions.times
   };
 };
-const propUpgrades$3 = {
+const propUpgrades$2 = {
   /* c8 ignore next */
   "1": v0props => ({
     times: v0props.times,
@@ -2652,10 +2683,14 @@ var Expression$1 = {
     major: 1,
     minor: 0
   },
-  propUpgrades: propUpgrades$3,
+  propUpgrades: propUpgrades$2,
   // For use by the editor
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusExpressionUserInput'.
   scorer: scoreExpression,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusExpressionRubric'.
   getOneCorrectAnswerFromRubric(rubric) {
     const correctAnswers = (rubric.answerForms || []).filter(answerForm => answerForm.considered === "correct");
     if (correctAnswers.length === 0) {
@@ -2738,6 +2773,8 @@ const nestedMap$2 = function nestedMap(children, func, context) {
       return nestedMap(child, func);
     });
   }
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: T | ReadonlyArray<T> is not assignable to T
   return func.call(context, children);
 };
 
@@ -14489,7 +14526,9 @@ const constraints$2 = {
       });
 
       // bound the delta by the calculated bounds
-      const boundedDelta = _.reduce(deltaBounds, function (delta, bound) {
+      const boundedDelta = _.reduce(deltaBounds,
+      // @ts-expect-error: Type 'number[]' is not assignable to type 'Coord'.
+      function (delta, bound) {
         const lower = bound[0];
         const upper = bound[1];
         const deltaX = Math.max(lower[0], Math.min(upper[0], delta[0]));
@@ -15020,6 +15059,7 @@ const constraints$1 = {
     };
   },
   snap: function (snap) {
+    // @ts-expect-error: Type 'boolean | Coord' is not assignable to type 'Coord'.
     return function (coord) {
       if (snap === null) {
         // TODO(benchristel), NOTE(kevinb): this should probably return
@@ -15042,6 +15082,8 @@ const constraints$1 = {
         return optionalPaddingPx;
       }
     })();
+
+    // @ts-expect-error: Type 'boolean | Coord' is not assignable to type 'Coord'.
     return function (coord, prev, options) {
       const graphie = this.graphie;
       range = range || graphie.range;
@@ -15932,15 +15974,15 @@ const constraints = {
       });
 
       // bound the delta by the calculated bounds
-      const boundedDelta = _.reduce(deltaBounds, function (delta, bound) {
+      const boundedDelta = _.reduce(deltaBounds,
+      // @ts-expect-error - TS2345 - Type 'number[]' is not assignable to type 'Coord'.
+      function (delta, bound) {
         const lower = bound[0];
         const upper = bound[1];
         const deltaX = Math.max(lower[0], Math.min(upper[0], delta[0]));
         const deltaY = Math.max(lower[1], Math.min(upper[1], delta[1]));
         return [deltaX, deltaY];
       }, delta);
-
-      // @ts-expect-error - TS2322 - Type 'number[]' is not assignable to type 'Coord'.
       return vector$1.add(prevCoord, boundedDelta);
     };
   }
@@ -16826,6 +16868,7 @@ class ImageLoader extends React.Component {
 
       this.img = new Image();
       this.img.onload = this.handleLoad;
+      // @ts-expect-error: Type 'string | Event' is not assignable to type 'Event'.
       this.img.onerror = this.handleError;
       this.img.src = this.props.src;
     };
@@ -17916,6 +17959,7 @@ class InteractionTracker {
       this.widgetType = widgetType;
       this.widgetID = widgetID;
       this.setting = setting;
+      // @ts-expect-error: Type 'T | undefined' is not assignable to type 'T'.
       this.track = this._track;
     }
   }
@@ -17926,7 +17970,7 @@ class InteractionTracker {
  */
 const arrayRules = {
   fence: {
-    match: SimpleMarkdown$1.defaultRules.fence.match,
+    match: SimpleMarkdown.defaultRules.fence.match,
     order: 1,
     parse: (capture, state, parse) => ({
       type: "codeBlock",
@@ -17935,14 +17979,14 @@ const arrayRules = {
     })
   },
   paragraph: {
-    match: SimpleMarkdown$1.defaultRules.paragraph.match,
+    match: SimpleMarkdown.defaultRules.paragraph.match,
     order: 2,
     parse: (capture, state, parse) => ({
       content: capture[1]
     })
   }
 };
-const builtArrayParser = SimpleMarkdown$1.parserFor(arrayRules);
+const builtArrayParser = SimpleMarkdown.parserFor(arrayRules);
 
 // This should just return an array of strings! magick!
 const parseToArray = source => {
@@ -18367,7 +18411,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
   // iOS 14.4, in order for VoiceOver to work.
   table: _extends({}, pureMarkdownRules.table, {
     react: function (node, output, state) {
-      const table = SimpleMarkdown$1.defaultRules.table.react(node, output, state);
+      const table = SimpleMarkdown.defaultRules.table.react(node, output, state);
       if (!state.isMobile) {
         return table;
       }
@@ -18416,7 +18460,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
           contents = rules$1.lint.react(node.table, output, state);
         }
       } else {
-        const tableOutput = SimpleMarkdown$1.defaultRules.table.react(node.table, output, state);
+        const tableOutput = SimpleMarkdown.defaultRules.table.react(node.table, output, state);
         const caption = /*#__PURE__*/React.createElement("caption", {
           key: "caption",
           className: "perseus-table-title"
@@ -18486,7 +18530,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
   // window and handle reverse tabnapping phishing attacks
   link: _extends({}, pureMarkdownRules.link, {
     react: function (node, output, state) {
-      const link = SimpleMarkdown$1.defaultRules.link.react(node, output, state);
+      const link = SimpleMarkdown.defaultRules.link.react(node, output, state);
       const href = link.props.href;
       let rel = null;
       // The href prop should always be here, but just in case somehow the article's
@@ -18519,7 +18563,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
           className: "perseus-markdown-alt perseus-sr-only"
         }, output(node.content, state));
       }
-      return SimpleMarkdown$1.defaultRules.codeBlock.react(node, output, state);
+      return SimpleMarkdown.defaultRules.codeBlock.react(node, output, state);
     }
   }),
   // The lint rule never actually matches anything.
@@ -18561,7 +18605,7 @@ const inlineNodeTypes = {
 };
 
 // @ts-expect-error - TS2345 - Argument of type '{ readonly columns: { readonly react: (node: any, output: any, state: any) => Element; readonly order: -2; readonly match: any; readonly parse: (capture: any, parse: any, state: any) => any; }; ... 35 more ...; readonly text: TextInOutRule; }' is not assignable to parameter of type 'ParserRules'.
-const builtParser$1 = SimpleMarkdown$1.parserFor(rules$1);
+const builtParser$1 = SimpleMarkdown.parserFor(rules$1);
 const parse$3 = (source, state) => {
   const paragraphedSource = source + "\n\n";
   return builtParser$1(paragraphedSource, _extends({}, state, {
@@ -18654,10 +18698,10 @@ var PerseusMarkdown = {
   traverseContent: traverseContent,
   parse: parse$3,
   parseInline: inlineParser,
-  reactFor: SimpleMarkdown$1.reactFor,
-  ruleOutput: SimpleMarkdown$1.ruleOutput(rules$1, "react"),
-  basicOutput: SimpleMarkdown$1.reactFor(SimpleMarkdown$1.ruleOutput(rules$1, "react")),
-  sanitizeUrl: SimpleMarkdown$1.sanitizeUrl
+  reactFor: SimpleMarkdown.reactFor,
+  ruleOutput: SimpleMarkdown.ruleOutput(rules$1, "react"),
+  basicOutput: SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules$1, "react")),
+  sanitizeUrl: SimpleMarkdown.sanitizeUrl
 };
 
 class QuestionParagraph extends React.Component {
@@ -18674,337 +18718,6 @@ class QuestionParagraph extends React.Component {
   }
 }
 
-// Methods to convert input-number widgets to numeric-input widgets
-
-const inputNumberToNumericInput = json => {
-  // First we need to create a map of the old input-number keys to the new numeric-input keys
-  // so that we can ensure we update the content and widgets accordingly
-  const renameMap = getInputNumberRenameMap(json);
-
-  // Then we can use this to update the JSON
-  return convertInputNumberJson(json, renameMap);
-};
-
-// We need to be able to run this code recursively in order to convert nested input-number widgets
-const convertInputNumberJson = (json, renameMap) => {
-  const updatedContent = convertDeprecatedWidgetsInContent(json, renameMap);
-  const updatedWidgets = convertInputNumberWidgetOptions(json, renameMap);
-  const modernizedJson = _extends({}, json, {
-    content: updatedContent,
-    widgets: updatedWidgets
-  });
-  return modernizedJson;
-};
-
-// Convert the input-number json in the widgets of a PerseusRenderer object
-const convertInputNumberWidgetOptions = (json, renameMap) => {
-  const widgets = _extends({}, json.widgets);
-  // The question.widgets is a dictionary map of widgets, so we need to loop through in order to convert input-number to numeric-input
-  // which can exist as both the key or as a value on widget.type.
-  for (const key of Object.keys(widgets)) {
-    // Loop through the keys of the widgets dictionary
-    if (widgets[key].options.widgets) {
-      widgets[key].options = _extends({}, inputNumberToNumericInput(widgets[key].options));
-    }
-    // Check if the widget is an input-number
-    if (widgets[key].type === "input-number") {
-      // If the answerType is not number or percent, we need to provide
-      // the answer form for the numeric-input widget
-      const provideAnswerForm = widgets[key].options.answerType !== "number" && widgets[key].options.answerType !== "percent";
-      // We need to determine the mathFormat for the numeric-input widget
-      const mathFormat = widgets[key].options.answerType === "rational" ? "proper" // input-number uses "rational" for proper fractions
-      : widgets[key].options.answerType; // Otherwise, we can use the answerType directly
-
-      // We need to update the answers prop to match the numeric-input widget format
-      const answers = [{
-        value: widgets[key].options.value,
-        simplify: widgets[key].options.simplify,
-        // Input Number doesn't have a strict prop, so we default to false
-        strict: false,
-        // We only want to set maxError if the inexact prop is true
-        maxError: widgets[key].options.inexact ? widgets[key].options.maxError : 0,
-        status: "correct",
-        // Input-number only allows correct answers
-        message: ""
-      }];
-
-      // Add the required answerForms if provided/applicable
-      if (provideAnswerForm) {
-        answers[0].answerForms = [mathFormat];
-      }
-
-      // Update the options prop to match the numeric-input widget format
-      const upgradedWidgetOptions = {
-        answers,
-        size: widgets[key].options.size,
-        coefficient: false,
-        // input-number doesn't have a coefficient prop
-        labelText: "",
-        // input-number doesn't have a labelText prop
-        static: false,
-        // static is always false for numeric-input
-        rightAlign: widgets[key].options.rightAlign || false
-      };
-      const upgradedWidget = {
-        options: upgradedWidgetOptions,
-        type: "numeric-input"
-      };
-      const newWidgetName = renameMap[key];
-      // Create the new key entry
-      widgets[newWidgetName] = upgradedWidget;
-
-      // We need to delete the old widget key
-      delete widgets[key];
-    }
-  }
-  return widgets;
-};
-
-// Convert the deprecated widget refs in the content string
-// of a PerseusRenderer object to their renamed equivalents
-const convertDeprecatedWidgetsInContent = (json, renameMap) => {
-  return Object.keys(renameMap).reduce((newContent, oldKey) => {
-    const newKey = renameMap[oldKey];
-    return newKey ? newContent.replace(oldKey, newKey) : newContent;
-  }, json.content);
-};
-
-// Create a map of the old input-number keys to the new numeric-input keys
-const getInputNumberRenameMap = json => {
-  const numericRegex = /(?<=\[\[\u2603 )(numeric-input \d+)(?=\]\])/g;
-  const inputNumberRegex = /(?<=\[\[\u2603 )(input-number \d+)(?=\]\])/g;
-
-  // Get all the content strings within the json, which might be nested within widgets
-  const allContentStrings = json.content;
-
-  // Loop through the content strings to get all the input-number widgets
-  const renameMap = {};
-  const inputNumberMatches = [...(allContentStrings.match(inputNumberRegex) || [])];
-
-  // We want to count any pre-existing numeric-input widgets
-  // so that we can start the new ids at the next number
-  const numericMatches = [...(allContentStrings.match(numericRegex) || [])];
-  let currentNumericCount = numericMatches.reduce((count, match) => {
-    const id = parseInt(match.split(" ")[1], 10);
-    return id >= count ? id + 1 : count; // We want to start at the next highest number
-  }, 1);
-
-  // Now that we have all the necessary information, we can create the renameMap
-  for (const match of inputNumberMatches) {
-    const oldKey = match;
-    const newKey = `numeric-input ${currentNumericCount}`;
-    renameMap[oldKey] = newKey;
-    currentNumericCount++;
-  }
-  return renameMap;
-};
-
-// Convert the user input data keys from input-number to numeric-input
-const convertUserInputNumberData = (userInputMap, renameMap) => {
-  const updatedUserInputMap = _extends({}, userInputMap);
-  for (const key of Object.keys(userInputMap)) {
-    if (key.includes("input-number")) {
-      const updatedKey = renameMap[key];
-      updatedUserInputMap[updatedKey] = userInputMap[key];
-      delete updatedUserInputMap[key];
-    }
-  }
-  return updatedUserInputMap;
-};
-
-// Used to convert InputNumber widgets to NumericInput widgets for scoring
-const convertInputNumberForScoring = (rubric, userInputMap) => {
-  // First we need to create a map of the old input-number keys to the new numeric-input keys
-  // so that we can ensure we update the content, widgets, AND userInput accordingly
-  const renameMap = getInputNumberRenameMap(rubric);
-  const convertedRubric = convertInputNumberJson(rubric, renameMap);
-  const convertedUserData = convertUserInputNumberData(userInputMap, renameMap);
-  return {
-    convertedRubric,
-    convertedUserData
-  };
-};
-
-const widgetRegExes = [/input-number \d+/]; // We can add more regexes here in the future
-
-// This utils in this file are used to modernize our Perseus JSON structure,
-// so that we can convert deprecated widgets to their modern equivalents when
-// content creators use the Editor Page to update content containing these widgets.
-// Currently, we're only converting input-number to numeric-input,
-// but we can add more conversions here in the future.
-
-// Modernize the json content of a PerseusRenderer object
-// by converting deprecated widgets to their modern equivalents
-const convertDeprecatedWidgets = json => {
-  // Currently we're only converting input-number to numeric-input,
-  // But we can add more conversions here in the future
-  return inputNumberToNumericInput(json);
-};
-const conversionRequired = json => {
-  // If there's no content, then there's no conversion required
-  if (!json.content) {
-    return false;
-  }
-  // Check the content string for any top-level input-number widgets
-  if (widgetRegExes.some(regex => regex.test(json.content))) {
-    return true;
-  }
-
-  // If there's no deprecated widget in the top-level, then check for any nested widgets
-  for (const key of Object.keys(json.widgets)) {
-    if (json.widgets[key].options.widgets) {
-      const nestedJson = json.widgets[key].options;
-      if (conversionRequired(nestedJson)) {
-        return true;
-      }
-    }
-  }
-  return false;
-};
-
-/**
- * Convert the deprecated widgets in the rubric and user data to their
- * modern equivalents for scoring. These need to be updated together
- * in order to ensure that the widgetKeys match between the rubric and user data.
- */
-const convertDeprecatedWidgetsForScoring = (rubric, userInputMap) => {
-  return convertInputNumberForScoring(rubric, userInputMap);
-};
-
-// 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"];
@@ -19055,9 +18768,6 @@ const replaceDeprecatedWidgets = () => {
   replaceWidget("sequence", "deprecated-standin");
   replaceWidget("simulator", "deprecated-standin");
   replaceWidget("unit-input", "deprecated-standin");
-
-  // Input-Number is a special case as it is being replaced by Numeric-Input
-  replaceWidget("input-number", "numeric-input");
 };
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
@@ -19092,11 +18802,6 @@ const replaceDeprecatedEditors = () => {
   replaceEditor("sequence", "deprecated-standin");
   replaceEditor("simulator", "deprecated-standin");
   replaceEditor("unit-input", "deprecated-standin");
-
-  // We're replacing the input-number editor with the numeric-input editor here,
-  // but we're also modifying the JSON content to convert input-number into the
-  // numeric-input format over in editor-page.tsx on line 92.
-  replaceEditor("input-number", "numeric-input");
 };
 const getWidget = name => {
   var _widgets$name;
@@ -19147,8 +18852,10 @@ const getVersionVector = () => {
 const getPublicWidgets = () => {
   // TODO(alex): Update underscore.js so that _.pick can take a function.
   // @ts-expect-error - TS2740 - Type 'Pick<{ [key: string]: Readonly<{ name: string; displayName: string; getWidget?: (() => ComponentType<any>) | undefined; accessible?: boolean | ((props: any) => boolean) | undefined; hidden?: boolean | undefined; ... 10 more ...; widget: ComponentType<...>; }>; }, string>' is missing the following properties from type 'readonly Readonly<{ name: string; displayName: string; getWidget?: (() => ComponentType<any>) | undefined; accessible?: boolean | ((props: any) => boolean) | undefined; hidden?: boolean | undefined; ... 10 more ...; widget: ComponentType<...>; }>[]': length, concat, join, slice, and 18 more.
-  return _.pick(widgets, _.reject(_.keys(widgets), function (name) {
-    return widgets[name].hidden || name === "input-number";
+  return _.pick(widgets,
+  // @ts-expect-error - TS2345 - Argument of type '(name: string) => boolean | undefined' is not assignable to parameter of type 'Iteratee<string[], boolean, string>'.
+  _.reject(_.keys(widgets), function (name) {
+    return widgets[name].hidden;
   }));
 };
 const isAccessible = widgetInfo => {
@@ -19466,34 +19173,6 @@ widgetIds, userInputMap, strings, locale) {
     }
   });
 }
-
-// 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) {
-  let convertedRenderData = perseusRenderData;
-  let convertedUserInputMap = userInputMap;
-
-  // Check if the PerseusRenderer object contains any deprecated widgets that need to be converted
-  const mustConvertData = conversionRequired(perseusRenderData);
-  if (mustConvertData) {
-    const {
-      convertedRubric,
-      convertedUserData
-    } = convertDeprecatedWidgetsForScoring(perseusRenderData, userInputMap);
-    convertedRenderData = convertedRubric;
-    convertedUserInputMap = convertedUserData;
-  }
-
-  // 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(convertedRenderData.content);
-  const scores = scoreWidgetsFunctional(convertedRenderData.widgets, usedWidgetIds, convertedUserInputMap, 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
@@ -19514,7 +19193,7 @@ widgetIds, userInputMap, strings, locale) {
     const userInput = userInputMap[id];
     const scorer = getWidgetScorer(widget.type);
     if (widget.type === "group") {
-      const scores = scoreWidgetsFunctional(widget.options.widgets, getWidgetIdsFromContent(widget.options.content), userInputMap[id], strings, locale);
+      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);
@@ -20346,7 +20025,7 @@ class Renderer extends React.Component {
         // Instead, we center them with css magic in styles.less
         // /cry(aria)
         this._foundTextNodes = true;
-        if (this.widgetIds.includes(node.id)) {
+        if (_.contains(this.widgetIds, 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
@@ -20650,7 +20329,7 @@ class Renderer extends React.Component {
     };
     this.getInputPaths = () => {
       const inputPaths = [];
-      this.widgetIds.forEach(widgetId => {
+      _.each(this.widgetIds, widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         if (widget && widget.getInputPaths) {
           // Grab all input paths and add widgetID to the front
@@ -20658,7 +20337,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[]>'.
-          widgetInputPaths.forEach(inputPath => {
+          _.each(widgetInputPaths, inputPath => {
             const relativeInputPath = [widgetId].concat(inputPath);
             inputPaths.push(relativeInputPath);
           });
@@ -20787,20 +20466,12 @@ 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 = widgetIds.map(widgetId => {
+      const examples = _.compact(_.map(widgetIds, widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         return widget != null && widget.examples ? widget.examples() : null;
-      }).filter(Boolean);
+      }));
 
       // no widgets with examples
       if (!examples.length) {
@@ -21055,15 +20726,27 @@ class Renderer extends React.Component {
   }
 
   /**
-   * Scores the content.
-   *
-   * @deprecated use scorePerseusItem
+   * 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.
    */
   score() {
-    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
+    const scores = this.scoreWidgets();
     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) {
@@ -22073,11 +21756,15 @@ class InputNumber extends React.Component {
       this.refs.input.focus();
       return true;
     };
+    // TODO(LEMS-2656): remove TS suppression
+    // @ts-expect-error: Type 'FocusPath' is not assignable to type 'Path'.
     this.focusInputPath = inputPath => {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
       this.refs.input.focus();
     };
+    // TODO(LEMS-2656): remove TS suppression
+    // @ts-expect-error: Type 'FocusPath' is not assignable to type 'Path'.
     this.blurInputPath = inputPath => {
       var _this$refs$input;
       // eslint-disable-next-line react/no-string-refs
@@ -22095,6 +21782,8 @@ class InputNumber extends React.Component {
       /* c8 ignore next */
       return [[]];
     };
+    // TODO(LEMS-2656): remove TS suppression
+    // @ts-expect-error: Type 'FocusPath' is not assignable to type 'Path'.
     this.setInputValue = (path, newValue, cb) => {
       this.props.onChange({
         currentValue: newValue
@@ -22222,6 +21911,8 @@ var InputNumber$1 = {
   widget: InputNumber,
   transform: propTransform$3,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusInputNumberUserInput'.
   scorer: scoreInputNumber,
   getOneCorrectAnswerFromRubric(rubric) {
     if (rubric.value == null) {
@@ -22512,7 +22203,7 @@ class NumericInput extends React.Component {
         height: "auto"
       }
     });
-    return /*#__PURE__*/React.createElement(InputWithExamples, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputWithExamples, {
       ref: ref => this.inputRef = ref,
       value: this.props.currentValue,
       onChange: this.handleChange,
@@ -22524,7 +22215,7 @@ class NumericInput extends React.Component {
       id: this.props.widgetId,
       disabled: this.props.apiOptions.readOnly,
       style: styles.input
-    });
+    }));
   }
 }
 
@@ -22593,69 +22284,19 @@ const propsTransform = function propsTransform(widgetOptions) {
   });
   return rendererProps;
 };
-
-// This function is being used to replace the input-number widget
-// with the numeric-input widget
-const propUpgrades$2 = {
-  /* c8 ignore next */
-  "1": initialProps => {
-    // If the initialProps has simplify, it means we're upgrading from
-    // input-number to numeric-input. In this case, we need to upgrade
-    // the widget options accordingly.
-    if (initialProps.simplify !== undefined) {
-      // If the answerType is not number or percent, we need to provide
-      // the answer form for the numeric-input widget
-      const provideAnswerForm = initialProps.answerType !== "number" && initialProps.answerType !== "percent";
-
-      // We need to determine the mathFormat for the numeric-input widget
-      const mathFormat = initialProps.answerType === "rational" ? "proper" // input-number uses "rational" for proper fractions
-      : initialProps.answerType; // Otherwise, we can use the answerType directly
-
-      // If adjusting this logic, also adjust the logic in the convertInputNumberWidgetOptions
-      // function in input-number.ts in the Perseus Editor package's util folder
-      const answers = [{
-        value: initialProps.value,
-        simplify: initialProps.simplify,
-        answerForms: provideAnswerForm ? [mathFormat] : undefined,
-        strict: initialProps.inexact,
-        // We only want to set maxError if the inexact prop is true
-        maxError: initialProps.inexact ? initialProps.maxError : 0,
-        status: "correct",
-        // Input-number only allows correct answers
-        message: ""
-      }];
-      return {
-        answers,
-        size: initialProps.size,
-        coefficient: false,
-        // input-number doesn't have a coefficient prop
-        labelText: "",
-        // input-number doesn't have a labelText prop
-        static: false,
-        // static is always false for numeric-input
-        rightAlign: initialProps.rightAlign || false
-      };
-    } else {
-      // Otherwise simply return the initialProps as there's no differences
-      // between v0 and v1 for numeric-input
-      return initialProps;
-    }
-  }
-};
 var NumericInput$1 = {
   name: "numeric-input",
   displayName: "Numeric input",
   defaultAlignment: "inline-block",
   accessible: true,
   widget: NumericInput,
-  version: {
-    major: 1,
-    minor: 0
-  },
   transform: propsTransform,
-  propUpgrades: propUpgrades$2,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumericInputUserInput'.
   scorer: scoreNumericInput,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusNumericInputRubric'
   getOneCorrectAnswerFromRubric(rubric) {
     const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
     const answerStrings = correctAnswers.map(answer => {
@@ -24166,12 +23807,12 @@ const AltText = ({
   }));
 };
 const rules = {
-  newline: SimpleMarkdown$1.defaultRules.newline,
-  paragraph: SimpleMarkdown$1.defaultRules.paragraph,
-  escape: SimpleMarkdown$1.defaultRules.escape,
+  newline: SimpleMarkdown.defaultRules.newline,
+  paragraph: SimpleMarkdown.defaultRules.paragraph,
+  escape: SimpleMarkdown.defaultRules.escape,
   passageFootnote: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.1,
-    match: SimpleMarkdown$1.inlineRegex(/^\^/),
+    order: SimpleMarkdown.defaultRules.escape.order + 0.1,
+    match: SimpleMarkdown.inlineRegex(/^\^/),
     parse: (capture, parse, state) => {
       // if no footnotes have been seen, we're id 1. otherwise,
       // we're the next subsequent id
@@ -24200,7 +23841,7 @@ const rules = {
     }
   },
   refStart: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.2,
+    order: SimpleMarkdown.defaultRules.escape.order + 0.2,
     match: function (source) {
       const capture = /^\{\{/.exec(source);
       if (capture) {
@@ -24286,8 +23927,8 @@ const rules = {
     }
   },
   refEnd: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.3,
-    match: SimpleMarkdown$1.inlineRegex(/^\}\}/),
+    order: SimpleMarkdown.defaultRules.escape.order + 0.3,
+    match: SimpleMarkdown.inlineRegex(/^\}\}/),
     parse: (capture, parse, state) => {
       if (!state.useRefs) {
         return {
@@ -24315,8 +23956,8 @@ const rules = {
     }
   },
   squareLabel: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.4,
-    match: SimpleMarkdown$1.inlineRegex(/^\[\[(\w+)\]\]( *)/),
+    order: SimpleMarkdown.defaultRules.escape.order + 0.4,
+    match: SimpleMarkdown.inlineRegex(/^\[\[(\w+)\]\]( *)/),
     parse: (capture, parse, state) => {
       if (!state.firstQuestionRef) {
         state.firstQuestionRef = capture[1];
@@ -24342,8 +23983,8 @@ const rules = {
     }
   },
   circleLabel: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.5,
-    match: SimpleMarkdown$1.inlineRegex(/^\(\((\w+)\)\)( *)/),
+    order: SimpleMarkdown.defaultRules.escape.order + 0.5,
+    match: SimpleMarkdown.inlineRegex(/^\(\((\w+)\)\)( *)/),
     parse: (capture, parse, state) => {
       return {
         content: capture[1],
@@ -24367,8 +24008,8 @@ const rules = {
     }
   },
   squareBracketRef: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.6,
-    match: SimpleMarkdown$1.inlineRegex(/^\[(\d+)\]( *)/),
+    order: SimpleMarkdown.defaultRules.escape.order + 0.6,
+    match: SimpleMarkdown.inlineRegex(/^\[(\d+)\]( *)/),
     parse: (capture, parse, state) => {
       if (!state.firstSentenceRef) {
         state.firstSentenceRef = capture[1];
@@ -24391,8 +24032,8 @@ const rules = {
     }
   },
   highlight: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.7,
-    match: SimpleMarkdown$1.inlineRegex(/^{highlighting.start}(.+?){highlighting.end}/),
+    order: SimpleMarkdown.defaultRules.escape.order + 0.7,
+    match: SimpleMarkdown.inlineRegex(/^{highlighting.start}(.+?){highlighting.end}/),
     parse: (capture, parse, state) => {
       return {
         content: capture[1]
@@ -24406,8 +24047,8 @@ const rules = {
     }
   },
   reviewHighlight: {
-    order: SimpleMarkdown$1.defaultRules.escape.order + 0.7,
-    match: SimpleMarkdown$1.inlineRegex(/^{review-highlighting.start}(.+?){review-highlighting.end}/),
+    order: SimpleMarkdown.defaultRules.escape.order + 0.7,
+    match: SimpleMarkdown.inlineRegex(/^{review-highlighting.start}(.+?){review-highlighting.end}/),
     parse: (capture, parse, state) => {
       return {
         content: capture[1]
@@ -24420,11 +24061,11 @@ const rules = {
       }, node.content)];
     }
   },
-  strong: SimpleMarkdown$1.defaultRules.strong,
-  u: SimpleMarkdown$1.defaultRules.u,
-  em: SimpleMarkdown$1.defaultRules.em,
-  del: SimpleMarkdown$1.defaultRules.del,
-  text: _extends({}, SimpleMarkdown$1.defaultRules.text, {
+  strong: SimpleMarkdown.defaultRules.strong,
+  u: SimpleMarkdown.defaultRules.u,
+  em: SimpleMarkdown.defaultRules.em,
+  del: SimpleMarkdown.defaultRules.del,
+  text: _extends({}, SimpleMarkdown.defaultRules.text, {
     react(node, output, state) {
       return /*#__PURE__*/React.createElement("span", {
         key: state.key
@@ -24465,7 +24106,10 @@ const CIRCLE_LABEL_STYLE = {
   borderRadius: "50%",
   textAlign: "center"
 };
-const builtParser = SimpleMarkdown$1.parserFor(rules);
+
+// TODO(LEMS-2656): remove TS suppression
+// @ts-expect-error: State is not assignable to ParseState
+const builtParser = SimpleMarkdown.parserFor(rules);
 const parse$2 = (source, state) => {
   // @ts-expect-error - TS2322 - Type 'ParseState | {}' is not assignable to type 'ParseState | null | undefined'.
   state = state || {};
@@ -24474,7 +24118,7 @@ const parse$2 = (source, state) => {
 };
 
 // @ts-expect-error - TS2322 - Type 'ReactOutput' is not assignable to type '(arg1: SingleASTNode[]) => ReactElement<any, string | JSXElementConstructor<any>>'.
-const output = SimpleMarkdown$1.reactFor(SimpleMarkdown$1.ruleOutput(rules, "react"));
+const output = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, "react"));
 var PassageMarkdown = {
   parse: parse$2,
   output,
@@ -26897,6 +26541,8 @@ var Radio = {
   },
   propUpgrades: propUpgrades$1,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusRadioUserInput
   scorer: scoreRadio
 };
 
@@ -27117,6 +26763,8 @@ var Categorizer$1 = {
     return _.pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
   scorer: scoreCategorizer
 };
 
@@ -27350,6 +26998,8 @@ var CSProgram$1 = {
   supportedAlignments: ["block", "full-width"],
   widget: CSProgram,
   hidden: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
   scorer: scoreCSProgram
 };
 
@@ -27567,6 +27217,8 @@ var Dropdown$1 = {
   accessible: true,
   widget: Dropdown,
   transform: optionsTransform,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusDropdownUserInput'.
   scorer: scoreDropdown
 };
 
@@ -29129,6 +28781,8 @@ class FunctionGrapher extends React.Component {
       return this.props.asymptote;
     };
     this.change = (...args) => {
+      // TODO(LEMS-2656): remove TS suppression
+      // @ts-expect-error: Argument of type 'any[]' is not assignable to parameter of type '[newPropsOrSinglePropName: string | { [key: string]: any; }, propValue?: any, callback?: (() => unknown) | undefined]'. Target requires 1 element(s) but source may have fewer.
       return change.apply(this, args);
     };
     this.renderPlot = () => {
@@ -29492,6 +29146,8 @@ var Grapher$1 = {
   widget: Grapher,
   transform: propTransform$2,
   staticTransform: staticTransform$4,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusGrapherUserInput'.
   scorer: scoreGrapher
 };
 
@@ -29613,9 +29269,6 @@ 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";
@@ -29823,6 +29476,8 @@ var Iframe$1 = {
   widget: Iframe,
   // Let's not expose it to all content creators yet
   hidden: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusIframeUserInput'.
   scorer: scoreIframe
 };
 
@@ -31474,6 +31129,37 @@ function isUnlimitedGraphState(state) {
   return state.type === "point" && state.numPoints === "unlimited" || state.type === "polygon" && state.numSides === "unlimited";
 }
 
+/**
+ * Parse a string of text and math into a list of objects with type and content
+ *
+ * Example: "Pi is about $\frac{22}{7}$" ==>
+ *    [
+ *      {type: "text", content: "Pi is about "},
+ *      {type: "math", content: "\\frac{22}{7}"},
+ *    ]
+ */
+const mathOnlyParser = SimpleMarkdown.parserFor({
+  math: _extends({}, pureMarkdownRules.math, {
+    order: 0
+  }),
+  text: {
+    order: 1,
+    match: SimpleMarkdown.anyScopeRegex(/^([^$\\{}]+)/),
+    parse: capture => ({
+      content: capture[0]
+    })
+  },
+  specialCharacter: {
+    order: 2,
+    match: SimpleMarkdown.anyScopeRegex(/^(\\[\S\s]|\$|\\$|{|})/),
+    parse: capture => ({
+      content: capture[0]
+    })
+  }
+}, {
+  inline: true
+});
+
 /**
  * Replace all text outside of the $ TeX blocks with `\\text{...}`
  * This way, the entire resulting string can be rendered within <TeX>
@@ -31482,57 +31168,19 @@ function isUnlimitedGraphState(state) {
 function replaceOutsideTeX(mathString) {
   // All the information we need is in the first section,
   // whether it's typed as "blockmath" or "paragraph"
-  const firstSection = SimpleMarkdown.parse(mathString)[0];
-
-  // If it's blockMath, the outer level has the full math content.
-  if (firstSection.type === "blockMath") {
-    return firstSection.content;
-  }
-
-  // If it's a paragraph, we need to iterate through the sections
-  // to look for individual math blocks.
-  const condensedNodes = condenseTextNodes(firstSection.content);
+  const parsed = mathOnlyParser(mathString);
   let result = "";
-  for (const piece of condensedNodes) {
-    piece.type === "math" ? result += piece.content : result += `\\text{${escapeSpecialChars(piece.content)}}`;
+  for (const piece of parsed) {
+    piece.type === "math" ? result += "$" + piece.content + "$" : piece.type === "specialCharacter" ? result += escapeIfUnescaped(piece.content) : result += piece.content;
   }
-  return result;
+  return `\\text{${result}}`;
 }
-// Helper function for replaceOutsideTeX()
-// Condense adjacent text nodes into a single text node
-function condenseTextNodes(nodes) {
-  const result = [];
-  if (!nodes) {
-    return result;
-  }
-  let currentText = "";
-  for (const node of nodes) {
-    if (node.type === "math") {
-      if (currentText) {
-        result.push({
-          type: "text",
-          content: currentText
-        });
-        currentText = "";
-      }
-      result.push(node);
-    } else {
-      currentText += node.content;
-    }
-  }
-  if (currentText) {
-    result.push({
-      type: "text",
-      content: currentText
-    });
+function escapeIfUnescaped(character) {
+  if (character.length === 1) {
+    return "\\" + character;
+  } else {
+    return character;
   }
-  return result;
-}
-
-// Helper function for replaceOutsideTeX()
-function escapeSpecialChars(str) {
-  // Escape $, \, {, and } characters
-  return str.replace(/([$\\{}])/g, "\\$1");
 }
 
 function AxisLabels() {
@@ -32477,12 +32125,17 @@ const ItemExtras = [
 // prettier-ignore
 
 // prettier-ignore
-// While this widget is deprecated, we still need the type for conversion purposes
+
 // prettier-ignore
+
 // prettier-ignore
+
 // prettier-ignore
+
 //prettier-ignore
+
 // A background image applied to various widgets.
+
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 
 // 2D range: xMin, xMax, yMin, yMax
@@ -32992,7 +32645,9 @@ const actions = {
     removePoint,
     focusPoint,
     blurPoint,
-    clickPoint
+    clickPoint,
+    closePolygon,
+    openPolygon
   },
   quadratic: {
     movePoint
@@ -33071,6 +32726,18 @@ function changeKeyboardInvitationVisibility(shouldShow) {
     shouldShow
   };
 }
+const CLOSE_POLYGON = "close-polygon";
+function closePolygon() {
+  return {
+    type: CLOSE_POLYGON
+  };
+}
+const OPEN_POLYGON = "open-polygon";
+function openPolygon() {
+  return {
+    type: OPEN_POLYGON
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -34584,33 +34251,17 @@ const LimitedPolygonGraph = props => {
     }
   })));
 };
-
-// TODO(catjohnson): reduce redundancy between LimitedPolygonGraph and UnlimitedPolygonGraph
-// both components are vary similar, however more implementation is needed to be added before
-// it is clear what can and can't be shared between components.
 const UnlimitedPolygonGraph = props => {
-  const [hovered, setHovered] = React.useState(false);
-  // This is more so required for the re-rendering that occurs when state
-  // updates; specifically with regard to line weighting and polygon focus.
-  const [focusVisible, setFocusVisible] = React.useState(false);
   const {
     dispatch
   } = props;
   const {
     coords,
-    showAngles,
-    showSides,
-    range,
-    snapStep,
-    snapTo = "grid"
+    closedPolygon
   } = props.graphState;
   const graphConfig = useGraphConfig();
-
-  // TODO(catjohnson): Explore abstracting this code as it is similar to point.tsx
-  // and hopefully we can cut down ont the unlimited graph redundancy.
   const {
     range: [x, y],
-    disableKeyboardInteraction,
     graphDimensionsInPixels
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
@@ -34621,21 +34272,6 @@ const UnlimitedPolygonGraph = props => {
   // TODO(benchristel): can the default set of points be removed here? I don't
   // think coords can be null.
   const points = coords != null ? coords : [[0, 0]];
-  const polygonRef = React.useRef(null);
-  const dragReferencePoint = points[0];
-  const constrain = ["angles", "sides"].includes(snapTo) ? p => p : p => snap(snapStep, p);
-  const {
-    dragging
-  } = useDraggable({
-    gestureTarget: polygonRef,
-    point: dragReferencePoint,
-    onMove: newPoint => {
-      const delta = vec.sub(newPoint, dragReferencePoint);
-      dispatch(actions.polygon.moveAll(delta));
-    },
-    constrainKeyboardMovement: constrain
-  });
-  const lines = getLines(points);
   React.useEffect(() => {
     const focusedIndex = props.graphState.focusedPointIndex;
     if (focusedIndex != null) {
@@ -34643,94 +34279,59 @@ const UnlimitedPolygonGraph = props => {
       (_pointRef$current$foc = pointRef.current[focusedIndex]) == null || _pointRef$current$foc.focus();
     }
   }, [props.graphState.focusedPointIndex, pointRef]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
-    style: {
-      fill: "rgba(0,0,0,0)",
-      cursor: "crosshair"
-    },
-    width: widthPx,
-    height: heightPx,
-    x: left,
-    y: top,
-    onClick: event => {
-      const elementRect = event.currentTarget.getBoundingClientRect();
-      const x = event.clientX - elementRect.x;
-      const y = event.clientY - elementRect.y;
-      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
-      dispatch(actions.polygon.addPoint(graphCoordinates[0]));
-    }
-  }), /*#__PURE__*/React.createElement(Polygon, {
-    points: [...points],
-    color: "var(--movable-line-stroke-color)",
-    svgPolygonProps: {
-      strokeWidth: focusVisible ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)",
-      style: {
-        fill: "transparent"
-      }
-    }
-  }), props.graphState.coords.map((point, i) => {
-    const pt1 = points.at(i - 1);
-    const pt2 = points[(i + 1) % points.length];
-    if (!pt1 || !pt2) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(PolygonAngle, {
-      key: "angle-" + i,
-      centerPoint: point,
-      endPoints: [pt1, pt2],
-      range: range,
-      polygonLines: lines,
-      showAngles: !!showAngles,
-      snapTo: snapTo
+  if (closedPolygon) {
+    const closedPolygonProps = _extends({}, props, {
+      numSides: coords.length
     });
-  }), showSides && lines.map(([start, end], i) => {
-    const [x, y] = vec.midpoint(start, end);
-    const length = parseFloat(vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
-    return /*#__PURE__*/React.createElement(TextLabel, {
-      key: "side-" + i,
-      x: x,
-      y: y
-    }, !Number.isInteger(length) && "≈ ", length);
-  }), /*#__PURE__*/React.createElement(Polygon, {
-    points: [...points],
-    color: "transparent",
-    svgPolygonProps: {
-      ref: polygonRef,
-      tabIndex: disableKeyboardInteraction ? -1 : 0,
-      strokeWidth: TARGET_SIZE,
+    return /*#__PURE__*/React.createElement(LimitedPolygonGraph, closedPolygonProps);
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
       style: {
-        cursor: dragging ? "grabbing" : "grab",
-        fill: hovered ? "var(--mafs-blue)" : "transparent"
+        fill: "rgba(0,0,0,0)",
+        cursor: "crosshair"
       },
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      // Required to remove line weighting when user clicks away
-      // from the focused polygon
-      onKeyDownCapture: () => {
-        setFocusVisible(hasFocusVisible(polygonRef.current));
+      width: widthPx,
+      height: heightPx,
+      x: left,
+      y: top,
+      onClick: event => {
+        const elementRect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - elementRect.x;
+        const y = event.clientY - elementRect.y;
+        const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
+        dispatch(actions.polygon.addPoint(graphCoordinates[0]));
+      }
+    }), /*#__PURE__*/React.createElement(Polyline, {
+      points: [...points],
+      color: "var(--movable-line-stroke-color)",
+      svgPolylineProps: {
+        strokeWidth: "var(--movable-line-stroke-weight)",
+        style: {
+          fill: "transparent"
+        }
+      }
+    }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+      key: i,
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
+      ref: ref => {
+        pointRef.current[i] = ref;
       },
-      // Required for lines to darken on focus
-      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
-      // Required for line weighting to update on blur. Without this,
-      // the user has to hover over the shape for it to update
-      onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
-      className: "movable-polygon"
-    }
-  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
-    ref: ref => {
-      pointRef.current[i] = ref;
-    },
-    onFocus: () => {
-      dispatch(actions.pointGraph.focusPoint(i));
-    },
-    onClick: () => {
-      dispatch(actions.pointGraph.clickPoint(i));
-    }
-  })));
+      onFocus: () => {
+        dispatch(actions.polygon.focusPoint(i));
+      },
+      onClick: () => {
+        // If the point being clicked is the first point and
+        // there's enough points to form a polygon (3 or more)
+        // Close the shape before setting focus.
+        if (i === 0 && props.graphState.coords.length >= 3) {
+          dispatch(actions.polygon.closePolygon());
+        }
+        dispatch(actions.polygon.clickPoint(i));
+      }
+    })));
+  }
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -35130,6 +34731,7 @@ const MafsGraph = props => {
   const uniqueId = React.useId();
   const descriptionId = `interactive-graph-description-${uniqueId}`;
   const interactiveElementsDescriptionId = `interactive-graph-interactive-elements-description-${uniqueId}`;
+  const unlimitedGraphKeyboardPromptId = `unlimited-graph-keyboard-prompt-${uniqueId}`;
   const graphRef = React.useRef(null);
   const {
     analytics
@@ -35202,7 +34804,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId),
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && "unlimited-graph-keyboard-prompt"),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -35272,6 +34874,7 @@ const MafsGraph = props => {
     height: height
   }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), graph)))), interactionPrompt && /*#__PURE__*/React.createElement(View, {
     style: {
+      display: interactionPrompt ? undefined : "hidden",
       textAlign: "center",
       backgroundColor: "white",
       border: "1px solid #21242C52",
@@ -35283,7 +34886,9 @@ const MafsGraph = props => {
       top: "50%",
       transform: "translateY(-50%)"
     }
-  }, /*#__PURE__*/React.createElement(LabelMedium, null, strings.graphKeyboardPrompt))), renderGraphControls({
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    id: unlimitedGraphKeyboardPromptId
+  }, strings.graphKeyboardPrompt))), renderGraphControls({
     state,
     dispatch,
     width,
@@ -35333,23 +34938,51 @@ const renderPointGraphControls = props => {
     }
   }, perseusStrings.removePoint));
 };
-
-/**
- * TODO(catjohnson): The polygon controls will be vastly different from the point controls.
- * Will be keeping this function as is for the time being, even if it's a copy of the point graph
- * controls.
- */
 const renderPolygonGraphControls = props => {
   const {
     interactionMode,
     showRemovePointButton,
-    focusedPointIndex
+    focusedPointIndex,
+    closedPolygon,
+    coords
   } = props.state;
   const {
     perseusStrings
   } = props;
   const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
-  return /*#__PURE__*/React.createElement(View, {
+
+  // We want to disable the closePolygon button when
+  // there are not enough coords to make a polygon
+  const disableCloseButton = coords.length < 3;
+
+  // If polygon is closed, show open button.
+  // If polygon is open, show close button.
+  const polygonButton = closedPolygon ? /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary",
+    style: {
+      width: "100%",
+      marginLeft: "20px"
+    },
+    tabIndex: 0,
+    onClick: () => {
+      props.dispatch(actions.polygon.openPolygon());
+    }
+  }, perseusStrings.openPolygon) : /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary"
+    // Conditional disable when there are less than 3 points in
+    // the graph
+    ,
+    disabled: disableCloseButton,
+    style: {
+      width: "100%",
+      marginLeft: "20px"
+    },
+    tabIndex: disableCloseButton ? -1 : 0,
+    onClick: () => {
+      props.dispatch(actions.polygon.closePolygon());
+    }
+  }, perseusStrings.closePolygon);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     style: {
       flexDirection: "row",
       width: props.width
@@ -35359,8 +34992,13 @@ const renderPolygonGraphControls = props => {
     style: {
       width: "100%",
       marginLeft: "20px"
-    },
-    tabIndex: 0,
+    }
+    // Disable button when polygon is closed.
+    ,
+    disabled: closedPolygon
+    // Do not make the button tabbable when it is disabled.
+    ,
+    tabIndex: closedPolygon ? -1 : 0,
     onClick: () => {
       props.dispatch(actions.polygon.addPoint([0, 0]));
     }
@@ -35368,19 +35006,21 @@ const renderPolygonGraphControls = props => {
     id: REMOVE_BUTTON_ID,
     kind: "secondary",
     color: "destructive"
+    // Disable button when polygon is closed.
+    ,
+    disabled: closedPolygon || !shouldShowRemoveButton
     // This button is meant to be interacted with by the mouse only
     // Never allow learners to tab to this button
     ,
     tabIndex: -1,
     style: {
       width: "100%",
-      marginLeft: "20px",
-      visibility: shouldShowRemoveButton ? "visible" : "hidden"
+      marginLeft: "20px"
     },
     onClick: _event => {
       props.dispatch(actions.polygon.removePoint(props.state.focusedPointIndex));
     }
-  }, perseusStrings.removePoint));
+  }, perseusStrings.removePoint), polygonButton));
 };
 const renderGraphControls = props => {
   const {
@@ -35431,7 +35071,7 @@ function handleBlurEvent(_event, state, dispatch) {
 }
 function handleKeyboardEvent(event, state, dispatch) {
   if (isUnlimitedGraphState(state)) {
-    if (event.key === "Backspace") {
+    if (event.key === "Backspace" || event.key === "Delete") {
       var _document$activeEleme;
       // TODO(benchristel): Checking classList here is a hack to prevent
       // points from being deleted if the user presses the backspace key
@@ -35439,7 +35079,10 @@ function handleKeyboardEvent(event, state, dispatch) {
       // should move the keyboard event handler to the movable point
       // handle element.
       if ((_document$activeEleme = document.activeElement) != null && _document$activeEleme.classList.contains("movable-point__focusable-handle")) {
-        dispatch(actions.global.deleteIntent());
+        // Only allow delete if type is point or a polygon that is open.
+        if (state.type === "point" || state.type === "polygon" && !state.closedPolygon) {
+          dispatch(actions.global.deleteIntent());
+        }
       }
 
       // After removing a point blur
@@ -35670,7 +35313,8 @@ function initializeGraphState(params) {
         focusedPointIndex: null,
         showRemovePointButton: false,
         interactionMode: "mouse",
-        showKeyboardInteractionInvitation: false
+        showKeyboardInteractionInvitation: false,
+        closedPolygon: false
       });
     case "point":
       return _extends({}, shared, {
@@ -35950,6 +35594,10 @@ function interactiveGraphReducer(state, action) {
       return doDeleteIntent(state);
     case CLICK_POINT:
       return doClickPoint(state, action);
+    case CLOSE_POLYGON:
+      return doClosePolygon(state);
+    case OPEN_POLYGON:
+      return doOpenPolygon(state);
     case CHANGE_INTERACTION_MODE:
       return doChangeInteractionMode(state, action);
     case CHANGE_KEYBOARD_INVITATION_VISIBILITY:
@@ -36003,6 +35651,22 @@ function doClickPoint(state, action) {
   }
   return state;
 }
+function doClosePolygon(state) {
+  if (isUnlimitedGraphState(state) && state.type === "polygon") {
+    return _extends({}, state, {
+      closedPolygon: true
+    });
+  }
+  return state;
+}
+function doOpenPolygon(state) {
+  if (isUnlimitedGraphState(state) && state.type === "polygon") {
+    return _extends({}, state, {
+      closedPolygon: false
+    });
+  }
+  return state;
+}
 function doChangeInteractionMode(state, action) {
   if (isUnlimitedGraphState(state)) {
     const nextKeyboardInvitation = action.mode === "keyboard" ? false : state.showKeyboardInteractionInvitation;
@@ -36201,8 +35865,12 @@ function doMovePoint(state, action) {
         newValue: newValue
       });
 
-      // Reject the move if it would cause the sides of the polygon to cross
-      if (polygonSidesIntersect(newCoords)) {
+      // Boolean value to track whether we can let the polygon sides interact.
+      // They can interact if it's an unlimited polygon that is open.
+      const polygonSidesCanIntersect = state.numSides === "unlimited" && !state.closedPolygon;
+
+      // Reject the move if it would cause the sides of the polygon to cross.
+      if (!polygonSidesCanIntersect && polygonSidesIntersect(newCoords)) {
         return state;
       }
       return _extends({}, state, {
@@ -36359,13 +36027,14 @@ function doAddPoint(state, action) {
       return state;
     }
   }
+  const newCoords = [...state.coords, snappedPoint];
 
   // If there's no point in spot where we want the new point to go we add it there
   return _extends({}, state, {
     hasBeenInteractedWith: true,
-    coords: [...state.coords, snappedPoint],
+    coords: newCoords,
     showRemovePointButton: false,
-    focusedPointIndex: state.coords.length
+    focusedPointIndex: newCoords.length - 1
   });
 }
 function doRemovePoint(state, action) {
@@ -38676,6 +38345,8 @@ var InteractiveGraph$1 = {
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
   staticTransform: staticTransform$3,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusInteractiveGraphUserInput'.
   scorer: scoreInteractiveGraph
 };
 
@@ -39669,6 +39340,8 @@ var LabelImage$1 = {
   widget: LabelImageWithDependencies,
   accessible: true,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusLabelImageUserInput'.
   scorer: scoreLabelImage
 };
 
@@ -40611,6 +40284,8 @@ var Matcher$1 = {
   displayName: "Matcher (two column)",
   widget: Matcher,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatcherUserInput'.
   scorer: scoreMatcher
 };
 
@@ -40627,7 +40302,35 @@ const getPromptJSON$8 = (renderProps, userInput) => {
   };
 };
 
+/**
+ * Checks user input from the matrix widget to see if it is scorable.
+ *
+ * Note: The matrix widget cannot do much validation without the Scoring
+ * Data because of its use of KhanAnswerTypes as a core part of scoring.
+ *
+ * @see `scoreMatrix()` for more details.
+ */
+function validateMatrix(userInput, validationData, strings) {
+  const supplied = userInput.answers;
+  const suppliedSize = getMatrixSize(supplied);
+  for (let row = 0; row < suppliedSize[0]; row++) {
+    for (let col = 0; col < suppliedSize[1]; col++) {
+      if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
+        return {
+          type: "invalid",
+          message: strings.fillAllCells
+        };
+      }
+    }
+  }
+  return null;
+}
+
 function scoreMatrix(userInput, rubric, strings) {
+  const validationResult = validateMatrix(userInput, rubric, strings);
+  if (validationResult != null) {
+    return validationResult;
+  }
   const solution = rubric.answers;
   const supplied = userInput.answers;
   const solutionSize = getMatrixSize(solution);
@@ -40635,13 +40338,9 @@ function scoreMatrix(userInput, rubric, strings) {
   const incorrectSize = solutionSize[0] !== suppliedSize[0] || solutionSize[1] !== suppliedSize[1];
   const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
   let message = null;
-  let hasEmptyCell = false;
   let incorrect = false;
   _(suppliedSize[0]).times(row => {
     _(suppliedSize[1]).times(col => {
-      if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
-        hasEmptyCell = true;
-      }
       if (!incorrectSize) {
         const validator = createValidator(
         // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
@@ -40659,12 +40358,6 @@ function scoreMatrix(userInput, rubric, strings) {
       }
     });
   });
-  if (hasEmptyCell) {
-    return {
-      type: "invalid",
-      message: strings.fillAllCells
-    };
-  }
   if (incorrectSize) {
     return {
       type: "points",
@@ -41093,6 +40786,8 @@ var Matrix$1 = {
   transform: propTransform$1,
   staticTransform: staticTransform$2,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatrixUserInput'.
   scorer: scoreMatrix
 };
 
@@ -42724,6 +42419,8 @@ var NumberLine$1 = {
   widget: NumberLine,
   transform: numberLineTransform,
   staticTransform: staticTransform$1,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumberLineUserInput'.
   scorer: scoreNumberLine
 };
 
@@ -43304,6 +43001,8 @@ var Orderer$1 = {
   hidden: true,
   widget: Orderer,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusOrdererUserInput
   scorer: scoreOrderer
 };
 
@@ -44390,6 +44089,8 @@ var Plotter$1 = {
   hidden: true,
   widget: Plotter,
   staticTransform: staticTransform,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusPlotterUserInput
   scorer: scorePlotter
 };
 
@@ -44575,6 +44276,8 @@ var Sorter$1 = {
   displayName: "Sorter",
   widget: Sorter,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusSorterUserInput
   scorer: scoreSorter
 };
 
@@ -44870,6 +44573,8 @@ var Table$1 = {
   transform: propTransform,
   hidden: true,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusTableUserInput
   scorer: scoreTable
 };
 
@@ -45053,7 +44758,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "42.0.3";
+const libVersion = "43.0.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45677,13 +45382,6 @@ 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) {
@@ -45764,7 +45462,7 @@ class ServerItemRenderer extends React.Component {
 
   /**
    * Accepts a question area widgetId, or an answer area widgetId of
-   * the form "answer-numeric-input 1", or the string "answer-area"
+   * the form "answer-input-number 1", or the string "answer-area"
    * for the whole answer area (if the answer area is a single widget).
    */
   _setWidgetProps(widgetId, newProps, callback) {
@@ -45801,37 +45499,18 @@ 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 guess = this.getUserInput();
-    const score = scorePerseusItem(this.props.item.question, guess, this.context.strings, this.context.locale);
+    const guessAndScore = this.questionRenderer.guessAndScore();
+    const guess = guessAndScore[0];
+    const score = guessAndScore[1];
 
     // 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 = [this.questionRenderer.getUserInput(), []];
+    const maxCompatGuess = [guess, []];
     const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
     const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
     this.setState({
@@ -47679,6 +47358,140 @@ 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.
  *
@@ -49623,5 +49436,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, conversionRequired, convertDeprecatedWidgets, 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, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, 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, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map