@khanacademy/perseus 10.0.0 → 10.1.0

package/dist/es/index.js

@@ -2931,6 +2931,17 @@ const ExpressionWithDependencies = /*#__PURE__*/React.forwardRef((props, 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
+ExpressionWithDependencies.validate = Expression.validate;
+// @ts-expect-error - TS2339 - Property 'validate' does not exist on type
+ExpressionWithDependencies.getUserInputFromProps = Expression.getUserInputFromProps;
+// @ts-expect-error - TS2339 - Property 'validate' does not exist on type
+ExpressionWithDependencies.getOneCorrectAnswerFromRubric = Expression.getOneCorrectAnswerFromRubric;
 var Expression$1 = {
   name: "expression",
   displayName: "Expression / Equation",
@@ -17555,7 +17566,8 @@ class Zoomable extends React.Component {
       zoomed
     } = this.state;
     const {
-      animateHeight
+      animateHeight,
+      disableEntranceAnimation
     } = this.props;
     const property = animateHeight ? "opacity transform height" : "opacity transform";
 
@@ -17567,7 +17579,9 @@ class Zoomable extends React.Component {
     } : {};
 
     // Do a fancy little slide as we fade the contents in the first time.
-    const translateOffset = visible ? "" : " translate(0, 8px)";
+    const shouldSlide = !disableEntranceAnimation && !visible;
+    const translateOffset = shouldSlide ? " translate(0, 8px)" : "";
+    const opacity = shouldSlide ? 0 : 1;
     const scaleString = (scale != null ? scale : 1).toString();
     const transform = zoomed ? `scale(1, 1) ${translateOffset}` : `scale(${scaleString}, ${scaleString}) ${translateOffset}`;
     const style = _extends({
@@ -17576,7 +17590,7 @@ class Zoomable extends React.Component {
       height: zoomed ? expandedHeight : compactHeight,
       transform: transform,
       transformOrigin: "0 0",
-      opacity: visible ? 1 : 0,
+      opacity: opacity,
       WebkitTapHighlightColor: "transparent"
     }, transitionStyle);
     return /*#__PURE__*/React.createElement("span", {
@@ -17594,6 +17608,7 @@ class Zoomable extends React.Component {
 Zoomable.defaultProps = {
   animateHeight: false,
   readyToMeasure: true,
+  disableEntranceAnimation: false,
   computeChildBounds: parentNode => {
     const firstChild = parentNode.firstElementChild;
     return {
@@ -17644,7 +17659,9 @@ class ZoomableTeX extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement(Zoomable, {
       readyToMeasure: this.state.isRendered,
-      computeChildBounds: computeMathBounds
+      computeChildBounds: computeMathBounds,
+      animateHeight: false,
+      disableEntranceAnimation: true
     }, /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
       setAssetStatus
     }) => /*#__PURE__*/React.createElement(Tex, {
@@ -17888,33 +17905,33 @@ class Lint extends React.Component {
       let warningText;
       let warningTextStyle;
       if (this.props.severity === Severity.Error) {
-        severityStyle = styles$A.indicatorError;
+        severityStyle = styles$z.indicatorError;
         warningText = "Error";
-        warningTextStyle = styles$A.publishBlockingError;
+        warningTextStyle = styles$z.publishBlockingError;
       } else if (this.props.severity === Severity.Warning) {
-        severityStyle = styles$A.indicatorWarning;
+        severityStyle = styles$z.indicatorWarning;
         warningText = "Warning";
-        warningTextStyle = styles$A.warning;
+        warningTextStyle = styles$z.warning;
       } else {
-        severityStyle = styles$A.indicatorGuideline;
+        severityStyle = styles$z.indicatorGuideline;
         warningText = "Recommendation";
-        warningTextStyle = styles$A.warning;
+        warningTextStyle = styles$z.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$A.indicator, severityStyle)
+        className: css(styles$z.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
+        className: css(styles$z.tooltip, tooltipAbove && styles$z.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React.createElement("p", {
         key: i,
-        className: css(styles$A.tooltipParagraph)
+        className: css(styles$z.tooltipParagraph)
       }, /*#__PURE__*/React.createElement("span", {
         className: css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React.createElement("div", {
-        className: css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
+        className: css(styles$z.tail, tooltipAbove && styles$z.tailAbove)
       })));
     };
   }
@@ -17958,20 +17975,20 @@ class Lint extends React.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.lintContainer, styles$A.lintContainerBlock)
-      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$z.lintContainer, styles$z.lintContainerBlock)
+      }, this.renderLink(styles$z.radioWidgetHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React.createElement("span", {
-        className: css(styles$A.lintContainer)
-      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
+        className: css(styles$z.lintContainer)
+      }, this.renderLink(styles$z.inlineHoverTarget), /*#__PURE__*/React.createElement("span", null, children));
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$A.lintContainer)
-    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
+      className: css(styles$z.lintContainer)
+    }, this.renderLink(styles$z.hoverTarget), /*#__PURE__*/React.createElement("div", null, children));
   }
 }
-const styles$A = StyleSheet.create({
+const styles$z = 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.
@@ -19719,7 +19736,7 @@ class Renderer extends React.Component {
             paddingLeft: margin,
             paddingRight: margin
           };
-          const mobileInnerStyle = _extends({}, innerStyle, styles$z.mobileZoomableParentFix);
+          const mobileInnerStyle = _extends({}, innerStyle, styles$y.mobileZoomableParentFix);
           return /*#__PURE__*/React.createElement("div", {
             key: state.key,
             className: "perseus-block-math",
@@ -19840,7 +19857,7 @@ class Renderer extends React.Component {
           paddingLeft: 0,
           paddingRight: 0
         };
-        const mobileInnerStyle = _extends({}, innerStyle, styles$z.mobileZoomableParentFix);
+        const mobileInnerStyle = _extends({}, innerStyle, styles$y.mobileZoomableParentFix);
         const wrappedOutput = /*#__PURE__*/React.createElement("div", {
           style: _extends({}, mobileInnerStyle, {
             overflowX: "auto"
@@ -20456,7 +20473,7 @@ Renderer.defaultProps = {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
 };
-const styles$z = {
+const styles$y = {
   mobileZoomableParentFix: {
     // NOTE(abdul): There is an issue where transform animations will
     // cause the Zoomable component to disappear when running on the
@@ -21234,10 +21251,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$y.default, this.props.size === "small" ? styles$y.small : null, this.props.rightAlign ? styles$y.rightAlign : styles$y.leftAlign];
+    const inputStyles = [styles$x.default, this.props.size === "small" ? styles$x.small : null, this.props.rightAlign ? styles$x.rightAlign : styles$x.leftAlign];
     // Unanswered
     if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$y.answerStateUnanswered);
+      inputStyles.push(styles$x.answerStateUnanswered);
     }
     return /*#__PURE__*/React.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21322,7 +21339,7 @@ InputNumber.defaultProps = {
   apiOptions: ApiOptions.defaults,
   linterContext: linterContextDefault
 };
-const styles$y = StyleSheet.create({
+const styles$x = StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22311,7 +22328,7 @@ const FocusRing = function FocusRing(props) {
   };
   return /*#__PURE__*/React.createElement("span", {
     "data-test-id": "focus-ring",
-    className: css(styles$x.ring),
+    className: css(styles$w.ring),
     style: style
   }, children);
 };
@@ -22320,7 +22337,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$x = StyleSheet.create({
+const styles$w = StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22357,7 +22374,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22380,7 +22397,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$v.crossOutLine),
+    className: css(styles$u.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22395,7 +22412,7 @@ const CrossOutLine = function CrossOutLine(props) {
     strokeLinecap: "round"
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22476,7 +22493,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$w.iconWrapper)
+    className: css(styles$v.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
     color: Color.blue,
     visible: focused || hovered,
@@ -22485,13 +22502,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$u.circle, showCorrectness && correct && styles$u.circleCorrect, showCorrectness && !correct && styles$u.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$u.circleIncorrectAnswered)
+    className: css(styles$t.circle, showCorrectness && correct && styles$t.circleCorrect, showCorrectness && !correct && styles$t.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$t.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$u.innerWrapper)
+    className: css(styles$t.innerWrapper)
   }, /*#__PURE__*/React.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22500,7 +22517,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$u = StyleSheet.create({
+const styles$t = StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -22592,19 +22609,19 @@ const OptionStatus = function OptionStatus(props) {
   }
   let textStyle;
   if (correct) {
-    textStyle = styles$t.correct;
+    textStyle = styles$s.correct;
   } else {
     if (checked || previouslyAnswered) {
-      textStyle = styles$t.incorrectAnswered;
+      textStyle = styles$s.incorrectAnswered;
     } else {
-      textStyle = styles$t.incorrect;
+      textStyle = styles$s.incorrect;
     }
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$t.text, textStyle)
+    className: css(styles$s.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$t = StyleSheet.create({
+const styles$s = StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -22679,8 +22696,8 @@ const Choice = function Choice(props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames("description", css(styles$s.description));
-  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$s.rationale));
+  const descriptionClassName = classNames("description", css(styles$r.description));
+  const rationaleClassName = classNames("perseus-radio-rationale-content", css(styles$r.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
@@ -22839,7 +22856,7 @@ const Choice = function Choice(props) {
     "data-test-id": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
-const styles$s = StyleSheet.create({
+const styles$r = StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23030,10 +23047,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$r.radio, styles$r.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$r.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$r.radioContainerLastHighlighted));
-  const instructionsClassName = classNames("instructions", css(styles$r.instructions, isMobile && styles$r.instructionsMobile));
+  const 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 instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = css(styles$r.responsiveFieldset);
+  const responsiveClassName = css(styles$q.responsiveFieldset);
   const fieldset = /*#__PURE__*/React.createElement("fieldset", {
     className: `perseus-widget-radio-fieldset ${responsiveClassName}`
   }, /*#__PURE__*/React.createElement("legend", {
@@ -23084,7 +23101,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$r.item, styles$r.responsiveItem, checked && styles$r.selectedItem, checked && choice.highlighted && styles$r.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$r.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$r.nextHighlighted);
+      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);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23158,14 +23175,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$r.responsiveContainer)
+    className: css(styles$q.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$r = StyleSheet.create({
+const styles$q = StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -23804,9 +23821,9 @@ class Categorizer extends React.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React.createElement("table", {
-      className: "categorizer-table " + css(styles$q.mobileTable)
+      className: "categorizer-table " + css(styles$p.mobileTable)
     }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      className: css(styles$q.emptyHeaderCell)
+      className: css(styles$p.emptyHeaderCell)
     }), this.props.categories.map((category, i) => {
       // Array index is the correct key here, as that's
       // how category grading actually works -- no way
@@ -23814,7 +23831,7 @@ class Categorizer extends React.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React.createElement("th", {
-        className: css(styles$q.header),
+        className: css(styles$p.header),
         key: i
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: category,
@@ -23834,7 +23851,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$q.cell),
+          className: "category " + css(styles$p.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -23853,7 +23870,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$q.radioSpan, selected && styles$q.checkedRadioSpan, this.props.static && selected && styles$q.staticCheckedRadioSpan)
+          className: css(styles$p.radioSpan, selected && styles$p.checkedRadioSpan, this.props.static && selected && styles$p.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -23865,7 +23882,7 @@ class Categorizer extends React.Component {
       "categorizer-container": true,
       "static-mode": this.props.static
     });
-    const inlineStyles = this.props.apiOptions.isMobile ? [styles$q.fullBleedContainer] : [];
+    const inlineStyles = this.props.apiOptions.isMobile ? [styles$p.fullBleedContainer] : [];
     return /*#__PURE__*/React.createElement("div", {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
@@ -23910,7 +23927,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$q = StyleSheet.create({
+const styles$p = StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24146,7 +24163,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$p.widthOverride, styleContainer && styles$p.container)
+      className: css(styles$o.widthOverride, styleContainer && styles$o.container)
     }, /*#__PURE__*/React.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24175,7 +24192,7 @@ CSProgram.defaultProps = {
   // optional message
   message: null
 };
-const styles$p = StyleSheet.create({
+const styles$o = StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24218,7 +24235,7 @@ class Definition extends React.Component {
     }) => /*#__PURE__*/React.createElement(Popover, {
       content: /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: "white",
-        style: styles$o.tooltipBody,
+        style: styles$n.tooltipBody,
         closeButtonVisible: true
       }, /*#__PURE__*/React.createElement(Renderer, {
         apiOptions: this.props.apiOptions,
@@ -24249,7 +24266,7 @@ Definition.defaultProps = {
   togglePrompt: "define me",
   definition: "definition goes here"
 };
-const styles$o = {
+const styles$n = {
   tooltipBody: {
     color: Color.offBlack,
     fontSize: 20,
@@ -24408,15 +24425,15 @@ class Explanation extends React.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React.createElement("div", {
-        className: css(styles$n.linkContainer)
+        className: css(styles$m.linkContainer)
       }, /*#__PURE__*/React.createElement("a", {
-        className: css(styles$n.mobileExplanationLink),
+        className: css(styles$m.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, linkAnchor), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
-        className: css(styles$n.disclosureArrow)
+        className: css(styles$m.disclosureArrow)
       }, /*#__PURE__*/React.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24429,13 +24446,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$n.linkContainer, styles$n.articleLink)
+          className: css(styles$m.linkContainer, styles$m.articleLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$n.explanationLink)
+          className: css(styles$m.explanationLink)
           // HACK(michaelpolyak): WB Link doesn't passthrough
           // class name.
           ,
-          style: styles$n.explanationLink,
+          style: styles$m.explanationLink,
           href: href,
           onClick: onClick,
           role: "button",
@@ -24445,9 +24462,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$n.linkContainer, styles$n.exerciseLink)
+          className: css(styles$m.linkContainer, styles$m.exerciseLink)
         }, /*#__PURE__*/React.createElement(Link, {
-          className: css(styles$n.explanationLink),
+          className: css(styles$m.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -24455,11 +24472,11 @@ class Explanation extends React.Component {
         }, `[${linkAnchor}]`));
       }
     }
-    const expandedStyle = isMobile ? styles$n.contentExpandedMobile : styles$n.contentExpanded;
+    const expandedStyle = isMobile ? styles$m.contentExpandedMobile : styles$m.contentExpanded;
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$n.container)
+      className: css(styles$m.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$n.content, isMobile && styles$n.contentMobile, this.state.expanded && expandedStyle)
+      className: css(styles$m.content, isMobile && styles$m.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24483,7 +24500,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$n = StyleSheet.create({
+const styles$m = StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -24608,15 +24625,15 @@ class GradedGroupAnswerBar extends React.Component {
       onCheckAnswer,
       onNextQuestion
     } = this.props;
-    const answerBarStyle = _extends({}, styles$m.answerBar, {
+    const answerBarStyle = _extends({}, styles$l.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$m.text
+      style: styles$l.text
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$m.tryAgainIcon
+      style: styles$l.tryAgainIcon
     }, /*#__PURE__*/React.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React.createElement("span", {
       style: {
         marginLeft: 8
@@ -24635,7 +24652,7 @@ class GradedGroupAnswerBar extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$m.text
+      style: styles$l.text
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontSize: 28,
@@ -24657,7 +24674,7 @@ class GradedGroupAnswerBar extends React.Component {
   }
 }
 const fontSize = 17;
-const styles$m = {
+const styles$l = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -24834,7 +24851,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$l.gradedGroupInSet) : css(styles$l.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? css(styles$k.gradedGroupInSet) : css(styles$k.gradedGroup);
     const classes = classNames({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -24853,7 +24870,7 @@ class GradedGroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$l.title)
+      className: css(styles$k.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -24885,7 +24902,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$l.explanationTitle),
+      className: css(styles$k.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -24917,7 +24934,7 @@ class GradedGroup extends React.Component {
           showHint: true
         });
       },
-      className: css(styles$l.showHintLink)
+      className: css(styles$k.showHintLink)
     }, i18n._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -24938,7 +24955,7 @@ GradedGroup.defaultProps = {
 const traverseChildWidgets$3 = function traverseChildWidgets(props, traverseRenderer) {
   return _.extend({}, props, traverseRenderer(props));
 };
-const styles$l = StyleSheet.create({
+const styles$k = StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25009,7 +25026,7 @@ class Indicators extends React.Component {
   }
   render() {
     return /*#__PURE__*/React.createElement("ul", {
-      className: css(styles$k.indicatorContainer)
+      className: css(styles$j.indicatorContainer)
     }, this.props.gradedGroups.map(({
       title
     }, i) => /*#__PURE__*/React.createElement("li", {
@@ -25018,7 +25035,7 @@ class Indicators extends React.Component {
         title
       }),
       key: title,
-      className: css(styles$k.indicator, i === this.props.currentGroup && styles$k.selectedIndicator),
+      className: css(styles$j.indicator, i === this.props.currentGroup && styles$j.selectedIndicator),
       tabIndex: 0,
       onClick: () => this.props.onChangeCurrentGroup(i),
       onKeyDown: e => this.handleKeyDown(e, i)
@@ -25082,7 +25099,7 @@ class GradedGroupSet extends React.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React.createElement("div", {
-        className: css(styles$k.container)
+        className: css(styles$j.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25105,13 +25122,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$k.container)
+      className: css(styles$j.container)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.top)
+      className: css(styles$j.top)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.title)
+      className: css(styles$j.title)
     }, currentGroup.title), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$k.spacer)
+      className: css(styles$j.spacer)
     }), /*#__PURE__*/React.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25153,7 +25170,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$k = StyleSheet.create({
+const styles$j = StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25235,7 +25252,7 @@ class ButtonGroup extends React.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: css(styles$j.buttonStyle, button.value === value && styles$j.selectedStyle),
+        className: css(styles$i.buttonStyle, button.value === value && styles$i.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25252,7 +25269,7 @@ ButtonGroup.defaultProps = {
   value: null,
   allowEmpty: true
 };
-const styles$j = StyleSheet.create({
+const styles$i = StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -26687,10 +26704,9 @@ class ImageWidget extends React.Component {
         // This minWidth takes precedence over minWidth applied via
         // Aphrodite.
         const minWidth = isImageFullWidth ? null : "0 !important";
-        titleAndCaption = /*#__PURE__*/React.createElement("div", {
+        titleAndCaption = /*#__PURE__*/React.createElement("figcaption", {
           className: className
         }, /*#__PURE__*/React.createElement("div", {
-          className: css(styles$i.caption),
           style: {
             // @ts-expect-error - TS2322 - Type 'string | null' is not assignable to type 'MinWidth<string | number> | undefined'.
             minWidth: minWidth
@@ -26701,7 +26717,7 @@ class ImageWidget extends React.Component {
           linterContext: this.props.linterContext
         })));
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("figure", {
         className: "perseus-image-widget"
       }, image, alt, titleAndCaption);
     }
@@ -26717,7 +26733,7 @@ class ImageWidget extends React.Component {
       }));
     }
     if (this.props.caption) {
-      caption = /*#__PURE__*/React.createElement("div", {
+      caption = /*#__PURE__*/React.createElement("figcaption", {
         className: "perseus-image-caption"
       }, /*#__PURE__*/React.createElement(Renderer, {
         content: this.props.caption,
@@ -26725,7 +26741,7 @@ class ImageWidget extends React.Component {
         linterContext: this.props.linterContext
       }));
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("figure", {
       className: "perseus-image-widget"
     }, title, image, alt, caption);
   }
@@ -26749,22 +26765,6 @@ ImageWidget.defaultProps = {
   caption: "",
   linterContext: linterContextDefault
 };
-const styles$i = StyleSheet.create({
-  caption: {
-    display: "inline-block",
-    marginTop: baseUnitPx,
-    maxWidth: 640,
-    [mediaQueries.lgOrSmaller]: {
-      // TODO(david): This maxWidth is not being used because
-      //     it's overriden by the 512px max-width we have on
-      //     paragraphs.
-      maxWidth: 540
-    },
-    [mediaQueries.smOrSmaller]: {
-      maxWidth: 450
-    }
-  }
-});
 var Image$1 = {
   name: "image",
   // This widget's accessibility depends on its contents: if the image has