@khanacademy/perseus 5.0.0 → 6.0.0

package/dist/index.js

@@ -9,11 +9,10 @@ var i18n = require('@khanacademy/wonder-blocks-i18n');
 var classNames = require('classnames');
 var React = require('react');
 var _ = require('underscore');
-var PropTypes = require('prop-types');
 var $ = require('jquery');
 var MathQuill = require('mathquill');
 var ReactDOM = require('react-dom');
-var createReactClass = require('create-react-class');
+var PropTypes = require('prop-types');
 var kmath = require('@khanacademy/kmath');
 var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var aphrodite = require('aphrodite');
@@ -29,6 +28,7 @@ var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksPopover = require('@khanacademy/wonder-blocks-popover');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var debounce = require('lodash.debounce');
+var createReactClass = require('create-react-class');
 var Tooltip$1 = require('@khanacademy/wonder-blocks-tooltip');
 var Link = require('@khanacademy/wonder-blocks-link');
 
@@ -58,18 +58,18 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var MathQuill__default = /*#__PURE__*/_interopDefaultLegacy(MathQuill);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip$1);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
@@ -127,7 +127,30 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-/* eslint-disable react/forbid-prop-types */
+/**
+ * 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 = _ref => {
   let {
     path,
@@ -151,18 +174,6 @@ const InlineIcon = _ref => {
     fill: "currentColor"
   }));
 };
-InlineIcon.propTypes = {
-  // An SVG path to render.
-  path: PropTypes__default["default"].string.isRequired,
-  // The path's viewBox dimensions.
-  // We set the viewport height to 1em and scale the width accordingly.
-  height: PropTypes__default["default"].number.isRequired,
-  width: PropTypes__default["default"].number.isRequired,
-  style: PropTypes__default["default"].object,
-  // A11y description for this icon. If absent, icon is marked
-  // aria-hidden=true
-  title: PropTypes__default["default"].string
-};
 
 let _dependencies = null;
 const setDependencies = dependencies => {
@@ -695,145 +706,95 @@ _defineProperty(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
- */
 const zIndex = 10;
-const Triangle = createReactClass__default["default"]({
-  displayName: "Triangle",
-  propTypes: {
-    color: PropTypes__default["default"].string.isRequired,
-    left: PropTypes__default["default"].number.isRequired,
-    top: PropTypes__default["default"].number.isRequired,
-    width: PropTypes__default["default"].number.isRequired,
-    height: PropTypes__default["default"].number.isRequired,
-    horizontalDirection: PropTypes__default["default"].oneOf(["left", "right"]).isRequired,
-    verticalDirection: PropTypes__default["default"].oneOf(["top", "bottom"]).isRequired
-  },
-  render: function () {
-    let borderLeft;
-    let borderRight;
-    let borderTop;
-    let borderBottom;
-    const hBorder = "".concat(this.props.width, "px solid transparent");
-    if (this.props.horizontalDirection === "right") {
-      borderLeft = hBorder;
-    } else {
-      borderRight = hBorder;
-    }
-    const vBorder = "".concat(this.props.height, "px solid ").concat(this.props.color);
-    if (this.props.verticalDirection === "top") {
-      borderTop = vBorder;
-    } else {
-      borderBottom = vBorder;
-    }
-    return /*#__PURE__*/React__namespace.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 = "".concat(props.width, "px solid transparent");
+  if (props.horizontalDirection === "right") {
+    borderLeft = hBorder;
+  } else {
+    borderRight = hBorder;
   }
-});
-const TooltipArrow = createReactClass__default["default"]({
-  displayName: "TooltipArrow",
-  propTypes: {
-    position: PropTypes__default["default"].string,
-    visibility: PropTypes__default["default"].string,
-    left: PropTypes__default["default"].number,
-    top: PropTypes__default["default"].number,
-    color: PropTypes__default["default"].string.isRequired,
-    // a css color
-    border: PropTypes__default["default"].string.isRequired,
-    // a css color
-    width: PropTypes__default["default"].number.isRequired,
-    height: PropTypes__default["default"].number.isRequired,
-    horizontalDirection: PropTypes__default["default"].oneOf(["left", "right"]).isRequired,
-    verticalDirection: PropTypes__default["default"].oneOf(["top", "bottom"]).isRequired
-  },
-  getDefaultProps: function () {
-    return {
-      position: "relative",
-      visibility: "visible",
-      left: 0,
-      top: 0
-    };
-  },
+  const vBorder = "".concat(props.height, "px solid ").concat(props.color);
+  if (props.verticalDirection === "top") {
+    borderTop = vBorder;
+  } else {
+    borderBottom = vBorder;
+  }
+  return /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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%"
@@ -860,59 +821,34 @@ const HORIZONTAL_ALIGNMNENTS = {
     arrowLeft: arrowSize => -arrowSize - 2
   }
 };
-
-// eslint-disable-next-line react/no-unsafe
-const Tooltip = createReactClass__default["default"]({
-  displayName: "Tooltip",
-  propTypes: {
-    show: PropTypes__default["default"].bool.isRequired,
-    className: PropTypes__default["default"].string,
-    arrowSize: PropTypes__default["default"].number,
-    borderColor: PropTypes__default["default"].string,
-    verticalPosition: PropTypes__default["default"].oneOf(Object.keys(VERTICAL_CORNERS)),
-    horizontalPosition: PropTypes__default["default"].oneOf(Object.keys(HORIZONTAL_CORNERS)),
-    horizontalAlign: PropTypes__default["default"].oneOf(Object.keys(HORIZONTAL_ALIGNMNENTS)),
-    children: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element).isRequired,
-    targetContainerStyle: PropTypes__default["default"].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__namespace.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(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__namespace.createElement(TooltipArrow, {
-        verticalDirection: "top",
+        verticalDirection: VerticalDirection.Top,
         horizontalDirection: this.props.horizontalAlign,
         position: "absolute",
         color: "white",
@@ -927,7 +863,7 @@ const Tooltip = createReactClass__default["default"]({
       // And we use a visibility: hidden arrow below to shift up the
       // content by the correct amount
       arrowBelow = /*#__PURE__*/React__namespace.createElement(TooltipArrow, {
-        verticalDirection: "top",
+        verticalDirection: VerticalDirection.Top,
         horizontalDirection: this.props.horizontalAlign,
         visibility: "hidden",
         color: "white",
@@ -940,7 +876,7 @@ const Tooltip = createReactClass__default["default"]({
       });
     } else {
       arrowAbove = /*#__PURE__*/React__namespace.createElement(TooltipArrow, {
-        verticalDirection: "bottom",
+        verticalDirection: VerticalDirection.Bottom,
         horizontalDirection: this.props.horizontalAlign,
         color: "white",
         border: this.props.borderColor,
@@ -988,8 +924,8 @@ const Tooltip = createReactClass__default["default"]({
         zIndex: zIndex - 1
       }
     }, this.props.children.slice(1)), arrowBelow));
-  },
-  _updateHeight: function () {
+  }
+  _updateHeight() {
     const tooltipContainer = ReactDOM__default["default"].findDOMNode(
     // eslint-disable-next-line react/no-string-refs
     this.refs.tooltipContainer);
@@ -999,8 +935,8 @@ const Tooltip = createReactClass__default["default"]({
         height
       });
     }
-  },
-  render: function () {
+  }
+  render() {
     const isTooltipAbove = this.props.verticalPosition === "top";
 
     /* We wrap the entire output in a span so that it displays inline */
@@ -1008,6 +944,17 @@ const Tooltip = createReactClass__default["default"]({
       style: this.props.targetContainerStyle
     }, this.props.children[0]), !isTooltipAbove && this._renderToolTipDiv());
   }
+}
+
+// Sorry.  // Apology-Oriented-Programming
+_defineProperty(Tooltip, "defaultProps", {
+  className: "",
+  arrowSize: 10,
+  borderColor: "#ccc",
+  verticalPosition: VerticalDirection.Bottom,
+  horizontalPosition: HorizontalDirection.Left,
+  horizontalAlign: HorizontalDirection.Left,
+  targetContainerStyle: {}
 });
 
 /**
@@ -2909,9 +2856,9 @@ class Expression extends React__namespace.Component {
       role: "tooltip"
     }, /*#__PURE__*/React__namespace.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
@@ -2983,7 +2930,7 @@ _defineProperty(Expression, "defaultProps", {
 const keypadConfigurationForProps = widgetOptions => {
   // Always use the Expression keypad, regardless of the button sets that have
   // been enabled.
-  const keypadType = mathInput.KeypadTypes.EXPRESSION;
+  const keypadType = mathInput.KeypadType.EXPRESSION;
 
   // Extract any and all variables and constants from the answer forms.
   const uniqueExtraVariables = {};
@@ -3445,8 +3392,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;
@@ -4483,31 +4428,25 @@ var constants$1 = /*#__PURE__*/Object.freeze({
     articleMaxWidthTableInPx: articleMaxWidthTableInPx
 });
 
-/* eslint-disable react/prop-types */
 const MIN_VIEWPORT_HEIGHT = 480;
-const FixedToResponsive = createReactClass__default["default"]({
-  displayName: "FixedToResponsive",
-  propTypes: {
-    width: PropTypes__default["default"].number.isRequired,
-    height: PropTypes__default["default"].number.isRequired,
-    className: PropTypes__default["default"].string,
-    constrainHeight: PropTypes__default["default"].bool,
-    allowFullBleed: PropTypes__default["default"].bool
-  },
-  getDefaultProps: function () {
-    return {
-      className: "",
-      constrainHeight: false,
-      allowFullBleed: false
-    };
-  },
-  getInitialState: function () {
-    return {
+class FixedToResponsive extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "_isMounted", false);
+    _defineProperty(this, "state", {
       viewportHeight: null,
       viewportWidth: null
-    };
-  },
-  componentDidMount: function () {
+    });
+    _defineProperty(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;
@@ -4528,19 +4467,11 @@ const FixedToResponsive = createReactClass__default["default"]({
     } 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
@@ -4596,6 +4527,11 @@ const FixedToResponsive = createReactClass__default["default"]({
     }
     return container;
   }
+}
+_defineProperty(FixedToResponsive, "defaultProps", {
+  className: "",
+  constrainHeight: false,
+  allowFullBleed: false
 });
 
 /* eslint-disable @babel/no-invalid-this */
@@ -9125,6 +9061,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["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__namespace.createElement(wonderBlocksCore.RenderStateRoot, {
+    throwIfNested: false
+  }, element), container, callback);
+}
+
 function findChildOrAdd(elem, className) {
   const $child = $__default["default"](elem).find("." + className);
   if ($child.length === 0) {
@@ -9199,74 +9155,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__namespace.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
@@ -11240,10 +11140,11 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
           }
           isClickingCanvas = true;
           if (options.onMouseMove) {
+            const handler = options.onMouseMove;
             $__default["default"](document).bind("vmousemove.mouseLayer", function (e) {
               if (isClickingCanvas) {
                 e.preventDefault();
-                options.onMouseMove(graph.getMouseCoord(e));
+                handler(graph.getMouseCoord(e));
               }
             });
           }
@@ -11260,18 +11161,21 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
         }
       });
       if (options.onMouseOver) {
+        const handler = options.onMouseOver;
         $__default["default"](graph.mouselayer.canvas).on("vmouseover", function (e) {
-          options.onMouseOver(graph.getMouseCoord(e));
+          handler(graph.getMouseCoord(e));
         });
       }
       if (options.onMouseOut) {
+        const handler = options.onMouseOut;
         $__default["default"](graph.mouselayer.canvas).on("vmouseout", function (e) {
-          options.onMouseOut(graph.getMouseCoord(e));
+          handler(graph.getMouseCoord(e));
         });
       }
     }
     if (!options.allowScratchpad) {
-      options.setDrawingAreaAvailable(false);
+      var _options$setDrawingAr, _options;
+      (_options$setDrawingAr = (_options = options).setDrawingAreaAvailable) === null || _options$setDrawingAr === void 0 ? void 0 : _options$setDrawingAr.call(_options, false);
     }
 
     // Add mouse and visible wrapper layers for DOM-node-wrapped movables
@@ -15075,26 +14979,6 @@ ___default["default"].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["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__namespace.createElement(wonderBlocksCore.RenderStateRoot, {
-    throwIfNested: false
-  }, element), container, callback);
-}
-
 /* eslint-disable @babel/no-invalid-this */
 const add$1 = {
   constrain: function () {
@@ -16576,24 +16460,27 @@ const {
 class Graphie extends React__namespace.Component {
   constructor() {
     super(...arguments);
+    _defineProperty(this, "graphieDivRef", /*#__PURE__*/React__namespace.createRef());
     _defineProperty(this, "getGraphie", () => {
       // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
       return this._graphie;
     });
     _defineProperty(this, "_range", () => {
-      return ___default["default"].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])];
     });
     _defineProperty(this, "_box", () => {
-      return ___default["default"].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])];
     });
     _defineProperty(this, "_scale", () => {
       const box = this._box();
@@ -16605,9 +16492,7 @@ class Graphie extends React__namespace.Component {
     });
     _defineProperty(this, "_setupGraphie", () => {
       this._removeMovables();
-
-      // eslint-disable-next-line react/no-string-refs
-      const graphieDiv = ReactDOM__default["default"].findDOMNode(this.refs.graphieDiv);
+      const graphieDiv = ReactDOM__default["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'.
       $__default["default"](graphieDiv).empty();
       // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
@@ -16821,29 +16706,12 @@ class Graphie extends React__namespace.Component {
       className: "graphie-container"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "graphie",
-      ref: "graphieDiv"
+      ref: this.graphieDivRef
     }));
   }
 }
 
 // Attach Graphie.createClass and Graphie.createSimpleClass
-_defineProperty(Graphie, "propTypes", {
-  addMouseLayer: PropTypes__default["default"].bool,
-  box: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number).isRequired,
-  children: PropTypes__default["default"].node,
-  isMobile: PropTypes__default["default"].bool,
-  onClick: PropTypes__default["default"].func,
-  onMouseDown: PropTypes__default["default"].func,
-  onMouseMove: PropTypes__default["default"].func,
-  onMouseUp: PropTypes__default["default"].func,
-  options: PropTypes__default["default"].shape({
-    snapStep: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)
-  }),
-  range: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)),
-  responsive: PropTypes__default["default"].bool,
-  setDrawingAreaAvailable: PropTypes__default["default"].func,
-  setup: PropTypes__default["default"].func.isRequired
-});
 _defineProperty(Graphie, "defaultProps", {
   range: [[-10, 10], [-10, 10]],
   options: {},
@@ -17479,13 +17347,15 @@ class SvgImage extends React__namespace.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__namespace.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: ___default["default"].pick(this.state, "labels"),
         responsive: responsive,
@@ -18012,6 +17882,35 @@ const exclamationIcon = {
   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
+ * perseus-linter/src/index).
+ *
+ * This component serves multiple purposes
+ *
+ * 1) It renders a small circle in the right margin to indicate that there
+ * is lint on (or near) that line.
+ *
+ * 2) The area around the circle is hoverable: when the mouse moves over it
+ * the linty content is highlighted and a tooltip is displayed that explains
+ * what the problem is.
+ *
+ * 3) The hoverable area is also an HTML <a> tag. Clicking on it opens
+ * a new tab and links to additional details about the specific lint rule.
+ *
+ * The CSS required to position the circles in the right margin is tricky
+ * and it does not always work perfectly. When lint occurs on a block element
+ * that has a right margin (like anything blockquoted) the circle will appear
+ * to the left of where it belongs.  And if there is more
+ **/
 class Lint extends React__namespace.Component {
   constructor() {
     super(...arguments);
@@ -18034,11 +17933,11 @@ class Lint extends React__namespace.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;
@@ -18073,7 +17972,6 @@ class Lint extends React__namespace.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);
   }
 
@@ -18119,24 +18017,6 @@ class Lint extends React__namespace.Component {
     }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-_defineProperty(Lint, "propTypes", {
-  // The children are the linty content we're highlighting
-  children: PropTypes__default["default"].node,
-  // Inline lint is highlighted differently than block lint.
-  inline: PropTypes__default["default"].bool,
-  // This is the text that appears in the tooltip
-  message: PropTypes__default["default"].string.isRequired,
-  // This is used as the fragment id (hash) in the URL of the link
-  ruleName: PropTypes__default["default"].string.isRequired,
-  // Lint warnings inside tables are handled specially
-  insideTable: PropTypes__default["default"].bool.isRequired,
-  // Should lint highlighting be rendered as a block to the left of
-  // the lint instead of on the right gutter?
-  blockHighlight: PropTypes__default["default"].bool,
-  // How important this lint message is for the editor. Severity goes
-  // from 1 (indicating an error) to 4 (offline reporting only)
-  severity: PropTypes__default["default"].number
-});
 const styles$A = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
@@ -19403,8 +19283,6 @@ class Renderer extends React__namespace.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.
@@ -20567,9 +20445,6 @@ class Renderer extends React__namespace.Component {
   }
   render() {
     const apiOptions = this.getApiOptions();
-    const {
-      KatexProvider
-    } = getDependencies();
     if (this.reuseMarkdown) {
       return this.lastRenderedMarkdown;
     }
@@ -20610,9 +20485,9 @@ class Renderer extends React__namespace.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__namespace.createElement(KatexProvider, null, /*#__PURE__*/React__namespace.createElement(DefinitionProvider, null, /*#__PURE__*/React__namespace.createElement("div", {
+        return /*#__PURE__*/React__namespace.createElement(DefinitionProvider, null, /*#__PURE__*/React__namespace.createElement("div", {
           "data-perseus-component-index": this.translationIndex
-        }, content)));
+        }, content));
       }
     }
 
@@ -20661,9 +20536,9 @@ class Renderer extends React__namespace.Component {
       [ClassNames.RESPONSIVE_RENDERER]: true,
       [ClassNames.TWO_COLUMN_RENDERER]: this._isTwoColumn
     });
-    this.lastRenderedMarkdown = /*#__PURE__*/React__namespace.createElement(KatexProvider, null, /*#__PURE__*/React__namespace.createElement(DefinitionProvider, null, /*#__PURE__*/React__namespace.createElement("div", {
+    this.lastRenderedMarkdown = /*#__PURE__*/React__namespace.createElement(DefinitionProvider, null, /*#__PURE__*/React__namespace.createElement("div", {
       className: className
-    }, markdownContents)));
+    }, markdownContents));
     return this.lastRenderedMarkdown;
   }
 }
@@ -20939,13 +20814,6 @@ class MathOutput extends React__namespace.Component {
     this._unbindBlurHandler();
   }
 }
-_defineProperty(MathOutput, "propTypes", {
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  className: PropTypes__default["default"].string,
-  labelText: PropTypes__default["default"].string,
-  onFocus: PropTypes__default["default"].func,
-  onBlur: PropTypes__default["default"].func
-});
 _defineProperty(MathOutput, "defaultProps", {
   value: "",
   onFocus: function () {},
@@ -21186,9 +21054,9 @@ class InputWithExamples extends React__namespace.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
@@ -21259,7 +21127,7 @@ class SimpleKeypadInput extends React__namespace.Component {
         onFocus: () => {
           if (keypadElement) {
             keypadElement.configure({
-              keypadType: mathInput.KeypadTypes.FRACTION
+              keypadType: mathInput.KeypadType.FRACTION
             }, () => {
               if (_this._isMounted) {
                 onFocus && onFocus();
@@ -27902,6 +27770,34 @@ class Graph extends React__namespace.Component {
       return ___default["default"].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;
+    ___default["default"].each(potentialChanges, function (prop) {
+      if (!___default["default"].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;
@@ -27940,55 +27836,7 @@ class Graph extends React__namespace.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;
-    ___default["default"].each(potentialChanges, function (prop) {
-      if (!___default["default"].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.
-   */
 }
-_defineProperty(Graph, "propTypes", {
-  box: PropTypes__default["default"].array.isRequired,
-  labels: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  range: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)),
-  step: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-  gridStep: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-  snapStep: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-  markings: PropTypes__default["default"].string,
-  backgroundImage: PropTypes__default["default"].shape({
-    url: PropTypes__default["default"].string
-  }),
-  showProtractor: PropTypes__default["default"].bool,
-  showRuler: PropTypes__default["default"].bool,
-  rulerLabel: PropTypes__default["default"].string,
-  rulerTicks: PropTypes__default["default"].number,
-  onGraphieUpdated: PropTypes__default["default"].func,
-  instructions: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
-  setDrawingAreaAvailable: PropTypes__default["default"].func,
-  isMobile: PropTypes__default["default"].bool
-});
 _defineProperty(Graph, "defaultProps", {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
@@ -28001,10 +27849,6 @@ _defineProperty(Graph, "defaultProps", {
   showRuler: false,
   rulerLabel: "",
   rulerTicks: 10,
-  instructions: null,
-  onGraphieUpdated: null,
-  onClick: null,
-  onMouseDown: null,
   isMobile: false
 });
 
@@ -29484,7 +29328,10 @@ class InteractiveGraph extends React__namespace.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;
@@ -30067,7 +29914,6 @@ _defineProperty(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,
@@ -32430,14 +32276,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
@@ -32451,14 +32301,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__namespace.Component {
   render() {
     const {
       layout
     } = this.props;
-    const className = aphrodite.css(styles$e.card, styles$e.placeholder, layout === HORIZONTAL$2 && styles$e.horizontalCard);
+    const className = aphrodite.css(styles$e.card, styles$e.placeholder, layout === Layout.HORIZONTAL && styles$e.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -32472,11 +32321,6 @@ class Placeholder extends React__namespace.Component {
     });
   }
 }
-_defineProperty(Placeholder, "propTypes", {
-  layout: PropTypes__default["default"].oneOf([HORIZONTAL$2, VERTICAL$1]),
-  width: PropTypes__default["default"].number.isRequired,
-  height: PropTypes__default["default"].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.
@@ -32503,7 +32347,8 @@ class Draggable extends React__namespace.Component {
       mouse: {
         left: 0,
         top: 0
-      }
+      },
+      dragging: false
     });
     _defineProperty(this, "getCurrentPosition", () => {
       return {
@@ -32522,7 +32367,7 @@ class Draggable extends React__namespace.Component {
       $__default["default"](document).off("mouseup", this.onMouseUp);
     });
     _defineProperty(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)) {
@@ -32564,7 +32409,7 @@ class Draggable extends React__namespace.Component {
       });
     });
     _defineProperty(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;
       }
@@ -32582,7 +32427,7 @@ class Draggable extends React__namespace.Component {
       }
     });
     _defineProperty(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;
       }
@@ -32636,20 +32481,20 @@ class Draggable extends React__namespace.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 = aphrodite.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 = aphrodite.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) {
       ___default["default"].extend(style, {
         position: "absolute"
       }, this.getCurrentPosition());
@@ -32679,10 +32524,10 @@ class Draggable extends React__namespace.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)));
@@ -32693,29 +32538,16 @@ class Draggable extends React__namespace.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'.
       $__default["default"](ReactDOM__default["default"].findDOMNode(this)).finish();
     }
   }
 }
-_defineProperty(Draggable, "propTypes", {
-  content: PropTypes__default["default"].string.isRequired,
-  endPosition: PropTypes__default["default"].object.isRequired,
-  includePadding: PropTypes__default["default"].bool,
-  layout: PropTypes__default["default"].oneOf([HORIZONTAL$2, VERTICAL$1]),
-  onAnimationEnd: PropTypes__default["default"].func.isRequired,
-  onMouseDown: PropTypes__default["default"].func.isRequired,
-  onMouseMove: PropTypes__default["default"].func.isRequired,
-  onMouseUp: PropTypes__default["default"].func.isRequired,
-  onRender: PropTypes__default["default"].func.isRequired,
-  type: PropTypes__default["default"].oneOf([STATIC, DRAGGING, ANIMATING, DISABLED]),
-  linterContext: PerseusLinter__namespace.linterContextProps
-});
 _defineProperty(Draggable, "defaultProps", {
   includePadding: true,
-  type: STATIC,
+  type: ItemState.STATIC,
   linterContext: PerseusLinter__namespace.linterContextDefault
 });
 class Sortable extends React__namespace.Component {
@@ -32730,7 +32562,7 @@ class Sortable extends React__namespace.Component {
     }, 20));
     this.state = {
       items: Sortable.itemsFromProps(this.props),
-      katex: null
+      texRendererLoaded: false
     };
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -32758,20 +32590,13 @@ class Sortable extends React__namespace.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
@@ -32794,8 +32619,7 @@ class Sortable extends React__namespace.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 = ___default["default"].clone(this.state.items);
+    let items = [...this.state.items];
 
     // Fetches a jQuery list of elements for each item
     const $items = ___default["default"].map(items, function (item) {
@@ -32813,7 +32637,7 @@ class Sortable extends React__namespace.Component {
     if (constraints !== null && constraints !== void 0 && constraints.width) {
       // Items must be at least as wide as the specified constraint
       syncWidth = ___default["default"].max(widths.concat(constraints.width));
-    } else if (layout === VERTICAL$1) {
+    } else if (layout === Layout.VERTICAL) {
       // Sync widths to get a clean column
       syncWidth = ___default["default"].max(widths);
     }
@@ -32821,21 +32645,17 @@ class Sortable extends React__namespace.Component {
     if (constraints !== null && constraints !== void 0 && constraints.height) {
       // Items must be at least as high as the specified constraint
       syncHeight = ___default["default"].max(heights.concat(constraints.height));
-    } else if (layout === HORIZONTAL$2) {
+    } else if (layout === Layout.HORIZONTAL) {
       // Sync widths to get a clean row
       syncHeight = ___default["default"].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 = ___default["default"].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,
@@ -32845,14 +32665,30 @@ class Sortable extends React__namespace.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__namespace.createElement(wonderBlocksProgressSpinner.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, null), /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React__namespace.createElement(TeX, {
+        onRender: () => this.setState({
+          texRendererLoaded: true
+        })
+      }, "1")));
     }
     const cards = [];
     const {
@@ -32861,19 +32697,19 @@ class Sortable extends React__namespace.Component {
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. See sortable.less for details.
     const className = aphrodite.css(styles$e.sortable) + " perseus-sortable";
-    const syncWidth = ((_this$props$constrain = this.props.constraints) === null || _this$props$constrain === void 0 ? void 0 : _this$props$constrain.width) || layout === VERTICAL$1;
-    const syncHeight = ((_this$props$constrain2 = this.props.constraints) === null || _this$props$constrain2 === void 0 ? void 0 : _this$props$constrain2.height) || layout === HORIZONTAL$2;
+    const syncWidth = ((_this$props$constrain = this.props.constraints) === null || _this$props$constrain === void 0 ? void 0 : _this$props$constrain.width) || layout === Layout.VERTICAL;
+    const syncHeight = ((_this$props$constrain2 = this.props.constraints) === null || _this$props$constrain2 === void 0 ? void 0 : _this$props$constrain2.height) || layout === Layout.HORIZONTAL;
     ___default["default"].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
       }
@@ -32881,7 +32717,7 @@ class Sortable extends React__namespace.Component {
       cards.push( /*#__PURE__*/React__namespace.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,
@@ -32930,7 +32766,7 @@ class Sortable extends React__namespace.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__namespace.createElement(Placeholder, {
           key: "placeholder_" + item.key,
           ref: "placeholder_" + item.key,
@@ -32949,7 +32785,7 @@ class Sortable extends React__namespace.Component {
     // Static -> Dragging
     const items = ___default["default"].map(this.state.items, function (item) {
       if (item.key === key) {
-        item.type = DRAGGING;
+        item.state = ItemState.DRAGGING;
       }
       return item;
     });
@@ -33009,7 +32845,7 @@ class Sortable extends React__namespace.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;
@@ -33049,7 +32885,7 @@ class Sortable extends React__namespace.Component {
     const nextAnimationFrame = requestAnimationFrame(() => {
       const items = ___default["default"].map(this.state.items, function (item) {
         if (item.key === key) {
-          item.type = ANIMATING;
+          item.state = ItemState.ANIMATING;
           const $placeholder = $__default["default"](
           // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
           ReactDOM__default["default"].findDOMNode(
@@ -33079,7 +32915,7 @@ class Sortable extends React__namespace.Component {
     // Animating -> Static
     const items = ___default["default"].map(this.state.items, function (item) {
       if (item.key === key) {
-        item.type = STATIC;
+        item.state = ItemState.STATIC;
       }
       return item;
     });
@@ -33092,7 +32928,7 @@ class Sortable extends React__namespace.Component {
   }
 }
 _defineProperty(Sortable, "defaultProps", {
-  layout: HORIZONTAL$2,
+  layout: Layout.HORIZONTAL,
   padding: true,
   disabled: false,
   constraints: {},
@@ -33100,7 +32936,7 @@ _defineProperty(Sortable, "defaultProps", {
   margin: 5,
   onChange: function () {},
   linterContext: PerseusLinter__namespace.linterContextDefault,
-  waitForKatexLoad: true
+  waitForTexRendererToLoad: true
 });
 const styles$e = aphrodite.StyleSheet.create({
   sortable: {
@@ -33162,7 +32998,7 @@ class Matcher extends React__namespace.Component {
     _defineProperty(this, "state", {
       leftHeight: 0,
       rightHeight: 0,
-      katex: null
+      texRendererLoaded: false
     });
     _defineProperty(this, "changeAndTrack", e => {
       this.props.onChange(e);
@@ -33181,10 +33017,10 @@ class Matcher extends React__namespace.Component {
       });
     });
     _defineProperty(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: []
@@ -33214,20 +33050,33 @@ class Matcher extends React__namespace.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__namespace.createElement(wonderBlocksProgressSpinner.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, null), /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React__namespace.createElement(TeX, {
+        onRender: () => {
+          this.setState({
+            texRendererLoaded: true
+          });
+        }
+      }, "1")));
     }
 
     // Use the same random() function to shuffle both columns sequentially
@@ -33265,7 +33114,7 @@ class Matcher extends React__namespace.Component {
       className: aphrodite.css(styles$d.column)
     }, /*#__PURE__*/React__namespace.createElement(Sortable, {
       options: left,
-      layout: "vertical",
+      layout: Layout.VERTICAL,
       padding: this.props.padding,
       disabled: !this.props.orderMatters,
       constraints: constraints,
@@ -33282,7 +33131,7 @@ class Matcher extends React__namespace.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,
@@ -39935,11 +39784,7 @@ class Histogram extends React__namespace.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",
@@ -45775,99 +45620,90 @@ _defineProperty(ElementContainer, "defaultProps", {
   title: "More"
 });
 
-class HUD extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "renderVisibleIcon", () => {
-      return /*#__PURE__*/React__namespace.createElement("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        className: aphrodite.css(styles$2.icon)
-      }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__namespace.createElement("path", {
-        fill: "none",
-        d: "M0 0h24v24H0z"
-      }), /*#__PURE__*/React__namespace.createElement("mask", {
-        id: "b",
-        fill: "#fff"
-      }, /*#__PURE__*/React__namespace.createElement("use", {
-        href: "#a"
-      })), /*#__PURE__*/React__namespace.createElement("use", {
-        fill: "#fff",
-        fillRule: "nonzero",
-        href: "#a"
-      }), /*#__PURE__*/React__namespace.createElement("g", {
-        fill: "#fff",
-        mask: "url(#b)"
-      }, /*#__PURE__*/React__namespace.createElement("path", {
-        d: "M0 0h24v24H0z"
-      }))));
-    });
-    _defineProperty(this, "renderHiddenIcon", () => {
-      return /*#__PURE__*/React__namespace.createElement("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        className: aphrodite.css(styles$2.icon)
-      }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
-        fill: "none",
-        fillRule: "evenodd"
-      }, /*#__PURE__*/React__namespace.createElement("path", {
-        fill: "none",
-        d: "M0 0h24v24H0z"
-      }), /*#__PURE__*/React__namespace.createElement("mask", {
-        id: "b",
-        fill: "#fff"
-      }, /*#__PURE__*/React__namespace.createElement("use", {
-        href: "#a"
-      })), /*#__PURE__*/React__namespace.createElement("use", {
-        fill: "#fff",
-        fillRule: "nonzero",
-        href: "#a"
-      }), /*#__PURE__*/React__namespace.createElement("g", {
-        fill: "#fff",
-        mask: "url(#b)"
-      }, /*#__PURE__*/React__namespace.createElement("path", {
-        d: "M0 0h24v24H0z"
-      }))));
-    });
+// Displays a stylized open eye: lint warnings are visible
+const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  className: aphrodite.css(styles$2.icon)
+}, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+}), /*#__PURE__*/React__namespace.createElement("mask", {
+  id: "b",
+  fill: "#fff"
+}, /*#__PURE__*/React__namespace.createElement("use", {
+  href: "#a"
+})), /*#__PURE__*/React__namespace.createElement("use", {
+  fill: "#fff",
+  fillRule: "nonzero",
+  href: "#a"
+}), /*#__PURE__*/React__namespace.createElement("g", {
+  fill: "#fff",
+  mask: "url(#b)"
+}, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  className: aphrodite.css(styles$2.icon)
+}, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+}), /*#__PURE__*/React__namespace.createElement("mask", {
+  id: "b",
+  fill: "#fff"
+}, /*#__PURE__*/React__namespace.createElement("use", {
+  href: "#a"
+})), /*#__PURE__*/React__namespace.createElement("use", {
+  fill: "#fff",
+  fillRule: "nonzero",
+  href: "#a"
+}), /*#__PURE__*/React__namespace.createElement("g", {
+  fill: "#fff",
+  mask: "url(#b)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M0 0h24v24H0z"
+}))));
+const HUD = _ref => {
+  let {
+    message,
+    enabled,
+    onClick,
+    fixedPosition = true
+  } = _ref;
+  let state;
+  let icon;
+  if (enabled) {
+    state = styles$2.enabled;
+    icon = /*#__PURE__*/React__namespace.createElement(VisibleIcon, null);
+  } else {
+    state = styles$2.disabled;
+    icon = /*#__PURE__*/React__namespace.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__namespace.createElement("button", {
+    className: aphrodite.css(styles$2.hud, fixedPosition && styles$2.hudFixedPosition, state),
+    onClick: e => {
+      onClick();
     }
-    return /*#__PURE__*/React__namespace.createElement("button", {
-      className: aphrodite.css(styles$2.hud, this.props.fixedPosition && styles$2.hudFixedPosition, state),
-      onClick: e => {
-        this.props.onClick();
-      }
-    }, icon, this.props.message);
-  }
-}
-_defineProperty(HUD, "propTypes", {
-  message: PropTypes__default["default"].string.isRequired,
-  enabled: PropTypes__default["default"].bool.isRequired,
-  onClick: PropTypes__default["default"].func.isRequired,
-  fixedPosition: PropTypes__default["default"].bool
-});
-_defineProperty(HUD, "defaultProps", {
-  fixedPosition: true
-});
+  }, icon, message);
+};
 const styles$2 = aphrodite.StyleSheet.create({
   hud: {
     boxSizing: "border-box",