@khanacademy/perseus 17.5.0 → 17.6.1

package/dist/index.js

@@ -26,12 +26,13 @@ var pureMarkdown = require('@khanacademy/pure-markdown');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
+var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var debounce = require('lodash.debounce');
-var Pill = require('@khanacademy/wonder-blocks-pill');
-var reactPopper = require('react-popper');
 var Switch = require('@khanacademy/wonder-blocks-switch');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var Pill = require('@khanacademy/wonder-blocks-pill');
+var reactPopper = require('react-popper');
 var createReactClass = require('create-react-class');
 var Link = require('@khanacademy/wonder-blocks-link');
 var perseusCore = require('@khanacademy/perseus-core');
@@ -62,6 +63,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip$1);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
@@ -72,9 +74,10 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
@@ -274,7 +277,7 @@ class MathInput extends React__namespace.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$C.outerWrapper, this.state.focused && styles$C.wrapperFocused, this.props.hasError && styles$C.wrapperError]
+      style: [styles$B.outerWrapper, this.state.focused && styles$B.wrapperFocused, this.props.hasError && styles$B.wrapperError]
     }, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -301,7 +304,7 @@ class MathInput extends React__namespace.Component {
       dismissEnabled: true,
       content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$C.popoverContent
+        style: styles$B.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
@@ -341,9 +344,9 @@ const MathInputIcon = _ref => {
       color = Color__default["default"].offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$C.iconActive : styles$C.iconInactive;
+  const dynamicClass = active || focused ? styles$B.iconActive : styles$B.iconInactive;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$C.iconContainer, dynamicClass]
+    style: [styles$B.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -388,7 +391,7 @@ const inputFocused = {
   borderColor: Color__default["default"].blue,
   margin: -1
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -17624,33 +17627,33 @@ class Lint extends React__namespace.Component {
     let warningText;
     let warningTextStyle;
     if (this.props.severity === Severity.Error) {
-      severityStyle = styles$B.indicatorError;
+      severityStyle = styles$A.indicatorError;
       warningText = "Error";
-      warningTextStyle = styles$B.publishBlockingError;
+      warningTextStyle = styles$A.publishBlockingError;
     } else if (this.props.severity === Severity.Warning) {
-      severityStyle = styles$B.indicatorWarning;
+      severityStyle = styles$A.indicatorWarning;
       warningText = "Warning";
-      warningTextStyle = styles$B.warning;
+      warningTextStyle = styles$A.warning;
     } else {
-      severityStyle = styles$B.indicatorGuideline;
+      severityStyle = styles$A.indicatorGuideline;
       warningText = "Recommendation";
-      warningTextStyle = styles$B.warning;
+      warningTextStyle = styles$A.warning;
     }
     return /*#__PURE__*/React__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$B.indicator, severityStyle)
+      className: aphrodite.css(styles$A.indicator, severityStyle)
     }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+      className: aphrodite.css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
     }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
       key: i,
-      className: aphrodite.css(styles$B.tooltipParagraph)
+      className: aphrodite.css(styles$A.tooltipParagraph)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(warningTextStyle)
     }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+      className: aphrodite.css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
     })));
   };
 
@@ -17678,20 +17681,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$A.lintContainer, styles$A.lintContainerBlock)
+      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$A.lintContainer)
+      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$A.lintContainer)
+    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$B = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -18462,6 +18465,27 @@ const registerWidgets = widgets => {
   });
   validateAlignments();
 };
+
+/**
+ *
+ * @param name - the widget that you are trying to replace
+ * @param replacementName - the name of the widget that takes its place
+ *
+ * e.g. replaceWidget("transformer", "always-correct") will make it so the
+ * transformer widget is replaced by the always correct widget
+ */
+const replaceWidget = (name, replacementName) => {
+  const substituteWidget = widgets[replacementName];
+  if (!substituteWidget && Log) {
+    const errorMsg = `Failed to replace ${name} with ${replacementName}`;
+    Log.error(errorMsg, Errors.Internal);
+    return;
+  }
+  registerWidget(name, substituteWidget);
+  if (Log) {
+    Log.log(`INFO: Replacing widget ${name} with ${replacementName}`);
+  }
+};
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
     if (!editor.widgetName) {
@@ -18780,6 +18804,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   registerWidget: registerWidget,
   registerWidgets: registerWidgets,
+  replaceWidget: replaceWidget,
   registerEditors: registerEditors,
   getWidget: getWidget,
   getEditor: getEditor,
@@ -19740,7 +19765,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$A.mobileZoomableParentFix
+          ...styles$z.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -19877,7 +19902,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$A.mobileZoomableParentFix
+        ...styles$z.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -20385,7 +20410,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-const styles$A = {
+const styles$z = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21320,10 +21345,10 @@ class InputNumber extends React__namespace.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign];
+    const inputStyles = [styles$y.default, this.props.size === "small" ? styles$y.small : null, this.props.rightAlign ? styles$y.rightAlign : styles$y.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$z.answerStateUnanswered);
+      inputStyles.push(styles$y.answerStateUnanswered);
     }
     return /*#__PURE__*/React__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21471,7 +21496,7 @@ class InputNumber extends React__namespace.Component {
     return answerString;
   }
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -21509,7 +21534,7 @@ const propTransform$4 = widgetOptions => {
 };
 var InputNumber$1 = {
   name: "input-number",
-  displayName: "Number text box (old)",
+  displayName: "Input number (deprecated - use numeric input instead)",
   defaultAlignment: "inline-block",
   hidden: true,
   widget: InputNumber,
@@ -21913,7 +21938,7 @@ const propsTransform = function (widgetOptions) {
 };
 var NumericInput$1 = {
   name: "numeric-input",
-  displayName: "Number text box",
+  displayName: "Numeric input",
   defaultAlignment: "inline-block",
   accessible: true,
   widget: NumericInput,
@@ -22469,7 +22494,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-test-id": "focus-ring",
-    className: aphrodite.css(styles$y.ring),
+    className: aphrodite.css(styles$x.ring),
     style: style
   }, children);
 };
@@ -22478,7 +22503,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22515,7 +22540,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$x = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22538,7 +22563,7 @@ const CrossOutLine = function (props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
-    className: aphrodite.css(styles$w.crossOutLine),
+    className: aphrodite.css(styles$v.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22553,7 +22578,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22634,7 +22659,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$x.iconWrapper)
+    className: aphrodite.css(styles$w.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: Color__default["default"].blue,
     visible: focused || hovered,
@@ -22643,13 +22668,13 @@ const ChoiceIcon = function (props) {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
+    className: aphrodite.css(styles$u.circle, showCorrectness && correct && styles$u.circleCorrect, showCorrectness && !correct && styles$u.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$u.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
     "data-is-radio-icon": true
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$v.innerWrapper)
+    className: aphrodite.css(styles$u.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22658,7 +22683,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -22750,19 +22775,19 @@ const OptionStatus = function (props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$u.correct;
+    textStyle = styles$t.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$u.incorrectAnswered;
+      textStyle = styles$t.incorrectAnswered;
     } else {
-      textStyle = styles$u.incorrect;
+      textStyle = styles$t.incorrect;
     }
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$u.text, textStyle)
+    className: aphrodite.css(styles$t.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -22836,8 +22861,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$t.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$t.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$s.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$s.rationale));
 
   // 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
@@ -23004,7 +23029,7 @@ const Choice = function (props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23196,10 +23221,10 @@ const BaseRadio = function (props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$r.radio, styles$r.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$r.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$r.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$r.instructions, isMobile && styles$r.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = aphrodite.css(styles$s.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$r.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23250,7 +23275,7 @@ const BaseRadio = function (props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.css(sharedStyles.aboveScratchpad, styles$s.item, styles$s.responsiveItem, checked && styles$s.selectedItem, checked && choice.highlighted && styles$s.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$s.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$s.nextHighlighted);
+      return aphrodite.css(sharedStyles.aboveScratchpad, styles$r.item, styles$r.responsiveItem, checked && styles$r.selectedItem, checked && choice.highlighted && styles$r.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$r.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$r.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23324,14 +23349,14 @@ const BaseRadio = function (props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.responsiveContainer)
+    className: aphrodite.css(styles$r.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -23921,7 +23946,7 @@ const propUpgrades$1 = {
 };
 var Radio = {
   name: "radio",
-  displayName: "Multiple choice",
+  displayName: "Radio / Multiple choice",
   accessible: true,
   widget: Radio$1,
   transform: transform,
@@ -23990,9 +24015,9 @@ class Categorizer extends React__namespace.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React__namespace.createElement("table", {
-      className: "categorizer-table " + aphrodite.css(styles$r.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$q.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$r.emptyHeaderCell)
+      className: aphrodite.css(styles$q.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -24000,7 +24025,7 @@ class Categorizer extends React__namespace.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React__namespace.createElement("th", {
-        className: aphrodite.css(styles$r.header),
+        className: aphrodite.css(styles$q.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -24020,7 +24045,7 @@ class Categorizer extends React__namespace.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React__namespace.createElement("td", {
-          className: "category " + aphrodite.css(styles$r.cell),
+          className: "category " + aphrodite.css(styles$q.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24039,7 +24064,7 @@ class Categorizer extends React__namespace.Component {
           onChange: this.onChange.bind(this, itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$q.radioSpan, selected && styles$q.checkedRadioSpan, this.props.static && selected && styles$q.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24051,7 +24076,7 @@ class Categorizer extends React__namespace.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$r.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$q.fullBleedContainer] : [];
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24100,7 +24125,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$r = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24363,7 +24388,7 @@ class CSProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$q.widthOverride, styleContainer && styles$q.container)
+      className: aphrodite.css(styles$p.widthOverride, styleContainer && styles$p.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24373,7 +24398,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$q = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24421,7 +24446,7 @@ class Definition extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
         content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
           color: "white",
-          style: styles$p.tooltipBody,
+          style: styles$o.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -24452,7 +24477,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$p = {
+const styles$o = {
   tooltipBody: {
     color: Color__default["default"].offBlack,
     fontSize: 20,
@@ -24469,6 +24494,44 @@ var Definition$1 = {
   transform: x => x
 };
 
+// The props are type `any` on purpose so that this can receive props
+// from any deprecated widget
+class AutoCorrect extends React__default["default"].Component {
+  static validate(userInput, rubric) {
+    // Since this mean to replace an existing widget the learner
+    // WILL earn points for this widget
+    return {
+      type: "points",
+      earned: 1,
+      total: 1,
+      message: null
+    };
+  }
+  getUserInput = () => {
+    return {};
+  };
+  simpleValidate = rubric => {
+    return AutoCorrect.validate(this.getUserInput(), rubric);
+  };
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        paddingTop: 8,
+        paddingBottom: 8
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Banner__default["default"], {
+      text: i18n__namespace._("This part of the question is no-longer available. You will not be graded on this part."),
+      kind: "warning",
+      layout: "full-width"
+    }));
+  }
+}
+var DeprecatedStandin = {
+  name: "deprecated-standin",
+  displayName: "Deprecated Standin",
+  widget: AutoCorrect
+};
+
 class Dropdown extends React__namespace.Component {
   static defaultProps = {
     choices: [],
@@ -24617,15 +24680,15 @@ class Explanation extends React__namespace.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$o.linkContainer)
+        className: aphrodite.css(styles$n.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
-        className: aphrodite.css(styles$o.mobileExplanationLink),
+        className: aphrodite.css(styles$n.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, linkAnchor), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
-        className: aphrodite.css(styles$o.disclosureArrow)
+        className: aphrodite.css(styles$n.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24638,13 +24701,13 @@ class Explanation extends React__namespace.Component {
         // an anchor tag (if rendered in a modal) or a Wonder Blocks
         // link component in lesson page, see: `article-page.jsx`.
         linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$o.linkContainer, styles$o.articleLink)
+          className: aphrodite.css(styles$n.linkContainer, styles$n.articleLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$o.explanationLink)
+          className: aphrodite.css(styles$n.explanationLink)
           // HACK(michaelpolyak): WB Link doesn't passthrough
           // class name.
           ,
-          style: styles$o.explanationLink,
+          style: styles$n.explanationLink,
           href: href,
           onClick: onClick,
           role: "button",
@@ -24654,9 +24717,9 @@ class Explanation extends React__namespace.Component {
         // NOTE: For exercises, the baseElements `Link` is an
         // anchor tag, see: `perseus-api.jsx`.
         linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$o.linkContainer, styles$o.exerciseLink)
+          className: aphrodite.css(styles$n.linkContainer, styles$n.exerciseLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$o.explanationLink),
+          className: aphrodite.css(styles$n.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -24664,11 +24727,11 @@ class Explanation extends React__namespace.Component {
         }, `[${linkAnchor}]`));
       }
     }
-    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
+    const expandedStyle = isMobile ? styles$n.contentExpandedMobile : styles$n.contentExpanded;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$o.container)
+      className: aphrodite.css(styles$n.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
+      className: aphrodite.css(styles$n.content, isMobile && styles$n.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24691,7 +24754,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$o = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -24797,15 +24860,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       onNextQuestion
     } = this.props;
     const answerBarStyle = {
-      ...styles$n.answerBar,
+      ...styles$m.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? Color__default["default"].offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     };
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$m.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.tryAgainIcon
+      style: styles$m.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -24824,7 +24887,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$n.text
+      style: styles$m.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -24846,7 +24909,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$n = {
+const styles$m = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25046,7 +25109,7 @@ class GradedGroup extends React__namespace.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n__namespace._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$m.gradedGroupInSet) : aphrodite.css(styles$m.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$l.gradedGroupInSet) : aphrodite.css(styles$l.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25065,7 +25128,7 @@ class GradedGroup extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.title)
+      className: aphrodite.css(styles$l.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25098,7 +25161,7 @@ class GradedGroup extends React__namespace.Component {
     }, i18n__namespace._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: aphrodite.css(styles$m.explanationTitle),
+      className: aphrodite.css(styles$l.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25130,7 +25193,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$m.showHintLink)
+      className: aphrodite.css(styles$l.showHintLink)
     }, i18n__namespace._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25142,7 +25205,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$3 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25212,20 +25275,20 @@ class Indicators extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("ul", {
       // reduntantly add class name for use in .less files--
       //   the styles object key gets hashed
-      className: classNames__default["default"](aphrodite.css(styles$l.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$k.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$l.indicator),
+        className: aphrodite.css(styles$k.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": i18n__namespace._("Skip to %(title)s", {
           title
         }),
-        style: styles$l.indicatorButton,
+        style: styles$k.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
       }, _ref2 => {
@@ -25235,9 +25298,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: [styles$l.indicatorDot, (hovered || focused || pressed) && styles$l.indicatorDotFocused]
+          style: [styles$k.indicatorDot, (hovered || focused || pressed) && styles$k.indicatorDotFocused]
         }, i === this.props.currentGroup && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$l.indicatorDotActive
+          style: styles$k.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, i18n__namespace._("Current"))));
@@ -25313,7 +25376,7 @@ class GradedGroupSet extends React__namespace.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$l.container)
+        className: aphrodite.css(styles$k.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25336,13 +25399,13 @@ class GradedGroupSet extends React__namespace.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.container)
+      className: aphrodite.css(styles$k.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.top)
+      className: aphrodite.css(styles$k.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.title)
+      className: aphrodite.css(styles$k.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.spacer)
+      className: aphrodite.css(styles$k.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25380,7 +25443,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25485,7 +25548,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
+        className: aphrodite.css(styles$j.buttonStyle, button.value === value && styles$j.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25498,7 +25561,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$k = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -26814,7 +26877,7 @@ ___default["default"].extend(Iframe, {
 });
 var Iframe$1 = {
   name: "iframe",
-  displayName: "Iframe",
+  displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
   hidden: true
@@ -30962,212 +31025,92 @@ var globalStyles = /*#__PURE__*/Object.freeze({
   typography: typography
 });
 
-class AnswerChoice extends React__namespace.Component {
-  // The radio button or checkbox input control.
-
-  state = {
-    isInputFocused: false
-  };
-  focusInput() {
-    if (this._input) {
-      this._input.focus();
-    }
-  }
-  handleClick(e) {
+const AnswerChoices = props => {
+  const onAnswerChange = selected => {
     const {
-      checked,
+      choices,
       onChange
-    } = this.props;
-    e.preventDefault();
-
-    // We manually handle clicks, setting focus on the input control.
-    this.focusInput();
-
-    // And toggling the answer selection state.
-    onChange(!checked);
-  }
-  handleKeyDown(e) {
-    const {
-      onFocusPrevAnswer,
-      onFocusNextAnswer
-    } = this.props;
+    } = props;
+    onChange(choices.map(choice => selected.includes(choice.content)));
+  };
 
-    // This may override built-in browser arrow key navigation for radio
-    // group. Checkbox fieldset does not have such built-in capability,
-    // thus we do this manually for both input types.
-    switch (e.key) {
-      case "ArrowUp":
-        e.preventDefault();
-        onFocusPrevAnswer();
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        onFocusNextAnswer();
-        break;
-    }
-  }
-  handleInputChange(e) {
-    // Prevent answer selection from double-toggling, as `handleClick` is
-    // handling changes to selection state.
-    e.preventDefault();
-  }
-  handleInputFocus() {
-    this.setState({
-      isInputFocused: true
-    });
-  }
-  handleInputBlur() {
-    this.setState({
-      isInputFocused: false
+  // WB Dropdown types only take an array of nodes, so we can't use a
+  // functional component, which can only return a single node.
+  const AnswerItems = choices => choices.map(_ref => {
+    let {
+      content
+    } = _ref;
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+      key: content,
+      value: content,
+      label: /*#__PURE__*/React__namespace.createElement(Renderer, {
+        content: content,
+        inline: true
+      })
     });
-  }
-  renderCheckmark() {
-    const {
-      checked
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$j.checkmarkContainer)
-    }, checked && /*#__PURE__*/React__namespace.createElement(Icon, {
-      icon: iconCheckMedium,
-      size: 16,
-      color: Color__default["default"].offBlack
-    }));
-  }
-  render() {
-    const {
-      content,
-      checked,
-      groupName,
-      index,
-      inputType
-    } = this.props;
-    const {
-      isInputFocused
-    } = this.state;
-    const answerId = `${groupName}-${index}`;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.answerChoice, isInputFocused && styles$j.answerFocused),
-      onClick: e => this.handleClick(e),
-      onKeyDown: e => this.handleKeyDown(e)
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$j.answerInputWrapper)
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      className: aphrodite.css(sharedStyles.perseusSrOnly),
-      checked: checked,
-      name: groupName,
-      id: answerId,
-      type: inputType,
-      onChange: e => this.handleInputChange(e),
-      onFocus: () => this.handleInputFocus(),
-      onBlur: () => this.handleInputBlur(),
-      ref: node => this._input = node
-    }), this.renderCheckmark()), /*#__PURE__*/React__namespace.createElement("label", {
-      htmlFor: answerId
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-      content: content
-    })));
-  }
-}
-class AnswerChoices extends React__namespace.Component {
-  // The rendered answers elements.
-
-  constructor(props) {
-    super(props);
-    this._choices = [];
-    this.state = {
-      groupName: ___default["default"].uniqueId("answer_choices_")
-    };
-  }
-  focusAnswer() {
-    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    const numChoices = this.props.choices.length;
+  });
+  const selectedValues = props.choices.filter(choice => choice.checked).map(choice => choice.content);
+  const {
+    opener,
+    onToggle,
+    disabled
+  } = props;
+  const args = {
+    // reset to allow child (answer pill) to control z-index
+    style: {
+      zIndex: "unset"
+    },
+    children: AnswerItems(props.choices),
+    opener,
+    onToggle,
+    disabled
+  };
+  return props.multipleSelect ? /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.MultiSelect, _extends({}, args, {
+    selectedValues: selectedValues,
+    onChange: selected => onAnswerChange(selected)
+  })) : /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, _extends({}, args, {
+    selectedValue: selectedValues[0],
+    onChange: selected => onAnswerChange([selected]),
+    placeholder: props.choices[0].content // not visible, but required
+  }));
+};
 
-    // Wrap the index if necessary.
-    if (index < 0) {
-      index += numChoices;
-    } else if (index >= numChoices) {
-      index -= numChoices;
-    }
-    const choice = this._choices[index];
-    if (choice) {
-      choice.focusInput();
-    }
-  }
-  onAnswerChange(index, checked) {
-    const {
-      choices,
-      multipleSelect,
-      onChange
-    } = this.props;
-    const selection = [];
+const strings = {
+  hideAnswersToggleLabel: i18n__namespace._("Hide answer choices")
+};
 
-    // Compile the selection state of answer choices. In single selection
-    // mode (radio input type), only 0 or 1 answer may be chosen.
-    for (let i = 0; i < choices.length; i++) {
-      selection.push(multipleSelect ? i === index ? checked : choices[i].checked : i === index ? checked : false);
-    }
-    onChange(selection);
-  }
-  onFocusAnswer(index) {
-    this.focusAnswer(index);
-  }
-  render() {
-    const {
-      choices,
-      multipleSelect
-    } = this.props;
-    const {
-      groupName
-    } = this.state;
-    return /*#__PURE__*/React__namespace.createElement("fieldset", {
-      style: {
-        border: "none",
-        margin: 0,
-        padding: 0
-      }
-    }, choices.map((choice, index) => /*#__PURE__*/React__namespace.createElement(AnswerChoice, _extends({}, choice, {
-      key: choice.content,
-      groupName: groupName,
-      index: index,
-      inputType: multipleSelect ? "checkbox" : "radio",
-      onChange: checked => this.onAnswerChange(index, checked),
-      onFocusPrevAnswer: () => this.onFocusAnswer(index - 1),
-      onFocusNextAnswer: () => this.onFocusAnswer(index + 1),
-      ref: node => this._choices[index] = node
-    }))));
-  }
-}
-const styles$j = aphrodite.StyleSheet.create({
-  answerChoice: {
+const HideAnswersToggle = props => {
+  const idFactory = wonderBlocksCore.useUniqueIdWithMock();
+  const switchId = idFactory.get("hide-answers-toggle");
+  const labelId = idFactory.get("hide-answers-label");
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$i.switchWrapper
+  }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
+    id: switchId,
+    checked: props.areAnswersHidden,
+    onChange: props.onChange,
+    "aria-labelledby": labelId
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    id: labelId,
+    htmlFor: switchId,
+    tag: "label"
+  }, strings.hideAnswersToggleLabel));
+};
+const styles$i = aphrodite.StyleSheet.create({
+  switchWrapper: {
     display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap-reverse",
     alignItems: "center",
-    userSelect: "none",
-    padding: "10px 16px 10px 0px",
-    fontWeight: "bold",
-    border: "solid 2px transparent",
-    borderRadius: 2,
-    ":active": {
-      backgroundColor: "rgba(33, 36, 44, 0.08)"
-    }
-  },
-  answerFocused: {
-    borderColor: "#1865f2",
-    ":active": {
-      borderColor: "transparent"
-    }
-  },
-  answerInputWrapper: {
-    marginRight: 8
-  },
-  checkmarkContainer: {
-    display: "flex",
-    position: "relative",
-    width: 16,
-    height: 16,
-    marginLeft: 8
+    gap: "0.5em",
+    marginTop: "1em"
   }
 });
 
+const BringToFront = {
+  boxShadow: `0 8px 8px ${Color__default["default"].offBlack64}`,
+  zIndex: 1000
+};
 const AnswerPill = props => {
   const {
     selectedAnswers,
@@ -31175,7 +31118,9 @@ const AnswerPill = props => {
     markerRef,
     side,
     onClick,
-    style
+    style,
+    focused,
+    hovered
   } = props;
   const idFactory = wonderBlocksCore.useUniqueIdWithMock();
   const answerString = selectedAnswers.length > 1 ?
@@ -31186,10 +31131,6 @@ const AnswerPill = props => {
   // has been labeled (answered) correctly.
   const correct = showCorrectness === "correct";
   const incorrect = showCorrectness === "incorrect";
-  const bringToFront = {
-    boxShadow: `0 8px 8px ${Color__default["default"].offBlack64}`,
-    zIndex: 1000
-  };
   return /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
     placement: side,
     referenceElement: markerRef,
@@ -31210,63 +31151,29 @@ const AnswerPill = props => {
       id: idFactory.get("perseus-label-image-widget-answer-pill"),
       onClick: correct ? undefined : onClick,
       ref: ref,
-      style: [style, popperStyle, {
-        ":hover": bringToFront,
-        ":focus": bringToFront
-      }, correct && styles$i.correct, incorrect && styles$i.incorrect]
+      style: [style, popperStyle, styles$h.relative, correct && styles$h.correct, incorrect && styles$h.incorrect, (focused || hovered) && BringToFront]
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: answerString,
       inline: true
     }));
   });
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   correct: {
-    backgroundColor: "#00880b" // WB green darkened by 18%
+    // WB green darkened by 18%
+    backgroundColor: "#00880b"
   },
-
   incorrect: {
     backgroundColor: Color__default["default"].offBlack64
   }
 });
 
-const strings = {
-  hideAnswersToggleLabel: i18n__namespace._("Hide answer choices")
-};
-
-const HideAnswersToggle = props => {
-  const idFactory = wonderBlocksCore.useUniqueIdWithMock();
-  const switchId = idFactory.get("hide-answers-toggle");
-  const labelId = idFactory.get("hide-answers-label");
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$h.switchWrapper
-  }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
-    id: switchId,
-    checked: props.areAnswersHidden,
-    onChange: props.onChange,
-    "aria-labelledby": labelId
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    id: labelId,
-    htmlFor: switchId,
-    tag: "label"
-  }, strings.hideAnswersToggleLabel));
-};
-const styles$h = aphrodite.StyleSheet.create({
-  switchWrapper: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap-reverse",
-    alignItems: "center",
-    gap: "0.5em",
-    marginTop: "1em"
-  }
-});
-
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 function shouldReduceMotion() {
   const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
   return !mediaQuery || mediaQuery.matches;
 }
+const MARKER_SIZE = 24;
 class Marker extends React__namespace.Component {
   // The marker icon element.
 
@@ -31278,123 +31185,101 @@ class Marker extends React__namespace.Component {
       selected,
       showCorrectness,
       showSelected,
-      showPulsate,
-      focused
+      showPulsate
     } = this.props;
 
     // Only a single marker may be "selected" at a time.
     // `showSelected` is a controlled prop, that may be set to `true` for
     // one marker at a time.
-    // `focused` is a controlled state, driven by focus events, and may
-    // only be `true` when there's no answer choices popup visible, and
-    // keyboard focus is given to the marker.
-    const isSelected = showSelected || focused;
-    let innerIcon;
+    const isOpen = showSelected;
+    const selectedAnswers = selected;
     let iconStyles;
+    const iconNull = {
+      path: "",
+      height: 0,
+      width: 0
+    };
+
+    // default dot
+    let args = {
+      size: MARKER_SIZE,
+      color: Color__default["default"].white,
+      icon: iconNull
+    };
     if (showCorrectness) {
-      innerIcon = /*#__PURE__*/React__namespace.createElement(Icon, {
-        icon: showCorrectness === "correct" ? iconCheck : iconMinus,
-        size: 24,
-        color: Color__default["default"].white
-      });
-      if (showCorrectness === "correct") {
-        iconStyles = [styles$g.markerGraded, styles$g.markerCorrect, isSelected && styles$g.markerSelected];
-      } else {
-        iconStyles = [styles$g.markerGraded, styles$g.markerIncorrect, isSelected && styles$g.markerSelected];
-      }
-    } else if (focused) {
-      iconStyles = [styles$g.markerFocused, selected && selected.length > 0 && styles$g.markerFilled, showSelected && styles$g.markerSelected];
-    } else if (selected && selected.length > 0) {
-      iconStyles = [styles$g.markerFilled, isSelected && styles$g.markerSelected];
-    } else if (isSelected) {
+      iconStyles = [styles$g.markerGraded, showCorrectness === "correct" ? styles$g.markerCorrect : styles$g.markerIncorrect, isOpen && styles$g.markerSelected];
+      args = {
+        ...args,
+        icon: showCorrectness === "correct" ? iconCheck : iconMinus
+      };
+    } else if (selectedAnswers && selectedAnswers.length > 0) {
+      iconStyles = [styles$g.markerFilled, isOpen && styles$g.markerSelected];
+    } else if (isOpen) {
       iconStyles = [styles$g.markerSelected];
-    } else {
-      iconStyles = [styles$g.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$g.markerUnfilledPulsateOnce : showPulsate && styles$g.markerUnfilledPulsateInfinite];
-    }
-    if (isSelected && selected && selected.length === 0) {
-      innerIcon = /*#__PURE__*/React__namespace.createElement(Icon, {
+      args = {
+        ...args,
         icon: iconChevronDown,
-        size: 8,
-        color: Color__default["default"].white
-      });
+        size: 8
+      };
+    } else if (showPulsate) {
+      iconStyles = [styles$g.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$g.markerUnfilledPulsateOnce : showPulsate && styles$g.markerUnfilledPulsateInfinite];
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: [styles$g.markerIcon, iconStyles],
       ref: node => this._icon = node
-    }, innerIcon);
+    }, /*#__PURE__*/React__namespace.createElement(Icon, args));
   }
   render() {
     const {
-      label,
-      x,
-      y,
-      showCorrectness
+      showCorrectness,
+      selected,
+      showAnswer,
+      answerSide,
+      answerStyles,
+      hovered,
+      focused
     } = this.props;
 
-    // It should no longer be possible to interact with a marker after it
-    // has been labeled (answered) correctly.
-    const isDisabled = showCorrectness === "correct";
-    return /*#__PURE__*/React__namespace.createElement("button", {
-      "aria-label": label,
-      className: aphrodite.css(styles$g.unstyledButton, styles$g.marker, isDisabled && styles$g.disabled),
-      style: {
-        left: `${x}%`,
-        top: `${y}%`
-      },
-      tabIndex: isDisabled ? -1 : 0,
-      onFocus: this.props.onFocus,
-      onBlur: this.props.onBlur,
-      onClick: e => {
-        e.preventDefault();
-        this.props.onClick(e);
-      },
-      onKeyDown: e => this.props.onKeyDown(e)
-    }, this.renderIcon());
+    // We cannot make dropdown openers untabbable, so we isolate tabbing
+    // to answer pills when interaction is disabled.
+    const markerDisabled = showCorrectness === "correct";
+    const active = hovered || focused;
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$g.marker, active && !markerDisabled && styles$g.markerActive]
+    }, this.renderIcon()), !!selected && showAnswer && /*#__PURE__*/React__namespace.createElement(AnswerPill, {
+      selectedAnswers: selected,
+      showCorrectness: showCorrectness,
+      side: answerSide,
+      style: answerStyles,
+      markerRef: this._icon ?? undefined,
+      hovered: hovered,
+      focused: focused
+    }));
   }
 }
-const lightShadowColor = "rgba(33, 36, 44, 0.16)";
-const markerSize = 20;
 const styles$g = aphrodite.StyleSheet.create({
-  unstyledButton: {
-    padding: 0,
-    overflow: "visible",
-    color: "inherit",
-    font: "inherit",
-    lineHeight: "normal",
-    background: "none",
-    border: "none"
-  },
   marker: {
     position: "absolute",
-    outline: "none",
-    // Center marker position based on it's maximum size.
-    width: markerSize,
-    height: markerSize,
     backgroundColor: Color__default["default"].white,
-    borderRadius: 30,
-    marginLeft: -15,
-    marginTop: -15
-  },
-  disabled: {
-    pointerEvents: "none"
+    borderRadius: MARKER_SIZE,
+    // Center marker position based on its maximum size.
+    width: MARKER_SIZE,
+    height: MARKER_SIZE,
+    marginLeft: MARKER_SIZE / -2,
+    marginTop: MARKER_SIZE / -2,
+    // Add a shadow to the marker to make it stand out from the image.
+    boxShadow: `0 8px 8px ${Color__default["default"].offBlack8}`
   },
   // The base and unfilled marker style.
   markerIcon: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    boxSizing: "content-box",
-    width: markerSize,
-    height: markerSize,
-    marginLeft: 2,
-    cursor: "pointer",
+    boxSizing: "border-box",
+    width: MARKER_SIZE,
+    height: MARKER_SIZE,
     border: `2px solid ${Color__default["default"].offBlack64}`,
-    borderRadius: markerSize,
-    boxShadow: `0 8px 8px ${Color__default["default"].offBlack8}`,
-    ":hover": {
-      outline: `2px solid ${Color__default["default"].blue}`,
-      outlineOffset: 2
-    }
+    borderRadius: MARKER_SIZE
   },
   // The animation that presents the marker to the learner
   markerPulsateBase: {
@@ -31415,16 +31300,13 @@ const styles$g = aphrodite.StyleSheet.create({
     animationIterationCount: "0"
   },
   markerUnfilledPulsateInfinite: {
-    animationIterationCount: "infinite",
-    ":hover": {
-      outline: `0px solid ${Color__default["default"].blue}`
-    }
+    animationIterationCount: "infinite"
   },
   markerUnfilledPulsateOnce: {
     // Doing the animation twice lets it ease-in and ease-out
     animationIterationCount: "2"
   },
-  markerFocused: {
+  markerActive: {
     outline: `2px solid ${Color__default["default"].blue}`,
     outlineOffset: 2
   },
@@ -31433,33 +31315,20 @@ const styles$g = aphrodite.StyleSheet.create({
     boxShadow: `0 8px 8px ${Color__default["default"].offBlack8}`,
     border: `solid 4px ${Color__default["default"].white}`,
     backgroundColor: Color__default["default"].blue,
-    borderRadius: markerSize,
-    transform: "rotate(180deg)",
-    ":hover": {
-      outline: `2px solid ${Color__default["default"].blue}`,
-      outlineOffset: -2
-    }
+    borderRadius: MARKER_SIZE,
+    transform: "rotate(180deg)"
   },
   // The learner has made a selection
   markerFilled: {
-    width: markerSize - 2,
-    height: markerSize - 2,
-    borderRadius: markerSize - 2,
     backgroundColor: "#ECF3FE",
-    marginLeft: 3,
-    marginTop: 0,
-    border: `4px solid ${Color__default["default"].blue}`,
-    boxShadow: `0 1px 1px 0 ${lightShadowColor}`
+    border: `4px solid ${Color__default["default"].blue}`
   },
   markerGraded: {
-    width: markerSize,
-    height: markerSize,
-    marginLeft: 1,
-    marginTop: 1,
+    width: MARKER_SIZE,
+    height: MARKER_SIZE,
     justifyContent: "center",
     alignItems: "center",
-    border: `2px solid ${Color__default["default"].white}`,
-    boxShadow: `0 8px 8px ${Color__default["default"].offBlack8}`
+    border: `2px solid ${Color__default["default"].white}`
   },
   markerCorrect: {
     background: "#00880b" // WB green darkened by 18%
@@ -31478,10 +31347,6 @@ const styles$g = aphrodite.StyleSheet.create({
 class LabelImage extends React__namespace.Component {
   // The rendered markers on the question image for labeling.
 
-  // The popup component containing the answer choices.
-
-  // The rendered list of answer choices for the currently selected marker.
-
   static gradeMarker(marker) {
     const score = {
       hasAnswers: false,
@@ -31715,7 +31580,6 @@ class LabelImage extends React__namespace.Component {
     this._markers = [];
     this.state = {
       activeMarkerIndex: -1,
-      focusedMarkerIndex: -1,
       markersInteracted: false,
       hideAnswers: false
     };
@@ -31754,26 +31618,6 @@ class LabelImage extends React__namespace.Component {
       markers: updatedMarkers
     }, null, true);
   }
-  dismissMarkerPopup() {
-    const {
-      activeMarkerIndex
-    } = this.state;
-
-    // No popup should be open if there's no selected marker.
-    if (activeMarkerIndex === -1) {
-      return;
-    }
-    this.setState({
-      activeMarkerIndex: -1
-    }, () => {
-      const marker = this._markers[activeMarkerIndex];
-      // Set focus on the just-deselected-marker, to enable to resume
-      // navigating between the markers using the keyboard.
-      if (marker) {
-        ReactDOM__namespace.findDOMNode(marker).focus();
-      }
-    });
-  }
   handleMarkerChange(index, marker) {
     const {
       markers,
@@ -31793,32 +31637,24 @@ class LabelImage extends React__namespace.Component {
       markers: updatedMarkers
     });
   }
-  activateMarker(index) {
+  activateMarker(index, opened) {
+    this.props.analytics?.onAnalyticsEvent({
+      type: "perseus:label-image:marker-interacted-with",
+      payload: null
+    });
     const {
       activeMarkerIndex
     } = this.state;
-
-    // Select the marker, revealing answer choices.
-    if (activeMarkerIndex !== index) {
+    // Set index of opened marker
+    if (activeMarkerIndex !== index && opened) {
       this.setState({
         activeMarkerIndex: index,
         markersInteracted: true
-      }, () => {
-        // A delay is required to allow answer choices to first render
-        // before trying to set focus on the first choice.
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-        // eslint-disable-next-line no-restricted-syntax
-        setTimeout(() => {
-          if (this._answerChoices) {
-            this._answerChoices.focusAnswer();
-          }
-        }, 100);
       });
     } else {
-      // The answer choices are shown within a popup attached to the
-      // selected marker. Close the popup and set focus back to the
-      // marker.
-      this.dismissMarkerPopup();
+      this.setState({
+        activeMarkerIndex: -1
+      });
     }
   }
   handleMarkerKeyDown(index, e) {
@@ -31866,8 +31702,7 @@ class LabelImage extends React__namespace.Component {
   handleAnswerChoicesChangeForMarker(index, selection) {
     const {
       choices,
-      markers,
-      multipleAnswers
+      markers
     } = this.props;
 
     // Compile the user selected answer choices.
@@ -31876,35 +31711,6 @@ class LabelImage extends React__namespace.Component {
       ...markers[index],
       selected: selected.length ? selected : undefined
     });
-    if (!multipleAnswers) {
-      this.dismissMarkerPopup();
-    }
-  }
-  renderAnswerChoicesForMarker(index, marker) {
-    const {
-      choices,
-      multipleAnswers
-    } = this.props;
-
-    // The user selected answer choices.
-    const selected = marker.selected;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: classNames__default["default"]("perseus-label-image-widget-answer-choices", aphrodite.css(styles$f.scrollableChoices))
-    }, /*#__PURE__*/React__namespace.createElement(AnswerChoices, {
-      choices: choices.map(choice => ({
-        content: choice,
-        checked: selected ? selected.includes(choice) : false
-      })),
-      multipleSelect: multipleAnswers,
-      onChange: selection => {
-        this.props.analytics?.onAnalyticsEvent({
-          type: "perseus:label-image:choiced-interacted-with",
-          payload: null
-        });
-        this.handleAnswerChoicesChangeForMarker(index, selection);
-      },
-      ref: node => this._answerChoices = node
-    }));
   }
   renderMarkers() {
     const {
@@ -31919,40 +31725,6 @@ class LabelImage extends React__namespace.Component {
 
     // Render all markers for widget.
     return markers.map((marker, index) => {
-      const score = LabelImage.gradeMarker(marker);
-      // Once the question is answered, show markers
-      // with correct answers, otherwise passthrough
-      // the correctness state.
-      const showCorrectness = questionCompleted && score.hasAnswers && score.isCorrect ? "correct" : marker.showCorrectness;
-      const element = /*#__PURE__*/React__namespace.createElement(Marker, _extends({}, marker, {
-        showCorrectness: showCorrectness,
-        showSelected: index === activeMarkerIndex,
-        showPulsate: !markersInteracted,
-        key: `${marker.x}.${marker.y}`,
-        onClick: () => {
-          this.props.analytics?.onAnalyticsEvent({
-            type: "perseus:label-image:marker-interacted-with",
-            payload: null
-          });
-          this.activateMarker(index);
-        },
-        onKeyDown: e => this.handleMarkerKeyDown(index, e),
-        ref: node => this._markers[index] = node,
-        focused: index === this.state.focusedMarkerIndex,
-        onFocus: () => {
-          this.setState({
-            focusedMarkerIndex: index
-          });
-        },
-        onBlur: () => {
-          if (index === this.state.focusedMarkerIndex) {
-            this.setState({
-              focusedMarkerIndex: -1
-            });
-          }
-        }
-      }));
-
       // Determine whether page is rendered in a narrow browser window.
       const isNarrowPage = window.matchMedia(mediaQueries.xsOrSmaller.replace("@media ", "")).matches;
 
@@ -31980,40 +31752,77 @@ class LabelImage extends React__namespace.Component {
           bottom: "top"
         }[markerPosition];
       }
-      const answerChoicesActive = index === activeMarkerIndex;
-      const adjustPopoverDistance = {
-        [side]: 15 // move the popover closer to the marker
-      };
+      const score = LabelImage.gradeMarker(marker);
+      // Once the question is answered, show markers
+      // with correct answers, otherwise passthrough
+      // the correctness state.
+      const showCorrectness = questionCompleted && score.hasAnswers && score.isCorrect ? "correct" : marker.showCorrectness;
 
+      // Disable marker interaction once the question is answered correctly.
+      const disabled = showCorrectness === "correct";
       const adjustPillDistance = {
-        [`margin${markerPosition.charAt(0).toUpperCase() + markerPosition.slice(1)}`]: 15 // move pill further from marker
+        [`margin${markerPosition.charAt(0).toUpperCase() + markerPosition.slice(1)}`]: 10 // move pill further from marker
       };
 
-      const showAnswerChoice = !answerChoicesActive && !this.state.hideAnswers;
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        key: `answers-${marker.x}.${marker.y}`
-      }, /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
-        content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
-          style: [adjustPopoverDistance, styles$f.choicesPopover]
-        }, this.renderAnswerChoicesForMarker(index, marker)),
-        placement: side,
-        onClose: () => this.dismissMarkerPopup(),
-        opened: answerChoicesActive,
-        ref: node => this._selectedMarkerPopup = node,
-        showTail: false,
-        dismissEnabled: true
-      }, element), !!marker.selected && showAnswerChoice && /*#__PURE__*/React__namespace.createElement(AnswerPill, {
-        selectedAnswers: marker.selected,
-        showCorrectness: showCorrectness,
-        markerRef:
-        // this throws a warning because it's inadvisable to
-        // call ReactDOM fns in render. we aren't storing
-        // actual refs in this array, so not much I can do
-        // outside of a refactor.
-        ReactDOM__namespace.findDOMNode(this._markers[index]),
-        side: side,
-        onClick: () => this.activateMarker(index),
-        style: adjustPillDistance
+      const answerChoicesActive = index === activeMarkerIndex;
+      const showAnswerChoice = marker.selected && !answerChoicesActive && !this.state.hideAnswers;
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+        style: {
+          position: "absolute",
+          left: `${marker.x}%`,
+          top: `${marker.y}%`,
+          // reset to allow child (answer pill) to control z-index
+          zIndex: "unset"
+        }
+      }, /*#__PURE__*/React__namespace.createElement(AnswerChoices, {
+        key: `answers-${marker.x}.${marker.y}`,
+        choices: this.props.choices.map(choice => ({
+          content: choice,
+          checked: marker.selected ? marker.selected.includes(choice) : false
+        })),
+        multipleSelect: this.props.multipleAnswers,
+        onChange: selection => {
+          this.props.analytics?.onAnalyticsEvent({
+            type: "perseus:label-image:choiced-interacted-with",
+            payload: null
+          });
+          this.handleAnswerChoicesChangeForMarker(index, selection);
+        },
+        onToggle: opened => this.activateMarker(index, opened)
+        // cannot change answer choices once question is answered
+        ,
+        disabled: disabled,
+        opener: _ref => {
+          let {
+            opened,
+            text
+          } = _ref;
+          return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+            role: "button",
+            key: `marker-${marker.x}.${marker.y}`,
+            "aria-label":
+            // already translated in: /widgets/graded-group.tsx
+            showCorrectness === "correct" ? i18n__namespace._("Correct!") : marker.label
+          }, _ref2 => {
+            let {
+              hovered,
+              focused,
+              pressed
+            } = _ref2;
+            return /*#__PURE__*/React__namespace.createElement(Marker, _extends({}, marker, {
+              showCorrectness: showCorrectness,
+              showSelected: opened,
+              showPulsate: !markersInteracted,
+              ref: node => this._markers[index] = node,
+              showAnswer: showAnswerChoice,
+              answerSide: side,
+              answerStyles: adjustPillDistance,
+              analytics: this.props.analytics,
+              focused: focused || pressed,
+              hovered: hovered
+            }));
+          });
+        }
       }));
     });
   }
@@ -32066,10 +31875,10 @@ class LabelImage extends React__namespace.Component {
       // than its rendered in the widget, this would
       // result in a zoom of the image.
       activeMarkerIndex !== -1 && styles$f.imageInteractionDisabled)
-    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
+    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref3 => {
       let {
         setAssetStatus
-      } = _ref;
+      } = _ref3;
       return /*#__PURE__*/React__namespace.createElement(SvgImage, {
         alt: imageAlt,
         src: imageUrl,
@@ -32132,18 +31941,6 @@ const styles$f = aphrodite.StyleSheet.create({
   },
   imageInteractionDisabled: {
     pointerEvents: "none"
-  },
-  scrollableChoices: {
-    paddingTop: 8,
-    paddingBottom: 8,
-    // Enable scroll for answer choices within popup on mobile phones.
-    [mediaQueries.xsOrSmaller]: {
-      maxHeight: 250,
-      overflowY: "auto"
-    }
-  },
-  choicesPopover: {
-    padding: 0
   }
 });
 const LabelImageWithDependencies = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
@@ -32426,7 +32223,7 @@ const transformProps = function (editorProps) {
 };
 var LightsPuzzle$1 = {
   name: "lights-puzzle",
-  displayName: "Lights Puzzle",
+  displayName: "Lights puzzle (deprecated)",
   hidden: true,
   widget: LightsPuzzle,
   transform: transformProps
@@ -33366,7 +33163,7 @@ const styles$d = aphrodite.StyleSheet.create({
 });
 var Matcher$1 = {
   name: "matcher",
-  displayName: "Two column matcher",
+  displayName: "Matcher (two column)",
   widget: Matcher,
   isLintable: true
 };
@@ -39432,7 +39229,7 @@ class ReactionDiagramWidget extends React__namespace.Component {
 }
 var ReactionDiagram = {
   name: "reaction-diagram",
-  displayName: "Chemical reaction",
+  displayName: "Chemical reaction diagram (deprecated)",
   hidden: true,
   widget: ReactionDiagramWidget
 };
@@ -39529,7 +39326,7 @@ const traverseChildWidgets = function (props, traverseRenderer) {
 };
 var Sequence$1 = {
   name: "sequence",
-  displayName: "Graded Sequence",
+  displayName: "Graded sequence (deprecated)",
   widget: Sequence,
   traverseChildWidgets: traverseChildWidgets,
   tracking: "all",
@@ -40243,7 +40040,7 @@ const propTransform$1 = editorProps => {
 };
 var Simulator$1 = {
   name: "simulator",
-  displayName: "Simulator",
+  displayName: "Simulator (deprecated)",
   widget: Simulator,
   transform: propTransform$1,
   hidden: true
@@ -40657,7 +40454,7 @@ const propTransform = editorProps => {
 };
 var Table$1 = {
   name: "table",
-  displayName: "Table of values",
+  displayName: "Table (deprecated - use markdown table instead)",
   accessible: true,
   widget: Table,
   transform: propTransform,
@@ -43069,7 +42866,8 @@ class Transformer extends React__namespace.Component {
 }
 var Transformer$1 = {
   name: "transformer",
-  displayName: "Transformer",
+  displayName: "Transformer (deprecated)",
+  hidden: true,
   widget: Transformer
 };
 
@@ -44117,7 +43915,7 @@ const primUnits = function (expr) {
 };
 var Unit = {
   name: "unit-input",
-  displayName: "Unit",
+  displayName: "Unit input",
   defaultAlignment: "inline-block",
   widget: OldUnitInput,
   transform: x => lens(x).del(["value"]).freeze(),
@@ -44298,7 +44096,7 @@ var Video$1 = {
 };
 
 /* eslint-disable import/no-named-as-default */
-var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, LightsPuzzle$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, ReactionDiagram, Sequence$1, Simulator$1, Sorter$1, Table$1, Transformer$1, Unit, Video$1];
+var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, LightsPuzzle$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, ReactionDiagram, Sequence$1, Simulator$1, Sorter$1, Table$1, Transformer$1, Unit, Video$1, DeprecatedStandin];
 
 /**
  * This should be called by all clients, specifying whether extra widgets are
@@ -44313,6 +44111,11 @@ const init = function (options) {
   registerWidgets(basicWidgets);
   registerWidgets(extraWidgets);
 
+  // This section replaces widgets
+  // When it's time to replace the transformer widget
+  // uncomment this line
+  // Widgets.replaceWidget("transformer", "always-correct");
+
   // Pass skipMathJax: true if MathJax is already loaded and configured.
   const skipMathJax = options.skipMathJax;
   if (skipMathJax) {
@@ -44337,7 +44140,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "17.5.0";
+const libVersion = "17.6.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45784,6 +45587,8 @@ const ItemExtras = [
 
 // prettier-ignore
 
+//prettier-ignore
+
 // A background image applied to various widgets.
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
@@ -46906,6 +46711,10 @@ function violatingWidgets(itemData) {
  */
 const registerAllWidgetsForTesting = () => {
   registerWidgets(allWidgets);
+
+  // When it's time to replace the transformer widget
+  // uncomment this line
+  // Widgets.replaceWidget("transformer", "deprecated-standin");
 };
 
 const EditorJsonify = {