@khanacademy/wonder-blocks-form 2.3.1 → 2.3.2

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @khanacademy/wonder-blocks-form
+
+## 2.3.2
+### Patch Changes
+
+- Updated dependencies [901bfe82]
+  - @khanacademy/wonder-blocks-clickable@2.2.2

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import _extends from '@babel/runtime/helpers/extends';
-import { Component, createElement, Fragment, Children, cloneElement, forwardRef } from 'react';
+import * as React from 'react';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { StyleSheet, css } from 'aphrodite';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
@@ -10,17 +10,17 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelMedium, LabelSmall, styles as styles$6 } from '@khanacademy/wonder-blocks-typography';
 import Icon from '@khanacademy/wonder-blocks-icon';
 
-const _excluded = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
 const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
+  blue: blue$1,
+  red: red$1,
+  white: white$1,
+  offWhite: offWhite$1,
+  offBlack16: offBlack16$1,
+  offBlack32: offBlack32$1,
+  offBlack50: offBlack50$1
 } = Color;
-const StyledInput = addStyle("input");
+const StyledInput$1 = addStyle("input");
 const checkboxCheck = {
   small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
 };
@@ -28,7 +28,7 @@ const checkboxCheck = {
  * The internal stateless ☑️ Checkbox
  */
 
-class CheckboxCore extends Component {
+class CheckboxCore extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -51,15 +51,15 @@ class CheckboxCore extends Component {
       focused,
       pressed
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
 
-    const stateStyles = _generateStyles(checked, error);
+    const stateStyles = _generateStyles$1(checked, error);
 
-    const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles.disabled];
+    const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles$1.disabled];
     const props = {
       "data-test-id": testId
     };
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(StyledInput, _extends({}, sharedProps, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput$1, _extends({}, sharedProps, {
       type: "checkbox",
       "aria-invalid": error,
       checked: checked,
@@ -70,17 +70,17 @@ class CheckboxCore extends Component {
       ,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), checked && /*#__PURE__*/createElement(Icon, {
-      color: disabled ? offBlack32 : white,
+    }, props)), checked && /*#__PURE__*/React.createElement(Icon, {
+      color: disabled ? offBlack32$1 : white$1,
       icon: checkboxCheck,
       size: "small",
-      style: sharedStyles.checkIcon
+      style: sharedStyles$1.checkIcon
     }));
   }
 
 }
-const size = 16;
-const sharedStyles = StyleSheet.create({
+const size$1 = 16;
+const sharedStyles$1 = StyleSheet.create({
   // Reset the default styled input element
   inputReset: {
     appearance: "none",
@@ -88,10 +88,10 @@ const sharedStyles = StyleSheet.create({
     MozAppearance: "none"
   },
   default: {
-    height: size,
-    width: size,
-    minHeight: size,
-    minWidth: size,
+    height: size$1,
+    width: size$1,
+    minHeight: size$1,
+    minWidth: size$1,
     margin: 0,
     outline: "none",
     boxSizing: "border-box",
@@ -101,8 +101,8 @@ const sharedStyles = StyleSheet.create({
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
+    backgroundColor: offWhite$1,
+    borderColor: offBlack16$1,
     borderWidth: 1
   },
   checkIcon: {
@@ -110,33 +110,33 @@ const sharedStyles = StyleSheet.create({
     pointerEvents: "none"
   }
 });
-const fadedBlue = mix(fade(blue, 0.16), white);
-const activeBlue = mix(offBlack32, blue);
-const fadedRed = mix(fade(red, 0.08), white);
-const activeRed = mix(offBlack32, red);
-const colors = {
+const fadedBlue$1 = mix(fade(blue$1, 0.16), white$1);
+const activeBlue$1 = mix(offBlack32$1, blue$1);
+const fadedRed$1 = mix(fade(red$1, 0.08), white$1);
+const activeRed$1 = mix(offBlack32$1, red$1);
+const colors$1 = {
   default: {
-    faded: fadedBlue,
-    base: blue,
-    active: activeBlue
+    faded: fadedBlue$1,
+    base: blue$1,
+    active: activeBlue$1
   },
   error: {
-    faded: fadedRed,
-    base: red,
-    active: activeRed
+    faded: fadedRed$1,
+    base: red$1,
+    active: activeRed$1
   }
 };
-const styles = {};
+const styles$5 = {};
 
-const _generateStyles = (checked, error) => {
+const _generateStyles$1 = (checked, error) => {
   // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
-  if (styles[styleKey]) {
-    return styles[styleKey];
+  if (styles$5[styleKey]) {
+    return styles$5[styleKey];
   }
 
-  const palette = error ? colors.error : colors.default;
+  const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
 
   if (checked) {
@@ -146,52 +146,52 @@ const _generateStyles = (checked, error) => {
         borderWidth: 0
       },
       focus: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
       },
       active: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
         background: palette.active
       }
     };
   } else {
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: error ? red : offBlack50
+        backgroundColor: error ? fadedRed$1 : white$1,
+        borderColor: error ? red$1 : offBlack50$1
       },
       focus: {
-        backgroundColor: error ? fadedRed : white,
+        backgroundColor: error ? fadedRed$1 : white$1,
         borderColor: palette.base,
         borderWidth: 2
       },
       active: {
         backgroundColor: palette.faded,
-        borderColor: error ? activeRed : blue,
+        borderColor: error ? activeRed$1 : blue$1,
         borderWidth: 2
       }
     };
   }
 
-  styles[styleKey] = StyleSheet.create(newStyles);
-  return styles[styleKey];
+  styles$5[styleKey] = StyleSheet.create(newStyles);
+  return styles$5[styleKey];
 };
 
-const _excluded$1 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const _excluded$3 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
 const {
-  blue: blue$1,
-  red: red$1,
-  white: white$1,
-  offWhite: offWhite$1,
-  offBlack16: offBlack16$1,
-  offBlack32: offBlack32$1,
-  offBlack50: offBlack50$1
+  blue,
+  red,
+  white,
+  offWhite,
+  offBlack16,
+  offBlack32,
+  offBlack50
 } = Color;
-const StyledInput$1 = addStyle("input");
+const StyledInput = addStyle("input");
 /**
  * The internal stateless 🔘 Radio button
  */
 
-class RadioCore extends Component {
+class RadioCore extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -214,15 +214,15 @@ class RadioCore extends Component {
       focused,
       pressed
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
 
-    const stateStyles = _generateStyles$1(checked, error);
+    const stateStyles = _generateStyles(checked, error);
 
-    const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles$1.disabled];
+    const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles.disabled];
     const props = {
       "data-test-id": testId
     };
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(StyledInput$1, _extends({}, sharedProps, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput, _extends({}, sharedProps, {
       type: "radio",
       "aria-invalid": error,
       checked: checked,
@@ -233,24 +233,24 @@ class RadioCore extends Component {
       ,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), disabled && checked && /*#__PURE__*/createElement("span", {
+    }, props)), disabled && checked && /*#__PURE__*/React.createElement("span", {
       style: disabledChecked
     }));
   }
 
 }
-const size$1 = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
+const size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
 
 const disabledChecked = {
   position: "absolute",
-  top: size$1 / 4,
-  left: size$1 / 4,
-  height: size$1 / 2,
-  width: size$1 / 2,
+  top: size / 4,
+  left: size / 4,
+  height: size / 2,
+  width: size / 2,
   borderRadius: "50%",
-  backgroundColor: offBlack32$1
+  backgroundColor: offBlack32
 };
-const sharedStyles$1 = StyleSheet.create({
+const sharedStyles = StyleSheet.create({
   // Reset the default styled input element
   inputReset: {
     appearance: "none",
@@ -258,10 +258,10 @@ const sharedStyles$1 = StyleSheet.create({
     MozAppearance: "none"
   },
   default: {
-    height: size$1,
-    width: size$1,
-    minHeight: size$1,
-    minWidth: size$1,
+    height: size,
+    width: size,
+    minHeight: size,
+    minWidth: size,
     margin: 0,
     outline: "none",
     boxSizing: "border-box",
@@ -271,76 +271,76 @@ const sharedStyles$1 = StyleSheet.create({
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite$1,
-    borderColor: offBlack16$1,
+    backgroundColor: offWhite,
+    borderColor: offBlack16,
     borderWidth: 1
   }
 });
-const fadedBlue$1 = mix(fade(blue$1, 0.16), white$1);
-const activeBlue$1 = mix(offBlack32$1, blue$1);
-const fadedRed$1 = mix(fade(red$1, 0.08), white$1);
-const activeRed$1 = mix(offBlack32$1, red$1);
-const colors$1 = {
+const fadedBlue = mix(fade(blue, 0.16), white);
+const activeBlue = mix(offBlack32, blue);
+const fadedRed = mix(fade(red, 0.08), white);
+const activeRed = mix(offBlack32, red);
+const colors = {
   default: {
-    faded: fadedBlue$1,
-    base: blue$1,
-    active: activeBlue$1
+    faded: fadedBlue,
+    base: blue,
+    active: activeBlue
   },
   error: {
-    faded: fadedRed$1,
-    base: red$1,
-    active: activeRed$1
+    faded: fadedRed,
+    base: red,
+    active: activeRed
   }
 };
-const styles$1 = {};
+const styles$4 = {};
 
-const _generateStyles$1 = (checked, error) => {
+const _generateStyles = (checked, error) => {
   // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
-  if (styles$1[styleKey]) {
-    return styles$1[styleKey];
+  if (styles$4[styleKey]) {
+    return styles$4[styleKey];
   }
 
-  const palette = error ? colors$1.error : colors$1.default;
+  const palette = error ? colors.error : colors.default;
   let newStyles = {};
 
   if (checked) {
     newStyles = {
       default: {
-        backgroundColor: white$1,
+        backgroundColor: white,
         borderColor: palette.base,
-        borderWidth: size$1 / 4
+        borderWidth: size / 4
       },
       focus: {
-        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
       },
       active: {
-        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
         borderColor: palette.active
       }
     };
   } else {
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed$1 : white$1,
-        borderColor: error ? red$1 : offBlack50$1
+        backgroundColor: error ? fadedRed : white,
+        borderColor: error ? red : offBlack50
       },
       focus: {
-        backgroundColor: error ? fadedRed$1 : white$1,
+        backgroundColor: error ? fadedRed : white,
         borderColor: palette.base,
         borderWidth: 2
       },
       active: {
         backgroundColor: palette.faded,
-        borderColor: error ? activeRed$1 : blue$1,
+        borderColor: error ? activeRed : blue,
         borderWidth: 2
       }
     };
   }
 
-  styles$1[styleKey] = StyleSheet.create(newStyles);
-  return styles$1[styleKey];
+  styles$4[styleKey] = StyleSheet.create(newStyles);
+  return styles$4[styleKey];
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
@@ -353,7 +353,7 @@ const _excluded$2 = ["label", "description", "onChange", "style", "className", "
  * example, we can make onChange a required prop on Checkbox but not on Choice
  * (because for Choice, that prop would be auto-populated by CheckboxGroup).
  */
-class ChoiceInternal extends Component {
+class ChoiceInternal extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -392,9 +392,9 @@ class ChoiceInternal extends Component {
       id,
       label
     } = this.props;
-    return /*#__PURE__*/createElement(LabelMedium, {
-      style: [styles$2.label, disabled && styles$2.disabledLabel]
-    }, /*#__PURE__*/createElement("label", {
+    return /*#__PURE__*/React.createElement(LabelMedium, {
+      style: [styles$3.label, disabled && styles$3.disabledLabel]
+    }, /*#__PURE__*/React.createElement("label", {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
@@ -404,8 +404,8 @@ class ChoiceInternal extends Component {
     const {
       description
     } = this.props;
-    return /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$2.description,
+    return /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$3.description,
       id: id
     }, description);
   }
@@ -423,29 +423,29 @@ class ChoiceInternal extends Component {
 
     const ChoiceCore = this.getChoiceCoreComponent();
     const ClickableBehavior = getClickableBehavior();
-    return /*#__PURE__*/createElement(UniqueIDProvider, {
+    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
       const descriptionId = description && ids.get("description");
-      return /*#__PURE__*/createElement(View, {
+      return /*#__PURE__*/React.createElement(View, {
         style: style,
         className: className
-      }, /*#__PURE__*/createElement(ClickableBehavior, {
+      }, /*#__PURE__*/React.createElement(ClickableBehavior, {
         disabled: coreProps.disabled,
         onClick: this.handleClick,
         role: variant
       }, (state, childrenProps) => {
-        return /*#__PURE__*/createElement(View, _extends({
-          style: styles$2.wrapper
+        return /*#__PURE__*/React.createElement(View, _extends({
+          style: styles$3.wrapper
         }, childrenProps, {
           // We are resetting the tabIndex=0 from handlers
           // because the ChoiceCore component will receive
           // focus on basis of it being an input element.
           tabIndex: -1
-        }), /*#__PURE__*/createElement(ChoiceCore, _extends({}, coreProps, state, {
+        }), /*#__PURE__*/React.createElement(ChoiceCore, _extends({}, coreProps, state, {
           "aria-describedby": descriptionId
-        })), /*#__PURE__*/createElement(Strut, {
+        })), /*#__PURE__*/React.createElement(Strut, {
           size: Spacing.xSmall_8
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
@@ -458,7 +458,7 @@ ChoiceInternal.defaultProps = {
   disabled: false,
   error: false
 };
-const styles$2 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   wrapper: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -490,9 +490,9 @@ const styles$2 = StyleSheet.create({
  * If you want a whole group of Checkbox[es] that are related, see the Choice
  * and CheckboxGroup components.
  */
-class Checkbox extends Component {
+class Checkbox extends React.Component {
   render() {
-    return /*#__PURE__*/createElement(ChoiceInternal, _extends({
+    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
   }
@@ -510,9 +510,9 @@ Checkbox.defaultProps = {
  * This component should not really be used by itself because radio buttons are
  * often grouped together. See RadioGroup.
  */
-class Radio extends Component {
+class Radio extends React.Component {
   render() {
-    return /*#__PURE__*/createElement(ChoiceInternal, _extends({
+    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
       variant: "radio"
     }, this.props));
   }
@@ -523,7 +523,7 @@ Radio.defaultProps = {
   error: false
 };
 
-const _excluded$3 = ["value", "variant"];
+const _excluded$1 = ["value", "variant"];
 
 /**
  * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
@@ -534,7 +534,7 @@ const _excluded$3 = ["value", "variant"];
  * If you wish to use just a single field, use Checkbox or Radio with the
  * optional label and description props.
  */
-class Choice extends Component {
+class Choice extends React.Component {
   getChoiceComponent(variant) {
     if (variant === "checkbox") {
       return Checkbox;
@@ -550,10 +550,10 @@ class Choice extends Component {
           {
       variant
     } = _this$props,
-          remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+          remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     const ChoiceComponent = this.getChoiceComponent(variant);
-    return /*#__PURE__*/createElement(ChoiceComponent, remainingProps);
+    return /*#__PURE__*/React.createElement(ChoiceComponent, remainingProps);
   }
 
 }
@@ -563,7 +563,7 @@ Choice.defaultProps = {
   onChange: () => {}
 };
 
-const styles$3 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   fieldset: {
     border: "none",
     padding: 0,
@@ -585,8 +585,8 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-const StyledFieldset = addStyle("fieldset");
-const StyledLegend = addStyle("legend");
+const StyledFieldset$1 = addStyle("fieldset");
+const StyledLegend$1 = addStyle("legend");
 /**
  * A checkbox group allows multiple selection. This component auto-populates
  * many props for its children Choice components. The Choice component is
@@ -594,7 +594,7 @@ const StyledLegend = addStyle("legend");
  * disabled.
  */
 
-class CheckboxGroup extends Component {
+class CheckboxGroup extends React.Component {
   handleChange(changedValue, originalCheckedState) {
     const {
       onChange,
@@ -621,33 +621,33 @@ class CheckboxGroup extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(StyledFieldset, {
+    return /*#__PURE__*/React.createElement(StyledFieldset$1, {
       "data-test-id": testId,
-      style: styles$3.fieldset
-    }, /*#__PURE__*/createElement(View, {
+      style: styles$2.fieldset
+    }, /*#__PURE__*/React.createElement(View, {
       style: style
-    }, typeof label === "string" ? /*#__PURE__*/createElement(StyledLegend, {
-      style: styles$3.legend
-    }, /*#__PURE__*/createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$3.description
-    }, description) : description && description, errorMessage && /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$3.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/createElement(Strut, {
+    }, typeof label === "string" ? /*#__PURE__*/React.createElement(StyledLegend$1, {
+      style: styles$2.legend
+    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.description
+    }, description) : description && description, errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.small_12
-    }), Children.map(children, (child, index) => {
+    }), React.Children.map(children, (child, index) => {
       const {
         style,
         value
       } = child.props;
       const checked = selectedValues.includes(value);
-      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/cloneElement(child, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
         id: `${groupName}-${value}`,
         key: value,
         onChange: () => this.handleChange(value, checked),
-        style: [index > 0 && styles$3.defaultLineGap, style],
+        style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "checkbox"
       }));
     })));
@@ -655,8 +655,8 @@ class CheckboxGroup extends Component {
 
 }
 
-const StyledFieldset$1 = addStyle("fieldset");
-const StyledLegend$1 = addStyle("legend");
+const StyledFieldset = addStyle("fieldset");
+const StyledLegend = addStyle("legend");
 /**
  * A radio group allows only single selection. Like CheckboxGroup, this
  * component auto-populates many props for its children Choice components. The
@@ -666,7 +666,7 @@ const StyledLegend$1 = addStyle("legend");
  * accessibility.
  */
 
-class RadioGroup extends Component {
+class RadioGroup extends React.Component {
   handleChange(changedValue) {
     this.props.onChange(changedValue);
   }
@@ -682,33 +682,33 @@ class RadioGroup extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(StyledFieldset$1, {
+    return /*#__PURE__*/React.createElement(StyledFieldset, {
       "data-test-id": testId,
-      style: styles$3.fieldset
-    }, /*#__PURE__*/createElement(View, {
+      style: styles$2.fieldset
+    }, /*#__PURE__*/React.createElement(View, {
       style: style
-    }, label && /*#__PURE__*/createElement(StyledLegend$1, {
-      style: styles$3.legend
-    }, /*#__PURE__*/createElement(LabelMedium, null, label)), description && /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$3.description
-    }, description), errorMessage && /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$3.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/createElement(Strut, {
+    }, label && /*#__PURE__*/React.createElement(StyledLegend, {
+      style: styles$2.legend
+    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)), description && /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.description
+    }, description), errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.small_12
-    }), Children.map(children, (child, index) => {
+    }), React.Children.map(children, (child, index) => {
       const {
         style,
         value
       } = child.props;
       const checked = selectedValue === value;
-      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/cloneElement(child, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
         id: `${groupName}-${value}`,
         key: value,
         onChange: () => this.handleChange(value),
-        style: [index > 0 && styles$3.defaultLineGap, style],
+        style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "radio"
       }));
     })));
@@ -716,14 +716,14 @@ class RadioGroup extends Component {
 
 }
 
-const _excluded$4 = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "required", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange"];
+const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "required", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange"];
 
 // TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
 
 /**
  * A TextField is an element used to accept a single line of text from the user.
  */
-class TextFieldInternal extends Component {
+class TextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -811,11 +811,11 @@ class TextFieldInternal extends Component {
       autoComplete,
       forwardedRef
     } = _this$props,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    return /*#__PURE__*/createElement("input", _extends({
-      className: css([styles$4.input, styles$6.LabelMedium, styles$4.default, // Prioritizes disabled, then focused, then error (if any)
-      disabled ? styles$4.disabled : this.state.focused ? [styles$4.focused, light && styles$4.defaultLight] : this.state.error && [styles$4.error, light && styles$4.errorLight], style && style]),
+    return /*#__PURE__*/React.createElement("input", _extends({
+      className: css([styles$1.input, styles$6.LabelMedium, styles$1.default, // Prioritizes disabled, then focused, then error (if any)
+      disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : this.state.error && [styles$1.error, light && styles$1.errorLight], style && style]),
       id: id,
       type: type,
       placeholder: placeholder,
@@ -840,7 +840,7 @@ TextFieldInternal.defaultProps = {
   disabled: false,
   light: false
 };
-const styles$4 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
@@ -890,7 +890,7 @@ const styles$4 = StyleSheet.create({
     boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`
   }
 });
-const TextField = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(TextFieldInternal, _extends({}, props, {
+const TextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(TextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));
 
@@ -898,19 +898,19 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createEle
  * A FieldHeading is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
-class FieldHeading extends Component {
+class FieldHeading extends React.Component {
   renderLabel() {
     const {
       label,
       id,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(Fragment, null, typeof label === "string" ? /*#__PURE__*/createElement(LabelMedium, {
-      style: styles$5.label,
+    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof label === "string" ? /*#__PURE__*/React.createElement(LabelMedium, {
+      style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label) : label, /*#__PURE__*/createElement(Strut, {
+    }, label) : label, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -925,10 +925,10 @@ class FieldHeading extends Component {
       return null;
     }
 
-    return /*#__PURE__*/createElement(Fragment, null, typeof description === "string" ? /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$5.description,
+    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles.description,
       testId: testId && `${testId}-description`
-    }, description) : description, /*#__PURE__*/createElement(Strut, {
+    }, description) : description, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -944,10 +944,10 @@ class FieldHeading extends Component {
       return null;
     }
 
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Strut, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.small_12
-    }), typeof error === "string" ? /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$5.error,
+    }), typeof error === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -959,15 +959,15 @@ class FieldHeading extends Component {
       field,
       style
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(View, {
       style: style
-    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/createElement(Strut, {
+    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
 
 }
-const styles$5 = StyleSheet.create({
+const styles = StyleSheet.create({
   label: {
     color: Color.offBlack
   },
@@ -985,7 +985,7 @@ const styles$5 = StyleSheet.create({
  * A LabeledTextField is an element used to accept a single line of text
  * from the user paired with a label, description, and error field elements.
  */
-class LabeledTextFieldInternal extends Component {
+class LabeledTextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
 
@@ -1054,14 +1054,14 @@ class LabeledTextFieldInternal extends Component {
       forwardedRef,
       ariaDescribedby
     } = this.props;
-    return /*#__PURE__*/createElement(IDProvider, {
+    return /*#__PURE__*/React.createElement(IDProvider, {
       id: id,
       scope: "labeled-text-field"
-    }, uniqueId => /*#__PURE__*/createElement(FieldHeading, {
+    }, uniqueId => /*#__PURE__*/React.createElement(FieldHeading, {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: /*#__PURE__*/createElement(TextField, {
+      field: /*#__PURE__*/React.createElement(TextField, {
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
@@ -1094,7 +1094,7 @@ LabeledTextFieldInternal.defaultProps = {
   disabled: false,
   light: false
 };
-const LabeledTextField = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(LabeledTextFieldInternal, _extends({}, props, {
+const LabeledTextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(LabeledTextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.2",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.0.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.24",
@@ -30,6 +30,5 @@
   },
   "devDependencies": {
     "wb-dev-build-settings": "^0.2.0"
-  },
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  }
 }

package/src/components/__tests__/checkbox-group.test.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import CheckboxGroup from "../checkbox-group.js";
 import Choice from "../choice.js";

package/src/components/__tests__/field-heading.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 import {StyleSheet} from "aphrodite";
 
 import FieldHeading from "../field-heading.js";

package/src/components/__tests__/labeled-text-field.test.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 import {render, screen} from "@testing-library/react";
 
 import {StyleSheet} from "aphrodite";

package/src/components/__tests__/radio-group.test.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import RadioGroup from "../radio-group.js";
 import Choice from "../choice.js";

package/src/components/__tests__/text-field.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import TextField from "../text-field.js";
 

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.