@khanacademy/perseus 12.3.0 → 13.0.0

package/dist/es/index.js

@@ -81,6 +81,7 @@ const customKeyTranslator = _extends({}, keyTranslator, {
 class MathInput extends React.Component {
   constructor(...args) {
     super(...args);
+    // @ts-expect-error - TS2564 - Property 'mouseDown' has no initializer and is not definitely assigned in the constructor.
     this.mouseDown = void 0;
     this.__mathFieldWrapperRef = null;
     this.__mathField = null;
@@ -94,7 +95,7 @@ class MathInput extends React.Component {
       const inputModifier = customKeyTranslator[value];
       if (inputModifier) {
         inputModifier(input, value);
-        input == null ? void 0 : input.focus();
+        input == null || input.focus();
         return;
       }
 
@@ -105,11 +106,11 @@ class MathInput extends React.Component {
       if (_(value).isFunction()) {
         value(input);
       } else if (value[0] === "\\") {
-        input == null ? void 0 : input.cmd(value).focus();
+        input == null || input.cmd(value).focus();
       } else {
-        input == null ? void 0 : input.write(value).focus();
+        input == null || input.write(value).focus();
       }
-      input == null ? void 0 : input.focus();
+      input == null || input.focus();
     };
     this.mathField = () => {
       if (!this.__mathField && this.__mathFieldWrapperRef) {
@@ -179,11 +180,13 @@ class MathInput extends React.Component {
     };
     this.focus = () => {
       var _this$mathField;
-      (_this$mathField = this.mathField()) == null ? void 0 : _this$mathField.focus();
+      (_this$mathField = this.mathField()) == null || _this$mathField.focus();
       this.setState({
         focused: true
       });
     };
+    // removing mathfield focus here makes the cursor vanished when the
+    // input is still focused
     this.blur = () => this.setState({
       focused: false
     });
@@ -213,7 +216,7 @@ class MathInput extends React.Component {
     var _this$mathField2;
     // Ideally, we would be able to pass an initial value directly into
     // the constructor
-    (_this$mathField2 = this.mathField()) == null ? void 0 : _this$mathField2.latex(this.props.value);
+    (_this$mathField2 = this.mathField()) == null || _this$mathField2.latex(this.props.value);
   }
   openKeypad() {
     if (this.props.buttonsVisible === "never") {
@@ -433,7 +436,6 @@ var dependencies = /*#__PURE__*/Object.freeze({
 // TODO(LP-11481): Change the primary API we use for logging in Perseus to use
 // getDependencies() internally... simplify usage to just using a "singleton"
 // which get's the injected logger.
-
 /**
  * @typedef {Object} Errors utility for referencing the Perseus error taxonomy.
  */
@@ -476,6 +478,10 @@ const Errors = Object.freeze({
  * @type {ErrorKind} The kind of error being reported
  */
 
+/**
+ * Provides logging infrastructure for Perseus
+ */
+
 const Log = {
   // Logs a message
   log: (message, extra) => {
@@ -1203,6 +1209,10 @@ const KhanMath = {
 
 /* eslint-disable no-useless-escape */
 const MAXERROR_EPSILON = Math.pow(2, -42);
+
+// TOOD(kevinb): Figure out how this relates to KEScore in
+// perseus-all-package/types.js and see if there's a way to
+// unify these types.
 const errors = {
   APPROXIMATED_PI_ERROR: i18n._("Your answer is close, but you may " + "have approximated pi. Enter your " + "answer as a multiple of pi, like " + "<code>12\\ \\text{pi}</code> or " + "<code>2/3\\ \\text{pi}</code>"),
   EXTRA_SYMBOLS_ERROR: i18n._("We could not understand your " + "answer. Please check your answer for extra " + "text or symbols."),
@@ -1934,6 +1944,10 @@ class Expression extends React.Component {
       // this.isMounted() but is still considered an anti-pattern.
       this._isMounted = true;
     };
+    // Whenever the input value changes, attempt to parse it.
+    //
+    // Clear any errors if this parse succeeds, show an error within a second
+    // if it fails.
     this.componentDidUpdate = prevProps => {
       if (!_.isEqual(this.props.value, prevProps.value) || !_.isEqual(this.props.functions, prevProps.functions)) {
         this.setState({
@@ -1974,7 +1988,7 @@ class Expression extends React.Component {
       // otherwise, we may just be checking validity after changes.
       if (scoring && score.type !== "invalid") {
         var _this$props$analytics;
-        (_this$props$analytics = this.props.analytics) == null ? void 0 : _this$props$analytics.onAnalyticsEvent({
+        (_this$props$analytics = this.props.analytics) == null || _this$props$analytics.onAnalyticsEvent({
           type: "perseus:expression-evaluated",
           payload: {
             result: score.earned === score.total ? "correct" : "incorrect",
@@ -2005,7 +2019,7 @@ class Expression extends React.Component {
     };
     this._handleFocus = () => {
       var _this$props$analytics2;
-      (_this$props$analytics2 = this.props.analytics) == null ? void 0 : _this$props$analytics2.onAnalyticsEvent({
+      (_this$props$analytics2 = this.props.analytics) == null || _this$props$analytics2.onAnalyticsEvent({
         type: "perseus:expression-focused",
         payload: null
       });
@@ -2041,6 +2055,7 @@ class Expression extends React.Component {
       /* c8 ignore next */
       return [[]];
     };
+    // TODO(Nicole): I believe this is going away and won't be needed anymore
     this.getGrammarTypeForPath = inputPath => {
       /* c8 ignore next */
       return "expression";
@@ -2228,7 +2243,7 @@ class Expression extends React.Component {
           // this.props.keypadElement should always be set
           // when apiOptions.customKeypad is set, but how
           // to convince TypeScript of this?
-          (_this$props$keypadEle = this.props.keypadElement) == null ? void 0 : _this$props$keypadEle.configure(this.props.keypadConfiguration, () => {
+          (_this$props$keypadEle = this.props.keypadElement) == null || _this$props$keypadEle.configure(this.props.keypadConfiguration, () => {
             if (this._isMounted) {
               this._handleFocus();
             }
@@ -2472,6 +2487,9 @@ async function getImageSizeModern(url) {
 }
 
 /* eslint-disable @babel/no-invalid-this, getter-return, one-var */
+
+// TODO: dedupe this with Coord in interactive2/types.js
+
 let supportsPassive = false;
 const nestedMap$2 = function nestedMap(children, func, context) {
   if (Array.isArray(children)) {
@@ -3152,12 +3170,12 @@ function getImageSize(url, callback) {
     // width in a full-screen article.
     if (img.width === 0 && img.height === 0) {
       var _document$body;
-      (_document$body = document.body) == null ? void 0 : _document$body.appendChild(img);
+      (_document$body = document.body) == null || _document$body.appendChild(img);
       // TODO(scottgrant): Remove this use of _.defer.
       _.defer(function () {
         var _document$body2;
         callback(img.clientWidth, img.clientHeight);
-        (_document$body2 = document.body) == null ? void 0 : _document$body2.removeChild(img);
+        (_document$body2 = document.body) == null || _document$body2.removeChild(img);
       });
     } else {
       callback(img.width, img.height);
@@ -3561,11 +3579,11 @@ Zoom.prototype._zoomOriginal = function () {
   $(this._targetImage).css("visibility", "hidden");
   this._backdrop = document.createElement("div");
   this._backdrop.className = "zoom-backdrop";
-  (_document$body = document.body) == null ? void 0 : _document$body.appendChild(this._backdrop);
+  (_document$body = document.body) == null || _document$body.appendChild(this._backdrop);
   this._overlay = document.createElement("div");
   this._overlay.className = "zoom-overlay";
-  (_document$body2 = document.body) == null ? void 0 : _document$body2.appendChild(this._overlay);
-  (_this$_overlay = this._overlay) == null ? void 0 : _this$_overlay.appendChild(this.$zoomedImage[0]);
+  (_document$body2 = document.body) == null || _document$body2.appendChild(this._overlay);
+  (_this$_overlay = this._overlay) == null || _this$_overlay.appendChild(this.$zoomedImage[0]);
   this._calculateZoom();
   this._triggerAnimation();
 };
@@ -10593,7 +10611,7 @@ _.extend(GraphUtils.Graphie.prototype, {
       }
     }
     if (!options.allowScratchpad) {
-      options.setDrawingAreaAvailable == null ? void 0 : options.setDrawingAreaAvailable(false);
+      options.setDrawingAreaAvailable == null || options.setDrawingAreaAvailable(false);
     }
 
     // Add mouse and visible wrapper layers for DOM-node-wrapped movables
@@ -16061,10 +16079,19 @@ class Graphie extends React.Component {
   constructor(...args) {
     super(...args);
     this.graphieDivRef = /*#__PURE__*/React.createRef();
+    /**
+     * Allow parents of the <Graphie> component to grab a reference to the
+     * underlying graphie object using
+     * `this.refs.graphieComponent.getGraphie()`
+     *
+     * This shouldn't be necessary for 90% of cases, but the power is there.
+     * Use it for good and not evil.
+     */
     this.getGraphie = () => {
       // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
       return this._graphie;
     };
+    // bounds-checked range
     this._range = () => {
       const boundsCheckRange = range => {
         if (range[0] >= range[1]) {
@@ -16139,6 +16166,7 @@ class Graphie extends React.Component {
       // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
       this._movables = {};
     };
+    // @ts-expect-error - TS2322 - Type '(children: readonly any[], options: any) => ReactElement<any, string | JSXElementConstructor<any>> | readonly ReactElement<any, string | JSXElementConstructor<any>>[]' is not assignable to type '(children: readonly any[], arg2: any) => ReactElement<any, string | JSXElementConstructor<any>>'.
     this._renderMovables = (children, options) => {
       // Each leaf of `children` is a movable descriptor created by a call to
       // some `GraphieMovable`, such as `MovablePoint`.
@@ -16237,6 +16265,7 @@ class Graphie extends React.Component {
         return newMovables[key];
       });
     };
+    // Sort of like react diffing, but for movables
     this._updateMovables = () => {
       // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
       const graphie = this._graphie;
@@ -16291,16 +16320,6 @@ class Graphie extends React.Component {
     }
     this._updateMovables();
   }
-
-  /**
-   * Allow parents of the <Graphie> component to grab a reference to the
-   * underlying graphie object using
-   * `this.refs.graphieComponent.getGraphie()`
-   *
-   * This shouldn't be necessary for 90% of cases, but the power is there.
-   * Use it for good and not evil.
-   */
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: "graphie-container"
@@ -17043,10 +17062,14 @@ Tex.defaultProps = {
 class Zoomable extends React.Component {
   constructor(...args) {
     super(...args);
+    // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     this._isMounted = void 0;
+    // @ts-expect-error - TS2564 - Property '_observer' has no initializer and is not definitely assigned in the constructor.
     this._observer = void 0;
+    // @ts-expect-error - TS2564 - Property '_measuringInitialized' has no initializer and is not definitely assigned in the constructor.
     this._measuringInitialized = void 0;
     this._originalWidth = void 0;
+    // @ts-expect-error - TS2564 - Property '_node' has no initializer and is not definitely assigned in the constructor.
     this._node = void 0;
     this.state = {
       visible: false,
@@ -17312,9 +17335,11 @@ const DefinitionContext = /*#__PURE__*/React.createContext(defaultContext$1);
 class DefinitionProvider extends React.Component {
   constructor(...args) {
     super(...args);
+    // Context state
     this.state = {
       activeDefinitionId: null
     };
+    // Method to update state
     this.setActiveDefinitionId = activeDefinitionId => {
       this.setState(prevState => ({
         activeDefinitionId
@@ -17349,9 +17374,11 @@ class ErrorBoundary extends React.Component {
     };
   }
   componentDidCatch(error, info) {
+    var _this$props$onError, _this$props;
     this.setState({
       error: error.toString()
     });
+    (_this$props$onError = (_this$props = this.props).onError) == null || _this$props$onError.call(_this$props, error, info);
     Log.error("Perseus error boundary caught error", Errors.Internal, {
       cause: error,
       loggedMetadata: _extends({
@@ -17389,21 +17416,25 @@ function _noop() {}
  * Wrapper for the trackInteraction apiOption.
  */
 class InteractionTracker {
-  // @ts-expect-error - TS2564 - Property '_tracked' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property 'setting' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property 'widgetID' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property 'widgetType' has no initializer and is not definitely assigned in the constructor.
-
   constructor(trackApi, widgetType, widgetID, setting) {
+    // @ts-expect-error - TS2564 - Property '_tracked' has no initializer and is not definitely assigned in the constructor.
     this._tracked = void 0;
+    // @ts-expect-error - TS2564 - Property 'setting' has no initializer and is not definitely assigned in the constructor.
     this.setting = void 0;
     this.track = void 0;
     this.trackApi = void 0;
+    // @ts-expect-error - TS2564 - Property 'widgetID' has no initializer and is not definitely assigned in the constructor.
     this.widgetID = void 0;
+    // @ts-expect-error - TS2564 - Property 'widgetType' has no initializer and is not definitely assigned in the constructor.
     this.widgetType = void 0;
+    /**
+     * Function that actually calls the API to mark the interaction. This is
+     * private. The public version is just `.track` and is bound to this object
+     * for easy use in other context.
+     *
+     * @param extraData Any extra data to track about the event.
+     * @private
+     */
     this._track = extraData => {
       if (this._tracked && !this.setting) {
         return;
@@ -17425,15 +17456,6 @@ class InteractionTracker {
       this.track = this._track;
     }
   }
-
-  /**
-   * Function that actually calls the API to mark the interaction. This is
-   * private. The public version is just `.track` and is bound to this object
-   * for easy use in other context.
-   *
-   * @param extraData Any extra data to track about the event.
-   * @private
-   */
 }
 
 /**
@@ -17519,6 +17541,10 @@ class Lint extends React.Component {
     this.state = {
       tooltipAbove: true
     };
+    // We can't call setState in componentDidMount without risking a render
+    // thrash, and we can't call getBoundingClientRect in render, so we
+    // borrow a timeout approach from learnstorm-dashboard.jsx and set our
+    // state once the component has mounted and we can get what we need.
     this.getPosition = () => {
       // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'getBoundingClientRect' does not exist on type 'Element | Text'.
       const rect = ReactDOM__default.findDOMNode(this).getBoundingClientRect();
@@ -17529,6 +17555,8 @@ class Lint extends React.Component {
         tooltipAbove: rect.top > 100
       });
     };
+    // Render the <a> element that holds the indicator icon and the tooltip
+    // We pass different styles for the inline and block cases
     this.renderLink = style => {
       const tooltipAbove = this.state.tooltipAbove;
       let severityStyle;
@@ -17575,12 +17603,6 @@ class Lint extends React.Component {
     // eslint-disable-next-line no-restricted-syntax
     window.clearTimeout(this._positionTimeout);
   }
-
-  // We can't call setState in componentDidMount without risking a render
-  // thrash, and we can't call getBoundingClientRect in render, so we
-  // borrow a timeout approach from learnstorm-dashboard.jsx and set our
-  // state once the component has mounted and we can get what we need.
-
   // The main render method surrounds linty content with a block or
   // inline container and the link element that displays the indicator
   // and holds the tooltip.
@@ -18196,12 +18218,26 @@ class QuestionParagraph extends React.Component {
  * 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 {
   constructor() {
+    // To avoid linting when nothing has changed.
     this.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.
+     */
     this.runLinter = debounce((perseusStr, onLintErrorsGenerated) => {
       // TODO(FEI-5003): Do we still need to check for 'KA'?
       if (typeof KA === "undefined") {
@@ -18807,11 +18843,12 @@ class WidgetContainer extends React.Component {
         widget_type: type,
         widget_id: this.props.id
       },
-      onError: error => {
+      onError: () => {
         analytics.onAnalyticsEvent({
           type: "perseus:widget-rendering-error",
           payload: {
-            widgetType: type
+            widgetType: type,
+            widgetId: this.props.id
           }
         });
       }
@@ -18864,35 +18901,33 @@ const isIdPathPrefix = function isIdPathPrefix(prefixArray, wholeArray) {
     }
   });
 };
-class Renderer extends React.Component {
-  // @ts-expect-error - TS2564 - Property '_foundTextNodes' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property '_interactionTrackers' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property '_isTwoColumn' has no initializer and is not definitely assigned in the constructor.
-
-  // The i18n linter.
-
-  // @ts-expect-error - TS2564 - Property 'reuseMarkdown' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property 'translationIndex' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property 'widgetIds' has no initializer and is not definitely assigned in the constructor.
 
+// The return type for getUserInput. Widgets have full control of what is
+// returned so it's not easily typed (some widgets return a scalar (string),
+// some return a custom-built object, some delegate to
+// `WidgetJsonifyDeprecated` which returns an object containing widget props
+// (filtered by deprecated keys)).
+class Renderer extends React.Component {
   constructor(_props) {
     super(_props);
     this._currentFocus = void 0;
+    // @ts-expect-error - TS2564 - Property '_foundTextNodes' has no initializer and is not definitely assigned in the constructor.
     this._foundTextNodes = void 0;
+    // @ts-expect-error - TS2564 - Property '_interactionTrackers' has no initializer and is not definitely assigned in the constructor.
     this._interactionTrackers = void 0;
+    // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     this._isMounted = void 0;
+    // @ts-expect-error - TS2564 - Property '_isTwoColumn' has no initializer and is not definitely assigned in the constructor.
     this._isTwoColumn = void 0;
+    // The i18n linter.
     this._translationLinter = void 0;
     this._widgetContainers = new Map();
     this.lastRenderedMarkdown = void 0;
+    // @ts-expect-error - TS2564 - Property 'reuseMarkdown' has no initializer and is not definitely assigned in the constructor.
     this.reuseMarkdown = void 0;
+    // @ts-expect-error - TS2564 - Property 'translationIndex' has no initializer and is not definitely assigned in the constructor.
     this.translationIndex = void 0;
+    // @ts-expect-error - TS2564 - Property 'widgetIds' has no initializer and is not definitely assigned in the constructor.
     this.widgetIds = void 0;
     this.getApiOptions = () => {
       return _extends({}, ApiOptions.defaults, this.props.apiOptions);
@@ -18904,6 +18939,7 @@ class Renderer extends React.Component {
         widgetProps: this._getAllWidgetsStartProps(allWidgetInfo, props)
       };
     };
+    // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
     this._getAllWidgetsInfo = props => {
       // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
       return mapObject$2(props.widgets, (widgetInfo, widgetId) => {
@@ -18926,6 +18962,11 @@ class Renderer extends React.Component {
         return getRendererPropsForWidgetInfo(widgetInfo, props.problemNum);
       });
     };
+    // This is only used in _getWidgetInfo as a fallback if widgetId
+    // doesn't exist in this.state.widgetInfo.  It doesn't get run as
+    // part of the happy path.
+    // TODO(LP-10713): Refactor how we handle widgetIds that don't exist
+    // in this.state.widgetInfo.
     this._getDefaultWidgetInfo = widgetId => {
       const widgetIdParts = Util.rTypeFromWidgetId.exec(widgetId);
       if (widgetIdParts == null) {
@@ -19022,6 +19063,15 @@ class Renderer extends React.Component {
         isLastUsedWidget: id === this.state.lastUsedWidgetId
       });
     };
+    /**
+     * Serializes the questions state so it can be recovered.
+     *
+     * The return value of this function can be sent to the
+     * `restoreSerializedState` method to restore this state.
+     *
+     * If an instance of widgetProps is passed in, it generates the serialized
+     * state from that instead of the current widget props.
+     */
     this.getSerializedState = widgetProps => {
       return mapObject$2(widgetProps || this.state.widgetProps, (props, widgetId) => {
         const widget = this.getWidgetInstance(widgetId);
@@ -19086,6 +19136,12 @@ class Renderer extends React.Component {
         setTimeout(fireCallback, 0);
       });
     };
+    /**
+     * Tell each of the radio widgets to show rationales for each of the
+     * currently selected choices inside of them. If the widget is correct, it
+     * shows rationales for all of the choices. This also disables interaction
+     * with the choices that we show rationales for.
+     */
     this.showRationalesForCurrentlySelectedChoices = () => {
       Object.keys(this.props.widgets).forEach(widgetId => {
         const widget = this.getWidgetInstance(widgetId);
@@ -19094,6 +19150,10 @@ class Renderer extends React.Component {
         }
       });
     };
+    /**
+     * Tells each of the radio widgets to deselect any of the incorrect choices
+     * that are currently selected (leaving correct choices still selected).
+     */
     this.deselectIncorrectSelectedChoices = () => {
       // TODO(emily): this has the exact same structure as
       // showRationalesForCurrentlySelectedChoices above. Maybe DRY this up.
@@ -19104,6 +19164,37 @@ class Renderer extends React.Component {
         }
       });
     };
+    /**
+     * Allows inter-widget communication.
+     *
+     * This function yields this Renderer's own internal widgets, and it's used
+     * in two places.
+     *
+     * First, we expose our own internal widgets to each other by giving them
+     * a `findWidgets` function that, in turn, calls this function.
+     *
+     * Second, we expose our own internal widgets to this Renderer's parent,
+     * by allowing it to call this function directly. That way, it can hook us
+     * up to other Renderers on the page, by writing a `findExternalWidgets`
+     * prop that calls each other Renderer's `findInternalWidgets` function.
+     *
+     * Takes a `filterCriterion` on which widgets to return.
+     * `filterCriterion` can be one of:
+     *  * A string widget id
+     *  * A string widget type
+     *  * a function from (id, widgetInfo, widgetComponent) to true or false
+     *
+     * Returns an array of the matching widget components.
+     *
+     * If you need to do logic with more than the components, it is possible
+     * to do such logic inside the filter, rather than on the result array.
+     *
+     * See the passage-ref widget for an example.
+     *
+     * "Remember: abilities are not inherently good or evil, it's how you use
+     * them." ~ Kyle Katarn
+     * Please use this one with caution.
+     */
     this.findInternalWidgets = filterCriterion => {
       let filterFunc;
       // Convenience filters:
@@ -19129,6 +19220,14 @@ class Renderer extends React.Component {
       }).map(this.getWidgetInstance);
       return results;
     };
+    /**
+     * Allows inter-widget communication.
+     *
+     * Includes both widgets internal to this Renderer, and external widgets
+     * exposed by the `findExternalWidgets` prop.
+     *
+     * See `findInteralWidgets` for more information.
+     */
     this.findWidgets = filterCriterion => {
       return [...this.findInternalWidgets(filterCriterion), ...this.props.findExternalWidgets(filterCriterion)];
     };
@@ -19214,6 +19313,9 @@ class Renderer extends React.Component {
         });
       }
     };
+    // wrap top-level elements in a QuestionParagraph, mostly
+    // for appropriate spacing and other css
+    // @ts-expect-error - TS2322 - Type '(ast: any, state: WidgetState) => never[] | JSX.Element' is not assignable to type '(ast: any, state: WidgetState) => ReactElement<any, string | JSXElementConstructor<any>>'.
     this.outputMarkdown = (ast, state) => {
       if (_.isArray(ast)) {
         // This is duplicated from simple-markdown
@@ -19285,6 +19387,7 @@ class Renderer extends React.Component {
         paragraphIndex: state.paragraphIndex
       }, /*#__PURE__*/React.createElement(ErrorBoundary, null, output));
     };
+    // output non-top-level nodes or arrays
     this.outputNested = (ast, state) => {
       if (_.isArray(ast)) {
         // This is duplicated from simple-markdown
@@ -19315,6 +19418,7 @@ class Renderer extends React.Component {
       }
       return this.outputNode(ast, this.outputNested, state);
     };
+    // output individual AST nodes [not arrays]
     this.outputNode = (node, nestedOutput, state) => {
       const apiOptions = this.getApiOptions();
       const imagePlaceholder = apiOptions.imagePlaceholder;
@@ -19548,6 +19652,9 @@ class Renderer extends React.Component {
       // ...as well as right now (non-image, non-TeX or image from cache)
       onRender();
     };
+    // Sets the current focus path
+    // If the new focus path is not a prefix of the old focus path,
+    // we send an onChangeFocus event back to our parent.
     this._setCurrentFocus = path => {
       const apiOptions = this.getApiOptions();
 
@@ -19700,6 +19807,7 @@ class Renderer extends React.Component {
         this.blurPath(this._currentFocus);
       }
     };
+    // Serializes widget state. Seems to be used only by editors though.
     this.serialize = () => {
       const state = {};
       _.each(this.state.widgetInfo, function (info, id) {
@@ -19785,8 +19893,11 @@ class Renderer extends React.Component {
       const widget = this.getWidgetInstance(widgetId);
 
       // Widget handles parsing of the interWidgetPath.
-      widget == null ? void 0 : widget.setInputValue == null ? void 0 : widget.setInputValue(interWidgetPath, newValue, focus);
+      widget == null || widget.setInputValue == null || widget.setInputValue(interWidgetPath, newValue, focus);
     };
+    /**
+     * Returns an array of the widget `.getUserInput()` results
+     */
     this.getUserInput = () => {
       return this.widgetIds.map(id => {
         const widget = this.getWidgetInstance(id);
@@ -19797,9 +19908,22 @@ class Renderer extends React.Component {
         }
       });
     };
+    /**
+     * Returns an array of all widget IDs in the order they occur in
+     * the content.
+     */
     this.getWidgetIds = () => {
       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.
+     */
     this.getUserInputForWidgets = () => {
       return mapObjectFromArray(this.widgetIds, id => {
         const widget = this.getWidgetInstance(id);
@@ -19808,6 +19932,11 @@ class Renderer extends React.Component {
         }
       });
     };
+    /**
+     * Returns an object mapping from widget ID to perseus-style score.
+     * The keys of this object are the values of the array returned
+     * from `getWidgetIds`.
+     */
     this.scoreWidgets = () => {
       const widgetProps = this.state.widgetInfo;
       const onInputError = this.getApiOptions().onInputError;
@@ -19831,6 +19960,9 @@ class Renderer extends React.Component {
       });
       return widgetScores;
     };
+    /**
+     * Grades the content.
+     */
     this.score = () => {
       return _.reduce(this.scoreWidgets(), Util.combineScores, Util.noScore);
     };
@@ -19861,6 +19993,7 @@ class Renderer extends React.Component {
       }
       return examples[0];
     };
+    // TranslationLinter callback
     this.handletranslationLintErrors = lintErrors => {
       if (!this._isMounted) {
         return;
@@ -21081,6 +21214,8 @@ class InputNumber extends React.Component {
       /* c8 ignore next */
       return [[]];
     };
+    // Note: We believe that this isn't used anywhere but are leaving it during
+    // the initial refactor
     this.getGrammarTypeForPath = path => {
       /* c8 ignore next */
       return "number";
@@ -21314,6 +21449,7 @@ class NumericInput extends React.Component {
       // between 0 and finite solutions
       previousValues: [""]
     };
+    // TODO(Nicole, Jeremy): This is maybe never used and should be removed
     this.examples = () => {
       var _this$props$answerFor;
       // if the set of specified forms are empty, allow all forms
@@ -21347,16 +21483,16 @@ class NumericInput extends React.Component {
     };
     this.focus = () => {
       var _this$inputRef;
-      (_this$inputRef = this.inputRef) == null ? void 0 : _this$inputRef.focus();
+      (_this$inputRef = this.inputRef) == null || _this$inputRef.focus();
       return true;
     };
     this.focusInputPath = () => {
       var _this$inputRef2;
-      (_this$inputRef2 = this.inputRef) == null ? void 0 : _this$inputRef2.focus();
+      (_this$inputRef2 = this.inputRef) == null || _this$inputRef2.focus();
     };
     this.blurInputPath = () => {
       var _this$inputRef3;
-      (_this$inputRef3 = this.inputRef) == null ? void 0 : _this$inputRef3.blur();
+      (_this$inputRef3 = this.inputRef) == null || _this$inputRef3.blur();
     };
     this.getInputPaths = () => {
       // The widget itself is an input, so we return a single empty list to
@@ -21689,12 +21825,16 @@ class PassageRef extends React.Component {
   constructor(..._args) {
     super(..._args);
     this.displayName = "PassageRef";
+    // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     this._isMounted = void 0;
+    // @ts-expect-error - TS2564 - Property '_throttledUpdateRange' has no initializer and is not definitely assigned in the constructor.
     this._throttledUpdateRange = void 0;
     this.state = {
       lineRange: null,
       content: null
     };
+    // TODO(tamarab): getUserInput needs to be updated to only return
+    // props input by the user. Currently returns all the widget's props.
     this.getUserInput = () => {
       return removeDenylistProps(this.props);
     };
@@ -21734,10 +21874,6 @@ class PassageRef extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
   }
-
-  // TODO(tamarab): getUserInput needs to be updated to only return
-  // props input by the user. Currently returns all the widget's props.
-
   render() {
     const lineRange = this.state.lineRange;
     let lineRangeOutput;
@@ -22091,7 +22227,6 @@ const BASE_ICON_SIZE = 10;
 // If you pass in an object you need to specify an SVG path to
 // render along with the width and height of the path (to ensure
 // that it gets scaled correctly).
-
 class Icon extends React.Component {
   render() {
     const {
@@ -22925,7 +23060,7 @@ const BaseRadio = function BaseRadio(props) {
 
   // register a callback with the parent that allows
   // the parent to focus an individual choice
-  registerFocusFunction == null ? void 0 : registerFocusFunction(choiceIndex => {
+  registerFocusFunction == null || registerFocusFunction(choiceIndex => {
     const ref = choiceRefs.current[choiceIndex || 0];
     // note(matthew): we know this is only getting passed
     // to a WB Clickable button, so we force it to be of
@@ -23168,9 +23303,12 @@ const styles$q = StyleSheet.create({
   }
 });
 
+// RenderProps is the return type for radio.jsx#transform
+
 class Radio$1 extends React.Component {
   constructor(...args) {
     super(...args);
+    // @ts-expect-error - TS2564 - Property 'focusFunction' has no initializer and is not definitely assigned in the constructor.
     this.focusFunction = void 0;
     this._renderRenderer = (content = "") => {
       let nextPassageRefId = 1;
@@ -23213,6 +23351,19 @@ class Radio$1 extends React.Component {
         })
       });
     };
+    // When `BaseRadio`'s `onChange` handler is called, indicating a change in
+    // our choices' state, we need to call our `onChange` handler in order to
+    // persist those changes in the item's Perseus state.
+    //
+    // So, given the new values for each choice, construct the new
+    // `choiceStates` objects, and pass them to `this.props.onChange`.
+    //
+    // `newValueLists` is an object with two keys: `checked` and `crossedOut`.
+    // Each contains an array of boolean values, specifying the new checked and
+    // crossed-out value of each choice.
+    //
+    // NOTE(mdr): This method expects to be auto-bound. If this component is
+    //     converted to an ES6 class, take care to auto-bind this method!
     this.updateChoices = newValueLists => {
       const {
         choiceStates,
@@ -23251,6 +23402,11 @@ class Radio$1 extends React.Component {
     this.simpleValidate = rubric => {
       return Radio$1.validate(this.getUserInput(), rubric);
     };
+    /**
+     * Turn on rationale display for the currently selected choices. Note that
+     * this leaves rationales on for choices that are already showing
+     * rationales.
+     */
     this.showRationalesForCurrentlySelectedChoices = rubric => {
       const {
         choiceStates
@@ -23284,6 +23440,9 @@ class Radio$1 extends React.Component {
         );
       }
     };
+    /**
+     * Deselects any currently-selected choices that are not correct choices.
+     */
     this.deselectIncorrectSelectedChoices = () => {
       if (this.props.choiceStates) {
         const newStates = this.props.choiceStates.map((state, i) => _extends({}, state, {
@@ -23425,21 +23584,6 @@ class Radio$1 extends React.Component {
   registerFocusFunction(fun) {
     this.focusFunction = fun;
   }
-
-  // When `BaseRadio`'s `onChange` handler is called, indicating a change in
-  // our choices' state, we need to call our `onChange` handler in order to
-  // persist those changes in the item's Perseus state.
-  //
-  // So, given the new values for each choice, construct the new
-  // `choiceStates` objects, and pass them to `this.props.onChange`.
-  //
-  // `newValueLists` is an object with two keys: `checked` and `crossedOut`.
-  // Each contains an array of boolean values, specifying the new checked and
-  // crossed-out value of each choice.
-  //
-  // NOTE(mdr): This method expects to be auto-bound. If this component is
-  //     converted to an ES6 class, take care to auto-bind this method!
-
   render() {
     const {
       choices
@@ -24109,6 +24253,8 @@ var CSProgram$1 = {
   hidden: true
 };
 
+// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
+
 class Definition extends React.Component {
   constructor(...args) {
     super(...args);
@@ -24277,6 +24423,11 @@ var Dropdown$1 = {
 };
 
 /* eslint-disable react/sort-comp */
+
+// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
+
+// transform = _.identity
+
 class Explanation extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -24608,6 +24759,9 @@ const getNextState = (currentState, answerable) => {
 // Prepended to all invalid messages to make the widget messages a bit clearer
 const INVALID_MESSAGE_PREFIX = i18n._("We couldn't grade your answer.");
 const DEFAULT_INVALID_MESSAGE = i18n._("It looks like you left something blank or ") + i18n._("entered in an invalid answer.");
+
+// exports has no 'transform'
+
 // A Graded Group is more or less a Group widget that displays a check
 // answer button below the rendered content. When clicked, the widget grades
 // the stuff inside and displays feedback about whether the inputted answer was
@@ -24625,6 +24779,11 @@ class GradedGroup extends React.Component {
       // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
       return change.apply(this, args);
     };
+    // This is a little strange because the id of the widget that actually
+    // changed is going to be lost in favor of the group widget's id. The
+    // widgets prop also wasn't actually changed, and this only serves to
+    // alert our renderer (our parent) of the fact that some interaction
+    // has occurred.
     this._onInteractWithWidget = id => {
       // Reset grading display when user changes answer
       this.setState({
@@ -24664,6 +24823,7 @@ class GradedGroup extends React.Component {
         status: status
       });
     };
+    // Mobile API
     this.getInputPaths = () => {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
@@ -24905,29 +25065,44 @@ class Indicators extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("ul", {
-      className: css(styles$j.indicatorContainer)
+      // reduntantly add class name for use in .less files--
+      //   the styles object key gets hashed
+      className: classNames(css(styles$j.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
+      className: css(styles$j.indicator),
+      key: title
+    }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": i18n._("Skip to %(title)s", {
         title
       }),
-      key: title,
-      className: css(styles$j.indicator, i === this.props.currentGroup && styles$j.selectedIndicator),
-      tabIndex: 0,
+      style: styles$j.indicatorButton,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
-    }, i === this.props.currentGroup && /*#__PURE__*/React.createElement("span", {
+    }, ({
+      hovered,
+      focused,
+      pressed
+    }) => /*#__PURE__*/React.createElement(View, {
+      style: [styles$j.indicatorDot, (hovered || focused || pressed) && styles$j.indicatorDotFocused]
+    }, i === this.props.currentGroup && /*#__PURE__*/React.createElement(View, {
+      style: styles$j.indicatorDotActive
+    }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
-    }, i18n._("Current")))));
+    }, i18n._("Current"))))))));
   }
 }
+
+// no transform
+
 // TODO(jared): find a better name for this :) and for GradedGroup; the names
 // are currently a little confusing.
 class GradedGroupSet extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // @ts-expect-error - TS2564 - Property '_childGroup' has no initializer and is not definitely assigned in the constructor.
     this._childGroup = void 0;
     this.state = {
       currentGroup: 0
@@ -24936,6 +25111,7 @@ class GradedGroupSet extends React.Component {
       // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
       return change.apply(this, args);
     };
+    // Mobile API
     this.getInputPaths = () => {
       return this._childGroup.getInputPaths();
     };
@@ -25068,19 +25244,42 @@ const styles$j = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     listStyle: "none",
-    margin: "unset"
+    margin: "unset",
+    paddingInlineStart: "unset",
+    flexWrap: "wrap"
   },
   indicator: {
+    width: 24,
+    height: 24
+  },
+  indicatorButton: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexWrap: "wrap",
+    placeContent: "center",
+    cursor: "pointer",
+    ":focus": {
+      outline: "none"
+    }
+  },
+  indicatorDot: {
+    boxSizing: "content-box",
     width: 10,
     height: 10,
     borderRadius: "100%",
-    border: "3px solid",
+    borderWidth: 2,
     borderColor: Color.blue,
-    marginLeft: 5,
-    cursor: "pointer"
+    borderStyle: "solid"
+  },
+  indicatorDotFocused: {
+    borderWidth: 5,
+    borderStyle: "double"
   },
-  selectedIndicator: {
-    backgroundColor: Color.blue
+  indicatorDotActive: {
+    backgroundColor: Color.blue,
+    width: "100%",
+    height: "100%"
   },
   container: {
     borderTop: `1px solid ${gray76}`,
@@ -25947,7 +26146,7 @@ FunctionGrapher.defaultProps = {
   coords: null,
   asymptote: null,
   isMobile: false
-};
+}; // Really this is props.plot, I think
 /* Widget and editor. */
 class Grapher extends React.Component {
   constructor(...args) {
@@ -26153,6 +26352,8 @@ var Grapher$1 = {
   staticTransform: staticTransform$3
 };
 
+// exports has no 'transform'
+
 class Group extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -26170,7 +26371,7 @@ class Group extends React.Component {
     };
     this.restoreSerializedState = (state, callback) => {
       var _this$rendererRef3;
-      (_this$rendererRef3 = this.rendererRef) == null ? void 0 : _this$rendererRef3.restoreSerializedState(state, callback);
+      (_this$rendererRef3 = this.rendererRef) == null || _this$rendererRef3.restoreSerializedState(state, callback);
       // Tell our renderer that we have no props to change
       // (all our changes were in state):
       return null;
@@ -26179,6 +26380,7 @@ class Group extends React.Component {
       var _this$rendererRef4;
       return (_this$rendererRef4 = this.rendererRef) == null ? void 0 : _this$rendererRef4.score();
     };
+    // Mobile API:
     this.getInputPaths = () => {
       var _this$rendererRef5;
       return (_this$rendererRef5 = this.rendererRef) == null ? void 0 : _this$rendererRef5.getInputPaths();
@@ -26193,15 +26395,15 @@ class Group extends React.Component {
     };
     this.focusInputPath = path => {
       var _this$rendererRef8;
-      (_this$rendererRef8 = this.rendererRef) == null ? void 0 : _this$rendererRef8.focusPath(path);
+      (_this$rendererRef8 = this.rendererRef) == null || _this$rendererRef8.focusPath(path);
     };
     this.blurInputPath = path => {
       var _this$rendererRef9;
-      (_this$rendererRef9 = this.rendererRef) == null ? void 0 : _this$rendererRef9.blurPath(path);
+      (_this$rendererRef9 = this.rendererRef) == null || _this$rendererRef9.blurPath(path);
     };
     this.showRationalesForCurrentlySelectedChoices = () => {
       var _this$rendererRef10;
-      (_this$rendererRef10 = this.rendererRef) == null ? void 0 : _this$rendererRef10.showRationalesForCurrentlySelectedChoices();
+      (_this$rendererRef10 = this.rendererRef) == null || _this$rendererRef10.showRationalesForCurrentlySelectedChoices();
     };
   }
   componentDidMount() {
@@ -26467,6 +26669,9 @@ const defaultBackgroundImage$3 = {
 };
 const editorAlignments = ["block", "full-width"];
 const DEFAULT_ALIGNMENT = "block";
+
+// there is no transform as part of exports
+
 class ImageWidget extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -26731,6 +26936,9 @@ const KAScompile = (expr, options) => {
   _compileCache[hash] = cached;
   return cached;
 };
+
+// There's no transform function in exports
+
 class Interaction extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -26796,6 +27004,7 @@ class Interaction extends React.Component {
       // Default to 0 if the expression couldn't be parsed
       return func(compiledVars) || 0;
     };
+    // Return an array of all the variables in an expression
     this._extractVars = expr => {
       if (expr == null) {
         return [];
@@ -27304,8 +27513,15 @@ class Graph extends React.Component {
     this.protractor = void 0;
     this.ruler = void 0;
     this._graphie = void 0;
+    // @ts-expect-error - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
     this._hasSetupGraphieThisUpdate = void 0;
+    // @ts-expect-error - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
     this._shouldSetupGraphie = void 0;
+    /* Reset the graphie canvas to its initial state
+     *
+     * Use when re-rendering the parent component and you need a blank
+     * graphie.
+     */
     this.reset = () => {
       this._setupGraphie(false);
     };
@@ -27512,13 +27728,6 @@ class Graph extends React.Component {
       this._shouldSetupGraphie = false;
     }
   }
-
-  /* Reset the graphie canvas to its initial state
-   *
-   * Use when re-rendering the parent component and you need a blank
-   * graphie.
-   */
-
   render() {
     let image;
     const imageData = this.props.backgroundImage;
@@ -27832,6 +28041,9 @@ const makeInvalidTypeError = (functionName, graphType) => {
     }
   });
 };
+
+// There's no transform function in exports
+
 class InteractiveGraph extends React.Component {
   constructor(...args) {
     super(...args);
@@ -27845,8 +28057,10 @@ class InteractiveGraph extends React.Component {
     this.pointA = void 0;
     this.pointB = void 0;
     this.pointC = void 0;
+    // @ts-expect-error - TS2564 - Property 'points' has no initializer and is not definitely assigned in the constructor.
     this.points = void 0;
     this.polygon = void 0;
+    // @ts-expect-error - TS2564 - Property 'shouldResetGraphie' has no initializer and is not definitely assigned in the constructor.
     this.shouldResetGraphie = void 0;
     this.sinusoid = void 0;
     this.trashCan = void 0;
@@ -27928,7 +28142,7 @@ class InteractiveGraph extends React.Component {
         this.horizHairline.attr({
           stroke: KhanColors.INTERACTIVE
         });
-        (_this$horizHairline = this.horizHairline) == null ? void 0 : _this$horizHairline.hide();
+        (_this$horizHairline = this.horizHairline) == null || _this$horizHairline.hide();
         this.vertHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
           normalStyle: {
             strokeWidth: 1
@@ -27937,7 +28151,7 @@ class InteractiveGraph extends React.Component {
         this.vertHairline.attr({
           stroke: KhanColors.INTERACTIVE
         });
-        (_this$vertHairline = this.vertHairline) == null ? void 0 : _this$vertHairline.hide();
+        (_this$vertHairline = this.vertHairline) == null || _this$vertHairline.hide();
       }
       const type = this.props.graph.type;
       this["add" + capitalize(type) + "Controls"]();
@@ -27948,17 +28162,17 @@ class InteractiveGraph extends React.Component {
         // Hairlines are already initialized when the graph is loaded, so
         // here we just move them to the updated location and make them
         // visible.
-        (_this$horizHairline2 = this.horizHairline) == null ? void 0 : _this$horizHairline2.moveTo([this.props.range[0][0], point[1]], [this.props.range[0][1], point[1]]);
-        (_this$horizHairline3 = this.horizHairline) == null ? void 0 : _this$horizHairline3.show();
-        (_this$vertHairline2 = this.vertHairline) == null ? void 0 : _this$vertHairline2.moveTo([point[0], this.props.range[1][0]], [point[0], this.props.range[1][1]]);
-        (_this$vertHairline3 = this.vertHairline) == null ? void 0 : _this$vertHairline3.show();
+        (_this$horizHairline2 = this.horizHairline) == null || _this$horizHairline2.moveTo([this.props.range[0][0], point[1]], [this.props.range[0][1], point[1]]);
+        (_this$horizHairline3 = this.horizHairline) == null || _this$horizHairline3.show();
+        (_this$vertHairline2 = this.vertHairline) == null || _this$vertHairline2.moveTo([point[0], this.props.range[1][0]], [point[0], this.props.range[1][1]]);
+        (_this$vertHairline3 = this.vertHairline) == null || _this$vertHairline3.show();
       }
     };
     this.hideHairlines = () => {
       if (this.props.apiOptions.isMobile) {
         var _this$horizHairline4, _this$vertHairline4;
-        (_this$horizHairline4 = this.horizHairline) == null ? void 0 : _this$horizHairline4.hide();
-        (_this$vertHairline4 = this.vertHairline) == null ? void 0 : _this$vertHairline4.hide();
+        (_this$horizHairline4 = this.horizHairline) == null || _this$horizHairline4.hide();
+        (_this$vertHairline4 = this.vertHairline) == null || _this$vertHairline4.hide();
       }
     };
     this.setTrashCanVisibility = opacity => {
@@ -27974,9 +28188,9 @@ class InteractiveGraph extends React.Component {
         // trash can area.
         if (!this.trashCan) {
           var _graphie$raphael;
-          this.trashCan = graphie == null ? void 0 : (_graphie$raphael = graphie.raphael) == null ? void 0 : _graphie$raphael.image(TRASH_ICON_URI, graphie.xpixels - 40, graphie.ypixels - 40, 40, 40);
+          this.trashCan = graphie == null || (_graphie$raphael = graphie.raphael) == null ? void 0 : _graphie$raphael.image(TRASH_ICON_URI, graphie.xpixels - 40, graphie.ypixels - 40, 40, 40);
         }
-        (_this$trashCan = this.trashCan) == null ? void 0 : _this$trashCan.attr({
+        (_this$trashCan = this.trashCan) == null || _this$trashCan.attr({
           opacity: opacity
         });
       }
@@ -28041,7 +28255,7 @@ class InteractiveGraph extends React.Component {
     this.removeLine = () => {
       var _this$line;
       _.invoke(this.points, "remove");
-      (_this$line = this.line) == null ? void 0 : _this$line.remove();
+      (_this$line = this.line) == null || _this$line.remove();
     };
     this.addLinearControls = () => {
       this.addLine("line");
@@ -28144,23 +28358,23 @@ class InteractiveGraph extends React.Component {
       if (this.parabola) {
         var _this$graphie, _this$parabola;
         const path = (_this$graphie = this.graphie) == null ? void 0 : _this$graphie.svgParabolaPath(a, b, c);
-        (_this$parabola = this.parabola) == null ? void 0 : _this$parabola.attr({
+        (_this$parabola = this.parabola) == null || _this$parabola.attr({
           path: path
         });
       } else {
         var _this$graphie2, _this$parabola2, _this$parabola3;
         this.parabola = (_this$graphie2 = this.graphie) == null ? void 0 : _this$graphie2.parabola(a, b, c);
-        (_this$parabola2 = this.parabola) == null ? void 0 : _this$parabola2.attr(_extends({
+        (_this$parabola2 = this.parabola) == null || _this$parabola2.attr(_extends({
           stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC
         }, this._lineStroke()));
-        (_this$parabola3 = this.parabola) == null ? void 0 : _this$parabola3.toBack();
+        (_this$parabola3 = this.parabola) == null || _this$parabola3.toBack();
       }
     };
     this.removeQuadraticControls = () => {
       var _this$pointA, _this$pointB, _this$pointC;
-      (_this$pointA = this.pointA) == null ? void 0 : _this$pointA.remove();
-      (_this$pointB = this.pointB) == null ? void 0 : _this$pointB.remove();
-      (_this$pointC = this.pointC) == null ? void 0 : _this$pointC.remove();
+      (_this$pointA = this.pointA) == null || _this$pointA.remove();
+      (_this$pointB = this.pointB) == null || _this$pointB.remove();
+      (_this$pointC = this.pointC) == null || _this$pointC.remove();
       if (this.parabola) {
         this.parabola.remove();
         this.parabola = null;
@@ -28228,22 +28442,22 @@ class InteractiveGraph extends React.Component {
       if (this.sinusoid) {
         var _this$graphie3, _this$sinusoid;
         const path = (_this$graphie3 = this.graphie) == null ? void 0 : _this$graphie3.svgSinusoidPath(a, b, c, d);
-        (_this$sinusoid = this.sinusoid) == null ? void 0 : _this$sinusoid.attr({
+        (_this$sinusoid = this.sinusoid) == null || _this$sinusoid.attr({
           path: path
         });
       } else {
         var _this$graphie4, _this$sinusoid2, _this$sinusoid3;
         this.sinusoid = (_this$graphie4 = this.graphie) == null ? void 0 : _this$graphie4.sinusoid(a, b, c, d);
-        (_this$sinusoid2 = this.sinusoid) == null ? void 0 : _this$sinusoid2.attr(_extends({
+        (_this$sinusoid2 = this.sinusoid) == null || _this$sinusoid2.attr(_extends({
           stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC
         }, this._lineStroke()));
-        (_this$sinusoid3 = this.sinusoid) == null ? void 0 : _this$sinusoid3.toBack();
+        (_this$sinusoid3 = this.sinusoid) == null || _this$sinusoid3.toBack();
       }
     };
     this.removeSinusoidControls = () => {
       var _this$pointA2, _this$pointB2;
-      (_this$pointA2 = this.pointA) == null ? void 0 : _this$pointA2.remove();
-      (_this$pointB2 = this.pointB) == null ? void 0 : _this$pointB2.remove();
+      (_this$pointA2 = this.pointA) == null || _this$pointA2.remove();
+      (_this$pointB2 = this.pointB) == null || _this$pointB2.remove();
       if (this.sinusoid) {
         this.sinusoid.remove();
         this.sinusoid = null;
@@ -28274,7 +28488,7 @@ class InteractiveGraph extends React.Component {
     };
     this.removeCircleControls = () => {
       var _this$circle;
-      (_this$circle = this.circle) == null ? void 0 : _this$circle.remove();
+      (_this$circle = this.circle) == null || _this$circle.remove();
     };
     this.addLinearSystemControls = () => {
       const graphie = this.graphie;
@@ -28439,7 +28653,7 @@ class InteractiveGraph extends React.Component {
           // We should be checking if this.points is defined before rotating them.
           // @ts-expect-error - TS4104 - The type 'readonly any[]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | undefined'.
           this.points = rotate(this.points, index);
-          (_this$polygon3 = this.polygon) == null ? void 0 : _this$polygon3.update({
+          (_this$polygon3 = this.polygon) == null || _this$polygon3.update({
             closed: false
           });
         }
@@ -28470,13 +28684,13 @@ class InteractiveGraph extends React.Component {
             const pointToRemove = this.points.pop();
             if (this.points.length > 2) {
               var _this$polygon4;
-              (_this$polygon4 = this.polygon) == null ? void 0 : _this$polygon4.update({
+              (_this$polygon4 = this.polygon) == null || _this$polygon4.update({
                 closed: true
               });
               this.updateCoordsFromPoints();
             } else {
               var _this$polygon5;
-              (_this$polygon5 = this.polygon) == null ? void 0 : _this$polygon5.update({
+              (_this$polygon5 = this.polygon) == null || _this$polygon5.update({
                 closed: false
               });
               this.clearCoords();
@@ -28500,7 +28714,7 @@ class InteractiveGraph extends React.Component {
               this.removePoint(point$1);
               if (this.points.length < 3) {
                 var _this$polygon6;
-                (_this$polygon6 = this.polygon) == null ? void 0 : _this$polygon6.update({
+                (_this$polygon6 = this.polygon) == null || _this$polygon6.update({
                   closed: false
                 });
                 this.clearCoords();
@@ -28538,7 +28752,7 @@ class InteractiveGraph extends React.Component {
               const canCloseUnclosedPolygon = isFirstOrLastPoint && pointNotMoved && notANewPoint && polygonNotClosed && allPointsPlotted;
               if (canCloseUnclosedPolygon) {
                 var _this$polygon9;
-                (_this$polygon9 = this.polygon) == null ? void 0 : _this$polygon9.update({
+                (_this$polygon9 = this.polygon) == null || _this$polygon9.update({
                   closed: true
                 });
                 this.updatePolygon();
@@ -28911,7 +29125,7 @@ class InteractiveGraph extends React.Component {
     this.removePolygonControls = () => {
       var _this$polygon11;
       _.invoke(this.points, "remove");
-      (_this$polygon11 = this.polygon) == null ? void 0 : _this$polygon11.remove();
+      (_this$polygon11 = this.polygon) == null || _this$polygon11.remove();
     };
     this.addAngleControls = () => {
       if (this.props.graph.type !== "angle") {
@@ -28956,7 +29170,7 @@ class InteractiveGraph extends React.Component {
     this.removeAngleControls = () => {
       var _this$angle2;
       _.invoke(this.points, "remove");
-      (_this$angle2 = this.angle) == null ? void 0 : _this$angle2.remove();
+      (_this$angle2 = this.angle) == null || _this$angle2.remove();
     };
     this.toggleShowSides = () => {
       if (this.props.graph.type !== "polygon") {
@@ -29493,7 +29707,7 @@ class InteractiveGraph extends React.Component {
         // eq() comparison but _.isEqual(0, -0) is false, so we'll use
         // eq() anyway. The sort should be fine because it'll stringify
         // it and -0 converted to a string is "0"
-        guess == null ? void 0 : guess.sort();
+        guess == null || guess.sort();
         // @ts-expect-error - TS2339 - Property 'sort' does not exist on type 'readonly Coord[]'.
         correct.sort();
         if (deepEq$2(guess, correct)) {
@@ -30610,6 +30824,7 @@ var globalStyles = /*#__PURE__*/Object.freeze({
 class AnswerChoice extends React.Component {
   constructor(...args) {
     super(...args);
+    // The radio button or checkbox input control.
     this._input = void 0;
     this.state = {
       isInputFocused: false
@@ -30716,10 +30931,9 @@ class AnswerChoice extends React.Component {
   }
 }
 class AnswerChoices extends React.Component {
-  // The rendered answers elements.
-
   constructor(props) {
     super(props);
+    // The rendered answers elements.
     this._choices = void 0;
     this._choices = [];
     this.state = {
@@ -30813,6 +31027,7 @@ const styles$h = StyleSheet.create({
 class Marker extends React.Component {
   constructor(...args) {
     super(...args);
+    // The marker icon element.
     this._icon = void 0;
     this.state = {
       isFocused: false
@@ -31068,13 +31283,12 @@ const styles$g = StyleSheet.create({
   }
 });
 
-class LabelImage extends React.Component {
-  // The rendered markers on the question image for labeling.
-
-  // The popup component containing the answer choices.
-
-  // The rendered list of answer choices for the currently selected marker.
+/**
+ * Represents a direction vector.
+ * No diagonals allowed.
+ */
 
+class LabelImage extends React.Component {
   static gradeMarker(marker) {
     const score = {
       hasAnswers: false,
@@ -31292,8 +31506,11 @@ class LabelImage extends React.Component {
   }
   constructor(props) {
     super(props);
+    // The rendered markers on the question image for labeling.
     this._markers = void 0;
+    // The popup component containing the answer choices.
     this._selectedMarkerPopup = void 0;
+    // The rendered list of answer choices for the currently selected marker.
     this._answerChoices = void 0;
     this.handleDocumentClick = e => {
       // Dismiss open popup with answer choices if user clicks outside it.
@@ -31821,6 +32038,7 @@ class LightsPuzzle extends React.Component {
     super(..._args);
     this._currPattern = void 0;
     this._nextPattern = void 0;
+    // @ts-expect-error - TS2564 - Property '_patternIndex' has no initializer and is not definitely assigned in the constructor.
     this._patternIndex = void 0;
     this.getUserInput = () => {
       return WidgetJsonifyDeprecated.getUserInput.call(this);
@@ -32022,8 +32240,11 @@ class Placeholder extends React.Component {
 class Draggable extends React.Component {
   constructor(...args) {
     super(...args);
+    // Handler returned by requestAnimationFrame.
     this.animationFrameRequest = null;
+    // @ts-expect-error - TS2564 - Property 'isMouseMoveUpBound' has no initializer and is not definitely assigned in the constructor.
     this.isMouseMoveUpBound = void 0;
+    // @ts-expect-error - TS2564 - Property '_mounted' has no initializer and is not definitely assigned in the constructor.
     this._mounted = void 0;
     this.state = {
       startPosition: {
@@ -32724,11 +32945,15 @@ class Matcher extends React.Component {
         right: this.refs.right.getOptions()
       };
     };
+    // Programatic API for moving options
+    // This is used by testing
     this.moveLeftOptionToIndex = (option, index) => {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
       this.refs.left.moveOptionToIndex(option, index);
     };
+    // Programatic API for moving options
+    // This is used by testing
     this.moveRightOptionToIndex = (option, index) => {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
@@ -32928,12 +33153,16 @@ class NumberInput extends React.Component {
     this.state = {
       format: this.props.format
     };
+    /* Return the current "value" of this input
+     * If empty, it returns the placeholder (if it is a number) or null
+     */
     this.getValue = () => {
       return this.parseInputValue(
       // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
       ReactDOM__default.findDOMNode(this.refs.input).value // eslint-disable-line react/no-string-refs
       );
     };
+    /* Return the current string value of this input */
     this.getStringValue = () => {
       // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
       return ReactDOM__default.findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
@@ -32946,6 +33175,7 @@ class NumberInput extends React.Component {
       const result = firstNumericalParse(value);
       return _.isFinite(result) ? result : this.props.value;
     };
+    /* Set text input focus to this input */
     this.focus = () => {
       // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
       ReactDOM__default.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
@@ -33067,10 +33297,6 @@ class NumberInput extends React.Component {
       this._setValue(this.props.value, this.state.format);
     }
   }
-
-  /* Return the current "value" of this input
-   * If empty, it returns the placeholder (if it is a number) or null
-   */
 }
 NumberInput.propTypes = {
   value: PropTypes.number,
@@ -33167,6 +33393,7 @@ const getMatrixSize = function getMatrixSize(matrix) {
 class Matrix extends React.Component {
   constructor(...args) {
     super(...args);
+    // @ts-expect-error - TS2564 - Property 'cursorPosition' has no initializer and is not definitely assigned in the constructor.
     this.cursorPosition = void 0;
     this.state = {
       enterTheMatrix: 0
@@ -34896,6 +35123,9 @@ class NumberLine extends React.Component {
       assert$3(_.isFinite(x));
       return x;
     };
+    // This function is intended to be used by the client code
+    // and by test code to directly set the target number line
+    // position
     this.movePosition = targetPosition => {
       this.change({
         numLinePosition: targetPosition
@@ -34965,6 +35195,7 @@ class NumberLine extends React.Component {
         rel: newRel
       });
     };
+    // @ts-expect-error - TS2322 - Type '(props: any) => any[]' is not assignable to type '(arg1: any) => [number, number]'.
     this._getInequalityEndpoint = props => {
       const isGreater = _(["ge", "gt"]).contains(props.rel);
       const widthInPixels = 400;
@@ -34976,6 +35207,7 @@ class NumberLine extends React.Component {
       const end = isGreater ? [right, 0] : [left, 0];
       return end;
     };
+    // @ts-expect-error - TS2322 - Type '(props: any) => Element | null' is not assignable to type '(arg1: any) => ReactElement<any, string | JSXElementConstructor<any>>'.
     this._renderInequality = props => {
       if (props.isInequality) {
         const end = this._getInequalityEndpoint(props);
@@ -35232,6 +35464,7 @@ const PropTypePosition = PropTypes.shape({
 class Card extends React.Component {
   constructor(...args) {
     super(...args);
+    // @ts-expect-error - TS2564 - Property 'mouseMoveUpBound' has no initializer and is not definitely assigned in the constructor.
     this.mouseMoveUpBound = void 0;
     this.state = {
       dragging: false
@@ -35612,6 +35845,9 @@ class Orderer extends React.Component {
       }
       return draggableOffset.left + draggableWidth / 2 < bankOffset.left + bankWidth;
     };
+    // This component makes use of a lot of DOM manipulation
+    // For testing and direct manipulation of values there's a function
+    // to directly set the list value
     this.setListValues = values => {
       const list = values.map(value => {
         return {
@@ -36568,6 +36804,7 @@ class HighlightSetRenderer extends React.PureComponent {
       hoveredHighlightKey: null,
       hoveringTooltipFor: null
     };
+    // eslint-disable-next-line react/sort-comp
     this._highlightRenderers = {};
     this._handleMouseMove = e => {
       const mouseClientPosition = {
@@ -37015,11 +37252,15 @@ class WordIndexer extends React.PureComponent {
 class HighlightableContent extends React.PureComponent {
   constructor(...args) {
     super(...args);
+    // References to the mounted container and content divs.
     this._container = void 0;
     this._content = void 0;
     this.state = {
       wordRanges: []
     };
+    /**
+     * Add the given DOMHighlight to the current set.
+     */
     this._handleAddHighlight = highlight => {
       const newDomHighlights = addHighlight(this._getDOMHighlights(), highlight);
       const newSerializedHighlights = {};
@@ -37028,6 +37269,10 @@ class HighlightableContent extends React.PureComponent {
       }
       this.props.onSerializedHighlightsUpdate(newSerializedHighlights);
     };
+    /**
+     * Remove the given highlight from the list, and call our callback with the
+     * new set of highlights.
+     */
     this._handleRemoveHighlight = keyToRemove => {
       const {
         serializedHighlights
@@ -37037,6 +37282,10 @@ class HighlightableContent extends React.PureComponent {
       delete newSerializedHighlights[keyToRemove];
       this.props.onSerializedHighlightsUpdate(newSerializedHighlights);
     };
+    /**
+     * When our WordIndexer sends us a new cache of word ranges, store it in
+     * our component state.
+     */
     this._handleWordsUpdate = wordRanges => {
       this.setState({
         wordRanges
@@ -37067,11 +37316,6 @@ class HighlightableContent extends React.PureComponent {
     }
     return domHighlights;
   }
-
-  /**
-   * Add the given DOMHighlight to the current set.
-   */
-
   render() {
     const highlights = this._getDOMHighlights();
 
@@ -37165,6 +37409,7 @@ function getInitialParseState() {
 class RefStart extends React.Component {
   constructor(...args) {
     super(...args);
+    // @ts-expect-error - TS2322 - Type '() => React.ReactNode' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
     this.getRefContent = () => {
       return this.props.refContent;
     };
@@ -37174,10 +37419,7 @@ class RefStart extends React.Component {
       style: REF_STYLE
     }, i18n.doNotTranslate("_"));
   }
-
-  // @ts-expect-error - TS2322 - Type '() => React.ReactNode' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
 }
-
 class RefEnd extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("span", {
@@ -37538,12 +37780,19 @@ const styles$8 = StyleSheet.create({
     zIndex: -1
   }
 });
+
+// The result of the `transform` function (end of this file)
+
+// Information about a passage reference, used in inter-widgets.
+
 class Passage extends React.Component {
   constructor(...args) {
     super(...args);
     this._contentRef = void 0;
     this._lineHeightMeasurerRef = void 0;
+    // @ts-expect-error - TS2564 - Property '_onResize' has no initializer and is not definitely assigned in the constructor.
     this._onResize = void 0;
+    // @ts-expect-error - TS2564 - Property '_stylesAppiedTimer' has no initializer and is not definitely assigned in the constructor.
     this._stylesAppiedTimer = void 0;
     this.state = {
       nLines: null,
@@ -37572,7 +37821,7 @@ class Passage extends React.Component {
       // height changes we expect are subpixel changes when the user
       // zooms in/out, and the only way to listen for zoom events is to
       // listen for resize events.
-      (_this$_lineHeightMeas = this._lineHeightMeasurerRef) == null ? void 0 : _this$_lineHeightMeas.measureLineHeight();
+      (_this$_lineHeightMeas = this._lineHeightMeasurerRef) == null || _this$_lineHeightMeas.measureLineHeight();
       this._updateState();
     }, 500);
     window.addEventListener("resize", this._onResize);
@@ -37991,14 +38240,10 @@ var PassageRefTarget$1 = {
 const {
   deepEq: deepEq$1
 } = Util;
-const BAR = "bar";
-const LINE = "line";
-const PIC = "pic";
-const HISTOGRAM = "histogram";
-const DOTPLOT = "dotplot";
 class Plotter extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // @ts-expect-error - TS2564 - Property 'shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
     this.shouldSetupGraphie = void 0;
     this._isMounted = false;
     this.horizHairline = void 0;
@@ -38034,11 +38279,11 @@ class Plotter extends React.Component {
       self.graphie = graphie;
       self.graphie.pics = [];
       self.graphie.dotTicks = [];
-      const isBar = self.props.type === BAR;
-      const isLine = self.props.type === LINE;
-      const isPic = self.props.type === PIC;
-      const isHistogram = self.props.type === HISTOGRAM;
-      const isDotplot = self.props.type === DOTPLOT;
+      const isBar = self.props.type === "bar";
+      const isLine = self.props.type === "line";
+      const isPic = self.props.type === "pic";
+      const isHistogram = self.props.type === "histogram";
+      const isDotplot = self.props.type === "dotplot";
       const isTiledPlot = isPic || isDotplot;
       const config = {};
       const c = config; // c for short
@@ -38216,7 +38461,7 @@ class Plotter extends React.Component {
       }
     };
     this.showHairlines = point => {
-      if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
+      if (this.props.apiOptions.isMobile) {
         // Hairlines are already initialized when the graph is loaded, so
         // here we just move them to the updated location and make them
         // visible.
@@ -38271,7 +38516,7 @@ class Plotter extends React.Component {
 
       // The deferred measurements returned from `labelCategory`.
       const categoryHeightPromises = [];
-      if (self.props.type === HISTOGRAM) {
+      if (self.props.type === "histogram") {
         // Histograms with n labels/categories have n - 1 buckets
         _.times(self.props.categories.length - 1, function (i) {
           self.setupBar({
@@ -38301,26 +38546,26 @@ class Plotter extends React.Component {
         _.each(self.props.categories, function (category, i) {
           const startHeight = self.state.values[i];
           let x;
-          if (self.props.type === BAR) {
+          if (self.props.type === "bar") {
             x = self.setupBar({
               index: i,
               startHeight: startHeight,
               config: config,
               isHistogram: false
             });
-          } else if (self.props.type === LINE) {
+          } else if (self.props.type === "line") {
             x = self.setupLine(i, startHeight, config);
-          } else if (self.props.type === PIC) {
+          } else if (self.props.type === "pic") {
             x = self.setupPic(i, config);
-          } else if (self.props.type === DOTPLOT) {
+          } else if (self.props.type === "dotplot") {
             x = self.setupDotplot(i, config);
           }
           let tickStart = 0;
           let tickEnd = -6 / c.scale[1];
-          if (self.props.type === DOTPLOT && !isMobile) {
+          if (self.props.type === "dotplot" && !isMobile) {
             tickStart = -tickEnd;
           }
-          if (self.props.type === DOTPLOT) {
+          if (self.props.type === "dotplot") {
             // Dotplot lets you specify to only show labels every 'n'
             // ticks. It also looks nicer if it makes the labelled
             // ticks a bit bigger.
@@ -38446,7 +38691,7 @@ class Plotter extends React.Component {
           },
           onMove: function () {
             const y = config.graph.lines[i].coord()[1];
-            const values = _.clone(self.state.values);
+            const values = [...self.state.values];
             values[i] = y;
             self.setState({
               values: values
@@ -38491,7 +38736,7 @@ class Plotter extends React.Component {
             // Snap the line back into range.
             this.transform();
           }
-          const values = _.clone(self.state.values);
+          const values = [...self.state.values];
           values[i] = y;
           self.setState({
             values: values
@@ -38505,6 +38750,12 @@ class Plotter extends React.Component {
       scaleBar(i, startHeight);
       return x;
     };
+    /**
+     * Renders a segment of an interactive line to the plotter graph
+     * @param i the index of the point to render
+     * @param startHeight the initial height of the given point
+     * @param config the graph setup, such as scale and dimensions
+     */
     this.setupLine = (i, startHeight, config) => {
       const isMobile = this.props.apiOptions.isMobile;
       const self = this;
@@ -38520,7 +38771,7 @@ class Plotter extends React.Component {
           }],
           onMove: function () {
             const y = c.graph.points[i].coord()[1];
-            const values = _.clone(self.state.values);
+            const values = [...self.state.values];
             values[i] = y;
             self.setState({
               values: values
@@ -38561,7 +38812,7 @@ class Plotter extends React.Component {
         });
         c.graph.points[i].onMove = function (x, y) {
           y = Math.min(Math.max(y, 0), c.dimY);
-          const values = _.clone(self.state.values);
+          const values = [...self.state.values];
           values[i] = y;
           self.setState({
             values: values
@@ -38674,7 +38925,7 @@ class Plotter extends React.Component {
       return x;
     };
     this.setPicHeight = (i, y) => {
-      const values = _.clone(this.state.values);
+      const values = [...this.state.values];
       values[i] = y;
       this.drawPicHeights(values, this.state.values);
       this.setState({
@@ -38701,7 +38952,7 @@ class Plotter extends React.Component {
         _.each(ps, function (pic, j) {
           const y = (j + 1) * self.props.scaleY;
           const show = y <= values[i];
-          if (self.props.type === DOTPLOT) {
+          if (self.props.type === "dotplot") {
             const wasShown = y <= prevValues[i];
             const wasJustShown = show && !wasShown;
             if (wasJustShown) {
@@ -38768,7 +39019,7 @@ class Plotter extends React.Component {
   }
 }
 Plotter.defaultProps = {
-  type: BAR,
+  type: "bar",
   labels: ["", ""],
   categories: [""],
   scaleY: 1,
@@ -39175,6 +39426,7 @@ const maxSampleSize = 1000;
 class Histogram extends React.Component {
   constructor(...args) {
     super(...args);
+    /* Renders the vertical line that users can drag across the histogram. */
     this._renderThresholdLine = () => {
       // Recall the the y-range goes from [-1, yMax] to allow for ticks on
       // the x-axis.
@@ -39198,6 +39450,7 @@ class Histogram extends React.Component {
         onMove: this.handleMouseInteraction
       }, _.map(coords, invisiblePointForCoord));
     };
+    /* Renders the shaded circle in the top right. */
     this._renderCircle = () => {
       const data = this.props.data;
 
@@ -39273,6 +39526,7 @@ class Histogram extends React.Component {
       };
       return [proportionBelow > 0 && plotBelowCircle(), proportionBelow < 1 && plotAboveCircle(), plotLabel()];
     };
+    /* Renders the actual bars of the histogram. */
     this._renderData = () => {
       const data = this.props.data;
       // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
@@ -39362,6 +39616,7 @@ class Histogram extends React.Component {
         threshold: point[0]
       });
     };
+    /* Convenience functions that help calculate props based on other props. */
     this._range = props => {
       const defaultRange = [[0, 100], [-1, 10]];
       props = props || this.props;
@@ -39404,9 +39659,6 @@ class Histogram extends React.Component {
       });
     }
   }
-
-  /* Renders the vertical line that users can drag across the histogram. */
-
   render() {
     const data = this.props.data;
     // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
@@ -39456,6 +39708,7 @@ Histogram.defaultProps = {
 class Simulator extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // @ts-expect-error - TS2564 - Property 'generateNumber' has no initializer and is not definitely assigned in the constructor.
     this.generateNumber = void 0;
     this.state = {
       invalidInput: false
@@ -39495,6 +39748,7 @@ class Simulator extends React.Component {
         userProportion: userProportion
       }, cb);
     };
+    // @ts-expect-error - TS2322 - Type '(sampleSize: any, cb: any) => void' is not assignable to type '(number: any) => void'.
     this.handleSampleSizeChange = (sampleSize, cb) => {
       if (sampleSize != null) {
         sampleSize = Math.min(maxSampleSize, Math.max(0, Math.floor(sampleSize)));
@@ -39537,6 +39791,7 @@ class Simulator extends React.Component {
       };
       return getSampleDistribution(props.sampleSize, props.numTrials, props.userProportion);
     };
+    /* InputPath API */
     this.getInputPaths = () => {
       return [["userProportion"], ["sampleSize"]];
     };
@@ -39746,6 +40001,7 @@ const VERTICAL = "vertical";
 class Sorter extends React.Component {
   constructor(...args) {
     super(...args);
+    // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     this._isMounted = void 0;
     this.state = {
       changed: false
@@ -40567,6 +40823,7 @@ const Transformations = {
             vector: [x, y]
           };
         };
+        /* InputPath API */
         this.setInputValue = (path, value, cb) => {
           const id = _.first(path);
           const vector = _.clone(this.state.vector);
@@ -40704,6 +40961,7 @@ const Transformations = {
             center: [centerX, centerY]
           };
         };
+        /* InputPath API */
         this.setInputValue = (path, value, cb) => {
           const id = _.first(path);
           let angleDeg = _.clone(this.state.angleDeg);
@@ -40882,6 +41140,7 @@ const Transformations = {
             line: [[x1, y1], [x2, y2]]
           };
         };
+        /* InputPath API */
         this.setInputValue = (path, value, cb) => {
           const id = _.first(path);
           let j;
@@ -41044,6 +41303,7 @@ const Transformations = {
             center: [x, y]
           };
         };
+        /* InputPath API */
         this.setInputValue = (path, value, cb) => {
           const id = _.first(path);
           let scale = this.state.scale;
@@ -41690,13 +41950,19 @@ class AddTransformBar extends React.Component {
     }));
   }
 }
+
+// there's no transform in the exports
+
 class Transformer extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // @ts-expect-error - TS2564 - Property 'tools' has no initializer and is not definitely assigned in the constructor.
     this.tools = void 0;
     this.currentTool = void 0;
+    // @ts-expect-error - TS2564 - Property 'transformations' has no initializer and is not definitely assigned in the constructor.
     this.transformations = void 0;
     this.shape = void 0;
+    // This is not the same as TransformerShape
     this.dilationCircle = void 0;
     this.rotatePoint = void 0;
     this.rotateHandle = void 0;
@@ -41761,11 +42027,18 @@ class Transformer extends React.Component {
         dilation: _.clone(this.props.tools.dilation)
       };
     };
+    /* Applies all transformations in `transformations`
+     * to the starting shape, and updates this.transformations
+     * to reflect this
+     *
+     * Usually called with this.props.transformations
+     */
     this.setTransformations = transformations => {
       this.resetCoords();
       this.transformations = _.clone(transformations);
       _.each(this.transformations, this.applyTransform);
     };
+    // the polygon that we transform
     this.addTransformerShape = (shape, translatable) => {
       const self = this;
       const graphie = this.graphie();
@@ -41872,22 +42145,27 @@ class Transformer extends React.Component {
     this.addTranslationTool = () => {
       var _this$shape, _this$shape2;
       const self = this;
-      (_this$shape = this.shape) == null ? void 0 : _this$shape.remove();
+      (_this$shape = this.shape) == null || _this$shape.remove();
       this.addTransformerShape((_this$shape2 = this.shape) == null ? void 0 : _this$shape2.toJSON(), /* translatable */true);
       return {
         remove: function () {
           var _self$shape, _self$shape2;
-          (_self$shape = self.shape) == null ? void 0 : _self$shape.remove();
+          (_self$shape = self.shape) == null || _self$shape.remove();
           self.addTransformerShape((_self$shape2 = self.shape) == null ? void 0 : _self$shape2.toJSON(), /* translatable */false);
         }
       };
     };
+    // Snaps a coord to this.graphie()'s snap
+    // @ts-expect-error - TS2322 - Type '(coord: Coord) => number[]' is not assignable to type '(arg1: Coord) => Coord'.
     this.snapCoord = coord => {
       const graphie = this.graphie();
       return _.map(coord, function (val, dim) {
         return KhanMath.roundToNearest(graphie.snap[dim], val);
       });
     };
+    // Normalize the coords into something that fits the new 45 degree
+    // reflection line.
+    // @ts-expect-error - TS2322 - Type '(messyCoords: [Coord, Coord]) => any[]' is not assignable to type '(arg1: [Coord, Coord]) => [Coord, Coord]'.
     this.normalizeReflectionCoords = messyCoords => {
       // @ts-expect-error - TS2345 - Argument of type 'Point' is not assignable to parameter of type 'Coord'.
       const midpoint = this.snapCoord(line.midpoint(messyCoords));
@@ -42046,6 +42324,12 @@ class Transformer extends React.Component {
         }
       };
     };
+    /* Scales a distance from the default range of
+     * [-10, 10] to the current this.props.graph.range
+     *
+     * Used for sizing various transformation tools
+     * (rotation handle, dilation circle)
+     */
     this.scaleToCurrentRange = dist => {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'props' does not exist on type 'ReactInstance'.
@@ -42109,8 +42393,8 @@ class Transformer extends React.Component {
       return {
         remove: function () {
           var _self$rotateHandle, _self$rotatePoint;
-          (_self$rotateHandle = self.rotateHandle) == null ? void 0 : _self$rotateHandle.remove();
-          (_self$rotatePoint = self.rotatePoint) == null ? void 0 : _self$rotatePoint.remove();
+          (_self$rotateHandle = self.rotateHandle) == null || _self$rotateHandle.remove();
+          (_self$rotatePoint = self.rotatePoint) == null || _self$rotatePoint.remove();
         }
       };
     };
@@ -42180,10 +42464,13 @@ class Transformer extends React.Component {
       return {
         remove: function () {
           var _self$dilationCircle;
-          (_self$dilationCircle = self.dilationCircle) == null ? void 0 : _self$dilationCircle.remove();
+          (_self$dilationCircle = self.dilationCircle) == null || _self$dilationCircle.remove();
         }
       };
     };
+    // returns a transformation object representing a rotation
+    // rounds the angle to the nearest 15 degrees
+    // @ts-expect-error - TS2322 - Type '(center: Coord, angleChanged: number) => { type: "rotation"; center: Coord; angleDeg: number; }' is not assignable to type '(arg1: Coord, arg2: number) => PerseusTransformerTransformation'.
     this.getRotationTransformFromAngle = (center, angleChanged) => {
       angleChanged = (angleChanged + 360) % 360;
       if (angleChanged > 180) {
@@ -42198,10 +42485,13 @@ class Transformer extends React.Component {
         angleDeg: roundedAngle
       };
     };
+    // apply and save a transform
     this.doTransform = (transform, callback) => {
       this.applyTransform(transform);
       this.addTransform(transform, callback);
     };
+    // apply a transform to our polygon (without modifying our transformation
+    // list)
     this.applyTransform = transform => {
       if (this.props.graphMode !== "static") {
         const transformFunc = TransformOps.apply(transform);
@@ -42209,6 +42499,7 @@ class Transformer extends React.Component {
         this.applyCoordTransformation(transformFunc);
       }
     };
+    // transform our polygon by transforming each point using a given function
     this.applyCoordTransformation = pointTransform => {
       var _this$shape3;
       _.each(this.shape.points, function (point) {
@@ -42216,7 +42507,7 @@ class Transformer extends React.Component {
         const newCoord = pointTransform(point.coord);
         point.setCoord(newCoord);
       });
-      (_this$shape3 = this.shape) == null ? void 0 : _this$shape3.update();
+      (_this$shape3 = this.shape) == null || _this$shape3.update();
     };
     this.resetCoords = () => {
       var _this$shape4;
@@ -42224,8 +42515,9 @@ class Transformer extends React.Component {
       _.each(this.shape.points, function (point, i) {
         point.setCoord(startCoords[i]);
       });
-      (_this$shape4 = this.shape) == null ? void 0 : _this$shape4.update();
+      (_this$shape4 = this.shape) == null || _this$shape4.update();
     };
+    // Remove the last transformation
     this.handleUndoClick = () => {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'changeSelected' does not exist on type 'ReactInstance'.
@@ -42243,6 +42535,7 @@ class Transformer extends React.Component {
       // @ts-expect-error - TS2345 - Argument of type '(arg1: any) => unknown' is not assignable to parameter of type '() => unknown'.
       callback);
     };
+    // add a transformation to our props list of transformation
     this.addTransform = (transform, callback) => {
       this.transformations = TransformOps.append(this.transformations, transform);
       this.props.onChange({
@@ -42264,6 +42557,12 @@ class Transformer extends React.Component {
     this.simpleValidate = rubric => {
       return Transformer.validate(this.getUserInput(), rubric);
     };
+    /**
+     * Calculate where the coordinates would be if they were
+     * moved, even if we're in formal mode with no movement
+     * (and thus the actual movablepoints may not have moved
+     */
+    // @ts-expect-error - TS2322 - Type '() => [Coord, Coord] | readonly Coord[] | [Coord, Coord, Coord]' is not assignable to type '() => Coord'.
     this.getCoords = () => {
       const startCoords = this.props.starting.shape.coords;
       const transforms = this.props.transformations;
@@ -42299,6 +42598,7 @@ class Transformer extends React.Component {
         }
       };
     };
+    /* InputPath API */
     this._handleFocus = (...path) => {
       this.props.onFocus(path);
     };
@@ -43389,6 +43689,7 @@ class OldUnitInput extends React.Component {
     this.getUserInput = () => {
       return this.props.value;
     };
+    // begin mobile stuff
     this.getInputPaths = () => {
       // The widget itself is an input, so we return a single empty list to
       // indicate this.
@@ -43530,7 +43831,6 @@ class OldUnitInput extends React.Component {
     clearTimeout(this._errorTimeout);
   }
   // end mobile stuff
-
   // TODO(joel) think about showing the error buddy
   render() {
     return /*#__PURE__*/React.createElement("div", {
@@ -43647,6 +43947,9 @@ const DEFAULT_HEIGHT = 720;
 const KA_EMBED = "{host}/embed_video?slug={slug}" + "&internal_video_only=1";
 const IS_URL = /^https?:\/\//;
 const IS_KA_SITE = /(khanacademy\.org|localhost)/;
+
+// exports has no 'transform'
+
 /**
  * Video renderer.
  */
@@ -43768,7 +44071,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "12.3.0";
+const libVersion = "13.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44027,6 +44330,12 @@ const styles$5 = StyleSheet.create({
 class HintsRenderer extends React.Component {
   constructor(...args) {
     super(...args);
+    // The isFinalHelpPage property determines if the user has requested help
+    // after answering an exercise question incorrectly, which differs from
+    // the case when the user is requesting successive hints. In the case
+    // where isFinalHelpPage property is true, we want to display all hints.
+    // We know the user is on the final help page when the hintsVisible
+    // property jumps from 0 to the total number of hints.
     this.state = {
       isFinalHelpPage: false
     };
@@ -44270,6 +44579,9 @@ const styles$4 = StyleSheet.create({
 });
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
+
+// This represents the shape of any component that uses this ProvideKeypad
+// mixin.
 // NOTE: This is not a real component.  It's a collection of methods used to
 // create and manage a Keypad instances.
 // TODO(LP-10789): replace this with a React Context object to pass information
@@ -44296,7 +44608,7 @@ const ProvideKeypad = {
       // React tree. We may also want to add this keypad asynchronously
       // or on-demand in the future.
       _this._keypadContainer = document.createElement("div");
-      (_document$body = document.body) == null ? void 0 : _document$body.appendChild(_this._keypadContainer);
+      (_document$body = document.body) == null || _document$body.appendChild(_this._keypadContainer);
       render( /*#__PURE__*/React.createElement(MobileKeypad, {
         onElementMounted: element => {
           // NOTE(kevinb): The reason why this setState works is
@@ -44348,10 +44660,9 @@ const {
  * @depreciated use ServerItemRenderer
  */
 class ItemRenderer extends React.Component {
-  // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
-
   constructor(props) {
     super(props);
+    // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
     this.questionRenderer = void 0;
     this.hintsRenderer = void 0;
     this._currentFocus = void 0;
@@ -44362,6 +44673,7 @@ class ItemRenderer extends React.Component {
         this._onRendererBlur(oldFocus);
       }
     };
+    // NOTE: this must remain as an arrow function because we pass it Renderer
     this.handleInteractWithWidget = widgetId => {
       const withRemoved = _.difference(this.state.questionHighlightedWidgets, [widgetId]);
       this.setState({
@@ -44496,7 +44808,9 @@ class ItemRenderer extends React.Component {
         this.props.onShowCalculator && this.props.onShowCalculator();
       }
       if (answerArea.periodicTable) {
-        this.props.onShowPeriodicTable && this.props.onShowPeriodicTable();
+        this.props.onShowPeriodicTable && this.props.onShowPeriodicTable({
+          showKey: answerArea.periodicTableWithKey
+        });
       }
       if (answerArea.zTable) {
         this.props.onShowZTable && this.props.onShowZTable();
@@ -44592,9 +44906,6 @@ class ItemRenderer extends React.Component {
     const questionAreaInputPaths = this.questionRenderer.getInputPaths();
     return questionAreaInputPaths;
   }
-
-  // NOTE: this must remain as an arrow function because we pass it Renderer
-
   focus() {
     return this.questionRenderer.focus();
   }
@@ -44689,7 +45000,7 @@ class ItemRenderer extends React.Component {
       }
     };
     this.questionRenderer.restoreSerializedState(state.question, fireCallback);
-    (_this$hintsRenderer2 = this.hintsRenderer) == null ? void 0 : _this$hintsRenderer2.restoreSerializedState(state.hints, fireCallback);
+    (_this$hintsRenderer2 = this.hintsRenderer) == null || _this$hintsRenderer2.restoreSerializedState(state.hints, fireCallback);
   }
   showRationalesForCurrentlySelectedChoices() {
     this.questionRenderer.showRationalesForCurrentlySelectedChoices();
@@ -44732,10 +45043,9 @@ const {
 } = objective_;
 /* eslint-disable-next-line react/no-unsafe */
 class ServerItemRenderer extends React.Component {
-  // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
-
   constructor(props) {
     super(props);
+    // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
     this.questionRenderer = void 0;
     this.hintsRenderer = void 0;
     this._currentFocus = void 0;
@@ -44758,6 +45068,8 @@ class ServerItemRenderer extends React.Component {
         this.props.apiOptions.interactionCallback();
       }
     };
+    // This must be pre-bound otherwise SvgImage's shouldComponentUpdate
+    // won't behave correctly and we'll get an infinite loop.
     this.setAssetStatus = (assetKey, status) => {
       // setState doesn't properly merge objects so we have to do it ourselves
       const assetStatuses = _extends({}, this.state.assetStatuses, {
@@ -44981,10 +45293,6 @@ class ServerItemRenderer extends React.Component {
   deselectIncorrectSelectedChoices() {
     this.questionRenderer.deselectIncorrectSelectedChoices();
   }
-
-  // This must be pre-bound otherwise SvgImage's shouldComponentUpdate
-  // won't behave correctly and we'll get an infinite loop.
-
   render() {
     const apiOptions = _extends({}, ApiOptions.defaults, this.props.apiOptions, {
       onFocusChange: this._handleFocusChange
@@ -45330,7 +45638,7 @@ class MultiButtonGroup extends React.Component {
   focus() {
     var _ReactDOM$findDOMNode;
     // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    (_ReactDOM$findDOMNode = ReactDOM.findDOMNode(this)) == null ? void 0 : _ReactDOM$findDOMNode.focus();
+    (_ReactDOM$findDOMNode = ReactDOM.findDOMNode(this)) == null || _ReactDOM$findDOMNode.focus();
     return true;
   }
   render() {
@@ -45503,7 +45811,6 @@ const symbStyle = {
 // on the page rather than reusing an instance (which will cause an error).
 // Also, it's useful for things which might look different depending on the
 // props.
-
 const basic = [() => [/*#__PURE__*/React.createElement("span", {
   key: "plus",
   style: slightlyBig
@@ -45852,6 +46159,9 @@ var constants = /*#__PURE__*/Object.freeze({
 // A background image applied to various widgets.
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
+const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
+
+// TODO(FEI-3983): Create proper types for these.
 
 /**
  * Traverses a {content, widgets, images} renderer props object,
@@ -46036,6 +46346,49 @@ var shapes = {
  * provided shape. If not, behavior is undefined and may not respect the type
  * signatures specified here.
  */
+
+/**
+ * The sequence of edges that lead to a particular node in a Tree.
+ * Elements can be `string` to correspond to an ObjectNode key, or `number` to
+ * correspond to an ArrayNode index.
+ */
+
+/**
+ * These are function interfaces for mapping over various types of tree nodes.
+ *
+ * ArrayMapper is a bit more complicated than the leaf node mappers. It's
+ * executed in the context of a `mapTree` call, after we've finished mapping
+ * its child nodes, so the function has access to both the resulting array
+ * (with mapped elements) and the original array (with the original untouched
+ * elements).
+ *
+ * The ArrayMapper then has the opportunity to apply a final transformation to
+ * the resulting array, like filtering certain elements or (in the hacky
+ * MultiRenderer case) attaching a `renderHints` method to arrays of hint
+ * renderers :)
+ *
+ * This is why `TreeMapper#setArrayMapper` must be called last: ArrayMapper's
+ * types depend on the ContentMapper and HintMapper's types. And, since you can
+ * only specify one mapper at a time in this builder interface (which is
+ * necessary to provide default mappers in a type-safe way), you need your
+ * dependencies to already be in place by the time you call `setArrayMapper`.
+ * Otherwise, we'd have to set the ArrayMapper and *hope* that you *eventually*
+ * provide a compatible ContentMapper and HintMapper, which is difficult to
+ * prove at compile time.
+ *
+ * There's no ObjectMapper here, but not for any particular reason. We just
+ * don't have a use case for it yet, so we haven't built it yet.
+ */
+
+/**
+ * A TreeMapper is a collection of node mappers, which, together, compose the
+ * behavior for mapping over an entire tree.
+ *
+ * This serves as the interface for the two TreeMapper classes, including both
+ * the internal mapper properties that we care about, and the `mapTree`
+ * function that the call site will use.
+ */
+
 /**
  * This is a TreeMapper that only has mappers specified for its leaf nodes; its
  * array mapper is the identity function.
@@ -46331,6 +46684,23 @@ function treeToItem(node) {
 }
 
 const _excluded = ["item", "children", "shape", "serializedState", "onSerializedStateUpdated"];
+
+// TODO(mdr)
+// TODO(mdr)
+// TODO(mdr)
+
+// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
+
+/**
+ * TODO(somewhatabstract, JIRA-XXXX):
+ * Some usage of this type somewhere is causing TypeScript to believe that these
+ * elements should be components. Don't know where that is, to fix it up
+ * properly. In reality, these types are just too hard to use and aren't
+ * really helping us out as I now have to suppress this rather than
+ * get value from the type. :(
+ */ // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
+// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
+// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 class MultiRenderer extends React.Component {
   constructor(props) {
     super(props);
@@ -46614,7 +46984,7 @@ class MultiRenderer extends React.Component {
         return;
       }
       numCallbacks++;
-      (_data$ref2 = data.ref) == null ? void 0 : _data$ref2.restoreSerializedState(state, countCallback);
+      (_data$ref2 = data.ref) == null || _data$ref2.restoreSerializedState(state, countCallback);
     });
   }
 
@@ -46926,5 +47296,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemRenderer, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, globalConstants, globalStyles, iconPaths as icons, init, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemRenderer, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, globalConstants, globalStyles, iconPaths as icons, init, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map