@khanacademy/perseus 19.1.9 → 19.2.1

package/dist/es/index.js

@@ -244,7 +244,7 @@ class MathInput extends React.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles$B.outerWrapper, this.state.focused && styles$B.wrapperFocused, this.props.hasError && styles$B.wrapperError]
+      style: [styles$C.outerWrapper, this.state.focused && styles$C.wrapperFocused, this.props.hasError && styles$C.wrapperError]
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",
@@ -277,7 +277,7 @@ class MathInput extends React.Component {
         var _this$props$keypadBut, _this$props;
         return /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$B.popoverContent
+          style: styles$C.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
@@ -321,9 +321,9 @@ const MathInputIcon = ({
       color = Color.offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$B.iconActive : styles$B.iconInactive;
+  const dynamicClass = active || focused ? styles$C.iconActive : styles$C.iconInactive;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$B.iconContainer, dynamicClass]
+    style: [styles$C.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -368,7 +368,7 @@ const inputFocused = {
   borderColor: Color.blue,
   margin: -1
 };
-const styles$B = StyleSheet.create({
+const styles$C = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -2394,6 +2394,7 @@ ExpressionWithDependencies.getOneCorrectAnswerFromRubric = Expression.getOneCorr
 var Expression$1 = {
   name: "expression",
   displayName: "Expression / Equation",
+  accessible: true,
   defaultAlignment: "inline-block",
   widget: ExpressionWithDependencies,
   transform: widgetOptions => {
@@ -10202,89 +10203,49 @@ const GraphUtils = {
   }
 })($, window, document);
 
-/**
- * A work-in-progress of _ methods for objects.
- * That is, they take an object as a parameter,
- * and return an object instead of an array.
- *
- * TODO(aria): Move this out of interactive2
- */
-
-/**
- * Does a pluck on keys inside objects in an object
- *
- * Ex:
- * tools = {
- *     translation: {
- *         enabled: true
- *     },
- *     rotation: {
- *         enabled: false
- *     }
- * };
- * pluckObject(tools, "enabled") returns {
- *     translation: true
- *     rotation: false
- * }
- */
-const pluck = function pluck(table, subKey) {
-  return _.object(_.map(table, function (value, key) {
-    return [key, value[subKey]];
-  }));
-};
-
-/**
- * Maps an object to an object
- *
- * > mapObject({a: '1', b: '2'}, (value, key) => {
- *       return value + 1;
- *   });
- * {a: 2, b: 3}
- */
-const mapObject$2 = function mapObject(obj, lambda) {
-  const result = {};
-  _.each(_.keys(obj), function (key) {
-    // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
-    result[key] = lambda(obj[key], key);
-  });
-  return result;
-};
+// Given `coord` and `angle`, find the point where a line extended
+// from `coord` in the direction of `angle` would be clipped by the
+// edge of the graphie canvas.
+const getClipPoint = function getClipPoint(graph, coord, angle) {
+  // Actually put the arrowheads 4px from the edge so they have
+  // a bit of room
+  const xExtent = graph.range[0][1] - graph.range[0][0];
+  const yExtent = graph.range[1][1] - graph.range[1][0];
 
-/**
- * Maps an array to an object
- *
- * > mapObjectFromArray(['a', 'b'], function(elem) {
- *       return elem + elem;
- *   });
- * {a: 'aa', b: 'bb'}
- */
-const mapObjectFromArray$1 = function mapObjectFromArray(arr, lambda) {
-  const result = {};
-  _.each(arr, function (elem) {
-    result[elem] = lambda(elem);
-  });
-  return result;
-};
-var objective_ = {
-  pluck: pluck,
-  mapObject: mapObject$2,
-  mapObjectFromArray: mapObjectFromArray$1
+  // shoot a point off into the distance ...
+  const distance = xExtent + yExtent;
+  // we need to scale the point according to the scale of the axes
+  const angleVec = graph.unscaleVector(vector$1.cartFromPolarDeg(1, angle));
+  const distVec = vector$1.scale(vector$1.normalize(angleVec), distance);
+  const farCoord = vector$1.add(coord, distVec);
+  const scaledAngle = vector$1.polarDegFromCart(angleVec)[1];
+  // ... and then bring it back
+  const clipPoint = graph.constrainToBoundsOnAngle(farCoord, 4, scaledAngle * Math.PI / 180);
+  return clipPoint;
 };
 
 /* eslint-disable @babel/no-invalid-this */
 
 /*
- * These functions, when called on the wrapped object, simply pass the
+ * attr() and animate() simply pass the
  * arguments to the underlying Raphael object.
  */
-const PASS_TO_RAPHAEL = ["attr", "animate"];
-const WrappedDefaults = _.extend({
-  transform: function (transformation) {
+
+class WrappedDrawing {
+  constructor(graphie, initialPoint) {
+    this.graphie = void 0;
+    this.wrapper = void 0;
+    this.visibleShape = void 0;
+    this.initialPoint = void 0;
+    this.graphie = graphie;
+    this.initialPoint = initialPoint;
+  }
+  transform(transformation) {
     const prefixedTransform = InteractiveUtil.getPrefixedTransform();
     // @ts-expect-error - TS2538 - Type 'null' cannot be used as an index type. | TS2538 - Type 'undefined' cannot be used as an index type.
     this.wrapper.style[prefixedTransform] = transformation;
-  },
-  toFront: function () {
+  }
+  toFront() {
     const parentNode = this.wrapper.parentNode;
     // TODO(emily): Sometimes, we call `.remove()` but then hold a
     // reference to this object, and sometimes call `.toFront` on it.
@@ -10293,152 +10254,214 @@ const WrappedDefaults = _.extend({
     if (parentNode) {
       parentNode.appendChild(this.wrapper);
     }
-  },
-  toBack: function () {
+  }
+  toBack() {
     const parentNode = this.wrapper.parentNode;
-    if (parentNode.firstChild !== this.wrapper) {
+    if (parentNode != null && parentNode.firstChild !== this.wrapper) {
       parentNode.insertBefore(this.wrapper, parentNode.firstChild);
     }
-  },
-  remove: function () {
+  }
+  remove() {
     this.visibleShape.remove();
     $(this.wrapper).remove();
-  },
-  getMouseTarget: function () {
+  }
+  getMouseTarget() {
     return this.visibleShape[0];
-  },
-  moveTo: function (point) {
+  }
+  moveTo(point) {
     const delta = vector$1.subtract(this.graphie.scalePoint(point), this.graphie.scalePoint(this.initialPoint));
     const do3dTransform = InteractiveUtil.getCanUse3dTransform();
     const transformation = "translateX(" + delta[0] + "px) " + "translateY(" + delta[1] + "px)" + (do3dTransform ? " translateZ(0)" : "");
     this.transform(transformation);
-  },
-  hide: function () {
+  }
+  hide() {
     this.visibleShape.hide();
-  },
-  show: function () {
+  }
+  show() {
     this.visibleShape.show();
   }
-}, objective_.mapObjectFromArray(PASS_TO_RAPHAEL, function (attribute) {
-  return function (...args) {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.visibleShape[attribute](...args);
-  };
-}));
+  attr(...args) {
+    this.visibleShape.attr(...args);
+  }
+  animate(...args) {
+    this.visibleShape.animate(...args);
+  }
+}
 
 const DEFAULT_OPTIONS$2 = {
-  maxScale: 1,
-  mouselayer: false,
-  shadow: false,
-  disableMouseEventsOnWrapper: false
+  center: null,
+  // gets ignored in `graphie.fixedPath` if `null`
+  createPath: null,
+  // gets defaulted in `graphie.fixedPath` if `null`
+  mouselayer: false
 };
-const WrappedEllipse = function WrappedEllipse(graphie, center, radii, options) {
-  options = _.extend({}, DEFAULT_OPTIONS$2, options);
-
-  // Add `wrapper`, `visibleShape`, and remaining properties.
-  const fixedEllipse = graphie.fixedEllipse(center, radii, options.maxScale, options.padding);
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  _.extend(this, fixedEllipse, {
-    graphie: graphie,
-    initialPoint: center
-  });
-  if (options.interactiveKindForTesting) {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.wrapper.setAttribute("data-interactive-kind-for-testing", options.interactiveKindForTesting);
+class WrappedPath extends WrappedDrawing {
+  constructor(graphie, points, options) {
+    const initialPoint = graphie.scalePoint(_.head(points));
+    super(graphie, initialPoint);
+    this.wrapper = void 0;
+    this.visibleShape = void 0;
+    options = _.extend({}, DEFAULT_OPTIONS$2, options);
+    const fixedPath = graphie.fixedPath(points, options.center, options.createPath);
+    this.wrapper = fixedPath.wrapper;
+    this.visibleShape = fixedPath.visibleShape;
+
+    // Add to appropriate graphie layer
+    if (options.mouselayer) {
+      // Disable browser handling of all panning and zooming gestures on the
+      // movable wrapper so that when moved the browser does not scroll page
+      this.wrapper.style.touchAction = "none";
+      this.graphie.addToMouseLayerWrapper(this.wrapper);
+    } else {
+      this.graphie.addToVisibleLayerWrapper(this.wrapper);
+    }
   }
+}
 
-  // Add to appropriate graphie layer
-  if (options.mouselayer) {
-    // Disable browser handling of all panning and zooming gestures on the
-    // movable wrapper so that when moved the browser does not scroll page
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.wrapper.style.touchAction = "none";
-
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.graphie.addToMouseLayerWrapper(this.wrapper);
-  } else {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.graphie.addToVisibleLayerWrapper(this.wrapper);
+class Arrowhead extends WrappedPath {
+  constructor(graphie, style) {
+    // Points that define the arrowhead
+    const center = [0.75, 0];
+    const points = [[-3, 4], [-2.75, 2.5], [0, 0.25], center, [0, -0.25], [-2.75, -2.5], [-3, -4]].map(point => {
+      // Scale points by `Arrowhead.scale` around `center`
+      const pv = vector$1.subtract(point, center);
+      const pvScaled = vector$1.scale(pv, Arrowhead.scale);
+      return vector$1.add(center, pvScaled);
+    });
+    const unscaledPoints = points.map(graphie.unscalePoint);
+    super(graphie, unscaledPoints, {
+      center: graphie.unscalePoint(center),
+      createPath: createCubicPath
+    });
+    this.center = void 0;
+    this.center = center;
+    this.attr(_.extend({
+      "stroke-linejoin": "round",
+      "stroke-linecap": "round",
+      "stroke-dasharray": ""
+    }, style));
   }
-  if (options.shadow) {
-    const filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    const wrapper = this.wrapper;
-    wrapper.style.filter = filter;
-
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.moveTo = function (point) {
-      const delta = vector$1.subtract(this.graphie.scalePoint(point), this.graphie.scalePoint(this.initialPoint));
-      const do3dTransform = InteractiveUtil.getCanUse3dTransform();
-      const transform = "translateX(" + Math.round(delta[0]) + "px) " + "translateY(" + Math.round(delta[1]) + "px)" + (do3dTransform ? " translateZ(0)" : "");
-      this.transform(transform);
-    };
+  toCoordAtAngle(coord, angle) {
+    const clipPoint = this.graphie.scalePoint(getClipPoint(this.graphie, coord, angle));
+    this.transform("translateX(" + (clipPoint[0] + Arrowhead.scale * this.center[0]) + "px) " + "translateY(" + (clipPoint[1] + Arrowhead.scale * this.center[1]) + "px) " + "translateZ(0) " + "rotate(" + (360 - KhanMath.bound(angle)) + "deg)");
   }
-  if (options.disableMouseEventsOnWrapper) {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.wrapper.style.pointerEvents = "none";
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.visibleShape.node.style.pointerEvents = "auto";
+}
+
+// We can't just pass in a path to `graph.fixedPath` as we need to modify
+// the points in some way, so instead we provide a function for creating
+// the path once the points have been transformed
+Arrowhead.scale = 1.4;
+const createCubicPath = function createCubicPath(points) {
+  let path = "M" + points[0][0] + " " + points[0][1];
+  for (let i = 1; i < points.length; i += 3) {
+    path += "C" + points[i][0] + " " + points[i][1] + " " + points[i + 1][0] + " " + points[i + 1][1] + " " + points[i + 2][0] + " " + points[i + 2][1];
   }
+  return path;
 };
-_.extend(WrappedEllipse.prototype, WrappedDefaults);
 
 const DEFAULT_OPTIONS$1 = {
-  thickness: 2,
-  mouselayer: false
+  maxScale: 1,
+  mouselayer: false,
+  shadow: false,
+  disableMouseEventsOnWrapper: false
 };
-const WrappedLine = function WrappedLine(graphie, start, end, options) {
-  options = _.extend({}, DEFAULT_OPTIONS$1, options);
-
-  // Always make the line as large as possible and horizontal; this
-  // simplifies a lot of the transforms, e.g., we can rotate by exactly the
-  // angle of the argument points in `moveTo`.
-  const initialStart = [graphie.range[0][0], 0];
-  const initialEnd = [graphie.range[0][1], 0];
+class WrappedEllipse extends WrappedDrawing {
+  constructor(graphie, center, radii, options) {
+    super(graphie, center);
+    this.initialPoint = void 0;
+    this.wrapper = void 0;
+    this.visibleShape = void 0;
+    options = _.extend({}, DEFAULT_OPTIONS$1, options);
+
+    // Add `wrapper`, `visibleShape`, and remaining properties.
+    const fixedEllipse = graphie.fixedEllipse(center, radii, options.maxScale, options.padding);
+    this.visibleShape = fixedEllipse.visibleShape;
+    this.wrapper = fixedEllipse.wrapper;
+    this.graphie = graphie;
+    this.initialPoint = center;
+    if (options.interactiveKindForTesting) {
+      this.wrapper.setAttribute("data-interactive-kind-for-testing", options.interactiveKindForTesting);
+    }
 
-  // Add `wrapper` and `visibleShape`
-  _.extend(
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  this, graphie.fixedLine(initialStart, initialEnd, options.thickness));
-  if (options.interactiveKindForTesting) {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.wrapper.setAttribute("data-interactive-kind-for-testing", options.interactiveKindForTesting);
+    // Add to appropriate graphie layer
+    if (options.mouselayer) {
+      // Disable browser handling of all panning and zooming gestures on the
+      // movable wrapper so that when moved the browser does not scroll page
+      this.wrapper.style.touchAction = "none";
+      this.graphie.addToMouseLayerWrapper(this.wrapper);
+    } else {
+      this.graphie.addToVisibleLayerWrapper(this.wrapper);
+    }
+    if (options.shadow) {
+      const filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
+      const wrapper = this.wrapper;
+      wrapper.style.filter = filter;
+      this.moveTo = function (point) {
+        const delta = vector$1.subtract(this.graphie.scalePoint(point), this.graphie.scalePoint(this.initialPoint));
+        const do3dTransform = InteractiveUtil.getCanUse3dTransform();
+        const transform = "translateX(" + Math.round(delta[0]) + "px) " + "translateY(" + Math.round(delta[1]) + "px)" + (do3dTransform ? " translateZ(0)" : "");
+        this.transform(transform);
+      };
+    }
+    if (options.disableMouseEventsOnWrapper) {
+      this.wrapper.style.pointerEvents = "none";
+      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      this.visibleShape.node.style.pointerEvents = "auto";
+    }
   }
+}
 
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  this.visibleShape.attr(options.normalStyle);
-
-  // Save properties for computing transformations
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  _.extend(this, {
-    graphie: graphie,
-    initialPoint: graphie.scalePoint(initialStart),
-    initialLength: point.distanceToPoint(graphie.scalePoint(initialStart), graphie.scalePoint(initialEnd))
-  });
-
-  // Add to appropriate graphie layer
-  if (options.mouselayer) {
-    // Disable browser handling of all panning and zooming gestures on the
-    // movable wrapper so that when moved the browser does not scroll page
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.wrapper.style.touchAction = "none";
+const DEFAULT_OPTIONS = {
+  thickness: 2,
+  mouselayer: false
+};
+class WrappedLine extends WrappedDrawing {
+  constructor(graphie, start, end, options) {
+    // Always make the line as large as possible and horizontal; this
+    // simplifies a lot of the transforms, e.g., we can rotate by exactly the
+    // angle of the argument points in `moveTo`.
+    const initialStart = [graphie.range[0][0], 0];
+    const initialEnd = [graphie.range[0][1], 0];
+    const initialPoint = graphie.scalePoint(initialStart);
+    super(graphie, initialPoint);
+    this.initialLength = void 0;
+    this.wrapper = void 0;
+    this.visibleShape = void 0;
+    options = _.extend({}, DEFAULT_OPTIONS, options);
+    const fixedLine = graphie.fixedLine(initialStart, initialEnd, options.thickness);
+    this.wrapper = fixedLine.wrapper;
+    this.visibleShape = fixedLine.visibleShape;
+    if (options.interactiveKindForTesting) {
+      this.wrapper.setAttribute("data-interactive-kind-for-testing", options.interactiveKindForTesting);
+    }
+    this.visibleShape.attr(options.normalStyle);
+
+    // Save properties for computing transformations
+    this.initialPoint = initialPoint;
+    this.initialLength = point.distanceToPoint(graphie.scalePoint(initialStart), graphie.scalePoint(initialEnd));
+
+    // Add to appropriate graphie layer
+    if (options.mouselayer) {
+      // Disable browser handling of all panning and zooming gestures on the
+      // movable wrapper so that when moved the browser does not scroll page
+      this.wrapper.style.touchAction = "none";
+      this.graphie.addToMouseLayerWrapper(this.wrapper);
+    } else {
+      this.graphie.addToVisibleLayerWrapper(this.wrapper);
+    }
 
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.graphie.addToMouseLayerWrapper(this.wrapper);
-  } else {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.graphie.addToVisibleLayerWrapper(this.wrapper);
+    // Move line to initial points
+    this.moveTo(start, end);
   }
-
-  // Move to argument points
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  this.moveTo(start, end);
-};
-_.extend(WrappedLine.prototype, WrappedDefaults, {
-  getMouseTarget: function () {
+  getMouseTarget() {
     return this.wrapper;
-  },
-  moveTo: function (start, end) {
+  }
+
+  // TODO(benchristel): we need to suppress a type error here because moveTo
+  // takes 2 parameters here, but only 1 parameter in the superclass's
+  // definition. Rename this method after confirming it's safe to do so
+  // @ts-expect-error - TS2416: Property 'moveTo' in type 'WrappedLine' is not assignable to the same property in base type 'WrappedDefaults'.
+  moveTo(start, end) {
     const scaledStart = this.graphie.scalePoint(start);
     const scaledEnd = this.graphie.scalePoint(end);
 
@@ -10454,45 +10477,7 @@ _.extend(WrappedLine.prototype, WrappedDefaults, {
     const transformation = "translateX(" + delta[0] + "px) " + "translateY(" + delta[1] + "px) " + (do3dTransform ? " translateZ(0)" : "") + "rotate(" + angle + "deg) " + "scaleX(" + scale + ") scaleY(1)";
     this.transform(transformation);
   }
-});
-
-const DEFAULT_OPTIONS = {
-  center: null,
-  // gets ignored in `graphie.fixedPath` if `null`
-  createPath: null,
-  // gets defaulted in `graphie.fixedPath` if `null`
-  mouselayer: false
-};
-const WrappedPath = function WrappedPath(graphie, points, options) {
-  options = _.extend({}, DEFAULT_OPTIONS, options);
-
-  // Add `wrapper` and `visibleShape`
-  _.extend(
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  this, graphie.fixedPath(points, options.center, options.createPath));
-
-  // Add remaining properties
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  _.extend(this, {
-    graphie: graphie,
-    initialPoint: graphie.scalePoint(_.head(points))
-  });
-
-  // Add to appropriate graphie layer
-  if (options.mouselayer) {
-    // Disable browser handling of all panning and zooming gestures on the
-    // movable wrapper so that when moved the browser does not scroll page
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.wrapper.style.touchAction = "none";
-
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.graphie.addToMouseLayerWrapper(this.wrapper);
-  } else {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.graphie.addToVisibleLayerWrapper(this.wrapper);
-  }
-};
-_.extend(WrappedPath.prototype, WrappedDefaults);
+}
 
 /**
  * A collection of geomtry-related utility functions
@@ -10717,9 +10702,6 @@ firstPoints, secondPoints) {
 }
 
 /* eslint-disable @babel/no-invalid-this */
-const {
-  getCanUse3dTransform
-} = InteractiveUtil;
 function scaledDistanceFromAngle(angle) {
   const a = 3.51470560176242 * 20;
   const b = 0.5687298702748785 * 20;
@@ -11603,52 +11585,15 @@ _.extend(GraphUtils.Graphie.prototype, {
       _.each(elements, function (element) {
         element.moveTo(start, end);
       });
-      const createArrow = function createArrow(graph, style) {
-        const center = [0.75, 0];
-        let points = [[-3, 4], [-2.75, 2.5], [0, 0.25], center, [0, -0.25], [-2.75, -2.5], [-3, -4]];
-        const scale = 1.4;
-        points = _.map(points, function (point) {
-          const pv = vector$1.subtract(point, center);
-          const pvScaled = vector$1.scale(pv, scale);
-          return vector$1.add(center, pvScaled);
-        });
-        const createCubicPath = function createCubicPath(points) {
-          let path = "M" + points[0][0] + " " + points[0][1];
-          for (let i = 1; i < points.length; i += 3) {
-            path += "C" + points[i][0] + " " + points[i][1] + " " + points[i + 1][0] + " " + points[i + 1][1] + " " + points[i + 2][0] + " " + points[i + 2][1];
-          }
-          return path;
-        };
-        const unscaledPoints = _.map(points, graph.unscalePoint);
-        const options = {
-          center: graph.unscalePoint(center),
-          createPath: createCubicPath
-        };
-        const arrowHead = new WrappedPath(graph, unscaledPoints, options);
-        arrowHead.attr(_.extend({
-          "stroke-linejoin": "round",
-          "stroke-linecap": "round",
-          "stroke-dasharray": ""
-        }, style));
-
-        // Add custom function for transforming arrowheads that
-        // accounts for center, scaling, etc.
-        arrowHead.toCoordAtAngle = function (coord, angle) {
-          const clipPoint = graph.scalePoint(getClipPoint(graph, coord, angle));
-          const do3dTransform = getCanUse3dTransform();
-          arrowHead.transform("translateX(" + (clipPoint[0] + scale * center[0]) + "px) " + "translateY(" + (clipPoint[1] + scale * center[1]) + "px) " + (do3dTransform ? "translateZ(0) " : "") + "rotate(" + (360 - KhanMath.bound(angle)) + "deg)");
-        };
-        return arrowHead;
-      };
 
       // Add arrows
       if (this._arrows == null) {
         this._arrows = [];
         if (this.extendLine) {
-          this._arrows.push(createArrow(graph, this.normalStyle));
-          this._arrows.push(createArrow(graph, this.normalStyle));
+          this._arrows.push(new Arrowhead(graph, this.normalStyle));
+          this._arrows.push(new Arrowhead(graph, this.normalStyle));
         } else if (this.extendRay) {
-          this._arrows.push(createArrow(graph, this.normalStyle));
+          this._arrows.push(new Arrowhead(graph, this.normalStyle));
         }
       }
       const coordForArrow = [this.coordA, this.coordZ];
@@ -14067,78 +14012,6 @@ const getScaledAngle = function getScaledAngle(line) {
   return vector$1.polarDegFromCart(vector$1.subtract(scaledZ, scaledA))[1];
 };
 
-// Given `coord` and `angle`, find the point where a line extended
-// from `coord` in the direction of `angle` would be clipped by the
-// edge of the graphie canvas. Then draw an arrowhead at that point
-// pointing in the direction of `angle`.
-const getClipPoint = function getClipPoint(graph, coord, angle) {
-  // Actually put the arrowheads 4px from the edge so they have
-  // a bit of room
-  const xExtent = graph.range[0][1] - graph.range[0][0];
-  const yExtent = graph.range[1][1] - graph.range[1][0];
-
-  // shoot a point off into the distance ...
-  const distance = xExtent + yExtent;
-  // we need to scale the point according to the scale of the axes
-  const angleVec = graph.unscaleVector(vector$1.cartFromPolarDeg(1, angle));
-  const distVec = vector$1.scale(vector$1.normalize(angleVec), distance);
-  const farCoord = vector$1.add(coord, distVec);
-  const scaledAngle = vector$1.polarDegFromCart(angleVec)[1];
-  // ... and then bring it back
-  const clipPoint = graph.constrainToBoundsOnAngle(farCoord, 4, scaledAngle * Math.PI / 180);
-  return clipPoint;
-};
-
-// Given `coord` and `angle`, find the point where a line extended
-// from `coord` in the direction of `angle` would be clipped by the
-// edge of the graphie canvas. Then draw an arrowhead at that point
-// pointing in the direction of `angle`.
-const createArrow = function createArrow(graph, style) {
-  // Points that define the arrowhead
-  const center = [0.75, 0];
-  let points = [[-3, 4], [-2.75, 2.5], [0, 0.25], center, [0, -0.25], [-2.75, -2.5], [-3, -4]];
-
-  // Scale points by 1.4 around (0.75, 0)
-  const scale = 1.4;
-  points = _.map(points, function (point) {
-    const pv = vector$1.subtract(point, center);
-    const pvScaled = vector$1.scale(pv, scale);
-    return vector$1.add(center, pvScaled);
-  });
-
-  // We can't just pass in a path to `graph.fixedPath` as we need to modify
-  // the points in some way, so instead we provide a function for creating
-  // the path once the points have been transformed
-  const createCubicPath = function createCubicPath(points) {
-    let path = "M" + points[0][0] + " " + points[0][1];
-    for (let i = 1; i < points.length; i += 3) {
-      path += "C" + points[i][0] + " " + points[i][1] + " " + points[i + 1][0] + " " + points[i + 1][1] + " " + points[i + 2][0] + " " + points[i + 2][1];
-    }
-    return path;
-  };
-
-  // Create arrowhead
-  const unscaledPoints = _.map(points, graph.unscalePoint);
-  const options = {
-    center: graph.unscalePoint(center),
-    createPath: createCubicPath
-  };
-  const arrowHead = new WrappedPath(graph, unscaledPoints, options);
-  arrowHead.attr(_.extend({
-    "stroke-linejoin": "round",
-    "stroke-linecap": "round",
-    "stroke-dasharray": ""
-  }, style));
-
-  // Add custom function for transforming arrowheads that accounts for
-  // center, scaling, etc.
-  arrowHead.toCoordAtAngle = function (coord, angle) {
-    const clipPoint = graph.scalePoint(getClipPoint(graph, coord, angle));
-    arrowHead.transform("translateX(" + (clipPoint[0] + scale * center[0]) + "px) " + "translateY(" + (clipPoint[1] + scale * center[1]) + "px) " + "translateZ(0) " + "rotate(" + (360 - KhanMath.bound(angle)) + "deg)");
-  };
-  return arrowHead;
-};
-
 /**
  * MovableLine option functions
  */
@@ -14225,16 +14098,16 @@ const draw$3 = {
         // @ts-expect-error - TS2551 - Property '_arrows' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. Did you mean 'arrows'?
         this._arrows.push(
         // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. | TS2339 - Property 'normalStyle' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'.
-        createArrow(this.graphie, this.normalStyle()));
+        new Arrowhead(this.graphie, this.normalStyle()));
         // @ts-expect-error - TS2551 - Property '_arrows' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. Did you mean 'arrows'?
         this._arrows.push(
         // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. | TS2339 - Property 'normalStyle' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'.
-        createArrow(this.graphie, this.normalStyle()));
+        new Arrowhead(this.graphie, this.normalStyle()));
       } else if (state.extendRay) {
         // @ts-expect-error - TS2551 - Property '_arrows' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. Did you mean 'arrows'?
         this._arrows.push(
         // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. | TS2339 - Property 'normalStyle' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'.
-        createArrow(this.graphie, this.normalStyle()));
+        new Arrowhead(this.graphie, this.normalStyle()));
       }
     }
 
@@ -14380,6 +14253,75 @@ var MovableLineOptions = {
   }
 };
 
+/**
+ * A work-in-progress of _ methods for objects.
+ * That is, they take an object as a parameter,
+ * and return an object instead of an array.
+ *
+ * TODO(aria): Move this out of interactive2
+ */
+
+/**
+ * Does a pluck on keys inside objects in an object
+ *
+ * Ex:
+ * tools = {
+ *     translation: {
+ *         enabled: true
+ *     },
+ *     rotation: {
+ *         enabled: false
+ *     }
+ * };
+ * pluckObject(tools, "enabled") returns {
+ *     translation: true
+ *     rotation: false
+ * }
+ */
+const pluck = function pluck(table, subKey) {
+  return _.object(_.map(table, function (value, key) {
+    return [key, value[subKey]];
+  }));
+};
+
+/**
+ * Maps an object to an object
+ *
+ * > mapObject({a: '1', b: '2'}, (value, key) => {
+ *       return value + 1;
+ *   });
+ * {a: 2, b: 3}
+ */
+const mapObject$2 = function mapObject(obj, lambda) {
+  const result = {};
+  _.each(_.keys(obj), function (key) {
+    // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
+    result[key] = lambda(obj[key], key);
+  });
+  return result;
+};
+
+/**
+ * Maps an array to an object
+ *
+ * > mapObjectFromArray(['a', 'b'], function(elem) {
+ *       return elem + elem;
+ *   });
+ * {a: 'aa', b: 'bb'}
+ */
+const mapObjectFromArray$1 = function mapObjectFromArray(arr, lambda) {
+  const result = {};
+  _.each(arr, function (elem) {
+    result[elem] = lambda(elem);
+  });
+  return result;
+};
+var objective_ = {
+  pluck: pluck,
+  mapObject: mapObject$2,
+  mapObjectFromArray: mapObjectFromArray$1
+};
+
 /**
  * MovableLine
  */
@@ -17907,33 +17849,33 @@ class Lint extends React.Component {
       let warningText;
       let warningTextStyle;
       if (this.props.severity === Severity.Error) {
-        severityStyle = styles$A.indicatorError;
+        severityStyle = styles$B.indicatorError;
         warningText = "Error";
-        warningTextStyle = styles$A.publishBlockingError;
+        warningTextStyle = styles$B.publishBlockingError;
       } else if (this.props.severity === Severity.Warning) {
-        severityStyle = styles$A.indicatorWarning;
+        severityStyle = styles$B.indicatorWarning;
         warningText = "Warning";
-        warningTextStyle = styles$A.warning;
+        warningTextStyle = styles$B.warning;
       } else {
-        severityStyle = styles$A.indicatorGuideline;
+        severityStyle = styles$B.indicatorGuideline;
         warningText = "Recommendation";
-        warningTextStyle = styles$A.warning;
+        warningTextStyle = styles$B.warning;
       }
       return /*#__PURE__*/React.createElement("a", {
         href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.indicator, severityStyle)
+        className: css(styles$B.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
+        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$A.tooltipParagraph)
+        className: css(styles$B.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
+        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
       })));
     };
   }
@@ -17971,20 +17913,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.lintContainer, styles$A.lintContainerBlock)
-      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.lintContainer)
-      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$A.lintContainer)
-    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$A = StyleSheet.create({
+const styles$B = StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19887,7 +19829,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$z.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -20008,7 +19950,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$z.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20655,7 +20597,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-const styles$z = {
+const styles$A = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21672,10 +21614,10 @@ class InputNumber extends React.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$y.default, this.props.size === "small" ? styles$y.small : null, this.props.rightAlign ? styles$y.rightAlign : styles$y.leftAlign];
+    const inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$y.answerStateUnanswered);
+      inputStyles.push(styles$z.answerStateUnanswered);
     }
     return /*#__PURE__*/React.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21760,7 +21702,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$y = StyleSheet.create({
+const styles$z = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22761,7 +22703,7 @@ const FocusRing = function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-test-id": "focus-ring",
-    className: css(styles$x.ring),
+    className: css(styles$y.ring),
     style: style
   }, children);
 };
@@ -22770,7 +22712,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$x = StyleSheet.create({
+const styles$y = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22807,7 +22749,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$w = StyleSheet.create({
+const styles$x = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22830,7 +22772,7 @@ const CrossOutLine = function CrossOutLine(props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: css(styles$v.crossOutLine),
+    className: css(styles$w.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22845,7 +22787,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$w = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22926,7 +22868,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$w.iconWrapper)
+    className: css(styles$x.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: Color.blue,
     visible: focused || hovered,
@@ -22935,13 +22877,13 @@ const ChoiceIcon = function ChoiceIcon(props) {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: css(styles$u.circle, showCorrectness && correct && styles$u.circleCorrect, showCorrectness && !correct && styles$u.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$u.circleIncorrectAnswered)
+    className: css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$u.innerWrapper)
+    className: css(styles$v.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22950,7 +22892,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23042,19 +22984,19 @@ const OptionStatus = function OptionStatus(props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$t.correct;
+    textStyle = styles$u.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$t.incorrectAnswered;
+      textStyle = styles$u.incorrectAnswered;
     } else {
-      textStyle = styles$t.incorrect;
+      textStyle = styles$u.incorrect;
     }
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$t.text, textStyle)
+    className: css(styles$u.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23129,8 +23071,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$s.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$s.rationale));
+  const descriptionClassName = classNames("description", css(styles$t.description));
+  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$t.rationale));
 
   // We want to show the choices as dimmed out when the choices are disabled.
   // However, we don't want to do this when we're in review mode in the
@@ -23294,7 +23236,7 @@ const Choice = function Choice(props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23486,10 +23428,10 @@ const BaseRadio = function BaseRadio(props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$r.radio, styles$r.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$r.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$r.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$r.instructions, isMobile && styles$r.instructionsMobile));
+  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
+  const instructionsClassName = classNames("instructions", css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = css(styles$r.responsiveFieldset);
+  const responsiveClassName = css(styles$s.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -23540,7 +23482,7 @@ const BaseRadio = function BaseRadio(props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return css(sharedStyles.aboveScratchpad, styles$r.item, styles$r.responsiveItem, checked && styles$r.selectedItem, checked && choice.highlighted && styles$r.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$r.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$r.nextHighlighted);
+      return css(sharedStyles.aboveScratchpad, styles$s.item, styles$s.responsiveItem, checked && styles$s.selectedItem, checked && choice.highlighted && styles$s.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$s.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$s.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23614,14 +23556,14 @@ const BaseRadio = function BaseRadio(props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$r.responsiveContainer)
+    className: css(styles$s.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24269,9 +24211,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$q.mobileTable)
+      className: "categorizer-table " + css(styles$r.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$q.emptyHeaderCell)
+      className: css(styles$r.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -24279,7 +24221,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$q.header),
+        className: css(styles$r.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -24299,7 +24241,7 @@ class Categorizer extends React.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React.createElement("td", {
-          className: "category " + css(styles$q.cell),
+          className: "category " + css(styles$r.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24318,7 +24260,7 @@ class Categorizer extends React.Component {
           onChange: this.onChange.bind(this, itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React.createElement("span", {
-          className: css(styles$q.radioSpan, selected && styles$q.checkedRadioSpan, this.props.static && selected && styles$q.staticCheckedRadioSpan)
+          className: css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24330,7 +24272,7 @@ class Categorizer extends React.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$q.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$r.fullBleedContainer] : [];
     return /*#__PURE__*/React.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -24375,7 +24317,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24482,7 +24424,7 @@ const toAbsoluteUrl = url => parseUrl(url).href;
 const {
   updateQueryString: updateQueryString$1
 } = Util;
-function getUrlFromProgramID(programID) {
+function getUrlFromProgramID$1(programID) {
   const {
     InitialRequestUrl
   } = getDependencies();
@@ -24567,7 +24509,7 @@ class CSProgram extends React.Component {
       return /*#__PURE__*/React.createElement("div", null);
     }
     let styleContainer = false;
-    let url = getUrlFromProgramID(this.props.programID);
+    let url = getUrlFromProgramID$1(this.props.programID);
     let className;
     const style = {
       height: this.props.height,
@@ -24611,7 +24553,7 @@ class CSProgram extends React.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$p.widthOverride, styleContainer && styles$p.container)
+      className: css(styles$q.widthOverride, styleContainer && styles$q.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24640,7 +24582,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24685,7 +24627,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$o.tooltipBody,
+        style: styles$p.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -24716,7 +24658,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$o = {
+const styles$p = {
   tooltipBody: {
     color: Color.offBlack,
     fontSize: 20,
@@ -24922,15 +24864,15 @@ class Explanation extends React.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React.createElement("div", {
-        className: css(styles$n.linkContainer)
+        className: css(styles$o.linkContainer)
       }, /*#__PURE__*/React.createElement("a", {
-        className: css(styles$n.mobileExplanationLink),
+        className: css(styles$o.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, linkAnchor), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
-        className: css(styles$n.disclosureArrow)
+        className: css(styles$o.disclosureArrow)
       }, /*#__PURE__*/React.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24943,13 +24885,13 @@ class Explanation extends React.Component {
         // an anchor tag (if rendered in a modal) or a Wonder Blocks
         // link component in lesson page, see: `article-page.jsx`.
         linkContainer = /*#__PURE__*/React.createElement("div", {
-          className: css(styles$n.linkContainer, styles$n.articleLink)
+          className: css(styles$o.linkContainer, styles$o.articleLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$n.explanationLink)
+          className: css(styles$o.explanationLink)
           // HACK(michaelpolyak): WB Link doesn't passthrough
           // class name.
           ,
-          style: styles$n.explanationLink,
+          style: styles$o.explanationLink,
           href: href,
           onClick: onClick,
           role: "button",
@@ -24959,9 +24901,9 @@ class Explanation extends React.Component {
         // NOTE: For exercises, the baseElements `Link` is an
         // anchor tag, see: `perseus-api.jsx`.
         linkContainer = /*#__PURE__*/React.createElement("div", {
-          className: css(styles$n.linkContainer, styles$n.exerciseLink)
+          className: css(styles$o.linkContainer, styles$o.exerciseLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$n.explanationLink),
+          className: css(styles$o.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -24969,11 +24911,11 @@ class Explanation extends React.Component {
         }, `[${linkAnchor}]`));
       }
     }
-    const expandedStyle = isMobile ? styles$n.contentExpandedMobile : styles$n.contentExpanded;
+    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$n.container)
+      className: css(styles$o.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$n.content, isMobile && styles$n.contentMobile, this.state.expanded && expandedStyle)
+      className: css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24997,7 +24939,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -25102,15 +25044,15 @@ class GradedGroupAnswerBar extends React.Component {
       onCheckAnswer,
       onNextQuestion
     } = this.props;
-    const answerBarStyle = _extends({}, styles$m.answerBar, {
+    const answerBarStyle = _extends({}, styles$n.answerBar, {
       backgroundColor: answerBarState === "CORRECT" ? Color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     });
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React.createElement("span", {
-      style: styles$m.text
+      style: styles$n.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$m.tryAgainIcon
+      style: styles$n.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -25129,7 +25071,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$m.text
+      style: styles$n.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -25151,7 +25093,7 @@ class GradedGroupAnswerBar extends React.Component {
   }
 }
 const fontSize = 17;
-const styles$m = {
+const styles$n = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25337,7 +25279,7 @@ class GradedGroup extends React.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? css(styles$l.gradedGroupInSet) : css(styles$l.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$m.gradedGroupInSet) : css(styles$m.gradedGroup);
     const classes = classNames({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25356,7 +25298,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.title)
+      className: css(styles$m.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25388,7 +25330,7 @@ class GradedGroup extends React.Component {
     }, i18n._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: css(styles$l.explanationTitle),
+      className: css(styles$m.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25420,7 +25362,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$l.showHintLink)
+      className: css(styles$m.showHintLink)
     }, i18n._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25441,7 +25383,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$3 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25514,18 +25456,18 @@ class Indicators extends React.Component {
     return /*#__PURE__*/React.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames(css(styles$k.indicatorContainer), "indicatorContainer")
+      className: classNames(css(styles$l.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
-      className: css(styles$k.indicator),
+      className: css(styles$l.indicator),
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": i18n._("Skip to %(title)s", {
         title
       }),
-      style: styles$k.indicatorButton,
+      style: styles$l.indicatorButton,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
     }, ({
@@ -25533,9 +25475,9 @@ class Indicators extends React.Component {
       focused,
       pressed
     }) => /*#__PURE__*/React.createElement(View, {
-      style: [styles$k.indicatorDot, (hovered || focused || pressed) && styles$k.indicatorDotFocused]
+      style: [styles$l.indicatorDot, (hovered || focused || pressed) && styles$l.indicatorDotFocused]
     }, i === this.props.currentGroup && /*#__PURE__*/React.createElement(View, {
-      style: styles$k.indicatorDotActive
+      style: styles$l.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
     }, i18n._("Current"))))))));
@@ -25601,7 +25543,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$k.container)
+        className: css(styles$l.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25624,13 +25566,13 @@ class GradedGroupSet extends React.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.container)
+      className: css(styles$l.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.top)
+      className: css(styles$l.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.title)
+      className: css(styles$l.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.spacer)
+      className: css(styles$l.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25672,7 +25614,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25777,7 +25719,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$j.buttonStyle, button.value === value && styles$j.selectedStyle),
+        className: css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25794,7 +25736,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -31078,7 +31020,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$i.switchWrapper
+    style: styles$j.switchWrapper
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -31090,7 +31032,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -31143,13 +31085,13 @@ const AnswerPill = props => {
     id: idFactory.get("perseus-label-image-widget-answer-pill"),
     onClick: correct ? undefined : onClick,
     ref: ref,
-    style: [style, popperStyle, styles$h.pill, correct && styles$h.correct, incorrect && styles$h.incorrect, (focused || hovered) && BringToFront]
+    style: [style, popperStyle, styles$i.pill, correct && styles$i.correct, incorrect && styles$i.incorrect, (focused || hovered) && BringToFront]
   }, /*#__PURE__*/React.createElement(Renderer, {
     content: answerString,
     inline: true
   })));
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -31202,23 +31144,23 @@ class Marker extends React.Component {
       icon: iconNull
     };
     if (showCorrectness) {
-      iconStyles = [styles$g.markerGraded, showCorrectness === "correct" ? styles$g.markerCorrect : styles$g.markerIncorrect, isOpen && styles$g.markerSelected];
+      iconStyles = [styles$h.markerGraded, showCorrectness === "correct" ? styles$h.markerCorrect : styles$h.markerIncorrect, isOpen && styles$h.markerSelected];
       args = _extends({}, args, {
         icon: showCorrectness === "correct" ? iconCheck : iconMinus
       });
     } else if (selectedAnswers && selectedAnswers.length > 0) {
-      iconStyles = [styles$g.markerFilled, isOpen && styles$g.markerSelected];
+      iconStyles = [styles$h.markerFilled, isOpen && styles$h.markerSelected];
     } else if (isOpen) {
-      iconStyles = [styles$g.markerSelected];
+      iconStyles = [styles$h.markerSelected];
       args = _extends({}, args, {
         icon: iconChevronDown,
         size: 8
       });
     } else if (showPulsate) {
-      iconStyles = [styles$g.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$g.markerUnfilledPulsateOnce : showPulsate && styles$g.markerUnfilledPulsateInfinite];
+      iconStyles = [styles$h.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$h.markerUnfilledPulsateOnce : showPulsate && styles$h.markerUnfilledPulsateInfinite];
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles$g.markerIcon, iconStyles],
+      style: [styles$h.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React.createElement(Icon, args));
   }
@@ -31240,7 +31182,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$g.marker, active && !markerDisabled && styles$g.markerActive]
+      style: [styles$h.marker, active && !markerDisabled && styles$h.markerActive]
       // already translated in: /widgets/graded-group.tsx
       ,
       "aria-label": markerDisabled ? i18n._("Correct!") : label
@@ -31258,7 +31200,7 @@ class Marker extends React.Component {
 Marker.defaultProps = {
   selected: []
 };
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: Color.white,
@@ -31828,13 +31770,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$f.instructions))
+      className: classNames("perseus-label-image-widget-instructions", css(styles$g.instructions))
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.instructionsCaption)
+      className: css(styles$g.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.instructionsChoices)
+      className: css(styles$g.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.instructionsChoice),
+      className: css(styles$g.instructionsChoice),
       key: index
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: choice
@@ -31851,20 +31793,20 @@ class LabelImage extends React.Component {
       activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.markersCanvas),
+      className: css(styles$g.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$f.imageContainer,
+      className: css(styles$g.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$f.imageInteractionDisabled)
+      activeMarkerIndex !== -1 && styles$g.imageInteractionDisabled)
     }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(SvgImage, {
@@ -31888,7 +31830,7 @@ class LabelImage extends React.Component {
     }));
   }
 }
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -32245,7 +32187,7 @@ class Placeholder extends React.Component {
     const {
       layout
     } = this.props;
-    const className = css(styles$e.card, styles$e.placeholder, layout === Layout.HORIZONTAL && styles$e.horizontalCard);
+    const className = css(styles$f.card, styles$f.placeholder, layout === Layout.HORIZONTAL && styles$f.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -32428,7 +32370,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$e.card, styles$e.draggable, layout === Layout.HORIZONTAL && styles$e.horizontalCard, layout === Layout.VERTICAL && styles$e.verticalCard, type === ItemState.DRAGGING && styles$e.dragging, type === ItemState.DISABLED && styles$e.disabled, !includePadding && styles$e.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
+    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";
     if (!includePadding) {
       className += " perseus-sortable-draggable-unpadded";
     }
@@ -32635,7 +32577,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$e.sortable) + " perseus-sortable";
+    const className = css(styles$f.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) {
@@ -32877,7 +32819,7 @@ Sortable.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault,
   waitForTexRendererToLoad: true
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -33039,23 +32981,23 @@ class Matcher extends React.Component {
     };
     const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
     return /*#__PURE__*/React.createElement("table", {
-      className: css(styles$d.widget) + " " + HACKY_CSS_CLASSNAME
+      className: css(styles$e.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React.createElement("tbody", null, showLabels && /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$d.row)
+      className: css(styles$e.row)
     }, /*#__PURE__*/React.createElement("th", {
-      className: css(styles$d.column, styles$d.columnLabel)
+      className: css(styles$e.column, styles$e.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext
     })), /*#__PURE__*/React.createElement("th", {
-      className: css(styles$d.column, styles$d.columnRight, styles$d.columnLabel)
+      className: css(styles$e.column, styles$e.columnRight, styles$e.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext
     }))), /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$d.row)
+      className: css(styles$e.row)
     }, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$d.column)
+      className: css(styles$e.column)
     }, /*#__PURE__*/React.createElement(Sortable, {
       options: left,
       layout: Layout.VERTICAL,
@@ -33070,7 +33012,7 @@ class Matcher extends React.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React.createElement("td", {
-      className: css(styles$d.column, styles$d.columnRight)
+      className: css(styles$e.column, styles$e.columnRight)
     }, /*#__PURE__*/React.createElement(Sortable
     // @ts-expect-error - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
     , {
@@ -33123,7 +33065,7 @@ _.extend(Matcher, {
 });
 const padding = 5;
 const border = "1px solid #444";
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -33990,9 +33932,9 @@ function drawText(ctx, item) {
   if (item.value === null) {
     return;
   }
-  ctx.fillStyle = styles$c.fgColor;
-  ctx.font = styles$c.font;
-  ctx.fillText(item.value, item.pos[0] - styles$c.fontSizePx / 2 + 1, item.pos[1] + styles$c.fontSizePx / 2);
+  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);
 }
 
 /**
@@ -34013,16 +33955,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$c.lineWidth;
-  ctx.strokeStyle = styles$c.fgColor;
+  ctx.lineWidth = 5 * styles$d.lineWidth;
+  ctx.strokeStyle = styles$d.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$c.lineWidth;
-  ctx.strokeStyle = styles$c.bgColor;
+  ctx.lineWidth = 3 * styles$d.lineWidth;
+  ctx.strokeStyle = styles$d.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -34049,16 +33991,16 @@ function drawTripleLine(ctx, item) {
 
   // Outer line that will form the two outer bond lines.
   let path = new Path2D();
-  ctx.lineWidth = 7 * styles$c.lineWidth;
-  ctx.strokeStyle = styles$c.fgColor;
+  ctx.lineWidth = 7 * styles$d.lineWidth;
+  ctx.strokeStyle = styles$d.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$c.lineWidth;
-  ctx.strokeStyle = styles$c.bgColor;
+  ctx.lineWidth = 5 * styles$d.lineWidth;
+  ctx.strokeStyle = styles$d.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -34080,8 +34022,8 @@ function drawTripleLine(ctx, item) {
  */
 function drawLine(ctx, item) {
   const path = new Path2D();
-  ctx.lineWidth = styles$c.lineWidth;
-  ctx.strokeStyle = styles$c.fgColor;
+  ctx.lineWidth = styles$d.lineWidth;
+  ctx.strokeStyle = styles$d.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -34133,7 +34075,7 @@ function compareElements(item0, item1) {
 function draw(ctx, items) {
   items.sort(compareElements).forEach(drawItem(ctx));
 }
-const styles$c = {
+const styles$d = {
   bgColor: "rgb(255, 255, 255)",
   fgColor: "rgb(0, 0, 0)",
   fontSizePx: 12,
@@ -36695,7 +36637,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$b.highlightRect),
+      className: css(styles$c.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -36714,7 +36656,7 @@ class HighlightRenderer extends React.PureComponent {
     })));
   }
 }
-const styles$b = StyleSheet.create({
+const styles$c = StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -36795,7 +36737,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$a.tooltipLabel),
+      className: css(styles$b.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -36815,7 +36757,7 @@ class HighlightTooltip extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("div", null)));
   }
 }
-const styles$a = StyleSheet.create({
+const styles$b = 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
@@ -37367,7 +37309,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$9.container),
+      className: css(styles$a.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -37388,14 +37330,14 @@ class HighlightableContent extends React.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$9.content),
+      className: css(styles$a.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$9 = StyleSheet.create({
+const styles$a = 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
@@ -37795,7 +37737,7 @@ class LineHeightMeasurer extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$8.measurer),
+      className: css(styles$9.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
       ref: ref => this._line = ref,
@@ -37803,7 +37745,7 @@ class LineHeightMeasurer extends React.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$8 = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -39093,6 +39035,52 @@ var Plotter$1 = {
   staticTransform: staticTransform
 };
 
+/**
+ * This widget is for embedding Khan Academy Python programs.
+ */
+function getUrlFromProgramID(programID) {
+  const path = `/python-program/${programID}/embedded`;
+  return toAbsoluteUrl(path);
+}
+/* This renders the program in an iframe. */
+class PythonProgram extends React.Component {
+  render() {
+    const url = getUrlFromProgramID(this.props.programID);
+    const iframeStyle = {
+      height: this.props.height,
+      width: "100%"
+    };
+    const sandboxOptions = ["allow-popups", "allow-same-origin", "allow-scripts", "allow-top-navigation"].join(" ");
+
+    // We sandbox the iframe so that we allowlist only the functionality
+    //  that we need. This makes it a bit safer in case some content
+    //  creator "went wild".
+    // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles$8.container
+    }, /*#__PURE__*/React.createElement("iframe", {
+      sandbox: sandboxOptions,
+      src: url,
+      style: iframeStyle,
+      allowFullScreen: true
+    }));
+  }
+}
+PythonProgram.defaultProps = {
+  height: 400
+};
+const styles$8 = StyleSheet.create({
+  container: {
+    margin: "auto",
+    width: "100%"
+  }
+});
+var PythonProgram$1 = {
+  name: "python-program",
+  displayName: "Python Program",
+  widget: PythonProgram
+};
+
 class Separator extends React.Component {
   constructor(...args) {
     super(...args);
@@ -41528,7 +41516,7 @@ var Video$1 = {
 };
 
 /* eslint-disable import/no-named-as-default */
-var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, LightsPuzzle$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, ReactionDiagram, Sequence$1, Simulator$1, Sorter$1, Table$1, Unit, Video$1, DeprecatedStandin$1];
+var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, LightsPuzzle$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, PythonProgram$1, ReactionDiagram, Sequence$1, Simulator$1, Sorter$1, Table$1, Unit, Video$1, DeprecatedStandin$1];
 
 /**
  * This should be called by all clients, specifying whether extra widgets are
@@ -41568,7 +41556,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.1.9";
+const libVersion = "19.2.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43014,6 +43002,8 @@ const ItemExtras = [
 
 // prettier-ignore
 
+// prettier-ignore
+
 //prettier-ignore
 
 // A background image applied to various widgets.