@khanacademy/perseus 17.0.0 → 17.1.0

package/dist/index.js

@@ -28,6 +28,10 @@ var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 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 createReactClass = require('create-react-class');
 var Link = require('@khanacademy/wonder-blocks-link');
 var perseusCore = require('@khanacademy/perseus-core');
@@ -69,6 +73,8 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
@@ -268,7 +274,7 @@ class MathInput extends React__namespace.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$A.outerWrapper, this.state.focused && styles$A.wrapperFocused, this.props.hasError && styles$A.wrapperError]
+      style: [styles$C.outerWrapper, this.state.focused && styles$C.wrapperFocused, this.props.hasError && styles$C.wrapperError]
     }, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -295,7 +301,7 @@ class MathInput extends React__namespace.Component {
       dismissEnabled: true,
       content: () => /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
         closeButtonVisible: true,
-        style: styles$A.popoverContent
+        style: styles$C.popoverContent
       }, /*#__PURE__*/React__namespace.createElement(mathInput.DesktopKeypad, _extends({
         onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
         extraKeys: this.props.extraKeys,
@@ -335,9 +341,9 @@ const MathInputIcon = _ref => {
       color = Color__default["default"].offBlack;
       break;
   }
-  const dynamicClass = active || focused ? styles$A.iconActive : styles$A.iconInactive;
+  const dynamicClass = active || focused ? styles$C.iconActive : styles$C.iconInactive;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$A.iconContainer, dynamicClass]
+    style: [styles$C.iconContainer, dynamicClass]
   }, /*#__PURE__*/React__namespace.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -382,7 +388,7 @@ const inputFocused = {
   borderColor: Color__default["default"].blue,
   margin: -1
 };
-const styles$A = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -17609,33 +17615,33 @@ class Lint extends React__namespace.Component {
     let warningText;
     let warningTextStyle;
     if (this.props.severity === Severity.Error) {
-      severityStyle = styles$z.indicatorError;
+      severityStyle = styles$B.indicatorError;
       warningText = "Error";
-      warningTextStyle = styles$z.publishBlockingError;
+      warningTextStyle = styles$B.publishBlockingError;
     } else if (this.props.severity === Severity.Warning) {
-      severityStyle = styles$z.indicatorWarning;
+      severityStyle = styles$B.indicatorWarning;
       warningText = "Warning";
-      warningTextStyle = styles$z.warning;
+      warningTextStyle = styles$B.warning;
     } else {
-      severityStyle = styles$z.indicatorGuideline;
+      severityStyle = styles$B.indicatorGuideline;
       warningText = "Recommendation";
-      warningTextStyle = styles$z.warning;
+      warningTextStyle = styles$B.warning;
     }
     return /*#__PURE__*/React__namespace.createElement("a", {
       href: `https://khanacademy.org/r/linter-rules#${this.props.ruleName}`,
       target: "lint-help-window",
       className: aphrodite.css(style)
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$z.indicator, severityStyle)
+      className: aphrodite.css(styles$B.indicator, severityStyle)
     }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$z.tooltip, tooltipAbove && styles$z.tooltipAbove)
+      className: aphrodite.css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
     }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
       key: i,
-      className: aphrodite.css(styles$z.tooltipParagraph)
+      className: aphrodite.css(styles$B.tooltipParagraph)
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: aphrodite.css(warningTextStyle)
     }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$z.tail, tooltipAbove && styles$z.tailAbove)
+      className: aphrodite.css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
     })));
   };
 
@@ -17663,20 +17669,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$z.lintContainer, styles$z.lintContainerBlock)
-      }, this.renderLink(styles$z.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$z.lintContainer)
-      }, this.renderLink(styles$z.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$z.lintContainer)
-    }, this.renderLink(styles$z.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19724,7 +19730,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$y.mobileZoomableParentFix
+          ...styles$A.mobileZoomableParentFix
         };
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: state.key,
@@ -19861,7 +19867,7 @@ class Renderer extends React__namespace.Component {
       };
       const mobileInnerStyle = {
         ...innerStyle,
-        ...styles$y.mobileZoomableParentFix
+        ...styles$A.mobileZoomableParentFix
       };
       const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -20367,7 +20373,7 @@ class Renderer extends React__namespace.Component {
     return this.lastRenderedMarkdown;
   }
 }
-const styles$y = {
+const styles$A = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21302,10 +21308,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$x.default, this.props.size === "small" ? styles$x.small : null, this.props.rightAlign ? styles$x.rightAlign : styles$x.leftAlign];
+    const inputStyles = [styles$z.default, this.props.size === "small" ? styles$z.small : null, this.props.rightAlign ? styles$z.rightAlign : styles$z.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$x.answerStateUnanswered);
+      inputStyles.push(styles$z.answerStateUnanswered);
     }
     return /*#__PURE__*/React__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21453,7 +21459,7 @@ class InputNumber extends React__namespace.Component {
     return answerString;
   }
 }
-const styles$x = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22451,7 +22457,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-test-id": "focus-ring",
-    className: aphrodite.css(styles$w.ring),
+    className: aphrodite.css(styles$y.ring),
     style: style
   }, children);
 };
@@ -22460,7 +22466,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22497,7 +22503,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$v = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22520,7 +22526,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$u.crossOutLine),
+    className: aphrodite.css(styles$w.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22535,7 +22541,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22616,7 +22622,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$v.iconWrapper)
+    className: aphrodite.css(styles$x.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: Color__default["default"].blue,
     visible: focused || hovered,
@@ -22625,13 +22631,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$t.circle, showCorrectness && correct && styles$t.circleCorrect, showCorrectness && !correct && styles$t.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$t.circleIncorrectAnswered)
+    className: aphrodite.css(styles$v.circle, showCorrectness && correct && styles$v.circleCorrect, showCorrectness && !correct && styles$v.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$v.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$t.innerWrapper)
+    className: aphrodite.css(styles$v.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22640,7 +22646,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -22732,19 +22738,19 @@ const OptionStatus = function (props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$s.correct;
+    textStyle = styles$u.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$s.incorrectAnswered;
+      textStyle = styles$u.incorrectAnswered;
     } else {
-      textStyle = styles$s.incorrect;
+      textStyle = styles$u.incorrect;
     }
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.text, textStyle)
+    className: aphrodite.css(styles$u.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -22818,8 +22824,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$r.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$r.rationale));
+  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));
 
   // 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
@@ -22986,7 +22992,7 @@ const Choice = function (props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23178,10 +23184,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$q.radio, styles$q.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$q.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$q.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$q.instructions, isMobile && styles$q.instructionsMobile));
+  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 instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = aphrodite.css(styles$q.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$s.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23232,7 +23238,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$q.item, styles$q.responsiveItem, checked && styles$q.selectedItem, checked && choice.highlighted && styles$q.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$q.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$q.nextHighlighted);
+      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);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23306,14 +23312,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$q.responsiveContainer)
+    className: aphrodite.css(styles$s.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -23972,9 +23978,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$p.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$r.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$p.emptyHeaderCell)
+      className: aphrodite.css(styles$r.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -23982,7 +23988,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$p.header),
+        className: aphrodite.css(styles$r.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -24002,7 +24008,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$p.cell),
+          className: "category " + aphrodite.css(styles$r.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -24021,7 +24027,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$p.radioSpan, selected && styles$p.checkedRadioSpan, this.props.static && selected && styles$p.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -24033,7 +24039,7 @@ class Categorizer extends React__namespace.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$p.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$r.fullBleedContainer] : [];
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24082,7 +24088,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$p = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24345,7 +24351,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$o.widthOverride, styleContainer && styles$o.container)
+      className: aphrodite.css(styles$q.widthOverride, styleContainer && styles$q.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24355,7 +24361,7 @@ class CSProgram extends React__namespace.Component {
     }));
   }
 }
-const styles$o = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24403,7 +24409,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$n.tooltipBody,
+          style: styles$p.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -24434,7 +24440,7 @@ class Definition extends React__namespace.Component {
     });
   }
 }
-const styles$n = {
+const styles$p = {
   tooltipBody: {
     color: Color__default["default"].offBlack,
     fontSize: 20,
@@ -24599,15 +24605,15 @@ class Explanation extends React__namespace.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$m.linkContainer)
+        className: aphrodite.css(styles$o.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
-        className: aphrodite.css(styles$m.mobileExplanationLink),
+        className: aphrodite.css(styles$o.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$m.disclosureArrow)
+        className: aphrodite.css(styles$o.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24620,13 +24626,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$m.linkContainer, styles$m.articleLink)
+          className: aphrodite.css(styles$o.linkContainer, styles$o.articleLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$m.explanationLink)
+          className: aphrodite.css(styles$o.explanationLink)
           // HACK(michaelpolyak): WB Link doesn't passthrough
           // class name.
           ,
-          style: styles$m.explanationLink,
+          style: styles$o.explanationLink,
           href: href,
           onClick: onClick,
           role: "button",
@@ -24636,9 +24642,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$m.linkContainer, styles$m.exerciseLink)
+          className: aphrodite.css(styles$o.linkContainer, styles$o.exerciseLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$m.explanationLink),
+          className: aphrodite.css(styles$o.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -24646,11 +24652,11 @@ class Explanation extends React__namespace.Component {
         }, `[${linkAnchor}]`));
       }
     }
-    const expandedStyle = isMobile ? styles$m.contentExpandedMobile : styles$m.contentExpanded;
+    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.container)
+      className: aphrodite.css(styles$o.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$m.content, isMobile && styles$m.contentMobile, this.state.expanded && expandedStyle)
+      className: aphrodite.css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24673,7 +24679,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$m = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -24779,15 +24785,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       onNextQuestion
     } = this.props;
     const answerBarStyle = {
-      ...styles$l.answerBar,
+      ...styles$n.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$l.text
+      style: styles$n.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$l.tryAgainIcon
+      style: styles$n.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -24806,7 +24812,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$l.text
+      style: styles$n.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -24828,7 +24834,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$l = {
+const styles$n = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -25028,7 +25034,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$k.gradedGroupInSet) : aphrodite.css(styles$k.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$m.gradedGroupInSet) : aphrodite.css(styles$m.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25047,7 +25053,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$k.title)
+      className: aphrodite.css(styles$m.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25080,7 +25086,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$k.explanationTitle),
+      className: aphrodite.css(styles$m.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25112,7 +25118,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$k.showHintLink)
+      className: aphrodite.css(styles$m.showHintLink)
     }, i18n__namespace._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25124,7 +25130,7 @@ class GradedGroup extends React__namespace.Component {
 const traverseChildWidgets$3 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25194,20 +25200,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$j.indicatorContainer), "indicatorContainer")
+      className: classNames__default["default"](aphrodite.css(styles$l.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
       } = _ref;
       return /*#__PURE__*/React__namespace.createElement("li", {
-        className: aphrodite.css(styles$j.indicator),
+        className: aphrodite.css(styles$l.indicator),
         key: title
       }, /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
         role: "button",
         "aria-label": i18n__namespace._("Skip to %(title)s", {
           title
         }),
-        style: styles$j.indicatorButton,
+        style: styles$l.indicatorButton,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
       }, _ref2 => {
@@ -25217,9 +25223,9 @@ class Indicators extends React__namespace.Component {
           pressed
         } = _ref2;
         return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: [styles$j.indicatorDot, (hovered || focused || pressed) && styles$j.indicatorDotFocused]
+          style: [styles$l.indicatorDot, (hovered || focused || pressed) && styles$l.indicatorDotFocused]
         }, i === this.props.currentGroup && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$j.indicatorDotActive
+          style: styles$l.indicatorDotActive
         }, /*#__PURE__*/React__namespace.createElement("span", {
           className: aphrodite.css(a11y.srOnly)
         }, i18n__namespace._("Current"))));
@@ -25295,7 +25301,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$j.container)
+        className: aphrodite.css(styles$l.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25318,13 +25324,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$j.container)
+      className: aphrodite.css(styles$l.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.top)
+      className: aphrodite.css(styles$l.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.title)
+      className: aphrodite.css(styles$l.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.spacer)
+      className: aphrodite.css(styles$l.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25362,7 +25368,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25467,7 +25473,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$i.buttonStyle, button.value === value && styles$i.selectedStyle),
+        className: aphrodite.css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25480,7 +25486,7 @@ class ButtonGroup extends React__namespace.Component {
     }, buttons);
   }
 }
-const styles$i = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -31008,7 +31014,7 @@ class AnswerChoice extends React__namespace.Component {
       checked
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("span", {
-      className: aphrodite.css(styles$h.checkmarkContainer)
+      className: aphrodite.css(styles$j.checkmarkContainer)
     }, checked && /*#__PURE__*/React__namespace.createElement(Icon, {
       icon: iconCheckMedium,
       size: 16,
@@ -31028,11 +31034,11 @@ class AnswerChoice extends React__namespace.Component {
     } = this.state;
     const answerId = `${groupName}-${index}`;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$h.answerChoice, isInputFocused && styles$h.answerFocused),
+      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$h.answerInputWrapper)
+      className: aphrodite.css(styles$j.answerInputWrapper)
     }, /*#__PURE__*/React__namespace.createElement("input", {
       className: aphrodite.css(sharedStyles.perseusSrOnly),
       checked: checked,
@@ -31101,7 +31107,13 @@ class AnswerChoices extends React__namespace.Component {
     const {
       groupName
     } = this.state;
-    return /*#__PURE__*/React__namespace.createElement("fieldset", null, choices.map((choice, index) => /*#__PURE__*/React__namespace.createElement(AnswerChoice, _extends({}, choice, {
+    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,
@@ -31113,7 +31125,7 @@ class AnswerChoices extends React__namespace.Component {
     }))));
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   answerChoice: {
     display: "flex",
     alignItems: "center",
@@ -31144,44 +31156,125 @@ const styles$h = aphrodite.StyleSheet.create({
   }
 });
 
+const AnswerPill = props => {
+  const {
+    selectedAnswers,
+    showCorrectness,
+    markerRef,
+    side,
+    onClick,
+    style
+  } = props;
+  const idFactory = wonderBlocksCore.useUniqueIdWithMock();
+  const answerString = selectedAnswers.length > 1 ?
+  // always need `ngettext` for variable numbers even if we don't use the singular, see https://khanacademy.slack.com/archives/C0918TZ5G/p1700163024293079
+  i18n__namespace.ngettext("%(num)s answer", "%(num)s answers", selectedAnswers.length) : selectedAnswers[0];
+
+  // It should no longer be possible to interact with an answer after it
+  // 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,
+    modifiers: [{
+      name: "preventOverflow",
+      options: {
+        rootBoundary: "viewport"
+      }
+    }]
+  }, _ref => {
+    let {
+      ref,
+      style: popperStyle
+    } = _ref;
+    return /*#__PURE__*/React__namespace.createElement(Pill__default["default"], {
+      size: "large",
+      kind: "accent",
+      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]
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
+      content: answerString
+    }));
+  });
+};
+const styles$i = aphrodite.StyleSheet.create({
+  correct: {
+    backgroundColor: "#00880b" // WB green darkened by 18%
+  },
+
+  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
+  }, 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;
+}
 class Marker extends React__namespace.Component {
   // The marker icon element.
 
   static defaultProps = {
     selected: []
   };
-  state = {
-    isFocused: false
-  };
-  handleFocus() {
-    this.setState({
-      isFocused: true
-    });
-  }
-  handleBlur() {
-    this.setState({
-      isFocused: false
-    });
-  }
   renderIcon() {
     const {
       selected,
       showCorrectness,
       showSelected,
-      showPulsate
+      showPulsate,
+      focused
     } = this.props;
-    const {
-      isFocused
-    } = this.state;
 
     // 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.
-    // `isFocused` is a controlled state, driven by focus events, and may
+    // `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 || isFocused;
+    const isSelected = showSelected || focused;
     let innerIcon;
     let iconStyles;
     if (showCorrectness) {
@@ -31191,17 +31284,28 @@ class Marker extends React__namespace.Component {
         color: Color__default["default"].white
       });
       if (showCorrectness === "correct") {
-        iconStyles = [styles$g.markerCorrect, isSelected && styles$g.markerCorrectSelected];
+        iconStyles = [styles$g.markerGraded, styles$g.markerCorrect, isSelected && styles$g.markerSelected];
       } else {
-        iconStyles = [styles$g.markerIncorrect, isSelected && styles$g.markerIncorrectSelected];
+        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.markerFilledSelected];
+      iconStyles = [styles$g.markerFilled, isSelected && styles$g.markerSelected];
+    } else if (isSelected) {
+      iconStyles = [styles$g.markerSelected];
     } else {
-      iconStyles = [isSelected ? styles$g.markerUnfilledSelected : showPulsate && styles$g.markerUnfilledPulsate];
+      iconStyles = [styles$g.markerPulsateBase, shouldReduceMotion() ? showPulsate && styles$g.markerUnfilledPulsateOnce : showPulsate && styles$g.markerUnfilledPulsateInfinite];
     }
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$g.markerIcon, ...iconStyles),
+    if (isSelected && selected && selected.length === 0) {
+      innerIcon = /*#__PURE__*/React__namespace.createElement(Icon, {
+        icon: iconChevronDown,
+        size: 8,
+        color: Color__default["default"].white
+      });
+    }
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$g.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, innerIcon);
   }
@@ -31224,26 +31328,18 @@ class Marker extends React__namespace.Component {
         top: `${y}%`
       },
       tabIndex: isDisabled ? -1 : 0,
-      onFocus: () => this.handleFocus(),
-      onBlur: () => this.handleBlur()
-      // @ts-expect-error - TS2345 - Argument of type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to parameter of type 'MouseEvent'.
-      ,
-      onClick: e => this.props.onClick(e)
-      // @ts-expect-error - TS2345 - Argument of type 'KeyboardEvent<HTMLButtonElement>' is not assignable to parameter of type 'KeyboardEvent'.
-      ,
+      onFocus: this.props.onFocus,
+      onBlur: this.props.onBlur,
+      onClick: e => {
+        e.preventDefault();
+        this.props.onClick(e);
+      },
       onKeyDown: e => this.props.onKeyDown(e)
     }, this.renderIcon());
   }
 }
-const markerColor = "#1865f2";
-const selectedColor = "#2552b0";
-const activeColor = selectedColor;
-const correctColor = "#00a60e";
-const correctActiveColor = "#167b1f";
-const incorrectColor = "#909195";
-const incorrectActiveColor = "#6c6e73";
-const markerShadowColor = "rgba(33, 36, 44, 0.32)";
 const lightShadowColor = "rgba(33, 36, 44, 0.16)";
+const markerSize = 20;
 const styles$g = aphrodite.StyleSheet.create({
   unstyledButton: {
     padding: 0,
@@ -31256,9 +31352,12 @@ const styles$g = aphrodite.StyleSheet.create({
   },
   marker: {
     position: "absolute",
+    outline: "none",
     // Center marker position based on it's maximum size.
-    width: 30,
-    height: 30,
+    width: markerSize,
+    height: markerSize,
+    backgroundColor: Color__default["default"].white,
+    borderRadius: 30,
     marginLeft: -15,
     marginTop: -15
   },
@@ -31268,136 +31367,92 @@ const styles$g = aphrodite.StyleSheet.create({
   // The base and unfilled marker style.
   markerIcon: {
     display: "flex",
-    position: "relative",
+    alignItems: "center",
+    justifyContent: "center",
     boxSizing: "content-box",
-    width: 16,
-    height: 16,
-    // Center icon within marker.
-    marginLeft: 5,
+    width: markerSize,
+    height: markerSize,
+    marginLeft: 2,
     cursor: "pointer",
-    backgroundColor: markerColor,
-    border: "solid 2px #ffffff",
-    borderRadius: 16,
-    boxShadow: `0 2px 6px 0 ${markerShadowColor}`
+    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
+    }
   },
-  markerUnfilledPulsate: {
+  // The animation that presents the marker to the learner
+  markerPulsateBase: {
     animationName: {
       "0%": {
-        transform: "scale(1)"
+        transform: "scale(1)",
+        backgroundColor: Color__default["default"].blue
       },
       "100%": {
-        transform: "scale(1.5)"
+        transform: "scale(1.3)",
+        backgroundColor: Color__default["default"].blue
       }
     },
     animationDirection: "alternate",
     animationDuration: "0.8s",
-    animationIterationCount: "infinite",
     animationTimingFunction: "ease-in",
-    transformOrigin: "50% 50%"
+    transformOrigin: "50% 50%",
+    animationIterationCount: "0"
   },
-  markerUnfilledSelected: {
-    "::before": {
-      content: "''",
-      display: "inline-block",
-      position: "absolute",
-      width: 20,
-      height: 20,
-      marginLeft: -4,
-      marginTop: -4,
-      border: `solid 2px ${selectedColor}`,
-      borderRadius: 20
-    },
-    ":active": {
-      backgroundColor: activeColor,
-      boxShadow: "none",
-      "::before": {
-        display: "none"
-      }
+  markerUnfilledPulsateInfinite: {
+    animationIterationCount: "infinite",
+    ":hover": {
+      outline: `0px solid ${Color__default["default"].blue}`
     }
   },
-  markerFilled: {
-    width: 8,
-    height: 8,
-    // Center icon within marker.
-    marginLeft: 9,
-    borderRadius: 8,
-    boxShadow: `0 1px 1px 0 ${lightShadowColor}`
+  markerUnfilledPulsateOnce: {
+    // Doing the animation twice lets it ease-in and ease-out
+    animationIterationCount: "2"
   },
-  markerFilledSelected: {
-    "::before": {
-      content: "''",
-      display: "inline-block",
-      position: "absolute",
-      width: 12,
-      height: 12,
-      marginLeft: -4,
-      marginTop: -4,
-      border: `solid 2px ${selectedColor}`,
-      borderRadius: 12
-    },
-    ":active": {
-      backgroundColor: activeColor,
-      boxShadow: "none",
-      "::before": {
-        display: "none"
-      }
+  markerFocused: {
+    outline: `2px solid ${Color__default["default"].blue}`,
+    outlineOffset: 2
+  },
+  // The learner is making an initial selection
+  markerSelected: {
+    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
     }
   },
-  markerCorrect: {
-    width: 24,
-    height: 24,
-    marginLeft: 1,
-    marginTop: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    background: correctColor,
+  // 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}`
   },
-  markerCorrectSelected: {
-    "::before": {
-      content: "''",
-      display: "inline-block",
-      position: "absolute",
-      width: 28,
-      height: 28,
-      border: `solid 2px ${selectedColor}`,
-      borderRadius: 28
-    },
-    ":active": {
-      backgroundColor: correctActiveColor,
-      boxShadow: "none",
-      "::before": {
-        display: "none"
-      }
-    }
-  },
-  markerIncorrect: {
-    width: 24,
-    height: 24,
+  markerGraded: {
+    width: markerSize,
+    height: markerSize,
     marginLeft: 1,
     marginTop: 1,
     justifyContent: "center",
     alignItems: "center",
-    background: incorrectColor,
-    boxShadow: `0 1px 1px 0 ${lightShadowColor}`
+    border: `2px solid ${Color__default["default"].white}`,
+    boxShadow: `0 8px 8px ${Color__default["default"].offBlack8}`
   },
-  markerIncorrectSelected: {
-    "::before": {
-      content: "''",
-      display: "inline-block",
-      position: "absolute",
-      width: 28,
-      height: 28,
-      border: `solid 2px ${selectedColor}`,
-      borderRadius: 28
-    },
-    ":active": {
-      backgroundColor: incorrectActiveColor,
-      boxShadow: "none",
-      "::before": {
-        display: "none"
-      }
-    }
+  markerCorrect: {
+    background: "#00880b" // WB green darkened by 18%
+  },
+
+  markerIncorrect: {
+    background: Color__default["default"].offBlack64
   }
 });
 
@@ -31481,7 +31536,20 @@ class LabelImage extends React__namespace.Component {
   /**
    * Determine the image side given a marker position (as percent of size).
    */
-  static imageSideForMarkerPosition(x, y) {
+  static imageSideForMarkerPosition(x, y, preferredDirection) {
+    // Special handling for preferred size
+    if (preferredDirection && preferredDirection !== "NONE") {
+      if (preferredDirection === "LEFT" && x > 20) {
+        return "right";
+      } else if (preferredDirection === "RIGHT" && x < 80) {
+        return "left";
+      } else if (preferredDirection === "UP" && y > 20) {
+        return "bottom";
+      } else if (preferredDirection === "DOWN" && y < 80) {
+        return "top";
+      }
+    }
+
     // Special handling for when marker is positioned near the horizontal
     // edges of the image. We want to ensure the returned side would not
     // result in a popup rendering that may overflow outside the page.
@@ -31632,18 +31700,12 @@ class LabelImage extends React__namespace.Component {
     super(props);
     this._markers = [];
     this.state = {
-      selectedMarkerIndex: -1,
-      markersInteracted: false
+      activeMarkerIndex: -1,
+      focusedMarkerIndex: -1,
+      markersInteracted: false,
+      hideAnswers: false
     };
   }
-  componentDidMount() {
-    document.addEventListener("click", this.handleDocumentClick, true);
-    document.addEventListener("keydown", this.handleDocumentKeyDown, true);
-  }
-  componentWillUnmount() {
-    document.removeEventListener("click", this.handleDocumentClick, true);
-    document.removeEventListener("keydown", this.handleDocumentKeyDown, true);
-  }
   simpleValidate(rubric) {
     return LabelImage.validate(this.getUserInput(), rubric);
   }
@@ -31680,17 +31742,17 @@ class LabelImage extends React__namespace.Component {
   }
   dismissMarkerPopup() {
     const {
-      selectedMarkerIndex: index
+      activeMarkerIndex
     } = this.state;
 
     // No popup should be open if there's no selected marker.
-    if (index === -1) {
+    if (activeMarkerIndex === -1) {
       return;
     }
     this.setState({
-      selectedMarkerIndex: -1
+      activeMarkerIndex: -1
     }, () => {
-      const marker = this._markers[index];
+      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) {
@@ -31698,40 +31760,6 @@ class LabelImage extends React__namespace.Component {
       }
     });
   }
-  handleDocumentClick = e => {
-    // Dismiss open popup with answer choices if user clicks outside it.
-    if (this._selectedMarkerPopup && this._answerChoices) {
-      const answerChoices = ReactDOM__namespace.findDOMNode(this._answerChoices);
-      const targetElement = e.target;
-      // HACK(michaelpolyak): We want to determine if the click target is
-      // contained within the popup layer. As there's no public interface
-      // to get this layer from the popup, we traverse several levels of
-      // answer choices parents to test whether the click target is
-      // contained within.
-      const containsEventTarget = function (element) {
-        let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
-        return element && (element.contains(targetElement) || depth > 0 && containsEventTarget(element.parentElement, depth - 1));
-      };
-      if (!containsEventTarget(answerChoices)) {
-        // Close popup and set focus back to the marker for which it was
-        // open.
-        this.dismissMarkerPopup();
-      }
-    }
-  };
-  handleDocumentKeyDown = e => {
-    // Dismiss open popup with answer choices if user presses Escape key.
-    if (this._selectedMarkerPopup && e.keyCode === 27) {
-      // Ensure other listeners are not triggered on key down event that
-      // closes the popup, as this will also dismiss the modal that the
-      // widget may be rendered within.
-      e.stopPropagation();
-
-      // Close popup and set focus back to the marker for which it was
-      // open.
-      this.dismissMarkerPopup();
-    }
-  };
   handleMarkerChange(index, marker) {
     const {
       markers,
@@ -31751,16 +31779,15 @@ class LabelImage extends React__namespace.Component {
       markers: updatedMarkers
     });
   }
-  handleMarkerClick(index, e) {
+  activateMarker(index) {
     const {
-      selectedMarkerIndex
+      activeMarkerIndex
     } = this.state;
-    e.preventDefault();
 
     // Select the marker, revealing answer choices.
-    if (selectedMarkerIndex !== index) {
+    if (activeMarkerIndex !== index) {
       this.setState({
-        selectedMarkerIndex: index,
+        activeMarkerIndex: index,
         markersInteracted: true
       }, () => {
         // A delay is required to allow answer choices to first render
@@ -31830,10 +31857,10 @@ class LabelImage extends React__namespace.Component {
     } = this.props;
 
     // Compile the user selected answer choices.
-    const selected = choices.filter((choice, index) => selection[index]);
+    const selected = choices.filter((_, index) => selection[index]);
     this.handleMarkerChange(index, {
       ...markers[index],
-      selected
+      selected: selected.length ? selected : undefined
     });
     if (!multipleAnswers) {
       this.dismissMarkerPopup();
@@ -31855,50 +31882,80 @@ class LabelImage extends React__namespace.Component {
         checked: selected ? selected.includes(choice) : false
       })),
       multipleSelect: multipleAnswers,
-      onChange: selection => this.handleAnswerChoicesChangeForMarker(index, selection),
+      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 {
       markers,
-      questionCompleted
+      questionCompleted,
+      preferredPopoverDirection
     } = this.props;
     const {
-      selectedMarkerIndex,
+      activeMarkerIndex,
       markersInteracted
     } = this.state;
 
     // 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, {
-        // Once the question is answered, show markers
-        // with correct answers, otherwise passthrough
-        // the correctness state.
-        showCorrectness: questionCompleted && score.hasAnswers && score.isCorrect ? "correct" : marker.showCorrectness,
-        showSelected: index === selectedMarkerIndex,
+        showCorrectness: showCorrectness,
+        showSelected: index === activeMarkerIndex,
         showPulsate: !markersInteracted,
         key: `${marker.x}.${marker.y}`,
-        onClick: e => this.handleMarkerClick(index, e),
+        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
+        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
+            });
+          }
+        }
       }));
 
-      // The user selected marker is wrapped with a popup that shows its
-      // answer choices, otherwise it's returned as is.
-      if (index !== selectedMarkerIndex) {
-        return element;
-      }
-
       // Determine whether page is rendered in a narrow browser window.
       const isNarrowPage = window.matchMedia(mediaQueries.xsOrSmaller.replace("@media ", "")).matches;
+
+      // Determine whether the image is wider than it is tall.
+      const isWideImage = this.props.imageWidth / 2 > this.props.imageHeight;
       let side;
+      let markerPosition;
       // Position popup closest to the center, preferring it renders
       // entirely within the image area.
-      if (isNarrowPage) {
+      if (isNarrowPage || isWideImage) {
         side = marker.y > 50 ? "top" : "bottom";
+        markerPosition = marker.y > 50 ? "bottom" : "top";
       } else {
+        markerPosition = LabelImage.imageSideForMarkerPosition(marker.x, marker.y, preferredPopoverDirection);
+        if (markerPosition === "center") {
+          markerPosition = "bottom";
+        }
         // This mirrors the calculated side of where the marker is
         // located within the image, so that popup appears closer to
         // the image center.
@@ -31906,24 +31963,44 @@ class LabelImage extends React__namespace.Component {
           left: "right",
           top: "bottom",
           right: "left",
-          bottom: "top",
-          center: "top"
-        }[LabelImage.imageSideForMarkerPosition(marker.x, marker.y)];
+          bottom: "top"
+        }[markerPosition];
       }
+      const answerChoicesActive = index === activeMarkerIndex;
+      const adjustPopoverDistance = {
+        [side]: 15 // move the popover closer to the marker
+      };
 
-      // TODO(michaelpolyak): Ideally we would always render markers
-      // wrapped in the popover. Setting `opened={false}` for those
-      // markers that are unselected (to hide their popup), this would
-      // keep the React tree more stable.
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
+      const adjustPillDistance = {
+        [`margin${markerPosition.charAt(0).toUpperCase() + markerPosition.slice(1)}`]: 5 // 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: styles$f.choicesPopover
+          style: [adjustPopoverDistance, styles$f.choicesPopover]
         }, this.renderAnswerChoicesForMarker(index, marker)),
         placement: side,
-        opened: true,
-        key: `${marker.x}.${marker.y}`,
-        ref: node => this._selectedMarkerPopup = node
-      }, element);
+        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
+      }));
     });
   }
   renderInstructions() {
@@ -31958,7 +32035,7 @@ class LabelImage extends React__namespace.Component {
       imageHeight
     } = this.props;
     const {
-      selectedMarkerIndex
+      activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$f.markersCanvas),
@@ -31974,7 +32051,7 @@ class LabelImage extends React__namespace.Component {
       // dismiss the popup. If the image is larger in size
       // than its rendered in the widget, this would
       // result in a zoom of the image.
-      selectedMarkerIndex !== -1 && styles$f.imageInteractionDisabled)
+      activeMarkerIndex !== -1 && styles$f.imageInteractionDisabled)
     }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
       let {
         setAssetStatus
@@ -31986,7 +32063,18 @@ class LabelImage extends React__namespace.Component {
         height: imageHeight,
         setAssetStatus: setAssetStatus
       });
-    })), this.renderMarkers()));
+    })), this.renderMarkers()), /*#__PURE__*/React__namespace.createElement(HideAnswersToggle, {
+      areAnswersHidden: this.state.hideAnswers,
+      onChange: hideAnswers => {
+        this.props.analytics?.onAnalyticsEvent({
+          type: "perseus:label-image:toggle-answers-hidden",
+          payload: null
+        });
+        this.setState({
+          hideAnswers
+        });
+      }
+    }));
   }
 }
 const styles$f = aphrodite.StyleSheet.create({
@@ -32044,10 +32132,26 @@ const styles$f = aphrodite.StyleSheet.create({
     padding: 0
   }
 });
+const LabelImageWithDependencies = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+  const deps = useDependencies();
+  return /*#__PURE__*/React__namespace.createElement(LabelImage, _extends({
+    ref: ref,
+    analytics: deps.analytics
+  }, props));
+});
+
+// HACK: Propogate "static" methods onto our wrapper component.
+// In the future we should adjust client apps to not depend on these static
+// methods and instead adjust Peresus to provide these facilities through
+// instance methods on our Renderers.
+// @ts-expect-error - TS2339 - Property 'validate' does not exist on type
+LabelImageWithDependencies.validate = LabelImage.validate;
+// @ts-expect-error - TS2339 - Property 'gradeMarker' does not exist on type
+LabelImageWithDependencies.gradeMarker = LabelImage.gradeMarker;
 var LabelImage$1 = {
   name: "label-image",
   displayName: "Label Image",
-  widget: LabelImage,
+  widget: LabelImageWithDependencies,
   accessible: true,
   isLintable: true
 };
@@ -44216,7 +44320,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.0.0";
+const libVersion = "17.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {