@khanacademy/perseus 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/perseus
 
+## 1.3.2
+
+### Patch Changes
+
+-   1454c80a: Change to shape/space Radio Choice's "cross out" button
+
+## 1.3.1
+
+### Patch Changes
+
+-   9b3bf30f: CSS bug fixes for SAT Radio widget
+-   Updated dependencies [113953e8]
+    -   @khanacademy/math-input@0.6.4
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -27348,7 +27348,7 @@ function Choice(props) {
 
   var satCorrectChoice = apiOptions.satStyling && reviewMode && correct;
   var satIncorrectChecked = apiOptions.satStyling && reviewMode && !correct && checked;
-  var descriptionClassName = classNames("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && styles$o.satDescriptionCorrect, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
+  var descriptionClassName = classNames("description", satCorrectChoice && "sat-correct", satIncorrectChecked && "sat-incorrect", css(!apiOptions.satStyling && styles$o.description, apiOptions.satStyling && styles$o.satDescription, satCorrectChoice && checked && styles$o.satDescriptionCorrectChecked, satIncorrectChecked && styles$o.satDescriptionIncorrectChecked));
   var rationaleClassName = classNames("perseus-radio-rationale-content", 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
@@ -27361,13 +27361,14 @@ function Choice(props) {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       dispay: "flex",
-      flexDirection: "column"
-    }
+      flexDirection: "column",
+      color: Color.offBlack
+    },
+    className: descriptionClassName
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "row",
-      width: "100%",
       opacity: showDimmed ? 0.5 : 1.0
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -27386,7 +27387,8 @@ function Choice(props) {
     },
     onChange: () => {},
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ClassNames.RADIO.OPTION_CONTENT
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: choiceId
   }, a11yText, " \xA0 ", content)), /*#__PURE__*/React.createElement(Clickable, {
@@ -27398,7 +27400,6 @@ function Choice(props) {
         crossedOut: false
       });
     },
-    className: descriptionClassName,
     disabled: disabled || apiOptions.staticRender || apiOptions.readOnly,
     style: {
       flex: 1
@@ -27496,7 +27497,15 @@ function Choice(props) {
     return /*#__PURE__*/React.createElement(Clickable, {
       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.createElement(Icon, {
         icon: ellipsisHorizontalIcon,
@@ -27531,16 +27540,12 @@ var styles$o = 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: {
@@ -27894,8 +27899,7 @@ var styles$n = StyleSheet.create({
     }
   },
   radio: {
-    // Avoid centering
-    width: "100%"
+    padding: 0
   },
   responsiveRadioContainer: {
     borderBottom: "1px solid ".concat(radioBorderColor$1),