@khanacademy/perseus 19.1.8 → 19.2.0

package/dist/index.js

@@ -278,7 +278,7 @@ class MathInput extends React__namespace.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -309,7 +309,7 @@ class MathInput extends React__namespace.Component {
       dismissEnabled: true,
       content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$B.popoverContent
+        style: styles$C.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
@@ -349,9 +349,9 @@ const MathInputIcon = _ref => {
       color = Color__default["default"].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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$B.iconContainer, dynamicClass]
+    style: [styles$C.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -396,7 +396,7 @@ const inputFocused = {
   borderColor: Color__default["default"].blue,
   margin: -1
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -8692,6 +8692,11 @@ function polar(r, th) {
 class Graphie$1 {
   #bounds;
   #drawingTransform;
+
+  // The primary drawing layer
+
+  // The layer that all visuals with mouse handlers are drawn into
+
   isMobile = false;
   // Set up some reasonable defaults
   currentStyle = {
@@ -9537,13 +9542,125 @@ class Graphie$1 {
     return processed;
   }
 
-  // This is a stub that's overridden in interactive.ts
-  getMouseCoord(event) {
-    throw new Error("getMouseCoord is a stub, and is not implemented");
+  // Graphie puts text spans on top of the SVG, which looks good, but gets
+  // in the way of mouse events. This adds another SVG element on top
+  // of everything else where we can add invisible shapes with mouse
+  // handlers wherever we want.
+  addMouseLayer(options) {
+    const localOptions = {
+      allowScratchpad: false,
+      setDrawingAreaAvailable: function () {},
+      ...options
+    };
+    const mouselayerZIndex = 2;
+    this.mouselayer = Raphael$1(this.el, this.xpixels, this.ypixels);
+    $__default["default"](this.mouselayer.canvas).css("z-index", mouselayerZIndex);
+    if (localOptions.onClick || localOptions.onMouseDown || localOptions.onMouseMove || localOptions.onMouseOver || localOptions.onMouseOut) {
+      const canvasClickTarget = this.mouselayer.rect(0, 0, this.xpixels, this.ypixels).attr({
+        fill: "#000",
+        opacity: 0
+      });
+      let isClickingCanvas = false;
+      $__default["default"](this.mouselayer.canvas).on("vmousedown", e => {
+        if (e.target === canvasClickTarget[0]) {
+          if (localOptions.onMouseDown) {
+            localOptions.onMouseDown(this.getMouseCoord(e));
+          }
+          isClickingCanvas = true;
+          if (localOptions.onMouseMove) {
+            const handler = localOptions.onMouseMove;
+            $__default["default"](document).bind("vmousemove.mouseLayer", e => {
+              if (isClickingCanvas) {
+                e.preventDefault();
+                handler(this.getMouseCoord(e));
+              }
+            });
+          }
+          $__default["default"](document).bind("vmouseup.mouseLayer", e => {
+            $__default["default"](document).unbind(".mouseLayer");
+
+            // Only register clicks that started on the canvas,
+            // and not on another mouseLayer target
+            if (isClickingCanvas && localOptions.onClick) {
+              localOptions.onClick(this.getMouseCoord(e));
+            }
+            isClickingCanvas = false;
+          });
+        }
+      });
+      if (localOptions.onMouseOver) {
+        const handler = localOptions.onMouseOver;
+        $__default["default"](this.mouselayer.canvas).on("vmouseover", e => {
+          handler(this.getMouseCoord(e));
+        });
+      }
+      if (localOptions.onMouseOut) {
+        const handler = localOptions.onMouseOut;
+        $__default["default"](this.mouselayer.canvas).on("vmouseout", e => {
+          handler(this.getMouseCoord(e));
+        });
+      }
+    }
+    if (!localOptions.allowScratchpad) {
+      localOptions.setDrawingAreaAvailable?.(false);
+    }
+
+    // Add mouse and visible wrapper layers for DOM-node-wrapped movables
+    this._mouselayerWrapper = document.createElement("div");
+    $__default["default"](this._mouselayerWrapper).css({
+      position: "absolute",
+      left: 0,
+      top: 0,
+      zIndex: mouselayerZIndex
+    });
+    this._visiblelayerWrapper = document.createElement("div");
+    $__default["default"](this._visiblelayerWrapper).css({
+      position: "absolute",
+      left: 0,
+      top: 0
+    });
+    const el = this.el;
+    el.appendChild(this._visiblelayerWrapper);
+    el.appendChild(this._mouselayerWrapper);
+
+    // Add functions for adding to wrappers
+    this.addToMouseLayerWrapper = el => {
+      this._mouselayerWrapper?.appendChild(el);
+    };
+    this.addToVisibleLayerWrapper = el => {
+      this._visiblelayerWrapper?.appendChild(el);
+    };
+  }
+  addToMouseLayerWrapper(el) {
+    throw new Error("addToMouseLayerWrapper is not ready. Call addMouseLayer() first.");
+  }
+  addToVisibleLayerWrapper(el) {
+    throw new Error("addToVisibleLayerWrapper is not ready. Call addMouseLayer() first.");
+  }
+  /**
+   * Get mouse coordinates in pixels
+   */
+  getMousePx(event) {
+    const offset = $__default["default"](this.el).offset();
+    const mouseX =
+    // @ts-expect-error - TS18048 - 'event.pageX' is possibly 'undefined'.
+    event.pageX -
+    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
+    offset.left;
+    const mouseY =
+    // @ts-expect-error - TS18048 - 'event.pageY' is possibly 'undefined'.
+    event.pageY -
+    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
+    offset.top;
+    return [mouseX, mouseY];
   }
 
-  // This is a stub that's overridden in interactive.ts
-  addMouseLayer(options) {}
+  /**
+   * Get mouse coordinates in graph coordinates
+   */
+  getMouseCoord(event) {
+    return this.unscalePoint(this.getMousePx(event));
+  }
 }
 const labelDirections = {
   center: [-0.5, -0.5],
@@ -10095,89 +10212,45 @@ const GraphUtils = {
   }
 })($__default["default"], 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 (table, subKey) {
-  return ___default["default"].object(___default["default"].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 (obj, lambda) {
-  const result = {};
-  ___default["default"].each(___default["default"].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 (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 (arr, lambda) {
-  const result = {};
-  ___default["default"].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(kmath.vector.cartFromPolarDeg(1, angle));
+  const distVec = kmath.vector.scale(kmath.vector.normalize(angleVec), distance);
+  const farCoord = kmath.vector.add(coord, distVec);
+  const scaledAngle = kmath.vector.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 = ___default["default"].extend({
-  transform: function (transformation) {
+
+class WrappedDrawing {
+  constructor(graphie, initialPoint) {
+    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.
@@ -10186,152 +10259,205 @@ const WrappedDefaults = ___default["default"].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();
     $__default["default"](this.wrapper).remove();
-  },
-  getMouseTarget: function () {
+  }
+  getMouseTarget() {
     return this.visibleShape[0];
-  },
-  moveTo: function (point) {
+  }
+  moveTo(point) {
     const delta = kmath.vector.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 () {
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    this.visibleShape[attribute](...arguments);
-  };
-}));
+  attr() {
+    this.visibleShape.attr(...arguments);
+  }
+  animate() {
+    this.visibleShape.animate(...arguments);
+  }
+}
 
 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 (graphie, center, radii, options) {
-  options = ___default["default"].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.
-  ___default["default"].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(___default["default"].head(points));
+    super(graphie, initialPoint);
+    options = ___default["default"].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 {
+  static scale = 1.4;
+  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 = kmath.vector.subtract(point, center);
+      const pvScaled = kmath.vector.scale(pv, Arrowhead.scale);
+      return kmath.vector.add(center, pvScaled);
+    });
+    const unscaledPoints = points.map(graphie.unscalePoint);
+    super(graphie, unscaledPoints, {
+      center: graphie.unscalePoint(center),
+      createPath: createCubicPath
+    });
+    this.center = center;
+    this.attr(___default["default"].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 = kmath.vector.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
+const createCubicPath = function (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;
 };
-___default["default"].extend(WrappedEllipse.prototype, WrappedDefaults);
 
 const DEFAULT_OPTIONS$1 = {
-  thickness: 2,
-  mouselayer: false
+  maxScale: 1,
+  mouselayer: false,
+  shadow: false,
+  disableMouseEventsOnWrapper: false
 };
-const WrappedLine = function (graphie, start, end, options) {
-  options = ___default["default"].extend({}, DEFAULT_OPTIONS$1, options);
+class WrappedEllipse extends WrappedDrawing {
+  constructor(graphie, center, radii, options) {
+    super(graphie, center);
+    options = ___default["default"].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];
+    // 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`
-  ___default["default"].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 = kmath.vector.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.
-  ___default["default"].extend(this, {
-    graphie: graphie,
-    initialPoint: graphie.scalePoint(initialStart),
-    initialLength: kmath.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);
+    options = ___default["default"].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 = kmath.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);
-};
-___default["default"].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);
 
@@ -10347,45 +10473,7 @@ ___default["default"].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 (graphie, points, options) {
-  options = ___default["default"].extend({}, DEFAULT_OPTIONS, options);
-
-  // Add `wrapper` and `visibleShape`
-  ___default["default"].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.
-  ___default["default"].extend(this, {
-    graphie: graphie,
-    initialPoint: graphie.scalePoint(___default["default"].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);
-  }
-};
-___default["default"].extend(WrappedPath.prototype, WrappedDefaults);
+}
 
 /**
  * A collection of geomtry-related utility functions
@@ -10611,9 +10699,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;
@@ -10644,114 +10729,6 @@ const InteractiveUtils = {
   }
 };
 ___default["default"].extend(GraphUtils.Graphie.prototype, {
-  // graphie puts text spans on top of the SVG, which looks good, but gets
-  // in the way of mouse events. This adds another SVG element on top
-  // of everything else where we can add invisible shapes with mouse
-  // handlers wherever we want.
-  addMouseLayer: function (options) {
-    const graph = this;
-    options = ___default["default"].extend({
-      allowScratchpad: false,
-      setDrawingAreaAvailable: function () {}
-    }, options);
-    const mouselayerZIndex = 2;
-    graph.mouselayer = Raphael$1(graph.raphael.canvas.parentNode, graph.xpixels, graph.ypixels);
-    $__default["default"](graph.mouselayer.canvas).css("z-index", mouselayerZIndex);
-    if (options.onClick || options.onMouseDown || options.onMouseMove || options.onMouseOver || options.onMouseOut) {
-      const canvasClickTarget = graph.mouselayer.rect(0, 0, graph.xpixels, graph.ypixels).attr({
-        fill: "#000",
-        opacity: 0
-      });
-      let isClickingCanvas = false;
-      $__default["default"](graph.mouselayer.canvas).on("vmousedown", function (e) {
-        if (e.target === canvasClickTarget[0]) {
-          if (options.onMouseDown) {
-            options.onMouseDown(graph.getMouseCoord(e));
-          }
-          isClickingCanvas = true;
-          if (options.onMouseMove) {
-            const handler = options.onMouseMove;
-            $__default["default"](document).bind("vmousemove.mouseLayer", function (e) {
-              if (isClickingCanvas) {
-                e.preventDefault();
-                handler(graph.getMouseCoord(e));
-              }
-            });
-          }
-          $__default["default"](document).bind("vmouseup.mouseLayer", function (e) {
-            $__default["default"](document).unbind(".mouseLayer");
-
-            // Only register clicks that started on the canvas,
-            // and not on another mouseLayer target
-            if (isClickingCanvas && options.onClick) {
-              options.onClick(graph.getMouseCoord(e));
-            }
-            isClickingCanvas = false;
-          });
-        }
-      });
-      if (options.onMouseOver) {
-        const handler = options.onMouseOver;
-        $__default["default"](graph.mouselayer.canvas).on("vmouseover", function (e) {
-          handler(graph.getMouseCoord(e));
-        });
-      }
-      if (options.onMouseOut) {
-        const handler = options.onMouseOut;
-        $__default["default"](graph.mouselayer.canvas).on("vmouseout", function (e) {
-          handler(graph.getMouseCoord(e));
-        });
-      }
-    }
-    if (!options.allowScratchpad) {
-      options.setDrawingAreaAvailable?.(false);
-    }
-
-    // Add mouse and visible wrapper layers for DOM-node-wrapped movables
-    graph._mouselayerWrapper = document.createElement("div");
-    $__default["default"](graph._mouselayerWrapper).css({
-      position: "absolute",
-      left: 0,
-      top: 0,
-      zIndex: mouselayerZIndex
-    });
-    graph._visiblelayerWrapper = document.createElement("div");
-    $__default["default"](graph._visiblelayerWrapper).css({
-      position: "absolute",
-      left: 0,
-      top: 0
-    });
-    const el = graph.raphael.canvas.parentNode;
-    el.appendChild(graph._visiblelayerWrapper);
-    el.appendChild(graph._mouselayerWrapper);
-
-    // Add functions for adding to wrappers
-    graph.addToMouseLayerWrapper = function (el) {
-      this._mouselayerWrapper.appendChild(el);
-    };
-    graph.addToVisibleLayerWrapper = function (el) {
-      this._visiblelayerWrapper.appendChild(el);
-    };
-  },
-  /**
-   * Get mouse coordinates in pixels
-   */
-  getMousePx: function (event) {
-    const graphie = this;
-    const mouseX =
-    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-    event.pageX - $__default["default"](graphie.raphael.canvas.parentNode).offset().left;
-    const mouseY =
-    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-    event.pageY - $__default["default"](graphie.raphael.canvas.parentNode).offset().top;
-    return [mouseX, mouseY];
-  },
-  /**
-   * Get mouse coordinates in graph coordinates
-   */
-  getMouseCoord: function (event) {
-    return this.unscalePoint(this.getMousePx(event));
-  },
   /**
    * Unlike all other Graphie-related code, the following three functions use
    * a lot of scaled coordinates (so that labels appear the same size
@@ -11605,52 +11582,15 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       ___default["default"].each(elements, function (element) {
         element.moveTo(start, end);
       });
-      const createArrow = function (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 = ___default["default"].map(points, function (point) {
-          const pv = kmath.vector.subtract(point, center);
-          const pvScaled = kmath.vector.scale(pv, scale);
-          return kmath.vector.add(center, pvScaled);
-        });
-        const createCubicPath = function (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 = ___default["default"].map(points, graph.unscalePoint);
-        const options = {
-          center: graph.unscalePoint(center),
-          createPath: createCubicPath
-        };
-        const arrowHead = new WrappedPath(graph, unscaledPoints, options);
-        arrowHead.attr(___default["default"].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];
@@ -14091,78 +14031,6 @@ const getScaledAngle = function (line) {
   return kmath.vector.polarDegFromCart(kmath.vector.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 (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(kmath.vector.cartFromPolarDeg(1, angle));
-  const distVec = kmath.vector.scale(kmath.vector.normalize(angleVec), distance);
-  const farCoord = kmath.vector.add(coord, distVec);
-  const scaledAngle = kmath.vector.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 (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 = ___default["default"].map(points, function (point) {
-    const pv = kmath.vector.subtract(point, center);
-    const pvScaled = kmath.vector.scale(pv, scale);
-    return kmath.vector.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 (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 = ___default["default"].map(points, graph.unscalePoint);
-  const options = {
-    center: graph.unscalePoint(center),
-    createPath: createCubicPath
-  };
-  const arrowHead = new WrappedPath(graph, unscaledPoints, options);
-  arrowHead.attr(___default["default"].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
  */
@@ -14249,16 +14117,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()));
       }
     }
 
@@ -14404,6 +14272,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 (table, subKey) {
+  return ___default["default"].object(___default["default"].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 (obj, lambda) {
+  const result = {};
+  ___default["default"].each(___default["default"].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 (arr, lambda) {
+  const result = {};
+  ___default["default"].each(arr, function (elem) {
+    result[elem] = lambda(elem);
+  });
+  return result;
+};
+var objective_ = {
+  pluck: pluck,
+  mapObject: mapObject$2,
+  mapObjectFromArray: mapObjectFromArray$1
+};
+
 /**
  * MovableLine
  */
@@ -17966,33 +17903,33 @@ class Lint extends React__namespace.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__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$A.indicator, severityStyle)
+      className: aphrodite.css(styles$B.indicator, severityStyle)
     }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
+      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
     }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
       key: i,
-      className: aphrodite.css(styles$A.tooltipParagraph)
+      className: aphrodite.css(styles$B.tooltipParagraph)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(warningTextStyle)
     }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
+      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
     })));
   };
 
@@ -18020,20 +17957,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.lintContainer, styles$A.lintContainerBlock)
-      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.lintContainer)
-      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$A.lintContainer)
-    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$A = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.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.
@@ -20135,7 +20072,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$z.mobileZoomableParentFix
+          ...styles$A.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -20272,7 +20209,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$z.mobileZoomableParentFix
+        ...styles$A.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -20780,7 +20717,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-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
@@ -21715,10 +21652,10 @@ class InputNumber extends React__namespace.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__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21866,7 +21803,7 @@ class InputNumber extends React__namespace.Component {
     return answerString;
   }
 }
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22864,7 +22801,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-test-id": "focus-ring",
-    className: aphrodite.css(styles$x.ring),
+    className: aphrodite.css(styles$y.ring),
     style: style
   }, children);
 };
@@ -22873,7 +22810,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22910,7 +22847,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22933,7 +22870,7 @@ const CrossOutLine = function (props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: aphrodite.css(styles$v.crossOutLine),
+    className: aphrodite.css(styles$w.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22948,7 +22885,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -23029,7 +22966,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$w.iconWrapper)
+    className: aphrodite.css(styles$x.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: Color__default["default"].blue,
     visible: focused || hovered,
@@ -23038,13 +22975,13 @@ const ChoiceIcon = function (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: aphrodite.css(styles$u.circle, showCorrectness && correct && styles$u.circleCorrect, showCorrectness && !correct && styles$u.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$u.circleIncorrectAnswered)
+    className: aphrodite.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__namespace.createElement("div", {
-    className: aphrodite.css(styles$u.innerWrapper)
+    className: aphrodite.css(styles$v.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -23053,7 +22990,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -23145,19 +23082,19 @@ const OptionStatus = function (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__namespace.createElement("div", {
-    className: aphrodite.css(styles$t.text, textStyle)
+    className: aphrodite.css(styles$u.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -23231,8 +23168,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$s.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$s.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$t.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.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
@@ -23343,14 +23280,16 @@ const Choice = function (props) {
         close
       } = _ref2;
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContent, {
-        title: "Cross out",
-        content: "Cross out option",
+        title: i18n__namespace._("Cross out"),
+        content: i18n__namespace._("Cross out option"),
         closeButtonVisible: true,
         actions: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
           size: Spacing__default["default"].medium_16
         }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
           kind: "primary",
-          "aria-label": `Cross out Choice ${getChoiceLetter(pos)}`,
+          "aria-label": i18n__namespace._("Cross out Choice %(letter)s", {
+            letter: getChoiceLetter(pos)
+          }),
           disabled: apiOptions.readOnly || reviewMode,
           onClick: () => {
             if (!crossedOut) {
@@ -23369,7 +23308,7 @@ const Choice = function (props) {
             }
             close();
           }
-        }, crossedOut ? "Bring back" : "Cross out"))
+        }, crossedOut ? i18n__namespace._("Bring back") : i18n__namespace._("Cross out")))
       });
     }
   }, _ref3 => {
@@ -23378,7 +23317,9 @@ const Choice = function (props) {
     } = _ref3;
     return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: open,
-      "aria-label": `Open menu for Choice ${getChoiceLetter(pos)}`,
+      "aria-label": i18n__namespace._(`Open menu for Choice %(letter)s`, {
+        letter: getChoiceLetter(pos)
+      }),
       style: {
         alignSelf: "center",
         padding: "5px",
@@ -23399,7 +23340,7 @@ const Choice = function (props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23591,10 +23532,10 @@ const BaseRadio = function (props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$r.radio, styles$r.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$r.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$r.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$r.instructions, isMobile && styles$r.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = aphrodite.css(styles$r.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$s.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23645,7 +23586,7 @@ const BaseRadio = function (props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.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 aphrodite.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
@@ -23719,14 +23660,14 @@ const BaseRadio = function (props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$r.responsiveContainer)
+    className: aphrodite.css(styles$s.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -24385,9 +24326,9 @@ class Categorizer extends React__namespace.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React__namespace.createElement("table", {
-      className: "categorizer-table " + aphrodite.css(styles$q.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$r.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$q.emptyHeaderCell)
+      className: aphrodite.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
@@ -24395,7 +24336,7 @@ class Categorizer extends React__namespace.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React__namespace.createElement("th", {
-        className: aphrodite.css(styles$q.header),
+        className: aphrodite.css(styles$r.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -24415,7 +24356,7 @@ class Categorizer extends React__namespace.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React__namespace.createElement("td", {
-          className: "category " + aphrodite.css(styles$q.cell),
+          className: "category " + aphrodite.css(styles$r.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24434,7 +24375,7 @@ class Categorizer extends React__namespace.Component {
           onChange: this.onChange.bind(this, itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$q.radioSpan, selected && styles$q.checkedRadioSpan, this.props.static && selected && styles$q.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24446,7 +24387,7 @@ class Categorizer extends React__namespace.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__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24495,7 +24436,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24605,7 +24546,7 @@ const toAbsoluteUrl = url => parseUrl(url).href;
 const {
   updateQueryString: updateQueryString$1
 } = Util;
-function getUrlFromProgramID(programID) {
+function getUrlFromProgramID$1(programID) {
   const {
     InitialRequestUrl
   } = getDependencies();
@@ -24714,7 +24655,7 @@ class CSProgram extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.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,
@@ -24758,7 +24699,7 @@ class CSProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$p.widthOverride, styleContainer && styles$p.container)
+      className: aphrodite.css(styles$q.widthOverride, styleContainer && styles$q.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24768,7 +24709,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$p = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24816,7 +24757,7 @@ class Definition extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
         content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
           color: "white",
-          style: styles$o.tooltipBody,
+          style: styles$p.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -24847,7 +24788,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$o = {
+const styles$p = {
   tooltipBody: {
     color: Color__default["default"].offBlack,
     fontSize: 20,
@@ -25051,15 +24992,15 @@ class Explanation extends React__namespace.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$n.linkContainer)
+        className: aphrodite.css(styles$o.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
-        className: aphrodite.css(styles$n.mobileExplanationLink),
+        className: aphrodite.css(styles$o.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, linkAnchor), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
-        className: aphrodite.css(styles$n.disclosureArrow)
+        className: aphrodite.css(styles$o.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -25072,13 +25013,13 @@ class Explanation extends React__namespace.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__namespace.createElement("div", {
-          className: aphrodite.css(styles$n.linkContainer, styles$n.articleLink)
+          className: aphrodite.css(styles$o.linkContainer, styles$o.articleLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$n.explanationLink)
+          className: aphrodite.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",
@@ -25088,9 +25029,9 @@ class Explanation extends React__namespace.Component {
         // NOTE: For exercises, the baseElements `Link` is an
         // anchor tag, see: `perseus-api.jsx`.
         linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$n.linkContainer, styles$n.exerciseLink)
+          className: aphrodite.css(styles$o.linkContainer, styles$o.exerciseLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$n.explanationLink),
+          className: aphrodite.css(styles$o.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -25098,11 +25039,11 @@ class Explanation extends React__namespace.Component {
         }, `[${linkAnchor}]`));
       }
     }
-    const expandedStyle = isMobile ? styles$n.contentExpandedMobile : styles$n.contentExpanded;
+    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$n.container)
+      className: aphrodite.css(styles$o.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$n.content, isMobile && styles$n.contentMobile, this.state.expanded && expandedStyle)
+      className: aphrodite.css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -25125,7 +25066,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$n = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -25231,15 +25172,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       onNextQuestion
     } = this.props;
     const answerBarStyle = {
-      ...styles$m.answerBar,
+      ...styles$n.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? Color__default["default"].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__namespace.createElement("span", {
-      style: styles$m.text
+      style: styles$n.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$m.tryAgainIcon
+      style: styles$n.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -25258,7 +25199,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$m.text
+      style: styles$n.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -25280,7 +25221,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$m = {
+const styles$n = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25480,7 +25421,7 @@ class GradedGroup extends React__namespace.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n__namespace._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$l.gradedGroupInSet) : aphrodite.css(styles$l.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$m.gradedGroupInSet) : aphrodite.css(styles$m.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25499,7 +25440,7 @@ class GradedGroup extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.title)
+      className: aphrodite.css(styles$m.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25532,7 +25473,7 @@ class GradedGroup extends React__namespace.Component {
     }, i18n__namespace._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: aphrodite.css(styles$l.explanationTitle),
+      className: aphrodite.css(styles$m.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25564,7 +25505,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$l.showHintLink)
+      className: aphrodite.css(styles$m.showHintLink)
     }, i18n__namespace._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25576,7 +25517,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$3 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25646,20 +25587,20 @@ class Indicators extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames__default["default"](aphrodite.css(styles$k.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$l.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$k.indicator),
+        className: aphrodite.css(styles$l.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": i18n__namespace._("Skip to %(title)s", {
           title
         }),
-        style: styles$k.indicatorButton,
+        style: styles$l.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
       }, _ref2 => {
@@ -25669,9 +25610,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$k.indicatorDotActive
+          style: styles$l.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, i18n__namespace._("Current"))));
@@ -25747,7 +25688,7 @@ class GradedGroupSet extends React__namespace.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$k.container)
+        className: aphrodite.css(styles$l.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25770,13 +25711,13 @@ class GradedGroupSet extends React__namespace.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.container)
+      className: aphrodite.css(styles$l.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.top)
+      className: aphrodite.css(styles$l.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.title)
+      className: aphrodite.css(styles$l.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.spacer)
+      className: aphrodite.css(styles$l.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25814,7 +25755,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25919,7 +25860,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$j.buttonStyle, button.value === value && styles$j.selectedStyle),
+        className: aphrodite.css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25932,7 +25873,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -31202,7 +31143,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$i.switchWrapper
+    style: styles$j.switchWrapper
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -31214,7 +31155,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -31269,14 +31210,14 @@ 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__namespace.createElement(Renderer, {
       content: answerString,
       inline: true
     }));
   });
 };
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -31330,25 +31271,25 @@ class Marker extends React__namespace.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 = {
         ...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 = {
         ...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__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$g.markerIcon, iconStyles],
+      style: [styles$h.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React__namespace.createElement(Icon, args));
   }
@@ -31369,7 +31310,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$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__namespace._("Correct!") : label
@@ -31384,7 +31325,7 @@ class Marker extends React__namespace.Component {
     }));
   }
 }
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: Color__default["default"].white,
@@ -31961,13 +31902,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$f.instructions))
+      className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$g.instructions))
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.instructionsCaption)
+      className: aphrodite.css(styles$g.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.instructionsChoices)
+      className: aphrodite.css(styles$g.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.instructionsChoice),
+      className: aphrodite.css(styles$g.instructionsChoice),
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: choice
@@ -31984,20 +31925,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$f.markersCanvas),
+      className: aphrodite.css(styles$g.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$f.imageContainer,
+      className: aphrodite.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__namespace.createElement(context$1.Consumer, null, _ref3 => {
       let {
         setAssetStatus
@@ -32023,7 +31964,7 @@ class LabelImage extends React__namespace.Component {
     }));
   }
 }
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -32384,7 +32325,7 @@ class Placeholder extends React__namespace.Component {
     const {
       layout
     } = this.props;
-    const className = aphrodite.css(styles$e.card, styles$e.placeholder, layout === Layout.HORIZONTAL && styles$e.horizontalCard);
+    const className = aphrodite.css(styles$f.card, styles$f.placeholder, layout === Layout.HORIZONTAL && styles$f.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -32482,7 +32423,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$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 = 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";
     if (!includePadding) {
       className += " perseus-sortable-draggable-unpadded";
     }
@@ -32782,7 +32723,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$e.sortable) + " perseus-sortable";
+    const className = aphrodite.css(styles$f.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) {
@@ -33013,7 +32954,7 @@ class Sortable extends React__namespace.Component {
     return ___default["default"].pluck(this.state.items, "option");
   }
 }
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -33141,23 +33082,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$d.widget) + " " + HACKY_CSS_CLASSNAME
+      className: aphrodite.css(styles$e.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React__namespace.createElement("tbody", null, showLabels && /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$d.row)
+      className: aphrodite.css(styles$e.row)
     }, /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$d.column, styles$d.columnLabel)
+      className: aphrodite.css(styles$e.column, styles$e.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext
     })), /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$d.column, styles$d.columnRight, styles$d.columnLabel)
+      className: aphrodite.css(styles$e.column, styles$e.columnRight, styles$e.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext
     }))), /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$d.row)
+      className: aphrodite.css(styles$e.row)
     }, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$d.column)
+      className: aphrodite.css(styles$e.column)
     }, /*#__PURE__*/React__namespace.createElement(Sortable, {
       options: left,
       layout: Layout.VERTICAL,
@@ -33172,7 +33113,7 @@ class Matcher extends React__namespace.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$d.column, styles$d.columnRight)
+      className: aphrodite.css(styles$e.column, styles$e.columnRight)
     }, /*#__PURE__*/React__namespace.createElement(Sortable
     // @ts-expect-error - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
     , {
@@ -33258,7 +33199,7 @@ ___default["default"].extend(Matcher, {
 });
 const padding = 5;
 const border = "1px solid #444";
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -34131,9 +34072,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);
 }
 
 /**
@@ -34154,16 +34095,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);
@@ -34190,16 +34131,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);
@@ -34221,8 +34162,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);
@@ -34274,7 +34215,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,
@@ -36838,7 +36779,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$b.highlightRect),
+      className: aphrodite.css(styles$c.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -36857,7 +36798,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
     })));
   }
 }
-const styles$b = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -36938,7 +36879,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$a.tooltipLabel),
+      className: aphrodite.css(styles$b.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -36958,7 +36899,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
     }, /*#__PURE__*/React__namespace.createElement("div", null)));
   }
 }
-const styles$a = aphrodite.StyleSheet.create({
+const styles$b = 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
@@ -37516,7 +37457,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$9.container),
+      className: aphrodite.css(styles$a.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,
@@ -37537,14 +37478,14 @@ class HighlightableContent extends React__namespace.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$9.content),
+      className: aphrodite.css(styles$a.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React__namespace.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$9 = aphrodite.StyleSheet.create({
+const styles$a = 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
@@ -37940,7 +37881,7 @@ class LineHeightMeasurer extends React__namespace.Component {
   }
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$8.measurer),
+      className: aphrodite.css(styles$9.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       ref: ref => this._line = ref,
@@ -37948,7 +37889,7 @@ class LineHeightMeasurer extends React__namespace.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -39235,6 +39176,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__namespace.Component {
+  static defaultProps = {
+    height: 400
+  };
+  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__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$8.container
+    }, /*#__PURE__*/React__namespace.createElement("iframe", {
+      sandbox: sandboxOptions,
+      src: url,
+      style: iframeStyle,
+      allowFullScreen: true
+    }));
+  }
+}
+const styles$8 = aphrodite.StyleSheet.create({
+  container: {
+    margin: "auto",
+    width: "100%"
+  }
+});
+var PythonProgram$1 = {
+  name: "python-program",
+  displayName: "Python Program",
+  widget: PythonProgram
+};
+
 class Separator extends React__namespace.Component {
   arrowLength = 100;
   static propTypes = {
@@ -41669,7 +41656,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
@@ -41709,7 +41696,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.1.8";
+const libVersion = "19.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43154,6 +43141,8 @@ const ItemExtras = [
 
 // prettier-ignore
 
+// prettier-ignore
+
 //prettier-ignore
 
 // A background image applied to various widgets.