@khanacademy/perseus 10.0.0 → 10.1.0

package/dist/index.js

@@ -2994,6 +2994,17 @@ const ExpressionWithDependencies = /*#__PURE__*/React__namespace.forwardRef((pro
     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",
@@ -17620,7 +17631,8 @@ class Zoomable extends React__namespace.Component {
       zoomed
     } = this.state;
     const {
-      animateHeight
+      animateHeight,
+      disableEntranceAnimation
     } = this.props;
     const property = animateHeight ? "opacity transform height" : "opacity transform";
 
@@ -17632,7 +17644,9 @@ class Zoomable extends React__namespace.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 !== void 0 ? scale : 1).toString();
     const transform = zoomed ? "scale(1, 1) ".concat(translateOffset) : "scale(".concat(scaleString, ", ").concat(scaleString, ") ").concat(translateOffset);
     const style = {
@@ -17641,7 +17655,7 @@ class Zoomable extends React__namespace.Component {
       height: zoomed ? expandedHeight : compactHeight,
       transform: transform,
       transformOrigin: "0 0",
-      opacity: visible ? 1 : 0,
+      opacity: opacity,
       WebkitTapHighlightColor: "transparent",
       ...transitionStyle
     };
@@ -17660,6 +17674,7 @@ class Zoomable extends React__namespace.Component {
 _defineProperty(Zoomable, "defaultProps", {
   animateHeight: false,
   readyToMeasure: true,
+  disableEntranceAnimation: false,
   computeChildBounds: parentNode => {
     const firstChild = parentNode.firstElementChild;
     return {
@@ -17705,7 +17720,9 @@ class ZoomableTeX extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement(Zoomable, {
       readyToMeasure: this.state.isRendered,
-      computeChildBounds: computeMathBounds
+      computeChildBounds: computeMathBounds,
+      animateHeight: false,
+      disableEntranceAnimation: true
     }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
       let {
         setAssetStatus
@@ -17950,33 +17967,33 @@ class Lint extends React__namespace.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__namespace.createElement("a", {
         href: "https://khanacademy.org/r/linter-rules#".concat(this.props.ruleName),
         target: "lint-help-window",
         className: aphrodite.css(style)
       }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.indicator, severityStyle)
+        className: aphrodite.css(styles$z.indicator, severityStyle)
       }, this.props.severity === 1 && /*#__PURE__*/React__namespace.createElement(InlineIcon, exclamationIcon)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$A.tooltip, tooltipAbove && styles$A.tooltipAbove)
+        className: aphrodite.css(styles$z.tooltip, tooltipAbove && styles$z.tooltipAbove)
       }, this.props.message.split("\n\n").map((m, i) => /*#__PURE__*/React__namespace.createElement("p", {
         key: i,
-        className: aphrodite.css(styles$A.tooltipParagraph)
+        className: aphrodite.css(styles$z.tooltipParagraph)
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: aphrodite.css(warningTextStyle)
       }, warningText, ":", " "), m)), /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$A.tail, tooltipAbove && styles$A.tailAbove)
+        className: aphrodite.css(styles$z.tail, tooltipAbove && styles$z.tailAbove)
       })));
     });
   }
@@ -18020,20 +18037,20 @@ class Lint extends React__namespace.Component {
     }
     if (blockHighlight) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.lintContainer, styles$A.lintContainerBlock)
-      }, this.renderLink(styles$A.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$z.lintContainer, styles$z.lintContainerBlock)
+      }, this.renderLink(styles$z.radioWidgetHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     if (inline) {
       return /*#__PURE__*/React__namespace.createElement("span", {
-        className: aphrodite.css(styles$A.lintContainer)
-      }, this.renderLink(styles$A.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
+        className: aphrodite.css(styles$z.lintContainer)
+      }, this.renderLink(styles$z.inlineHoverTarget), /*#__PURE__*/React__namespace.createElement("span", null, children));
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$A.lintContainer)
-    }, this.renderLink(styles$A.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
+      className: aphrodite.css(styles$z.lintContainer)
+    }, this.renderLink(styles$z.hoverTarget), /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
 }
-const styles$A = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   // This is the class of the outermost element.
   // We use relative positioning so that the lint indicator can be
   // positioned absolutely relative to the position of the linty container.
@@ -19814,7 +19831,7 @@ class Renderer extends React__namespace.Component {
           };
           const mobileInnerStyle = {
             ...innerStyle,
-            ...styles$z.mobileZoomableParentFix
+            ...styles$y.mobileZoomableParentFix
           };
           return /*#__PURE__*/React__namespace.createElement("div", {
             key: state.key,
@@ -19951,7 +19968,7 @@ class Renderer extends React__namespace.Component {
         };
         const mobileInnerStyle = {
           ...innerStyle,
-          ...styles$z.mobileZoomableParentFix
+          ...styles$y.mobileZoomableParentFix
         };
         const wrappedOutput = /*#__PURE__*/React__namespace.createElement("div", {
           style: {
@@ -20576,7 +20593,7 @@ _defineProperty(Renderer, "defaultProps", {
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter__namespace.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
@@ -21334,10 +21351,10 @@ class InputNumber extends React__namespace.Component {
     // Note: This is _very_ similar to what `numeric-input.jsx` does. If
     // you modify this, double-check if you also need to modify that
     // component.
-    const inputStyles = [styles$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__namespace.createElement(InputWithExamples
     // eslint-disable-next-line react/no-string-refs
@@ -21423,7 +21440,7 @@ _defineProperty(InputNumber, "defaultProps", {
   apiOptions: ApiOptions.defaults,
   linterContext: PerseusLinter.linterContextDefault
 });
-const styles$y = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   default: {
     width: 80,
     height: "auto"
@@ -22417,7 +22434,7 @@ const FocusRing = function (props) {
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
     "data-test-id": "focus-ring",
-    className: aphrodite.css(styles$x.ring),
+    className: aphrodite.css(styles$w.ring),
     style: style
   }, children);
 };
@@ -22426,7 +22443,7 @@ FocusRing.defaultProps = {
   color: kaGreen$1,
   multipleSelect: false
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   ring: {
     margin: "auto",
     display: "inline-block",
@@ -22463,7 +22480,7 @@ function getChoiceLetter(pos) {
 }
 
 const CHOICE_ICON_SIZE = 24;
-const styles$w = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   iconWrapper: {
     display: "inline-block",
     position: "relative"
@@ -22486,7 +22503,7 @@ const CrossOutLine = function (props) {
     width: CROSS_OUT_LINE_SIZE,
     height: CROSS_OUT_LINE_SIZE,
     viewBox: "0 0 ".concat(CROSS_OUT_LINE_SIZE, " ").concat(CROSS_OUT_LINE_SIZE),
-    className: aphrodite.css(styles$v.crossOutLine),
+    className: aphrodite.css(styles$u.crossOutLine),
     "data-test-id": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
@@ -22501,7 +22518,7 @@ const CrossOutLine = function (props) {
     strokeLinecap: "round"
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
@@ -22582,7 +22599,7 @@ const ChoiceIcon = function (props) {
   } = props;
   const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$w.iconWrapper)
+    className: aphrodite.css(styles$v.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
     color: Color__default["default"].blue,
     visible: focused || hovered,
@@ -22591,13 +22608,13 @@ const ChoiceIcon = function (props) {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-test-id": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$u.circle, showCorrectness && correct && styles$u.circleCorrect, showCorrectness && !correct && styles$u.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$u.circleIncorrectAnswered)
+    className: aphrodite.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__namespace.createElement("div", {
-    className: aphrodite.css(styles$u.innerWrapper)
+    className: aphrodite.css(styles$t.innerWrapper)
   }, /*#__PURE__*/React__namespace.createElement(ChoiceInner, {
     pos: pos,
     showCorrectness: showCorrectness,
@@ -22606,7 +22623,7 @@ const ChoiceIcon = function (props) {
     color: dynamicStyles.borderColor
   }));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   innerWrapper: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
@@ -22698,19 +22715,19 @@ const OptionStatus = function (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__namespace.createElement("div", {
-    className: aphrodite.css(styles$t.text, textStyle)
+    className: aphrodite.css(styles$s.text, textStyle)
   }, renderText(checked, correct, crossedOut));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   text: {
     alignItems: "center",
     display: "flex",
@@ -22785,8 +22802,8 @@ const Choice = function (props) {
       crossedOut: updatedCrossedOut
     });
   }
-  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$s.description));
-  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$s.rationale));
+  const descriptionClassName = classNames__default["default"]("description", aphrodite.css(styles$r.description));
+  const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$r.rationale));
 
   // 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
@@ -22952,7 +22969,7 @@ const Choice = function (props) {
     "data-test-id": "perseus-radio-rationale-content-".concat(pos)
   }, rationale));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   description: {
     display: "inline-block",
     width: "100%"
@@ -23143,10 +23160,10 @@ const BaseRadio = function (props) {
   const isMobile = apiOptions.isMobile;
   const firstChoiceHighlighted = choices[0].highlighted;
   const lastChoiceHighlighted = choices[choices.length - 1].highlighted;
-  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$r.radio, styles$r.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$r.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$r.radioContainerLastHighlighted));
-  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$r.instructions, isMobile && styles$r.instructionsMobile));
+  const className = classNames__default["default"]("perseus-widget-radio", !editMode && "perseus-rendered-radio", aphrodite.css(styles$q.radio, styles$q.responsiveRadioContainer, firstChoiceHighlighted && isMobile && styles$q.radioContainerFirstHighlighted, lastChoiceHighlighted && isMobile && styles$q.radioContainerLastHighlighted));
+  const instructionsClassName = classNames__default["default"]("instructions", aphrodite.css(styles$q.instructions, isMobile && styles$q.instructionsMobile));
   const instructions = getInstructionsText(multipleSelect, countChoices, numCorrect);
-  const responsiveClassName = aphrodite.css(styles$r.responsiveFieldset);
+  const responsiveClassName = aphrodite.css(styles$q.responsiveFieldset);
   const fieldset = /*#__PURE__*/React__namespace.createElement("fieldset", {
     className: "perseus-widget-radio-fieldset ".concat(responsiveClassName)
   }, /*#__PURE__*/React__namespace.createElement("legend", {
@@ -23197,7 +23214,7 @@ const BaseRadio = function (props) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.css(sharedStyles.aboveScratchpad, styles$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 aphrodite.css(sharedStyles.aboveScratchpad, styles$q.item, styles$q.responsiveItem, checked && styles$q.selectedItem, checked && choice.highlighted && styles$q.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$q.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$q.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -23271,14 +23288,14 @@ const BaseRadio = function (props) {
   // Allow for horizontal scrolling if content is too wide, which may be
   // an issue especially on phones.
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$r.responsiveContainer)
+    className: aphrodite.css(styles$q.responsiveContainer)
   }, fieldset);
 };
 BaseRadio.defaultProps = {
   editMode: false,
   multipleSelect: false
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   instructions: {
     display: "block",
     color: gray17,
@@ -23930,9 +23947,9 @@ class Categorizer extends React__namespace.Component {
       indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
     }
     const table = /*#__PURE__*/React__namespace.createElement("table", {
-      className: "categorizer-table " + aphrodite.css(styles$q.mobileTable)
+      className: "categorizer-table " + aphrodite.css(styles$p.mobileTable)
     }, /*#__PURE__*/React__namespace.createElement("thead", null, /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-      className: aphrodite.css(styles$q.emptyHeaderCell)
+      className: aphrodite.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
@@ -23940,7 +23957,7 @@ class Categorizer extends React__namespace.Component {
       // middle. (If we later add that, this should be
       // fixed.)
       return /*#__PURE__*/React__namespace.createElement("th", {
-        className: aphrodite.css(styles$q.header),
+        className: aphrodite.css(styles$p.header),
         key: i
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: category,
@@ -23960,7 +23977,7 @@ class Categorizer extends React__namespace.Component {
       })), self.props.categories.map((catName, catNum) => {
         const selected = self.props.values[itemNum] === catNum;
         return /*#__PURE__*/React__namespace.createElement("td", {
-          className: "category " + aphrodite.css(styles$q.cell),
+          className: "category " + aphrodite.css(styles$p.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
           className: ClassNames.INTERACTIVE,
@@ -23979,7 +23996,7 @@ class Categorizer extends React__namespace.Component {
           onChange: this.onChange.bind(this, itemNum, catNum),
           onClick: e => e.stopPropagation()
         }), !isMobile && /*#__PURE__*/React__namespace.createElement("span", {
-          className: aphrodite.css(styles$q.radioSpan, selected && styles$q.checkedRadioSpan, this.props.static && selected && styles$q.staticCheckedRadioSpan)
+          className: aphrodite.css(styles$p.radioSpan, selected && styles$p.checkedRadioSpan, this.props.static && selected && styles$p.staticCheckedRadioSpan)
         }, selected ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircle) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleThin))));
       }));
       /* eslint-enable max-len */
@@ -23991,7 +24008,7 @@ class Categorizer extends React__namespace.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__namespace.createElement("div", {
       className: extraClassNames + " " + aphrodite.css(...inlineStyles)
     }, table);
@@ -24036,7 +24053,7 @@ const pageMargin = 16;
 
 // Stylesheets aren't directly testable
 /* c8 ignore next */
-const styles$q = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   mobileTable: {
     [mediaQueries.smOrSmaller]: {
       minWidth: "auto"
@@ -24277,7 +24294,7 @@ class CSProgram extends React__namespace.Component {
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$p.widthOverride, styleContainer && styles$p.container)
+      className: aphrodite.css(styles$o.widthOverride, styleContainer && styles$o.container)
     }, /*#__PURE__*/React__namespace.createElement("iframe", {
       sandbox: sandboxOptions,
       src: url,
@@ -24307,7 +24324,7 @@ _defineProperty(CSProgram, "defaultProps", {
   // optional message
   message: null
 });
-const styles$p = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   // Override the inherited width from the perseus paragraph class
   // 820 is minimum width for 420px editor and 400px canvas
   widthOverride: {
@@ -24352,7 +24369,7 @@ class Definition extends React__namespace.Component {
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.Popover, {
         content: /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContentCore, {
           color: "white",
-          style: styles$o.tooltipBody,
+          style: styles$n.tooltipBody,
           closeButtonVisible: true
         }, /*#__PURE__*/React__namespace.createElement(Renderer, {
           apiOptions: this.props.apiOptions,
@@ -24387,7 +24404,7 @@ _defineProperty(Definition, "defaultProps", {
   togglePrompt: "define me",
   definition: "definition goes here"
 });
-const styles$o = {
+const styles$n = {
   tooltipBody: {
     color: Color__default["default"].offBlack,
     fontSize: 20,
@@ -24550,15 +24567,15 @@ class Explanation extends React__namespace.Component {
     const onClick = this._onClick;
     if (isMobile) {
       linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$n.linkContainer)
+        className: aphrodite.css(styles$m.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
-        className: aphrodite.css(styles$n.mobileExplanationLink),
+        className: aphrodite.css(styles$m.mobileExplanationLink),
         href: href,
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
       }, linkAnchor), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
-        className: aphrodite.css(styles$n.disclosureArrow)
+        className: aphrodite.css(styles$m.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
           fill: backgroundColor
@@ -24571,13 +24588,13 @@ class Explanation extends React__namespace.Component {
         // an anchor tag (if rendered in a modal) or a Wonder Blocks
         // link component in lesson page, see: `article-page.jsx`.
         linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$n.linkContainer, styles$n.articleLink)
+          className: aphrodite.css(styles$m.linkContainer, styles$m.articleLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$n.explanationLink)
+          className: aphrodite.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",
@@ -24587,9 +24604,9 @@ class Explanation extends React__namespace.Component {
         // NOTE: For exercises, the baseElements `Link` is an
         // anchor tag, see: `perseus-api.jsx`.
         linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$n.linkContainer, styles$n.exerciseLink)
+          className: aphrodite.css(styles$m.linkContainer, styles$m.exerciseLink)
         }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$n.explanationLink),
+          className: aphrodite.css(styles$m.explanationLink),
           href: href,
           onClick: onClick,
           role: "button",
@@ -24597,11 +24614,11 @@ class Explanation extends React__namespace.Component {
         }, "[".concat(linkAnchor, "]")));
       }
     }
-    const expandedStyle = isMobile ? styles$n.contentExpandedMobile : styles$n.contentExpanded;
+    const expandedStyle = isMobile ? styles$m.contentExpandedMobile : styles$m.contentExpanded;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$n.container)
+      className: aphrodite.css(styles$m.container)
     }, linkContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$n.content, isMobile && styles$n.contentMobile, this.state.expanded && expandedStyle)
+      className: aphrodite.css(styles$m.content, isMobile && styles$m.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "content"
@@ -24625,7 +24642,7 @@ const verticalContentPadding = 10;
 const arrowWidth = 30;
 const arrowHeight = 14;
 const backgroundColor = gray95;
-const styles$n = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   container: {
     display: "inline",
     position: "relative"
@@ -24751,15 +24768,15 @@ class GradedGroupAnswerBar extends React__namespace.Component {
       onNextQuestion
     } = this.props;
     const answerBarStyle = {
-      ...styles$m.answerBar,
+      ...styles$l.answerBar,
       backgroundColor: answerBarState === "CORRECT" ? Color__default["default"].offWhite : "white",
       // Center the "Correct!" message only when there's no next question
       justifyContent: answerBarState === "CORRECT" && !onNextQuestion ? "center" : "space-between"
     };
     const message = answerBarState === "INCORRECT" ? /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$m.text
+      style: styles$l.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$m.tryAgainIcon
+      style: styles$l.tryAgainIcon
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTryAgain)), /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         marginLeft: 8
@@ -24778,7 +24795,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: answerBarStyle
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$m.text
+      style: styles$l.text
     }, /*#__PURE__*/React__namespace.createElement("span", {
       style: {
         fontSize: 28,
@@ -24800,7 +24817,7 @@ class GradedGroupAnswerBar extends React__namespace.Component {
   }
 }
 const fontSize = 17;
-const styles$m = {
+const styles$l = {
   answerBar: {
     display: "flex",
     alignItems: "center",
@@ -24982,7 +24999,7 @@ class GradedGroup extends React__namespace.Component {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
       gradeStatus = i18n__namespace._("Incorrect");
     }
-    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$l.gradedGroupInSet) : aphrodite.css(styles$l.gradedGroup);
+    const mobileClass = this.props.inGradedGroupSet ? aphrodite.css(styles$k.gradedGroupInSet) : aphrodite.css(styles$k.gradedGroup);
     const classes = classNames__default["default"]({
       [mobileClass]: apiOptions.isMobile,
       "perseus-graded-group": true,
@@ -25001,7 +25018,7 @@ class GradedGroup extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$l.title)
+      className: aphrodite.css(styles$k.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
       // eslint-disable-next-line react/no-string-refs
       ref: "renderer",
@@ -25034,7 +25051,7 @@ class GradedGroup extends React__namespace.Component {
     }, i18n__namespace._("Next question")), this.props.hint && this.props.hint.content && (this.state.showHint ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
       tabIndex: "0",
-      className: aphrodite.css(styles$l.explanationTitle),
+      className: aphrodite.css(styles$k.explanationTitle),
       onClick: () => this.setState({
         showHint: false
       }),
@@ -25066,7 +25083,7 @@ class GradedGroup extends React__namespace.Component {
           showHint: true
         });
       },
-      className: aphrodite.css(styles$l.showHintLink)
+      className: aphrodite.css(styles$k.showHintLink)
     }, i18n__namespace._("Explain"))), apiOptions.isMobile && answerBarState !== "HIDDEN" && /*#__PURE__*/React__namespace.createElement(GradedGroupAnswerBar, {
       apiOptions: apiOptions,
       answerBarState: answerBarState,
@@ -25087,7 +25104,7 @@ _defineProperty(GradedGroup, "defaultProps", {
 const traverseChildWidgets$3 = function (props, traverseRenderer) {
   return ___default["default"].extend({}, props, traverseRenderer(props));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   gradedGroupInSet: {
     // Reset a few desktop-only styles that come from graded-group.less
     marginLeft: 0,
@@ -25158,7 +25175,7 @@ class Indicators extends React__namespace.Component {
   }
   render() {
     return /*#__PURE__*/React__namespace.createElement("ul", {
-      className: aphrodite.css(styles$k.indicatorContainer)
+      className: aphrodite.css(styles$j.indicatorContainer)
     }, this.props.gradedGroups.map((_ref, i) => {
       let {
         title
@@ -25169,7 +25186,7 @@ class Indicators extends React__namespace.Component {
           title
         }),
         key: title,
-        className: aphrodite.css(styles$k.indicator, i === this.props.currentGroup && styles$k.selectedIndicator),
+        className: aphrodite.css(styles$j.indicator, i === this.props.currentGroup && styles$j.selectedIndicator),
         tabIndex: 0,
         onClick: () => this.props.onChangeCurrentGroup(i),
         onKeyDown: e => this.handleKeyDown(e, i)
@@ -25239,7 +25256,7 @@ class GradedGroupSet extends React__namespace.Component {
     } = getDependencies();
     if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$k.container)
+        className: aphrodite.css(styles$j.container)
       }, this.props.gradedGroups.map((gradedGroup, i) => {
         return (
           /*#__PURE__*/
@@ -25262,13 +25279,13 @@ class GradedGroupSet extends React__namespace.Component {
     const numGroups = this.props.gradedGroups.length;
     const handleNextQuestion = this.state.currentGroup < numGroups - 1 ? this.handleNextQuestion : null;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.container)
+      className: aphrodite.css(styles$j.container)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.top)
+      className: aphrodite.css(styles$j.top)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.title)
+      className: aphrodite.css(styles$j.title)
     }, currentGroup.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$k.spacer)
+      className: aphrodite.css(styles$j.spacer)
     }), /*#__PURE__*/React__namespace.createElement(Indicators, {
       currentGroup: this.state.currentGroup,
       gradedGroups: this.props.gradedGroups,
@@ -25310,7 +25327,7 @@ var GradedGroupSet$1 = {
   tracking: "all",
   isLintable: true
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   top: {
     display: "flex",
     flexDirection: "row"
@@ -25392,7 +25409,7 @@ class ButtonGroup extends React__namespace.Component {
         id: "" + i,
         ref: "button" + i,
         key: "" + i,
-        className: aphrodite.css(styles$j.buttonStyle, button.value === value && styles$j.selectedStyle),
+        className: aphrodite.css(styles$i.buttonStyle, button.value === value && styles$i.selectedStyle),
         onClick: () => this.toggleSelect(button.value)
       }, button.content || "" + button.value);
     });
@@ -25409,7 +25426,7 @@ _defineProperty(ButtonGroup, "defaultProps", {
   value: null,
   allowEmpty: true
 });
-const styles$j = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   buttonStyle: {
     backgroundColor: "white",
     border: "1px solid #ccc",
@@ -26876,10 +26893,9 @@ class ImageWidget extends React__namespace.Component {
         // This minWidth takes precedence over minWidth applied via
         // Aphrodite.
         const minWidth = isImageFullWidth ? null : "0 !important";
-        titleAndCaption = /*#__PURE__*/React__namespace.createElement("div", {
+        titleAndCaption = /*#__PURE__*/React__namespace.createElement("figcaption", {
           className: className
         }, /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$i.caption),
           style: {
             // @ts-expect-error - TS2322 - Type 'string | null' is not assignable to type 'MinWidth<string | number> | undefined'.
             minWidth: minWidth
@@ -26890,7 +26906,7 @@ class ImageWidget extends React__namespace.Component {
           linterContext: this.props.linterContext
         })));
       }
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement("figure", {
         className: "perseus-image-widget"
       }, image, alt, titleAndCaption);
     }
@@ -26906,7 +26922,7 @@ class ImageWidget extends React__namespace.Component {
       }));
     }
     if (this.props.caption) {
-      caption = /*#__PURE__*/React__namespace.createElement("div", {
+      caption = /*#__PURE__*/React__namespace.createElement("figcaption", {
         className: "perseus-image-caption"
       }, /*#__PURE__*/React__namespace.createElement(Renderer, {
         content: this.props.caption,
@@ -26914,7 +26930,7 @@ class ImageWidget extends React__namespace.Component {
         linterContext: this.props.linterContext
       }));
     }
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement("figure", {
       className: "perseus-image-widget"
     }, title, image, alt, caption);
   }
@@ -26938,22 +26954,6 @@ _defineProperty(ImageWidget, "defaultProps", {
   caption: "",
   linterContext: PerseusLinter.linterContextDefault
 });
-const styles$i = aphrodite.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