@khanacademy/perseus 46.0.0 → 47.0.0

package/dist/es/index.js

@@ -508,7 +508,7 @@ class InnerMathInput extends React.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(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.createElement("div", {
       style: {
         display: "flex",
@@ -546,7 +546,7 @@ class InnerMathInput extends React.Component {
           style: a11y.srOnly
         }, this.context.strings.mathInputDescription), /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$E.popoverContent
+          style: styles$D.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
@@ -622,9 +622,9 @@ const MathInputIcon = ({
       fillColor = 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.createElement(View, {
-    style: [styles$E.iconContainer, dynamicClass]
+    style: [styles$D.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -669,7 +669,7 @@ const inputFocused = {
   borderColor: color.blue,
   margin: -1
 };
-const styles$E = StyleSheet.create({
+const styles$D = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -2469,7 +2469,7 @@ class Expression extends React.Component {
     var _this$props$keypadCon, _this$props$analytics2, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(View, {
-        className: css(styles$D.mobileLabelInputWrapper)
+        className: css(styles$C.mobileLabelInputWrapper)
       }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
         htmlFor: this._textareaId,
         tag: "label"
@@ -2504,7 +2504,7 @@ class Expression extends React.Component {
       ERROR_TITLE
     } = this.context.strings;
     return /*#__PURE__*/React.createElement(View, {
-      className: css(styles$D.desktopLabelInputWrapper)
+      className: css(styles$C.desktopLabelInputWrapper)
     }, !!this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelSmall, {
       htmlFor: this._textareaId,
       tag: "label"
@@ -2554,7 +2554,7 @@ Expression.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$D = StyleSheet.create({
+const styles$C = StyleSheet.create({
   mobileLabelInputWrapper: {
     padding: "15px 4px 0"
   },
@@ -17930,33 +17930,33 @@ class Lint extends React.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.createElement("a", {
         href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
         target: "lint-help-window",
         className: css(style)
       }, /*#__PURE__*/React.createElement("span", {
-        className: css(styles$C.indicator, severityStyle)
+        className: css(styles$B.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$C.tooltip, tooltipAbove && styles$C.tooltipAbove)
+        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$C.tooltipParagraph)
+        className: css(styles$B.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$C.tail, tooltipAbove && styles$C.tailAbove)
+        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
       })));
     };
   }
@@ -17994,20 +17994,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$C.lintContainer, styles$C.lintContainerBlock)
-      }, this.renderLink(styles$C.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$C.lintContainer)
-      }, this.renderLink(styles$C.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$C.lintContainer)
-    }, this.renderLink(styles$C.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$C = StyleSheet.create({
+const styles$B = StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -18814,8 +18814,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
@@ -20200,7 +20198,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -20324,7 +20322,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$B.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20965,7 +20963,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-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
@@ -21073,7 +21071,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-const _excluded$8 = ["position", "visibility", "left", "top"];
+const _excluded$7 = ["position", "visibility", "left", "top"];
 const zIndex = 10;
 let HorizontalDirection = /*#__PURE__*/function (HorizontalDirection) {
   HorizontalDirection["Left"] = "left";
@@ -21124,7 +21122,7 @@ const TooltipArrow = _ref => {
       left = 100,
       top = 0
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   // TODO(aria): Think about adding a box-shadow to the triangle here
   // See http://css-tricks.com/triangle-with-shadow/
 
@@ -21498,7 +21496,7 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-const _excluded$7 = ["keypadElement", "onFocus", "value"];
+const _excluded$6 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21543,7 +21541,7 @@ class SimpleKeypadInput extends React.Component {
         onFocus,
         value
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$7);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
     return (
       /*#__PURE__*/
       // @ts-expect-error - TS2769 - No overload matches this call.
@@ -21948,10 +21946,10 @@ class InputNumber extends React.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$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.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21981,7 +21979,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$A = StyleSheet.create({
+const styles$z = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -23152,7 +23150,7 @@ class HighlightRenderer extends React.PureComponent {
     const rects = this.state.cachedHighlightRects;
     return /*#__PURE__*/React.createElement("div", null, rects.map((rect, index) => /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: css(styles$z.highlightRect),
+      className: css(styles$y.highlightRect),
       style: {
         // NOTE(mdr): We apply `position: absolute` here
         //     rather than in Aphrodite styles, because
@@ -23171,7 +23169,7 @@ class HighlightRenderer extends React.PureComponent {
     })));
   }
 }
-const styles$z = StyleSheet.create({
+const styles$y = StyleSheet.create({
   highlightRect: {
     background: "#fffabe" // highlighter yellow :)
   }
@@ -23252,7 +23250,7 @@ class HighlightTooltip extends React.PureComponent {
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
     const content = /*#__PURE__*/React.createElement("div", {
-      className: css(styles$y.tooltipLabel),
+      className: css(styles$x.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
     const style = {
@@ -23272,7 +23270,7 @@ class HighlightTooltip extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("div", null)));
   }
 }
-const styles$y = StyleSheet.create({
+const styles$x = 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
@@ -23823,7 +23821,7 @@ class HighlightableContent extends React.PureComponent {
     //     starting point: https://phabricator.khanacademy.org/D35623?id=170698
     const buildHighlight = r => this._buildHighlight(r);
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$x.container),
+      className: css(styles$w.container),
       ref: container => this._container = container
     }, /*#__PURE__*/React.createElement("div", null, this.props.enabled && this._container && this._content && /*#__PURE__*/React.createElement(HighlightingUI, {
       buildHighlight: buildHighlight,
@@ -23844,14 +23842,14 @@ class HighlightableContent extends React.PureComponent {
       onAddHighlight: this._handleAddHighlight,
       onRemoveHighlight: this._handleRemoveHighlight
     })), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$x.content),
+      className: css(styles$w.content),
       ref: content => this._content = content
     }, /*#__PURE__*/React.createElement(WordIndexer, {
       onWordsUpdate: this._handleWordsUpdate
     }, this.props.children)));
   }
 }
-const styles$x = StyleSheet.create({
+const styles$w = 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
@@ -24277,7 +24275,7 @@ class LineHeightMeasurer extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$w.measurer),
+      className: css(styles$v.measurer),
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
       ref: ref => this._line = ref,
@@ -24285,7 +24283,7 @@ class LineHeightMeasurer extends React.Component {
     }, "Line Height Measurement"));
   }
 }
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   measurer: {
     position: "absolute",
     top: 0,
@@ -25262,11 +25260,11 @@ const FocusRing = function FocusRing({
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "focus-ring",
-    className: css(styles$v.ring),
+    className: css(styles$u.ring),
     style: style
   }, children);
 };
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -25293,7 +25291,7 @@ function getChoiceLetter(pos, strings) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$u = StyleSheet.create({
+const styles$t = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -25316,7 +25314,7 @@ const CrossOutLine = function CrossOutLine(props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: css(styles$t.crossOutLine),
+    className: css(styles$s.crossOutLine),
     "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -25331,7 +25329,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$t = StyleSheet.create({
+const styles$s = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -25415,7 +25413,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$u.iconWrapper)
+    className: css(styles$t.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: color.blue,
     visible: focused || hovered,
@@ -25423,13 +25421,13 @@ const ChoiceIcon = function ChoiceIcon(props) {
   }, /*#__PURE__*/React.createElement("div", {
     style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: css(styles$s.circle, showCorrectness && correct && styles$s.circleCorrect, showCorrectness && !correct && styles$s.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$s.circleIncorrectAnswered)
+    className: 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.createElement("div", {
-    className: css(styles$s.innerWrapper)
+    className: css(styles$r.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -25438,7 +25436,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$s = StyleSheet.create({
+const styles$r = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -25533,19 +25531,19 @@ const OptionStatus = function OptionStatus(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.createElement("div", {
-    className: css(styles$r.text, textStyle)
+    className: css(styles$q.text, textStyle)
   }, renderText(checked, correct, crossedOut, strings));
 };
-const styles$r = StyleSheet.create({
+const styles$q = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -25615,8 +25613,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames$1("description", css(styles$q.description));
-  const rationaleClassName = classNames$1("perseus-radio-rationale-content", css(styles$q.rationale));
+  const descriptionClassName = classNames$1("description", css(styles$p.description));
+  const rationaleClassName = classNames$1("perseus-radio-rationale-content", 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
@@ -25776,7 +25774,7 @@ const Choice = function Choice(props) {
     "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$q = StyleSheet.create({
+const styles$p = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -25797,14 +25795,14 @@ var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.
   forwardedRef: ref
 })));
 
-const _excluded$6 = ["content", "forwardedRef", "showContent"];
+const _excluded$5 = ["content", "forwardedRef", "showContent"];
 const ChoiceNoneAbove = function ChoiceNoneAbove(_ref) {
   let {
       content,
       forwardedRef,
       showContent = true
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   const {
     strings
   } = usePerseusI18n();
@@ -25966,10 +25964,10 @@ const BaseRadio = function BaseRadio({
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames$1("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$p.radio, styles$p.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$p.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$p.radioContainerLastHighlighted));
-  const instructionsClassName = classNames$1("instructions", css(styles$p.instructions, isMobile && styles$p.instructionsMobile));
+  const className = classNames$1("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$o.radio, styles$o.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$o.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$o.radioContainerLastHighlighted));
+  const instructionsClassName = classNames$1("instructions", css(styles$o.instructions, isMobile && styles$o.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect, strings);
-  const responsiveClassName = css(styles$p.responsiveFieldset);
+  const responsiveClassName = css(styles$o.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -26020,7 +26018,7 @@ const BaseRadio = function BaseRadio({
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return 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 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
@@ -26085,10 +26083,10 @@ const BaseRadio = function BaseRadio({
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$p.responsiveContainer)
+    className: css(styles$o.responsiveContainer)
   }, fieldset);
 };
-const styles$p = StyleSheet.create({
+const styles$o = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -26580,7 +26578,7 @@ Radio$1.defaultProps = {
   showSolutions: "none"
 };
 
-const _excluded$5 = ["noneOfTheAbove"];
+const _excluded$4 = ["noneOfTheAbove"];
 const {
   shuffle: shuffle$2,
   random
@@ -26672,7 +26670,7 @@ const propUpgrades$1 = {
     const {
         noneOfTheAbove
       } = v0props,
-      rest = _objectWithoutPropertiesLoose(v0props, _excluded$5);
+      rest = _objectWithoutPropertiesLoose(v0props, _excluded$4);
     if (noneOfTheAbove) {
       throw new Error("radio widget v0 no longer supports auto noneOfTheAbove");
     }
@@ -26795,9 +26793,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$o.mobileTable)
+      className: "categorizer-table " + css(styles$n.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$o.emptyHeaderCell)
+      className: 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
@@ -26805,7 +26803,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$o.header),
+        className: css(styles$n.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -26827,7 +26825,7 @@ class Categorizer extends React.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React.createElement("td", {
-          className: "category " + css(styles$o.cell),
+          className: "category " + css(styles$n.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -26842,7 +26840,7 @@ class Categorizer extends React.Component {
           onChange: () => this.onChange(itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React.createElement("span", {
-          className: css(styles$o.radioSpan, selected && styles$o.checkedRadioSpan, this.props.static && selected && styles$o.staticCheckedRadioSpan)
+          className: css(styles$n.radioSpan, selected && styles$n.checkedRadioSpan, this.props.static && selected && styles$n.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -26854,7 +26852,7 @@ class Categorizer extends React.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.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -26873,7 +26871,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$o = StyleSheet.create({
+const styles$n = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -27131,7 +27129,7 @@ class CSProgram extends React.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$n.widthOverride, styleContainer && styles$n.container)
+      className: css(styles$m.widthOverride, styleContainer && styles$m.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -27148,7 +27146,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$n = StyleSheet.create({
+const styles$m = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -27194,7 +27192,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$m.tooltipBody,
+        style: styles$l.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -27227,7 +27225,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$m = {
+const styles$l = {
   tooltipBody: {
     color: color.offBlack,
     fontSize: 20,
@@ -27490,7 +27488,7 @@ class Explanation extends React.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.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "explanation-widget"
@@ -27509,7 +27507,7 @@ class Explanation extends React.Component {
       "aria-hidden": !this.state.expanded,
       testId: "content-container"
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$l.contentWrapper
+      style: styles$k.contentWrapper
     }, /*#__PURE__*/React.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
@@ -27530,7 +27528,7 @@ Explanation.defaultProps = {
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
 const arrowHeight = 14;
-const styles$l = StyleSheet.create({
+const styles$k = StyleSheet.create({
   content: {
     borderLeft: "0px solid #ccc",
     display: "inline-grid",
@@ -27613,15 +27611,15 @@ class GradedGroupAnswerBar extends React.Component {
       correctExcited,
       nextQuestion
     } = this.context.strings;
-    const answerBarStyle = _extends({}, styles$k.answerBar, {
+    const answerBarStyle = _extends({}, styles$j.answerBar, {
       backgroundColor: answerBarState === "CORRECT" ? color.offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     });
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React.createElement("span", {
-      style: styles$k.text
+      style: styles$j.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$k.tryAgainIcon
+      style: styles$j.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -27640,7 +27638,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$k.text
+      style: styles$j.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -27663,7 +27661,7 @@ class GradedGroupAnswerBar extends React.Component {
 }
 GradedGroupAnswerBar.contextType = PerseusI18nContext;
 const fontSize = 17;
-const styles$k = {
+const styles$j = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -27848,7 +27846,7 @@ class GradedGroup extends React.Component {
       }));
       gradeStatus = this.context.strings.incorrect;
     }
-    const mobileClass = this.props.inGradedGroupSet ? css(styles$j.gradedGroupInSet) : css(styles$j.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$i.gradedGroupInSet) : css(styles$i.gradedGroup);
     const classes = classNames$1({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -27867,7 +27865,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.title)
+      className: css(styles$i.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       ref: this.rendererRef,
       apiOptions: _extends({}, apiOptions, {
@@ -27899,7 +27897,7 @@ class GradedGroup extends React.Component {
     }, this.context.strings.nextQuestion), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: css(styles$j.explanationTitle),
+      className: css(styles$i.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -27931,7 +27929,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$j.showHintLink)
+      className: css(styles$i.showHintLink)
     }, this.context.strings.explain)), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -27953,7 +27951,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$2 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$j = StyleSheet.create({
+const styles$i = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -28036,18 +28034,18 @@ class Indicators extends React.Component {
     return /*#__PURE__*/React.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames$1(css(styles$i.indicatorContainer), "indicatorContainer")
+      className: classNames$1(css(styles$h.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
-      className: css(styles$i.indicator),
+      className: css(styles$h.indicator),
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       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)
     }, ({
@@ -28055,9 +28053,9 @@ class Indicators extends React.Component {
       focused,
       pressed
     }) => /*#__PURE__*/React.createElement(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.createElement(View, {
-      style: styles$i.indicatorDotActive
+      style: styles$h.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
     }, this.context.strings.current)))))));
@@ -28125,7 +28123,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$i.container)
+        className: css(styles$h.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -28148,13 +28146,13 @@ class GradedGroupSet extends React.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.container)
+      className: css(styles$h.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.top)
+      className: css(styles$h.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.title)
+      className: css(styles$h.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$i.spacer)
+      className: css(styles$h.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -28196,7 +28194,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$i = StyleSheet.create({
+const styles$h = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -28301,7 +28299,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$h.buttonStyle, button.value === value && styles$h.selectedStyle),
+        className: css(styles$g.buttonStyle, button.value === value && styles$g.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -28318,7 +28316,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$h = StyleSheet.create({
+const styles$g = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -31659,7 +31657,7 @@ const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$g.icon)
+  className: css(styles$f.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.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"
@@ -31690,7 +31688,7 @@ const HiddenIcon = () => /*#__PURE__*/React.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
-  className: css(styles$g.icon)
+  className: css(styles$f.icon)
 }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.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"
@@ -31728,20 +31726,20 @@ const HUD = ({
   let state;
   let icon;
   if (enabled) {
-    state = styles$g.enabled;
+    state = styles$f.enabled;
     icon = /*#__PURE__*/React.createElement(VisibleIcon, null);
   } else {
-    state = styles$g.disabled;
+    state = styles$f.disabled;
     icon = /*#__PURE__*/React.createElement(HiddenIcon, null);
   }
   return /*#__PURE__*/React.createElement("button", {
-    className: css(styles$g.hud, _fixedPosition && styles$g.hudFixedPosition, state),
+    className: css(styles$f.hud, _fixedPosition && styles$f.hudFixedPosition, state),
     onClick: e => {
       onClick();
     }
   }, icon, message);
 };
-const styles$g = StyleSheet.create({
+const styles$f = StyleSheet.create({
   hud: {
     boxSizing: "border-box",
     height: 36,
@@ -31794,16 +31792,16 @@ const styles$g = StyleSheet.create({
 const InfoTipBase = props => {
   return /*#__PURE__*/React.createElement(Tooltip$1, {
     content: /*#__PURE__*/React.createElement(Body, {
-      style: styles$f.body
+      style: styles$e.body
     }, props.children),
     placement: "right"
   }, /*#__PURE__*/React.createElement(PhosphorIcon, {
     size: "small",
     icon: questionIcon,
-    style: styles$f.spacingLeft
+    style: styles$e.spacingLeft
   }));
 };
-const styles$f = StyleSheet.create({
+const styles$e = StyleSheet.create({
   spacingLeft: {
     marginInlineStart: spacing.xxxSmall_4
   },
@@ -31882,7 +31880,7 @@ class MultiButtonGroup extends React.Component {
         id: "" + i,
         key: "" + i,
         ref: "button" + i,
-        className: css(styles$e.buttonStyle, selected && styles$e.selectedStyle),
+        className: css(styles$d.buttonStyle, selected && styles$d.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -31899,7 +31897,7 @@ MultiButtonGroup.defaultProps = {
   values: [],
   allowEmpty: true
 };
-const styles$e = StyleSheet.create({
+const styles$d = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -31932,7 +31930,7 @@ const styles$e = StyleSheet.create({
   }
 });
 
-const _excluded$4 = ["onFormatChange", "checkValidity", "useArrowKeys"];
+const _excluded$3 = ["onFormatChange", "checkValidity", "useArrowKeys"];
 const {
   firstNumericalParse,
   captureScratchpadTouchStart
@@ -32086,7 +32084,7 @@ class NumberInput extends React.Component {
       classes = classes + " " + this.props.className;
     }
     const _this$props = this.props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
       className: classes,
       type: "text",
@@ -32296,14 +32294,6 @@ const LegacyGrid = ({
  * 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",
@@ -33076,12 +33066,12 @@ const MafsCssTransformWrapper = ({
   }
 }, children);
 
-const _excluded$3 = ["children"];
+const _excluded$2 = ["children"];
 const TextLabel = _ref => {
   let {
       children
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return /*#__PURE__*/React__default.createElement(Text$1, _extends({
     size: 16,
     svgTextProps: {
@@ -38711,7 +38701,7 @@ const HideAnswersToggle = props => {
     strings
   } = usePerseusI18n();
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$d.switchWrapper
+    style: styles$c.switchWrapper
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: props.areAnswersHidden,
@@ -38723,7 +38713,7 @@ const HideAnswersToggle = props => {
     tag: "label"
   }, strings.hideAnswersToggleLabel));
 };
-const styles$d = StyleSheet.create({
+const styles$c = StyleSheet.create({
   switchWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -38779,14 +38769,14 @@ 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.createElement(Renderer, {
     content: answerString,
     strings: strings,
     inline: true
   })));
 };
-const styles$c = StyleSheet.create({
+const styles$b = StyleSheet.create({
   correct: {
     // WB green darkened by 18%
     backgroundColor: "#00880b"
@@ -38850,23 +38840,23 @@ class Marker extends React.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 = _extends({}, 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 = _extends({}, 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.createElement(View, {
-      style: [styles$b.markerIcon, iconStyles],
+      style: [styles$a.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, /*#__PURE__*/React.createElement(Icon, args));
   }
@@ -38888,7 +38878,7 @@ class Marker extends React.Component {
     const markerDisabled = showCorrectness === "correct";
     const active = hovered || focused;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-      style: [styles$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.createElement(AnswerPill, {
       selectedAnswers: selected,
@@ -38905,7 +38895,7 @@ Marker.contextType = PerseusI18nContext;
 Marker.defaultProps = {
   selected: []
 };
-const styles$b = StyleSheet.create({
+const styles$a = StyleSheet.create({
   marker: {
     position: "absolute",
     backgroundColor: color.white,
@@ -39490,13 +39480,13 @@ class LabelImage extends React.Component {
     const promptString = isMobile ? multipleAnswers ? strings.tapMultiple : strings.tapSingle : multipleAnswers ? strings.clickMultiple : strings.clickSingle;
     const choicesString = strings.choices;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1("perseus-label-image-widget-instructions", css(styles$a.instructions))
+      className: classNames$1("perseus-label-image-widget-instructions", css(styles$9.instructions))
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.instructionsCaption)
+      className: css(styles$9.instructionsCaption)
     }, promptString, " ", !hideChoices && choicesString), !hideChoices && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.instructionsChoices)
+      className: css(styles$9.instructionsChoices)
     }, choices.map((choice, index) => /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.instructionsChoice),
+      className: css(styles$9.instructionsChoice),
       key: index
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: choice,
@@ -39514,20 +39504,20 @@ class LabelImage extends React.Component {
       activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.markersCanvas),
+      className: css(styles$9.markersCanvas),
       style: {
         maxWidth: imageWidth,
         maxHeight: imageHeight
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$a.imageContainer,
+      className: 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.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(SvgImage, {
@@ -39552,7 +39542,7 @@ class LabelImage extends React.Component {
   }
 }
 LabelImage.contextType = PerseusI18nContext;
-const styles$a = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   instructions: {
     paddingBottom: 16
   },
@@ -39638,7 +39628,7 @@ class Placeholder extends React.Component {
     const {
       layout
     } = this.props;
-    const className = css(styles$9.card, styles$9.placeholder, layout === "horizontal" && styles$9.horizontalCard);
+    const className = css(styles$8.card, styles$8.placeholder, layout === "horizontal" && styles$8.horizontalCard);
     const style = {
       width: this.props.width,
       height: this.props.height
@@ -39842,7 +39832,7 @@ class Draggable extends React.Component {
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. Hence the hacky tacking on of manual classNames.
     // See sortable.less for details.
-    let className = css(styles$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 = 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";
     }
@@ -40175,7 +40165,7 @@ class Sortable extends React.Component {
     } = this.props;
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. See sortable.less for details.
-    const className = css(styles$9.sortable) + " perseus-sortable";
+    const className = css(styles$8.sortable) + " perseus-sortable";
     const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === "vertical";
     const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === "horizontal";
     _.each(this.state.items, function (item, i, items) {
@@ -40272,7 +40262,7 @@ Sortable.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault,
   waitForTexRendererToLoad: true
 };
-const styles$9 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   sortable: {
     boxSizing: "border-box",
     float: "left",
@@ -40458,25 +40448,25 @@ class Matcher extends React.Component {
     };
     const cellMarginPx = this.props.apiOptions.isMobile ? 8 : 5;
     return /*#__PURE__*/React.createElement("table", {
-      className: css(styles$8.widget) + " " + HACKY_CSS_CLASSNAME
+      className: css(styles$7.widget) + " " + HACKY_CSS_CLASSNAME
     }, /*#__PURE__*/React.createElement("tbody", null, showLabels && /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$8.row)
+      className: css(styles$7.row)
     }, /*#__PURE__*/React.createElement("th", {
-      className: css(styles$8.column, styles$8.columnLabel)
+      className: css(styles$7.column, styles$7.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[0] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     })), /*#__PURE__*/React.createElement("th", {
-      className: css(styles$8.column, styles$8.columnRight, styles$8.columnLabel)
+      className: css(styles$7.column, styles$7.columnRight, styles$7.columnLabel)
     }, /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.labels[1] || "...",
       linterContext: this.props.linterContext,
       strings: this.context.strings
     }))), /*#__PURE__*/React.createElement("tr", {
-      className: css(styles$8.row)
+      className: css(styles$7.row)
     }, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$8.column)
+      className: css(styles$7.column)
     }, /*#__PURE__*/React.createElement(Sortable, {
       options: left,
       layout: "vertical",
@@ -40491,7 +40481,7 @@ class Matcher extends React.Component {
       ,
       ref: "left"
     })), /*#__PURE__*/React.createElement("td", {
-      className: css(styles$8.column, styles$8.columnRight)
+      className: css(styles$7.column, styles$7.columnRight)
     }, /*#__PURE__*/React.createElement(Sortable, {
       options: right,
       layout: "vertical",
@@ -40520,7 +40510,7 @@ Matcher.defaultProps = {
 };
 const padding = 5;
 const border = "1px solid #444";
-const styles$8 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   widget: {
     paddingTop: padding,
     maxWidth: "100%",
@@ -41062,7 +41052,7 @@ const getPromptJSON$7 = () => {
   return getUnsupportedPromptJSON("measurer");
 };
 
-const _excluded$2 = ["imageUrl", "imageTop", "imageLeft"];
+const _excluded$1 = ["imageUrl", "imageTop", "imageLeft"];
 const defaultImage = {
   url: null,
   top: 0,
@@ -41174,7 +41164,7 @@ const propUpgrades = {
         imageTop,
         imageLeft
       } = v0props,
-      rest = _objectWithoutPropertiesLoose(v0props, _excluded$2);
+      rest = _objectWithoutPropertiesLoose(v0props, _excluded$1);
     return _extends({}, rest, {
       image: {
         url: imageUrl,
@@ -41214,9 +41204,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);
 }
 
 /**
@@ -41237,16 +41227,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);
@@ -41273,16 +41263,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);
@@ -41304,8 +41294,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);
@@ -41357,7 +41347,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,
@@ -43477,7 +43467,7 @@ class PhetSimulation extends React.Component {
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     const sandboxProperties = "allow-same-origin allow-scripts";
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$6.widgetContainer
+      style: styles$5.widgetContainer
     }, this.state.banner !== null &&
     /*#__PURE__*/
     // TODO(anna): Make this banner focusable
@@ -43490,12 +43480,12 @@ class PhetSimulation extends React.Component {
       kind: this.state.banner.kind,
       text: this.state.banner.message
     })), /*#__PURE__*/React.createElement(View, {
-      style: styles$6.iframeContainer
+      style: styles$5.iframeContainer
     }, /*#__PURE__*/React.createElement("iframe", {
       ref: this.iframeRef,
       title: this.props.description,
       sandbox: sandboxProperties,
-      className: css(styles$6.iframeResponsive),
+      className: css(styles$5.iframeResponsive),
       src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
       allow: "fullscreen"
     })), this.state.url !== null && /*#__PURE__*/React.createElement(IconButton, {
@@ -43528,7 +43518,7 @@ const makeSafeUrl = (urlString, locale) => {
   url.searchParams.set("locale", locale);
   return url;
 };
-const styles$6 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   widgetContainer: {
     borderRadius: 6,
     borderWidth: 1,
@@ -44446,7 +44436,7 @@ class PythonProgram extends React.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$5.container
+      style: styles$4.container
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -44458,7 +44448,7 @@ class PythonProgram extends React.Component {
 PythonProgram.defaultProps = {
   height: 400
 };
-const styles$5 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   container: {
     margin: "auto",
     width: "100%"
@@ -44951,7 +44941,7 @@ const VideoTranscriptLink = props => {
         var _result$data;
         const video = (_result$data = result.data) == null ? void 0 : _result$data.video;
         return /*#__PURE__*/React.createElement(View, {
-          style: styles$4.transcriptLink
+          style: styles$3.transcriptLink
         }, /*#__PURE__*/React.createElement(Text$2, null, video == null ? void 0 : video.title), /*#__PURE__*/React.createElement(Strut, {
           size: 10
         }), /*#__PURE__*/React.createElement(Link, {
@@ -44968,7 +44958,7 @@ const VideoTranscriptLink = props => {
       return /*#__PURE__*/React.createElement(View, null, strings.somethingWrong);
   }
 };
-const styles$4 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   transcriptLink: {
     flexDirection: "row",
     width: "100%",
@@ -45086,7 +45076,7 @@ const init = function init() {
 
 // 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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45298,7 +45288,7 @@ class HintRenderer extends React.Component {
     const {
       isMobile
     } = apiOptions;
-    const classNames = classNames$1("hint", !isMobile && "perseus-hint-renderer", isMobile && css(styles$3.newHint), isMobile && lastRendered && css(styles$3.lastRenderedNewHint), lastHint && "last-hint", lastRendered && "last-rendered", className);
+    const classNames = classNames$1("hint", !isMobile && "perseus-hint-renderer", isMobile && css(styles$2.newHint), isMobile && lastRendered && 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`.
@@ -45343,7 +45333,7 @@ HintRenderer.contextType = PerseusI18nContext;
 HintRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
-const styles$3 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   newHint: {
     marginBottom: 1.5 * baseUnitPx,
     borderLeftColor: gray97,
@@ -45516,14 +45506,14 @@ class HintsRenderer extends React.Component {
     } = apiOptions;
     const showGetAnotherHint = getAnotherHint && hintsVisible > 0 && hintsVisible < this.props.hints.length;
     const hintRatioCopy = `(${hintsVisible}/${this.props.hints.length})`;
-    const classNames = classNames$1(this.props.className, apiOptions.isMobile && hintsVisible > 0 && css(styles$2.mobileHintStylesHintsRenderer));
+    const classNames = classNames$1(this.props.className, apiOptions.isMobile && hintsVisible > 0 && css(styles$1.mobileHintStylesHintsRenderer));
     return /*#__PURE__*/React.createElement("div", {
       className: classNames
     }, apiOptions.isMobile && hintsVisible > 0 && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$2.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
+      className: css(styles$1.mobileHintStylesHintTitle, sharedStyles.responsiveLabel)
     }, this.context.strings.hints), hints, showGetAnotherHint && /*#__PURE__*/React.createElement("button", {
       rel: "button",
-      className: css(styles$2.linkButton, styles$2.getAnotherHintButton, apiOptions.isMobile && styles$2.mobileHintStylesGetAnotherHintButton),
+      className: css(styles$1.linkButton, styles$1.getAnotherHintButton, apiOptions.isMobile && styles$1.mobileHintStylesGetAnotherHintButton),
       onClick: evt => {
         evt.preventDefault();
         evt.stopPropagation();
@@ -45532,9 +45522,9 @@ class HintsRenderer extends React.Component {
         }
       }
     }, /*#__PURE__*/React.createElement("span", {
-      className: css(styles$2.plusText, apiOptions.isMobile && styles$2.mobileHintStylesPlusText)
+      className: css(styles$1.plusText, apiOptions.isMobile && styles$1.mobileHintStylesPlusText)
     }, "+"), /*#__PURE__*/React.createElement("span", {
-      className: css(styles$2.getAnotherHintText)
+      className: css(styles$1.getAnotherHintText)
     }, this.context.strings.getAnotherHint, " ", hintRatioCopy)));
   }
 }
@@ -45543,7 +45533,7 @@ HintsRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
 const hintIndentation = baseUnitPx + hintBorderWidth;
-const styles$2 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
   rendererMargins: {
     marginTop: baseUnitPx
@@ -45952,7 +45942,7 @@ class ServerItemRenderer extends React.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 : css(styles$1.hintsContainer)
+      apiOptions.isMobile ? undefined : css(styles.hintsContainer)
     }, hintsRenderer)));
   }
 }
@@ -45963,7 +45953,7 @@ ServerItemRenderer.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault,
   onRendered: isRendered => {}
 };
-const styles$1 = StyleSheet.create({
+const styles = StyleSheet.create({
   hintsContainer: {
     marginLeft: 50
   }
@@ -46068,1144 +46058,6 @@ const traverse = function traverse(rendererOptions, contentCallback, widgetCallb
   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 {
-  constructor(content, hint, tags) {
-    this.content = void 0;
-    this.hint = void 0;
-    this.tags = void 0;
-    this.array = void 0;
-    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 {
-  constructor(content, hint, tags, array) {
-    this.content = void 0;
-    this.hint = void 0;
-    this.tags = void 0;
-    this.array = void 0;
-    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 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.`, 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 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.`, Errors.InvalidInput);
-    }
-    const valueShapes = shape.shape;
-    if (!valueShapes) {
-      throw new PerseusError(`Unexpected shape ${JSON.stringify(shape)} at path ` +
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      `${["<root>"].concat(path).join(".")}.`, Errors.InvalidInput);
-    }
-    const newObject = {};
-    Object.keys(valueShapes).forEach(key => {
-      if (!(key in object)) {
-        throw new PerseusError(`Key "${key}" is missing from shape at path ` +
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        `${["<root>"].concat(path).join(".")}.`, Errors.InvalidInput);
-      }
-      newObject[key] = mapTree(object[key], valueShapes[key], path.concat(key), mappers);
-    });
-    return newObject;
-  }
-  throw new PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, 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 PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, 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 PerseusError(`unexpected multi-item node ${JSON.stringify(node)}`, 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 isObject(obj) {
-  return obj === Object(obj);
-};
-var merge = function merge() {
-  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 clone(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 dispatch(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 lens(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;
-  }
-};
-
-const _excluded$1 = ["item", "children", "shape", "serializedState", "onSerializedStateUpdated"];
-
-// 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.Component {
-  constructor(props) {
-    super(props);
-    this.rendererDataTreeMapper = void 0;
-    this.getRenderersMapper = void 0;
-    this._handleSerializedStateUpdated = (path, newState) => {
-      const {
-        onSerializedStateUpdated
-      } = this.props;
-      if (onSerializedStateUpdated) {
-        const oldState = this._getSerializedState(this.props.serializedState);
-        onSerializedStateUpdated(lens(oldState).set(path, newState).freeze());
-      }
-    };
-    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", Errors.Internal, {
-        cause: e
-      });
-      return {
-        rendererDataTree: null,
-        renderError: e
-      };
-    }
-  }
-  /**
-   * 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 _this$props = this.props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-    return _extends({}, 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.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.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 => {
-      var _data$ref;
-      if (!data.ref) {
-        return null;
-      }
-      if (data.ref.getSerializedState) {
-        state.push(data.ref.getSerializedState());
-      }
-      scores.push(data.ref.score());
-      return (_data$ref = data.ref) == null ? void 0 : _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) => {
-      var _data$ref2;
-      if (!data.ref) {
-        return;
-      }
-      const state = lens(serializedState).get(path);
-      if (!state) {
-        return;
-      }
-      numCallbacks++;
-      (_data$ref2 = data.ref) == null || _data$ref2.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.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.createElement("div", {
-        className: 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.createElement(DependenciesContext.Provider, {
-      value: this.props.dependencies
-    }, this.props.children({
-      renderers: this._getRenderers()
-    }));
-  }
-}
-MultiRenderer.contextType = PerseusI18nContext;
-const styles = 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.oneOfType([PropTypes.shape({
-    _multi: buildTreePropTypeForShape(shape)
-  }), PropTypes.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.shape({
-      // TODO(mdr): Remove #LegacyContentNode support.
-      __type: PropTypes.oneOf(["content", "item"]).isRequired,
-      content: PropTypes.string,
-      images: PropTypes.objectOf(PropTypes.any),
-      widgets: PropTypes.objectOf(PropTypes.any)
-    });
-  }
-  if (shape.type === "hint") {
-    return PropTypes.shape({
-      __type: PropTypes.oneOf(["hint"]).isRequired,
-      content: PropTypes.string,
-      images: PropTypes.objectOf(PropTypes.any),
-      widgets: PropTypes.objectOf(PropTypes.any),
-      replace: PropTypes.bool
-    });
-  }
-  if (shape.type === "tags") {
-    return PropTypes.arrayOf(PropTypes.string.isRequired);
-  }
-  if (shape.type === "array") {
-    const elementPropType = buildTreePropTypeForShape(shape.elementShape);
-    return PropTypes.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.shape(propTypeShape);
-  }
-  throw new PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, 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.
@@ -47215,10 +46067,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 isUpgradedWidgetInfoRenderableBy(widgetInfo, widgetRendererVersion) {
   if (widgetRendererVersion == null) {
     // If the widget does not exist in this version, this will
@@ -47264,17 +46112,6 @@ const isItemRenderableByVersion = function isItemRenderableByVersion(itemData, r
   if (itemData == null || rendererContentVersion == null) {
     throw new PerseusError("missing parameter to Perseus.isRenderable.item", 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);
 };
 
@@ -47282,10 +46119,6 @@ const isItemRenderableByVersion = function isItemRenderableByVersion(itemData, r
  * 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.
@@ -47306,12 +46139,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 _.uniq(widgets);
@@ -49818,5 +48646,9 @@ const ScoringUtil = {
   keScoreFromPerseusScore
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+/**
+ * Types
+ */
+
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map