@khanacademy/perseus 1.3.0 → 1.3.2

package/dist/index.js

@@ -27244,7 +27244,7 @@ function Choice(props) {
 
   const satCorrectChoice = apiOptions.satStyling && reviewMode && correct;
   const satIncorrectChecked = apiOptions.satStyling && reviewMode && !correct && checked;
-  const descriptionClassName = classNames__default["default"]("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", aphrodite.css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && styles$o.satDescriptionCorrect, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
+  const descriptionClassName = classNames__default["default"]("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", aphrodite.css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
   const rationaleClassName = classNames__default["default"]("perseus-radio-rationale-content", aphrodite.css(styles$o.rationale, !apiOptions.satStyling && styles$o.nonSatRationale, apiOptions.satStyling && styles$o.satReviewRationale)); // We want to show the choices as dimmed out when the choices are
   // disabled. However, we don't want to do this in the SAT product and
   // we also don't want to do this when we're in review mode in the
@@ -27257,13 +27257,14 @@ function Choice(props) {
   return /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       dispay: "flex",
-      flexDirection: "column"
-    }
+      flexDirection: "column",
+      color: Color__default["default"].offBlack
+    },
+    className: descriptionClassName
   }, /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "row",
-      width: "100%",
       opacity: showDimmed ? 0.5 : 1.0
     }
   }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -27282,7 +27283,8 @@ function Choice(props) {
     },
     onChange: () => {},
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ClassNames.RADIO.OPTION_CONTENT
   }), /*#__PURE__*/React__namespace.createElement("label", {
     htmlFor: choiceId
   }, a11yText, " \xA0 ", content)), /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
@@ -27294,7 +27296,6 @@ function Choice(props) {
         crossedOut: false
       });
     },
-    className: descriptionClassName,
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
     style: {
       flex: 1
@@ -27392,7 +27393,15 @@ function Choice(props) {
     return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: open,
       "aria-label": "Open menu for Choice ".concat(getChoiceLetter(pos)),
-      disabled: apiOptions.staticRender
+      disabled: apiOptions.staticRender,
+      style: {
+        alignSelf: "center",
+        padding: "5px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        marginLeft: "10px"
+      }
     }, _ref4 => {
       return /*#__PURE__*/React__namespace.createElement(Icon, {
         icon: ellipsisHorizontalIcon,
@@ -27427,16 +27436,12 @@ const styles$o = aphrodite.StyleSheet.create({
     boxSizing: "border-box",
     cursor: "pointer",
     marginLeft: 0,
-    padding: "17px 14px"
-  },
-  satDescriptionCorrect: {
-    color: satCorrectColor
+    padding: "17px 14px 17px 0"
   },
   satDescriptionCorrectChecked: {
     backgroundColor: satCorrectBackgroundColor
   },
   satDescriptionIncorrectChecked: {
-    color: satIncorrectColor,
     backgroundColor: satIncorrectBackgroundColor
   },
   rationale: {
@@ -27786,8 +27791,7 @@ const styles$n = aphrodite.StyleSheet.create({
     }
   },
   radio: {
-    // Avoid centering
-    width: "100%"
+    padding: 0
   },
   responsiveRadioContainer: {
     borderBottom: "1px solid ".concat(radioBorderColor$1),