@khanacademy/perseus 17.0.0 → 17.1.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { keyTranslator, CursorContext, createMathField, mathQuillInstance, getCursorContext, DesktopKeypad, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, Text } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, useUniqueIdWithMock, Text } from '@khanacademy/wonder-blocks-core';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
@@ -27,6 +27,10 @@ import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { OptionItem, SingleSelect } 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 createReactClass from 'create-react-class';
 import Link from '@khanacademy/wonder-blocks-link';
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
@@ -238,7 +242,7 @@ class MathInput extends React.Component {
       className = className + " " + this.props.className;
     }
     return /*#__PURE__*/React.createElement(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.createElement("div", {
       style: {
         display: "flex",
@@ -267,7 +271,7 @@ class MathInput extends React.Component {
         var _this$props$keypadBut, _this$props;
         return /*#__PURE__*/React.createElement(PopoverContentCore, {
           closeButtonVisible: true,
-          style: styles$A.popoverContent
+          style: styles$C.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
           onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
@@ -311,9 +315,9 @@ const MathInputIcon = ({
       color = Color.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.createElement(View, {
-    style: [styles$A.iconContainer, dynamicClass]
+    style: [styles$C.iconContainer, dynamicClass]
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -358,7 +362,7 @@ const inputFocused = {
   borderColor: Color.blue,
   margin: -1
 };
-const styles$A = StyleSheet.create({
+const styles$C = StyleSheet.create({
   iconContainer: {
     display: "flex",
     justifyContent: "center",
@@ -17553,33 +17557,33 @@ class Lint extends React.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.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$z.indicator, severityStyle)
+        className: css(styles$B.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$z.tooltip, tooltipAbove && styles$z.tooltipAbove)
+        className: css(styles$B.tooltip, tooltipAbove && styles$B.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$z.tooltipParagraph)
+        className: css(styles$B.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$z.tail, tooltipAbove && styles$z.tailAbove)
+        className: css(styles$B.tail, tooltipAbove && styles$B.tailAbove)
       })));
     };
   }
@@ -17617,20 +17621,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$z.lintContainer, styles$z.lintContainerBlock)
-      }, this.renderLink(styles$z.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer, styles$B.lintContainerBlock)
+      }, this.renderLink(styles$B.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$z.lintContainer)
-      }, this.renderLink(styles$z.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$B.lintContainer)
+      }, this.renderLink(styles$B.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$z.lintContainer)
-    }, this.renderLink(styles$z.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$B.lintContainer)
+    }, this.renderLink(styles$B.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$z = StyleSheet.create({
+const styles$B = StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19479,7 +19483,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$y.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -19600,7 +19604,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$y.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$A.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20245,7 +20249,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-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
@@ -21262,10 +21266,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$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.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21350,7 +21354,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$x = StyleSheet.create({
+const styles$z = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22351,7 +22355,7 @@ const FocusRing = function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-test-id": "focus-ring",
-    className: css(styles$w.ring),
+    className: css(styles$y.ring),
     style: style
   }, children);
 };
@@ -22360,7 +22364,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$w = StyleSheet.create({
+const styles$y = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22397,7 +22401,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$v = StyleSheet.create({
+const styles$x = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22420,7 +22424,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$u.crossOutLine),
+    className: css(styles$w.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22435,7 +22439,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$u = StyleSheet.create({
+const styles$w = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22516,7 +22520,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$v.iconWrapper)
+    className: css(styles$x.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: Color.blue,
     visible: focused || hovered,
@@ -22525,13 +22529,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$t.circle, showCorrectness && correct && styles$t.circleCorrect, showCorrectness && !correct && styles$t.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$t.circleIncorrectAnswered)
+    className: 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.createElement("div", {
-    className: css(styles$t.innerWrapper)
+    className: css(styles$v.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22540,7 +22544,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$t = StyleSheet.create({
+const styles$v = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -22632,19 +22636,19 @@ const OptionStatus = function OptionStatus(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.createElement("div", {
-    className: css(styles$s.text, textStyle)
+    className: css(styles$u.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$s = StyleSheet.create({
+const styles$u = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -22719,8 +22723,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$r.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$r.rationale));
+  const descriptionClassName = classNames("description", css(styles$t.description));
+  const rationaleClassName = classNames("perseus-radio-rationale-content", 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
@@ -22880,7 +22884,7 @@ const Choice = function Choice(props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$r = StyleSheet.create({
+const styles$t = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23072,10 +23076,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$q.radio, styles$q.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$q.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$q.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$q.instructions, isMobile && styles$q.instructionsMobile));
+  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 instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = css(styles$q.responsiveFieldset);
+  const responsiveClassName = css(styles$s.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -23126,7 +23130,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$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 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
@@ -23200,14 +23204,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$q.responsiveContainer)
+    className: css(styles$s.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$q = StyleSheet.create({
+const styles$s = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -23855,9 +23859,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$p.mobileTable)
+      className: "categorizer-table " + css(styles$r.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$p.emptyHeaderCell)
+      className: 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
@@ -23865,7 +23869,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$p.header),
+        className: css(styles$r.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -23885,7 +23889,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$p.cell),
+          className: "category " + css(styles$r.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -23904,7 +23908,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$p.radioSpan, selected && styles$p.checkedRadioSpan, this.props.static && selected && styles$p.staticCheckedRadioSpan)
+          className: css(styles$r.radioSpan, selected && styles$r.checkedRadioSpan, this.props.static && selected && styles$r.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -23916,7 +23920,7 @@ class Categorizer extends React.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.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -23961,7 +23965,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$p = StyleSheet.create({
+const styles$r = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24197,7 +24201,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$o.widthOverride, styleContainer && styles$o.container)
+      className: css(styles$q.widthOverride, styleContainer && styles$q.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24226,7 +24230,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$o = StyleSheet.create({
+const styles$q = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24271,7 +24275,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$n.tooltipBody,
+        style: styles$p.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -24302,7 +24306,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$n = {
+const styles$p = {
   tooltipBody: {
     color: Color.offBlack,
     fontSize: 20,
@@ -24466,15 +24470,15 @@ class Explanation extends React.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React.createElement("div", {
-        className: css(styles$m.linkContainer)
+        className: css(styles$o.linkContainer)
       }, /*#__PURE__*/React.createElement("a", {
-        className: css(styles$m.mobileExplanationLink),
+        className: css(styles$o.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, linkAnchor), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
-        className: css(styles$m.disclosureArrow)
+        className: css(styles$o.disclosureArrow)
       }, /*#__PURE__*/React.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24487,13 +24491,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$m.linkContainer, styles$m.articleLink)
+          className: css(styles$o.linkContainer, styles$o.articleLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$m.explanationLink)
+          className: 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",
@@ -24503,9 +24507,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$m.linkContainer, styles$m.exerciseLink)
+          className: css(styles$o.linkContainer, styles$o.exerciseLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$m.explanationLink),
+          className: css(styles$o.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -24513,11 +24517,11 @@ class Explanation extends React.Component {
         }, `[${linkAnchor}]`));
       }
     }
-    const expandedStyle = isMobile ? styles$m.contentExpandedMobile : styles$m.contentExpanded;
+    const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.container)
+      className: css(styles$o.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$m.content, isMobile && styles$m.contentMobile, this.state.expanded && expandedStyle)
+      className: css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24541,7 +24545,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$m = StyleSheet.create({
+const styles$o = StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -24646,15 +24650,15 @@ class GradedGroupAnswerBar extends React.Component {
       onCheckAnswer,
       onNextQuestion
     } = this.props;
-    const answerBarStyle = _extends({}, styles$l.answerBar, {
+    const answerBarStyle = _extends({}, styles$n.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$l.text
+      style: styles$n.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$l.tryAgainIcon
+      style: styles$n.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -24673,7 +24677,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$l.text
+      style: styles$n.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -24695,7 +24699,7 @@ class GradedGroupAnswerBar extends React.Component {
   }
 }
 const fontSize = 17;
-const styles$l = {
+const styles$n = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -24881,7 +24885,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$k.gradedGroupInSet) : css(styles$k.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$m.gradedGroupInSet) : css(styles$m.gradedGroup);
     const classes = classNames({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -24900,7 +24904,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.title)
+      className: css(styles$m.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -24932,7 +24936,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$k.explanationTitle),
+      className: css(styles$m.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -24964,7 +24968,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$k.showHintLink)
+      className: css(styles$m.showHintLink)
     }, i18n._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -24985,7 +24989,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$3 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$k = StyleSheet.create({
+const styles$m = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25058,18 +25062,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$j.indicatorContainer), "indicatorContainer")
+      className: classNames(css(styles$l.indicatorContainer), "indicatorContainer")
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
-      className: css(styles$j.indicator),
+      className: css(styles$l.indicator),
       key: title
     }, /*#__PURE__*/React.createElement(Clickable, {
       role: "button",
       "aria-label": i18n._("Skip to %(title)s", {
         title
       }),
-      style: styles$j.indicatorButton,
+      style: styles$l.indicatorButton,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
     }, ({
@@ -25077,9 +25081,9 @@ class Indicators extends React.Component {
       focused,
       pressed
     }) => /*#__PURE__*/React.createElement(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.createElement(View, {
-      style: styles$j.indicatorDotActive
+      style: styles$l.indicatorDotActive
     }, /*#__PURE__*/React.createElement("span", {
       className: css(a11y.srOnly)
     }, i18n._("Current"))))))));
@@ -25145,7 +25149,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$j.container)
+        className: css(styles$l.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25168,13 +25172,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$j.container)
+      className: css(styles$l.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.top)
+      className: css(styles$l.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.title)
+      className: css(styles$l.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.spacer)
+      className: css(styles$l.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25216,7 +25220,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$j = StyleSheet.create({
+const styles$l = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25321,7 +25325,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$i.buttonStyle, button.value === value && styles$i.selectedStyle),
+        className: css(styles$k.buttonStyle, button.value === value && styles$k.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25338,7 +25342,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$i = StyleSheet.create({
+const styles$k = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -30885,7 +30889,7 @@ class AnswerChoice extends React.Component {
       checked
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: css(styles$h.checkmarkContainer)
+      className: css(styles$j.checkmarkContainer)
     }, checked && /*#__PURE__*/React.createElement(Icon, {
       icon: iconCheckMedium,
       size: 16,
@@ -30905,11 +30909,11 @@ class AnswerChoice extends React.Component {
     } = this.state;
     const answerId = `${groupName}-${index}`;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$h.answerChoice, isInputFocused && styles$h.answerFocused),
+      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$h.answerInputWrapper)
+      className: css(styles$j.answerInputWrapper)
     }, /*#__PURE__*/React.createElement("input", {
       className: css(sharedStyles.perseusSrOnly),
       checked: checked,
@@ -30977,7 +30981,13 @@ class AnswerChoices extends React.Component {
     const {
       groupName
     } = this.state;
-    return /*#__PURE__*/React.createElement("fieldset", null, choices.map((choice, index) => /*#__PURE__*/React.createElement(AnswerChoice, _extends({}, choice, {
+    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,
@@ -30989,7 +30999,7 @@ class AnswerChoices extends React.Component {
     }))));
   }
 }
-const styles$h = StyleSheet.create({
+const styles$j = StyleSheet.create({
   answerChoice: {
     display: "flex",
     alignItems: "center",
@@ -31020,44 +31030,122 @@ const styles$h = StyleSheet.create({
   }
 });
 
+const AnswerPill = props => {
+  const {
+    selectedAnswers,
+    showCorrectness,
+    markerRef,
+    side,
+    onClick,
+    style
+  } = props;
+  const idFactory = 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.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.offBlack64}`,
+    zIndex: 1000
+  };
+  return /*#__PURE__*/React.createElement(Popper, {
+    placement: side,
+    referenceElement: markerRef,
+    modifiers: [{
+      name: "preventOverflow",
+      options: {
+        rootBoundary: "viewport"
+      }
+    }]
+  }, ({
+    ref,
+    style: popperStyle
+  }) => /*#__PURE__*/React.createElement(Pill, {
+    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.createElement(Renderer, {
+    content: answerString
+  })));
+};
+const styles$i = StyleSheet.create({
+  correct: {
+    backgroundColor: "#00880b" // WB green darkened by 18%
+  },
+
+  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
+  }, 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;
+}
 class Marker extends React.Component {
   constructor(...args) {
     super(...args);
     // The marker icon element.
     this._icon = void 0;
-    this.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) {
@@ -31067,17 +31155,28 @@ class Marker extends React.Component {
         color: Color.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.createElement("div", {
-      className: css(styles$g.markerIcon, ...iconStyles),
+    if (isSelected && selected && selected.length === 0) {
+      innerIcon = /*#__PURE__*/React.createElement(Icon, {
+        icon: iconChevronDown,
+        size: 8,
+        color: Color.white
+      });
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles$g.markerIcon, iconStyles],
       ref: node => this._icon = node
     }, innerIcon);
   }
@@ -31100,13 +31199,12 @@ class Marker extends React.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());
   }
@@ -31114,15 +31212,8 @@ class Marker extends React.Component {
 Marker.defaultProps = {
   selected: []
 };
-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 = StyleSheet.create({
   unstyledButton: {
     padding: 0,
@@ -31135,9 +31226,12 @@ const styles$g = 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.white,
+    borderRadius: 30,
     marginLeft: -15,
     marginTop: -15
   },
@@ -31147,136 +31241,92 @@ const styles$g = 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.offBlack64}`,
+    borderRadius: markerSize,
+    boxShadow: `0 8px 8px ${Color.offBlack8}`,
+    ":hover": {
+      outline: `2px solid ${Color.blue}`,
+      outlineOffset: 2
+    }
   },
-  markerUnfilledPulsate: {
+  // The animation that presents the marker to the learner
+  markerPulsateBase: {
     animationName: {
       "0%": {
-        transform: "scale(1)"
+        transform: "scale(1)",
+        backgroundColor: Color.blue
       },
       "100%": {
-        transform: "scale(1.5)"
+        transform: "scale(1.3)",
+        backgroundColor: Color.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.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.blue}`,
+    outlineOffset: 2
+  },
+  // The learner is making an initial selection
+  markerSelected: {
+    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
     }
   },
-  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.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.white}`,
+    boxShadow: `0 8px 8px ${Color.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.offBlack64
   }
 });
 
@@ -31354,7 +31404,20 @@ class LabelImage extends React.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.
@@ -31509,51 +31572,14 @@ class LabelImage extends React.Component {
     this._selectedMarkerPopup = void 0;
     // The rendered list of answer choices for the currently selected marker.
     this._answerChoices = void 0;
-    this.handleDocumentClick = e => {
-      // Dismiss open popup with answer choices if user clicks outside it.
-      if (this._selectedMarkerPopup && this._answerChoices) {
-        const answerChoices = ReactDOM.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 = (element, depth = 3) => 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();
-        }
-      }
-    };
-    this.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();
-      }
-    };
     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);
   }
@@ -31589,17 +31615,17 @@ class LabelImage extends React.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) {
@@ -31625,16 +31651,15 @@ class LabelImage extends React.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
@@ -31704,9 +31729,9 @@ class LabelImage extends React.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, _extends({}, markers[index], {
-      selected
+      selected: selected.length ? selected : undefined
     }));
     if (!multipleAnswers) {
       this.dismissMarkerPopup();
@@ -31728,50 +31753,82 @@ class LabelImage extends React.Component {
         checked: selected ? selected.includes(choice) : false
       })),
       multipleSelect: multipleAnswers,
-      onChange: selection => this.handleAnswerChoicesChangeForMarker(index, selection),
+      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 {
       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.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: () => {
+          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
+        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.
@@ -31779,24 +31836,44 @@ class LabelImage extends React.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.createElement(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.createElement("div", {
+        key: `answers-${marker.x}.${marker.y}`
+      }, /*#__PURE__*/React.createElement(Popover, {
         content: () => /*#__PURE__*/React.createElement(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.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
+      }));
     });
   }
   renderInstructions() {
@@ -31831,7 +31908,7 @@ class LabelImage extends React.Component {
       imageHeight
     } = this.props;
     const {
-      selectedMarkerIndex
+      activeMarkerIndex
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, this.renderInstructions(), /*#__PURE__*/React.createElement("div", {
       className: css(styles$f.markersCanvas),
@@ -31847,7 +31924,7 @@ class LabelImage extends React.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.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(SvgImage, {
@@ -31856,7 +31933,19 @@ class LabelImage extends React.Component {
       width: imageWidth,
       height: imageHeight,
       setAssetStatus: setAssetStatus
-    }))), this.renderMarkers()));
+    }))), this.renderMarkers()), /*#__PURE__*/React.createElement(HideAnswersToggle, {
+      areAnswersHidden: this.state.hideAnswers,
+      onChange: hideAnswers => {
+        var _this$props$analytics3;
+        (_this$props$analytics3 = this.props.analytics) == null || _this$props$analytics3.onAnalyticsEvent({
+          type: "perseus:label-image:toggle-answers-hidden",
+          payload: null
+        });
+        this.setState({
+          hideAnswers
+        });
+      }
+    }));
   }
 }
 const styles$f = StyleSheet.create({
@@ -31913,10 +32002,26 @@ const styles$f = StyleSheet.create({
     padding: 0
   }
 });
+const LabelImageWithDependencies = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const deps = useDependencies();
+  return /*#__PURE__*/React.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
 };
@@ -44079,7 +44184,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.0.0";
+const libVersion = "17.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {