@khanacademy/perseus 12.2.0 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @khanacademy/perseus
 
+## 12.4.0
+
+### Minor Changes
+
+-   [#784](https://github.com/Khan/perseus/pull/784) [`cfff6ad1`](https://github.com/Khan/perseus/commit/cfff6ad16a3923418a3c75816af7c99689b94da4) Thanks [@nedredmond](https://github.com/nedredmond)! - Graded Group Set indicator dots now have a 24x24 clickable area as well as hover/focus states. Stretching issue on mobile resolved as well.
+
+*   [#783](https://github.com/Khan/perseus/pull/783) [`79403e06`](https://github.com/Khan/perseus/commit/79403e06eedb597d7818d6c858bbba6f51ff3fe1) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Adds 'widgetId' to the 'perseus:widget-rendering-error' analytics event.
+
+### Patch Changes
+
+-   Updated dependencies [[`79403e06`](https://github.com/Khan/perseus/commit/79403e06eedb597d7818d6c858bbba6f51ff3fe1), [`ed00ee59`](https://github.com/Khan/perseus/commit/ed00ee59dcdeb20a66709c6b7d3474da55d58e4d)]:
+    -   @khanacademy/perseus-core@1.3.0
+    -   @khanacademy/math-input@14.2.2
+    -   @khanacademy/kas@0.3.5
+    -   @khanacademy/kmath@0.1.6
+    -   @khanacademy/perseus-linter@0.3.8
+    -   @khanacademy/pure-markdown@0.2.10
+    -   @khanacademy/simple-markdown@0.10.4
+
+## 12.3.0
+
+### Minor Changes
+
+-   [#780](https://github.com/Khan/perseus/pull/780) [`376eb0e4`](https://github.com/Khan/perseus/commit/376eb0e4aaaa4c7a90fd6107a84bb74d382b077c) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Adds an `onError` callback prop to the ErrorBoundary component. Uses this new callback in the WidgetContainer component to report all widget rendering failures through the analytics API.
+
+### Patch Changes
+
+-   [#759](https://github.com/Khan/perseus/pull/759) [`c431c4b8`](https://github.com/Khan/perseus/commit/c431c4b8147ae0630df2d2b19b0f5a5b5f04d4bf) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove references to unused font families
+
+*   [#775](https://github.com/Khan/perseus/pull/775) [`cb529549`](https://github.com/Khan/perseus/commit/cb5295497fe74e3f4cc00eef0f99da9f83f58e4d) Thanks [@nedredmond](https://github.com/nedredmond)! - Added flag to `simpleValidate` call from Renderer to ensure we call analytics on MathInputEvaluated only when the answer is submitted
+
+-   [#781](https://github.com/Khan/perseus/pull/781) [`9b9dfd4f`](https://github.com/Khan/perseus/commit/9b9dfd4f6779d129040d9afcf3205f1863a64c25) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Fix for broken dilation tool in the Transformer Widget
+
+-   Updated dependencies [[`c431c4b8`](https://github.com/Khan/perseus/commit/c431c4b8147ae0630df2d2b19b0f5a5b5f04d4bf), [`fb84640d`](https://github.com/Khan/perseus/commit/fb84640de911a8e8817829985fe9956e83a7f7d1), [`376eb0e4`](https://github.com/Khan/perseus/commit/376eb0e4aaaa4c7a90fd6107a84bb74d382b077c), [`33cc24c3`](https://github.com/Khan/perseus/commit/33cc24c33f62cd87de7594ba575d311fd465e2e0)]:
+    -   @khanacademy/math-input@14.2.1
+    -   @khanacademy/perseus-core@1.2.0
+    -   @khanacademy/kas@0.3.4
+    -   @khanacademy/kmath@0.1.5
+    -   @khanacademy/perseus-linter@0.3.7
+    -   @khanacademy/pure-markdown@0.2.9
+    -   @khanacademy/simple-markdown@0.10.3
+
 ## 12.2.0
 
 ### Minor Changes

package/dist/article-renderer.d.ts

@@ -3,6 +3,7 @@
  * composed of multiple (Renderer) sections concatenated together.
  */
 import * as React from "react";
+import { DependenciesContext } from "./dependencies";
 import Renderer from "./renderer";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
@@ -10,7 +11,7 @@ import type { APIOptions, PerseusDependenciesV2 } from "./types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
-type Props = {
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & KeypadProps & {
     apiOptions: APIOptions;
     json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
     /**
@@ -21,7 +22,7 @@ type Props = {
     legacyPerseusLint?: ReadonlyArray<string>;
     keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
-} & KeypadProps;
+};
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     useNewStyles: Props["useNewStyles"];

package/dist/error-boundary.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 type Props = {
     children: React.ReactNode;
     metadata?: Record<string, string>;
+    onError?: (error: Error, info: any) => void;
 };
 type State = {
     error: string;

package/dist/es/index.css

@@ -1742,11 +1742,11 @@ body.mobile ul.inequalities-one-line-radios > li {
 .framework-perseus.perseus-mobile .clearfix > .perseus-renderer {
   margin-bottom: 32px;
 }
-.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
+.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
   margin: 0 0 0 1em;
   padding: 0;
 }
-.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) > li {
+.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) > li {
   padding-left: 10px;
   margin-bottom: 24px;
 }
@@ -2394,7 +2394,7 @@ img.zoom-img {
 .framework-perseus .perseus-renderer > .paragraph > ol {
   margin: -11px 0px 22px 0px;
 }
-.framework-perseus .paragraph ul:not(.perseus-widget-radio) {
+.framework-perseus .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
   padding-left: 35px;
   list-style-type: disc;
 }
@@ -2684,71 +2684,6 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
 #answer_area .perseus-widget-expression .error-tooltip .tooltipContainer > div:first-child {
   visibility: hidden !important;
 }
-.perseus-widget-expression-old,
-.perseus-widget-expression-old > .output,
-.perseus-widget-expression-old > .output > .tex,
-.perseus-widget-expression-old > .output > .placeholder {
-  display: block;
-}
-.perseus-widget-expression-old input,
-#answer_area .perseus-widget-expression-old input {
-  direction: ltr;
-  border: 1px solid #a4a4a4;
-  border-radius: 5px;
-  box-sizing: border-box;
-  font-size: 14px;
-  margin-bottom: 5px;
-  max-width: 240px;
-  padding: 6px;
-  width: 100%;
-}
-.perseus-widget-expression-old > .output {
-  background: #f2f2f2;
-  border-radius: 5px;
-  padding: 10px;
-  margin: 10px 0;
-}
-#answer_area .perseus-widget-expression-old > .output {
-  background: #f7f7f7;
-}
-.perseus-widget-expression-old > .output > .tex {
-  overflow-x: auto;
-  padding: 5px;
-}
-.perseus-widget-expression-old > .output > .placeholder {
-  position: relative;
-  height: 40px;
-  overflow-y: hidden;
-}
-.perseus-widget-expression-old > .output > .placeholder > .error {
-  border-radius: 10px;
-  background: #f7f7f7;
-  border: 1px solid #ddd;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-  color: #000;
-  display: none;
-  font-weight: normal;
-  min-height: 22px;
-  width: 168px;
-  position: absolute;
-  top: 0px;
-  left: 40px;
-  margin: auto;
-}
-.perseus-widget-expression-old > .output > .placeholder > .error > .buddy {
-  background-image: url(/images/perseus/error-buddy.png);
-  background-size: 100%;
-  height: 36px;
-  width: 40px;
-  position: absolute;
-  top: -3px;
-  left: -42px;
-}
-.perseus-widget-expression-old > .output > .placeholder > .error > .message {
-  font: 12px inherit;
-  line-height: 1.4em;
-  margin: 0px 4px;
-}
 .perseus-widget-grapher {
   box-sizing: content-box;
   padding: 25px 25px 0 0;
@@ -3121,7 +3056,7 @@ body.mobile .perseus-matrix .math-output {
 }
 .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage div.paragraph,
 .perseus-widget-passage-container .perseus-widget-passage div.paragraph {
-  font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman", serif;
+  font-family: KaTeX_Main, Times, "Times New Roman", serif;
 }
 .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph,
 .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph {

package/dist/es/index.js

@@ -49,6 +49,21 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 const customKeyTranslator = _extends({}, keyTranslator, {
   // If there's something in the input that can become part of a
   // fraction, typing "/" puts it in the numerator. If not, typing
@@ -1870,6 +1885,7 @@ const KhanAnswerTypes = {
   }
 };
 
+const _excluded$4 = ["scoring"];
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 const insertBraces = value => {
@@ -1947,11 +1963,26 @@ class Expression extends React.Component {
         });
       }
     };
-    this.simpleValidate = (rubric, onInputError) => {
-      onInputError = onInputError || function () {};
-      const result = Expression.validate(this.getUserInput(), rubric, onInputError);
-      this.sendExpressionEvaluatedEvent(result.type === "invalid" ? "invalid" : result.earned === result.total ? "correct" : "incorrect");
-      return result;
+    this.simpleValidate = (_ref, onInputError) => {
+      let {
+          scoring
+        } = _ref,
+        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {});
+
+      // "scoring" is a flag that indicates when we are checking answers.
+      // otherwise, we may just be checking validity after changes.
+      if (scoring && score.type !== "invalid") {
+        var _this$props$analytics;
+        (_this$props$analytics = this.props.analytics) == null ? void 0 : _this$props$analytics.onAnalyticsEvent({
+          type: "perseus:expression-evaluated",
+          payload: {
+            result: score.earned === score.total ? "correct" : "incorrect",
+            virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
+          }
+        });
+      }
+      return score;
     };
     this.getUserInput = () => {
       return Expression.getUserInputFromProps(this.props);
@@ -1973,8 +2004,8 @@ class Expression extends React.Component {
       this.props.trackInteraction();
     };
     this._handleFocus = () => {
-      var _this$props$analytics;
-      (_this$props$analytics = this.props.analytics) == null ? void 0 : _this$props$analytics.onAnalyticsEvent({
+      var _this$props$analytics2;
+      (_this$props$analytics2 = this.props.analytics) == null ? void 0 : _this$props$analytics2.onAnalyticsEvent({
         type: "perseus:expression-focused",
         payload: null
       });
@@ -2182,16 +2213,6 @@ class Expression extends React.Component {
     // @ts-expect-error - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
     this.refs.input.insert(keyPressed);
   }
-  sendExpressionEvaluatedEvent(result) {
-    var _this$props$analytics2;
-    (_this$props$analytics2 = this.props.analytics) == null ? void 0 : _this$props$analytics2.onAnalyticsEvent({
-      type: "perseus:expression-evaluated",
-      payload: {
-        result,
-        virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
-      }
-    });
-  }
   render() {
     var _this$props$keypadCon, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
@@ -3680,10 +3701,10 @@ Zoom.prototype.dispose = function () {
 };
 const ZoomService = new ZoomServiceClass();
 
-// @baseFontFamily:        "Proxima Nova", sans-serif;
-const baseFontFamily$1 = "'Proxima Nova',sans-serif";
-// @boldFontFamily:        "Proxima Nova Semibold", sans-serif;
-const boldFontFamily = "'Proxima Nova Semibold',sans-serif";
+// @baseFontFamily:        "Lato", sans-serif;
+const baseFontFamily$1 = "'Lato', sans-serif";
+// @boldFontFamily:        "Lato-Bold", "Lato", sans-serif;
+const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
 // @green:                 #76a005;
 const green$1 = "#76A005";
 // @kaGreen:               #71b307;
@@ -17328,9 +17349,11 @@ class ErrorBoundary extends React.Component {
     };
   }
   componentDidCatch(error, info) {
+    var _this$props$onError, _this$props;
     this.setState({
       error: error.toString()
     });
+    (_this$props$onError = (_this$props = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props, error, info);
     Log.error("Perseus error boundary caught error", Errors.Internal, {
       cause: error,
       loggedMetadata: _extends({
@@ -18675,6 +18698,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
 class WidgetContainer extends React.Component {
   constructor(...args) {
     super(...args);
+    this.widgetRef = /*#__PURE__*/React.createRef();
     this.state = {
       // TODO(benkomalo): before we're mounted, we don't know how big
       // we're going to be, so just default to MEDIUM for now. :/ In the
@@ -18684,8 +18708,7 @@ class WidgetContainer extends React.Component {
       widgetProps: this.props.initialProps
     };
     this.getWidget = () => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.widget;
+      return this.widgetRef.current;
     };
     this.replaceWidgetProps = newWidgetProps => {
       this.setState({
@@ -18779,15 +18802,29 @@ class WidgetContainer extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: isStatic ? staticContainerStyles : {}
+    }, /*#__PURE__*/React.createElement(DependenciesContext.Consumer, null, ({
+      analytics
+    }) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+      metadata: {
+        widget_type: type,
+        widget_id: this.props.id
+      },
+      onError: () => {
+        analytics.onAnalyticsEvent({
+          type: "perseus:widget-rendering-error",
+          payload: {
+            widgetType: type,
+            widgetId: this.props.id
+          }
+        });
+      }
     }, /*#__PURE__*/React.createElement(WidgetType, _extends({}, this.state.widgetProps, {
       linterContext: linterContext,
-      containerSizeClass: this.state.sizeClass
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "widget"
+      containerSizeClass: this.state.sizeClass,
+      ref: this.widgetRef
     })), isStatic && /*#__PURE__*/React.createElement("div", {
       style: staticOverlayStyles
-    }));
+    }))));
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.type !== nextProps.type) {
@@ -18810,6 +18847,7 @@ const rContainsNonWhitespace = /\S/;
 const rImageURL = /(web\+graphie|https):\/\/[^\s]*/;
 const noopOnRender = () => {};
 const SHOULD_CLEAR_WIDGETS_PROP_LIST = ["content", "problemNum", "widgets"];
+const makeContainerId = id => "container:" + id;
 
 // Check if one focus path / id path is a prefix of another
 // The focus path null will never be a prefix of any non-null
@@ -18854,6 +18892,7 @@ class Renderer extends React.Component {
     this._isMounted = void 0;
     this._isTwoColumn = void 0;
     this._translationLinter = void 0;
+    this._widgetContainers = new Map();
     this.lastRenderedMarkdown = void 0;
     this.reuseMarkdown = void 0;
     this.translationIndex = void 0;
@@ -18924,19 +18963,22 @@ class Renderer extends React.Component {
         // By this point we should have no duplicates, which are
         // filtered out in this.render(), so we shouldn't have to
         // worry about using this widget key and ref:
-        return /*#__PURE__*/React.createElement(ErrorBoundary, {
-          key: "container:" + id,
-          metadata: {
-            widget_type: type,
-            widget_id: id
-          }
-        }, /*#__PURE__*/React.createElement(WidgetContainer, {
-          ref: "container:" + id,
+        return /*#__PURE__*/React.createElement(WidgetContainer, {
+          key: makeContainerId(id),
+          id: id,
+          ref: node => {
+            const containerId = makeContainerId(id);
+            if (node != null) {
+              this._widgetContainers.set(containerId, node);
+            } else {
+              this._widgetContainers.delete(containerId);
+            }
+          },
           type: type,
           initialProps: this.getWidgetProps(id),
           shouldHighlight: shouldHighlight,
           linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "widget")
-        }));
+        });
       }
       return null;
     };
@@ -18963,7 +19005,6 @@ class Renderer extends React.Component {
         getTracking(widgetInfo && widgetInfo.type));
       }
       return _extends({}, widgetProps, {
-        ref: id,
         widgetId: id,
         alignment: widgetInfo && widgetInfo.alignment,
         // When determining if a widget is static, we verify that the widget is not an
@@ -19095,12 +19136,10 @@ class Renderer extends React.Component {
       return [...this.findInternalWidgets(filterCriterion), ...this.props.findExternalWidgets(filterCriterion)];
     };
     this.getWidgetInstance = id => {
-      // eslint-disable-next-line react/no-string-refs
-      const ref = this.refs["container:" + id];
+      const ref = this._widgetContainers.get(makeContainerId(id));
       if (!ref) {
         return null;
       }
-      // @ts-expect-error - TS2339 - Property 'getWidget' does not exist on type 'ReactInstance'.
       return ref.getWidget();
     };
     this._onWidgetFocus = (id, focusPath = []) => {
@@ -19788,7 +19827,9 @@ class Renderer extends React.Component {
         const widget = this.getWidgetInstance(id);
         // widget can be undefined if it hasn't yet been rendered
         if (widget && widget.simpleValidate) {
-          widgetScores[id] = widget.simpleValidate(props == null ? void 0 : props.options, onInputError);
+          widgetScores[id] = widget.simpleValidate(_extends({}, props == null ? void 0 : props.options, {
+            scoring: true
+          }), onInputError);
         }
       });
       return widgetScores;
@@ -19938,9 +19979,7 @@ class Renderer extends React.Component {
     // they are re-rendered, so even if they've been
     // re-rendered we need to call these methods on them.
     _.each(this.widgetIds, id => {
-      // eslint-disable-next-line react/no-string-refs
-      const container = this.refs["container:" + id];
-      // @ts-expect-error - TS2339 - Property 'replaceWidgetProps' does not exist on type 'ReactInstance'.
+      const container = this._widgetContainers.get(makeContainerId(id));
       container && container.replaceWidgetProps(this.getWidgetProps(id));
     });
     if (this.props.serializedState && !_.isEqual(this.props.serializedState, this.getSerializedState())) {
@@ -20858,21 +20897,6 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 const _excluded$3 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
@@ -24884,22 +24908,33 @@ class Indicators extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("ul", {
-      className: css(styles$j.indicatorContainer)
+      // reduntantly add class name for use in .less files--
+      //   the styles object key gets hashed
+      className: classNames(css(styles$j.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
+      className: css(styles$j.indicator),
+      key: title
+    }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": i18n._("Skip to %(title)s", {
         title
       }),
-      key: title,
-      className: css(styles$j.indicator, i === this.props.currentGroup && styles$j.selectedIndicator),
-      tabIndex: 0,
+      style: styles$j.indicatorButton,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
-    }, i === this.props.currentGroup && /*#__PURE__*/React.createElement("span", {
+    }, ({
+      hovered,
+      focused,
+      pressed
+    }) => /*#__PURE__*/React.createElement(View, {
+      style: [styles$j.indicatorDot, (hovered || focused || pressed) && styles$j.indicatorDotFocused]
+    }, i === this.props.currentGroup && /*#__PURE__*/React.createElement(View, {
+      style: styles$j.indicatorDotActive
+    }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
-    }, i18n._("Current")))));
+    }, i18n._("Current"))))))));
   }
 }
 // TODO(jared): find a better name for this :) and for GradedGroup; the names
@@ -25047,19 +25082,42 @@ const styles$j = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     listStyle: "none",
-    margin: "unset"
+    margin: "unset",
+    paddingInlineStart: "unset",
+    flexWrap: "wrap"
   },
   indicator: {
+    width: 24,
+    height: 24
+  },
+  indicatorButton: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexWrap: "wrap",
+    placeContent: "center",
+    cursor: "pointer",
+    ":focus": {
+      outline: "none"
+    }
+  },
+  indicatorDot: {
+    boxSizing: "content-box",
     width: 10,
     height: 10,
     borderRadius: "100%",
-    border: "3px solid",
+    borderWidth: 2,
     borderColor: Color.blue,
-    marginLeft: 5,
-    cursor: "pointer"
+    borderStyle: "solid"
   },
-  selectedIndicator: {
-    backgroundColor: Color.blue
+  indicatorDotFocused: {
+    borderWidth: 5,
+    borderStyle: "double"
+  },
+  indicatorDotActive: {
+    backgroundColor: Color.blue,
+    width: "100%",
+    height: "100%"
   },
   container: {
     borderTop: `1px solid ${gray76}`,
@@ -42117,8 +42175,7 @@ class Transformer extends React.Component {
           // @ts-expect-error - TS2345 - Argument of type '{ type: "dilation"; center: any; scale: number; }' is not assignable to parameter of type 'PerseusTransformerTransformation'.
           self.doTransform({
             type: "dilation",
-            // NOTE(kevinb): It's hard to convince that this.dilationCircle
-            // will still be defined here.                    center: self.dilationCircle.centerPoint.coord,
+            center: self.dilationCircle.centerPoint.coord,
             scale: newRadius / oldRadius
           });
         },
@@ -43748,7 +43805,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "12.2.0";
+const libVersion = "12.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43890,7 +43947,7 @@ class ArticleRenderer extends React.Component {
         }),
         linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      })));
+      }, this.props.dependencies)));
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classes
@@ -44975,7 +45032,7 @@ class ServerItemRenderer extends React.Component {
     };
     const questionRenderer = /*#__PURE__*/React.createElement(context$1.Provider, {
       value: contextValue
-    }, /*#__PURE__*/React.createElement(Renderer, {
+    }, /*#__PURE__*/React.createElement(Renderer, _extends({
       keypadElement: this.props.keypadElement,
       problemNum: this.props.problemNum,
       onInteractWithWidget: this.handleInteractWithWidget,
@@ -44991,7 +45048,7 @@ class ServerItemRenderer extends React.Component {
       content: this.props.item.question.content,
       widgets: this.props.item.question.widgets,
       images: this.props.item.question.images
-    }));
+    }, this.props.dependencies)));
     const hintsRenderer = /*#__PURE__*/React.createElement(HintsRenderer, {
       hints: this.props.item.hints,
       hintsVisible: this.props.hintsVisible,