@khanacademy/perseus 19.6.3 → 19.7.1

package/dist/es/index.js

@@ -29,11 +29,12 @@ import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$1 from 'lodash.debounce';
+import { useMovablePoint, Line as Line$4, Coordinates, Mafs } from 'mafs';
+import createReactClass from 'create-react-class';
 import Switch from '@khanacademy/wonder-blocks-switch';
 import { LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import Pill from '@khanacademy/wonder-blocks-pill';
 import { Popper } from 'react-popper';
-import createReactClass from 'create-react-class';
 import Link from '@khanacademy/wonder-blocks-link';
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 
@@ -1901,7 +1902,7 @@ const KhanAnswerTypes = {
   }
 };
 
-const _excluded$4 = ["scoring"];
+const _excluded$5 = ["scoring"];
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 
@@ -1989,7 +1990,7 @@ class Expression extends React.Component {
       let {
           scoring
         } = _ref,
-        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$5);
       const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {});
 
       // "scoring" is a flag that indicates when we are checking answers.
@@ -21392,7 +21393,7 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-const _excluded$3 = ["keypadElement", "onFocus", "value"];
+const _excluded$4 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21431,7 +21432,7 @@ class SimpleKeypadInput extends React.Component {
         onFocus,
         value
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
     return (
       /*#__PURE__*/
       // @ts-expect-error - TS2769 - No overload matches this call.
@@ -23262,14 +23263,14 @@ var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.
   forwardedRef: ref
 })));
 
-const _excluded$2 = ["showContent", "content", "forwardedRef"];
+const _excluded$3 = ["showContent", "content", "forwardedRef"];
 const ChoiceNoneAbove = function ChoiceNoneAbove(props) {
   const {
       showContent,
       content,
       forwardedRef
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$3);
   const choiceProps = _extends({}, rest, {
     content: showContent ? content :
     /*#__PURE__*/
@@ -28173,6 +28174,872 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+const useInteractivePoint = (coords, snaps, range) => useMovablePoint(coords, {
+  constrain: coord => constrain(coord, snaps, range),
+  color: Color.blue
+});
+
+/**
+ * We do not want to call `onGraphChange` until the user
+ * has interacted with the graph. See the test,
+ * "should reject no interaction"
+ */
+const useEffectAfterFirstRender = (fn, deps) => {
+  const firstRender = useRef(true);
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    fn();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fn, ...deps]);
+};
+const snap = (val, step) => {
+  const inverse = 1 / step;
+  return Math.round(val * inverse) / inverse;
+};
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+const constrain = (coord, snapStep, range) => {
+  const [x, y] = coord;
+  const [xSnap, ySnap] = snapStep;
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  return [clamp(snap(x, xSnap), xMin, xMax), clamp(snap(y, ySnap), yMin, yMax)];
+};
+
+// same as pointsFromNormalized in interactive-graph.tsx
+const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
+// maps over [x, y]
+coords.map((coord, i) => {
+  const axisRange = range[i];
+  if (noSnap) {
+    return axisRange[0] + (axisRange[1] - axisRange[0]) * coord;
+  }
+  const axisStep = step[i];
+  const nSteps = Math.floor((axisRange[1] - axisRange[0]) / axisStep);
+  const tick = Math.round(coord * nSteps);
+  return axisRange[0] + axisStep * tick;
+}));
+
+// same as normalizeCoords in interactive-graph.tsx
+const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
+  const extent = ranges[i][1] - ranges[i][0];
+  return (coord + ranges[i][1]) / extent;
+}));
+
+const getSegmentCoords = props => {
+  const coords = props.graph.coords;
+  if (coords) {
+    return coords;
+  }
+  const ys = n => {
+    switch (n) {
+      case 2:
+        return [5, -5];
+      case 3:
+        return [5, 0, -5];
+      case 4:
+        return [6, 2, -2, -6];
+      case 5:
+        return [6, 3, 0, -3, -6];
+      case 6:
+        return [5, 3, 1, -1, -3, -5];
+      default:
+        return [5];
+    }
+  };
+  return ys(props.graph.numSegments).map(y => {
+    let segment = [[-5, y], [5, y]];
+    segment = normalizeCoords(segment, props.range);
+    segment = normalizePoints(props.range, props.step, segment);
+    return segment;
+  });
+};
+const updateSegmentsArray = (segments, index, segment) => segments.map((seg, i) => index === i ? segment : seg);
+const SegmentGraph = props => {
+  const segments = getSegmentCoords(props);
+  const handleChange = (i, segment) => props.onGraphChange(current => _extends({}, current, {
+    coords: current.coords ? updateSegmentsArray(current.coords, i, segment) : updateSegmentsArray(segments, i, segment)
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React.createElement(Segment, {
+    key: i,
+    i: i,
+    segment: segment,
+    snaps: props.snapStep,
+    range: props.range,
+    onChange: handleChange,
+    "data-testid": "segment" + i
+  })));
+};
+const Segment = props => {
+  const [start, end] = props.segment;
+  const {
+    point: pt1,
+    element: el1
+  } = useInteractivePoint(start, props.snaps, props.range);
+  const {
+    point: pt2,
+    element: el2
+  } = useInteractivePoint(end, props.snaps, props.range);
+  useEffectAfterFirstRender(() => props.onChange(props.i, [pt1, pt2]), [pt1, pt2]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$4.Segment, {
+    point1: pt1,
+    point2: pt2
+  }), el1, el2);
+};
+
+const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
+const axisOptions = (props, index) => ({
+  axis: props.markings === "graph",
+  lines: props.step[index],
+  subdivisions: props.step[index] / props.gridStep[index],
+  labels: n => renderLineLabel(n, props.range[index]) ? n : ""
+});
+const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
+  xAxis: axisOptions(props, 0),
+  yAxis: axisOptions(props, 1)
+});
+
+// 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$j.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$j.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$j.enabled;
+    icon = /*#__PURE__*/React.createElement(VisibleIcon, null);
+  } else {
+    state = styles$j.disabled;
+    icon = /*#__PURE__*/React.createElement(HiddenIcon, null);
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    className: css(styles$j.hud, _fixedPosition && styles$j.hudFixedPosition, state),
+    onClick: e => {
+      onClick();
+    }
+  }, icon, message);
+};
+const styles$j = StyleSheet.create({
+  hud: {
+    boxSizing: "border-box",
+    height: 36,
+    padding: "9px 16px",
+    borderRadius: 18,
+    fontFamily: boldFontFamily,
+    fontSize: "15px",
+    lineHeight: "18px",
+    color: white$1,
+    userSelect: "none",
+    borderWidth: 0 // <button> gives us a border by default
+  },
+
+  // We want to render the element in-place in our fixtures, so allow us to
+  // render in the bottom corner in production and in-place in testing.
+  hudFixedPosition: {
+    bottom: 20,
+    position: "fixed",
+    right: 20,
+    zIndex: 1
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
+    marginTop: -3,
+    verticalAlign: "middle"
+  },
+  enabled: {
+    backgroundColor: warningColor,
+    ":hover": {
+      backgroundColor: warningColorHover
+    },
+    ":active": {
+      backgroundColor: warningColorActive
+    }
+  },
+  disabled: {
+    backgroundColor: gray76,
+    ":hover": {
+      backgroundColor: "#a1a5a9" // in between those two grays
+    },
+
+    ":active": {
+      backgroundColor: gray68
+    }
+  }
+});
+
+const colors$1 = {
+  grayLight: "#aaa",
+  basicBorderColor: "#ccc",
+  white: "#fff"
+};
+const triangleBeforeAfter = {
+  borderBottom: "9px solid transparent",
+  borderTop: "9px solid transparent",
+  content: '" "',
+  height: "0",
+  position: "absolute",
+  top: "0",
+  width: "0"
+};
+const styles$i = StyleSheet.create({
+  infoTip: {
+    display: "inline-block",
+    marginLeft: "5px",
+    position: "relative"
+  },
+  infoTipContainer: {
+    position: "absolute",
+    top: "-12px",
+    left: "22px",
+    zIndex: 1000
+  },
+  infoTipTriangle: {
+    height: "10px",
+    left: "0",
+    position: "absolute",
+    top: "8px",
+    width: "0",
+    zIndex: 1,
+    ":before": _extends({}, triangleBeforeAfter, {
+      borderRight: "9px solid #bbb",
+      right: "0"
+    }),
+    ":after": _extends({}, triangleBeforeAfter, {
+      borderRight: `9px solid ${colors$1.white}`,
+      right: "-1px"
+    })
+  },
+  verticalShadow: {
+    border: `1px solid ${colors$1.basicBorderColor}`,
+    boxShadow: `0 1px 3px ${colors$1.basicBorderColor}`,
+    borderBottom: `1px solid ${colors$1.grayLight}`
+  },
+  infoTipContentContainer: {
+    background: colors$1.white,
+    padding: "5px 10px",
+    width: "240px"
+  }
+});
+const questionMark = "data:image/png;base64," + "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBB" + "ZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/" + "eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+" + "IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2Jl" + "IFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAg" + "ICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5" + "LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9" + "IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHht" + "bG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3Vy" + "Y2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHht" + "cE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2N2M3NTAxYS04YmVlLTQ0M2Mt" + "YmRiNS04OGM2N2IxN2NhYzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJCRTk4" + "Qjc4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5p" + "aWQ6OUJCRTk4QjY4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcDpDcmVhdG9yVG9v" + "bD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRG" + "cm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NGE5ZDI0OTMtODk1NC00OGFkLTlh" + "MTgtZDAwM2MwYWNjNDJlIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY3Yzc1MDFh" + "LThiZWUtNDQzYy1iZGI1LTg4YzY3YjE3Y2FjMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4g" + "PC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqm89uYAAADM" + "SURBVHjaXJA9DoJAEIUH1M4TUHIFsCMGen9OwCGw1YRGW2ntKel0exsojHIBC0ouQAyU" + "viFDstmXfNmZeS+zm7XSNCXRFiRgJf0bXIHixpbhGdxBBJYC1w/xaA424MhNEATkui71" + "fU9KqfEU78UbD9PdbJRlOdae55GmhIP+1NV1TcMwkOM41DSNHvRtMhTHMRVFQW3b6mOL" + "gx99kue5GRp/gIOZuZGvNpTNwjD8oliANU+qqqKu6/TQBdymN57AHjzBT+B6Jx79BRgA" + "vc49kQA4yxgAAAAASUVORK5CYII=";
+class InfoTip$1 extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      hover: false
+    };
+    this.handleMouseEnter = () => {
+      this.setState({
+        hover: true
+      });
+    };
+    this.handleMouseLeave = () => {
+      this.setState({
+        hover: false
+      });
+    };
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: css(styles$i.infoTip)
+    }, /*#__PURE__*/React.createElement("img", {
+      alt: "",
+      width: 10,
+      height: 10,
+      src: questionMark,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave
+    }), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$i.infoTipContainer),
+      style: {
+        display: this.state.hover ? "block" : "none"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: css(styles$i.infoTipTriangle)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$i.verticalShadow, styles$i.infoTipContentContainer)
+    }, this.props.children)));
+  }
+}
+
+/**
+ * A wrapper around info-tip/info-tip.jsx that can be rendered on the
+ * server without causing a checksum mismatch on the client.
+ * (RCSS generates classnames with a randomSuffix, which ensures that any
+ * two sets of generated classnames will not match.)
+ */
+class InfoTip extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      didMount: false
+    };
+  }
+  componentDidMount() {
+    /* eslint-disable react/no-did-mount-set-state */
+    this.setState({
+      didMount: true
+    });
+    /* eslint-enable react/no-did-mount-set-state */
+  }
+
+  render() {
+    if (this.state.didMount) {
+      return /*#__PURE__*/React.createElement(InfoTip$1, this.props);
+    }
+    return /*#__PURE__*/React.createElement("div", null);
+  }
+}
+
+/**
+ * MultiButtonGroup is an aesthetically pleasing group of buttons,
+ * which allows multiple buttons to be selected at the same time.
+ *
+ * NOTE: This component is almost identical to ./button-group.jsx except that
+ * this component allows multiple selection!
+ */
+class MultiButtonGroup extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.toggleSelect = newValue => {
+      const values = (this.props.values || []).slice(0);
+      const allowEmpty = this.props.allowEmpty;
+      if (values.indexOf(newValue) >= 0 && (values.length > 1 || allowEmpty)) {
+        // If the value is already selected, unselect it
+        values.splice(values.indexOf(newValue), 1);
+      } else {
+        // Otherwise merge with other values and return
+        if (values.indexOf(newValue) < 0) {
+          values.push(newValue);
+        }
+      }
+      this.props.onChange(values);
+    };
+  }
+  focus() {
+    var _ReactDOM$findDOMNode;
+    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+    (_ReactDOM$findDOMNode = ReactDOM.findDOMNode(this)) == null || _ReactDOM$findDOMNode.focus();
+    return true;
+  }
+  render() {
+    const values = this.props.values || [];
+    const buttons = this.props.buttons.map((button, i) => {
+      const selected = values.indexOf(button.value) >= 0;
+      return /*#__PURE__*/React.createElement("button", {
+        title: button.title,
+        type: "button",
+        id: "" + i,
+        key: "" + i,
+        ref: "button" + i,
+        className: css(styles$h.buttonStyle, selected && styles$h.selectedStyle),
+        onClick: () => this.toggleSelect(button.value)
+      }, button.content || "" + button.value);
+    });
+    const outerStyle = {
+      display: "inline-block"
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: outerStyle
+    }, buttons);
+  }
+}
+MultiButtonGroup.defaultProps = {
+  values: [],
+  allowEmpty: true
+};
+const styles$h = StyleSheet.create({
+  buttonStyle: {
+    backgroundColor: "white",
+    border: "1px solid #ccc",
+    borderLeft: "0",
+    cursor: "pointer",
+    margin: "0",
+    padding: "5px 10px",
+    position: "relative",
+    // for hover
+
+    ":first-child": {
+      borderLeft: "1px solid #ccc",
+      borderTopLeftRadius: "3px",
+      borderBottomLeftRadius: "3px"
+    },
+    ":last-child": {
+      borderRight: "1px solid #ccc",
+      borderTopRightRadius: "3px",
+      borderBottomRightRadius: "3px"
+    },
+    ":hover": {
+      backgroundColor: "#ccc"
+    },
+    ":focus": {
+      zIndex: 2
+    }
+  },
+  selectedStyle: {
+    backgroundColor: "#ddd"
+  }
+});
+
+const _excluded$2 = ["onFormatChange", "checkValidity", "useArrowKeys"];
+const {
+  firstNumericalParse,
+  captureScratchpadTouchStart
+} = Util;
+const toNumericString = KhanMath.toNumericString;
+const getNumericFormat = KhanMath.getNumericFormat;
+
+/* An input box that accepts only numeric strings
+ *
+ * Calls onChange(value, format) for valid numbers.
+ * Reverts to the current value onBlur or on [ENTER],
+ *   but maintains the format (i.e. 3/2, 1 1/2, 150%)
+ * Accepts empty input and sends it to onChange as null
+ *   if no numeric placeholder is set.
+ * If given a checkValidity function, will turn
+ *   the background/outline red when invalid
+ * If useArrowKeys is set to true, up/down arrows will
+ *   increment/decrement integers
+ * Optionally takes a size ("mini", "small", "normal")
+ */
+class NumberInput extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      format: this.props.format
+    };
+    /* Return the current "value" of this input
+     * If empty, it returns the placeholder (if it is a number) or null
+     */
+    this.getValue = () => {
+      return this.parseInputValue(
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
+      ReactDOM__default.findDOMNode(this.refs.input).value // eslint-disable-line react/no-string-refs
+      );
+    };
+    /* Return the current string value of this input */
+    this.getStringValue = () => {
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
+      return ReactDOM__default.findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
+    };
+    this.parseInputValue = value => {
+      if (value === "") {
+        const placeholder = this.props.placeholder;
+        return _.isFinite(placeholder) ? +placeholder : null;
+      }
+      const result = firstNumericalParse(value);
+      return _.isFinite(result) ? result : this.props.value;
+    };
+    /* Set text input focus to this input */
+    this.focus = () => {
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+      ReactDOM__default.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+      this._handleFocus();
+    };
+    this.blur = () => {
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
+      ReactDOM__default.findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
+      this._handleBlur();
+    };
+    this.setSelectionRange = (selectionStart, selectionEnd) => {
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
+      ReactDOM__default.findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
+    };
+    this.getSelectionStart = () => {
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
+      return ReactDOM__default.findDOMNode(this).selectionStart;
+    };
+    this.getSelectionEnd = () => {
+      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
+      return ReactDOM__default.findDOMNode(this).selectionEnd;
+    };
+    this._checkValidity = value => {
+      if (value == null) {
+        return true;
+      }
+      const val = firstNumericalParse(value);
+      const checkValidity = this.props.checkValidity;
+      return _.isFinite(val) && checkValidity(val);
+    };
+    this._handleChange = e => {
+      const text = e.target.value;
+      const value = this.parseInputValue(text);
+      const format = getNumericFormat(text);
+      this.props.onChange(value);
+      if (format) {
+        this.props.onFormatChange(value, format);
+        this.setState({
+          format: format
+        });
+      }
+    };
+    this._handleFocus = () => {
+      if (this.props.onFocus) {
+        this.props.onFocus();
+      }
+    };
+    this._handleBlur = e => {
+      // Only continue on blur or "enter"
+      // @ts-expect-error - TS2339 - Property 'keyCode' does not exist on type 'KeyboardEvent<Element> | FocusEvent<Element, Element>'.
+      if (e && e.type === "keypress" && e.keyCode !== 13) {
+        return;
+      }
+      this._setValue(this.props.value, this.state.format);
+      if (this.props.onBlur) {
+        this.props.onBlur();
+      }
+    };
+    this._onKeyDown = e => {
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(e);
+      }
+      if (!this.props.useArrowKeys || !_.contains(["ArrowUp", "ArrowDown"], e.key)) {
+        return;
+      }
+      let val = this.getValue();
+      if (val !== Math.floor(val)) {
+        return; // bail if not an integer
+      }
+
+      if (e.key === "ArrowUp") {
+        val = val + 1;
+      } else if (e.key === "ArrowDown") {
+        val = val - 1;
+      }
+      if (this._checkValidity(val)) {
+        this.props.onChange(val);
+      }
+    };
+    this._setValue = (val, format) => {
+      // eslint-disable-next-line react/no-string-refs
+      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'val' does not exist on type 'JQueryStatic'.
+      $(ReactDOM__default.findDOMNode(this.refs.input)).val(toNumericString(val, format));
+    };
+  }
+  render() {
+    let classes = classNames({
+      "number-input": true,
+      "invalid-input": !this._checkValidity(this.props.value),
+      mini: this.props.size === "mini",
+      small: this.props.size === "small",
+      normal: this.props.size === "normal"
+    });
+    if (this.props.className != null) {
+      classes = classes + " " + this.props.className;
+    }
+    const _this$props = this.props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+    return /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
+      className: classes,
+      type: "text"
+      // eslint-disable-next-line react/no-string-refs
+      ,
+      ref: "input",
+      onChange: this._handleChange,
+      onFocus: this._handleFocus,
+      onBlur: this._handleBlur,
+      onKeyPress: this._handleBlur,
+      onKeyDown: this._onKeyDown
+      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLInputElement>'.
+      ,
+      onTouchStart: captureScratchpadTouchStart,
+      defaultValue: toNumericString(this.props.value, this.state.format),
+      value: undefined
+    }));
+  }
+  componentDidUpdate(prevProps) {
+    if (!number.equal(this.getValue(), this.props.value)) {
+      this._setValue(this.props.value, this.state.format);
+    }
+  }
+}
+NumberInput.propTypes = {
+  value: PropTypes.number,
+  format: PropTypes.string,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func.isRequired,
+  onFormatChange: PropTypes.func,
+  checkValidity: PropTypes.func,
+  size: PropTypes.string,
+  label: PropTypes.oneOf(["put your labels outside your inputs!"])
+};
+NumberInput.defaultProps = {
+  value: null,
+  placeholder: null,
+  format: null,
+  onFormatChange: () => null,
+  checkValidity: () => true,
+  useArrowKeys: false
+};
+
+/* eslint-disable @babel/no-invalid-this */
+
+/* A checkbox that syncs its value to props using the
+ * renderer's onChange method, and gets the prop name
+ * dynamically from its props list
+ */
+const PropCheckBox = createReactClass({
+  displayName: "PropCheckBox",
+  propTypes: {
+    labelAlignment: PropTypes.oneOf(["left", "right"])
+  },
+  DEFAULT_PROPS: {
+    label: null,
+    onChange: null,
+    labelAlignment: "left"
+  },
+  getDefaultProps: function () {
+    return this.DEFAULT_PROPS;
+  },
+  propName: function () {
+    const propName = _.find(_.keys(this.props), function (localPropName) {
+      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      return !_.has(this.DEFAULT_PROPS, localPropName);
+    }, this);
+    if (!propName) {
+      throw new PerseusError("Attempted to create a PropCheckBox with no prop!", Errors.InvalidInput);
+    }
+    return propName;
+  },
+  _labelAlignLeft: function () {
+    return this.props.labelAlignment === "left";
+  },
+  render: function () {
+    const propName = this.propName();
+    return /*#__PURE__*/React.createElement("label", null, this._labelAlignLeft() && this.props.label, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      checked: this.props[propName],
+      onChange: this.toggle
+    }), !this._labelAlignLeft() && this.props.label);
+  },
+  toggle: function () {
+    const propName = this.propName();
+    const changes = {};
+    changes[propName] = !this.props[propName];
+    this.props.onChange(changes);
+  }
+});
+
+const truth = () => true;
+
+/* A minor abstraction on top of NumberInput for ranges
+ *
+ */
+class RangeInput extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.onChange = (i, newVal) => {
+      const value = this.props.value;
+      if (i === 0) {
+        this.props.onChange([newVal, value[1]]);
+      } else {
+        this.props.onChange([value[0], newVal]);
+      }
+    };
+  }
+  render() {
+    const value = this.props.value;
+    const checkValidity = this.props.checkValidity || truth;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "range-input"
+    }, /*#__PURE__*/React.createElement(NumberInput, _extends({}, this.props, {
+      value: value[0],
+      checkValidity: val => checkValidity([val, value[1]])
+      // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onChange: this.onChange.bind(this, 0),
+      placeholder: this.props.placeholder[0]
+    })), /*#__PURE__*/React.createElement(NumberInput, _extends({}, this.props, {
+      value: value[1],
+      checkValidity: val => checkValidity([value[0], val])
+      // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onChange: this.onChange.bind(this, 1),
+      placeholder: this.props.placeholder[1]
+    })));
+  }
+}
+RangeInput.propTypes = {
+  value: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.array,
+  checkValidity: PropTypes.func
+};
+RangeInput.defaultProps = {
+  placeholder: [null, null]
+};
+
+var components = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ButtonGroup: ButtonGroup,
+  Graph: Graph,
+  Graphie: Graphie,
+  HUD: HUD,
+  Icon: Icon,
+  InfoTip: InfoTip,
+  InlineIcon: InlineIcon,
+  MathInput: MathInput,
+  MultiButtonGroup: MultiButtonGroup,
+  NumberInput: NumberInput,
+  PropCheckBox: PropCheckBox,
+  RangeInput: RangeInput,
+  SvgImage: SvgImage,
+  TextInput: TextInput,
+  TextListEditor: TextListEditor
+});
+
+/**
+ * If a graphie URL is provided in `backgroundImage`, will return the rendered graphie background.
+ * Otherwise, returns `null`.
+ */
+const getLegacyGrid = (box, backgroundImage) => {
+  const {
+    url,
+    width,
+    height
+  } = backgroundImage != null ? backgroundImage : {};
+  if (url && typeof url === "string") {
+    const scale = box[0] / interactiveSizes$1.defaultBoxSize;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0
+      }
+    }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
+      setAssetStatus
+    }) => /*#__PURE__*/React.createElement(SvgImage, {
+      src: url,
+      width: width,
+      height: height,
+      scale: scale,
+      responsive: false,
+      setAssetStatus: setAssetStatus,
+      alt: ""
+    })));
+  }
+  return null;
+};
+
+const _excluded$1 = ["graph"];
+const renderGraph = props => {
+  const {
+      graph
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1);
+  switch (graph.type) {
+    case "segment":
+      return /*#__PURE__*/React.createElement(SegmentGraph, _extends({}, rest, {
+        graph: graph,
+        onGraphChange: props.onGraphChange
+      }));
+  }
+};
+const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _props$backgroundImag, _props$backgroundImag2, _props$backgroundImag3, _props$backgroundImag4;
+  // Storing the gradable state in a ref so that it can be updated without
+  // causing a re-render.
+  const graphRef = React.useRef(props.graph);
+  const handleGraphUpdate = callback => {
+    graphRef.current = callback(graphRef.current);
+  };
+  React.useImperativeHandle(ref, () => ({
+    getUserInput: () => graphRef.current
+  }));
+  const [width, height] = props.box;
+  const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: (_props$backgroundImag = (_props$backgroundImag2 = props.backgroundImage) == null ? void 0 : _props$backgroundImag2.width) != null ? _props$backgroundImag : width,
+      height: (_props$backgroundImag3 = (_props$backgroundImag4 = props.backgroundImage) == null ? void 0 : _props$backgroundImag4.height) != null ? _props$backgroundImag3 : height,
+      position: "relative"
+    }
+  }, legacyGrid, /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0
+    }
+  }, /*#__PURE__*/React.createElement(Mafs, {
+    viewBox: {
+      x: props.range[0],
+      y: props.range[1],
+      padding: 0
+    },
+    pan: false,
+    zoom: false,
+    width: width,
+    height: height
+  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), renderGraph(_extends({}, props, {
+    onGraphChange: handleGraphUpdate
+  })))));
+});
+
 const {
   DeprecationMixin
 } = Util;
@@ -28250,6 +29117,7 @@ class InteractiveGraph extends React.Component {
     this.sinusoid = void 0;
     this.trashCan = void 0;
     this.vertHairline = void 0;
+    this.mafsRef = /*#__PURE__*/React.createRef();
     this.state = {
       shouldShowInstructions: _getShouldShowInstructions(this.props)
     };
@@ -29329,11 +30197,10 @@ class InteractiveGraph extends React.Component {
       });
     };
     this.getUserInput = () => {
-      return InteractiveGraph.getUserInputFromProps(this.props);
-    };
-    this.simpleValidate = rubric => {
-      return InteractiveGraph.validate(this.getUserInput(), rubric, this);
+      var _this$mafsRef$current, _this$mafsRef$current2;
+      return (_this$mafsRef$current = (_this$mafsRef$current2 = this.mafsRef.current) == null || _this$mafsRef$current2.getUserInput == null ? void 0 : _this$mafsRef$current2.getUserInput()) != null ? _this$mafsRef$current : InteractiveGraph.getUserInputFromProps(this.props);
     };
+    this.simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
     this.focus = $.noop;
   }
   // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
@@ -29341,9 +30208,11 @@ class InteractiveGraph extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   componentDidMount() {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-    this.setGraphie(this.refs.graph.graphie());
+    if (this.refs.graph) {
+      // eslint-disable-next-line react/no-string-refs
+      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
+      this.setGraphie(this.refs.graph.graphie());
+    }
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     var _this$props$backgroun, _nextProps$background;
@@ -29383,9 +30252,25 @@ class InteractiveGraph extends React.Component {
   areSegmentGraphsEqual(prevGraph, currentGraph) {
     return prevGraph.numSegments !== currentGraph.numSegments;
   }
+  // const segment: boolean = useFeatureIsOn("mafs-segment-graph");
+  // <Renderer apiOptions={{flags: {mafs: {segment}}}}
   render() {
+    var _this$props$apiOption;
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
+    const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
+    const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+
+    // Mafs shim
+    if ((_this$props$apiOption = this.props.apiOptions) != null && (_this$props$apiOption = _this$props$apiOption.flags) != null && (_this$props$apiOption = _this$props$apiOption["mafs"]) != null && _this$props$apiOption[this.props.graph.type]) {
+      return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, this.props, {
+        ref: this.mafsRef,
+        gridStep: gridStep,
+        snapStep: snapStep,
+        box: box
+      }));
+    }
     let instructions;
+    // isClickToAddPoints() only applies to points and polygons
     if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
       if (this.props.graph.type === "point") {
         instructions = i18n._("Click to add points");
@@ -29399,8 +30284,6 @@ class InteractiveGraph extends React.Component {
     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;
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget " + "perseus-widget-interactive-graph",
@@ -30688,7 +31571,7 @@ var globalConstants = /*#__PURE__*/Object.freeze({
   pureLgMax: pureLgMax
 });
 
-const colors$1 = {
+const colors = {
   white: "#FFFFFF",
   gray98: "#FAFAFA",
   gray97: "#F6F7F7",
@@ -30748,7 +31631,7 @@ const colors$1 = {
 };
 const borderRadius = 4;
 const breadcrumbStyles = {
-  color: colors$1.breadcrumbs,
+  color: colors.breadcrumbs,
   fontFamily: "inherit",
   fontSize: 15,
   fontWeight: "bold",
@@ -30818,14 +31701,14 @@ const typography = {
   },
   // For callouts
   smallHeading: {
-    color: colors$1.gray25,
+    color: colors.gray25,
     fontFamily: "inherit",
     fontSize: 17,
     fontWeight: "bold",
     lineHeight: "23px"
   },
   smallHeadingMobile: {
-    color: colors$1.gray25,
+    color: colors.gray25,
     fontFamily: "inherit",
     fontSize: 15,
     fontWeight: "bold",
@@ -30833,7 +31716,7 @@ const typography = {
   },
   // Accent headings
   accentHeading: {
-    color: colors$1.gray68,
+    color: colors.gray68,
     fontFamily: "inherit",
     fontSize: 15,
     fontWeight: "bold",
@@ -30939,7 +31822,7 @@ const typography = {
   // HACK(kevinb): temporary wonder blocks styles for header only
   // TODO(kevinb): use components from wonder-blocks-typography instead
   wonderBlocksTitle: {
-    color: colors$1.white,
+    color: colors.white,
     fontWeight: 900,
     // "Black" weight
     fontSize: 28,
@@ -30961,7 +31844,7 @@ const typography = {
 
 var globalStyles = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  colors: colors$1,
+  colors: colors,
   borderRadius: borderRadius,
   fonts: fonts,
   typography: typography
@@ -31023,7 +31906,7 @@ const HideAnswersToggle = props => {
   const switchId = idFactory.get("hide-answers-toggle");
   const labelId = idFactory.get("hide-answers-label");
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$j.switchWrapper
+    style: styles$g.switchWrapper
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -31035,7 +31918,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$j = StyleSheet.create({
+const styles$g = StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -31088,13 +31971,13 @@ const AnswerPill = props => {
     id: idFactory.get("perseus-label-image-widget-answer-pill"),
     onClick: correct ? undefined : onClick,
     ref: ref,
-    style: [style, popperStyle, styles$i.pill, correct && styles$i.correct, incorrect && styles$i.incorrect, (focused || hovered) && BringToFront]
+    style: [style, popperStyle, styles$f.pill, correct && styles$f.correct, incorrect && styles$f.incorrect, (focused || hovered) && BringToFront]
   }, /*#__PURE__*/React.createElement(Renderer, {
     content: answerString,
     inline: true
   })));
 };
-const styles$i = StyleSheet.create({
+const styles$f = StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -31147,23 +32030,23 @@ class Marker extends React.Component {
       icon: iconNull
     };
     if (showCorrectness) {
-      iconStyles = [styles$h.markerGraded, showCorrectness === "correct" ? styles$h.markerCorrect : styles$h.markerIncorrect, isOpen && styles$h.markerSelected];
+      iconStyles = [styles$e.markerGraded, showCorrectness === "correct" ? styles$e.markerCorrect : styles$e.markerIncorrect, isOpen && styles$e.markerSelected];
       args = _extends({}, args, {
         icon: showCorrectness === "correct" ? iconCheck : iconMinus
       });
     } else if (selectedAnswers && selectedAnswers.length > 0) {
-      iconStyles = [styles$h.markerFilled, isOpen && styles$h.markerSelected];
+      iconStyles = [styles$e.markerFilled, isOpen && styles$e.markerSelected];
     } else if (isOpen) {
-      iconStyles = [styles$h.markerSelected];
+      iconStyles = [styles$e.markerSelected];
       args = _extends({}, args, {
         icon: iconChevronDown,
         size: 8
       });
     } else if (showPulsate) {
-      iconStyles = [styles$h.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$h.markerUnfilledPulsateOnce : showPulsate && styles$h.markerUnfilledPulsateInfinite];
+      iconStyles = [styles$e.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$e.markerUnfilledPulsateOnce : showPulsate && styles$e.markerUnfilledPulsateInfinite];
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles$h.markerIcon, iconStyles],
+      style: [styles$e.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React.createElement(Icon, args));
   }
@@ -31185,7 +32068,7 @@ class Marker extends React.Component {
     const markerDisabled = showCorrectness === "correct";
     const active = hovered || focused;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-      style: [styles$h.marker, active && !markerDisabled && styles$h.markerActive]
+      style: [styles$e.marker, active && !markerDisabled && styles$e.markerActive]
       // already translated in: /widgets/graded-group.tsx
       ,
       "aria-label": markerDisabled ? i18n._("Correct!") : label
@@ -31203,7 +32086,7 @@ class Marker extends React.Component {
 Marker.defaultProps = {
   selected: []
 };
-const styles$h = StyleSheet.create({
+const styles$e = StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: Color.white,
@@ -31773,13 +32656,13 @@ class LabelImage extends React.Component {
     const promptString = isMobile ? multipleAnswers ? i18n._("Tap each dot on the image to select all answers that apply.") : i18n._("Tap each dot on the image to select an answer.") : multipleAnswers ? i18n._("Click each dot on the image to select all answers that apply.") : i18n._("Click each dot on the image to select an answer.");
     const choicesString = i18n._("Choices:");
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames("perseus-label-image-widget-instructions", css(styles$g.instructions))
+      className: classNames("perseus-label-image-widget-instructions", css(styles$d.instructions))
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$g.instructionsCaption)
+      className: css(styles$d.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$g.instructionsChoices)
+      className: css(styles$d.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React.createElement("div", {
-      className: css(styles$g.instructionsChoice),
+      className: css(styles$d.instructionsChoice),
       key: index
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: choice
@@ -31796,20 +32679,20 @@ class LabelImage extends React.Component {
       activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$g.markersCanvas),
+      className: css(styles$d.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$g.imageContainer,
+      className: css(styles$d.imageContainer,
       // Ensure image interaction is disabled while answer
       // choices popup is visible. This addresses specific
       // case where user may click on question image to
       // dismiss the popup. If the image is larger in size
       // than its rendered in the widget, this would
       // result in a zoom of the image.
-      activeMarkerIndex !== -1 && styles$g.imageInteractionDisabled)
+      activeMarkerIndex !== -1 && styles$d.imageInteractionDisabled)
     }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(SvgImage, {
@@ -31833,7 +32716,7 @@ class LabelImage extends React.Component {
     }));
   }
 }
-const styles$g = StyleSheet.create({
+const styles$d = StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -32190,7 +33073,7 @@ class Placeholder extends React.Component {
     const {
       layout
     } = this.props;
-    const className = css(styles$f.card, styles$f.placeholder, layout === Layout.HORIZONTAL && styles$f.horizontalCard);
+    const className = css(styles$c.card, styles$c.placeholder, layout === Layout.HORIZONTAL && styles$c.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -32373,7 +33256,7 @@ class Draggable extends React.Component {
     // 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$f.card, styles$f.draggable, layout === Layout.HORIZONTAL && styles$f.horizontalCard, layout === Layout.VERTICAL && styles$f.verticalCard, type === ItemState.DRAGGING && styles$f.dragging, type === ItemState.DISABLED && styles$f.disabled, !includePadding && styles$f.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
+    let className = css(styles$c.card, styles$c.draggable, layout === Layout.HORIZONTAL && styles$c.horizontalCard, layout === Layout.VERTICAL && styles$c.verticalCard, type === ItemState.DRAGGING && styles$c.dragging, type === ItemState.DISABLED && styles$c.disabled, !includePadding && styles$c.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
     if (!includePadding) {
       className += " perseus-sortable-draggable-unpadded";
     }
@@ -32580,7 +33463,7 @@ class Sortable extends React.Component {
     } = this.props;
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. See sortable.less for details.
-    const className = css(styles$f.sortable) + " perseus-sortable";
+    const className = css(styles$c.sortable) + " perseus-sortable";
     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) {
@@ -32822,7 +33705,7 @@ Sortable.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault,
   waitForTexRendererToLoad: true
 };
-const styles$f = StyleSheet.create({
+const styles$c = StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -32984,23 +33867,23 @@ class Matcher extends React.Component {
     };
     const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
     return /*#__PURE__*/React.createElement("table", {
-      className: css(styles$e.widget) + " " + HACKY_CSS_CLASSNAME
+      className: css(styles$b.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React.createElement("tbody", null, showLabels && /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$e.row)
+      className: css(styles$b.row)
     }, /*#__PURE__*/React.createElement("th", {
-      className: css(styles$e.column, styles$e.columnLabel)
+      className: css(styles$b.column, styles$b.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext
     })), /*#__PURE__*/React.createElement("th", {
-      className: css(styles$e.column, styles$e.columnRight, styles$e.columnLabel)
+      className: css(styles$b.column, styles$b.columnRight, styles$b.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext
     }))), /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$e.row)
+      className: css(styles$b.row)
     }, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$e.column)
+      className: css(styles$b.column)
     }, /*#__PURE__*/React.createElement(Sortable, {
       options: left,
       layout: Layout.VERTICAL,
@@ -33015,7 +33898,7 @@ class Matcher extends React.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React.createElement("td", {
-      className: css(styles$e.column, styles$e.columnRight)
+      className: css(styles$b.column, styles$b.columnRight)
     }, /*#__PURE__*/React.createElement(Sortable
     // @ts-expect-error - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
     , {
@@ -33068,7 +33951,7 @@ _.extend(Matcher, {
 });
 const padding = 5;
 const border = "1px solid #444";
-const styles$e = StyleSheet.create({
+const styles$b = StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -33101,197 +33984,6 @@ var Matcher$1 = {
   isLintable: true
 };
 
-const _excluded$1 = ["onFormatChange", "checkValidity", "useArrowKeys"];
-const {
-  firstNumericalParse,
-  captureScratchpadTouchStart
-} = Util;
-const toNumericString = KhanMath.toNumericString;
-const getNumericFormat = KhanMath.getNumericFormat;
-
-/* An input box that accepts only numeric strings
- *
- * Calls onChange(value, format) for valid numbers.
- * Reverts to the current value onBlur or on [ENTER],
- *   but maintains the format (i.e. 3/2, 1 1/2, 150%)
- * Accepts empty input and sends it to onChange as null
- *   if no numeric placeholder is set.
- * If given a checkValidity function, will turn
- *   the background/outline red when invalid
- * If useArrowKeys is set to true, up/down arrows will
- *   increment/decrement integers
- * Optionally takes a size ("mini", "small", "normal")
- */
-class NumberInput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      format: this.props.format
-    };
-    /* Return the current "value" of this input
-     * If empty, it returns the placeholder (if it is a number) or null
-     */
-    this.getValue = () => {
-      return this.parseInputValue(
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.input).value // eslint-disable-line react/no-string-refs
-      );
-    };
-    /* Return the current string value of this input */
-    this.getStringValue = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
-    };
-    this.parseInputValue = value => {
-      if (value === "") {
-        const placeholder = this.props.placeholder;
-        return _.isFinite(placeholder) ? +placeholder : null;
-      }
-      const result = firstNumericalParse(value);
-      return _.isFinite(result) ? result : this.props.value;
-    };
-    /* Set text input focus to this input */
-    this.focus = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
-      this._handleFocus();
-    };
-    this.blur = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
-      this._handleBlur();
-    };
-    this.setSelectionRange = (selectionStart, selectionEnd) => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
-    };
-    this.getSelectionStart = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this).selectionStart;
-    };
-    this.getSelectionEnd = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this).selectionEnd;
-    };
-    this._checkValidity = value => {
-      if (value == null) {
-        return true;
-      }
-      const val = firstNumericalParse(value);
-      const checkValidity = this.props.checkValidity;
-      return _.isFinite(val) && checkValidity(val);
-    };
-    this._handleChange = e => {
-      const text = e.target.value;
-      const value = this.parseInputValue(text);
-      const format = getNumericFormat(text);
-      this.props.onChange(value);
-      if (format) {
-        this.props.onFormatChange(value, format);
-        this.setState({
-          format: format
-        });
-      }
-    };
-    this._handleFocus = () => {
-      if (this.props.onFocus) {
-        this.props.onFocus();
-      }
-    };
-    this._handleBlur = e => {
-      // Only continue on blur or "enter"
-      // @ts-expect-error - TS2339 - Property 'keyCode' does not exist on type 'KeyboardEvent<Element> | FocusEvent<Element, Element>'.
-      if (e && e.type === "keypress" && e.keyCode !== 13) {
-        return;
-      }
-      this._setValue(this.props.value, this.state.format);
-      if (this.props.onBlur) {
-        this.props.onBlur();
-      }
-    };
-    this._onKeyDown = e => {
-      if (this.props.onKeyDown) {
-        this.props.onKeyDown(e);
-      }
-      if (!this.props.useArrowKeys || !_.contains(["ArrowUp", "ArrowDown"], e.key)) {
-        return;
-      }
-      let val = this.getValue();
-      if (val !== Math.floor(val)) {
-        return; // bail if not an integer
-      }
-
-      if (e.key === "ArrowUp") {
-        val = val + 1;
-      } else if (e.key === "ArrowDown") {
-        val = val - 1;
-      }
-      if (this._checkValidity(val)) {
-        this.props.onChange(val);
-      }
-    };
-    this._setValue = (val, format) => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'val' does not exist on type 'JQueryStatic'.
-      $(ReactDOM__default.findDOMNode(this.refs.input)).val(toNumericString(val, format));
-    };
-  }
-  render() {
-    let classes = classNames({
-      "number-input": true,
-      "invalid-input": !this._checkValidity(this.props.value),
-      mini: this.props.size === "mini",
-      small: this.props.size === "small",
-      normal: this.props.size === "normal"
-    });
-    if (this.props.className != null) {
-      classes = classes + " " + this.props.className;
-    }
-    const _this$props = this.props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-    return /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
-      className: classes,
-      type: "text"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "input",
-      onChange: this._handleChange,
-      onFocus: this._handleFocus,
-      onBlur: this._handleBlur,
-      onKeyPress: this._handleBlur,
-      onKeyDown: this._onKeyDown
-      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLInputElement>'.
-      ,
-      onTouchStart: captureScratchpadTouchStart,
-      defaultValue: toNumericString(this.props.value, this.state.format),
-      value: undefined
-    }));
-  }
-  componentDidUpdate(prevProps) {
-    if (!number.equal(this.getValue(), this.props.value)) {
-      this._setValue(this.props.value, this.state.format);
-    }
-  }
-}
-NumberInput.propTypes = {
-  value: PropTypes.number,
-  format: PropTypes.string,
-  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onChange: PropTypes.func.isRequired,
-  onFormatChange: PropTypes.func,
-  checkValidity: PropTypes.func,
-  size: PropTypes.string,
-  label: PropTypes.oneOf(["put your labels outside your inputs!"])
-};
-NumberInput.defaultProps = {
-  value: null,
-  placeholder: null,
-  format: null,
-  onFormatChange: () => null,
-  checkValidity: () => true,
-  useArrowKeys: false
-};
-
 // Type imports
 
 const {
@@ -33935,9 +34627,9 @@ function drawText(ctx, item) {
   if (item.value === null) {
     return;
   }
-  ctx.fillStyle = styles$d.fgColor;
-  ctx.font = styles$d.font;
-  ctx.fillText(item.value, item.pos[0] - styles$d.fontSizePx / 2 + 1, item.pos[1] + styles$d.fontSizePx / 2);
+  ctx.fillStyle = styles$a.fgColor;
+  ctx.font = styles$a.font;
+  ctx.fillText(item.value, item.pos[0] - styles$a.fontSizePx / 2 + 1, item.pos[1] + styles$a.fontSizePx / 2);
 }
 
 /**
@@ -33958,16 +34650,16 @@ function drawText(ctx, item) {
 function drawDoubleLine(ctx, item) {
   // Outer line that forms both of the bond lines.
   let path = new Path2D();
-  ctx.lineWidth = 5 * styles$d.lineWidth;
-  ctx.strokeStyle = styles$d.fgColor;
+  ctx.lineWidth = 5 * styles$a.lineWidth;
+  ctx.strokeStyle = styles$a.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
 
   // Inner white line that separates the two bond lines.
   path = new Path2D();
-  ctx.lineWidth = 3 * styles$d.lineWidth;
-  ctx.strokeStyle = styles$d.bgColor;
+  ctx.lineWidth = 3 * styles$a.lineWidth;
+  ctx.strokeStyle = styles$a.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -33994,16 +34686,16 @@ function drawTripleLine(ctx, item) {
 
   // Outer line that will form the two outer bond lines.
   let path = new Path2D();
-  ctx.lineWidth = 7 * styles$d.lineWidth;
-  ctx.strokeStyle = styles$d.fgColor;
+  ctx.lineWidth = 7 * styles$a.lineWidth;
+  ctx.strokeStyle = styles$a.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
 
   // Middle white line that separates the bonds
   path = new Path2D();
-  ctx.lineWidth = 5 * styles$d.lineWidth;
-  ctx.strokeStyle = styles$d.bgColor;
+  ctx.lineWidth = 5 * styles$a.lineWidth;
+  ctx.strokeStyle = styles$a.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -34025,8 +34717,8 @@ function drawTripleLine(ctx, item) {
  */
 function drawLine(ctx, item) {
   const path = new Path2D();
-  ctx.lineWidth = styles$d.lineWidth;
-  ctx.strokeStyle = styles$d.fgColor;
+  ctx.lineWidth = styles$a.lineWidth;
+  ctx.strokeStyle = styles$a.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -34078,7 +34770,7 @@ function compareElements(item0, item1) {
 function draw(ctx, items) {
   items.sort(compareElements).forEach(drawItem(ctx));
 }
-const styles$d = {
+const styles$a = {
   bgColor: "rgb(255, 255, 255)",
   fgColor: "rgb(0, 0, 0)",
   fontSizePx: 12,
@@ -36640,7 +37332,7 @@ class HighlightRenderer extends React.PureComponent {
     const rects = this.state.cachedHighlightRects;
     return /*#__PURE__*/React.createElement("div", null, rects.map((rect, index) => /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: css(styles$c.highlightRect),
+      className: css(styles$9.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -36659,7 +37351,7 @@ class HighlightRenderer extends React.PureComponent {
     })));
   }
 }
-const styles$c = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -36740,7 +37432,7 @@ class HighlightTooltip extends React.PureComponent {
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
     const content = /*#__PURE__*/React.createElement("div", {
-      className: css(styles$b.tooltipLabel),
+      className: css(styles$8.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -36760,7 +37452,7 @@ class HighlightTooltip extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("div", null)));
   }
 }
-const styles$b = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   tooltipLabel: {
     // Unlike most tooltip contents, we don't want this label to be
     // selectable. Selecting it is not only unhelpful, but dangerous: if
@@ -37312,7 +38004,7 @@ class HighlightableContent extends React.PureComponent {
     //     starting point: https://phabricator.khanacademy.org/D35623?id=170698
     const buildHighlight = r => this._buildHighlight(r);
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.container),
+      className: css(styles$7.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -37333,14 +38025,14 @@ class HighlightableContent extends React.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.content),
+      className: css(styles$7.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$a = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   // We render content with z-index 1, and highlights with z-index 0, so that
   // content will receive the browser's native pointer events. (Highlights
   // have their own magic code to manage hover detection, despite being
@@ -37740,7 +38432,7 @@ class LineHeightMeasurer extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$9.measurer),
+      className: css(styles$6.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
       ref: ref => this._line = ref,
@@ -37748,7 +38440,7 @@ class LineHeightMeasurer extends React.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$9 = StyleSheet.create({
+const styles$6 = StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -39060,7 +39752,7 @@ class PythonProgram extends React.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$8.container
+      style: styles$5.container
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -39072,7 +39764,7 @@ class PythonProgram extends React.Component {
 PythonProgram.defaultProps = {
   height: 400
 };
-const styles$8 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   container: {
     margin: "auto",
     width: "100%"
@@ -39312,129 +40004,6 @@ var Sequence$1 = {
   isLintable: true
 };
 
-const colors = {
-  grayLight: "#aaa",
-  basicBorderColor: "#ccc",
-  white: "#fff"
-};
-const triangleBeforeAfter = {
-  borderBottom: "9px solid transparent",
-  borderTop: "9px solid transparent",
-  content: '" "',
-  height: "0",
-  position: "absolute",
-  top: "0",
-  width: "0"
-};
-const styles$7 = StyleSheet.create({
-  infoTip: {
-    display: "inline-block",
-    marginLeft: "5px",
-    position: "relative"
-  },
-  infoTipContainer: {
-    position: "absolute",
-    top: "-12px",
-    left: "22px",
-    zIndex: 1000
-  },
-  infoTipTriangle: {
-    height: "10px",
-    left: "0",
-    position: "absolute",
-    top: "8px",
-    width: "0",
-    zIndex: 1,
-    ":before": _extends({}, triangleBeforeAfter, {
-      borderRight: "9px solid #bbb",
-      right: "0"
-    }),
-    ":after": _extends({}, triangleBeforeAfter, {
-      borderRight: `9px solid ${colors.white}`,
-      right: "-1px"
-    })
-  },
-  verticalShadow: {
-    border: `1px solid ${colors.basicBorderColor}`,
-    boxShadow: `0 1px 3px ${colors.basicBorderColor}`,
-    borderBottom: `1px solid ${colors.grayLight}`
-  },
-  infoTipContentContainer: {
-    background: colors.white,
-    padding: "5px 10px",
-    width: "240px"
-  }
-});
-const questionMark = "data:image/png;base64," + "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBB" + "ZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/" + "eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+" + "IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2Jl" + "IFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAg" + "ICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5" + "LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9" + "IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHht" + "bG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3Vy" + "Y2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHht" + "cE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2N2M3NTAxYS04YmVlLTQ0M2Mt" + "YmRiNS04OGM2N2IxN2NhYzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJCRTk4" + "Qjc4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5p" + "aWQ6OUJCRTk4QjY4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcDpDcmVhdG9yVG9v" + "bD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRG" + "cm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NGE5ZDI0OTMtODk1NC00OGFkLTlh" + "MTgtZDAwM2MwYWNjNDJlIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY3Yzc1MDFh" + "LThiZWUtNDQzYy1iZGI1LTg4YzY3YjE3Y2FjMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4g" + "PC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqm89uYAAADM" + "SURBVHjaXJA9DoJAEIUH1M4TUHIFsCMGen9OwCGw1YRGW2ntKel0exsojHIBC0ouQAyU" + "viFDstmXfNmZeS+zm7XSNCXRFiRgJf0bXIHixpbhGdxBBJYC1w/xaA424MhNEATkui71" + "fU9KqfEU78UbD9PdbJRlOdae55GmhIP+1NV1TcMwkOM41DSNHvRtMhTHMRVFQW3b6mOL" + "gx99kue5GRp/gIOZuZGvNpTNwjD8oliANU+qqqKu6/TQBdymN57AHjzBT+B6Jx79BRgA" + "vc49kQA4yxgAAAAASUVORK5CYII=";
-class InfoTip$1 extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      hover: false
-    };
-    this.handleMouseEnter = () => {
-      this.setState({
-        hover: true
-      });
-    };
-    this.handleMouseLeave = () => {
-      this.setState({
-        hover: false
-      });
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$7.infoTip)
-    }, /*#__PURE__*/React.createElement("img", {
-      alt: "",
-      width: 10,
-      height: 10,
-      src: questionMark,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave
-    }), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$7.infoTipContainer),
-      style: {
-        display: this.state.hover ? "block" : "none"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$7.infoTipTriangle)
-    }), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$7.verticalShadow, styles$7.infoTipContentContainer)
-    }, this.props.children)));
-  }
-}
-
-/**
- * A wrapper around info-tip/info-tip.jsx that can be rendered on the
- * server without causing a checksum mismatch on the client.
- * (RCSS generates classnames with a randomSuffix, which ensures that any
- * two sets of generated classnames will not match.)
- */
-class InfoTip extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      didMount: false
-    };
-  }
-  componentDidMount() {
-    /* eslint-disable react/no-did-mount-set-state */
-    this.setState({
-      didMount: true
-    });
-    /* eslint-enable react/no-did-mount-set-state */
-  }
-
-  render() {
-    if (this.state.didMount) {
-      return /*#__PURE__*/React.createElement(InfoTip$1, this.props);
-    }
-    return /*#__PURE__*/React.createElement("div", null);
-  }
-}
-
 const {
   assert: assert$1
 } = InteractiveUtil;
@@ -41389,7 +41958,7 @@ const VideoTranscriptLink = props => {
         var _result$data;
         const video = (_result$data = result.data) == null ? void 0 : _result$data.video;
         return /*#__PURE__*/React.createElement(View, {
-          style: styles$6.transcriptLink
+          style: styles$4.transcriptLink
         }, /*#__PURE__*/React.createElement(Text$1, null, video == null ? void 0 : video.title), /*#__PURE__*/React.createElement(Strut, {
           size: 10
         }), /*#__PURE__*/React.createElement(Link, {
@@ -41406,7 +41975,7 @@ const VideoTranscriptLink = props => {
       return /*#__PURE__*/React.createElement(View, null, i18n._("Something went wrong."));
   }
 };
-const styles$6 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   transcriptLink: {
     flexDirection: "row",
     width: "100%",
@@ -41559,7 +42128,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.6.3";
+const libVersion = "19.7.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -41769,7 +42338,7 @@ class HintRenderer extends React.Component {
     const {
       isMobile
     } = apiOptions;
-    const classNames$1 = classNames("hint", !isMobile && "perseus-hint-renderer", isMobile && css(styles$5.newHint), isMobile && lastRendered && css(styles$5.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
+    const classNames$1 = classNames("hint", !isMobile && "perseus-hint-renderer", isMobile && css(styles$3.newHint), isMobile && lastRendered && css(styles$3.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
 
     // TODO(charlie): Allowing `customKeypad` would require that we
     // extend `ItemRenderer` to support nested inputs in the `HintsRenderer`.
@@ -41812,7 +42381,7 @@ class HintRenderer extends React.Component {
 HintRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
-const styles$5 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   newHint: {
     marginBottom: 1.5 * baseUnitPx,
     borderLeftColor: gray97,
@@ -41985,15 +42554,15 @@ class HintsRenderer extends React.Component {
     } = apiOptions;
     const showGetAnotherHint = getAnotherHint && hintsVisible > 0 && hintsVisible < this.props.hints.length;
     const hintRatioCopy = `(${hintsVisible}/${this.props.hints.length})`;
-    const classNames$1 = classNames(this.props.className, apiOptions.isMobile && hintsVisible > 0 && css(styles$4.mobileHintStylesHintsRenderer));
+    const classNames$1 = classNames(this.props.className, apiOptions.isMobile && hintsVisible > 0 && css(styles$2.mobileHintStylesHintsRenderer));
     return /*#__PURE__*/React.createElement("div", {
       className: classNames$1
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$4.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
+      className: css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
     }, i18n._("Hints")), hints, showGetAnotherHint && /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type '{ children: Element[]; rel: string; className: string; onClick: (evt: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
       rel: "button",
-      className: css(styles$4.linkButton, styles$4.getAnotherHintButton, apiOptions.isMobile && styles$4.mobileHintStylesGetAnotherHintButton),
+      className: css(styles$2.linkButton, styles$2.getAnotherHintButton, apiOptions.isMobile && styles$2.mobileHintStylesGetAnotherHintButton),
       onClick: evt => {
         evt.preventDefault();
         evt.stopPropagation();
@@ -42002,9 +42571,9 @@ class HintsRenderer extends React.Component {
         }
       }
     }, /*#__PURE__*/React.createElement("span", {
-      className: css(styles$4.plusText, apiOptions.isMobile && styles$4.mobileHintStylesPlusText)
+      className: css(styles$2.plusText, apiOptions.isMobile && styles$2.mobileHintStylesPlusText)
     }, "+"), /*#__PURE__*/React.createElement("span", {
-      className: css(styles$4.getAnotherHintText)
+      className: css(styles$2.getAnotherHintText)
     }, i18n._("Get another hint"), " ", hintRatioCopy)));
   }
 }
@@ -42012,7 +42581,7 @@ HintsRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
 const hintIndentation = baseUnitPx + hintBorderWidth;
-const styles$4 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
   rendererMargins: {
     marginTop: baseUnitPx
@@ -42419,7 +42988,7 @@ class ServerItemRenderer extends React.Component {
       // mobile hint styles, which are flush to the left.
       // NOTE(charlie): We may still want to apply this
       // padding for desktop exercises.
-      apiOptions.isMobile ? undefined : css(styles$3.hintsContainer)
+      apiOptions.isMobile ? undefined : css(styles$1.hintsContainer)
     }, hintsRenderer)));
   }
 }
@@ -42429,7 +42998,7 @@ ServerItemRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault,
   onRendered: isRendered => {}
 };
-const styles$3 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   hintsContainer: {
     marginLeft: 50
   }
@@ -42563,345 +43132,6 @@ ElementContainer.defaultProps = {
   title: "More"
 };
 
-// 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);
-  }
-  return /*#__PURE__*/React.createElement("button", {
-    className: css(styles$2.hud, _fixedPosition && styles$2.hudFixedPosition, state),
-    onClick: e => {
-      onClick();
-    }
-  }, icon, message);
-};
-const styles$2 = StyleSheet.create({
-  hud: {
-    boxSizing: "border-box",
-    height: 36,
-    padding: "9px 16px",
-    borderRadius: 18,
-    fontFamily: boldFontFamily,
-    fontSize: "15px",
-    lineHeight: "18px",
-    color: white$1,
-    userSelect: "none",
-    borderWidth: 0 // <button> gives us a border by default
-  },
-
-  // We want to render the element in-place in our fixtures, so allow us to
-  // render in the bottom corner in production and in-place in testing.
-  hudFixedPosition: {
-    bottom: 20,
-    position: "fixed",
-    right: 20,
-    zIndex: 1
-  },
-  icon: {
-    width: 24,
-    height: 24,
-    marginRight: 8,
-    marginTop: -3,
-    verticalAlign: "middle"
-  },
-  enabled: {
-    backgroundColor: warningColor,
-    ":hover": {
-      backgroundColor: warningColorHover
-    },
-    ":active": {
-      backgroundColor: warningColorActive
-    }
-  },
-  disabled: {
-    backgroundColor: gray76,
-    ":hover": {
-      backgroundColor: "#a1a5a9" // in between those two grays
-    },
-
-    ":active": {
-      backgroundColor: gray68
-    }
-  }
-});
-
-/**
- * MultiButtonGroup is an aesthetically pleasing group of buttons,
- * which allows multiple buttons to be selected at the same time.
- *
- * NOTE: This component is almost identical to ./button-group.jsx except that
- * this component allows multiple selection!
- */
-class MultiButtonGroup extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.toggleSelect = newValue => {
-      const values = (this.props.values || []).slice(0);
-      const allowEmpty = this.props.allowEmpty;
-      if (values.indexOf(newValue) >= 0 && (values.length > 1 || allowEmpty)) {
-        // If the value is already selected, unselect it
-        values.splice(values.indexOf(newValue), 1);
-      } else {
-        // Otherwise merge with other values and return
-        if (values.indexOf(newValue) < 0) {
-          values.push(newValue);
-        }
-      }
-      this.props.onChange(values);
-    };
-  }
-  focus() {
-    var _ReactDOM$findDOMNode;
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    (_ReactDOM$findDOMNode = ReactDOM.findDOMNode(this)) == null || _ReactDOM$findDOMNode.focus();
-    return true;
-  }
-  render() {
-    const values = this.props.values || [];
-    const buttons = this.props.buttons.map((button, i) => {
-      const selected = values.indexOf(button.value) >= 0;
-      return /*#__PURE__*/React.createElement("button", {
-        title: button.title,
-        type: "button",
-        id: "" + i,
-        key: "" + i,
-        ref: "button" + i,
-        className: css(styles$1.buttonStyle, selected && styles$1.selectedStyle),
-        onClick: () => this.toggleSelect(button.value)
-      }, button.content || "" + button.value);
-    });
-    const outerStyle = {
-      display: "inline-block"
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      style: outerStyle
-    }, buttons);
-  }
-}
-MultiButtonGroup.defaultProps = {
-  values: [],
-  allowEmpty: true
-};
-const styles$1 = StyleSheet.create({
-  buttonStyle: {
-    backgroundColor: "white",
-    border: "1px solid #ccc",
-    borderLeft: "0",
-    cursor: "pointer",
-    margin: "0",
-    padding: "5px 10px",
-    position: "relative",
-    // for hover
-
-    ":first-child": {
-      borderLeft: "1px solid #ccc",
-      borderTopLeftRadius: "3px",
-      borderBottomLeftRadius: "3px"
-    },
-    ":last-child": {
-      borderRight: "1px solid #ccc",
-      borderTopRightRadius: "3px",
-      borderBottomRightRadius: "3px"
-    },
-    ":hover": {
-      backgroundColor: "#ccc"
-    },
-    ":focus": {
-      zIndex: 2
-    }
-  },
-  selectedStyle: {
-    backgroundColor: "#ddd"
-  }
-});
-
-/* eslint-disable @babel/no-invalid-this */
-
-/* A checkbox that syncs its value to props using the
- * renderer's onChange method, and gets the prop name
- * dynamically from its props list
- */
-const PropCheckBox = createReactClass({
-  displayName: "PropCheckBox",
-  propTypes: {
-    labelAlignment: PropTypes.oneOf(["left", "right"])
-  },
-  DEFAULT_PROPS: {
-    label: null,
-    onChange: null,
-    labelAlignment: "left"
-  },
-  getDefaultProps: function () {
-    return this.DEFAULT_PROPS;
-  },
-  propName: function () {
-    const propName = _.find(_.keys(this.props), function (localPropName) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return !_.has(this.DEFAULT_PROPS, localPropName);
-    }, this);
-    if (!propName) {
-      throw new PerseusError("Attempted to create a PropCheckBox with no prop!", Errors.InvalidInput);
-    }
-    return propName;
-  },
-  _labelAlignLeft: function () {
-    return this.props.labelAlignment === "left";
-  },
-  render: function () {
-    const propName = this.propName();
-    return /*#__PURE__*/React.createElement("label", null, this._labelAlignLeft() && this.props.label, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      checked: this.props[propName],
-      onChange: this.toggle
-    }), !this._labelAlignLeft() && this.props.label);
-  },
-  toggle: function () {
-    const propName = this.propName();
-    const changes = {};
-    changes[propName] = !this.props[propName];
-    this.props.onChange(changes);
-  }
-});
-
-const truth = () => true;
-
-/* A minor abstraction on top of NumberInput for ranges
- *
- */
-class RangeInput extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.onChange = (i, newVal) => {
-      const value = this.props.value;
-      if (i === 0) {
-        this.props.onChange([newVal, value[1]]);
-      } else {
-        this.props.onChange([value[0], newVal]);
-      }
-    };
-  }
-  render() {
-    const value = this.props.value;
-    const checkValidity = this.props.checkValidity || truth;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "range-input"
-    }, /*#__PURE__*/React.createElement(NumberInput, _extends({}, this.props, {
-      value: value[0],
-      checkValidity: val => checkValidity([val, value[1]])
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onChange: this.onChange.bind(this, 0),
-      placeholder: this.props.placeholder[0]
-    })), /*#__PURE__*/React.createElement(NumberInput, _extends({}, this.props, {
-      value: value[1],
-      checkValidity: val => checkValidity([value[0], val])
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onChange: this.onChange.bind(this, 1),
-      placeholder: this.props.placeholder[1]
-    })));
-  }
-}
-RangeInput.propTypes = {
-  value: PropTypes.array.isRequired,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.array,
-  checkValidity: PropTypes.func
-};
-RangeInput.defaultProps = {
-  placeholder: [null, null]
-};
-
-var components = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ButtonGroup: ButtonGroup,
-  Graph: Graph,
-  Graphie: Graphie,
-  HUD: HUD,
-  Icon: Icon,
-  InfoTip: InfoTip,
-  InlineIcon: InlineIcon,
-  MathInput: MathInput,
-  MultiButtonGroup: MultiButtonGroup,
-  NumberInput: NumberInput,
-  PropCheckBox: PropCheckBox,
-  RangeInput: RangeInput,
-  SvgImage: SvgImage,
-  TextInput: TextInput,
-  TextListEditor: TextListEditor
-});
-
 const devices = {
   PHONE: "phone",
   TABLET: "tablet",