@khanacademy/perseus 19.6.3 → 19.7.1

package/dist/index.js

@@ -30,11 +30,12 @@ var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var debounce = require('lodash.debounce');
+var mafs = require('mafs');
+var createReactClass = require('create-react-class');
 var Switch = require('@khanacademy/wonder-blocks-switch');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 var reactPopper = require('react-popper');
-var createReactClass = require('create-react-class');
 var Link = require('@khanacademy/wonder-blocks-link');
 var perseusCore = require('@khanacademy/perseus-core');
 
@@ -77,9 +78,9 @@ var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown)
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
-var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
 function _extends() {
@@ -28325,7 +28326,875 @@ class Graph extends React__namespace.Component {
   }
 }
 
-/* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
+const useInteractivePoint = (coords, snaps, range) => mafs.useMovablePoint(coords, {
+  constrain: coord => constrain(coord, snaps, range),
+  color: Color__default["default"].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 = React.useRef(true);
+  React.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 => ({
+    ...current,
+    coords: current.coords ? updateSegmentsArray(current.coords, i, segment) : updateSegmentsArray(segments, i, segment)
+  }));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React__namespace.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Line.Segment, {
+    point1: pt1,
+    point2: pt2
+  }), el1, el2);
+};
+
+const renderLineLabel = (n, _ref) => {
+  let [min, max] = _ref;
+  return 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__namespace.createElement(mafs.Coordinates.Cartesian, {
+  xAxis: axisOptions(props, 0),
+  yAxis: axisOptions(props, 1)
+});
+
+// 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$j.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$j.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$j.enabled;
+    icon = /*#__PURE__*/React__namespace.createElement(VisibleIcon, null);
+  } else {
+    state = styles$j.disabled;
+    icon = /*#__PURE__*/React__namespace.createElement(HiddenIcon, null);
+  }
+  return /*#__PURE__*/React__namespace.createElement("button", {
+    className: aphrodite.css(styles$j.hud, fixedPosition && styles$j.hudFixedPosition, state),
+    onClick: e => {
+      onClick();
+    }
+  }, icon, message);
+};
+const styles$j = aphrodite.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 = aphrodite.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": {
+      ...triangleBeforeAfter,
+      borderRight: "9px solid #bbb",
+      right: "0"
+    },
+    ":after": {
+      ...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__namespace.Component {
+  state = {
+    hover: false
+  };
+  handleMouseEnter = () => {
+    this.setState({
+      hover: true
+    });
+  };
+  handleMouseLeave = () => {
+    this.setState({
+      hover: false
+    });
+  };
+  render() {
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$i.infoTip)
+    }, /*#__PURE__*/React__namespace.createElement("img", {
+      alt: "",
+      width: 10,
+      height: 10,
+      src: questionMark,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave
+    }), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$i.infoTipContainer),
+      style: {
+        display: this.state.hover ? "block" : "none"
+      }
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$i.infoTipTriangle)
+    }), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.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__namespace.Component {
+  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__namespace.createElement(InfoTip$1, this.props);
+    }
+    return /*#__PURE__*/React__namespace.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__namespace.Component {
+  static defaultProps = {
+    values: [],
+    allowEmpty: true
+  };
+  focus() {
+    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+    ReactDOM__namespace.findDOMNode(this)?.focus();
+    return true;
+  }
+  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);
+  };
+  render() {
+    const values = this.props.values || [];
+    const buttons = this.props.buttons.map((button, i) => {
+      const selected = values.indexOf(button.value) >= 0;
+      return /*#__PURE__*/React__namespace.createElement("button", {
+        title: button.title,
+        type: "button",
+        id: "" + i,
+        key: "" + i,
+        ref: "button" + i,
+        className: aphrodite.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__namespace.createElement("div", {
+      style: outerStyle
+    }, buttons);
+  }
+}
+const styles$h = aphrodite.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 {
+  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__namespace.Component {
+  static propTypes = {
+    value: PropTypes__default["default"].number,
+    format: PropTypes__default["default"].string,
+    placeholder: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+    onChange: PropTypes__default["default"].func.isRequired,
+    onFormatChange: PropTypes__default["default"].func,
+    checkValidity: PropTypes__default["default"].func,
+    size: PropTypes__default["default"].string,
+    label: PropTypes__default["default"].oneOf(["put your labels outside your inputs!"])
+  };
+  static defaultProps = {
+    value: null,
+    placeholder: null,
+    format: null,
+    onFormatChange: () => null,
+    checkValidity: () => true,
+    useArrowKeys: false
+  };
+  state = {
+    format: this.props.format
+  };
+  render() {
+    let classes = classNames__default["default"]({
+      "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 {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onFormatChange,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      checkValidity,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      useArrowKeys,
+      ...restProps
+    } = this.props;
+    return /*#__PURE__*/React__namespace.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 (!kmath.number.equal(this.getValue(), this.props.value)) {
+      this._setValue(this.props.value, this.state.format);
+    }
+  }
+
+  /* Return the current "value" of this input
+   * If empty, it returns the placeholder (if it is a number) or null
+   */
+  getValue = () => {
+    return this.parseInputValue(
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
+    ReactDOM__default["default"].findDOMNode(this.refs.input).value // eslint-disable-line react/no-string-refs
+    );
+  };
+
+  /* Return the current string value of this input */
+  getStringValue = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
+    return ReactDOM__default["default"].findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
+  };
+
+  parseInputValue = value => {
+    if (value === "") {
+      const placeholder = this.props.placeholder;
+      return ___default["default"].isFinite(placeholder) ? +placeholder : null;
+    }
+    const result = firstNumericalParse(value);
+    return ___default["default"].isFinite(result) ? result : this.props.value;
+  };
+
+  /* Set text input focus to this input */
+  focus = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+    ReactDOM__default["default"].findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+    this._handleFocus();
+  };
+  blur = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
+    ReactDOM__default["default"].findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
+    this._handleBlur();
+  };
+  setSelectionRange = (selectionStart, selectionEnd) => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
+    ReactDOM__default["default"].findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
+  };
+  getSelectionStart = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
+    return ReactDOM__default["default"].findDOMNode(this).selectionStart;
+  };
+  getSelectionEnd = () => {
+    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
+    return ReactDOM__default["default"].findDOMNode(this).selectionEnd;
+  };
+  _checkValidity = value => {
+    if (value == null) {
+      return true;
+    }
+    const val = firstNumericalParse(value);
+    const checkValidity = this.props.checkValidity;
+    return ___default["default"].isFinite(val) && checkValidity(val);
+  };
+  _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
+      });
+    }
+  };
+  _handleFocus = () => {
+    if (this.props.onFocus) {
+      this.props.onFocus();
+    }
+  };
+  _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();
+    }
+  };
+  _onKeyDown = e => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+    if (!this.props.useArrowKeys || !___default["default"].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);
+    }
+  };
+  _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'.
+    $__default["default"](ReactDOM__default["default"].findDOMNode(this.refs.input)).val(toNumericString(val, format));
+  };
+}
+
+/* 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__default["default"]({
+  displayName: "PropCheckBox",
+  propTypes: {
+    labelAlignment: PropTypes__default["default"].oneOf(["left", "right"])
+  },
+  DEFAULT_PROPS: {
+    label: null,
+    onChange: null,
+    labelAlignment: "left"
+  },
+  getDefaultProps: function () {
+    return this.DEFAULT_PROPS;
+  },
+  propName: function () {
+    const propName = ___default["default"].find(___default["default"].keys(this.props), function (localPropName) {
+      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      return !___default["default"].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__namespace.createElement("label", null, this._labelAlignLeft() && this.props.label, /*#__PURE__*/React__namespace.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__namespace.Component {
+  static propTypes = {
+    value: PropTypes__default["default"].array.isRequired,
+    onChange: PropTypes__default["default"].func.isRequired,
+    placeholder: PropTypes__default["default"].array,
+    checkValidity: PropTypes__default["default"].func
+  };
+  static defaultProps = {
+    placeholder: [null, null]
+  };
+  render() {
+    const value = this.props.value;
+    const checkValidity = this.props.checkValidity || truth;
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "range-input"
+    }, /*#__PURE__*/React__namespace.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__namespace.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]
+    })));
+  }
+  onChange = (i, newVal) => {
+    const value = this.props.value;
+    if (i === 0) {
+      this.props.onChange([newVal, value[1]]);
+    } else {
+      this.props.onChange([value[0], newVal]);
+    }
+  };
+}
+
+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 ?? {};
+  if (url && typeof url === "string") {
+    const scale = box[0] / interactiveSizes$1.defaultBoxSize;
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0
+      }
+    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
+      let {
+        setAssetStatus
+      } = _ref;
+      return /*#__PURE__*/React__namespace.createElement(SvgImage, {
+        src: url,
+        width: width,
+        height: height,
+        scale: scale,
+        responsive: false,
+        setAssetStatus: setAssetStatus,
+        alt: ""
+      });
+    }));
+  }
+  return null;
+};
+
+const renderGraph = props => {
+  const {
+    graph,
+    ...rest
+  } = props;
+  switch (graph.type) {
+    case "segment":
+      return /*#__PURE__*/React__namespace.createElement(SegmentGraph, _extends({}, rest, {
+        graph: graph,
+        onGraphChange: props.onGraphChange
+      }));
+  }
+};
+const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+  // Storing the gradable state in a ref so that it can be updated without
+  // causing a re-render.
+  const graphRef = React__namespace.useRef(props.graph);
+  const handleGraphUpdate = callback => {
+    graphRef.current = callback(graphRef.current);
+  };
+  React__namespace.useImperativeHandle(ref, () => ({
+    getUserInput: () => graphRef.current
+  }));
+  const [width, height] = props.box;
+  const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      width: props.backgroundImage?.width ?? width,
+      height: props.backgroundImage?.height ?? height,
+      position: "relative"
+    }
+  }, legacyGrid, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0
+    }
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+    viewBox: {
+      x: props.range[0],
+      y: props.range[1],
+      padding: 0
+    },
+    pan: false,
+    zoom: false,
+    width: width,
+    height: height
+  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), renderGraph({
+    ...props,
+    onGraphChange: handleGraphUpdate
+  }))));
+});
+
 const {
   DeprecationMixin
 } = Util;
@@ -28402,6 +29271,7 @@ class InteractiveGraph extends React__namespace.Component {
       type: "linear"
     }
   };
+  mafsRef = /*#__PURE__*/React__namespace.createRef();
   state = {
     shouldShowInstructions: _getShouldShowInstructions(this.props)
   };
@@ -28411,9 +29281,11 @@ class InteractiveGraph extends React__namespace.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) {
     if (this.isClickToAddPoints() !== this.isClickToAddPoints(nextProps)) {
@@ -29510,16 +30382,28 @@ class InteractiveGraph extends React__namespace.Component {
       graph: graph
     });
   };
-  getUserInput = () => {
-    return InteractiveGraph.getUserInputFromProps(this.props);
-  };
-  simpleValidate = rubric => {
-    return InteractiveGraph.validate(this.getUserInput(), rubric, this);
-  };
+  getUserInput = () => this.mafsRef.current?.getUserInput?.() ?? InteractiveGraph.getUserInputFromProps(this.props);
+  simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
   focus = $__default["default"].noop;
+
+  // const segment: boolean = useFeatureIsOn("mafs-segment-graph");
+  // <Renderer apiOptions={{flags: {mafs: {segment}}}}
   render() {
     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.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
+      return /*#__PURE__*/React__namespace.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__namespace._("Click to add points");
@@ -29533,8 +30417,6 @@ class InteractiveGraph extends React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget " + "perseus-widget-interactive-graph",
@@ -30804,7 +31686,7 @@ var globalConstants = /*#__PURE__*/Object.freeze({
   pureLgMax: pureLgMax
 });
 
-const colors$1 = {
+const colors = {
   white: "#FFFFFF",
   gray98: "#FAFAFA",
   gray97: "#F6F7F7",
@@ -30864,7 +31746,7 @@ const colors$1 = {
 };
 const borderRadius = 4;
 const breadcrumbStyles = {
-  color: colors$1.breadcrumbs,
+  color: colors.breadcrumbs,
   fontFamily: "inherit",
   fontSize: 15,
   fontWeight: "bold",
@@ -30934,14 +31816,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",
@@ -30949,7 +31831,7 @@ const typography = {
   },
   // Accent headings
   accentHeading: {
-    color: colors$1.gray68,
+    color: colors.gray68,
     fontFamily: "inherit",
     fontSize: 15,
     fontWeight: "bold",
@@ -31057,7 +31939,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,
@@ -31079,7 +31961,7 @@ const typography = {
 
 var globalStyles = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  colors: colors$1,
+  colors: colors,
   borderRadius: borderRadius,
   fonts: fonts,
   typography: typography
@@ -31144,7 +32026,7 @@ const HideAnswersToggle = props => {
   const switchId = idFactory.get("hide-answers-toggle");
   const labelId = idFactory.get("hide-answers-label");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$j.switchWrapper
+    style: styles$g.switchWrapper
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -31156,7 +32038,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -31211,14 +32093,14 @@ 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__namespace.createElement(Renderer, {
       content: answerString,
       inline: true
     }));
   });
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -31272,25 +32154,25 @@ class Marker extends React__namespace.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 = {
         ...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 = {
         ...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__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$h.markerIcon, iconStyles],
+      style: [styles$e.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React__namespace.createElement(Icon, args));
   }
@@ -31311,7 +32193,7 @@ class Marker extends React__namespace.Component {
     const markerDisabled = showCorrectness === "correct";
     const active = hovered || focused;
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace._("Correct!") : label
@@ -31326,7 +32208,7 @@ class Marker extends React__namespace.Component {
     }));
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: Color__default["default"].white,
@@ -31903,13 +32785,13 @@ class LabelImage extends React__namespace.Component {
     const promptString = isMobile ? multipleAnswers ? i18n__namespace._("Tap each dot on the image to select all answers that apply.") : i18n__namespace._("Tap each dot on the image to select an answer.") : multipleAnswers ? i18n__namespace._("Click each dot on the image to select all answers that apply.") : i18n__namespace._("Click each dot on the image to select an answer.");
     const choicesString = i18n__namespace._("Choices:");
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$g.instructions))
+      className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$d.instructions))
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$g.instructionsCaption)
+      className: aphrodite.css(styles$d.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$g.instructionsChoices)
+      className: aphrodite.css(styles$d.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$g.instructionsChoice),
+      className: aphrodite.css(styles$d.instructionsChoice),
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: choice
@@ -31926,20 +32808,20 @@ class LabelImage extends React__namespace.Component {
       activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$g.markersCanvas),
+      className: aphrodite.css(styles$d.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$g.imageContainer,
+      className: aphrodite.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__namespace.createElement(context$1.Consumer, null, _ref3 => {
       let {
         setAssetStatus
@@ -31965,7 +32847,7 @@ class LabelImage extends React__namespace.Component {
     }));
   }
 }
-const styles$g = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -32326,7 +33208,7 @@ class Placeholder extends React__namespace.Component {
     const {
       layout
     } = this.props;
-    const className = aphrodite.css(styles$f.card, styles$f.placeholder, layout === Layout.HORIZONTAL && styles$f.horizontalCard);
+    const className = aphrodite.css(styles$c.card, styles$c.placeholder, layout === Layout.HORIZONTAL && styles$c.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -32424,7 +33306,7 @@ class Draggable extends React__namespace.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 = aphrodite.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 = aphrodite.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";
     }
@@ -32724,7 +33606,7 @@ class Sortable extends React__namespace.Component {
     } = this.props;
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. See sortable.less for details.
-    const className = aphrodite.css(styles$f.sortable) + " perseus-sortable";
+    const className = aphrodite.css(styles$c.sortable) + " perseus-sortable";
     const syncWidth = this.props.constraints?.width || layout === Layout.VERTICAL;
     const syncHeight = this.props.constraints?.height || layout === Layout.HORIZONTAL;
     ___default["default"].each(this.state.items, function (item, i, items) {
@@ -32955,7 +33837,7 @@ class Sortable extends React__namespace.Component {
     return ___default["default"].pluck(this.state.items, "option");
   }
 }
-const styles$f = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -33083,23 +33965,23 @@ class Matcher extends React__namespace.Component {
     };
     const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
     return /*#__PURE__*/React__namespace.createElement("table", {
-      className: aphrodite.css(styles$e.widget) + " " + HACKY_CSS_CLASSNAME
+      className: aphrodite.css(styles$b.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React__namespace.createElement("tbody", null, showLabels && /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$e.row)
+      className: aphrodite.css(styles$b.row)
     }, /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$e.column, styles$e.columnLabel)
+      className: aphrodite.css(styles$b.column, styles$b.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext
     })), /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$e.column, styles$e.columnRight, styles$e.columnLabel)
+      className: aphrodite.css(styles$b.column, styles$b.columnRight, styles$b.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext
     }))), /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$e.row)
+      className: aphrodite.css(styles$b.row)
     }, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$e.column)
+      className: aphrodite.css(styles$b.column)
     }, /*#__PURE__*/React__namespace.createElement(Sortable, {
       options: left,
       layout: Layout.VERTICAL,
@@ -33114,7 +33996,7 @@ class Matcher extends React__namespace.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$e.column, styles$e.columnRight)
+      className: aphrodite.css(styles$b.column, styles$b.columnRight)
     }, /*#__PURE__*/React__namespace.createElement(Sortable
     // @ts-expect-error - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
     , {
@@ -33200,7 +34082,7 @@ ___default["default"].extend(Matcher, {
 });
 const padding = 5;
 const border = "1px solid #444";
-const styles$e = aphrodite.StyleSheet.create({
+const styles$b = aphrodite.StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -33233,204 +34115,6 @@ var Matcher$1 = {
   isLintable: true
 };
 
-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__namespace.Component {
-  static propTypes = {
-    value: PropTypes__default["default"].number,
-    format: PropTypes__default["default"].string,
-    placeholder: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-    onChange: PropTypes__default["default"].func.isRequired,
-    onFormatChange: PropTypes__default["default"].func,
-    checkValidity: PropTypes__default["default"].func,
-    size: PropTypes__default["default"].string,
-    label: PropTypes__default["default"].oneOf(["put your labels outside your inputs!"])
-  };
-  static defaultProps = {
-    value: null,
-    placeholder: null,
-    format: null,
-    onFormatChange: () => null,
-    checkValidity: () => true,
-    useArrowKeys: false
-  };
-  state = {
-    format: this.props.format
-  };
-  render() {
-    let classes = classNames__default["default"]({
-      "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 {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onFormatChange,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      checkValidity,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      useArrowKeys,
-      ...restProps
-    } = this.props;
-    return /*#__PURE__*/React__namespace.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 (!kmath.number.equal(this.getValue(), this.props.value)) {
-      this._setValue(this.props.value, this.state.format);
-    }
-  }
-
-  /* Return the current "value" of this input
-   * If empty, it returns the placeholder (if it is a number) or null
-   */
-  getValue = () => {
-    return this.parseInputValue(
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this.refs.input).value // eslint-disable-line react/no-string-refs
-    );
-  };
-
-  /* Return the current string value of this input */
-  getStringValue = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
-  };
-
-  parseInputValue = value => {
-    if (value === "") {
-      const placeholder = this.props.placeholder;
-      return ___default["default"].isFinite(placeholder) ? +placeholder : null;
-    }
-    const result = firstNumericalParse(value);
-    return ___default["default"].isFinite(result) ? result : this.props.value;
-  };
-
-  /* Set text input focus to this input */
-  focus = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
-    this._handleFocus();
-  };
-  blur = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
-    this._handleBlur();
-  };
-  setSelectionRange = (selectionStart, selectionEnd) => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
-  };
-  getSelectionStart = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionStart;
-  };
-  getSelectionEnd = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionEnd;
-  };
-  _checkValidity = value => {
-    if (value == null) {
-      return true;
-    }
-    const val = firstNumericalParse(value);
-    const checkValidity = this.props.checkValidity;
-    return ___default["default"].isFinite(val) && checkValidity(val);
-  };
-  _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
-      });
-    }
-  };
-  _handleFocus = () => {
-    if (this.props.onFocus) {
-      this.props.onFocus();
-    }
-  };
-  _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();
-    }
-  };
-  _onKeyDown = e => {
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(e);
-    }
-    if (!this.props.useArrowKeys || !___default["default"].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);
-    }
-  };
-  _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'.
-    $__default["default"](ReactDOM__default["default"].findDOMNode(this.refs.input)).val(toNumericString(val, format));
-  };
-}
-
 // Type imports
 
 const {
@@ -34073,9 +34757,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);
 }
 
 /**
@@ -34096,16 +34780,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);
@@ -34132,16 +34816,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);
@@ -34163,8 +34847,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);
@@ -34216,7 +34900,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,
@@ -36780,7 +37464,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
     const rects = this.state.cachedHighlightRects;
     return /*#__PURE__*/React__namespace.createElement("div", null, rects.map((rect, index) => /*#__PURE__*/React__namespace.createElement("div", {
       key: index,
-      className: aphrodite.css(styles$c.highlightRect),
+      className: aphrodite.css(styles$9.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -36799,7 +37483,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
     })));
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -36880,7 +37564,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
     const content = /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$b.tooltipLabel),
+      className: aphrodite.css(styles$8.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -36900,7 +37584,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
     }, /*#__PURE__*/React__namespace.createElement("div", null)));
   }
 }
-const styles$b = aphrodite.StyleSheet.create({
+const styles$8 = aphrodite.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
@@ -37458,7 +38142,7 @@ class HighlightableContent extends React__namespace.PureComponent {
     //     starting point: https://phabricator.khanacademy.org/D35623?id=170698
     const buildHighlight = r => this._buildHighlight(r);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$a.container),
+      className: aphrodite.css(styles$7.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React__namespace.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React__namespace.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -37479,14 +38163,14 @@ class HighlightableContent extends React__namespace.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$a.content),
+      className: aphrodite.css(styles$7.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React__namespace.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$a = aphrodite.StyleSheet.create({
+const styles$7 = aphrodite.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
@@ -37882,7 +38566,7 @@ class LineHeightMeasurer extends React__namespace.Component {
   }
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$9.measurer),
+      className: aphrodite.css(styles$6.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       ref: ref => this._line = ref,
@@ -37890,7 +38574,7 @@ class LineHeightMeasurer extends React__namespace.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$9 = aphrodite.StyleSheet.create({
+const styles$6 = aphrodite.StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -39202,7 +39886,7 @@ class PythonProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$8.container
+      style: styles$5.container
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -39211,7 +39895,7 @@ class PythonProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$5 = aphrodite.StyleSheet.create({
   container: {
     margin: "auto",
     width: "100%"
@@ -39448,125 +40132,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 = aphrodite.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": {
-      ...triangleBeforeAfter,
-      borderRight: "9px solid #bbb",
-      right: "0"
-    },
-    ":after": {
-      ...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__namespace.Component {
-  state = {
-    hover: false
-  };
-  handleMouseEnter = () => {
-    this.setState({
-      hover: true
-    });
-  };
-  handleMouseLeave = () => {
-    this.setState({
-      hover: false
-    });
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$7.infoTip)
-    }, /*#__PURE__*/React__namespace.createElement("img", {
-      alt: "",
-      width: 10,
-      height: 10,
-      src: questionMark,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$7.infoTipContainer),
-      style: {
-        display: this.state.hover ? "block" : "none"
-      }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$7.infoTipTriangle)
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.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__namespace.Component {
-  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__namespace.createElement(InfoTip$1, this.props);
-    }
-    return /*#__PURE__*/React__namespace.createElement("div", null);
-  }
-}
-
 /* eslint-disable @typescript-eslint/no-unused-vars, react/no-unsafe, react/sort-comp */
 const {
   assert: assert$1
@@ -41524,7 +42089,7 @@ const VideoTranscriptLink = props => {
       {
         const video = result.data?.video;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$6.transcriptLink
+          style: styles$4.transcriptLink
         }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.Text, null, video?.title), /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
           size: 10
         }), /*#__PURE__*/React__namespace.createElement(Link__default["default"], {
@@ -41541,7 +42106,7 @@ const VideoTranscriptLink = props => {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, i18n__namespace._("Something went wrong."));
   }
 };
-const styles$6 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   transcriptLink: {
     flexDirection: "row",
     width: "100%",
@@ -41697,7 +42262,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -41910,7 +42475,7 @@ class HintRenderer extends React__namespace.Component {
     const {
       isMobile
     } = apiOptions;
-    const classNames = classNames__default["default"]("hint", !isMobile && "perseus-hint-renderer", isMobile && aphrodite.css(styles$5.newHint), isMobile && lastRendered && aphrodite.css(styles$5.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
+    const classNames = classNames__default["default"]("hint", !isMobile && "perseus-hint-renderer", isMobile && aphrodite.css(styles$3.newHint), isMobile && lastRendered && aphrodite.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`.
@@ -41951,7 +42516,7 @@ class HintRenderer extends React__namespace.Component {
     );
   }
 }
-const styles$5 = aphrodite.StyleSheet.create({
+const styles$3 = aphrodite.StyleSheet.create({
   newHint: {
     marginBottom: 1.5 * baseUnitPx,
     borderLeftColor: gray97,
@@ -42128,15 +42693,15 @@ class HintsRenderer extends React__namespace.Component {
     } = apiOptions;
     const showGetAnotherHint = getAnotherHint && hintsVisible > 0 && hintsVisible < this.props.hints.length;
     const hintRatioCopy = `(${hintsVisible}/${this.props.hints.length})`;
-    const classNames = classNames__default["default"](this.props.className, apiOptions.isMobile && hintsVisible > 0 && aphrodite.css(styles$4.mobileHintStylesHintsRenderer));
+    const classNames = classNames__default["default"](this.props.className, apiOptions.isMobile && hintsVisible > 0 && aphrodite.css(styles$2.mobileHintStylesHintsRenderer));
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classNames
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$4.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
+      className: aphrodite.css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
     }, i18n__namespace._("Hints")), hints, showGetAnotherHint && /*#__PURE__*/React__namespace.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: aphrodite.css(styles$4.linkButton, styles$4.getAnotherHintButton, apiOptions.isMobile && styles$4.mobileHintStylesGetAnotherHintButton),
+      className: aphrodite.css(styles$2.linkButton, styles$2.getAnotherHintButton, apiOptions.isMobile && styles$2.mobileHintStylesGetAnotherHintButton),
       onClick: evt => {
         evt.preventDefault();
         evt.stopPropagation();
@@ -42145,14 +42710,14 @@ class HintsRenderer extends React__namespace.Component {
         }
       }
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$4.plusText, apiOptions.isMobile && styles$4.mobileHintStylesPlusText)
+      className: aphrodite.css(styles$2.plusText, apiOptions.isMobile && styles$2.mobileHintStylesPlusText)
     }, "+"), /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$4.getAnotherHintText)
+      className: aphrodite.css(styles$2.getAnotherHintText)
     }, i18n__namespace._("Get another hint"), " ", hintRatioCopy)));
   }
 }
 const hintIndentation = baseUnitPx + hintBorderWidth;
-const styles$4 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
   rendererMargins: {
     marginTop: baseUnitPx
@@ -42564,11 +43129,11 @@ class ServerItemRenderer extends React__namespace.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 : aphrodite.css(styles$3.hintsContainer)
+      apiOptions.isMobile ? undefined : aphrodite.css(styles$1.hintsContainer)
     }, hintsRenderer)));
   }
 }
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   hintsContainer: {
     marginLeft: 50
   }
@@ -42705,339 +43270,6 @@ class ElementContainer extends React__namespace.Component {
   }
 }
 
-// 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);
-  }
-  return /*#__PURE__*/React__namespace.createElement("button", {
-    className: aphrodite.css(styles$2.hud, fixedPosition && styles$2.hudFixedPosition, state),
-    onClick: e => {
-      onClick();
-    }
-  }, icon, message);
-};
-const styles$2 = aphrodite.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__namespace.Component {
-  static defaultProps = {
-    values: [],
-    allowEmpty: true
-  };
-  focus() {
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__namespace.findDOMNode(this)?.focus();
-    return true;
-  }
-  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);
-  };
-  render() {
-    const values = this.props.values || [];
-    const buttons = this.props.buttons.map((button, i) => {
-      const selected = values.indexOf(button.value) >= 0;
-      return /*#__PURE__*/React__namespace.createElement("button", {
-        title: button.title,
-        type: "button",
-        id: "" + i,
-        key: "" + i,
-        ref: "button" + i,
-        className: aphrodite.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__namespace.createElement("div", {
-      style: outerStyle
-    }, buttons);
-  }
-}
-const styles$1 = aphrodite.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__default["default"]({
-  displayName: "PropCheckBox",
-  propTypes: {
-    labelAlignment: PropTypes__default["default"].oneOf(["left", "right"])
-  },
-  DEFAULT_PROPS: {
-    label: null,
-    onChange: null,
-    labelAlignment: "left"
-  },
-  getDefaultProps: function () {
-    return this.DEFAULT_PROPS;
-  },
-  propName: function () {
-    const propName = ___default["default"].find(___default["default"].keys(this.props), function (localPropName) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return !___default["default"].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__namespace.createElement("label", null, this._labelAlignLeft() && this.props.label, /*#__PURE__*/React__namespace.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__namespace.Component {
-  static propTypes = {
-    value: PropTypes__default["default"].array.isRequired,
-    onChange: PropTypes__default["default"].func.isRequired,
-    placeholder: PropTypes__default["default"].array,
-    checkValidity: PropTypes__default["default"].func
-  };
-  static defaultProps = {
-    placeholder: [null, null]
-  };
-  render() {
-    const value = this.props.value;
-    const checkValidity = this.props.checkValidity || truth;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "range-input"
-    }, /*#__PURE__*/React__namespace.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__namespace.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]
-    })));
-  }
-  onChange = (i, newVal) => {
-    const value = this.props.value;
-    if (i === 0) {
-      this.props.onChange([newVal, value[1]]);
-    } else {
-      this.props.onChange([value[0], newVal]);
-    }
-  };
-}
-
-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",