@khanacademy/perseus 17.6.0 → 17.6.2

package/dist/es/index.js

@@ -7,7 +7,7 @@ import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
+import React__default, { useState, useEffect, useRef } from 'react';
 import _, { debounce } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import Color, { fade } from '@khanacademy/wonder-blocks-color';
@@ -25,12 +25,13 @@ import { pureMarkdownRules } from '@khanacademy/pure-markdown';
 import { TextField } from '@khanacademy/wonder-blocks-form';
 import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { OptionItem, SingleSelect } from '@khanacademy/wonder-blocks-dropdown';
+import Banner from '@khanacademy/wonder-blocks-banner';
+import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$1 from 'lodash.debounce';
-import Pill from '@khanacademy/wonder-blocks-pill';
-import { Popper } from 'react-popper';
 import Switch from '@khanacademy/wonder-blocks-switch';
 import { LabelMedium } from '@khanacademy/wonder-blocks-typography';
+import Pill from '@khanacademy/wonder-blocks-pill';
+import { Popper } from 'react-popper';
 import createReactClass from 'create-react-class';
 import Link from '@khanacademy/wonder-blocks-link';
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
@@ -242,7 +243,7 @@ class MathInput extends React.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(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.createElement("div", {
       style: {
         display: "flex",
@@ -271,7 +272,7 @@ class MathInput extends React.Component {
         var _this$props$keypadBut, _this$props;
         return /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$C.popoverContent
+          style: styles$B.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
@@ -315,9 +316,9 @@ const MathInputIcon = ({
       color = Color.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.createElement(View, {
-    style: [styles$C.iconContainer, dynamicClass]
+    style: [styles$B.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -362,7 +363,7 @@ const inputFocused = {
   borderColor: Color.blue,
   margin: -1
 };
-const styles$C = StyleSheet.create({
+const styles$B = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -17566,33 +17567,33 @@ class Lint extends React.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.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$B.indicator, severityStyle)
+        className: css(styles$A.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
+        className: css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$B.tooltipParagraph)
+        className: css(styles$A.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
+        className: css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
       })));
     };
   }
@@ -17630,20 +17631,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
-      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$A.lintContainer, styles$A.lintContainerBlock)
+      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$B.lintContainer)
-      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$A.lintContainer)
+      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$B.lintContainer)
-    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$A.lintContainer)
+    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$B = StyleSheet.create({
+const styles$A = 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.
@@ -18397,6 +18398,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) {
@@ -18712,6 +18734,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   registerWidget: registerWidget,
   registerWidgets: registerWidgets,
+  replaceWidget: replaceWidget,
   registerEditors: registerEditors,
   getWidget: getWidget,
   getEditor: getEditor,
@@ -19494,7 +19517,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$z.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -19615,7 +19638,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$z.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20262,7 +20285,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-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
@@ -21279,10 +21302,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$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.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21367,7 +21390,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$z = StyleSheet.create({
+const styles$y = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22368,7 +22391,7 @@ const FocusRing = function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-test-id": "focus-ring",
-    className: css(styles$y.ring),
+    className: css(styles$x.ring),
     style: style
   }, children);
 };
@@ -22377,7 +22400,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$y = StyleSheet.create({
+const styles$x = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22414,7 +22437,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$x = StyleSheet.create({
+const styles$w = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22437,7 +22460,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$w.crossOutLine),
+    className: css(styles$v.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22452,7 +22475,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22533,7 +22556,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$x.iconWrapper)
+    className: css(styles$w.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: Color.blue,
     visible: focused || hovered,
@@ -22542,13 +22565,13 @@ const ChoiceIcon = function ChoiceIcon(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: css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.circleIncorrectAnswered)
+    className: 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.createElement("div", {
-    className: css(styles$v.innerWrapper)
+    className: css(styles$u.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22557,7 +22580,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -22649,19 +22672,19 @@ const OptionStatus = function OptionStatus(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.createElement("div", {
-    className: css(styles$u.text, textStyle)
+    className: css(styles$t.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$u = StyleSheet.create({
+const styles$t = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -22736,8 +22759,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$t.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$t.rationale));
+  const descriptionClassName = classNames("description", css(styles$s.description));
+  const rationaleClassName = classNames("perseus-radio-rationale-content", 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
@@ -22897,7 +22920,7 @@ const Choice = function Choice(props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$t = StyleSheet.create({
+const styles$s = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23089,10 +23112,10 @@ const BaseRadio = function BaseRadio(props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$s.radio, styles$s.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$s.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$s.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$s.instructions, isMobile && styles$s.instructionsMobile));
+  const className = classNames("perseus-widget-radio", !editMode && "perseus-rendered-radio", css(styles$r.radio, styles$r.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$r.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$r.radioContainerLastHighlighted));
+  const instructionsClassName = classNames("instructions", css(styles$r.instructions, isMobile && styles$r.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = css(styles$s.responsiveFieldset);
+  const responsiveClassName = css(styles$r.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -23143,7 +23166,7 @@ const BaseRadio = function BaseRadio(props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return 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 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
@@ -23217,14 +23240,14 @@ const BaseRadio = function BaseRadio(props) {
   // 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$s.responsiveContainer)
+    className: css(styles$r.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$s = StyleSheet.create({
+const styles$r = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -23872,9 +23895,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$r.mobileTable)
+      className: "categorizer-table " + css(styles$q.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$r.emptyHeaderCell)
+      className: 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
@@ -23882,7 +23905,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$r.header),
+        className: css(styles$q.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -23902,7 +23925,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$r.cell),
+          className: "category " + css(styles$q.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -23921,7 +23944,7 @@ class Categorizer extends React.Component {
           onChange: this.onChange.bind(this, itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React.createElement("span", {
-          className: css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
+          className: css(styles$q.radioSpan, selected && styles$q.checkedRadioSpan, this.props.static && selected && styles$q.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -23933,7 +23956,7 @@ class Categorizer extends React.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.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -23978,7 +24001,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$r = StyleSheet.create({
+const styles$q = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24214,7 +24237,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$q.widthOverride, styleContainer && styles$q.container)
+      className: css(styles$p.widthOverride, styleContainer && styles$p.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24243,7 +24266,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$q = StyleSheet.create({
+const styles$p = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24288,7 +24311,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$p.tooltipBody,
+        style: styles$o.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -24319,7 +24342,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$p = {
+const styles$o = {
   tooltipBody: {
     color: Color.offBlack,
     fontSize: 20,
@@ -24336,6 +24359,47 @@ 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.Component {
+  constructor(...args) {
+    super(...args);
+    this.getUserInput = () => {
+      return {};
+    };
+    this.simpleValidate = rubric => {
+      return AutoCorrect.validate(this.getUserInput(), rubric);
+    };
+  }
+  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
+    };
+  }
+  render() {
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        paddingTop: 8,
+        paddingBottom: 8
+      }
+    }, /*#__PURE__*/React__default.createElement(Banner, {
+      text: i18n._("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.Component {
   constructor(...args) {
     super(...args);
@@ -24483,15 +24547,15 @@ class Explanation extends React.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React.createElement("div", {
-        className: css(styles$o.linkContainer)
+        className: css(styles$n.linkContainer)
       }, /*#__PURE__*/React.createElement("a", {
-        className: css(styles$o.mobileExplanationLink),
+        className: css(styles$n.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, linkAnchor), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
-        className: css(styles$o.disclosureArrow)
+        className: css(styles$n.disclosureArrow)
       }, /*#__PURE__*/React.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24504,13 +24568,13 @@ class Explanation extends React.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.createElement("div", {
-          className: css(styles$o.linkContainer, styles$o.articleLink)
+          className: css(styles$n.linkContainer, styles$n.articleLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$o.explanationLink)
+          className: 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",
@@ -24520,9 +24584,9 @@ class Explanation extends React.Component {
         // NOTE: For exercises, the baseElements `Link` is an
         // anchor tag, see: `perseus-api.jsx`.
         linkContainer = /*#__PURE__*/React.createElement("div", {
-          className: css(styles$o.linkContainer, styles$o.exerciseLink)
+          className: css(styles$n.linkContainer, styles$n.exerciseLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$o.explanationLink),
+          className: css(styles$n.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -24530,11 +24594,11 @@ class Explanation extends React.Component {
         }, `[${linkAnchor}]`));
       }
     }
-    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
+    const expandedStyle = isMobile ? styles$n.contentExpandedMobile : styles$n.contentExpanded;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$o.container)
+      className: css(styles$n.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
+      className: css(styles$n.content, isMobile && styles$n.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24558,7 +24622,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$o = StyleSheet.create({
+const styles$n = StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -24663,15 +24727,15 @@ class GradedGroupAnswerBar extends React.Component {
       onCheckAnswer,
       onNextQuestion
     } = this.props;
-    const answerBarStyle = _extends({}, styles$n.answerBar, {
+    const answerBarStyle = _extends({}, styles$m.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$n.text
+      style: styles$m.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$n.tryAgainIcon
+      style: styles$m.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -24690,7 +24754,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$n.text
+      style: styles$m.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -24712,7 +24776,7 @@ class GradedGroupAnswerBar extends React.Component {
   }
 }
 const fontSize = 17;
-const styles$n = {
+const styles$m = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -24898,7 +24962,7 @@ class GradedGroup extends React.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? css(styles$m.gradedGroupInSet) : css(styles$m.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$l.gradedGroupInSet) : css(styles$l.gradedGroup);
     const classes = classNames({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -24917,7 +24981,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.title)
+      className: css(styles$l.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -24949,7 +25013,7 @@ class GradedGroup extends React.Component {
     }, i18n._("Next question")), 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$m.explanationTitle),
+      className: css(styles$l.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -24981,7 +25045,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$m.showHintLink)
+      className: css(styles$l.showHintLink)
     }, i18n._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25002,7 +25066,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$3 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$m = StyleSheet.create({
+const styles$l = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25075,18 +25139,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(css(styles$l.indicatorContainer), "indicatorContainer")
+      className: classNames(css(styles$k.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
-      className: css(styles$l.indicator),
+      className: css(styles$k.indicator),
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": i18n._("Skip to %(title)s", {
         title
       }),
-      style: styles$l.indicatorButton,
+      style: styles$k.indicatorButton,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
     }, ({
@@ -25094,9 +25158,9 @@ class Indicators extends React.Component {
       focused,
       pressed
     }) => /*#__PURE__*/React.createElement(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.createElement(View, {
-      style: styles$l.indicatorDotActive
+      style: styles$k.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
     }, i18n._("Current"))))))));
@@ -25162,7 +25226,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$l.container)
+        className: css(styles$k.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25185,13 +25249,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$l.container)
+      className: css(styles$k.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.top)
+      className: css(styles$k.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.title)
+      className: css(styles$k.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.spacer)
+      className: css(styles$k.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25233,7 +25297,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$l = StyleSheet.create({
+const styles$k = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25338,7 +25402,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
+        className: css(styles$j.buttonStyle, button.value === value && styles$j.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25355,7 +25419,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$k = StyleSheet.create({
+const styles$j = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -30835,214 +30899,89 @@ var globalStyles = /*#__PURE__*/Object.freeze({
   typography: typography
 });
 
-class AnswerChoice extends React.Component {
-  constructor(...args) {
-    super(...args);
-    // The radio button or checkbox input control.
-    this._input = void 0;
-    this.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
-    });
-  }
-  renderCheckmark() {
-    const {
-      checked
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: css(styles$j.checkmarkContainer)
-    }, checked && /*#__PURE__*/React.createElement(Icon, {
-      icon: iconCheckMedium,
-      size: 16,
-      color: Color.offBlack
-    }));
-  }
-  render() {
-    const {
-      content,
-      checked,
-      groupName,
-      index,
-      inputType
-    } = this.props;
-    const {
-      isInputFocused
-    } = this.state;
-    const answerId = `${groupName}-${index}`;
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.answerChoice, isInputFocused && styles$j.answerFocused),
-      onClick: e => this.handleClick(e),
-      onKeyDown: e => this.handleKeyDown(e)
-    }, /*#__PURE__*/React.createElement("span", {
-      className: css(styles$j.answerInputWrapper)
-    }, /*#__PURE__*/React.createElement("input", {
-      className: 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.createElement("label", {
-      htmlFor: answerId
-    }, /*#__PURE__*/React.createElement(Renderer, {
-      content: content
-    })));
-  }
-}
-class AnswerChoices extends React.Component {
-  constructor(props) {
-    super(props);
-    // The rendered answers elements.
-    this._choices = void 0;
-    this._choices = [];
-    this.state = {
-      groupName: _.uniqueId("answer_choices_")
-    };
-  }
-  focusAnswer(index = 0) {
-    const numChoices = this.props.choices.length;
+  // 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(({
+    content
+  }) => /*#__PURE__*/React.createElement(OptionItem, {
+    key: content,
+    value: content,
+    label: /*#__PURE__*/React.createElement(Renderer, {
+      content: content,
+      inline: true
+    })
+  }));
+  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.createElement(MultiSelect, _extends({}, args, {
+    selectedValues: selectedValues,
+    onChange: selected => onAnswerChange(selected)
+  })) : /*#__PURE__*/React.createElement(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._("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.createElement("fieldset", {
-      style: {
-        border: "none",
-        margin: 0,
-        padding: 0
-      }
-    }, choices.map((choice, index) => /*#__PURE__*/React.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 = StyleSheet.create({
-  answerChoice: {
+const HideAnswersToggle = props => {
+  const idFactory = useUniqueIdWithMock();
+  const switchId = idFactory.get("hide-answers-toggle");
+  const labelId = idFactory.get("hide-answers-label");
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$i.switchWrapper
+  }, /*#__PURE__*/React.createElement(Switch, {
+    id: switchId,
+    checked: props.areAnswersHidden,
+    onChange: props.onChange,
+    "aria-labelledby": labelId
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    id: labelId,
+    htmlFor: switchId,
+    tag: "label"
+  }, strings.hideAnswersToggleLabel));
+};
+const styles$i = 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.offBlack64}`,
+  zIndex: 1000
+};
 const AnswerPill = props => {
   const {
     selectedAnswers,
@@ -31050,7 +30989,9 @@ const AnswerPill = props => {
     markerRef,
     side,
     onClick,
-    style
+    style,
+    focused,
+    hovered
   } = props;
   const idFactory = useUniqueIdWithMock();
   const answerString = selectedAnswers.length > 1 ?
@@ -31061,10 +31002,6 @@ const AnswerPill = props => {
   // has been labeled (answered) correctly.
   const correct = showCorrectness === "correct";
   const incorrect = showCorrectness === "incorrect";
-  const bringToFront = {
-    boxShadow: `0 8px 8px ${Color.offBlack64}`,
-    zIndex: 1000
-  };
   return /*#__PURE__*/React.createElement(Popper, {
     placement: side,
     referenceElement: markerRef,
@@ -31083,62 +31020,27 @@ 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.createElement(Renderer, {
     content: answerString,
     inline: true
   })));
 };
-const styles$i = StyleSheet.create({
+const styles$h = StyleSheet.create({
   correct: {
-    backgroundColor: "#00880b" // WB green darkened by 18%
+    // WB green darkened by 18%
+    backgroundColor: "#00880b"
   },
-
   incorrect: {
     backgroundColor: Color.offBlack64
   }
 });
 
-const strings = {
-  hideAnswersToggleLabel: i18n._("Hide answer choices")
-};
-
-const HideAnswersToggle = props => {
-  const idFactory = useUniqueIdWithMock();
-  const switchId = idFactory.get("hide-answers-toggle");
-  const labelId = idFactory.get("hide-answers-label");
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles$h.switchWrapper
-  }, /*#__PURE__*/React.createElement(Switch, {
-    id: switchId,
-    checked: props.areAnswersHidden,
-    onChange: props.onChange,
-    "aria-labelledby": labelId
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    id: labelId,
-    htmlFor: switchId,
-    tag: "label"
-  }, strings.hideAnswersToggleLabel));
-};
-const styles$h = 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.Component {
   constructor(...args) {
     super(...args);
@@ -31150,126 +31052,103 @@ class Marker extends React.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: 1,
+      width: 1
+    };
+
+    // default dot
+    let args = {
+      size: MARKER_SIZE,
+      color: Color.white,
+      icon: iconNull
+    };
     if (showCorrectness) {
-      innerIcon = /*#__PURE__*/React.createElement(Icon, {
-        icon: showCorrectness === "correct" ? iconCheck : iconMinus,
-        size: 24,
-        color: Color.white
+      iconStyles = [styles$g.markerGraded, showCorrectness === "correct" ? styles$g.markerCorrect : styles$g.markerIncorrect, isOpen && styles$g.markerSelected];
+      args = _extends({}, args, {
+        icon: showCorrectness === "correct" ? iconCheck : iconMinus
       });
-      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) {
+    } 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.createElement(Icon, {
+      args = _extends({}, args, {
         icon: iconChevronDown,
-        size: 8,
-        color: Color.white
+        size: 8
       });
+    } else if (showPulsate) {
+      iconStyles = [styles$g.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$g.markerUnfilledPulsateOnce : showPulsate && styles$g.markerUnfilledPulsateInfinite];
     }
     return /*#__PURE__*/React.createElement(View, {
       style: [styles$g.markerIcon, iconStyles],
       ref: node => this._icon = node
-    }, innerIcon);
+    }, /*#__PURE__*/React.createElement(Icon, args));
   }
   render() {
+    var _this$_icon;
     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.createElement("button", {
-      "aria-label": label,
-      className: 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      style: [styles$g.marker, active && !markerDisabled && styles$g.markerActive]
+    }, this.renderIcon()), !!selected && showAnswer && /*#__PURE__*/React.createElement(AnswerPill, {
+      selectedAnswers: selected,
+      showCorrectness: showCorrectness,
+      side: answerSide,
+      style: answerStyles,
+      markerRef: (_this$_icon = this._icon) != null ? _this$_icon : undefined,
+      hovered: hovered,
+      focused: focused
+    }));
   }
 }
 Marker.defaultProps = {
   selected: []
 };
-const lightShadowColor = "rgba(33, 36, 44, 0.16)";
-const markerSize = 20;
 const styles$g = 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.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.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.offBlack64}`,
-    borderRadius: markerSize,
-    boxShadow: `0 8px 8px ${Color.offBlack8}`,
-    ":hover": {
-      outline: `2px solid ${Color.blue}`,
-      outlineOffset: 2
-    }
+    borderRadius: MARKER_SIZE
   },
   // The animation that presents the marker to the learner
   markerPulsateBase: {
@@ -31290,16 +31169,13 @@ const styles$g = StyleSheet.create({
     animationIterationCount: "0"
   },
   markerUnfilledPulsateInfinite: {
-    animationIterationCount: "infinite",
-    ":hover": {
-      outline: `0px solid ${Color.blue}`
-    }
+    animationIterationCount: "infinite"
   },
   markerUnfilledPulsateOnce: {
     // Doing the animation twice lets it ease-in and ease-out
     animationIterationCount: "2"
   },
-  markerFocused: {
+  markerActive: {
     outline: `2px solid ${Color.blue}`,
     outlineOffset: 2
   },
@@ -31308,33 +31184,20 @@ const styles$g = StyleSheet.create({
     boxShadow: `0 8px 8px ${Color.offBlack8}`,
     border: `solid 4px ${Color.white}`,
     backgroundColor: Color.blue,
-    borderRadius: markerSize,
-    transform: "rotate(180deg)",
-    ":hover": {
-      outline: `2px solid ${Color.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.blue}`,
-    boxShadow: `0 1px 1px 0 ${lightShadowColor}`
+    border: `4px solid ${Color.blue}`
   },
   markerGraded: {
-    width: markerSize,
-    height: markerSize,
-    marginLeft: 1,
-    marginTop: 1,
+    width: MARKER_SIZE,
+    height: MARKER_SIZE,
     justifyContent: "center",
     alignItems: "center",
-    border: `2px solid ${Color.white}`,
-    boxShadow: `0 8px 8px ${Color.offBlack8}`
+    border: `2px solid ${Color.white}`
   },
   markerCorrect: {
     background: "#00880b" // WB green darkened by 18%
@@ -31583,14 +31446,9 @@ class LabelImage extends React.Component {
     super(props);
     // The rendered markers on the question image for labeling.
     this._markers = void 0;
-    // The popup component containing the answer choices.
-    this._selectedMarkerPopup = void 0;
-    // The rendered list of answer choices for the currently selected marker.
-    this._answerChoices = void 0;
     this._markers = [];
     this.state = {
       activeMarkerIndex: -1,
-      focusedMarkerIndex: -1,
       markersInteracted: false,
       hideAnswers: false
     };
@@ -31628,26 +31486,6 @@ class LabelImage extends React.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.findDOMNode(marker).focus();
-      }
-    });
-  }
   handleMarkerChange(index, marker) {
     const {
       markers,
@@ -31666,32 +31504,25 @@ class LabelImage extends React.Component {
       markers: updatedMarkers
     });
   }
-  activateMarker(index) {
+  activateMarker(index, opened) {
+    var _this$props$analytics;
+    (_this$props$analytics = this.props.analytics) == null || _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) {
@@ -31739,8 +31570,7 @@ class LabelImage extends React.Component {
   handleAnswerChoicesChangeForMarker(index, selection) {
     const {
       choices,
-      markers,
-      multipleAnswers
+      markers
     } = this.props;
 
     // Compile the user selected answer choices.
@@ -31748,36 +31578,6 @@ class LabelImage extends React.Component {
     this.handleMarkerChange(index, _extends({}, 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.createElement("div", {
-      className: classNames("perseus-label-image-widget-answer-choices", css(styles$f.scrollableChoices))
-    }, /*#__PURE__*/React.createElement(AnswerChoices, {
-      choices: choices.map(choice => ({
-        content: choice,
-        checked: selected ? selected.includes(choice) : false
-      })),
-      multipleSelect: multipleAnswers,
-      onChange: selection => {
-        var _this$props$analytics;
-        (_this$props$analytics = this.props.analytics) == null || _this$props$analytics.onAnalyticsEvent({
-          type: "perseus:label-image:choiced-interacted-with",
-          payload: null
-        });
-        this.handleAnswerChoicesChangeForMarker(index, selection);
-      },
-      ref: node => this._answerChoices = node
-    }));
   }
   renderMarkers() {
     const {
@@ -31792,41 +31592,6 @@ class LabelImage extends React.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.createElement(Marker, _extends({}, marker, {
-        showCorrectness: showCorrectness,
-        showSelected: index === activeMarkerIndex,
-        showPulsate: !markersInteracted,
-        key: `${marker.x}.${marker.y}`,
-        onClick: () => {
-          var _this$props$analytics2;
-          (_this$props$analytics2 = this.props.analytics) == null || _this$props$analytics2.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;
 
@@ -31854,40 +31619,72 @@ class LabelImage extends React.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.createElement("div", {
-        key: `answers-${marker.x}.${marker.y}`
-      }, /*#__PURE__*/React.createElement(Popover, {
-        content: () => /*#__PURE__*/React.createElement(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.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.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.createElement(View, {
+        style: {
+          position: "absolute",
+          left: `${marker.x}%`,
+          top: `${marker.y}%`,
+          // reset to allow child (answer pill) to control z-index
+          zIndex: "unset"
+        }
+      }, /*#__PURE__*/React.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 => {
+          var _this$props$analytics2;
+          (_this$props$analytics2 = this.props.analytics) == null || _this$props$analytics2.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: ({
+          opened,
+          text
+        }) => /*#__PURE__*/React.createElement(Clickable, {
+          role: "button",
+          key: `marker-${marker.x}.${marker.y}`,
+          "aria-label":
+          // already translated in: /widgets/graded-group.tsx
+          showCorrectness === "correct" ? i18n._("Correct!") : marker.label
+        }, ({
+          hovered,
+          focused,
+          pressed
+        }) => /*#__PURE__*/React.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
+        })))
       }));
     });
   }
@@ -32003,18 +31800,6 @@ const styles$f = 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.forwardRef((props, ref) => {
@@ -44164,7 +43949,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
@@ -44179,6 +43964,11 @@ const init = function init(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) {
@@ -44203,7 +43993,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "17.6.0";
+const libVersion = "17.6.2";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45651,6 +45441,8 @@ const ItemExtras = [
 
 // prettier-ignore
 
+//prettier-ignore
+
 // A background image applied to various widgets.
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
@@ -46781,6 +46573,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 = {