@khanacademy/perseus 5.0.0 → 6.0.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import * as KAS from '@khanacademy/kas';
-import { KeypadInput, KeypadTypes, keypadElementPropType, Keypad } from '@khanacademy/math-input';
+import { KeypadInput, KeypadType, keypadElementPropType, Keypad } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
@@ -7,12 +7,11 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import _, { debounce } from 'underscore';
-import PropTypes from 'prop-types';
 import $ from 'jquery';
 import MathQuill from 'mathquill';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
-import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import { number, point, vector as vector$1, line, ray } from '@khanacademy/kmath';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { StyleSheet, css } from 'aphrodite';
@@ -28,6 +27,7 @@ import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { Popover, PopoverContent, PopoverContentCore } from '@khanacademy/wonder-blocks-popover';
 import { OptionItem, SingleSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$1 from 'lodash.debounce';
+import createReactClass from 'create-react-class';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import Link from '@khanacademy/wonder-blocks-link';
 
@@ -60,6 +60,30 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+/**
+ * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
+ * inline like Font Awesome did.
+ *
+ * If you are looking for an icon that we've used before you should look in
+ * webapp's `icon-paths.js` which is a reference file for all the SVG paths
+ * that we've used. You'll need to copy the object from that file into
+ * whichever file you're using the icon and explicitly pass it in to the
+ * <InlineIcon/> React component.
+ *
+ * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
+ * be defined differently. At some point we might want to add these attributes
+ * to `icon-paths.js`, but for now this is a fairly safe assumption.
+ *
+ * Sample usage:
+ *
+ *   const editIcon = {
+ *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
+ *      width: 100,
+ *      height: 78.912,
+ *   };
+ *   <InlineIcon {...editIcon} />
+ *
+ */
 const InlineIcon = ({
   path,
   width,
@@ -79,18 +103,6 @@ const InlineIcon = ({
   d: path,
   fill: "currentColor"
 }));
-InlineIcon.propTypes = {
-  // An SVG path to render.
-  path: PropTypes.string.isRequired,
-  // The path's viewBox dimensions.
-  // We set the viewport height to 1em and scale the width accordingly.
-  height: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  style: PropTypes.object,
-  // A11y description for this icon. If absent, icon is marked
-  // aria-hidden=true
-  title: PropTypes.string
-};
 
 let _dependencies = null;
 const setDependencies = dependencies => {
@@ -623,145 +635,96 @@ MathInput.defaultProps = {
   buttonsVisible: "focused"
 };
 
-/**
- * A generic tooltip library for React.js
- *
- * This should eventually end up in react-components
- *
- * Interface: ({a, b} means one of a or b)
- * import Tooltip from "./tooltip";
- * <Tooltip
- *     className="class-for-tooltip-contents"
- *     horizontalPosition="left" // one of "left", "right"
- *     horizontalAlign="left" // one of "left", "right"
- *     verticalPosition="bottom" // one of "top", "bottom"
- *     arrowSize={10} // arrow size in pixels
- *     borderColor="#ccc" // color of the border for the tooltip
- *     show={true} // whether the tooltip should currently be visible
- *     targetContainerStyle={targetContainerStyle}
- * >
- *     <TargetElementOfTheTooltip />
- *     <TooltipContents1 />
- *     <TooltipContents2 />
- * </Tooltip>
- *
- * To show/hide the tooltip, the parent component should call the
- * .show() and .hide() methods of the tooltip when appropriate.
- * (These are usually set up as handlers of events on the target element.)
- *
- * Notes:
- *     className should not specify a border; that is handled by borderColor
- *     so that the arrow and tooltip match
- */
+/* eslint-disable react/no-unsafe */
 const zIndex = 10;
-const Triangle = createReactClass({
-  displayName: "Triangle",
-  propTypes: {
-    color: PropTypes.string.isRequired,
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    horizontalDirection: PropTypes.oneOf(["left", "right"]).isRequired,
-    verticalDirection: PropTypes.oneOf(["top", "bottom"]).isRequired
-  },
-  render: function () {
-    let borderLeft;
-    let borderRight;
-    let borderTop;
-    let borderBottom;
-    const hBorder = `${this.props.width}px solid transparent`;
-    if (this.props.horizontalDirection === "right") {
-      borderLeft = hBorder;
-    } else {
-      borderRight = hBorder;
-    }
-    const vBorder = `${this.props.height}px solid ${this.props.color}`;
-    if (this.props.verticalDirection === "top") {
-      borderTop = vBorder;
-    } else {
-      borderBottom = vBorder;
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "block",
-        height: 0,
-        width: 0,
-        position: "absolute",
-        left: this.props.left,
-        top: this.props["top"],
-        borderLeft: borderLeft,
-        borderRight: borderRight,
-        borderTop: borderTop,
-        borderBottom: borderBottom
-      }
-    });
+let HorizontalDirection = /*#__PURE__*/function (HorizontalDirection) {
+  HorizontalDirection["Left"] = "left";
+  HorizontalDirection["Right"] = "right";
+  return HorizontalDirection;
+}({});
+let VerticalDirection = /*#__PURE__*/function (VerticalDirection) {
+  VerticalDirection["Top"] = "top";
+  VerticalDirection["Bottom"] = "bottom";
+  return VerticalDirection;
+}({});
+const Triangle = props => {
+  let borderLeft;
+  let borderRight;
+  let borderTop;
+  let borderBottom;
+  const hBorder = `${props.width}px solid transparent`;
+  if (props.horizontalDirection === "right") {
+    borderLeft = hBorder;
+  } else {
+    borderRight = hBorder;
   }
-});
-const TooltipArrow = createReactClass({
-  displayName: "TooltipArrow",
-  propTypes: {
-    position: PropTypes.string,
-    visibility: PropTypes.string,
-    left: PropTypes.number,
-    top: PropTypes.number,
-    color: PropTypes.string.isRequired,
-    // a css color
-    border: PropTypes.string.isRequired,
-    // a css color
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    horizontalDirection: PropTypes.oneOf(["left", "right"]).isRequired,
-    verticalDirection: PropTypes.oneOf(["top", "bottom"]).isRequired
-  },
-  getDefaultProps: function () {
-    return {
-      position: "relative",
-      visibility: "visible",
-      left: 0,
-      top: 0
-    };
-  },
+  const vBorder = `${props.height}px solid ${props.color}`;
+  if (props.verticalDirection === "top") {
+    borderTop = vBorder;
+  } else {
+    borderBottom = vBorder;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "block",
+      height: 0,
+      width: 0,
+      position: "absolute",
+      left: props.left,
+      top: props["top"],
+      borderLeft: borderLeft,
+      borderRight: borderRight,
+      borderTop: borderTop,
+      borderBottom: borderBottom
+    }
+  });
+};
+const TooltipArrow = props => {
   // TODO(aria): Think about adding a box-shadow to the triangle here
   // See http://css-tricks.com/triangle-with-shadow/
-  render: function () {
-    //const isRight = (this.props.horizontalDirection === "right");
-    const isTop = this.props.verticalDirection === "top";
-    const frontTopOffset = isTop ? 0 : 1;
-    const borderTopOffset = isTop ? 0 : -1;
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "block",
-        position: this.props.position,
-        visibility: this.props.visibility,
-        left: this.props.left,
-        top: this.props["top"],
-        width: this.props.width + 2,
-        height: this.props.height + 1,
-        marginTop: -1,
-        marginBottom: -2,
-        zIndex: zIndex
-      }
-    }, /*#__PURE__*/React.createElement(Triangle, {
-      horizontalDirection: this.props.horizontalDirection,
-      verticalDirection: this.props.verticalDirection,
-      color: this.props.border,
-      left: 0,
-      top: borderTopOffset,
-      width: this.props.width + 2 // one extra for the diagonal
-      ,
-      height: this.props.height + 2
-    }), /*#__PURE__*/React.createElement(Triangle, {
-      horizontalDirection: this.props.horizontalDirection,
-      verticalDirection: this.props.verticalDirection,
-      color: this.props.color,
-      left: 1,
-      top: frontTopOffset,
-      width: this.props.width,
-      height: this.props.height
-    }));
-  }
-});
+
+  //const isRight = (this.props.horizontalDirection === "right");
+  const isTop = props.verticalDirection === "top";
+  const frontTopOffset = isTop ? 0 : 1;
+  const borderTopOffset = isTop ? 0 : -1;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "block",
+      position: props.position,
+      visibility: props.visibility,
+      left: props.left,
+      top: props["top"],
+      width: props.width + 2,
+      height: props.height + 1,
+      marginTop: -1,
+      marginBottom: -2,
+      zIndex: zIndex
+    }
+  }, /*#__PURE__*/React.createElement(Triangle, {
+    horizontalDirection: props.horizontalDirection,
+    verticalDirection: props.verticalDirection,
+    color: props.border,
+    left: 0,
+    top: borderTopOffset,
+    width: props.width + 2 // one extra for the diagonal
+    ,
+    height: props.height + 2
+  }), /*#__PURE__*/React.createElement(Triangle, {
+    horizontalDirection: props.horizontalDirection,
+    verticalDirection: props.verticalDirection,
+    color: props.color,
+    left: 1,
+    top: frontTopOffset,
+    width: props.width,
+    height: props.height
+  }));
+};
+TooltipArrow.defaultProps = {
+  position: "relative",
+  visibility: "visible",
+  left: 0,
+  top: 0
+};
 const VERTICAL_CORNERS = {
   top: {
     top: "-100%"
@@ -788,59 +751,34 @@ const HORIZONTAL_ALIGNMNENTS = {
     arrowLeft: arrowSize => -arrowSize - 2
   }
 };
-
-// eslint-disable-next-line react/no-unsafe
-const Tooltip = createReactClass({
-  displayName: "Tooltip",
-  propTypes: {
-    show: PropTypes.bool.isRequired,
-    className: PropTypes.string,
-    arrowSize: PropTypes.number,
-    borderColor: PropTypes.string,
-    verticalPosition: PropTypes.oneOf(Object.keys(VERTICAL_CORNERS)),
-    horizontalPosition: PropTypes.oneOf(Object.keys(HORIZONTAL_CORNERS)),
-    horizontalAlign: PropTypes.oneOf(Object.keys(HORIZONTAL_ALIGNMNENTS)),
-    children: PropTypes.arrayOf(PropTypes.element).isRequired,
-    targetContainerStyle: PropTypes.any // style object
-  },
-
-  getDefaultProps: function () {
-    return {
-      className: "",
-      arrowSize: 10,
-      borderColor: "#ccc",
-      verticalPosition: "bottom",
-      horizontalPosition: "left",
-      horizontalAlign: "left",
-      targetContainerStyle: {}
-    };
-  },
-  getInitialState: function () {
-    return {
+class Tooltip extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       height: null // used for offsetting "top" positioned tooltips
     };
-  },
+  }
 
-  componentDidMount: function () {
+  componentDidMount() {
     this._updateHeight();
-  },
-  UNSAFE_componentWillReceiveProps: function () {
+  }
+  UNSAFE_componentWillReceiveProps() {
     // If the contents have changed, reset our measure of the height
     this.setState({
       height: null
     });
-  },
-  componentDidUpdate: function () {
+  }
+  componentDidUpdate() {
     this._updateHeight();
-  },
-  _renderToolTipDiv: function (isTooltipAbove) {
+  }
+  _renderToolTipDiv(isTooltipAbove) {
     const settings = Object.assign({}, HORIZONTAL_CORNERS[this.props.horizontalPosition], HORIZONTAL_ALIGNMNENTS[this.props.horizontalAlign], VERTICAL_CORNERS[this.props.verticalPosition]);
     let arrowAbove;
     let arrowBelow;
     if (isTooltipAbove) {
       // We put an absolutely positioned arrow in the correct place
       arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: "top",
+        verticalDirection: VerticalDirection.Top,
         horizontalDirection: this.props.horizontalAlign,
         position: "absolute",
         color: "white",
@@ -855,7 +793,7 @@ const Tooltip = createReactClass({
       // And we use a visibility: hidden arrow below to shift up the
       // content by the correct amount
       arrowBelow = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: "top",
+        verticalDirection: VerticalDirection.Top,
         horizontalDirection: this.props.horizontalAlign,
         visibility: "hidden",
         color: "white",
@@ -868,7 +806,7 @@ const Tooltip = createReactClass({
       });
     } else {
       arrowAbove = /*#__PURE__*/React.createElement(TooltipArrow, {
-        verticalDirection: "bottom",
+        verticalDirection: VerticalDirection.Bottom,
         horizontalDirection: this.props.horizontalAlign,
         color: "white",
         border: this.props.borderColor,
@@ -916,8 +854,8 @@ const Tooltip = createReactClass({
         zIndex: zIndex - 1
       }
     }, this.props.children.slice(1)), arrowBelow));
-  },
-  _updateHeight: function () {
+  }
+  _updateHeight() {
     const tooltipContainer = ReactDOM__default.findDOMNode(
     // eslint-disable-next-line react/no-string-refs
     this.refs.tooltipContainer);
@@ -927,8 +865,8 @@ const Tooltip = createReactClass({
         height
       });
     }
-  },
-  render: function () {
+  }
+  render() {
     const isTooltipAbove = this.props.verticalPosition === "top";
 
     /* We wrap the entire output in a span so that it displays inline */
@@ -936,7 +874,18 @@ const Tooltip = createReactClass({
       style: this.props.targetContainerStyle
     }, this.props.children[0]), !isTooltipAbove && this._renderToolTipDiv());
   }
-});
+}
+
+// Sorry.  // Apology-Oriented-Programming
+Tooltip.defaultProps = {
+  className: "",
+  arrowSize: 10,
+  borderColor: "#ccc",
+  verticalPosition: VerticalDirection.Bottom,
+  horizontalPosition: HorizontalDirection.Left,
+  horizontalAlign: HorizontalDirection.Left,
+  targetContainerStyle: {}
+};
 
 /**
  * Icon paths to be used with `inline-icon.jsx`.
@@ -2845,9 +2794,9 @@ class Expression extends React.Component {
       role: "tooltip"
     }, /*#__PURE__*/React.createElement(Tooltip, {
       className: "error-text-container",
-      horizontalPosition: "right",
-      horizontalAlign: "left",
-      verticalPosition: "top",
+      horizontalPosition: HorizontalDirection.Right,
+      horizontalAlign: HorizontalDirection.Left,
+      verticalPosition: VerticalDirection.Top,
       arrowSize: 10,
       borderColor: "#fcc335",
       show: this.state.showErrorText
@@ -2919,7 +2868,7 @@ Expression.defaultProps = {
 const keypadConfigurationForProps = widgetOptions => {
   // Always use the Expression keypad, regardless of the button sets that have
   // been enabled.
-  const keypadType = KeypadTypes.EXPRESSION;
+  const keypadType = KeypadType.EXPRESSION;
 
   // Extract any and all variables and constants from the answer forms.
   const uniqueExtraVariables = {};
@@ -3380,8 +3329,6 @@ function tickStepFromNumTicks(span, numTicks) {
   // Round start and stop values to step interval.
   return step;
 }
-// [min, max]
-
 const constrainTickStep = (step, range) => {
   const span = range[1] - range[0];
   const numTicks = span / step;
@@ -4422,31 +4369,40 @@ var constants$1 = /*#__PURE__*/Object.freeze({
     articleMaxWidthTableInPx: articleMaxWidthTableInPx
 });
 
-/* eslint-disable react/prop-types */
+/**
+ * A wrapper for a component that would otherwise have a fixed width and
+ * height, that magically makes it reponsive while preserving its aspect ratio.
+ * Specifically, the component will shrink dynamically when it needs to but
+ * won't ever grow past its original dimensions.
+ *
+ * Can wrap multiple components with the same dimensions at the same time;
+ * these will be overlaid on top of each other.
+ *
+ * Usage:
+ * <FixedToResponsive width={400} height={400}>
+ *     <img src="bottom-layer.png" />
+ *     <img src="top-layer.png" />
+ * </FixedToResponsive>
+ */
 const MIN_VIEWPORT_HEIGHT = 480;
-const FixedToResponsive = createReactClass({
-  displayName: "FixedToResponsive",
-  propTypes: {
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    className: PropTypes.string,
-    constrainHeight: PropTypes.bool,
-    allowFullBleed: PropTypes.bool
-  },
-  getDefaultProps: function () {
-    return {
-      className: "",
-      constrainHeight: false,
-      allowFullBleed: false
-    };
-  },
-  getInitialState: function () {
-    return {
+class FixedToResponsive extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this._isMounted = false;
+    this.state = {
       viewportHeight: null,
       viewportWidth: null
     };
-  },
-  componentDidMount: function () {
+    this._cacheViewportSize = () => {
+      if (this._isMounted) {
+        this.setState({
+          viewportHeight: Math.max(MIN_VIEWPORT_HEIGHT, window.innerHeight),
+          viewportWidth: window.innerWidth
+        });
+      }
+    };
+  }
+  componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
     this._isMounted = true;
@@ -4467,19 +4423,11 @@ const FixedToResponsive = createReactClass({
     } else {
       this._cacheViewportSize();
     }
-  },
-  componentWillUnmount: function () {
+  }
+  componentWillUnmount() {
     this._isMounted = false;
-  },
-  _cacheViewportSize: function () {
-    if (this._isMounted) {
-      this.setState({
-        viewportHeight: Math.max(MIN_VIEWPORT_HEIGHT, window.innerHeight),
-        viewportWidth: window.innerWidth
-      });
-    }
-  },
-  render: function () {
+  }
+  render() {
     // The ideal behavior for responsified, fixed size child components is
     // that they shrink when they need to (while preserving aspect ratio)
     // but never grow larger than their original dimensions. We accomplish
@@ -4535,7 +4483,12 @@ const FixedToResponsive = createReactClass({
     }
     return container;
   }
-});
+}
+FixedToResponsive.defaultProps = {
+  className: "",
+  constrainHeight: false,
+  allowFullBleed: false
+};
 
 /* Local helper methods. */
 
@@ -9061,6 +9014,26 @@ const KhanColors = {
   DYNAMIC: "#6495ED" // BLUE
 };
 
+function render(element, container, callback) {
+  // TODO(LP-11406): Replace this, or callers, with React Portal
+  // @ts-expect-error [FEI-5003] - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
+  // eslint-disable-next-line no-restricted-syntax
+  return ReactDOM__default.render(
+  /*#__PURE__*/
+  /**
+   * `RenderStateRoot` is responsible for tracking whether it's
+   * the initial render or subsequent renders.  It's used by
+   * `useUniqueId` and will be used by `UniqueIDProvider` and
+   * `WithSSRPlaceholder` in the future.  We're placing it as
+   * high up in the render tree as possible to ensure that any
+   * components using that hook or those components will function
+   * correctly.
+   */
+  React.createElement(RenderStateRoot, {
+    throwIfNested: false
+  }, element), container, callback);
+}
+
 function findChildOrAdd(elem, className) {
   const $child = $(elem).find("." + className);
   if ($child.length === 0) {
@@ -9135,74 +9108,18 @@ var Tex$1 = {
 
       // Store the formula that we're using
       $elem.attr("data-math-formula", text);
-      const katex = await getDependencies().getKaTeX();
-      // Try to process the nodes with KaTeX first
-      try {
-        // Don't use the `trust: true` setting with KaTeX.  There is a
-        // security issue with it as outlined in https://hackerone.com/reports/844216.
-        // See https://khanacademy.atlassian.net/browse/FEI-2225 for
-        // additional context.
-        katex.render(text, $katexHolder[0], {
-          colorIsTextColor: true
-        });
-        // If that worked, and we previously formatted with
-        // mathjax, do some mathjax cleanup
-        if ($elem.attr("data-math-type") === "mathjax") {
-          // Remove the old mathjax stuff
-          if (typeof MathJax !== "undefined") {
-            const jax = MathJax.Hub.getJaxFor(script);
-            if (jax) {
-              const e = jax.SourceElement();
-              if (e.previousSibling && e.previousSibling.className) {
-                jax.Remove();
-              }
-            }
-          }
-        }
-        $elem.attr("data-math-type", "katex");
-        // Call the callback
+      const {
+        TeX
+      } = await getDependencies();
+      // We use createElement instead of JSX here because we can't name this file tex.tsx;
+      // that name is already taken.
+      render( /*#__PURE__*/React.createElement(TeX, {
+        children: text
+      }), $katexHolder[0], () => {
         if (callback) {
           doCallback(elem, callback);
         }
-        return;
-      } catch (err) {
-        getDependencies().logKaTeXError(text, err);
-        if (err instanceof katex.ParseError) {
-          throw err;
-        }
-      }
-
-      // Otherwise, fallback to MathJax
-
-      // (Note: we don't need to do any katex cleanup here, because
-      // KaTeX is smart and cleans itself up)
-      $elem.attr("data-math-type", "mathjax");
-      // Update the script tag, or add one if necessary
-      if (!script) {
-        $mathjaxHolder.append("<script type='math/tex'>" + text.replace(/<\//g, "< /") + "</script>");
-      } else {
-        if ("text" in script) {
-          // IE8, etc
-          script.text = text;
-        } else {
-          script.textContent = text;
-        }
-      }
-      if (typeof MathJax !== "undefined") {
-        // Put the process, a debug log, and the callback into the
-        // MathJax queue
-        MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $mathjaxHolder[0]]);
-        if (callback) {
-          MathJax.Hub.Queue(function () {
-            const cb = MathJax.Callback(function () {});
-            doCallback(elem, function () {
-              callback();
-              cb();
-            });
-            return cb;
-          });
-        }
-      }
+      });
     }
   },
   // Function to restore a node to a non-math-processed state
@@ -11166,10 +11083,11 @@ _.extend(GraphUtils.Graphie.prototype, {
           }
           isClickingCanvas = true;
           if (options.onMouseMove) {
+            const handler = options.onMouseMove;
             $(document).bind("vmousemove.mouseLayer", function (e) {
               if (isClickingCanvas) {
                 e.preventDefault();
-                options.onMouseMove(graph.getMouseCoord(e));
+                handler(graph.getMouseCoord(e));
               }
             });
           }
@@ -11186,18 +11104,20 @@ _.extend(GraphUtils.Graphie.prototype, {
         }
       });
       if (options.onMouseOver) {
+        const handler = options.onMouseOver;
         $(graph.mouselayer.canvas).on("vmouseover", function (e) {
-          options.onMouseOver(graph.getMouseCoord(e));
+          handler(graph.getMouseCoord(e));
         });
       }
       if (options.onMouseOut) {
+        const handler = options.onMouseOut;
         $(graph.mouselayer.canvas).on("vmouseout", function (e) {
-          options.onMouseOut(graph.getMouseCoord(e));
+          handler(graph.getMouseCoord(e));
         });
       }
     }
     if (!options.allowScratchpad) {
-      options.setDrawingAreaAvailable(false);
+      options.setDrawingAreaAvailable == null ? void 0 : options.setDrawingAreaAvailable(false);
     }
 
     // Add mouse and visible wrapper layers for DOM-node-wrapped movables
@@ -15001,26 +14921,6 @@ _.extend(MovableLine$4.prototype, {
   }
 });
 
-function render(element, container, callback) {
-  // TODO(LP-11406): Replace this, or callers, with React Portal
-  // @ts-expect-error [FEI-5003] - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
-  // eslint-disable-next-line no-restricted-syntax
-  return ReactDOM__default.render(
-  /*#__PURE__*/
-  /**
-   * `RenderStateRoot` is responsible for tracking whether it's
-   * the initial render or subsequent renders.  It's used by
-   * `useUniqueId` and will be used by `UniqueIDProvider` and
-   * `WithSSRPlaceholder` in the future.  We're placing it as
-   * high up in the render tree as possible to ensure that any
-   * components using that hook or those components will function
-   * correctly.
-   */
-  React.createElement(RenderStateRoot, {
-    throwIfNested: false
-  }, element), container, callback);
-}
-
 /* eslint-disable @babel/no-invalid-this */
 const add$1 = {
   constrain: function () {
@@ -16500,24 +16400,27 @@ const {
 class Graphie extends React.Component {
   constructor(...args) {
     super(...args);
+    this.graphieDivRef = /*#__PURE__*/React.createRef();
     this.getGraphie = () => {
       // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
       return this._graphie;
     };
     this._range = () => {
-      return _.map(this.props.range, dimRange => {
-        if (dimRange[0] >= dimRange[1]) {
+      const boundsCheckRange = range => {
+        if (range[0] >= range[1]) {
           return [-10, 10];
         }
-        return dimRange;
-      });
+        return range;
+      };
+      return [boundsCheckRange(this.props.range[0]), boundsCheckRange(this.props.range[1])];
     };
     this._box = () => {
-      return _.map(this.props.box, pixelDim => {
+      const ensureMinSize = pixelDim => {
         // 340 = default size in the editor. exact value
         // is arbitrary; this is just a safety check.
         return pixelDim > 0 ? pixelDim : 340;
-      });
+      };
+      return [ensureMinSize(this.props.box[0]), ensureMinSize(this.props.box[1])];
     };
     this._scale = () => {
       const box = this._box();
@@ -16529,9 +16432,7 @@ class Graphie extends React.Component {
     };
     this._setupGraphie = () => {
       this._removeMovables();
-
-      // eslint-disable-next-line react/no-string-refs
-      const graphieDiv = ReactDOM__default.findDOMNode(this.refs.graphieDiv);
+      const graphieDiv = ReactDOM__default.findDOMNode(this.graphieDivRef.current);
       // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
       $(graphieDiv).empty();
       // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
@@ -16745,29 +16646,12 @@ class Graphie extends React.Component {
       className: "graphie-container"
     }, /*#__PURE__*/React.createElement("div", {
       className: "graphie",
-      ref: "graphieDiv"
+      ref: this.graphieDivRef
     }));
   }
 }
 
 // Attach Graphie.createClass and Graphie.createSimpleClass
-Graphie.propTypes = {
-  addMouseLayer: PropTypes.bool,
-  box: PropTypes.arrayOf(PropTypes.number).isRequired,
-  children: PropTypes.node,
-  isMobile: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseMove: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  options: PropTypes.shape({
-    snapStep: PropTypes.arrayOf(PropTypes.number)
-  }),
-  range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-  responsive: PropTypes.bool,
-  setDrawingAreaAvailable: PropTypes.func,
-  setup: PropTypes.func.isRequired
-};
 Graphie.defaultProps = {
   range: [[-10, 10], [-10, 10]],
   options: {},
@@ -17394,13 +17278,15 @@ class SvgImage extends React.Component {
           }
         });
       }
-      const scale = [40 * this.props.scale, 40 * this.props.scale];
+
+      // TODO: the "40" scale factor was introduced in D14974 but is not
+      // documented where it came from.
       graphie = /*#__PURE__*/React.createElement(Graphie
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "graphie",
         box: box,
-        scale: scale,
+        scale: [40 * this.props.scale, 40 * this.props.scale],
         range: this.state.range,
         options: _.pick(this.state, "labels"),
         responsive: responsive,
@@ -17929,6 +17815,18 @@ var JiptParagraphs = {
   joinFromArray: joinFromArray
 };
 
+const exclamationIcon = {
+  path: "M6 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1z",
+  height: 12,
+  width: 12
+};
+var Severity = /*#__PURE__*/function (Severity) {
+  Severity[Severity["Error"] = 1] = "Error";
+  Severity[Severity["Warning"] = 2] = "Warning";
+  Severity[Severity["Recommendation"] = 3] = "Recommendation";
+  Severity[Severity["OfflineReportingOnly"] = 4] = "OfflineReportingOnly";
+  return Severity;
+}(Severity || {});
 /**
  * This component renders "lint" nodes in a markdown parse tree. Lint nodes
  * are inserted into the tree by the Perseus linter (see
@@ -17951,11 +17849,6 @@ var JiptParagraphs = {
  * that has a right margin (like anything blockquoted) the circle will appear
  * to the left of where it belongs.  And if there is more
  **/
-const exclamationIcon = {
-  path: "M6 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1z",
-  height: 12,
-  width: 12
-};
 class Lint extends React.Component {
   constructor(...args) {
     super(...args);
@@ -17978,11 +17871,11 @@ class Lint extends React.Component {
       let severityStyle;
       let warningText;
       let warningTextStyle;
-      if (this.props.severity === 1) {
+      if (this.props.severity === Severity.Error) {
         severityStyle = styles$A.indicatorError;
         warningText = "Error";
         warningTextStyle = styles$A.publishBlockingError;
-      } else if (this.props.severity === 2) {
+      } else if (this.props.severity === Severity.Warning) {
         severityStyle = styles$A.indicatorWarning;
         warningText = "Warning";
         warningTextStyle = styles$A.warning;
@@ -18017,7 +17910,6 @@ class Lint extends React.Component {
   componentWillUnmount() {
     // TODO(somewhatabstract): Use WB timing
     // eslint-disable-next-line no-restricted-syntax
-    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
     window.clearTimeout(this._positionTimeout);
   }
 
@@ -18063,24 +17955,6 @@ class Lint extends React.Component {
     }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-Lint.propTypes = {
-  // The children are the linty content we're highlighting
-  children: PropTypes.node,
-  // Inline lint is highlighted differently than block lint.
-  inline: PropTypes.bool,
-  // This is the text that appears in the tooltip
-  message: PropTypes.string.isRequired,
-  // This is used as the fragment id (hash) in the URL of the link
-  ruleName: PropTypes.string.isRequired,
-  // Lint warnings inside tables are handled specially
-  insideTable: PropTypes.bool.isRequired,
-  // Should lint highlighting be rendered as a block to the left of
-  // the lint instead of on the right gutter?
-  blockHighlight: PropTypes.bool,
-  // How important this lint message is for the editor. Severity goes
-  // from 1 (indicating an error) to 4 (offline reporting only)
-  severity: PropTypes.number
-};
 const styles$A = StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
@@ -19324,8 +19198,6 @@ class Renderer extends React.Component {
 
   // The i18n linter.
 
-  // @ts-expect-error [FEI-5003] - TS2564 - Property 'lastRenderedMarkdown' has no initializer and is not definitely assigned in the constructor.
-
   // @ts-expect-error [FEI-5003] - TS2564 - Property 'reuseMarkdown' has no initializer and is not definitely assigned in the constructor.
 
   // @ts-expect-error [FEI-5003] - TS2564 - Property 'translationIndex' has no initializer and is not definitely assigned in the constructor.
@@ -20454,9 +20326,6 @@ class Renderer extends React.Component {
   }
   render() {
     const apiOptions = this.getApiOptions();
-    const {
-      KatexProvider
-    } = getDependencies();
     if (this.reuseMarkdown) {
       return this.lastRenderedMarkdown;
     }
@@ -20497,9 +20366,9 @@ class Renderer extends React.Component {
         // Persues.TranslationComponent registry so that when jipt
         // calls its before_dom_insert we can lookup this component by
         // this attribute and render the text with markdown.
-        return /*#__PURE__*/React.createElement(KatexProvider, null, /*#__PURE__*/React.createElement(DefinitionProvider, null, /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React.createElement(DefinitionProvider, null, /*#__PURE__*/React.createElement("div", {
           "data-perseus-component-index": this.translationIndex
-        }, content)));
+        }, content));
       }
     }
 
@@ -20547,9 +20416,9 @@ class Renderer extends React.Component {
       [ClassNames.RESPONSIVE_RENDERER]: true,
       [ClassNames.TWO_COLUMN_RENDERER]: this._isTwoColumn
     });
-    this.lastRenderedMarkdown = /*#__PURE__*/React.createElement(KatexProvider, null, /*#__PURE__*/React.createElement(DefinitionProvider, null, /*#__PURE__*/React.createElement("div", {
+    this.lastRenderedMarkdown = /*#__PURE__*/React.createElement(DefinitionProvider, null, /*#__PURE__*/React.createElement("div", {
       className: className
-    }, markdownContents)));
+    }, markdownContents));
     return this.lastRenderedMarkdown;
   }
 }
@@ -20826,13 +20695,6 @@ class MathOutput extends React.Component {
     this._unbindBlurHandler();
   }
 }
-MathOutput.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string,
-  labelText: PropTypes.string,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func
-};
 MathOutput.defaultProps = {
   value: "",
   onFocus: function () {},
@@ -21074,9 +20936,9 @@ class InputWithExamples extends React.Component {
     , {
       ref: "tooltip",
       className: "perseus-formats-tooltip preview-measure",
-      horizontalPosition: "left",
-      horizontalAlign: "left",
-      verticalPosition: "bottom",
+      horizontalPosition: HorizontalDirection.Left,
+      horizontalAlign: HorizontalDirection.Left,
+      verticalPosition: VerticalDirection.Bottom,
       arrowSize: 10,
       borderColor: "#ccc",
       show: showExamples
@@ -21164,7 +21026,7 @@ class SimpleKeypadInput extends React.Component {
         onFocus: () => {
           if (keypadElement) {
             keypadElement.configure({
-              keypadType: KeypadTypes.FRACTION
+              keypadType: KeypadType.FRACTION
             }, () => {
               if (_this._isMounted) {
                 onFocus && onFocus();
@@ -27528,7 +27390,7 @@ var Interactive = {
   hidden: true
 };
 
-/* eslint-disable react/forbid-prop-types, react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 const defaultBackgroundImage$2 = {
   url: null
 };
@@ -27746,6 +27608,34 @@ class Graph extends React.Component {
       return _.pick(this.props, "range", "step", "markings", "labels", "backgroundImage", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep");
     };
   }
+  componentDidMount() {
+    this._setupGraphie(true);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const potentialChanges = ["labels", "range", "step", "markings", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep"];
+    const self = this;
+    _.each(potentialChanges, function (prop) {
+      if (!_.isEqual(self.props[prop], nextProps[prop])) {
+        self._shouldSetupGraphie = true;
+      }
+    });
+  }
+  componentDidUpdate() {
+    // Only setupGraphie once per componentDidUpdate().
+    // See explanation in setupGraphie().
+    this._hasSetupGraphieThisUpdate = false;
+    if (this._shouldSetupGraphie) {
+      this._setupGraphie(false);
+      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;
@@ -27784,55 +27674,7 @@ class Graph extends React.Component {
       ref: "graphieDiv"
     }));
   }
-  componentDidMount() {
-    this._setupGraphie(true);
-  }
-  componentDidUpdate() {
-    // Only setupGraphie once per componentDidUpdate().
-    // See explanation in setupGraphie().
-    this._hasSetupGraphieThisUpdate = false;
-    if (this._shouldSetupGraphie) {
-      this._setupGraphie(false);
-      this._shouldSetupGraphie = false;
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const potentialChanges = ["labels", "range", "step", "markings", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep"];
-    const self = this;
-    _.each(potentialChanges, function (prop) {
-      if (!_.isEqual(self.props[prop], nextProps[prop])) {
-        self._shouldSetupGraphie = true;
-      }
-    });
-  }
-
-  /* Reset the graphie canvas to its initial state
-   *
-   * Use when re-rendering the parent component and you need a blank
-   * graphie.
-   */
 }
-Graph.propTypes = {
-  box: PropTypes.array.isRequired,
-  labels: PropTypes.arrayOf(PropTypes.string),
-  range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-  step: PropTypes.arrayOf(PropTypes.number),
-  gridStep: PropTypes.arrayOf(PropTypes.number),
-  snapStep: PropTypes.arrayOf(PropTypes.number),
-  markings: PropTypes.string,
-  backgroundImage: PropTypes.shape({
-    url: PropTypes.string
-  }),
-  showProtractor: PropTypes.bool,
-  showRuler: PropTypes.bool,
-  rulerLabel: PropTypes.string,
-  rulerTicks: PropTypes.number,
-  onGraphieUpdated: PropTypes.func,
-  instructions: PropTypes.string,
-  onClick: PropTypes.func,
-  setDrawingAreaAvailable: PropTypes.func,
-  isMobile: PropTypes.bool
-};
 Graph.defaultProps = {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
@@ -27845,10 +27687,6 @@ Graph.defaultProps = {
   showRuler: false,
   rulerLabel: "",
   rulerTicks: 10,
-  instructions: null,
-  onGraphieUpdated: null,
-  onClick: null,
-  onMouseDown: null,
   isMobile: false
 };
 
@@ -29316,7 +29154,10 @@ class InteractiveGraph extends React.Component {
     } else {
       instructions = undefined;
     }
-    const onMouseDown = this.isClickToAddPoints() ? this.handleAddPointsMouseDown : null;
+    let onMouseDown;
+    if (this.isClickToAddPoints()) {
+      onMouseDown = this.handleAddPointsMouseDown;
+    }
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
     const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
     const isMobile = this.props.apiOptions.isMobile;
@@ -29899,7 +29740,6 @@ InteractiveGraph.defaultProps = {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
   step: [1, 1],
-  // @ts-expect-error [FEI-5003] - TS2739 - Type '{ readonly url: null; }' is missing the following properties from type 'PerseusImageBackground': width, height
   backgroundImage: defaultBackgroundImage$1,
   markings: "graph",
   showTooltips: false,
@@ -32248,14 +32088,18 @@ var LightsPuzzle$1 = {
   transform: transformProps
 };
 
-const HORIZONTAL$2 = "horizontal";
-const VERTICAL$1 = "vertical";
-const STATIC = "static";
-const DRAGGING = "dragging";
-const ANIMATING = "animating";
-const DISABLED = "disabled";
-
-// Augment the given position with the scroll position of the offset parent.
+let Layout = /*#__PURE__*/function (Layout) {
+  Layout["HORIZONTAL"] = "horizontal";
+  Layout["VERTICAL"] = "vertical";
+  return Layout;
+}({});
+var ItemState = /*#__PURE__*/function (ItemState) {
+  ItemState["STATIC"] = "static";
+  ItemState["DRAGGING"] = "dragging";
+  ItemState["ANIMATING"] = "animating";
+  ItemState["DISABLED"] = "disabled";
+  return ItemState;
+}(ItemState || {}); // Augment the given position with the scroll position of the offset parent.
 const addOffsetParentScroll = ($el, position) => {
   // NOTE(slim): $(el).offsetParent() is NOT equivalent to $el[0].offsetParent.
   // Specifically, when `el` is not positioned, then the native HTMLElement.offsetParent
@@ -32269,14 +32113,13 @@ const addOffsetParentScroll = ($el, position) => {
     left: position.left + $offsetParent.scrollLeft()
   };
 };
-
 // A placeholder that appears in the sortable whenever an item is dragged.
 class Placeholder extends React.Component {
   render() {
     const {
       layout
     } = this.props;
-    const className = css(styles$e.card, styles$e.placeholder, layout === HORIZONTAL$2 && styles$e.horizontalCard);
+    const className = css(styles$e.card, styles$e.placeholder, layout === Layout.HORIZONTAL && styles$e.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -32290,11 +32133,6 @@ class Placeholder extends React.Component {
     });
   }
 }
-Placeholder.propTypes = {
-  layout: PropTypes.oneOf([HORIZONTAL$2, VERTICAL$1]),
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired
-};
 // A draggable item in the sortable. Can be in one of four states:
 //     Static:    The item is not being interacted with.
 //     Dragging:  The item is being dragged.
@@ -32321,7 +32159,8 @@ class Draggable extends React.Component {
       mouse: {
         left: 0,
         top: 0
-      }
+      },
+      dragging: false
     };
     this.getCurrentPosition = () => {
       return {
@@ -32340,7 +32179,7 @@ class Draggable extends React.Component {
       $(document).off("mouseup", this.onMouseUp);
     };
     this.onMouseDown = event => {
-      if (this.props.type !== STATIC) {
+      if (this.props.state !== ItemState.STATIC) {
         return;
       }
       if (!(event.button === 0 || event.touches != null && event.touches.length === 1)) {
@@ -32382,7 +32221,7 @@ class Draggable extends React.Component {
       });
     };
     this.onMouseMove = event => {
-      const notDragging = this.props.type !== DRAGGING || !this.state.dragging;
+      const notDragging = this.props.state !== ItemState.DRAGGING || !this.state.dragging;
       if (notDragging) {
         return;
       }
@@ -32400,7 +32239,7 @@ class Draggable extends React.Component {
       }
     };
     this.onMouseUp = event => {
-      const notDragging = this.props.type !== DRAGGING || !this.state.dragging;
+      const notDragging = this.props.state !== ItemState.DRAGGING || !this.state.dragging;
       if (notDragging) {
         return;
       }
@@ -32454,20 +32293,20 @@ class Draggable extends React.Component {
     const {
       includePadding,
       layout,
-      type
+      state: type
     } = this.props;
 
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. Hence the hacky tacking on of manual classNames.
     // See sortable.less for details.
-    let className = css(styles$e.card, styles$e.draggable, layout === HORIZONTAL$2 && styles$e.horizontalCard, layout === VERTICAL$1 && styles$e.verticalCard, type === DRAGGING && styles$e.dragging, type === DISABLED && styles$e.disabled, !includePadding && styles$e.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
+    let className = css(styles$e.card, styles$e.draggable, layout === Layout.HORIZONTAL && styles$e.horizontalCard, layout === Layout.VERTICAL && styles$e.verticalCard, type === ItemState.DRAGGING && styles$e.dragging, type === ItemState.DISABLED && styles$e.disabled, !includePadding && styles$e.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
     if (!includePadding) {
       className += " perseus-sortable-draggable-unpadded";
     }
     const style = {
       position: "static"
     };
-    if (this.props.type === DRAGGING || this.props.type === ANIMATING) {
+    if (this.props.state === ItemState.DRAGGING || this.props.state === ItemState.ANIMATING) {
       _.extend(style, {
         position: "absolute"
       }, this.getCurrentPosition());
@@ -32497,10 +32336,10 @@ class Draggable extends React.Component {
     }));
   }
   componentDidUpdate(prevProps) {
-    if (this.props.type === prevProps.type) {
+    if (this.props.state === prevProps.state) {
       return;
     }
-    if (this.props.type === ANIMATING) {
+    if (this.props.state === ItemState.ANIMATING) {
       // Start animating
       const current = this.getCurrentPosition();
       const duration = 15 * Math.sqrt(Math.sqrt(Math.pow(this.props.endPosition.left - current.left, 2) + Math.pow(this.props.endPosition.top - current.top, 2)));
@@ -32511,29 +32350,16 @@ class Draggable extends React.Component {
         // Animating -> Static
         complete: this.props.onAnimationEnd
       });
-    } else if (this.props.type === STATIC) {
+    } else if (this.props.state === ItemState.STATIC) {
       // Ensure that any animations are done
       // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'finish' does not exist on type 'JQueryStatic'.
       $(ReactDOM__default.findDOMNode(this)).finish();
     }
   }
 }
-Draggable.propTypes = {
-  content: PropTypes.string.isRequired,
-  endPosition: PropTypes.object.isRequired,
-  includePadding: PropTypes.bool,
-  layout: PropTypes.oneOf([HORIZONTAL$2, VERTICAL$1]),
-  onAnimationEnd: PropTypes.func.isRequired,
-  onMouseDown: PropTypes.func.isRequired,
-  onMouseMove: PropTypes.func.isRequired,
-  onMouseUp: PropTypes.func.isRequired,
-  onRender: PropTypes.func.isRequired,
-  type: PropTypes.oneOf([STATIC, DRAGGING, ANIMATING, DISABLED]),
-  linterContext: PerseusLinter.linterContextProps
-};
 Draggable.defaultProps = {
   includePadding: true,
-  type: STATIC,
+  type: ItemState.STATIC,
   linterContext: PerseusLinter.linterContextDefault
 };
 class Sortable extends React.Component {
@@ -32548,7 +32374,7 @@ class Sortable extends React.Component {
     }, 20);
     this.state = {
       items: Sortable.itemsFromProps(this.props),
-      katex: null
+      texRendererLoaded: false
     };
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -32576,20 +32402,13 @@ class Sortable extends React.Component {
       }, 0);
     }
   }
-  componentDidMount() {
-    getDependencies().getKaTeX().then(katex => {
-      this.setState({
-        katex
-      });
-    });
-  }
   static itemsFromProps(props) {
-    const type = props.disabled ? DISABLED : STATIC;
+    const state = props.disabled ? ItemState.DISABLED : ItemState.STATIC;
     return props.options.map((option, i) => {
       return {
         option: option,
         key: i,
-        type: type,
+        state,
         endPosition: {},
         width: 0,
         height: 0
@@ -32611,8 +32430,7 @@ class Sortable extends React.Component {
     // explictly set on Draggables - this prevents them from changing size
     // or shape while being dragged.
 
-    // @ts-expect-error [FEI-5003] - TS2740 - Type 'readonly SortableItem[]' is missing the following properties from type 'SortableItem': option, key, type, endPosition, and 2 more.
-    let items = _.clone(this.state.items);
+    let items = [...this.state.items];
 
     // Fetches a jQuery list of elements for each item
     const $items = _.map(items, function (item) {
@@ -32630,7 +32448,7 @@ class Sortable extends React.Component {
     if (constraints != null && constraints.width) {
       // Items must be at least as wide as the specified constraint
       syncWidth = _.max(widths.concat(constraints.width));
-    } else if (layout === VERTICAL$1) {
+    } else if (layout === Layout.VERTICAL) {
       // Sync widths to get a clean column
       syncWidth = _.max(widths);
     }
@@ -32638,21 +32456,17 @@ class Sortable extends React.Component {
     if (constraints != null && constraints.height) {
       // Items must be at least as high as the specified constraint
       syncHeight = _.max(heights.concat(constraints.height));
-    } else if (layout === HORIZONTAL$2) {
+    } else if (layout === Layout.HORIZONTAL) {
       // Sync widths to get a clean row
       syncHeight = _.max(heights);
     }
-
-    // @ts-expect-error [FEI-5003] - TS2740 - Type 'any[]' is missing the following properties from type 'SortableItem': option, key, type, endPosition, and 2 more.
     items = _.map(items, function (item, i) {
       item.width = syncWidth || widths[i];
       item.height = syncHeight || heights[i];
       return item;
     });
-
-    // @ts-expect-error [FEI-5003] - TS2740 - Type 'SortableItem' is missing the following properties from type 'readonly SortableItem[]': length, concat, join, slice, and 18 more.
     this.setState({
-      items: items
+      items
     }, () => {
       this.props.onMeasure && this.props.onMeasure({
         widths: widths,
@@ -32662,14 +32476,30 @@ class Sortable extends React.Component {
   }
   render() {
     var _this$props$constrain, _this$props$constrain2;
-    // We don't render the sortable until KaTeX has fully loaded, in case
-    // the draggables are rendering KaTeX content. This is un-optimal as
-    // we end up loading KaTeX even when we may not need it, however it
-    // helps to ensure that the dimensions of the draggables (and thus the
-    // sortable) will be correct when they render, if their contents are
-    // KaTeX-derived.
-    if (this.props.waitForKatexLoad && !this.state.katex) {
-      return /*#__PURE__*/React.createElement(CircularSpinner, null);
+    // To minimize layout shift, we display a spinner until our math
+    // renderer is ready to render the math inside the sortable. To
+    // do this, we:
+    // - render a dummy TeX component to force the math renderer to load
+    // - display a spinner until the TeX component calls its onRender
+    //   callback, signifying that the math is rendered (from which we can
+    //   infer that the math renderer has loaded)
+    //
+    // If we didn't do this, the user might see a sortable with empty
+    // cells on first render, and then the math would pop in a few moments
+    // later once the rendering library loaded.
+    if (this.props.waitForTexRendererToLoad && !this.state.texRendererLoaded) {
+      const {
+        TeX
+      } = getDependencies();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircularSpinner, null), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React.createElement(TeX, {
+        onRender: () => this.setState({
+          texRendererLoaded: true
+        })
+      }, "1")));
     }
     const cards = [];
     const {
@@ -32678,19 +32508,19 @@ class Sortable extends React.Component {
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. See sortable.less for details.
     const className = css(styles$e.sortable) + " perseus-sortable";
-    const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === VERTICAL$1;
-    const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === HORIZONTAL$2;
+    const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === Layout.VERTICAL;
+    const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === Layout.HORIZONTAL;
     _.each(this.state.items, function (item, i, items) {
       const isLast = i === items.length - 1;
-      const isStatic = item.type === STATIC || item.type === DISABLED;
+      const isStatic = item.state === ItemState.STATIC || item.state === ItemState.DISABLED;
       let margin;
 
       // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.layout === HORIZONTAL$2) {
+      if (this.props.layout === Layout.HORIZONTAL) {
         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         margin = "0 " + this.props.margin + "px 0 0"; // right
         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      } else if (this.props.layout === VERTICAL$1) {
+      } else if (this.props.layout === Layout.VERTICAL) {
         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         margin = "0 0 " + this.props.margin + "px 0"; // bottom
       }
@@ -32698,7 +32528,7 @@ class Sortable extends React.Component {
       cards.push( /*#__PURE__*/React.createElement(Draggable, {
         content: item.option,
         key: item.key,
-        type: item.type
+        state: item.state
         // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
         ,
         ref: item.key,
@@ -32747,7 +32577,7 @@ class Sortable extends React.Component {
         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this, item.key)
       }));
-      if (item.type === DRAGGING || item.type === ANIMATING) {
+      if (item.state === ItemState.DRAGGING || item.state === ItemState.ANIMATING) {
         cards.push( /*#__PURE__*/React.createElement(Placeholder, {
           key: "placeholder_" + item.key,
           ref: "placeholder_" + item.key,
@@ -32766,7 +32596,7 @@ class Sortable extends React.Component {
     // Static -> Dragging
     const items = _.map(this.state.items, function (item) {
       if (item.key === key) {
-        item.type = DRAGGING;
+        item.state = ItemState.DRAGGING;
       }
       return item;
     });
@@ -32826,7 +32656,7 @@ class Sortable extends React.Component {
 
     // @ts-expect-error [FEI-5003] - TS2551 - Property 'splice' does not exist on type 'readonly SortableItem[]'. Did you mean 'slice'?
     items.splice(currentIndex, 1);
-    if (this.props.layout === HORIZONTAL$2) {
+    if (this.props.layout === Layout.HORIZONTAL) {
       // @ts-expect-error [FEI-5003] - TS2339 - Property 'offset' does not exist on type 'JQueryStatic'. | TS2339 - Property 'offset' does not exist on type 'JQueryStatic'.
       const midWidth = $draggable.offset().left - $sortable.offset().left;
       let sumWidth = 0;
@@ -32866,7 +32696,7 @@ class Sortable extends React.Component {
     const nextAnimationFrame = requestAnimationFrame(() => {
       const items = _.map(this.state.items, function (item) {
         if (item.key === key) {
-          item.type = ANIMATING;
+          item.state = ItemState.ANIMATING;
           const $placeholder = $(
           // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
           ReactDOM__default.findDOMNode(
@@ -32896,7 +32726,7 @@ class Sortable extends React.Component {
     // Animating -> Static
     const items = _.map(this.state.items, function (item) {
       if (item.key === key) {
-        item.type = STATIC;
+        item.state = ItemState.STATIC;
       }
       return item;
     });
@@ -32909,7 +32739,7 @@ class Sortable extends React.Component {
   }
 }
 Sortable.defaultProps = {
-  layout: HORIZONTAL$2,
+  layout: Layout.HORIZONTAL,
   padding: true,
   disabled: false,
   constraints: {},
@@ -32917,7 +32747,7 @@ Sortable.defaultProps = {
   margin: 5,
   onChange: function () {},
   linterContext: PerseusLinter.linterContextDefault,
-  waitForKatexLoad: true
+  waitForTexRendererToLoad: true
 };
 const styles$e = StyleSheet.create({
   sortable: {
@@ -32980,7 +32810,7 @@ class Matcher extends React.Component {
     this.state = {
       leftHeight: 0,
       rightHeight: 0,
-      katex: null
+      texRendererLoaded: false
     };
     this.changeAndTrack = e => {
       this.props.onChange(e);
@@ -32999,10 +32829,10 @@ class Matcher extends React.Component {
       });
     };
     this.getUserInput = () => {
-      // If KaTeX hasn't loaded then we won't be able to get the contents
-      // of the sortables on the left and right, so we just return empty
-      // arrays until we render for the first time.
-      if (!this.state.katex) {
+      // If the math renderer hasn't loaded then we won't be able to get the
+      // contents of the sortables on the left and right, so we just return
+      // empty arrays until we render for the first time.
+      if (!this.state.texRendererLoaded) {
         return {
           left: [],
           right: []
@@ -33032,20 +32862,33 @@ class Matcher extends React.Component {
       return Matcher.validate(this.getUserInput(), rubric);
     };
   }
-  componentDidMount() {
-    getDependencies().getKaTeX().then(katex => this.setState({
-      katex
-    }));
-  }
   render() {
-    // We don't render the Matcher until KaTeX has fully loaded, in case
-    // the sortables are rendering KaTeX content. This is un-optimal as
-    // we end up loading KaTeX even when we may not need it, however it
-    // helps to ensure that the dimensions of the sortables (and thus the
-    // Matcher) will be correct when they render, if their contents are
-    // KaTeX-derived.
-    if (!this.state.katex) {
-      return /*#__PURE__*/React.createElement(CircularSpinner, null);
+    // To minimize layout shift, we display a spinner until our math
+    // renderer is ready to render the math inside the matcher. To
+    // do this, we:
+    // - render a dummy TeX component to force the math renderer to load
+    // - display a spinner until the TeX component calls its onRender
+    //   callback, signifying that the math is rendered (from which we can
+    //   infer that the math renderer has loaded)
+    //
+    // If we didn't do this, the user might see a matcher with empty
+    // columns on first render, and then the math would pop in a few
+    // moments later once the rendering library loaded.
+    if (!this.state.texRendererLoaded) {
+      const {
+        TeX
+      } = getDependencies();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircularSpinner, null), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React.createElement(TeX, {
+        onRender: () => {
+          this.setState({
+            texRendererLoaded: true
+          });
+        }
+      }, "1")));
     }
 
     // Use the same random() function to shuffle both columns sequentially
@@ -33083,7 +32926,7 @@ class Matcher extends React.Component {
       className: css(styles$d.column)
     }, /*#__PURE__*/React.createElement(Sortable, {
       options: left,
-      layout: "vertical",
+      layout: Layout.VERTICAL,
       padding: this.props.padding,
       disabled: !this.props.orderMatters,
       constraints: constraints,
@@ -33100,7 +32943,7 @@ class Matcher extends React.Component {
     // @ts-expect-error [FEI-5003] - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
     , {
       options: right,
-      layout: "vertical",
+      layout: Layout.VERTICAL,
       padding: this.props.padding,
       constraints: constraints,
       onMeasure: this.onMeasureRight,
@@ -39735,11 +39578,7 @@ class Histogram extends React.Component {
       box: this.props.box,
       range: range,
       data: data,
-      scale: [
-      // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Coordinates'.
-      Util.scaleFromExtent(range[0], this.props.box[0]),
-      // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Coordinates'.
-      Util.scaleFromExtent(range[1], this.props.box[1])]
+      scale: [Util.scaleFromExtent(range[0], this.props.box[0]), Util.scaleFromExtent(range[1], this.props.box[1])]
     };
     const axisStyle = {
       stroke: "#000",
@@ -45531,98 +45370,88 @@ ElementContainer.defaultProps = {
   title: "More"
 };
 
-class HUD extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.renderVisibleIcon = () => {
-      return /*#__PURE__*/React.createElement("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        className: css(styles$2.icon)
-      }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
-        id: "a",
-        d: "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " + "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " + "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " + "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" + "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " + "0 0 0 0 6z"
-      })), /*#__PURE__*/React.createElement("g", {
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React.createElement("path", {
-        fill: "none",
-        d: "M0 0h24v24H0z"
-      }), /*#__PURE__*/React.createElement("mask", {
-        id: "b",
-        fill: "#fff"
-      }, /*#__PURE__*/React.createElement("use", {
-        href: "#a"
-      })), /*#__PURE__*/React.createElement("use", {
-        fill: "#fff",
-        fillRule: "nonzero",
-        href: "#a"
-      }), /*#__PURE__*/React.createElement("g", {
-        fill: "#fff",
-        mask: "url(#b)"
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M0 0h24v24H0z"
-      }))));
-    };
-    this.renderHiddenIcon = () => {
-      return /*#__PURE__*/React.createElement("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        className: css(styles$2.icon)
-      }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
-        id: "a",
-        d: "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " + "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " + "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." + "604.401 1.268.401 1.966 0 1.02-.305 " + "1.967-.828 2.757l2.535 2.536a1 1 0 0 " + "1-1.414 1.414l-12-12a1 1 0 0 1 " + "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " + "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " + "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " + "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " + "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " + "2.363-3.085 3.929-4z"
-      })), /*#__PURE__*/React.createElement("g", {
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React.createElement("path", {
-        fill: "none",
-        d: "M0 0h24v24H0z"
-      }), /*#__PURE__*/React.createElement("mask", {
-        id: "b",
-        fill: "#fff"
-      }, /*#__PURE__*/React.createElement("use", {
-        href: "#a"
-      })), /*#__PURE__*/React.createElement("use", {
-        fill: "#fff",
-        fillRule: "nonzero",
-        href: "#a"
-      }), /*#__PURE__*/React.createElement("g", {
-        fill: "#fff",
-        mask: "url(#b)"
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M0 0h24v24H0z"
-      }))));
-    };
+// Displays a stylized open eye: lint warnings are visible
+const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  className: css(styles$2.icon)
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+  id: "a",
+  d: "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " + "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " + "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " + "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" + "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " + "0 0 0 0 6z"
+})), /*#__PURE__*/React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+}), /*#__PURE__*/React.createElement("mask", {
+  id: "b",
+  fill: "#fff"
+}, /*#__PURE__*/React.createElement("use", {
+  href: "#a"
+})), /*#__PURE__*/React.createElement("use", {
+  fill: "#fff",
+  fillRule: "nonzero",
+  href: "#a"
+}), /*#__PURE__*/React.createElement("g", {
+  fill: "#fff",
+  mask: "url(#b)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h24v24H0z"
+}))));
+
+// Displays a stylized eye with a line through it: I don't want to see lint
+const HiddenIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  className: css(styles$2.icon)
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+  id: "a",
+  d: "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " + "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " + "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." + "604.401 1.268.401 1.966 0 1.02-.305 " + "1.967-.828 2.757l2.535 2.536a1 1 0 0 " + "1-1.414 1.414l-12-12a1 1 0 0 1 " + "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " + "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " + "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " + "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " + "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " + "2.363-3.085 3.929-4z"
+})), /*#__PURE__*/React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+}), /*#__PURE__*/React.createElement("mask", {
+  id: "b",
+  fill: "#fff"
+}, /*#__PURE__*/React.createElement("use", {
+  href: "#a"
+})), /*#__PURE__*/React.createElement("use", {
+  fill: "#fff",
+  fillRule: "nonzero",
+  href: "#a"
+}), /*#__PURE__*/React.createElement("g", {
+  fill: "#fff",
+  mask: "url(#b)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h24v24H0z"
+}))));
+const HUD = ({
+  message,
+  enabled,
+  onClick,
+  fixedPosition: _fixedPosition = true
+}) => {
+  let state;
+  let icon;
+  if (enabled) {
+    state = styles$2.enabled;
+    icon = /*#__PURE__*/React.createElement(VisibleIcon, null);
+  } else {
+    state = styles$2.disabled;
+    icon = /*#__PURE__*/React.createElement(HiddenIcon, null);
   }
-  render() {
-    let state;
-    let icon;
-    if (this.props.enabled) {
-      state = styles$2.enabled;
-      icon = this.renderVisibleIcon();
-    } else {
-      state = styles$2.disabled;
-      icon = this.renderHiddenIcon();
+  return /*#__PURE__*/React.createElement("button", {
+    className: css(styles$2.hud, _fixedPosition && styles$2.hudFixedPosition, state),
+    onClick: e => {
+      onClick();
     }
-    return /*#__PURE__*/React.createElement("button", {
-      className: css(styles$2.hud, this.props.fixedPosition && styles$2.hudFixedPosition, state),
-      onClick: e => {
-        this.props.onClick();
-      }
-    }, icon, this.props.message);
-  }
-}
-HUD.propTypes = {
-  message: PropTypes.string.isRequired,
-  enabled: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  fixedPosition: PropTypes.bool
-};
-HUD.defaultProps = {
-  fixedPosition: true
+  }, icon, message);
 };
 const styles$2 = StyleSheet.create({
   hud: {