@khanacademy/perseus 36.1.1 → 37.0.0

package/dist/index.js

@@ -2386,23 +2386,11 @@ const anglicizeOperators = tex => {
 const normalizeTex = tex => {
   return anglicizeOperators(tex);
 };
-const deriveKeypadVersion = apiOptions => {
-  // We can derive which version of the keypad is in use. This is
-  // a bit tricky, but this code will be relatively short-lived
-  // as we coalesce onto the new, v2 Keypad, at which point we
-  // can remove this `virtualKeypadVersion` field entirely.
-  return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : "MATH_INPUT_KEYPAD_V2";
-};
 // The new, MathQuill input expression widget
 class Expression extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   _textareaId = `expression_textarea_${Date.now()}`;
   _isMounted = false;
-
-  // TODO remove this in favor of just using expressionValidator
-  static validate(userInput, rubric, strings, locale) {
-    return expressionValidator(userInput, rubric, strings, locale);
-  }
   static getUserInputFromProps(props) {
     return normalizeTex(props.value);
   }
@@ -2478,26 +2466,6 @@ class Expression extends React__namespace.Component {
       });
     }
   };
-  simpleValidate = _ref => {
-    let {
-      scoring,
-      ...rubric
-    } = _ref;
-    const score = expressionValidator(this.getUserInput(), rubric, this.context.strings, this.context.locale);
-
-    // "scoring" is a flag that indicates when we are checking answers.
-    // otherwise, we may just be checking validity after changes.
-    if (scoring && score.type !== "invalid") {
-      this.props.analytics?.onAnalyticsEvent({
-        type: "perseus:expression-evaluated",
-        payload: {
-          result: score.earned === score.total ? "correct" : "incorrect",
-          virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
-        }
-      });
-    }
-    return score;
-  };
   getUserInput() {
     return Expression.getUserInputFromProps(this.props);
   }
@@ -2796,7 +2764,8 @@ var Expression$1 = {
   },
   propUpgrades: propUpgrades$2,
   // For use by the editor
-  isLintable: true
+  isLintable: true,
+  validator: expressionValidator
 };
 
 /**
@@ -3026,6 +2995,9 @@ function combineScores(scoreA, scoreB) {
     }
   });
 }
+function flattenScores(widgetScoreMap) {
+  return Object.values(widgetScoreMap).reduce(combineScores, noScore);
+}
 function isCorrect(score) {
   return score.type === "points" && score.earned >= score.total;
 }
@@ -3556,6 +3528,7 @@ const Util = {
   shuffle: shuffle$3,
   split,
   combineScores,
+  flattenScores,
   keScoreFromPerseusScore,
   firstNumericalParse: firstNumericalParse$1,
   stringArrayOfSize: stringArrayOfSize$1,
@@ -10094,6 +10067,8 @@ const setLabelMargins = function (span, size) {
       marginTop: -height / 2 - y * scale
     });
   } else {
+    const currentHeightMatchesProps = span.scrollHeight === height;
+
     // We are using jQuery to collect information and calculate a scale
     //     since we don't have a way to pass it to this function.
     // We need the width of the container in order to calculate the scale to apply to the label.
@@ -10115,6 +10090,17 @@ const setLabelMargins = function (span, size) {
     // Inherited line-height values can really mess up placement.
     $container.css("line-height", "normal");
 
+    // TODO: Verify that this change doesn't impact other graphies
+    //       Check the full list of consuming widgets.
+
+    // If the change in line-height affected the height of the element,
+    //     then the height used for calculations should be updated.
+    // This can happen when the first label in the container calls this method,
+    //     and the line-height was different when the height measurement was originally referenced.
+    if (currentHeightMatchesProps && span.scrollHeight !== height) {
+      height = span.scrollHeight;
+    }
+
     // The expected width of the graphie is found in the "max-width" property on ".svg-image" containers,
     //     and is found in the "width" property on ".graphie" containers.
     const widthValues = $container.css(["max-width", "width"]) ?? {
@@ -10176,7 +10162,10 @@ const GraphUtils = {
     return kmath.point.distanceToPoint(point1, point2);
   },
   // Find the angle in degrees between two or three points
-  findAngle: function (point1, point2, vertex) {
+  // This function is deprecated as it has several issues calculating
+  // correctly when dealing with reflex angles or the position of point2
+  // (LEMS-2202) Remove this function while removing the Legacy Interactive Graph.
+  findAngleDeprecated: function (point1, point2, vertex) {
     if (vertex === undefined) {
       const x = point1[0] - point2[0];
       const y = point1[1] - point2[1];
@@ -10185,7 +10174,7 @@ const GraphUtils = {
       }
       return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
     }
-    return GraphUtils.findAngle(point1, vertex) - GraphUtils.findAngle(point2, vertex);
+    return GraphUtils.findAngleDeprecated(point1, vertex) - GraphUtils.findAngleDeprecated(point2, vertex);
   },
   graphs: {}
 };
@@ -11202,8 +11191,8 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       p1 = options.point3;
       p3 = options.point1;
     }
-    const startAngle = GraphUtils.findAngle(p1, vertex);
-    const endAngle = GraphUtils.findAngle(p3, vertex);
+    const startAngle = GraphUtils.findAngleDeprecated(p1, vertex);
+    const endAngle = GraphUtils.findAngleDeprecated(p3, vertex);
     const angle = (endAngle + 360 - startAngle) % 360;
     const halfAngle = (startAngle + angle / 2) % 360;
     const sPadding = 5 * options.pushOut;
@@ -11370,15 +11359,15 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
     let angle = 135;
     let halfAngle;
     if (p1 && p3) {
-      const startAngle = GraphUtils.findAngle(p1, vertex);
-      const endAngle = GraphUtils.findAngle(p3, vertex);
+      const startAngle = GraphUtils.findAngleDeprecated(p1, vertex);
+      const endAngle = GraphUtils.findAngleDeprecated(p3, vertex);
       angle = (endAngle + 360 - startAngle) % 360;
       halfAngle = (startAngle + angle / 2 + 180) % 360;
     } else if (p1) {
-      const parallelAngle = GraphUtils.findAngle(vertex, p1);
+      const parallelAngle = GraphUtils.findAngleDeprecated(vertex, p1);
       halfAngle = parallelAngle + 90;
     } else if (p3) {
-      const parallelAngle = GraphUtils.findAngle(p3, vertex);
+      const parallelAngle = GraphUtils.findAngleDeprecated(p3, vertex);
       halfAngle = parallelAngle + 90;
     } else {
       // Standalone point
@@ -11584,7 +11573,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
         const vertex = constraints.fixedAngle.vertex.coord || constraints.fixedAngle.vertex;
         const ref = constraints.fixedAngle.ref.coord || constraints.fixedAngle.ref;
         const distPoint = constraints.fixedDistance.point.coord || constraints.fixedDistance.point;
-        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngle(ref, vertex)) * Math.PI / 180;
+        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngleDeprecated(ref, vertex)) * Math.PI / 180;
         const length = constraints.fixedDistance.dist;
         newCoord[0] = length * Math.cos(constrainedAngle) + distPoint[0];
         newCoord[1] = length * Math.sin(constrainedAngle) + distPoint[1];
@@ -11593,8 +11582,8 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       } else if (typeof constraints.fixedAngle.angle === "number") {
         const vertex = constraints.fixedAngle.vertex.coord || constraints.fixedAngle.vertex;
         const ref = constraints.fixedAngle.ref.coord || constraints.fixedAngle.ref;
-        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngle(ref, vertex)) * Math.PI / 180;
-        const angle = GraphUtils.findAngle(coord, vertex) * Math.PI / 180;
+        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngleDeprecated(ref, vertex)) * Math.PI / 180;
+        const angle = GraphUtils.findAngleDeprecated(coord, vertex) * Math.PI / 180;
         const distance = GraphUtils.getDistance(coord, vertex);
         let length = distance * Math.cos(constrainedAngle - angle);
         length = length < 1.0 ? 1.0 : length;
@@ -11604,7 +11593,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
         // distance is constrained
       } else if (typeof constraints.fixedDistance.dist === "number") {
         const distPoint = constraints.fixedDistance.point.coord || constraints.fixedDistance.point;
-        let angle = GraphUtils.findAngle(coord, distPoint);
+        let angle = GraphUtils.findAngleDeprecated(coord, distPoint);
         const length = constraints.fixedDistance.dist;
         angle = angle * Math.PI / 180;
         newCoord[0] = length * Math.cos(angle) + distPoint[0];
@@ -13804,7 +13793,7 @@ ___default["default"].extend(MovableAngle.prototype, {
       ___default["default"].each([0, 2], function (i) {
         const oldPoint = points[i].coord;
         let newPoint = kmath.vector.add(oldPoint, delta);
-        let angle = GraphUtils.findAngle(newVertex, newPoint);
+        let angle = GraphUtils.findAngleDeprecated(newVertex, newPoint);
         angle *= Math.PI / 180;
         newPoint = graphie.constrainToBoundsOnAngle(newPoint, 10, angle);
         newPoints[i] = newPoint;
@@ -13837,7 +13826,7 @@ ___default["default"].extend(MovableAngle.prototype, {
           return false;
         }
         if (snap) {
-          let angle = GraphUtils.findAngle(newPoint, vertex);
+          let angle = GraphUtils.findAngleDeprecated(newPoint, vertex);
           angle = Math.round((angle - snapOffset) / snap) * snap + snapOffset;
           const distance = GraphUtils.getDistance(newPoint, vertex);
           return kmath.vector.add(vertex, polar$1(distance, angle));
@@ -13925,7 +13914,7 @@ ___default["default"].extend(MovableAngle.prototype, {
    * coords when interpreted in a clockwise direction.
    */
   _getClockwiseAngle: function (coords) {
-    const rawAngle = GraphUtils.findAngle(
+    const rawAngle = GraphUtils.findAngleDeprecated(
     // The order of these is "weird" to match what a clockwise
     // order is in graphie.labelAngle
     coords[2],
@@ -14774,7 +14763,7 @@ const mapObject$1 = function (obj, lambda) {
  *   });
  * {a: 'aa', b: 'bb'}
  */
-const mapObjectFromArray$1 = function (arr, lambda) {
+const mapObjectFromArray = function (arr, lambda) {
   const result = {};
   ___default["default"].each(arr, function (elem) {
     result[elem] = lambda(elem);
@@ -14784,7 +14773,7 @@ const mapObjectFromArray$1 = function (arr, lambda) {
 var objective_ = {
   pluck: pluck,
   mapObject: mapObject$1,
-  mapObjectFromArray: mapObjectFromArray$1
+  mapObjectFromArray: mapObjectFromArray
 };
 
 /**
@@ -19000,169 +18989,6 @@ class QuestionParagraph extends React__namespace.Component {
   }
 }
 
-/**
- * TranslationLinter asynchronously calls Khan Academy's poentry linter.
- *
- * The poentry linter checks for issues that prevent content from being
- * translated. This linter is KA-specific and so TranslationLinter does not do
- * anything in non-KA environments.
- */
-
-// A LintCB is called once the linter has been run.
-
-// msec to wait before we actually call the linter after receiving the
-// last call. The timer is reset if the lint is called during the wait.
-const DEBOUNCE_TIMEOUT = 1000;
-class TranslationLinter {
-  // To avoid linting when nothing has changed.
-  previousContent = null;
-
-  /**
-   * Runs the poentry linter on the given perseus string asynchronously.
-   *
-   * It doesn't do anything unless we're in a KA environment.
-   *
-   * onLintErrorsGenerated is called even if there are no errors. It is not
-   * called if perseusStr is unchanged from the last call.
-   *
-   * Linting is relatively expensive -- so we debounce linting each instance
-   * for some amount of time.
-   */
-  runLinter = _.debounce((perseusStr, onLintErrorsGenerated) => {
-    // TODO(FEI-5003): Do we still need to check for 'KA'?
-    if (typeof KA === "undefined") {
-      return;
-    }
-    if (perseusStr === this.previousContent) {
-      return;
-    }
-    this.previousContent = perseusStr;
-    if (perseusStr === "") {
-      onLintErrorsGenerated([]);
-      return;
-    }
-    fetch("/api/internal/translations/lint_poentry?preview=1&lang=en", {
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        // The poentry linter verifies that the translation from
-        // the original text to the translated text is sane. We
-        // want to ensure that the translation from English to
-        // English is sane, so msgid === mstr.
-        msgid: perseusStr,
-        // msgid is the original text
-        msgstr: perseusStr,
-        // msgstr is the translated text
-        format: "perseus_text",
-        filename: ""
-      }),
-      method: "POST"
-    }).then(response => {
-      if (response.status >= 400) {
-        return {
-          status: "error",
-          message: "Could not run i18n linter."
-        };
-      }
-      return response.json();
-    }, rejection => {
-      return {
-        status: "error",
-        message: "Could not run i18n linter."
-      };
-    }).then(json => {
-      if (json.status === "error") {
-        onLintErrorsGenerated(["Some part of this text makes it untranslatable. " + "The specific message from the i18n linter was: " + json.message.replace(/\n/g, " ")]);
-      } else {
-        onLintErrorsGenerated([]);
-      }
-    });
-  }, DEBOUNCE_TIMEOUT);
-
-  /**
-   * Applies an array of errors generated by linters without position
-   * information (TranslationLinter and the legacy getSaveWarnings()) to the
-   * top of a Perseus tree.
-   */
-  applyLintErrors(parsedMarkdown, translationLintErrors) {
-    // These lint errors do not have position data associated with
-    // them, so we just plop them at the top.
-    if (translationLintErrors.length) {
-      const errorText = translationLintErrors.join("\n\n");
-      parsedMarkdown.unshift({
-        content: {
-          type: "text",
-          content: ""
-        },
-        insideTable: false,
-        message: errorText,
-        ruleName: "legacy-error",
-        severity: PerseusLinter.Rule.Severity.ERROR,
-        type: "lint"
-      });
-    }
-  }
-}
-
-/**
- * Preprocess TeX code to convert things that MathJax doesn't know how to handle
- * to things is does.
- */
-var preprocessTex = (texCode => texCode
-// Replace uses of \begin{align}...\end{align} which KaTeX doesn't
-// support (yet) with \begin{aligned}...\end{aligned} which renders
-// the same is supported by KaTeX.  It does the same for align*.
-// TODO(kevinb) update content to use aligned instead of align.
-// TODO(LEMS-1608) Remove this replacement as MathJax supports the
-// "align" macro correctly (and, in fact, it is not synonymous with
-// "aligned").
-.replace(/\{align[*]?\}/g, "{aligned}")
-// Replace non-breaking spaces with regular spaces.
-.replace(/[\u00a0]/g, " "));
-
-const {
-  interactiveSizes
-} = constants$1;
-
-// Note: these size cutoffs represent content-width cutoffs as specified in
-// http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
-// TODO(benkomalo): these values aren't used in JS outside of this file, but
-// are coupled to the values in styles/styles.less - DRY it up at some point
-const smMax = articleMaxWidthTableInPx;
-const mdMax = articleMaxWidthInPx;
-const containerSizeClass = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large",
-  XLARGE: "xlarge"
-};
-const getClassFromWidth = width => {
-  if (!width) {
-    return containerSizeClass.MEDIUM;
-  }
-  if (width <= smMax) {
-    return containerSizeClass.SMALL;
-  }
-  if (width <= mdMax) {
-    return containerSizeClass.MEDIUM;
-  }
-  return containerSizeClass.LARGE;
-};
-const getInteractiveBoxFromSizeClass = sizeClass => {
-  if (sizeClass === containerSizeClass.SMALL) {
-    return [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall];
-  }
-  return [interactiveSizes.defaultBoxSize, interactiveSizes.defaultBoxSize];
-};
-
-var sizingUtils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  containerSizeClass: containerSizeClass,
-  getClassFromWidth: getClassFromWidth,
-  getInteractiveBoxFromSizeClass: getInteractiveBoxFromSizeClass
-});
-
 const DEFAULT_ALIGNMENT$1 = "block";
 // NOTE(kevinb): "default" is not one in `validAlignments`.
 const DEFAULT_SUPPORTED_ALIGNMENTS = ["default"];
@@ -19261,6 +19087,9 @@ const getWidget = name => {
   }
   return widgets[name].widget;
 };
+const getWidgetValidator = name => {
+  return widgets[name]?.validator ?? null;
+};
 const getEditor = name => {
   return ___default["default"].has(editors, name) ? editors[name] : null;
 };
@@ -19566,6 +19395,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceEditor: replaceEditor,
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
+  getWidgetValidator: getWidgetValidator,
   getEditor: getEditor,
   getTransform: getTransform,
   getVersion: getVersion,
@@ -19585,6 +19415,222 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   isLintable: isLintable
 });
 
+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) {
+  return widgetIds.filter(id => {
+    const widget = widgets[id];
+    if (!widget || widget.static) {
+      // Static widgets shouldn't count as empty
+      return false;
+    }
+    let score = null;
+    const userInput = userInputMap[id];
+    const validator = getWidgetValidator(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 (validator) {
+      score = validator(userInput, widget.options, strings, locale);
+    }
+    if (score) {
+      return Util.scoreIsEmpty(score);
+    }
+  });
+}
+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 gradedWidgetIds = widgetIds.filter(id => {
+    const props = widgets[id];
+    const widgetIsGraded = props?.graded == null || props.graded;
+    const widgetIsStatic = !!props?.static;
+    // Ungraded widgets or widgets set to static shouldn't be graded.
+    return widgetIsGraded && !widgetIsStatic;
+  });
+  const widgetScores = {};
+  gradedWidgetIds.forEach(id => {
+    const widget = widgets[id];
+    if (!widget) {
+      return;
+    }
+    const userInput = userInputMap[id];
+    const validator = getWidgetValidator(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 (validator) {
+      widgetScores[id] = validator(userInput, widget.options, strings, locale);
+    }
+  });
+  return widgetScores;
+}
+
+/**
+ * TranslationLinter asynchronously calls Khan Academy's poentry linter.
+ *
+ * The poentry linter checks for issues that prevent content from being
+ * translated. This linter is KA-specific and so TranslationLinter does not do
+ * anything in non-KA environments.
+ */
+
+// A LintCB is called once the linter has been run.
+
+// msec to wait before we actually call the linter after receiving the
+// last call. The timer is reset if the lint is called during the wait.
+const DEBOUNCE_TIMEOUT = 1000;
+class TranslationLinter {
+  // To avoid linting when nothing has changed.
+  previousContent = null;
+
+  /**
+   * Runs the poentry linter on the given perseus string asynchronously.
+   *
+   * It doesn't do anything unless we're in a KA environment.
+   *
+   * onLintErrorsGenerated is called even if there are no errors. It is not
+   * called if perseusStr is unchanged from the last call.
+   *
+   * Linting is relatively expensive -- so we debounce linting each instance
+   * for some amount of time.
+   */
+  runLinter = _.debounce((perseusStr, onLintErrorsGenerated) => {
+    // TODO(FEI-5003): Do we still need to check for 'KA'?
+    if (typeof KA === "undefined") {
+      return;
+    }
+    if (perseusStr === this.previousContent) {
+      return;
+    }
+    this.previousContent = perseusStr;
+    if (perseusStr === "") {
+      onLintErrorsGenerated([]);
+      return;
+    }
+    fetch("/api/internal/translations/lint_poentry?preview=1&lang=en", {
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        // The poentry linter verifies that the translation from
+        // the original text to the translated text is sane. We
+        // want to ensure that the translation from English to
+        // English is sane, so msgid === mstr.
+        msgid: perseusStr,
+        // msgid is the original text
+        msgstr: perseusStr,
+        // msgstr is the translated text
+        format: "perseus_text",
+        filename: ""
+      }),
+      method: "POST"
+    }).then(response => {
+      if (response.status >= 400) {
+        return {
+          status: "error",
+          message: "Could not run i18n linter."
+        };
+      }
+      return response.json();
+    }, rejection => {
+      return {
+        status: "error",
+        message: "Could not run i18n linter."
+      };
+    }).then(json => {
+      if (json.status === "error") {
+        onLintErrorsGenerated(["Some part of this text makes it untranslatable. " + "The specific message from the i18n linter was: " + json.message.replace(/\n/g, " ")]);
+      } else {
+        onLintErrorsGenerated([]);
+      }
+    });
+  }, DEBOUNCE_TIMEOUT);
+
+  /**
+   * Applies an array of errors generated by linters without position
+   * information (TranslationLinter and the legacy getSaveWarnings()) to the
+   * top of a Perseus tree.
+   */
+  applyLintErrors(parsedMarkdown, translationLintErrors) {
+    // These lint errors do not have position data associated with
+    // them, so we just plop them at the top.
+    if (translationLintErrors.length) {
+      const errorText = translationLintErrors.join("\n\n");
+      parsedMarkdown.unshift({
+        content: {
+          type: "text",
+          content: ""
+        },
+        insideTable: false,
+        message: errorText,
+        ruleName: "legacy-error",
+        severity: PerseusLinter.Rule.Severity.ERROR,
+        type: "lint"
+      });
+    }
+  }
+}
+
+/**
+ * Preprocess TeX code to convert things that MathJax doesn't know how to handle
+ * to things is does.
+ */
+var preprocessTex = (texCode => texCode
+// Replace uses of \begin{align}...\end{align} which KaTeX doesn't
+// support (yet) with \begin{aligned}...\end{aligned} which renders
+// the same is supported by KaTeX.  It does the same for align*.
+// TODO(kevinb) update content to use aligned instead of align.
+// TODO(LEMS-1608) Remove this replacement as MathJax supports the
+// "align" macro correctly (and, in fact, it is not synonymous with
+// "aligned").
+.replace(/\{align[*]?\}/g, "{aligned}")
+// Replace non-breaking spaces with regular spaces.
+.replace(/[\u00a0]/g, " "));
+
+const {
+  interactiveSizes
+} = constants$1;
+
+// Note: these size cutoffs represent content-width cutoffs as specified in
+// http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
+// TODO(benkomalo): these values aren't used in JS outside of this file, but
+// are coupled to the values in styles/styles.less - DRY it up at some point
+const smMax = articleMaxWidthTableInPx;
+const mdMax = articleMaxWidthInPx;
+const containerSizeClass = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  XLARGE: "xlarge"
+};
+const getClassFromWidth = width => {
+  if (!width) {
+    return containerSizeClass.MEDIUM;
+  }
+  if (width <= smMax) {
+    return containerSizeClass.SMALL;
+  }
+  if (width <= mdMax) {
+    return containerSizeClass.MEDIUM;
+  }
+  return containerSizeClass.LARGE;
+};
+const getInteractiveBoxFromSizeClass = sizeClass => {
+  if (sizeClass === containerSizeClass.SMALL) {
+    return [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall];
+  }
+  return [interactiveSizes.defaultBoxSize, interactiveSizes.defaultBoxSize];
+};
+
+var sizingUtils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  containerSizeClass: containerSizeClass,
+  getClassFromWidth: getClassFromWidth,
+  getInteractiveBoxFromSizeClass: getInteractiveBoxFromSizeClass
+});
+
 class WidgetContainer extends React__namespace.Component {
   widgetRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
@@ -19731,8 +19777,7 @@ class WidgetContainer extends React__namespace.Component {
 }
 
 const {
-  mapObject,
-  mapObjectFromArray
+  mapObject
 } = objective_;
 const rContainsNonWhitespace = /\S/;
 const rImageURL = /(web\+graphie|https):\/\/[^\s]*/;
@@ -19759,6 +19804,7 @@ const isIdPathPrefix = function (prefixArray, wholeArray) {
   });
 };
 class Renderer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   _currentFocus;
   // @ts-expect-error - TS2564 - Property '_foundTextNodes' has no initializer and is not definitely assigned in the constructor.
   _foundTextNodes;
@@ -20062,11 +20108,7 @@ class Renderer extends React__namespace.Component {
     }
     let interactionTracker = this._interactionTrackers[id];
     if (!interactionTracker) {
-      interactionTracker = this._interactionTrackers[id] = new InteractionTracker(apiOptions.trackInteraction,
-      // @ts-expect-error - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
-      widgetInfo && widgetInfo.type, id,
-      // @ts-expect-error - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
-      getTracking(widgetInfo && widgetInfo.type));
+      interactionTracker = this._interactionTrackers[id] = new InteractionTracker(apiOptions.trackInteraction, widgetInfo && widgetInfo.type, id, getTracking(widgetInfo && widgetInfo.type));
     }
     return {
       ...widgetProps,
@@ -20880,23 +20922,9 @@ class Renderer extends React__namespace.Component {
     }, this);
     return state;
   };
-  emptyWidgets = () => {
-    // @ts-expect-error - TS2345 - Argument of type '(id: string) => boolean | undefined' is not assignable to parameter of type 'Iteratee<string[], boolean, string>'.
-    return ___default["default"].filter(this.widgetIds, id => {
-      const widgetInfo = this._getWidgetInfo(id);
-      if (widgetInfo.static) {
-        // Static widgets shouldn't count as empty
-        return false;
-      }
-      const widget = this.getWidgetInstance(id);
-      if (widget && widget.simpleValidate) {
-        const score = widget.simpleValidate(widgetInfo.options,
-        // @ts-expect-error - TS2345 - Argument of type 'null' is not assignable to parameter of type '((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined'.
-        null);
-        return Util.scoreIsEmpty(score);
-      }
-    });
-  };
+  emptyWidgets() {
+    return emptyWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
+  }
   _setWidgetProps = (id, newProps, cb, silent) => {
     this.setState(prevState => {
       const widgetProps = {
@@ -20960,8 +20988,11 @@ class Renderer extends React__namespace.Component {
 
   /**
    * Returns an array of the widget `.getUserInput()` results
+   *
+   * TODO: can we remove this?
+   * @deprecated use getUserInputMap
    */
-  getUserInput = () => {
+  getUserInput() {
     return this.widgetIds.map(id => {
       const widget = this.getWidgetInstance(id);
       if (widget && widget.getUserInput) {
@@ -20970,7 +21001,24 @@ class Renderer extends React__namespace.Component {
         return widget.getUserInput();
       }
     });
-  };
+  }
+
+  /**
+   * Returns an object of the widget `.getUserInput()` results
+   */
+  getUserInputMap() {
+    const userInputMap = {};
+    this.widgetIds.forEach(id => {
+      const widget = this.getWidgetInstance(id);
+      // Handle Groups, which have their own sets of widgets
+      if (widget?.getUserInputMap) {
+        userInputMap[id] = widget.getUserInputMap();
+      } else if (widget?.getUserInput) {
+        userInputMap[id] = widget.getUserInput();
+      }
+    });
+    return userInputMap;
+  }
 
   /**
    * Returns an array of all widget IDs in the order they occur in
@@ -20980,59 +21028,23 @@ class Renderer extends React__namespace.Component {
     return this.widgetIds;
   };
 
-  /**
-   * Returns the result of `.getUserInput()` for each widget, in
-   * a map from widgetId to userInput.
-   * NOTE(jeremy): This function is hauntingly similar to `getUserInput` with
-   * the major difference being that this function returns a map of
-   * `widgetID` => UserInput and `getUserInput` simply returns an array. It
-   * would be trivial to map between the results of each of these functions,
-   * so we should aim to remove one of these functions.
-   */
-  getUserInputForWidgets = () => {
-    return mapObjectFromArray(this.widgetIds, id => {
-      const widget = this.getWidgetInstance(id);
-      if (widget && widget.getUserInput) {
-        return widget.getUserInput();
-      }
-    });
-  };
-
   /**
    * 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 = () => {
-    const widgetProps = this.state.widgetInfo;
-    const gradedWidgetIds = ___default["default"].filter(this.widgetIds, id => {
-      const props = widgetProps[id];
-      const widgetIsGraded = props?.graded == null || props.graded;
-      const widgetIsStatic = !!props?.static;
-      // Ungraded widgets or widgets set to static shouldn't be graded.
-      return widgetIsGraded && !widgetIsStatic;
-    });
-    const widgetScores = {};
-    ___default["default"].each(gradedWidgetIds, id => {
-      const props = widgetProps[id];
-      const widget = this.getWidgetInstance(id);
-      // widget can be undefined if it hasn't yet been rendered
-      if (widget && widget.simpleValidate) {
-        widgetScores[id] = widget.simpleValidate({
-          ...props?.options,
-          scoring: true
-        });
-      }
-    });
-    return widgetScores;
-  };
+  scoreWidgets() {
+    return scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
+  }
 
   /**
    * Grades the content.
    */
-  score = () => {
-    return ___default["default"].reduce(this.scoreWidgets(), Util.combineScores, Util.noScore);
-  };
+  score() {
+    const scores = this.scoreWidgets();
+    const combinedScore = Util.flattenScores(scores);
+    return combinedScore;
+  }
   guessAndScore = () => {
     const totalGuess = this.getUserInput();
     const totalScore = this.score();
@@ -21144,12 +21156,12 @@ class Renderer extends React__namespace.Component {
       // If highlightLint is true and lint is detected, this call
       // will modify the parse tree by adding lint nodes that will
       // serve to highlight the lint when rendered
-      const context = {
+      const fullLinterContext = {
         content: this.props.content,
         widgets: this.props.widgets,
         ...this.props.linterContext
       };
-      PerseusLinter__namespace.runLinter(parsedMarkdown, context, true);
+      PerseusLinter__namespace.runLinter(parsedMarkdown, fullLinterContext, true);
 
       // Apply the lint errors from the last TranslationLinter run.
       // TODO(joshuan): Support overlapping dots.
@@ -21971,9 +21983,6 @@ class InputNumber extends React__namespace.Component {
     apiOptions: ApiOptions.defaults,
     linterContext: PerseusLinter.linterContextDefault
   };
-  static validate(state, rubric, strings) {
-    return inputNumberValidator(state, rubric, strings);
-  }
   static getUserInputFromProps(props) {
     return {
       currentValue: props.currentValue
@@ -22044,9 +22053,6 @@ class InputNumber extends React__namespace.Component {
   getUserInput() {
     return InputNumber.getUserInputFromProps(this.props);
   }
-  simpleValidate(rubric) {
-    return inputNumberValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   examples = () => {
     const {
       strings
@@ -22149,7 +22155,8 @@ var InputNumber$1 = {
   hidden: true,
   widget: InputNumber,
   transform: propTransform$3,
-  isLintable: true
+  isLintable: true,
+  validator: inputNumberValidator
 };
 
 const ParseTex = TexWrangler.parseTex;
@@ -22356,9 +22363,6 @@ class NumericInput extends React__namespace.Component {
     }
     return answerStrings[0];
   }
-  static validate(userInput, rubric, strings) {
-    return numericInputValidator(userInput, rubric, strings);
-  }
   state = {
     // keeps track of the other set of values when switching
     // between 0 and finite solutions
@@ -22391,9 +22395,6 @@ class NumericInput extends React__namespace.Component {
     const allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
     return !noFormsAccepted && !allFormsAccepted;
   };
-  simpleValidate(rubric) {
-    return numericInputValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   focus = () => {
     this.inputRef?.focus();
     return true;
@@ -22547,7 +22548,8 @@ var NumericInput$1 = {
   accessible: true,
   widget: NumericInput,
   transform: propsTransform,
-  isLintable: true
+  isLintable: true,
+  validator: numericInputValidator
 };
 
 /**
@@ -24368,16 +24370,15 @@ class Passage extends React__namespace.Component {
     highlights: {},
     linterContext: PerseusLinter.linterContextDefault
   };
+
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   state = {
     nLines: null,
     startLineNumbersAfter: 0,
     stylesAreApplied: false
   };
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
   componentDidMount() {
     this._updateState();
 
@@ -24586,21 +24587,6 @@ class Passage extends React__namespace.Component {
     };
   }
 
-  /**
-   * Misc functions
-   *
-   * These are misc widget functions used for the widget API
-   */
-
-  getUserInput() {
-    return null;
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
-
   /**
    * Rendering
    *
@@ -24744,7 +24730,8 @@ var Passage$1 = {
   transform: editorProps => {
     return ___default["default"].pick(editorProps, "passageTitle", "passageText", "footnotes", "showLineNumbers");
   },
-  isLintable: true
+  isLintable: true,
+  validator: () => noopValidator()
 };
 
 /**
@@ -24774,15 +24761,14 @@ class PassageRef extends React__namespace.Component {
     referenceNumber: 1,
     summaryText: ""
   };
+
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   state = {
     lineRange: null,
     content: null
   };
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
   componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
@@ -24801,11 +24787,6 @@ class PassageRef extends React__namespace.Component {
     window.removeEventListener("resize", this._throttledUpdateRange);
     this._isMounted = false;
   }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  getUserInput() {
-    return null;
-  }
   change = (() => {
     var _this = this;
     return function () {
@@ -24835,11 +24816,6 @@ class PassageRef extends React__namespace.Component {
       }
     }
   };
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     const {
       strings
@@ -24888,7 +24864,9 @@ var PassageRef$1 = {
   version: {
     major: 0,
     minor: 1
-  }
+  },
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /**
@@ -26307,9 +26285,6 @@ class Radio$1 extends React__namespace.Component {
     linterContext: PerseusLinter.linterContextDefault,
     showSolutions: "none"
   };
-  static validate(userInput, rubric, strings) {
-    return radioValidator(userInput, rubric, strings);
-  }
   static getUserInputFromProps(props) {
     // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
     // future timeline implementers: this used to be {value: i} before
@@ -26496,9 +26471,6 @@ class Radio$1 extends React__namespace.Component {
   getUserInput() {
     return Radio$1.getUserInputFromProps(this.props);
   }
-  simpleValidate(rubric) {
-    return radioValidator(this.getUserInput(), rubric, this.context.strings);
-  }
 
   /**
    * Turn on rationale display for the currently selected choices. Note that
@@ -26511,7 +26483,7 @@ class Radio$1 extends React__namespace.Component {
       choiceStates
     } = this.props;
     if (choiceStates) {
-      const score = this.simpleValidate(rubric);
+      const score = radioValidator(this.getUserInput(), rubric, this.context.strings);
       const widgetCorrect = score.type === "points" && score.total === score.earned;
       const newStates = choiceStates.map(state => ({
         ...state,
@@ -26791,7 +26763,8 @@ var Radio = {
     minor: 0
   },
   propUpgrades: propUpgrades$1,
-  isLintable: true
+  isLintable: true,
+  validator: radioValidator
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -26834,9 +26807,6 @@ class Categorizer extends React__namespace.Component {
   state = {
     uniqueId: ___default["default"].uniqueId("perseus_radio_")
   };
-  static validate(userInput, rubric, strings) {
-    return categorizerValidator(userInput, rubric, strings);
-  }
   static getUserInputFromProps(props) {
     return {
       values: props.values
@@ -26862,9 +26832,6 @@ class Categorizer extends React__namespace.Component {
     this.change("values", values);
     this.props.trackInteraction();
   }
-  simpleValidate(rubric) {
-    return categorizerValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   render() {
     const self = this;
 
@@ -27003,7 +26970,8 @@ var Categorizer$1 = {
   staticTransform: editorProps => {
     return ___default["default"].pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
-  isLintable: true
+  isLintable: true,
+  validator: categorizerValidator
 };
 
 /**
@@ -27108,11 +27076,6 @@ class CSProgram extends React__namespace.Component {
     // optional message
     message: null
   };
-
-  // The widget's grading function
-  static validate(state) {
-    return csProgramValidator(state);
-  }
   componentDidMount() {
     $__default["default"](window).on("message", this.handleMessageEvent);
   }
@@ -27154,9 +27117,6 @@ class CSProgram extends React__namespace.Component {
       message: this.props.message
     };
   }
-  simpleValidate() {
-    return csProgramValidator(this.getUserInput());
-  }
   render() {
     if (!this.props.programID) {
       return /*#__PURE__*/React__namespace.createElement("div", null);
@@ -27231,7 +27191,8 @@ var CSProgram$1 = {
   displayName: "CS Program",
   supportedAlignments: ["block", "full-width"],
   widget: CSProgram,
-  hidden: true
+  hidden: true,
+  validator: csProgramValidator
 };
 
 class Definition extends React__namespace.Component {
@@ -27241,18 +27202,9 @@ class Definition extends React__namespace.Component {
     definition: "definition goes here"
   };
 
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
-  getUserInput() {
-    return {};
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   render() {
     return /*#__PURE__*/React__namespace.createElement(DefinitionConsumer, null, _ref => {
       let {
@@ -27308,24 +27260,18 @@ var Definition$1 = {
   accessible: true,
   defaultAlignment: "inline",
   widget: Definition,
-  transform: x => x
+  transform: x => x,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 // The props are type `any` on purpose so that this can receive props
 // from any deprecated widget
 class DeprecatedStandin extends React__default["default"].Component {
   static contextType = PerseusI18nContext;
-  static validate() {
-    // Since this mean to replace an existing widget the learner
-    // WILL earn points for this widget
-    return noopValidator(1);
-  }
-  getUserInput() {
-    return {};
-  }
-  simpleValidate() {
-    return noopValidator(1);
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   render() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -27343,7 +27289,9 @@ var DeprecatedStandin$1 = {
   name: "deprecated-standin",
   displayName: "Deprecated Standin",
   widget: DeprecatedStandin,
-  hidden: true
+  hidden: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator(1)
 };
 
 function dropdownValidator(userInput, rubric) {
@@ -27370,9 +27318,6 @@ class Dropdown extends React__namespace.Component {
     placeholder: "",
     apiOptions: ApiOptions.defaults
   };
-  static validate(userInput, rubric) {
-    return dropdownValidator(userInput, rubric);
-  }
   focus = () => {
     // TODO(LP-10797): This focus() call doesn't do anything because our
     // root element is a <div> and that cannot be focused without a
@@ -27395,9 +27340,6 @@ class Dropdown extends React__namespace.Component {
       value: this.props.selected
     };
   }
-  simpleValidate(rubric) {
-    return dropdownValidator(this.getUserInput(), rubric);
-  }
   render() {
     const children = [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: "placeholder",
@@ -27438,7 +27380,8 @@ var Dropdown$1 = {
   defaultAlignment: "inline-block",
   accessible: true,
   widget: Dropdown,
-  transform: optionsTransform
+  transform: optionsTransform,
+  validator: dropdownValidator
 };
 
 // transform = _.identity
@@ -27451,10 +27394,6 @@ function mediaQueryIsMatched(mediaQuery) {
 }
 class Explanation extends React__namespace.Component {
   static contextType = PerseusI18nContext;
-  state = {
-    expanded: false
-  };
-  _mounted = false;
   static defaultProps = {
     showPrompt: "Explain",
     hidePrompt: "Hide explanation",
@@ -27463,10 +27402,13 @@ class Explanation extends React__namespace.Component {
     linterContext: PerseusLinter.linterContextDefault
   };
 
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
+  state = {
+    expanded: false
+  };
+  _mounted = false;
   componentDidMount() {
     this._mounted = true;
   }
@@ -27488,14 +27430,6 @@ class Explanation extends React__namespace.Component {
     });
     this.props.trackInteraction();
   };
-  getUserInput() {
-    return {};
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp__default["default"] : caretDown__default["default"];
@@ -27601,7 +27535,9 @@ var Explanation$1 = {
   defaultAlignment: "inline",
   widget: Explanation,
   transform: ___default["default"].identity,
-  isLintable: true
+  isLintable: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 class GradedGroupAnswerBar extends React__namespace.Component {
@@ -29133,9 +29069,6 @@ class Grapher extends React__namespace.Component {
   horizHairline;
   vertHairline;
   static defaultProps = DEFAULT_GRAPHER_PROPS;
-  static validate(state, rubric) {
-    return grapherValidator(state, rubric);
-  }
   static getUserInputFromProps(props) {
     return props.plot;
   }
@@ -29238,9 +29171,6 @@ class Grapher extends React__namespace.Component {
       this.vertHairline.hide();
     }
   };
-  simpleValidate(rubric) {
-    return grapherValidator(this.getUserInput(), rubric);
-  }
   getUserInput() {
     return Grapher.getUserInputFromProps(this.props);
   }
@@ -29332,7 +29262,8 @@ var Grapher$1 = {
   hidden: true,
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$4
+  staticTransform: staticTransform$4,
+  validator: grapherValidator
 };
 
 // exports has no 'transform'
@@ -29361,6 +29292,13 @@ class Group extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
+  getUserInputMap() {
+    return this.rendererRef?.getUserInputMap();
+  }
+
+  /**
+   * @deprecated getUserInputMap should be used for Groups
+   */
   getUserInput() {
     return this.rendererRef?.getUserInput();
   }
@@ -29373,11 +29311,6 @@ class Group extends React__namespace.Component {
     // (all our changes were in state):
     return null;
   };
-  simpleValidate() {
-    return this.rendererRef?.score() ?? {
-      type: "invalid"
-    };
-  }
 
   // Mobile API:
   getInputPaths() {
@@ -29527,9 +29460,6 @@ class Iframe extends React__namespace.Component {
     allowFullScreen: false,
     allowTopNavigation: false
   };
-  static validate(state) {
-    return iframeValidator(state);
-  }
   componentDidMount() {
     $__default["default"](window).on("message", this.handleMessageEvent);
   }
@@ -29571,9 +29501,6 @@ class Iframe extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  simpleValidate() {
-    return iframeValidator(this.getUserInput());
-  }
   render() {
     const style = {
       width: String(this.props.width),
@@ -29641,7 +29568,8 @@ var Iframe$1 = {
   displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
-  hidden: true
+  hidden: true,
+  validator: iframeValidator
 };
 
 const defaultBoxSize = 400;
@@ -29670,10 +29598,9 @@ class ImageWidget extends React__namespace.Component {
     linterContext: PerseusLinter.linterContextDefault
   };
 
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   change = (() => {
     var _this = this;
     return function () {
@@ -29683,14 +29610,6 @@ class ImageWidget extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  getUserInput() {
-    return null;
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     let image;
     const alt = this.props.caption === this.props.alt ? "" : this.props.alt;
@@ -29836,7 +29755,9 @@ var Image$1 = {
   supportedAlignments: editorAlignments,
   displayName: "Image",
   widget: ImageWidget,
-  isLintable: true
+  isLintable: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -29915,10 +29836,9 @@ class Interaction extends React__namespace.Component {
     elements: []
   };
 
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   state = {
     variables: _getInitialVariables(this.props.elements),
     functions: _getInitialFunctions(this.props.elements)
@@ -30026,18 +29946,6 @@ class Interaction extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  getUserInput() {
-    // TODO(eater): Perhaps we want to be able to record the state of the
-    // user's interaction. Unfortunately sending all the props will
-    // probably make the attempt payload too large. So for now, don't send
-    // anything.
-    return {};
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     const range = this.props.graph.range;
     let labels = this.props.graph.labels;
@@ -30445,7 +30353,9 @@ var Interactive = {
   displayName: "Interaction",
   widget: Interaction,
   transform: ___default["default"].identity,
-  hidden: true
+  hidden: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -30975,16 +30885,40 @@ function polar(r, th) {
   th = th * Math.PI / 180;
   return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
 }
-const findAngle = (point1, point2, vertex) => {
-  if (vertex === undefined) {
-    const x = point1[0] - point2[0];
-    const y = point1[1] - point2[1];
-    if (!x && !y) {
-      return 0;
-    }
-    return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+// This function calculates the angle between two points and an optional vertex.
+// If the vertex is not provided, the angle is measured between the two points.
+// This does not account for reflex angles or clockwise position.
+const getAngleFromVertex = (point, vertex) => {
+  const x = point[0] - vertex[0];
+  const y = point[1] - vertex[1];
+  if (!x && !y) {
+    return 0;
   }
-  return findAngle(point1, vertex) - findAngle(point2, vertex);
+  return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+};
+
+// This function calculates the clockwise angle between three points,
+// and is used to generate the labels and equation strings of the
+// current angle for the interactive graph.
+const getClockwiseAngle = function (coords) {
+  let allowReflexAngles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const coordsCopy = [...coords];
+  // The coords are saved as [point1, vertex, point2] in the interactive graph
+  const areClockwise = clockwise$1([coordsCopy[0], coordsCopy[2], coordsCopy[1]]);
+
+  // We may need to reverse the coordinates if we allow
+  // reflex angles and the points are not in clockwise order.
+  const shouldReverseCoords = !areClockwise || allowReflexAngles;
+
+  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
+  const clockwiseCoords = shouldReverseCoords ? coordsCopy.reverse() : coordsCopy;
+
+  // Calculate the angles between the two points and get the difference
+  // between the two angles to get the clockwise angle.
+  const startAngle = getAngleFromVertex(clockwiseCoords[0], clockwiseCoords[1]);
+  const endAngle = getAngleFromVertex(clockwiseCoords[2], clockwiseCoords[1]);
+  const angle = (startAngle + 360 - endAngle) % 360;
+  return angle;
 };
 
 const defaultGraphConfig = {
@@ -33416,8 +33350,8 @@ const Angle = _ref2 => {
   const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
 
   // Calculate the angles between the two points
-  const startAngle = findAngle(clockwiseCoords[0], vertex);
-  const endAngle = findAngle(clockwiseCoords[1], vertex);
+  const startAngle = getAngleFromVertex(clockwiseCoords[0], vertex);
+  const endAngle = getAngleFromVertex(clockwiseCoords[1], vertex);
   const angle = (startAngle + 360 - endAngle) % 360;
 
   // Check if the angle is reflexive
@@ -34506,7 +34440,9 @@ const MafsGraph = props => {
     analytics.onAnalyticsEvent({
       type: "perseus:interactive-graph-widget:rendered",
       payload: {
-        type
+        type,
+        widgetType: "INTERACTIVE_GRAPH",
+        widgetId: "interactive-graph"
       }
     });
   });
@@ -35793,7 +35729,7 @@ function boundAndSnapAngleVertex(_ref2, _ref3) {
   for (const i of [0, 2]) {
     const oldPoint = coordsCopy[i];
     let newPoint = mafs.vec.add(oldPoint, delta);
-    let angle = findAngle(newVertex, newPoint);
+    let angle = getAngleFromVertex(newVertex, newPoint);
     angle *= Math.PI / 180;
     newPoint = constrainToBoundsOnAngle(newPoint, angle, range, snapStep);
     newPoints[i] = newPoint;
@@ -35866,7 +35802,7 @@ function boundAndSnapAngleEndPoints(destinationPoint, _ref5, index) {
   const vertex = coords[1];
 
   // Gets the angle between the coords and the vertex
-  let angle = findAngle(coordsCopy[index], vertex);
+  let angle = getAngleFromVertex(coordsCopy[index], vertex);
 
   // Snap the angle to the nearest multiple of snapDegrees (if provided)
   angle = Math.round((angle - offsetDegrees) / snap) * snap + offsetDegrees;
@@ -35913,8 +35849,8 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
     angles[rel(j)] = Math.round(angles[rel(j)]);
   });
   const getAngle = function (a, vertex, b) {
-    const angle = findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
-    return (angle + 360) % 360;
+    const angle = getClockwiseAngle([coordsCopy[rel(a)], coordsCopy[rel(vertex)], coordsCopy[rel(b)]]);
+    return angle;
   };
   const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
   innerAngles[2] = 180 - (innerAngles[0] + innerAngles[1]);
@@ -35941,7 +35877,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
   const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
 
   // Angle at the second vertex of the polygon
-  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = getAngleFromVertex(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Uses the length of the side of the polygon (radial coordinate)
   // and the angle between the first and second sides of the
@@ -35992,7 +35928,7 @@ function boundAndSnapToSides(destinationPoint, _ref7, index) {
   const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
-  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = getAngleFromVertex(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Returns true if the points form a counter-clockwise turn;
   // a.k.a if the point is on the left or right of the polygon.
@@ -36101,7 +36037,8 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
   const numPoints = graph.type === "point" ? graph.numPoints : null;
   const numSides = graph.type === "polygon" ? graph.numSides : null;
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
-  const showAngles = graph.type === "polygon" ? graph.showAngles : null;
+  const showAngles = graph.type === "polygon" || graph.type === "angle" ? graph.showAngles : null;
+  const allowReflexAngles = graph.type === "angle" ? graph.allowReflexAngles : null;
   const showSides = graph.type === "polygon" ? graph.showSides : null;
   const startCoords = "startCoords" in graph ? graph.startCoords : undefined;
   const originalPropsRef = React.useRef(props);
@@ -36114,7 +36051,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, startCoords]);
+  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, startCoords, allowReflexAngles]);
 
   // If the graph is static, it always displays the correct answer. This is
   // standard behavior for Perseus widgets (e.g. compare the Radio widget).
@@ -36302,17 +36239,15 @@ function interactiveGraphValidator(userInput, rubric) {
     } else if (userInput.type === "angle" && rubric.correct.type === "angle") {
       const guess = userInput.coords;
       const correct = rubric.correct.coords;
+      const allowReflexAngles = rubric.correct.allowReflexAngles;
       let match;
       if (rubric.correct.match === "congruent") {
         const angles = ___default["default"].map([guess, correct], function (coords) {
-          const angle = GraphUtils.findAngle(
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[2],
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[0],
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[1]);
-          return (angle + 360) % 360;
+          if (!coords) {
+            return false;
+          }
+          const angle = getClockwiseAngle(coords, allowReflexAngles);
+          return angle;
         });
         // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
         match = eq$1(...angles);
@@ -37215,7 +37150,7 @@ class LegacyInteractiveGraph extends React__namespace.Component {
           angles[rel(j)] = Math.round(angles[rel(j)]);
         });
         const getAngle = function (a, vertex, b) {
-          const angle = GraphUtils.findAngle(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
+          const angle = GraphUtils.findAngleDeprecated(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
           return (angle + 360) % 360;
         };
         const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
@@ -37234,7 +37169,7 @@ class LegacyInteractiveGraph extends React__namespace.Component {
 
         // Solve for side by using the law of sines
         const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
-        const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
+        const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
         const offset = polar$1(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
         return this.graphie?.addPoints(coords[rel(-1)], offset);
       }
@@ -37257,7 +37192,7 @@ class LegacyInteractiveGraph extends React__namespace.Component {
 
         // Solve for angle by using the law of cosines
         const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
-        const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
+        const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
         const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
         const offset = polar$1(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
         return this.graphie?.addPoints(coords[rel(-1)], offset);
@@ -37577,9 +37512,6 @@ class LegacyInteractiveGraph extends React__namespace.Component {
   getUserInput() {
     return InteractiveGraph.getUserInputFromProps(this.props);
   }
-  simpleValidate(rubric) {
-    return interactiveGraphValidator(this.getUserInput(), rubric);
-  }
   focus = $__default["default"].noop;
   render() {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
@@ -37652,9 +37584,6 @@ class InteractiveGraph extends React__namespace.Component {
     }
     throw new perseusCore.PerseusError("Cannot getUserInput from a graph that has never rendered", perseusCore.Errors.NotAllowed);
   }
-  simpleValidate(rubric) {
-    return interactiveGraphValidator(this.getUserInput(), rubric);
-  }
   render() {
     // Mafs shim
     const mafsFlags = this.props.apiOptions?.flags?.["mafs"];
@@ -37981,12 +37910,10 @@ class InteractiveGraph extends React__namespace.Component {
       throw makeInvalidTypeError("getAngleEquationString", "angle");
     }
     const coords = InteractiveGraph.getAngleCoords(props.graph, props);
-    const angle = GraphUtils.findAngle(coords[2], coords[0], coords[1]);
+    const allowReflexAngles = props.graph.allowReflexAngles;
+    const angle = getClockwiseAngle(coords, allowReflexAngles);
     return angle.toFixed(0) + "\u00B0 angle" + " at (" + coords[1].join(", ") + ")";
   }
-  static validate(userInput, rubric) {
-    return interactiveGraphValidator(userInput, rubric);
-  }
   static getUserInputFromProps(props) {
     return props.graph;
   }
@@ -38023,7 +37950,8 @@ var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
-  staticTransform: staticTransform$3
+  staticTransform: staticTransform$3,
+  validator: interactiveGraphValidator
 };
 
 const black = "#000000";
@@ -39399,9 +39327,6 @@ class LabelImage extends React__namespace.Component {
   // The rendered markers on the question image for labeling.
   _markers;
   _mounted = false;
-  static validate(state, rubric) {
-    return labelImageValidator(state);
-  }
 
   /**
    * Test whether point is contained within triangle.
@@ -39594,9 +39519,6 @@ class LabelImage extends React__namespace.Component {
   componentWillUnmount() {
     this._mounted = false;
   }
-  simpleValidate(rubric) {
-    return labelImageValidator(this.getUserInput());
-  }
   getUserInput() {
     const {
       markers
@@ -39962,19 +39884,13 @@ const LabelImageWithDependencies = /*#__PURE__*/React__namespace.forwardRef((pro
     analytics: deps.analytics
   }, props));
 });
-
-// HACK: Propogate "static" methods onto our wrapper component.
-// In the future we should adjust client apps to not depend on these static
-// methods and instead adjust Peresus to provide these facilities through
-// instance methods on our Renderers.
-// @ts-expect-error - TS2339 - Property 'validate' does not exist on type
-LabelImageWithDependencies.validate = labelImageValidator;
 var LabelImage$1 = {
   name: "label-image",
   displayName: "Label Image",
   widget: LabelImageWithDependencies,
   accessible: true,
-  isLintable: true
+  isLintable: true,
+  validator: labelImageValidator
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -40716,9 +40632,6 @@ class Matcher extends React__namespace.Component {
     rightHeight: 0,
     texRendererLoaded: false
   };
-  static validate(state, rubric) {
-    return matcherValidator(state, rubric);
-  }
   changeAndTrack = e => {
     this.props.onChange(e);
     this.props.trackInteraction();
@@ -40770,9 +40683,6 @@ class Matcher extends React__namespace.Component {
     // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
     this.refs.right.moveOptionToIndex(option, index);
   };
-  simpleValidate(rubric) {
-    return matcherValidator(this.getUserInput(), rubric);
-  }
   render() {
     // To minimize layout shift, we display a spinner until our math
     // renderer is ready to render the math inside the matcher. To
@@ -40899,7 +40809,8 @@ var Matcher$1 = {
   name: "matcher",
   displayName: "Matcher (two column)",
   widget: Matcher,
-  isLintable: true
+  isLintable: true,
+  validator: matcherValidator
 };
 
 function matrixValidator(state, rubric, strings) {
@@ -41040,9 +40951,6 @@ class Matrix extends React__namespace.Component {
     apiOptions: ApiOptions.defaults,
     linterContext: PerseusLinter.linterContextDefault
   };
-  static validate(state, rubric, strings) {
-    return matrixValidator(state, rubric, strings);
-  }
   state = {
     enterTheMatrix: 0
   };
@@ -41185,9 +41093,6 @@ class Matrix extends React__namespace.Component {
       answers: this.props.answers
     };
   }
-  simpleValidate(rubric) {
-    return matrixValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   render() {
     // Set the input sizes through JS so we can control the size of the
     // brackets. (If we set them in CSS we won't know values until the
@@ -41372,7 +41277,8 @@ var Matrix$1 = {
   widget: Matrix,
   transform: propTransform$1,
   staticTransform: staticTransform$2,
-  isLintable: true
+  isLintable: true,
+  validator: matrixValidator
 };
 
 const defaultImage = {
@@ -41381,7 +41287,6 @@ const defaultImage = {
   left: 0
 };
 class Measurer extends React__namespace.Component {
-  static validate = noopValidator;
   static defaultProps = {
     box: [480, 480],
     image: {},
@@ -41394,6 +41299,10 @@ class Measurer extends React__namespace.Component {
     rulerPixels: 40,
     rulerLength: 10
   };
+
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   state = {};
   ruler;
   protractor;
@@ -41446,12 +41355,6 @@ class Measurer extends React__namespace.Component {
       });
     }
   }
-  getUserInput() {
-    return {};
-  }
-  simpleValidate() {
-    return noopValidator(1);
-  }
   render() {
     const image = ___default["default"].extend({}, defaultImage, this.props.image);
 
@@ -41498,7 +41401,9 @@ var Measurer$1 = {
     major: 1,
     minor: 0
   },
-  propUpgrades: propUpgrades
+  propUpgrades: propUpgrades,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator(1)
 };
 
 /**
@@ -42371,18 +42276,9 @@ class MoleculeWidget extends React__namespace.Component {
     rotationAngle: 0
   };
 
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
-  getUserInput() {
-    return [];
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  validate() {
-    return noopValidator();
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   render() {
     return /*#__PURE__*/React__namespace.createElement(Molecule, {
       widgetId: this.props.widgetId,
@@ -42395,7 +42291,8 @@ var Molecule$1 = {
   name: "molecule-renderer",
   displayName: "Molecule renderer",
   hidden: true,
-  widget: MoleculeWidget
+  widget: MoleculeWidget,
+  validator: () => noopValidator()
 };
 
 function numberLineValidator(state, rubric) {
@@ -42540,18 +42437,16 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
     results.push(graphie.line([x, -0.2], [x, 0.2]));
     const labelTicks = props.labelTicks;
     if (labelTicks || props.labelStyle === "decimal ticks") {
-      results.push(_label(graphie, props.labelStyle, x, x, base));
+      if (x === leftLabel || x === rightLabel) {
+        results.push(graphie.style({
+          color: KhanColors.BLUE
+        }, () => _label(graphie, props.labelStyle, x, x, base)));
+      } else {
+        results.push(_label(graphie, props.labelStyle, x, x, base));
+      }
     }
   }
 
-  // Render the text labels
-  results.push(graphie.style(props.isMobile ? {
-    color: KhanColors.BLUE
-  } : {}, () => _label(graphie, props.labelStyle, leftLabel, leftLabel, base)));
-  results.push(graphie.style(props.isMobile ? {
-    color: KhanColors.BLUE
-  } : {}, () => _label(graphie, props.labelStyle, rightLabel, rightLabel, base)));
-
   // Render the labels' lines
   graphie.style({
     stroke: KhanColors.BLUE,
@@ -42584,9 +42479,6 @@ class NumberLine extends React__namespace.Component {
   state = {
     numDivisionsEmpty: false
   };
-  static validate(state, rubric) {
-    return numberLineValidator(state, rubric);
-  }
   change = (() => {
     var _this = this;
     return function () {
@@ -42879,9 +42771,6 @@ class NumberLine extends React__namespace.Component {
       divisionRange: this.props.divisionRange
     };
   }
-  simpleValidate(rubric) {
-    return numberLineValidator(this.getUserInput(), rubric);
-  }
   render() {
     const {
       strings
@@ -42985,7 +42874,8 @@ var NumberLine$1 = {
   displayName: "Number line",
   widget: NumberLine,
   transform: numberLineTransform,
-  staticTransform: staticTransform$1
+  staticTransform: staticTransform$1,
+  validator: numberLineValidator
 };
 
 function ordererValidator(userInput, rubric) {
@@ -43195,9 +43085,6 @@ class Orderer extends React__namespace.Component {
     animateTo: null,
     grabPos: null
   };
-  static validate(userInput, rubric) {
-    return ordererValidator(userInput, rubric);
-  }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!___default["default"].isEqual(this.props.current, nextProps.current)) {
       this.setState({
@@ -43437,9 +43324,6 @@ class Orderer extends React__namespace.Component {
       })
     };
   }
-  simpleValidate(rubric) {
-    return ordererValidator(this.getUserInput(), rubric);
-  }
   render() {
     // This is the card we are currently dragging
     const dragging = this.state.dragging && /*#__PURE__*/React__namespace.createElement(Card
@@ -43549,7 +43433,8 @@ var Orderer$1 = {
   displayName: "Orderer",
   hidden: true,
   widget: Orderer,
-  isLintable: true
+  isLintable: true,
+  validator: ordererValidator
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -43560,15 +43445,9 @@ class PassageRefTarget extends React__namespace.Component {
     linterContext: PerseusLinter.linterContextDefault
   };
 
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
-
-  // TODO passage-ref-target isn't interactive; remove
-  getUserInput() {
-    return null;
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
 
   // TODO passage-ref-target isn't interactive; remove
   change = (() => {
@@ -43580,11 +43459,6 @@ class PassageRefTarget extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     return /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.content
@@ -43613,7 +43487,9 @@ var PassageRefTarget$1 = {
     major: 0,
     minor: 0
   },
-  isLintable: true
+  isLintable: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /**
@@ -43625,6 +43501,10 @@ class PhetSimulation extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   iframeRef = /*#__PURE__*/React__namespace.createRef();
   locale;
+
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   state = {
     url: null,
     banner: null
@@ -43643,11 +43523,6 @@ class PhetSimulation extends React__namespace.Component {
     }
   }
 
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  getUserInput() {
-    return null;
-  }
-
   // kaLocales and PhET locales use different formats and abbreviations.
   // PhET accepts different formats, i.e. kaLocale's hyphens, but it does not accept
   // different abbreviations, so in points of divergence of abbreviations, we need to
@@ -43867,9 +43742,6 @@ class Plotter extends React__namespace.Component {
     // bottom label.
     categoryHeights: {}
   };
-  static validate(userInput, rubric) {
-    return plotterValidator(userInput, rubric);
-  }
   componentDidMount() {
     this._isMounted = true;
     this.setupGraphie(this.state);
@@ -44614,9 +44486,6 @@ class Plotter extends React__namespace.Component {
   getUserInput() {
     return this.state.values;
   }
-  simpleValidate(rubric) {
-    return plotterValidator(this.getUserInput(), rubric);
-  }
   render() {
     // TODO(kevinb) actually compute the size of the graphie correctly and
     // make it that size so we don't have to add extra padding.  The value
@@ -44642,7 +44511,8 @@ var Plotter$1 = {
   displayName: "Plotter",
   hidden: true,
   widget: Plotter,
-  staticTransform: staticTransform
+  staticTransform: staticTransform,
+  validator: plotterValidator
 };
 
 /**
@@ -44737,9 +44607,6 @@ class Sorter extends React__namespace.Component {
     onChange: function () {},
     linterContext: PerseusLinter.linterContextDefault
   };
-  static validate(userInput, rubric) {
-    return sorterValidator(userInput, rubric);
-  }
   state = {
     changed: false
   };
@@ -44782,9 +44649,6 @@ class Sorter extends React__namespace.Component {
     // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
     this.refs.sortable.moveOptionToIndex(option, index);
   };
-  simpleValidate(rubric) {
-    return sorterValidator(this.getUserInput(), rubric);
-  }
   render() {
     const options = shuffle(this.props.correct, this.props.problemNum, /* ensurePermuted */true);
     const {
@@ -44810,7 +44674,8 @@ var Sorter$1 = {
   name: "sorter",
   displayName: "Sorter",
   widget: Sorter,
-  isLintable: true
+  isLintable: true,
+  validator: sorterValidator
 };
 
 function tableValidator(state, rubric, strings) {
@@ -44918,9 +44783,6 @@ class Table extends React__namespace.Component {
       linterContext: PerseusLinter.linterContextDefault
     };
   }();
-  static validate(state, rubric, strings) {
-    return tableValidator(state, rubric, strings);
-  }
   _getRows = () => {
     return this.props.answers.length;
   };
@@ -44949,9 +44811,6 @@ class Table extends React__namespace.Component {
       headers: headers
     });
   };
-  simpleValidate(rubric) {
-    return tableValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   _handleFocus = inputPath => {
     this.props.onFocus(inputPath);
   };
@@ -45095,7 +44954,8 @@ var Table$1 = {
   widget: Table,
   transform: propTransform,
   hidden: true,
-  isLintable: true
+  isLintable: true,
+  validator: tableValidator
 };
 
 /**
@@ -45181,22 +45041,9 @@ const IS_VIMEO = /(vimeo\.com)/;
  */
 class Video extends React__namespace.Component {
   static contextType = PerseusI18nContext;
-  /**
-   * This is the widget's grading function.
-   * Points for videos are tallied by the embedded video itself, in the case
-   * of Khan Academy videos.
-   */ // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
-  getUserInput = () => {
-    return null;
-  };
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
+  // this just helps with TS weak typing when a Widget
+  // doesn't implement any Widget methods
+  isWidget = true;
   change = (() => {
     var _this = this;
     return function () {
@@ -45265,7 +45112,9 @@ var Video$1 = {
   displayName: "Video",
   defaultAlignment: "block",
   supportedAlignments: ["block", "float-left", "float-right", "full-width"],
-  widget: Video
+  widget: Video,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -45309,7 +45158,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "36.1.1";
+const libVersion = "37.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46035,7 +45884,7 @@ class ServerItemRenderer extends React__namespace.Component {
     });
 
     // Call the interactionCallback, if it exists, with the current user input data
-    this.props.apiOptions?.interactionCallback?.(this.questionRenderer.getUserInputForWidgets());
+    this.props.apiOptions?.interactionCallback?.(this.questionRenderer.getUserInputMap());
   };
   focus() {
     return this.questionRenderer.focus();
@@ -48661,11 +48510,12 @@ function parsePerseusItem(json) {
   throw new Error("Something went wrong.");
 }
 function buildRandomString() {
+  let capitalize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let randomString = "";
   const randomLength = Math.floor(Math.random() * 8) + 3;
   for (let i = 0; i < randomLength; i++) {
     const randomLetter = String.fromCharCode(97 + Math.floor(Math.random() * 26));
-    randomString += randomLetter;
+    randomString += capitalize && i === 0 ? randomLetter.toUpperCase() : randomLetter;
   }
   return randomString;
 }
@@ -48673,9 +48523,12 @@ function buildRandomPhrase() {
   const phrases = [];
   const randomLength = Math.floor(Math.random() * 10) + 5;
   for (let i = 0; i < randomLength; i++) {
-    phrases.push(buildRandomString());
+    phrases.push(buildRandomString(i === 0));
   }
-  return phrases.join(" ");
+  const modifierStart = ["**", "$"];
+  const modifierEnd = ["**", "$"];
+  const modifierIndex = Math.floor(Math.random() * modifierStart.length);
+  return `${modifierStart[modifierIndex]}${phrases.join(" ")}${modifierEnd[modifierIndex]}`;
 }
 function buildTestData(testObject) {
   return `{"data":{"assessmentItem":{"__typename":"AssessmentItemOrError","error":null,"item":{"__typename":"AssessmentItem","id":"x890b3c70f3e8f4a6","itemData":"${testObject}","problemType":"Type 1","sha":"c7284a3ad65214b4e62bccce236d92f7f5d35941"}}}}`;
@@ -48942,6 +48795,7 @@ exports.getAngleCoords = getAngleCoords;
 exports.getAnswerFromUserInput = getAnswerFromUserInput;
 exports.getAnswersFromWidgets = getAnswersFromWidgets;
 exports.getCircleCoords = getCircleCoords;
+exports.getClockwiseAngle = getClockwiseAngle;
 exports.getCorrectAnswerForWidgetId = getCorrectAnswerForWidgetId;
 exports.getImagesWithoutAltData = getImagesWithoutAltData;
 exports.getLineCoords = getLineCoords;