@khanacademy/perseus 46.0.0 → 47.0.0

package/dist/index.js

@@ -649,7 +649,7 @@ class InnerMathInput extends React__namespace.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$E.outerWrapper, this.state.focused && styles$E.wrapperFocused, this.props.hasError && styles$E.wrapperError]
+      style: [styles$D.outerWrapper, this.state.focused && styles$D.wrapperFocused, this.props.hasError && styles$D.wrapperError]
     }, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -685,7 +685,7 @@ class InnerMathInput extends React__namespace.Component {
         style: a11y.srOnly
       }, this.context.strings.mathInputDescription), /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$E.popoverContent
+        style: styles$D.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
@@ -750,9 +750,9 @@ const MathInputIcon = _ref => {
       fillColor = wonderBlocksTokens.color.offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$E.iconActive : styles$E.iconInactive;
+  const dynamicClass = active || focused ? styles$D.iconActive : styles$D.iconInactive;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$E.iconContainer, dynamicClass]
+    style: [styles$D.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -797,7 +797,7 @@ const inputFocused = {
   borderColor: wonderBlocksTokens.color.blue,
   margin: -1
 };
-const styles$E = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -2603,7 +2603,7 @@ class Expression extends React__namespace.Component {
   render() {
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        className: aphrodite.css(styles$D.mobileLabelInputWrapper)
+        className: aphrodite.css(styles$C.mobileLabelInputWrapper)
       }, !!this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
         htmlFor: this._textareaId,
         tag: "label"
@@ -2637,7 +2637,7 @@ class Expression extends React__namespace.Component {
       ERROR_TITLE
     } = this.context.strings;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      className: aphrodite.css(styles$D.desktopLabelInputWrapper)
+      className: aphrodite.css(styles$C.desktopLabelInputWrapper)
     }, !!this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       htmlFor: this._textareaId,
       tag: "label"
@@ -2676,7 +2676,7 @@ class Expression extends React__namespace.Component {
     }))));
   }
 }
-const styles$D = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   mobileLabelInputWrapper: {
     padding: "15px 4px 0"
   },
@@ -18124,33 +18124,33 @@ class Lint extends React__namespace.Component {
     let warningText;
     let warningTextStyle;
     if (this.props.severity === Severity.Error) {
-      severityStyle = styles$C.indicatorError;
+      severityStyle = styles$B.indicatorError;
       warningText = "Error";
-      warningTextStyle = styles$C.publishBlockingError;
+      warningTextStyle = styles$B.publishBlockingError;
     } else if (this.props.severity === Severity.Warning) {
-      severityStyle = styles$C.indicatorWarning;
+      severityStyle = styles$B.indicatorWarning;
       warningText = "Warning";
-      warningTextStyle = styles$C.warning;
+      warningTextStyle = styles$B.warning;
     } else {
-      severityStyle = styles$C.indicatorGuideline;
+      severityStyle = styles$B.indicatorGuideline;
       warningText = "Recommendation";
-      warningTextStyle = styles$C.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$C.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$C.tooltip, tooltipAbove && styles$C.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$C.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$C.tail, tooltipAbove && styles$C.tailAbove)
+      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
     })));
   };
 
@@ -18178,20 +18178,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$C.lintContainer, styles$C.lintContainerBlock)
-      }, this.renderLink(styles$C.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$C.lintContainer)
-      }, this.renderLink(styles$C.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$C.lintContainer)
-    }, this.renderLink(styles$C.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$C = 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.
@@ -19012,8 +19012,6 @@ function getWidgetFromWidgetMap(widgetId, widgetMap) {
 
 /**
  * Get select widgets from a widget map.
- * Useful for multi-items that needs to split
- * one PerseusItem into several
  *
  * @param {ReadonlyArray<string>} widgetIds to extract
  * @param {PerseusWidgetsMap} widgetMap to extract from
@@ -20618,7 +20616,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$B.mobileZoomableParentFix
+          ...styles$A.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -20758,7 +20756,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$B.mobileZoomableParentFix
+        ...styles$A.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -21221,7 +21219,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-const styles$B = {
+const styles$A = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -22187,10 +22185,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$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.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 (this.props.reviewMode && !this.props.currentValue) {
-      inputStyles.push(styles$A.answerStateUnanswered);
+      inputStyles.push(styles$z.answerStateUnanswered);
     }
     return /*#__PURE__*/React__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -22209,7 +22207,7 @@ class InputNumber extends React__namespace.Component {
     });
   }
 }
-const styles$A = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -23377,7 +23375,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$z.highlightRect),
+      className: aphrodite.css(styles$y.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -23396,7 +23394,7 @@ class HighlightRenderer extends React__namespace.PureComponent {
     })));
   }
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -23477,7 +23475,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$y.tooltipLabel),
+      className: aphrodite.css(styles$x.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -23497,7 +23495,7 @@ class HighlightTooltip extends React__namespace.PureComponent {
     }, /*#__PURE__*/React__namespace.createElement("div", null)));
   }
 }
-const styles$y = aphrodite.StyleSheet.create({
+const styles$x = 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
@@ -24055,7 +24053,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$x.container),
+      className: aphrodite.css(styles$w.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,
@@ -24076,14 +24074,14 @@ class HighlightableContent extends React__namespace.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$x.content),
+      className: aphrodite.css(styles$w.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React__namespace.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$x = aphrodite.StyleSheet.create({
+const styles$w = 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
@@ -24505,7 +24503,7 @@ class LineHeightMeasurer extends React__namespace.Component {
   }
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$w.measurer),
+      className: aphrodite.css(styles$v.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       ref: ref => this._line = ref,
@@ -24513,7 +24511,7 @@ class LineHeightMeasurer extends React__namespace.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$w = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -25494,11 +25492,11 @@ const FocusRing = function (_ref) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-testid": "focus-ring",
-    className: aphrodite.css(styles$v.ring),
+    className: aphrodite.css(styles$u.ring),
     style: style
   }, children);
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -25525,7 +25523,7 @@ function getChoiceLetter(pos, strings) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$u = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -25548,7 +25546,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$t.crossOutLine),
+    className: aphrodite.css(styles$s.crossOutLine),
     "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -25563,7 +25561,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -25647,7 +25645,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$u.iconWrapper)
+    className: aphrodite.css(styles$t.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: wonderBlocksTokens.color.blue,
     visible: focused || hovered,
@@ -25655,13 +25653,13 @@ const ChoiceIcon = function (props) {
   }, /*#__PURE__*/React__namespace.createElement("div", {
     style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$s.circle, showCorrectness && correct && styles$s.circleCorrect, showCorrectness && !correct && styles$s.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$s.circleIncorrectAnswered)
+    className: aphrodite.css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.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$s.innerWrapper)
+    className: aphrodite.css(styles$r.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -25670,7 +25668,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -25765,19 +25763,19 @@ const OptionStatus = function (props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$r.correct;
+    textStyle = styles$q.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$r.incorrectAnswered;
+      textStyle = styles$q.incorrectAnswered;
     } else {
-      textStyle = styles$r.incorrect;
+      textStyle = styles$q.incorrect;
     }
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$r.text, textStyle)
+    className: aphrodite.css(styles$q.text, textStyle)
   }, renderText(checked, correct, crossedOut, strings));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -25846,8 +25844,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$q.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$q.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$p.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$p.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
@@ -26014,7 +26012,7 @@ const Choice = function (props) {
     "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -26205,10 +26203,10 @@ const BaseRadio = function (_ref) {
   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$p.radio, styles$p.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$p.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$p.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$p.instructions, isMobile && styles$p.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$o.radio, styles$o.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$o.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$o.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$o.instructions, isMobile && styles$o.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
-  const responsiveClassName = aphrodite.css(styles$p.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$o.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -26259,7 +26257,7 @@ const BaseRadio = function (_ref) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.css(sharedStyles.aboveScratchpad, styles$p.item, styles$p.responsiveItem, checked && styles$p.selectedItem, checked && choice.highlighted && styles$p.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$p.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$p.nextHighlighted);
+      return aphrodite.css(sharedStyles.aboveScratchpad, styles$o.item, styles$o.responsiveItem, checked && styles$o.selectedItem, checked && choice.highlighted && styles$o.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$o.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$o.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -26324,10 +26322,10 @@ const BaseRadio = function (_ref) {
   // 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$p.responsiveContainer)
+    className: aphrodite.css(styles$o.responsiveContainer)
   }, fieldset);
 };
-const styles$p = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -27059,9 +27057,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$o.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$n.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$o.emptyHeaderCell)
+      className: aphrodite.css(styles$n.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -27069,7 +27067,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$o.header),
+        className: aphrodite.css(styles$n.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -27091,7 +27089,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$o.cell),
+          className: "category " + aphrodite.css(styles$n.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -27106,7 +27104,7 @@ class Categorizer extends React__namespace.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$o.radioSpan, selected && styles$o.checkedRadioSpan, this.props.static && selected && styles$o.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$n.radioSpan, selected && styles$n.checkedRadioSpan, this.props.static && selected && styles$n.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -27118,7 +27116,7 @@ class Categorizer extends React__namespace.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$o.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$n.fullBleedContainer] : [];
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -27130,7 +27128,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$o = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -27399,7 +27397,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$n.widthOverride, styleContainer && styles$n.container)
+      className: aphrodite.css(styles$m.widthOverride, styleContainer && styles$m.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -27409,7 +27407,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$n = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -27460,7 +27458,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$m.tooltipBody,
+          style: styles$l.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -27492,7 +27490,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$m = {
+const styles$l = {
   tooltipBody: {
     color: wonderBlocksTokens.color.offBlack,
     fontSize: 20,
@@ -27761,7 +27759,7 @@ class Explanation extends React__namespace.Component {
       marginRight: "-6px",
       "white-space": "normal"
     };
-    const contentStyling = [styles$l.content, this.state.expanded ? styles$l.contentExpanded : styles$l.contentCollapsed, allowTransition && (this.state.expanded ? styles$l.transitionExpanded : styles$l.transitionCollapsed)];
+    const contentStyling = [styles$k.content, this.state.expanded ? styles$k.contentExpanded : styles$k.contentCollapsed, allowTransition && (this.state.expanded ? styles$k.transitionExpanded : styles$k.transitionCollapsed)];
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "explanation-widget"
@@ -27780,7 +27778,7 @@ class Explanation extends React__namespace.Component {
       "aria-hidden": !this.state.expanded,
       testId: "content-container"
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.contentWrapper
+      style: styles$k.contentWrapper
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
@@ -27793,7 +27791,7 @@ class Explanation extends React__namespace.Component {
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
 const arrowHeight = 14;
-const styles$l = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   content: {
     borderLeft: "0px solid #ccc",
     display: "inline-grid",
@@ -27879,15 +27877,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       nextQuestion
     } = this.context.strings;
     const answerBarStyle = {
-      ...styles$k.answerBar,
+      ...styles$j.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? wonderBlocksTokens.color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     };
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$k.text
+      style: styles$j.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$k.tryAgainIcon
+      style: styles$j.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -27906,7 +27904,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$k.text
+      style: styles$j.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -27928,7 +27926,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$k = {
+const styles$j = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -28121,7 +28119,7 @@ class GradedGroup extends React__namespace.Component {
       }));
       gradeStatus = this.context.strings.incorrect;
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$j.gradedGroupInSet) : aphrodite.css(styles$j.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$i.gradedGroupInSet) : aphrodite.css(styles$i.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -28140,7 +28138,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$j.title)
+      className: aphrodite.css(styles$i.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       ref: this.rendererRef,
       apiOptions: {
@@ -28173,7 +28171,7 @@ class GradedGroup extends React__namespace.Component {
     }, this.context.strings.nextQuestion), 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$j.explanationTitle),
+      className: aphrodite.css(styles$i.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -28205,7 +28203,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$j.showHintLink)
+      className: aphrodite.css(styles$i.showHintLink)
     }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -28217,7 +28215,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$2 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -28298,20 +28296,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$i.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$h.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$i.indicator),
+        className: aphrodite.css(styles$h.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": this.context.strings.skipToTitle({
           title
         }),
-        style: styles$i.indicatorButton,
+        style: styles$h.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
       }, _ref2 => {
@@ -28321,9 +28319,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: [styles$i.indicatorDot, (hovered || focused || pressed) && styles$i.indicatorDotFocused]
+          style: [styles$h.indicatorDot, (hovered || focused || pressed) && styles$h.indicatorDotFocused]
         }, i === this.props.currentGroup && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$i.indicatorDotActive
+          style: styles$h.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, this.context.strings.current)));
@@ -28403,7 +28401,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$i.container)
+        className: aphrodite.css(styles$h.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -28426,13 +28424,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$i.container)
+      className: aphrodite.css(styles$h.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.top)
+      className: aphrodite.css(styles$h.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.title)
+      className: aphrodite.css(styles$h.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$i.spacer)
+      className: aphrodite.css(styles$h.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -28470,7 +28468,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -28576,7 +28574,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$h.buttonStyle, button.value === value && styles$h.selectedStyle),
+        className: aphrodite.css(styles$g.buttonStyle, button.value === value && styles$g.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -28589,7 +28587,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -31967,7 +31965,7 @@ const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$g.icon)
+  className: aphrodite.css(styles$f.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " + "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " + "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " + "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" + "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " + "0 0 0 0 6z"
@@ -31998,7 +31996,7 @@ const HiddenIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: aphrodite.css(styles$g.icon)
+  className: aphrodite.css(styles$f.icon)
 }, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
   id: "a",
   d: "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " + "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " + "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." + "604.401 1.268.401 1.966 0 1.02-.305 " + "1.967-.828 2.757l2.535 2.536a1 1 0 0 " + "1-1.414 1.414l-12-12a1 1 0 0 1 " + "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " + "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " + "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " + "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " + "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " + "2.363-3.085 3.929-4z"
@@ -32037,20 +32035,20 @@ const HUD = _ref => {
   let state;
   let icon;
   if (enabled) {
-    state = styles$g.enabled;
+    state = styles$f.enabled;
     icon = /*#__PURE__*/React__namespace.createElement(VisibleIcon, null);
   } else {
-    state = styles$g.disabled;
+    state = styles$f.disabled;
     icon = /*#__PURE__*/React__namespace.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React__namespace.createElement("button", {
-    className: aphrodite.css(styles$g.hud, fixedPosition && styles$g.hudFixedPosition, state),
+    className: aphrodite.css(styles$f.hud, fixedPosition && styles$f.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -32103,16 +32101,16 @@ const styles$g = aphrodite.StyleSheet.create({
 const InfoTipBase = props => {
   return /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
     content: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.Body, {
-      style: styles$f.body
+      style: styles$e.body
     }, props.children),
     placement: "right"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     size: "small",
     icon: questionIcon__default["default"],
-    style: styles$f.spacingLeft
+    style: styles$e.spacingLeft
   }));
 };
-const styles$f = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   spacingLeft: {
     marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
   },
@@ -32188,7 +32186,7 @@ class MultiButtonGroup extends React__namespace.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: aphrodite.css(styles$e.buttonStyle, selected && styles$e.selectedStyle),
+        className: aphrodite.css(styles$d.buttonStyle, selected && styles$d.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -32201,7 +32199,7 @@ class MultiButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$e = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -32605,14 +32603,6 @@ const LegacyGrid = _ref => {
  * A "PerseusArticle" is an item that is meant to be rendered as an article.
  * This item is never scored and is rendered by the `ArticleRenderer`.
  */
-/**
- * A "MultiItem" is an advanced Perseus item. It is rendered by the
- * `MultiRenderer` and you can control the layout of individual parts of the
- * item.
- *
- * @deprecated MultiItem support is slated for removal in a future Perseus
- * release.
- */
 const ItemExtras = [
 // The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
 "calculator",
@@ -39071,7 +39061,7 @@ const HideAnswersToggle = props => {
     strings
   } = usePerseusI18n();
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$d.switchWrapper
+    style: styles$c.switchWrapper
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -39083,7 +39073,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$d = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -39141,7 +39131,7 @@ const AnswerPill = props => {
       id: idFactory.get("perseus-label-image-widget-answer-pill"),
       onClick: correct ? undefined : onClick,
       ref: ref,
-      style: [style, popperStyle, styles$c.pill, correct && styles$c.correct, incorrect && styles$c.incorrect, (focused || hovered) && BringToFront]
+      style: [style, popperStyle, styles$b.pill, correct && styles$b.correct, incorrect && styles$b.incorrect, (focused || hovered) && BringToFront]
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: answerString,
       strings: strings,
@@ -39149,7 +39139,7 @@ const AnswerPill = props => {
     }));
   });
 };
-const styles$c = aphrodite.StyleSheet.create({
+const styles$b = aphrodite.StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -39215,25 +39205,25 @@ class Marker extends React__namespace.Component {
       icon: iconNull
     };
     if (showCorrectness) {
-      iconStyles = [styles$b.markerGraded, showCorrectness === "correct" ? styles$b.markerCorrect : styles$b.markerIncorrect, isOpen && styles$b.markerSelected];
+      iconStyles = [styles$a.markerGraded, showCorrectness === "correct" ? styles$a.markerCorrect : styles$a.markerIncorrect, isOpen && styles$a.markerSelected];
       args = {
         ...args,
         icon: showCorrectness === "correct" ? iconCheck : iconMinus
       };
     } else if (selectedAnswers && selectedAnswers.length > 0) {
-      iconStyles = [styles$b.markerFilled, isOpen && styles$b.markerSelected];
+      iconStyles = [styles$a.markerFilled, isOpen && styles$a.markerSelected];
     } else if (isOpen) {
-      iconStyles = [styles$b.markerSelected];
+      iconStyles = [styles$a.markerSelected];
       args = {
         ...args,
         icon: iconChevronDown,
         size: 8
       };
     } else if (showPulsate) {
-      iconStyles = [styles$b.markerPulsateBase, this._mounted && shouldReduceMotion() ? showPulsate && styles$b.markerUnfilledPulsateOnce : showPulsate && styles$b.markerUnfilledPulsateInfinite];
+      iconStyles = [styles$a.markerPulsateBase, this._mounted && shouldReduceMotion() ? showPulsate && styles$a.markerUnfilledPulsateOnce : showPulsate && styles$a.markerUnfilledPulsateInfinite];
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$b.markerIcon, iconStyles],
+      style: [styles$a.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React__namespace.createElement(Icon, args));
   }
@@ -39254,7 +39244,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$b.marker, active && !markerDisabled && styles$b.markerActive],
+      style: [styles$a.marker, active && !markerDisabled && styles$a.markerActive],
       "aria-label": markerDisabled ? this.context.strings.correctExcited : label
     }, this.renderIcon()), !!selected && showAnswer && /*#__PURE__*/React__namespace.createElement(AnswerPill, {
       selectedAnswers: selected,
@@ -39267,7 +39257,7 @@ class Marker extends React__namespace.Component {
     }));
   }
 }
-const styles$b = aphrodite.StyleSheet.create({
+const styles$a = aphrodite.StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: wonderBlocksTokens.color.white,
@@ -39861,13 +39851,13 @@ class LabelImage extends React__namespace.Component {
     const promptString = isMobile ? multipleAnswers ? strings.tapMultiple : strings.tapSingle : multipleAnswers ? strings.clickMultiple : strings.clickSingle;
     const choicesString = strings.choices;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$a.instructions))
+      className: classNames__default["default"]("perseus-label-image-widget-instructions", aphrodite.css(styles$9.instructions))
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$a.instructionsCaption)
+      className: aphrodite.css(styles$9.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$a.instructionsChoices)
+      className: aphrodite.css(styles$9.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$a.instructionsChoice),
+      className: aphrodite.css(styles$9.instructionsChoice),
       key: index
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: choice,
@@ -39885,20 +39875,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$a.markersCanvas),
+      className: aphrodite.css(styles$9.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$a.imageContainer,
+      className: aphrodite.css(styles$9.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$a.imageInteractionDisabled)
+      activeMarkerIndex !== -1 && styles$9.imageInteractionDisabled)
     }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref3 => {
       let {
         setAssetStatus
@@ -39924,7 +39914,7 @@ class LabelImage extends React__namespace.Component {
     }));
   }
 }
-const styles$a = aphrodite.StyleSheet.create({
+const styles$9 = aphrodite.StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -40012,7 +40002,7 @@ class Placeholder extends React__namespace.Component {
     const {
       layout
     } = this.props;
-    const className = aphrodite.css(styles$9.card, styles$9.placeholder, layout === "horizontal" && styles$9.horizontalCard);
+    const className = aphrodite.css(styles$8.card, styles$8.placeholder, layout === "horizontal" && styles$8.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -40219,7 +40209,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$9.card, styles$9.draggable, layout === "horizontal" && styles$9.horizontalCard, layout === "vertical" && styles$9.verticalCard, type === ItemState.DRAGGING && styles$9.dragging, type === ItemState.DISABLED && styles$9.disabled, !includePadding && styles$9.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
+    let className = aphrodite.css(styles$8.card, styles$8.draggable, layout === "horizontal" && styles$8.horizontalCard, layout === "vertical" && styles$8.verticalCard, type === ItemState.DRAGGING && styles$8.dragging, type === ItemState.DISABLED && styles$8.disabled, !includePadding && styles$8.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
     if (!includePadding) {
       className += " perseus-sortable-draggable-unpadded";
     }
@@ -40557,7 +40547,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$9.sortable) + " perseus-sortable";
+    const className = aphrodite.css(styles$8.sortable) + " perseus-sortable";
     const syncWidth = this.props.constraints?.width || layout === "vertical";
     const syncHeight = this.props.constraints?.height || layout === "horizontal";
     ___default["default"].each(this.state.items, function (item, i, items) {
@@ -40643,7 +40633,7 @@ class Sortable extends React__namespace.Component {
     }, cards);
   }
 }
-const styles$9 = aphrodite.StyleSheet.create({
+const styles$8 = aphrodite.StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -40839,25 +40829,25 @@ class Matcher extends React__namespace.Component {
     };
     const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
     return /*#__PURE__*/React__namespace.createElement("table", {
-      className: aphrodite.css(styles$8.widget) + " " + HACKY_CSS_CLASSNAME
+      className: aphrodite.css(styles$7.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React__namespace.createElement("tbody", null, showLabels && /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$8.row)
+      className: aphrodite.css(styles$7.row)
     }, /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$8.column, styles$8.columnLabel)
+      className: aphrodite.css(styles$7.column, styles$7.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     })), /*#__PURE__*/React__namespace.createElement("th", {
-      className: aphrodite.css(styles$8.column, styles$8.columnRight, styles$8.columnLabel)
+      className: aphrodite.css(styles$7.column, styles$7.columnRight, styles$7.columnLabel)
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     }))), /*#__PURE__*/React__namespace.createElement("tr", {
-      className: aphrodite.css(styles$8.row)
+      className: aphrodite.css(styles$7.row)
     }, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$8.column)
+      className: aphrodite.css(styles$7.column)
     }, /*#__PURE__*/React__namespace.createElement(Sortable, {
       options: left,
       layout: "vertical",
@@ -40872,7 +40862,7 @@ class Matcher extends React__namespace.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$8.column, styles$8.columnRight)
+      className: aphrodite.css(styles$7.column, styles$7.columnRight)
     }, /*#__PURE__*/React__namespace.createElement(Sortable, {
       options: right,
       layout: "vertical",
@@ -40890,7 +40880,7 @@ class Matcher extends React__namespace.Component {
 }
 const padding = 5;
 const border = "1px solid #444";
-const styles$8 = aphrodite.StyleSheet.create({
+const styles$7 = aphrodite.StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -41581,9 +41571,9 @@ function drawText(ctx, item) {
   if (item.value === null) {
     return;
   }
-  ctx.fillStyle = styles$7.fgColor;
-  ctx.font = styles$7.font;
-  ctx.fillText(item.value, item.pos[0] - styles$7.fontSizePx / 2 + 1, item.pos[1] + styles$7.fontSizePx / 2);
+  ctx.fillStyle = styles$6.fgColor;
+  ctx.font = styles$6.font;
+  ctx.fillText(item.value, item.pos[0] - styles$6.fontSizePx / 2 + 1, item.pos[1] + styles$6.fontSizePx / 2);
 }
 
 /**
@@ -41604,16 +41594,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$7.lineWidth;
-  ctx.strokeStyle = styles$7.fgColor;
+  ctx.lineWidth = 5 * styles$6.lineWidth;
+  ctx.strokeStyle = styles$6.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$7.lineWidth;
-  ctx.strokeStyle = styles$7.bgColor;
+  ctx.lineWidth = 3 * styles$6.lineWidth;
+  ctx.strokeStyle = styles$6.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -41640,16 +41630,16 @@ function drawTripleLine(ctx, item) {
 
   // Outer line that will form the two outer bond lines.
   let path = new Path2D();
-  ctx.lineWidth = 7 * styles$7.lineWidth;
-  ctx.strokeStyle = styles$7.fgColor;
+  ctx.lineWidth = 7 * styles$6.lineWidth;
+  ctx.strokeStyle = styles$6.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$7.lineWidth;
-  ctx.strokeStyle = styles$7.bgColor;
+  ctx.lineWidth = 5 * styles$6.lineWidth;
+  ctx.strokeStyle = styles$6.bgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -41671,8 +41661,8 @@ function drawTripleLine(ctx, item) {
  */
 function drawLine(ctx, item) {
   const path = new Path2D();
-  ctx.lineWidth = styles$7.lineWidth;
-  ctx.strokeStyle = styles$7.fgColor;
+  ctx.lineWidth = styles$6.lineWidth;
+  ctx.strokeStyle = styles$6.fgColor;
   path.moveTo(item.startPos[0], item.startPos[1]);
   path.lineTo(item.endPos[0], item.endPos[1]);
   ctx.stroke(path);
@@ -41724,7 +41714,7 @@ function compareElements(item0, item1) {
 function draw(ctx, items) {
   items.sort(compareElements).forEach(drawItem(ctx));
 }
-const styles$7 = {
+const styles$6 = {
   bgColor: "rgb(255, 255, 255)",
   fgColor: "rgb(0, 0, 0)",
   fontSizePx: 12,
@@ -43851,7 +43841,7 @@ class PhetSimulation extends React__namespace.Component {
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     const sandboxProperties = "allow-same-origin allow-scripts";
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$6.widgetContainer
+      style: styles$5.widgetContainer
     }, this.state.banner !== null &&
     /*#__PURE__*/
     // TODO(anna): Make this banner focusable
@@ -43864,12 +43854,12 @@ class PhetSimulation extends React__namespace.Component {
       kind: this.state.banner.kind,
       text: this.state.banner.message
     })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$6.iframeContainer
+      style: styles$5.iframeContainer
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       ref: this.iframeRef,
       title: this.props.description,
       sandbox: sandboxProperties,
-      className: aphrodite.css(styles$6.iframeResponsive),
+      className: aphrodite.css(styles$5.iframeResponsive),
       src: this.state.url?.toString(),
       allow: "fullscreen"
     })), this.state.url !== null && /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
@@ -43900,7 +43890,7 @@ const makeSafeUrl = (urlString, locale) => {
   url.searchParams.set("locale", locale);
   return url;
 };
-const styles$6 = aphrodite.StyleSheet.create({
+const styles$5 = aphrodite.StyleSheet.create({
   widgetContainer: {
     borderRadius: 6,
     borderWidth: 1,
@@ -44823,7 +44813,7 @@ class PythonProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$5.container
+      style: styles$4.container
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -44832,7 +44822,7 @@ class PythonProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$5 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   container: {
     margin: "auto",
     width: "100%"
@@ -45318,7 +45308,7 @@ const VideoTranscriptLink = props => {
       {
         const video = result.data?.video;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$4.transcriptLink
+          style: styles$3.transcriptLink
         }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.Text, null, video?.title), /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
           size: 10
         }), /*#__PURE__*/React__namespace.createElement(Link__default["default"], {
@@ -45335,7 +45325,7 @@ const VideoTranscriptLink = props => {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
   }
 };
-const styles$4 = aphrodite.StyleSheet.create({
+const styles$3 = aphrodite.StyleSheet.create({
   transcriptLink: {
     flexDirection: "row",
     width: "100%",
@@ -45456,7 +45446,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "46.0.0";
+const libVersion = "47.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45673,7 +45663,7 @@ class HintRenderer extends React__namespace.Component {
     const {
       isMobile
     } = apiOptions;
-    const classNames = classNames__default["default"]("hint", !isMobile && "perseus-hint-renderer", isMobile && aphrodite.css(styles$3.newHint), isMobile && lastRendered && aphrodite.css(styles$3.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
+    const classNames = classNames__default["default"]("hint", !isMobile && "perseus-hint-renderer", isMobile && aphrodite.css(styles$2.newHint), isMobile && lastRendered && aphrodite.css(styles$2.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
 
     // TODO(charlie): Allowing `customKeypad` would require that we
     // extend `ItemRenderer` to support nested inputs in the `HintsRenderer`.
@@ -45715,7 +45705,7 @@ class HintRenderer extends React__namespace.Component {
     );
   }
 }
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   newHint: {
     marginBottom: 1.5 * baseUnitPx,
     borderLeftColor: gray97,
@@ -45892,14 +45882,14 @@ class HintsRenderer extends React__namespace.Component {
     } = apiOptions;
     const showGetAnotherHint = getAnotherHint && hintsVisible > 0 && hintsVisible < this.props.hints.length;
     const hintRatioCopy = `(${hintsVisible}/${this.props.hints.length})`;
-    const classNames = classNames__default["default"](this.props.className, apiOptions.isMobile && hintsVisible > 0 && aphrodite.css(styles$2.mobileHintStylesHintsRenderer));
+    const classNames = classNames__default["default"](this.props.className, apiOptions.isMobile && hintsVisible > 0 && aphrodite.css(styles$1.mobileHintStylesHintsRenderer));
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classNames
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
+      className: aphrodite.css(styles$1.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
     }, this.context.strings.hints), hints, showGetAnotherHint && /*#__PURE__*/React__namespace.createElement("button", {
       rel: "button",
-      className: aphrodite.css(styles$2.linkButton, styles$2.getAnotherHintButton, apiOptions.isMobile && styles$2.mobileHintStylesGetAnotherHintButton),
+      className: aphrodite.css(styles$1.linkButton, styles$1.getAnotherHintButton, apiOptions.isMobile && styles$1.mobileHintStylesGetAnotherHintButton),
       onClick: evt => {
         evt.preventDefault();
         evt.stopPropagation();
@@ -45908,14 +45898,14 @@ class HintsRenderer extends React__namespace.Component {
         }
       }
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$2.plusText, apiOptions.isMobile && styles$2.mobileHintStylesPlusText)
+      className: aphrodite.css(styles$1.plusText, apiOptions.isMobile && styles$1.mobileHintStylesPlusText)
     }, "+"), /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$2.getAnotherHintText)
+      className: aphrodite.css(styles$1.getAnotherHintText)
     }, this.context.strings.getAnotherHint, " ", hintRatioCopy)));
   }
 }
 const hintIndentation = baseUnitPx + hintBorderWidth;
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
   rendererMargins: {
     marginTop: baseUnitPx
@@ -46335,11 +46325,11 @@ class ServerItemRenderer extends React__namespace.Component {
       // mobile hint styles, which are flush to the left.
       // NOTE(charlie): We may still want to apply this
       // padding for desktop exercises.
-      apiOptions.isMobile ? undefined : aphrodite.css(styles$1.hintsContainer)
+      apiOptions.isMobile ? undefined : aphrodite.css(styles.hintsContainer)
     }, hintsRenderer)));
   }
 }
-const styles$1 = aphrodite.StyleSheet.create({
+const styles = aphrodite.StyleSheet.create({
   hintsContainer: {
     marginLeft: 50
   }
@@ -46446,1148 +46436,6 @@ const traverse = function (rendererOptions, contentCallback, widgetCallback, opt
   return traverseRenderer$1(rendererOptions, contentCallback, deepCallbackFor(contentCallback, widgetCallback, optionsCallback), optionsCallback);
 };
 
-/**
- * Utility functions for constructing and inferring multi-item shapes.
- *
- * A shape is an object that serves as a runtime type declaration: it specifies
- * a tree structure for a particular class of multi-item. See shape-types.js
- * for further discussion.
- *
- * This module allows you to construct arbitrary Shape trees, by combining
- * leaf node shapes like `content` and `hint` into composite shapes like
- * `arrayOf(shape({foo: content, bar: hint}))`.
- */
-
-/**
- * These tools allow you to construct arbirtary shapes, by combining simple
- * leaf shapes like `content` and `hint` into composite shapes like
- * `arrayOf(shape({question: content, hints: arrayOf(hint)}))`.
- */
-const contentShape = {
-  type: "content"
-};
-const hintShape = {
-  type: "hint"
-};
-const tagsShape = {
-  type: "tags"
-};
-const buildArrayShape = elementShape => ({
-  type: "array",
-  elementShape
-});
-const buildObjectShape = shape => ({
-  type: "object",
-  shape
-});
-const hintsShape = buildArrayShape(hintShape);
-var shapes = {
-  content: contentShape,
-  hint: hintShape,
-  hints: hintsShape,
-  tags: tagsShape,
-  arrayOf: buildArrayShape,
-  shape: buildObjectShape
-};
-
-/**
- * Utility functions for manipulating multi-item-shaped trees.
- *
- * Multi-items are trees! But we also often have other trees that are shaped
- * like multi-items - for example, if we map a multi-item tree into a tree of
- * renderer info and state, and then map that again into a tree of just the
- * renderer nodes, like we do in MultiRenderer. See tree-types.js for further
- * discussion.
- *
- * These functions enable us to manipulate generic multi-item-shaped trees,
- * regardless of what type of data they contain at their leaves. You can use
- * the mapper functions to transform a tree into another tree of the same
- * shape, or to discover all the nodes of a particular type.
- *
- * We expose two simple mapper functions (mapContentNodes and mapHintNodes),
- * and also a more complex interface for creating a mapping over all of a
- * tree's node types simultaneously:
- *
- * `buildMapper()` returns a TreeMapper object that allows you to build your
- * mapper object one node type at a time. Then, you can execute your mapping by
- * calling the `mapTree` method.
- *
- * For example:
- *     const renderers = buildMapper()
- *         .setContentMapper(this.renderContentNode)
- *         .setHintMapper(this.renderHintNode)
- *         .setTagsMapper(this.renderTagsNode)
- *         .setArrayMapper(this.hideSkippedQuestions)
- *         .mapTree(tree, shape);
- *
- * This will copy the given tree, apply the given transformations to the
- * content, hint, and array nodes respectively, and return the resulting tree.
- *
- * For node types whose mappers aren't specified, we default to the identity
- * function. (This builder interface enables us to implement that default
- * behavior in a provably type-safe way, while not requiring the call site to
- * be aware of all the node types. Hooray!)
- *
- * The call to `setArrayMapper` must come last, because the array mapper's
- * argument types depend on the other mappers' types. See ArrayMapper for more
- * details.
- *
- * WARNING: These functions trust that the provided tree conforms to the
- * provided shape. If not, behavior is undefined and may not respect the type
- * signatures specified here.
- */
-
-/**
- * The sequence of edges that lead to a particular node in a Tree.
- * Elements can be `string` to correspond to an ObjectNode key, or `number` to
- * correspond to an ArrayNode index.
- */
-
-/**
- * These are function interfaces for mapping over various types of tree nodes.
- *
- * ArrayMapper is a bit more complicated than the leaf node mappers. It's
- * executed in the context of a `mapTree` call, after we've finished mapping
- * its child nodes, so the function has access to both the resulting array
- * (with mapped elements) and the original array (with the original untouched
- * elements).
- *
- * The ArrayMapper then has the opportunity to apply a final transformation to
- * the resulting array, like filtering certain elements or (in the hacky
- * MultiRenderer case) attaching a `renderHints` method to arrays of hint
- * renderers :)
- *
- * This is why `TreeMapper#setArrayMapper` must be called last: ArrayMapper's
- * types depend on the ContentMapper and HintMapper's types. And, since you can
- * only specify one mapper at a time in this builder interface (which is
- * necessary to provide default mappers in a type-safe way), you need your
- * dependencies to already be in place by the time you call `setArrayMapper`.
- * Otherwise, we'd have to set the ArrayMapper and *hope* that you *eventually*
- * provide a compatible ContentMapper and HintMapper, which is difficult to
- * prove at compile time.
- *
- * There's no ObjectMapper here, but not for any particular reason. We just
- * don't have a use case for it yet, so we haven't built it yet.
- */
-
-/**
- * A TreeMapper is a collection of node mappers, which, together, compose the
- * behavior for mapping over an entire tree.
- *
- * This serves as the interface for the two TreeMapper classes, including both
- * the internal mapper properties that we care about, and the `mapTree`
- * function that the call site will use.
- */
-
-/**
- * This is a TreeMapper that only has mappers specified for its leaf nodes; its
- * array mapper is the identity function.
- *
- * This is the TreeMapper initially returned by `buildMapper`. It allows you to
- * change the types of your ContentMapper and HintMapper, which is safe because
- * none of the other mappers that depend on those types (aka ArrayMapper) have
- * been specified yet. (Or, more specifically, the ArrayMapper is currently
- * `identity`, which can trivially vary with the ContentMapper and HintMapper's
- * types.)
- *
- * Once you call `setArrayMapper`, however, we move to the other class:
- * TreeMapperForLeavesAndCollections.
- */
-class TreeMapperJustForLeaves {
-  content;
-  hint;
-  tags;
-  array;
-  constructor(content, hint, tags) {
-    this.content = content;
-    this.hint = hint;
-    this.tags = tags;
-    this.array = identity;
-  }
-  setContentMapper(newContentMapper) {
-    return new TreeMapperJustForLeaves(newContentMapper, this.hint, this.tags);
-  }
-  setHintMapper(newHintMapper) {
-    return new TreeMapperJustForLeaves(this.content, newHintMapper, this.tags);
-  }
-  setTagsMapper(newTagsMapper) {
-    return new TreeMapperJustForLeaves(this.content, this.hint, newTagsMapper);
-  }
-  setArrayMapper(newArrayMapper) {
-    return new TreeMapperForLeavesAndCollections(this.content, this.hint, this.tags, newArrayMapper);
-  }
-
-  // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
-  mapTree(tree, shape) {
-    return mapTree(tree, shape, [], this);
-  }
-}
-
-/**
- * This is a TreeMapper that already has an ArrayMapper specified, so its
- * ContentMapper and HintMapper are now locked in.
- */
-class TreeMapperForLeavesAndCollections {
-  content;
-  hint;
-  tags;
-  array;
-  constructor(content, hint, tags, array) {
-    this.content = content;
-    this.hint = hint;
-    this.tags = tags;
-    this.array = array;
-  }
-  setArrayMapper(newArrayMapper) {
-    return new TreeMapperForLeavesAndCollections(this.content, this.hint, this.tags, newArrayMapper);
-  }
-
-  // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
-  mapTree(tree, shape) {
-    return mapTree(tree, shape, [], this);
-  }
-}
-function identity(x) {
-  return x;
-}
-
-/**
- * Return a new TreeMapper that will perform a no-op transformation on an input
- * tree. To make it useful, chain any combination of `setContentMapper`,
- * `setHintMapper`, `setTagMapper`, and `setArrayMapper` to specify
- * transformations for the individual node types.
- */
-// @ts-expect-error - TS2300 - Duplicate identifier 'C'. | TS2300 - Duplicate identifier 'H'. | TS2300 - Duplicate identifier 'T'.
-function buildMapper() {
-  return new TreeMapperJustForLeaves(identity, identity, identity);
-}
-
-/**
- * Copy the given tree, apply the corresponding transformation specified in the
- * TreeMapper to each node, and return the resulting tree.
- */
-function mapTree(
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-tree, shape, path, mappers
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-) {
-  // We trust the shape of the multi-item to match the shape provided at
-  // runtime. Therefore, in each shape branch, we cast the node to `any` and
-  // reinterpret it as the expected node type.
-  if (shape.type === "content") {
-    const content = tree;
-    return mappers.content(content, shape, path);
-  }
-  if (shape.type === "hint") {
-    const hint = tree;
-    return mappers.hint(hint, shape, path);
-  }
-  if (shape.type === "tags") {
-    const tags = tree;
-    return mappers.tags(tags, shape, path);
-  }
-  if (shape.type === "array") {
-    // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
-    const array = tree;
-    if (!Array.isArray(array)) {
-      throw new perseusCore.PerseusError(`Invalid object of type "${typeof array}" found at path ` +
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      `${["<root>"].concat(path).join(".")}. Expected array.`, perseusCore.Errors.Internal);
-    }
-    const elementShape = shape.elementShape;
-    // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
-    const mappedElements = array.map((inner, i) => mapTree(inner, elementShape, path.concat(i), mappers));
-    return mappers.array(mappedElements, array, shape, path);
-  }
-  if (shape.type === "object") {
-    const object = tree;
-    if (object && typeof object !== "object") {
-      throw new perseusCore.PerseusError(`Invalid object of type "${typeof object}" found at ` +
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      `path ${["<root>"].concat(path).join(".")}. Expected ` + `"object" type.`, perseusCore.Errors.InvalidInput);
-    }
-    const valueShapes = shape.shape;
-    if (!valueShapes) {
-      throw new perseusCore.PerseusError(`Unexpected shape ${JSON.stringify(shape)} at path ` +
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      `${["<root>"].concat(path).join(".")}.`, perseusCore.Errors.InvalidInput);
-    }
-    const newObject = {};
-    Object.keys(valueShapes).forEach(key => {
-      if (!(key in object)) {
-        throw new perseusCore.PerseusError(`Key "${key}" is missing from shape at path ` +
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        `${["<root>"].concat(path).join(".")}.`, perseusCore.Errors.InvalidInput);
-      }
-      newObject[key] = mapTree(object[key], valueShapes[key], path.concat(key), mappers);
-    });
-    return newObject;
-  }
-  throw new perseusCore.PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
-}
-
-/**
- * Utility functions for constructing and manipulating multi-items.
- *
- * These functions apply *specifically* to Items and ItemTrees - things that
- * actually semantically *are* multi-items. For more general functions for
- * traversing and manipulating *anything* shaped like a multi-item (like a
- * renderer tree or a score tree or, well, a multi-item), see trees.js.
- */
-/**
- * Return a semantically empty ItemTree that conforms to the given shape.
- *
- * - An empty content node has an empty content string and no widgets/images.
- * - An empty hint node has an empty content string and no widgets/images.
- * - An empty array node has no elements.
- * - An empty object node has a semantically empty node for each of its keys.
- *   (That is, we recursively call buildEmptyItemTreeForShape for each key.)
- */
-function buildEmptyItemTreeForShape(shape) {
-  if (shape.type === "content") {
-    return {
-      __type: "content",
-      content: "",
-      images: {},
-      widgets: {}
-    };
-  }
-  if (shape.type === "hint") {
-    return {
-      __type: "hint",
-      replace: false,
-      content: "",
-      images: {},
-      widgets: {}
-    };
-  }
-  if (shape.type === "tags") {
-    return [];
-  }
-  if (shape.type === "array") {
-    return [];
-  }
-  if (shape.type === "object") {
-    const valueShapes = shape.shape;
-    const object = {};
-    Object.keys(valueShapes).forEach(key => {
-      object[key] = buildEmptyItemTreeForShape(valueShapes[key]);
-    });
-    return object;
-  }
-  throw new perseusCore.PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
-}
-
-/**
- * Return a semantically empty Item that conforms to the given shape.
- *
- * - An empty content node has an empty content string and no widgets/images.
- * - An empty hint node has an empty content string and no widgets/images.
- * - An empty array node has no elements.
- * - An empty object node has a semantically empty node for each of its keys.
- *   (That is, we recursively call buildEmptyItemTreeForShape for each key.)
- */
-function buildEmptyItemForShape(shape) {
-  return treeToItem(buildEmptyItemTreeForShape(shape));
-}
-
-/**
- * Given an Item and its Shape, yield all of its content nodes to the callback.
- */
-function findContentNodesInItem$2(item, shape, callback) {
-  const itemTree = itemToTree(item);
-  buildMapper().setContentMapper(callback).mapTree(itemTree, shape);
-}
-
-/**
- * Given an Item and its Shape, yield all of its hint nodes to the callback.
- */
-function findHintNodesInItem(item, shape, callback) {
-  const itemTree = itemToTree(item);
-  buildMapper().setHintMapper(callback).mapTree(itemTree, shape);
-}
-
-/**
- * Given an ItemTree, return a Shape that it conforms to.
- *
- * The Shape might not be complete or correct Shape that this Item was designed
- * for. If you have access to the intended Shape, use that instead.
- */
-function inferItemShape$2(item) {
-  const itemTree = itemToTree(item);
-  return inferItemTreeShape(itemTree);
-}
-function inferItemTreeShape(node) {
-  if (Array.isArray(node)) {
-    if (node.length) {
-      if (typeof node[0] === "string") {
-        // There's no ItemTree that can manifest as a string.
-        // So, an array of strings must be a TagsNode, not ArrayNode.
-        return shapes.tags;
-      }
-      // Otherwise, assume that this is a valid ArrayNode, and
-      // therefore the shape of the first element applies to all
-      // elements in the array.
-      return shapes.arrayOf(inferItemTreeShape(node[0]));
-    }
-    // The array is empty, so we arbitrarily guess that it's a content
-    // array. As discussed in the docstring, this might be incorrect,
-    // and you shouldn't depend on it.
-    return shapes.arrayOf(shapes.content);
-  }
-  if (
-  // TODO(mdr): Remove #LegacyContentNode support.
-  typeof node === "object" && (node.__type === "content" || node.__type === "item")) {
-    return shapes.content;
-  }
-  if (typeof node === "object" && node.__type === "hint") {
-    return shapes.hint;
-  }
-  if (typeof node === "object") {
-    const valueShapes = {};
-    Object.keys(node).forEach(key => {
-      valueShapes[key] = inferItemTreeShape(node[key]);
-    });
-    return shapes.shape(valueShapes);
-  }
-  throw new perseusCore.PerseusError(`unexpected multi-item node ${JSON.stringify(node)}`, perseusCore.Errors.InvalidInput);
-}
-
-/**
- * Convert the given Item to an ItemTree, by unwrapping the `_multi` key.
- */
-function itemToTree(item) {
-  return item._multi;
-}
-
-/**
- * Convert the given ItemTree to an Item, by wrapping it in the `_multi` key.
- */
-function treeToItem(node) {
-  return {
-    _multi: node
-  };
-}
-
-var isObject$1 = function (obj) {
-  return obj === Object(obj);
-};
-var merge = function () {
-  var obj = {};
-  for (var i = 0; i < arguments.length; i++) {
-    var source = arguments[i];
-    if (source) {
-      for (var prop in source) {
-        obj[prop] = source[prop];
-      }
-    }
-  }
-  return obj;
-};
-var clone = function (obj) {
-  if (!isObject$1(obj)) {
-    return obj;
-  }
-  return Array.isArray(obj) ? obj.slice() : merge(obj);
-};
-
-/* TODO batch *all* mutations
- * idea: freeze / thaw implementations for all types
- * lens constructor thaws, freeze delegates to type's freeze
- */
-
-// equivalents, without requiring it
-// find the implementation to use for a given object
-var dispatch = function (x) {
-  if (Array.isArray(x)) {
-    return arr;
-  } else if (isObject$1(x)) {
-    return obj;
-  } else if (typeof x === "string") {
-    return str;
-  }
-};
-
-// This is underscore with a different name
-var lens = function (obj) {
-  if (obj instanceof lens) {
-    return obj;
-  }
-  if (!(this instanceof lens)) {
-    return new lens(obj);
-  }
-  var ops = dispatch(obj);
-  this._wrapped = ops.thaw ? ops.thaw(obj) : obj;
-};
-lens.prototype.freeze = function () {
-  var obj = this._wrapped;
-  var ops = dispatch(obj);
-  return ops.freeze ? ops.freeze(obj) : obj;
-};
-lens.prototype.zoom = function (lensArr) {
-  if (this._zoomStack === undefined) {
-    this._zoomStack = [];
-  }
-  this._zoomStack.push({
-    zoom: lensArr,
-    wrapped: this._wrapped
-  });
-  this._wrapped = lens(this._wrapped).get(lensArr);
-  return this;
-};
-lens.prototype.deZoom = function () {
-  var frame = this._zoomStack.pop();
-  this._wrapped = lens(frame.wrapped).set(frame.zoom, this._wrapped).freeze();
-  return this;
-};
-lens.prototype.get = function (lensArr) {
-  var obj = this._wrapped;
-  for (var i = 0; i < lensArr.length; i++) {
-    obj = dispatch(obj).get(obj, lensArr[i]);
-  }
-  return obj;
-};
-lens.prototype.mod = function (lensArr, f) {
-  var obj = this._wrapped;
-  var newObj = clone(obj);
-  var ops = dispatch(obj);
-  if (lensArr.length === 0) {
-    this._wrapped = f(this._wrapped);
-  } else if (lensArr.length === 1) {
-    this._wrapped = ops.mod(newObj, lensArr[0], f);
-  } else {
-    var monocle = lensArr[0];
-    var shortLens = lensArr.slice(1);
-
-    // newObj = ops.mod(obj[monocle], shortLens, f);
-
-    newObj[monocle] = lens(obj[monocle]).mod(shortLens, f).freeze();
-    this._wrapped = newObj;
-  }
-  return this;
-};
-
-// TODO - move to individual files
-lens.prototype.merge = function (lensArr, props) {
-  this._wrapped = lens(this._wrapped).mod(lensArr, function (oldProps) {
-    return merge(oldProps, props);
-  }).freeze();
-  return this;
-};
-
-// Lens must have length >= 1 or there would be nothing to return
-lens.prototype.del = function (lensArr) {
-  var obj = this._wrapped;
-  var ops = dispatch(obj);
-  if (lensArr.length === 1) {
-    this._wrapped = ops.del(obj, lensArr[0]);
-  } else {
-    var monocle = lensArr[0];
-    var shortLens = lensArr.slice(1);
-    var newObj = clone(obj);
-    newObj[monocle] = lens(obj[monocle]).del(shortLens).freeze();
-    this._wrapped = newObj;
-  }
-  return this;
-};
-lens.prototype.set = function (lensArr, set) {
-  return this.mod(lensArr, function () {
-    return set;
-  });
-};
-
-// ARRAY FUNCTIONS
-
-const arr = {
-  get: function (arr, monocle) {
-    return arr[monocle];
-  },
-  set: function (arr, monocle, val) {
-    var newArr = arr.splice();
-    newArr[monocle] = val;
-    return newArr;
-  },
-  mod: function (arr, monocle, f) {
-    var newArr = arr.slice();
-    newArr[monocle] = f(arr[monocle]);
-    return newArr;
-  },
-  del: function (arr, monocle) {
-    var newArr = arr.slice();
-    newArr.splice(monocle, 1);
-    return newArr;
-  }
-};
-
-/*
-// Lens must point to a member of an array. We'll insert into that array.
-lens.prototype.insertAt = function(lensArr, toInsert) {
-    var obj = this._wrapped;
-
-    var arrLens = lensArr.slice(0, -1);
-    var arr = lens(obj).get(arrLens).slice(); // slice to copy
-
-    var arrIdx = lensArr[lensArr.length-1];
-    arr.splice(arrIdx, 0, toInsert);
-    return lens(obj).set(arrLens, arr);
-};
-
-lens.prototype.insertBefore = lens.prototype.insertAt;
-lens.prototype.insertAfter = function(lensArr, toInsert) {
-    var newLens = lensArr.slice();
-    newLens[newLens.length-1] += 1;
-    return lens(this._wrapped).insertAt(newLens, toInsert);
-};
-*/
-
-// OBJECT FUNCTIONS
-
-const obj = {
-  get: function (obj, monocle) {
-    return obj[monocle];
-  },
-  set: function (obj, monocle, val) {
-    var newObj = clone(obj);
-    newObj[monocle] = val;
-    return newObj;
-  },
-  mod: function (obj, monocle, f) {
-    var newObj = clone(obj);
-    newObj[monocle] = f(obj[monocle]);
-    return newObj;
-  },
-  del: function (obj, monocle) {
-    var newObj = clone(obj);
-    delete newObj[monocle];
-    return newObj;
-  }
-};
-
-// STRING FUNCTIONS
-
-const str = {
-  get: function (arr, monocle) {
-    return arr[monocle];
-  },
-  set: function (arr, monocle, val) {
-    var newArr = arr.splice();
-    newArr[monocle] = val;
-    return newArr;
-  },
-  mod: function (arr, monocle, f) {
-    var newArr = arr.splice();
-    newArr[monocle] = f(arr[monocle]);
-    return newArr;
-  },
-  del: function (arr, monocle) {
-    var newArr = arr.slice();
-    newArr.splice(monocle);
-    return newArr;
-  }
-};
-
-// TODO(mdr)
-// TODO(mdr)
-// TODO(mdr)
-
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-
-/**
- * TODO(somewhatabstract, JIRA-XXXX):
- * Some usage of this type somewhere is causing TypeScript to believe that these
- * elements should be components. Don't know where that is, to fix it up
- * properly. In reality, these types are just too hard to use and aren't
- * really helping us out as I now have to suppress this rather than
- * get value from the type. :(
- */ // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-class MultiRenderer extends React__namespace.Component {
-  static contextType = PerseusI18nContext;
-  rendererDataTreeMapper;
-  getRenderersMapper;
-  constructor(props) {
-    super(props);
-    this.rendererDataTreeMapper = buildMapper()
-    // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ContentNode'.
-    .setContentMapper((c, _, p) => this._makeContentRendererData(c, p))
-    // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'HintNode'.
-    .setHintMapper(h => this._makeHintRendererData(h)).setTagsMapper(t => null);
-
-    // @ts-expect-error - TS2322 - Type 'TreeMapperForLeavesAndCollections<unknown, any, unknown, any, unknown, unknown>' is not assignable to type 'TreeMapper<ContentRendererData, ContentRendererElement, HintRendererData, HintRendererElement, null, null>'.
-    this.getRenderersMapper = buildMapper()
-    // @ts-expect-error - TS2571 - Object is of type 'unknown'.
-    .setContentMapper(c => c.makeRenderer())
-    // @ts-expect-error - TS2571 - Object is of type 'unknown'.
-    .setHintMapper(h => h.makeRenderer()).setArrayMapper((renderers, data, shape) => this._annotateRendererArray(renderers, data, shape));
-
-    // Keep state in sync with props.
-    this.state = this._tryMakeRendererState(this.props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Keep state in sync with props.
-    if (nextProps.item !== this.props.item) {
-      this.setState(this._tryMakeRendererState(nextProps));
-    }
-  }
-
-  /**
-   * Attempt to build a State that includes a renderer tree corresponding to
-   * the item provided in props. On error, return a state with `renderError`
-   * set instead.
-   */
-  _tryMakeRendererState(props) {
-    try {
-      return {
-        rendererDataTree: this._makeRendererDataTree(props.item, props.shape),
-        renderError: null
-      };
-    } catch (e) {
-      Log.error("Error building tree state", perseusCore.Errors.Internal, {
-        cause: e
-      });
-      return {
-        rendererDataTree: null,
-        renderError: e
-      };
-    }
-  }
-  _handleSerializedStateUpdated = (path, newState) => {
-    const {
-      onSerializedStateUpdated
-    } = this.props;
-    if (onSerializedStateUpdated) {
-      const oldState = this._getSerializedState(this.props.serializedState);
-      onSerializedStateUpdated(lens(oldState).set(path, newState).freeze());
-    }
-  };
-
-  /**
-   * Props that aren't directly used by the MultiRenderer are delegated to
-   * the underlying Renderers.
-   */
-  _getRendererProps() {
-    // `item`, `children`, and others are unused. I'm
-    // explicitly pulling them out of `this.props` so I don't pass them to
-    // `<Renderer>`. I'm not sure how else to do this.
-    const {
-      item: _,
-      children: __,
-      shape: ___,
-      serializedState: ____,
-      onSerializedStateUpdated: _____,
-      ...otherProps
-    } = this.props;
-    return {
-      ...otherProps,
-      strings: this.context.strings
-    };
-  }
-
-  /**
-   * Construct a Renderer and a ref placeholder for the given ContentNode.
-   */
-  _makeContentRendererData(content, path) {
-    // NOTE(emily): The `findExternalWidgets` function here is computed
-    //     inline and thus changes each time we run this function. If it
-    //     were to change every render, it would cause the Renderer to
-    //     re-render a lot more than is necessary. Don't re-compute this
-    //     element unless it is necessary!
-    // HACK(mdr): TypeScript can't prove that this is a ContentRendererData,
-    //     because of how we awkwardly construct it in order to obtain a
-    //     circular reference. But it is, I promise.
-    const data = {
-      ref: null,
-      makeRenderer: null
-    };
-    const refFunc = e => data.ref = e;
-    const findExternalWidgets = criterion => this._findWidgets(data, criterion);
-    const handleSerializedState = state => this._handleSerializedStateUpdated(path, state);
-    data.makeRenderer = () =>
-    /*#__PURE__*/
-    /**
-     * TODO(somewhatabstract, JIRA-XXXX):
-     * `content` contains props that Renderer doesn't have. However,
-     * since the type for `content` is not exact, it's hard to know
-     * if this spread is including undocumented props so mapping
-     * one to one could introduce a bug. Need to work out the exact
-     * type for ContentNode and then fix this.
-     */
-    // @ts-expect-error - TS2322 - Type '{ ref: (e: any) => any; findExternalWidgets: (criterion: any) => readonly (Widget | null | undefined)[]; serializedState: any; onSerializedStateUpdated: (state: any) => void; __type: "content" | "item"; ... 9 more ...; reviewMode?: boolean | ... 1 more ... | undefined; }' is not assignable to type 'InexactPartial<Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "content" | "images" | "onRender" | "linterContext" | "widgets" | "alwaysUpdate" | ... 6 more ... | "serializedState">>'.
-    React__namespace.createElement(Renderer, _extends({}, this._getRendererProps(), content, {
-      ref: refFunc,
-      findExternalWidgets: findExternalWidgets,
-      serializedState: this.props.serializedState ? lens(this.props.serializedState).get(path) : null,
-      onSerializedStateUpdated: handleSerializedState
-    }));
-    return data;
-  }
-
-  /**
-   * Construct a Renderer for the given HintNode, and keep track of the hint
-   * itself for future use, too.
-   */
-  _makeHintRendererData(hint) {
-    // TODO(mdr): Once HintsRenderer supports inter-widget communication,
-    //     give it a ref. Until then, leave the ref null forever, to avoid
-    //     confusing the findWidgets functions.
-    //
-    // NOTE(davidflanagan): As a partial step toward inter-widget
-    // communication we're going to pass a findExternalWidgets function
-    // (using a dummy data object). This allows passage-ref widgets in
-    // hints to use findWidget() to find the passage widgets they reference.
-    // Note that this is one-way only, however. It does not allow
-    // widgets in the question to find widgets in the hints, for example.
-    const findExternalWidgets = criterion => this._findWidgets({}, criterion);
-    return {
-      hint,
-      findExternalWidgets,
-      // _annotateRendererArray() needs this
-      ref: null,
-      makeRenderer: () => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        findExternalWidgets: findExternalWidgets
-        // Note(Jeremy): The MultiRenderer codebase types are
-        // slightly different from the rest of the codebase.
-        // Ideally `HintNode` would spread the `Hint` type into it,
-        // but there is a difference in optionality of `widgets`
-        // and `images` and that causes a huge cascade of type
-        // errors (they are truly optional, but most of our code
-        // assumes they're provided/set). Ignoring this for now.
-        // @ts-expect-error - TS2769 - Type 'HintNode' is not assignable to type 'Hint'.
-        ,
-        hints: [hint]
-      }))
-    };
-  }
-
-  /**
-   * Construct a tree of interconnected RendererDatas, corresponding to the
-   * given item. Called in `_tryMakeRendererState`, in order to store this
-   * tree in the component state.
-   */
-  _makeRendererDataTree(item, shape) {
-    const itemTree = itemToTree(item);
-    return this.rendererDataTreeMapper.mapTree(itemTree, shape);
-  }
-
-  /**
-   * Return all widgets that meet the given criterion, from all Renderers
-   * except the Renderer that triggered this call.
-   *
-   * This function is provided to each Renderer's `findExternalWidgets` prop,
-   * which enables widgets in different Renderers to discover each other and
-   * communicate.
-   */
-  _findWidgets(callingData, filterCriterion) {
-    const results = [];
-    this._mapRenderers(data => {
-      if (callingData !== data && data.ref) {
-        results.push(...data.ref.findInternalWidgets(filterCriterion));
-      }
-    });
-    return results;
-  }
-
-  /**
-   * Copy the renderer tree, apply the given transformation to the leaf nodes
-   * and the optional given transformation to the array nodes, and return the
-   * result.
-   *
-   * Used to provide structured data to the call site (the Renderer tree on
-   * `render`, the Score tree on `getScores`, etc.), and to traverse the
-   * renderer tree even when we disregard the output (like in
-   * `_findWidgets`).
-   */
-  _mapRenderers(
-  // eslint-disable-next-line no-restricted-syntax
-  leafMapper
-  // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-  ) {
-    const {
-      rendererDataTree
-    } = this.state;
-    if (!rendererDataTree) {
-      return null;
-    }
-    const mapper = buildMapper().setContentMapper(leafMapper).setHintMapper(leafMapper);
-    return mapper.mapTree(rendererDataTree, this.props.shape);
-  }
-  _scoreFromRef(ref) {
-    if (!ref) {
-      return null;
-    }
-    const [guess, score] = ref.guessAndScore();
-    let state;
-    if (ref.getSerializedState) {
-      state = ref.getSerializedState();
-    }
-    return keScoreFromPerseusScore(score, guess, state);
-  }
-
-  /**
-   * Return a tree in the shape of the multi-item, with scores at each of
-   * the content nodes and `null` at the other leaf nodes.
-   */
-  getScores() {
-    return this._mapRenderers(data => this._scoreFromRef(data.ref));
-  }
-
-  /**
-   * Return a single composite score for all rendered content nodes.
-   * The `guess` is a tree in the shape of the multi-item, with an individual
-   * guess at each content node and `null` at the other leaf nodes.
-   */
-  score() {
-    const scores = [];
-    const state = [];
-    const guess = this._mapRenderers(data => {
-      if (!data.ref) {
-        return null;
-      }
-      if (data.ref.getSerializedState) {
-        state.push(data.ref.getSerializedState());
-      }
-      scores.push(data.ref.score());
-      return data.ref?.getUserInput();
-    });
-    const combinedScore = scores.reduce(combineScores);
-    return keScoreFromPerseusScore(combinedScore, guess, state);
-  }
-
-  /**
-   * Return a tree in the shape of the multi-item, with serialized state at
-   * each of the content nodes and `null` at the other leaf nodes.
-   *
-   * If the lastSerializedState argument is supplied, this function will fill
-   * in the state of not-currently-rendered content and hint nodes with the
-   * values from the previous serialized state. If no lastSerializedState is
-   * supplied, `null` will be returned for not-currently-rendered content and
-   * hint nodes.
-   */
-  _getSerializedState(lastSerializedState) {
-    return this._mapRenderers((data, _, path) => {
-      if (data.ref) {
-        return data.ref.getSerializedState();
-      }
-      if (lastSerializedState) {
-        return lens(lastSerializedState).get(path);
-      }
-      return null;
-    });
-  }
-
-  /**
-   * Given a tree in the shape of the multi-item, with serialized state at
-   * each of the content nodes, restore each state to the corresponding
-   * renderer if currently mounted.
-   */
-  restoreSerializedState(serializedState, callback) {
-    // We want to call our async callback only once all of the childrens'
-    // callbacks have run. We add one to this counter before we call out to
-    // each renderer and decrement it when it runs our callback.
-    let numCallbacks = 0;
-    const countCallback = () => {
-      numCallbacks--;
-      if (callback && numCallbacks === 0) {
-        callback();
-      }
-    };
-    this._mapRenderers((data, _, path) => {
-      if (!data.ref) {
-        return;
-      }
-      const state = lens(serializedState).get(path);
-      if (!state) {
-        return;
-      }
-      numCallbacks++;
-      data.ref?.restoreSerializedState(state, countCallback);
-    });
-  }
-
-  /**
-   * Given an array of renderers, if it happens to be an array of *hint*
-   * renderers, then attach a `firstN` method to the array, which allows the
-   * layout to render the hints together in one HintsRenderer.
-   */
-  _annotateRendererArray(renderers, rendererDatas, shape) {
-    if (shape.elementShape.type === "hint") {
-      // The shape says that these are HintRendererDatas, even though
-      // it's not provable at compile time, so perform a cast.
-      const hintRendererDatas = rendererDatas;
-      renderers = [...renderers];
-      renderers.firstN = n => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        findExternalWidgets: hintRendererDatas[0] ? hintRendererDatas[0].findExternalWidgets : undefined,
-        hints: hintRendererDatas.map(d => d.hint),
-        hintsVisible: n
-      }));
-    }
-    return renderers;
-  }
-
-  /**
-   * Return a tree in the shape of the multi-item, with a Renderer at each
-   * content node and a HintRenderer at each hint node.
-   *
-   * This is generated by running each of the `makeRenderer` functions at the
-   * leaf nodes.
-   */
-  _getRenderers() {
-    return this.getRenderersMapper.mapTree(this.state.rendererDataTree, this.props.shape);
-  }
-  render() {
-    if (this.state.renderError) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles.error)
-      }, this.context.strings.errorRendering({
-        error: String(this.state.renderError)
-      }));
-    }
-
-    // Pass the renderer tree to the `children` function, which will
-    // determine the actual content of this component.
-    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
-      value: this.props.dependencies
-    }, this.props.children({
-      renderers: this._getRenderers()
-    }));
-  }
-}
-const styles = aphrodite.StyleSheet.create({
-  error: {
-    color: "red"
-  }
-});
-
-/**
- * Utility functions to build React PropTypes for multi-items and shapes.
- *
- * If you're writing new components, though, consider using the Item and Shape
- * types instead.
- */
-/**
- * Return a PropType that accepts Items of the given shape, and rejects other
- * objects.
- *
- * Usage: `propTypes: {item: buildPropTypeForShape(myShape)}`
- */
-function buildPropTypeForShape(shape) {
-  return PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-    _multi: buildTreePropTypeForShape(shape)
-  }), PropTypes__default["default"].oneOf([null, undefined])]);
-}
-
-/**
- * Return a PropType that accepts ItemTrees of the given shape, and rejects
- * other objects.
- */
-function buildTreePropTypeForShape(shape) {
-  if (shape.type === "content") {
-    return PropTypes__default["default"].shape({
-      // TODO(mdr): Remove #LegacyContentNode support.
-      __type: PropTypes__default["default"].oneOf(["content", "item"]).isRequired,
-      content: PropTypes__default["default"].string,
-      images: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
-      widgets: PropTypes__default["default"].objectOf(PropTypes__default["default"].any)
-    });
-  }
-  if (shape.type === "hint") {
-    return PropTypes__default["default"].shape({
-      __type: PropTypes__default["default"].oneOf(["hint"]).isRequired,
-      content: PropTypes__default["default"].string,
-      images: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
-      widgets: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
-      replace: PropTypes__default["default"].bool
-    });
-  }
-  if (shape.type === "tags") {
-    return PropTypes__default["default"].arrayOf(PropTypes__default["default"].string.isRequired);
-  }
-  if (shape.type === "array") {
-    const elementPropType = buildTreePropTypeForShape(shape.elementShape);
-    return PropTypes__default["default"].arrayOf(elementPropType.isRequired);
-  }
-  if (shape.type === "object") {
-    const valueShapes = shape.shape;
-    const propTypeShape = {};
-    Object.keys(valueShapes).forEach(key => {
-      propTypeShape[key] = buildTreePropTypeForShape(valueShapes[key]).isRequired;
-    });
-    return PropTypes__default["default"].shape(propTypeShape);
-  }
-  throw new perseusCore.PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
-}
-
-/**
- * This library provides support for Perseus multi-items: structured Perseus
- * content that content creators can easily create, and that applications can
- * easily render into different parts of the layout.
- *
- * For more details about application and motivation, see:
- * https://sites.google.com/a/khanacademy.org/forge/for-developers/perseus-items-and-multi-items
- *
- * This file primarily exposes the `MultiRenderer` component, which performs
- * multi-rendering. To multi-render a question, pass in the content of the item
- * to the `MultiRenderer` component as a props. Then, pass in a function which
- * takes an object of renderers (in the same structure as the content), and
- * return a render tree. The `MultiRenderer` component will allow you to
- * combine scores, serialized state, etc. without having to manually call on
- * each of the functions. It also handles inter-widgets requests between the
- * different renderers.
- * For more details, see `multi-items/multi-renderer.jsx`.
- *
- * Example:
- *
- *   item = {_multi: {
- *       left: <content data>,
- *       right: [<content data>, <content data>],
- *   }}
- *   shape = shapes.shape({
- *       left: shapes.content,
- *       right: shapes.arrayOf(shapes.content),
- *   })
- *
- *   <MultiRenderer item={item} shape={shape}>
- *       {({renderers}) =>
- *           <div>
- *               <div id="left">{renderers.left}</div>
- *               <ul id="right">
- *                   {renderers.right.map(r => <li>{r}</li>)}
- *               </ul>
- *           </div>
- *       }
- *   </MultiRenderer>
- *
- * This file also exposes `shapes`, which helps you construct a runtime type
- * declaration for your particular class of multi-item. This can then be used
- * to create a MultirendererEditor for your multi-item shape, and to validate
- * that a multi-item conforms to the shape via `buildPropTypeForShape`.
- * For more details, see `multi-items/shapes.js`.
- *
- * This file also exposes some utility functions for working with generic
- * multi-items, like `findContentNodesInItem`, `findHintNodesInItem`,
- * `inferItemShape`, and `buildEmptyItemForShape`.
- * For more details, see `multi-items/items.js`.
- */
-var MultiItems = {
-  // Tools for rendering your multi-items
-  MultiRenderer,
-  // Tools for declaring your multi-item shapes
-  shapes,
-  buildPropTypeForShape,
-  // Tools for generically manipulating multi-items
-  buildEmptyItemForShape,
-  findContentNodesInItem: findContentNodesInItem$2,
-  findHintNodesInItem,
-  inferItemShape: inferItemShape$2
-};
-
 /**
  * Calculates whether a perseus item is renderable by a specific
  * perseus-item-data version.
@@ -47597,10 +46445,6 @@ var MultiItems = {
  * This supports widgets that contain renderers, such as the
  * group or sequence widgets.
  */
-const {
-  findContentNodesInItem: findContentNodesInItem$1,
-  inferItemShape: inferItemShape$1
-} = MultiItems;
 const isUpgradedWidgetInfoRenderableBy = function (widgetInfo, widgetRendererVersion) {
   if (widgetRendererVersion == null) {
     // If the widget does not exist in this version, this will
@@ -47646,17 +46490,6 @@ const isItemRenderableByVersion = function (itemData, rendererContentVersion) {
   if (itemData == null || rendererContentVersion == null) {
     throw new perseusCore.PerseusError("missing parameter to Perseus.isRenderable.item", perseusCore.Errors.InvalidInput);
   }
-  if (itemData._multi) {
-    const shape = inferItemShape$1(itemData);
-    let isRenderable = true;
-    findContentNodesInItem$1(itemData, shape, node => {
-      const nodeIsRenderable = isRendererContentRenderableBy(node, rendererContentVersion);
-      if (!nodeIsRenderable) {
-        isRenderable = false;
-      }
-    });
-    return isRenderable;
-  }
   return isRendererContentRenderableBy(itemData.question, rendererContentVersion);
 };
 
@@ -47664,10 +46497,6 @@ const isItemRenderableByVersion = function (itemData, rendererContentVersion) {
  * Identifies whether or not a given perseus item requires the use of a mouse
  * or screen, based on the widgets it contains.
  */
-const {
-  findContentNodesInItem,
-  inferItemShape
-} = MultiItems;
 
 // Iterate over a single Perseus renderer, mutating `widgets` by appending
 // violating widget types discovered in this item.
@@ -47688,12 +46517,7 @@ function traverseRenderer(itemData, widgets) {
 function violatingWidgets(itemData) {
   // TODO(jordan): Hints as well
   const widgets = [];
-  if (itemData._multi) {
-    const shape = inferItemShape(itemData);
-    findContentNodesInItem(itemData, shape, content => traverseRenderer(content, widgets));
-  } else {
-    traverseRenderer(itemData.question, widgets);
-  }
+  traverseRenderer(itemData.question, widgets);
 
   // Uniquify the list of widgets (by type)
   return ___default["default"].uniq(widgets);
@@ -50216,6 +49040,10 @@ const ScoringUtil = {
   keScoreFromPerseusScore
 };
 
+/**
+ * Types
+ */
+
 exports.ApiOptions = ApiOptions;
 exports.ArticleRenderer = ArticleRenderer;
 exports.BaseRadio = BaseRadio;
@@ -50238,7 +49066,6 @@ exports.KhanMath = KhanMath;
 exports.LoadingContext = context;
 exports.Log = Log;
 exports.MatrixWidget = Matrix$1;
-exports.MultiItems = MultiItems;
 exports.NumericInput = NumericInput$1;
 exports.PerseusExpressionAnswerFormConsidered = PerseusExpressionAnswerFormConsidered;
 exports.PerseusI18nContext = PerseusI18nContext;
@@ -50257,8 +49084,6 @@ exports.Widgets = widgets$1;
 exports.addWidget = addWidget;
 exports.apiVersion = apiVersion;
 exports.bodyXsmallBold = bodyXsmallBold;
-exports.buildEmptyItemTreeForShape = buildEmptyItemTreeForShape;
-exports.buildMapper = buildMapper;
 exports.components = components;
 exports.containerSizeClass = containerSizeClass;
 exports.contentHasWidgetType = contentHasWidgetType;
@@ -50302,7 +49127,6 @@ exports.isItemRenderableByVersion = isItemRenderableByVersion;
 exports.isWidgetIdInContent = isWidgetIdInContent;
 exports.isWrongAnswerSupported = isWrongAnswerSupported;
 exports.itemDataVersion = itemDataVersion;
-exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
 exports.lockedFigureColors = lockedFigureColors;
@@ -50315,7 +49139,6 @@ exports.plotterPlotTypes = plotterPlotTypes;
 exports.preprocessTex = preprocessTex;
 exports.registerAllWidgetsForTesting = registerAllWidgetsForTesting;
 exports.scorePerseusItem = scorePerseusItem;
-exports.shapes = shapes;
 exports.shouldHaveIndividualAnswer = shouldHaveIndividualAnswer;
 exports.traverse = traverse;
 exports.usePerseusI18n = usePerseusI18n;