@khanacademy/wonder-blocks-form 4.0.5 → 4.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.0.6
+
+### Patch Changes
+
+-   c20f48f3: Don't transpile classes when building bundles
+-   Updated dependencies [c20f48f3]
+    -   @khanacademy/wonder-blocks-clickable@3.0.6
+    -   @khanacademy/wonder-blocks-core@5.0.4
+    -   @khanacademy/wonder-blocks-icon@2.0.6
+    -   @khanacademy/wonder-blocks-layout@2.0.6
+    -   @khanacademy/wonder-blocks-typography@2.0.6
+
 ## 4.0.5
 
 ### Patch Changes

package/dist/es/index.js

@@ -23,20 +23,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -64,18 +50,14 @@ 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"
 };
-let CheckboxCore = function (_React$Component) {
-  _inheritsLoose(CheckboxCore, _React$Component);
-  function CheckboxCore(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.handleChange = () => {
+class CheckboxCore extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleChange = () => {
       return;
     };
-    return _this;
   }
-  var _proto = CheckboxCore.prototype;
-  _proto.render = function render() {
+  render() {
     const _this$props = this.props,
       {
         checked,
@@ -109,9 +91,8 @@ let CheckboxCore = function (_React$Component) {
       size: "small",
       style: sharedStyles$1.checkIcon
     }));
-  };
-  return CheckboxCore;
-}(React.Component);
+  }
+}
 const size$1 = 16;
 const sharedStyles$1 = StyleSheet.create({
   inputReset: {
@@ -213,18 +194,14 @@ const {
   offBlack50
 } = Color;
 const StyledInput = addStyle("input");
-let RadioCore = function (_React$Component) {
-  _inheritsLoose(RadioCore, _React$Component);
-  function RadioCore(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.handleChange = () => {
+class RadioCore extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleChange = () => {
       return;
     };
-    return _this;
   }
-  var _proto = RadioCore.prototype;
-  _proto.render = function render() {
+  render() {
     const _this$props = this.props,
       {
         checked,
@@ -255,9 +232,8 @@ let RadioCore = function (_React$Component) {
     }, props)), disabled && checked && React.createElement("span", {
       style: disabledChecked
     }));
-  };
-  return RadioCore;
-}(React.Component);
+  }
+}
 const size = 16;
 const disabledChecked = {
   position: "absolute",
@@ -355,36 +331,32 @@ const _generateStyles = (checked, error) => {
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
-let ChoiceInternal = function (_React$Component) {
-  _inheritsLoose(ChoiceInternal, _React$Component);
-  function ChoiceInternal(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.handleLabelClick = event => {
+class ChoiceInternal extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleLabelClick = event => {
       event.preventDefault();
     };
-    _this.handleClick = () => {
+    this.handleClick = () => {
       const {
         checked,
         onChange,
         variant
-      } = _this.props;
+      } = this.props;
       if (variant === "radio" && checked) {
         return;
       }
       onChange(!checked);
     };
-    return _this;
   }
-  var _proto = ChoiceInternal.prototype;
-  _proto.getChoiceCoreComponent = function getChoiceCoreComponent() {
+  getChoiceCoreComponent() {
     if (this.props.variant === "radio") {
       return RadioCore;
     } else {
       return CheckboxCore;
     }
-  };
-  _proto.getLabel = function getLabel() {
+  }
+  getLabel() {
     const {
       disabled,
       id,
@@ -396,8 +368,8 @@ let ChoiceInternal = function (_React$Component) {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
-  };
-  _proto.getDescription = function getDescription(id) {
+  }
+  getDescription(id) {
     const {
       description
     } = this.props;
@@ -405,8 +377,8 @@ let ChoiceInternal = function (_React$Component) {
       style: styles$3.description,
       id: id
     }, description);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const _this$props = this.props,
       {
         label,
@@ -442,9 +414,8 @@ let ChoiceInternal = function (_React$Component) {
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
     });
-  };
-  return ChoiceInternal;
-}(React.Component);
+  }
+}
 ChoiceInternal.defaultProps = {
   checked: false,
   disabled: false,
@@ -470,57 +441,40 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-let Checkbox = function (_React$Component) {
-  _inheritsLoose(Checkbox, _React$Component);
-  function Checkbox() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = Checkbox.prototype;
-  _proto.render = function render() {
+class Checkbox extends React.Component {
+  render() {
     return React.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
-  };
-  return Checkbox;
-}(React.Component);
+  }
+}
 Checkbox.defaultProps = {
   disabled: false,
   error: false
 };
 
-let Radio = function (_React$Component) {
-  _inheritsLoose(Radio, _React$Component);
-  function Radio() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = Radio.prototype;
-  _proto.render = function render() {
+class Radio extends React.Component {
+  render() {
     return React.createElement(ChoiceInternal, _extends({
       variant: "radio"
     }, this.props));
-  };
-  return Radio;
-}(React.Component);
+  }
+}
 Radio.defaultProps = {
   disabled: false,
   error: false
 };
 
 const _excluded$1 = ["value", "variant"];
-let Choice = function (_React$Component) {
-  _inheritsLoose(Choice, _React$Component);
-  function Choice() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = Choice.prototype;
-  _proto.getChoiceComponent = function getChoiceComponent(variant) {
+class Choice extends React.Component {
+  getChoiceComponent(variant) {
     if (variant === "checkbox") {
       return Checkbox;
     } else {
       return Radio;
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const _this$props = this.props,
       {
         variant
@@ -528,9 +482,8 @@ let Choice = function (_React$Component) {
       remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const ChoiceComponent = this.getChoiceComponent(variant);
     return React.createElement(ChoiceComponent, remainingProps);
-  };
-  return Choice;
-}(React.Component);
+  }
+}
 Choice.defaultProps = {
   checked: false,
   disabled: false,
@@ -561,26 +514,21 @@ const styles$2 = StyleSheet.create({
 
 const StyledFieldset$1 = addStyle("fieldset");
 const StyledLegend$1 = addStyle("legend");
-let CheckboxGroup = function (_React$Component) {
-  _inheritsLoose(CheckboxGroup, _React$Component);
-  function CheckboxGroup() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = CheckboxGroup.prototype;
-  _proto.handleChange = function handleChange(changedValue, originalCheckedState) {
+class CheckboxGroup extends React.Component {
+  handleChange(changedValue, originalCheckedState) {
     const {
       onChange,
       selectedValues
     } = this.props;
     if (originalCheckedState) {
       const index = selectedValues.indexOf(changedValue);
-      const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
+      const updatedSelection = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
       onChange(updatedSelection);
     } else {
-      onChange([].concat(selectedValues, [changedValue]));
+      onChange([...selectedValues, changedValue]);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       label,
@@ -622,22 +570,16 @@ let CheckboxGroup = function (_React$Component) {
         variant: "checkbox"
       });
     })));
-  };
-  return CheckboxGroup;
-}(React.Component);
+  }
+}
 
 const StyledFieldset = addStyle("fieldset");
 const StyledLegend = addStyle("legend");
-let RadioGroup = function (_React$Component) {
-  _inheritsLoose(RadioGroup, _React$Component);
-  function RadioGroup() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = RadioGroup.prototype;
-  _proto.handleChange = function handleChange(changedValue) {
+class RadioGroup extends React.Component {
+  handleChange(changedValue) {
     this.props.onChange(changedValue);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       label,
@@ -679,30 +621,27 @@ let RadioGroup = function (_React$Component) {
         variant: "radio"
       });
     })));
-  };
-  return RadioGroup;
-}(React.Component);
+  }
+}
 
 const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
-let TextField = function (_React$Component) {
-  _inheritsLoose(TextField, _React$Component);
-  function TextField(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
+class TextField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       error: null,
       focused: false
     };
-    _this.maybeValidate = newValue => {
+    this.maybeValidate = newValue => {
       const {
         validate,
         onValidate,
         required
-      } = _this.props;
+      } = this.props;
       if (validate) {
         const maybeError = validate(newValue) || null;
-        _this.setState({
+        this.setState({
           error: maybeError
         }, () => {
           if (onValidate) {
@@ -712,7 +651,7 @@ let TextField = function (_React$Component) {
       } else if (required) {
         const requiredString = typeof required === "string" ? required : defaultErrorMessage;
         const maybeError = newValue ? null : requiredString;
-        _this.setState({
+        this.setState({
           error: maybeError
         }, () => {
           if (onValidate) {
@@ -721,19 +660,19 @@ let TextField = function (_React$Component) {
         });
       }
     };
-    _this.handleChange = event => {
+    this.handleChange = event => {
       const {
         onChange
-      } = _this.props;
+      } = this.props;
       const newValue = event.target.value;
-      _this.maybeValidate(newValue);
+      this.maybeValidate(newValue);
       onChange(newValue);
     };
-    _this.handleFocus = event => {
+    this.handleFocus = event => {
       const {
         onFocus
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: true
       }, () => {
         if (onFocus) {
@@ -741,11 +680,11 @@ let TextField = function (_React$Component) {
         }
       });
     };
-    _this.handleBlur = event => {
+    this.handleBlur = event => {
       const {
         onBlur
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -754,17 +693,15 @@ let TextField = function (_React$Component) {
       });
     };
     if (props.validate && props.value !== "") {
-      _this.state.error = props.validate(props.value) || null;
+      this.state.error = props.validate(props.value) || null;
     }
-    return _this;
   }
-  var _proto = TextField.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     if (this.props.value !== "") {
       this.maybeValidate(this.props.value);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const _this$props = this.props,
       {
         id,
@@ -797,9 +734,8 @@ let TextField = function (_React$Component) {
       autoComplete: autoComplete,
       ref: forwardedRef
     }, otherProps));
-  };
-  return TextField;
-}(React.Component);
+  }
+}
 TextField.defaultProps = {
   type: "text",
   disabled: false,
@@ -860,13 +796,8 @@ var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField
 })));
 
 const StyledSpan = addStyle("span");
-let FieldHeading = function (_React$Component) {
-  _inheritsLoose(FieldHeading, _React$Component);
-  function FieldHeading() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = FieldHeading.prototype;
-  _proto.renderLabel = function renderLabel() {
+class FieldHeading extends React.Component {
+  renderLabel() {
     const {
       label,
       id,
@@ -885,8 +816,8 @@ let FieldHeading = function (_React$Component) {
     }, label, required && requiredIcon), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
-  };
-  _proto.maybeRenderDescription = function maybeRenderDescription() {
+  }
+  maybeRenderDescription() {
     const {
       description,
       testId
@@ -900,8 +831,8 @@ let FieldHeading = function (_React$Component) {
     }, description), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
-  };
-  _proto.maybeRenderError = function maybeRenderError() {
+  }
+  maybeRenderError() {
     const {
       error,
       id,
@@ -918,8 +849,8 @@ let FieldHeading = function (_React$Component) {
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
     }, error));
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       field,
       style
@@ -929,9 +860,8 @@ let FieldHeading = function (_React$Component) {
     }, this.renderLabel(), this.maybeRenderDescription(), React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), field, this.maybeRenderError());
-  };
-  return FieldHeading;
-}(React.Component);
+  }
+}
 const styles = StyleSheet.create({
   label: {
     color: Color.offBlack
@@ -947,16 +877,14 @@ const styles = StyleSheet.create({
   }
 });
 
-let LabeledTextField = function (_React$Component) {
-  _inheritsLoose(LabeledTextField, _React$Component);
-  function LabeledTextField(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.handleValidate = errorMessage => {
+class LabeledTextField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleValidate = errorMessage => {
       const {
         onValidate
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         error: errorMessage
       }, () => {
         if (onValidate) {
@@ -964,11 +892,11 @@ let LabeledTextField = function (_React$Component) {
         }
       });
     };
-    _this.handleFocus = event => {
+    this.handleFocus = event => {
       const {
         onFocus
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: true
       }, () => {
         if (onFocus) {
@@ -976,11 +904,11 @@ let LabeledTextField = function (_React$Component) {
         }
       });
     };
-    _this.handleBlur = event => {
+    this.handleBlur = event => {
       const {
         onBlur
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -988,14 +916,12 @@ let LabeledTextField = function (_React$Component) {
         }
       });
     };
-    _this.state = {
+    this.state = {
       error: null,
       focused: false
     };
-    return _this;
   }
-  var _proto = LabeledTextField.prototype;
-  _proto.render = function render() {
+  render() {
     const {
       id,
       type,
@@ -1050,9 +976,8 @@ let LabeledTextField = function (_React$Component) {
       required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
-  };
-  return LabeledTextField;
-}(React.Component);
+  }
+}
 LabeledTextField.defaultProps = {
   type: "text",
   disabled: false,

package/dist/index.js

@@ -52,20 +52,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -93,18 +79,14 @@ const StyledInput$1 = wonderBlocksCore.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"
 };
-let CheckboxCore = function (_React$Component) {
-  _inheritsLoose(CheckboxCore, _React$Component);
-  function CheckboxCore(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.handleChange = () => {
+class CheckboxCore extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleChange = () => {
       return;
     };
-    return _this;
   }
-  var _proto = CheckboxCore.prototype;
-  _proto.render = function render() {
+  render() {
     const _this$props = this.props,
       {
         checked,
@@ -138,9 +120,8 @@ let CheckboxCore = function (_React$Component) {
       size: "small",
       style: sharedStyles$1.checkIcon
     }));
-  };
-  return CheckboxCore;
-}(React__namespace.Component);
+  }
+}
 const size$1 = 16;
 const sharedStyles$1 = aphrodite.StyleSheet.create({
   inputReset: {
@@ -242,18 +223,14 @@ const {
   offBlack50
 } = Color__default["default"];
 const StyledInput = wonderBlocksCore.addStyle("input");
-let RadioCore = function (_React$Component) {
-  _inheritsLoose(RadioCore, _React$Component);
-  function RadioCore(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.handleChange = () => {
+class RadioCore extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleChange = () => {
       return;
     };
-    return _this;
   }
-  var _proto = RadioCore.prototype;
-  _proto.render = function render() {
+  render() {
     const _this$props = this.props,
       {
         checked,
@@ -284,9 +261,8 @@ let RadioCore = function (_React$Component) {
     }, props)), disabled && checked && React__namespace.createElement("span", {
       style: disabledChecked
     }));
-  };
-  return RadioCore;
-}(React__namespace.Component);
+  }
+}
 const size = 16;
 const disabledChecked = {
   position: "absolute",
@@ -384,36 +360,32 @@ const _generateStyles = (checked, error) => {
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
-let ChoiceInternal = function (_React$Component) {
-  _inheritsLoose(ChoiceInternal, _React$Component);
-  function ChoiceInternal(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.handleLabelClick = event => {
+class ChoiceInternal extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleLabelClick = event => {
       event.preventDefault();
     };
-    _this.handleClick = () => {
+    this.handleClick = () => {
       const {
         checked,
         onChange,
         variant
-      } = _this.props;
+      } = this.props;
       if (variant === "radio" && checked) {
         return;
       }
       onChange(!checked);
     };
-    return _this;
   }
-  var _proto = ChoiceInternal.prototype;
-  _proto.getChoiceCoreComponent = function getChoiceCoreComponent() {
+  getChoiceCoreComponent() {
     if (this.props.variant === "radio") {
       return RadioCore;
     } else {
       return CheckboxCore;
     }
-  };
-  _proto.getLabel = function getLabel() {
+  }
+  getLabel() {
     const {
       disabled,
       id,
@@ -425,8 +397,8 @@ let ChoiceInternal = function (_React$Component) {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
-  };
-  _proto.getDescription = function getDescription(id) {
+  }
+  getDescription(id) {
     const {
       description
     } = this.props;
@@ -434,8 +406,8 @@ let ChoiceInternal = function (_React$Component) {
       style: styles$3.description,
       id: id
     }, description);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const _this$props = this.props,
       {
         label,
@@ -471,9 +443,8 @@ let ChoiceInternal = function (_React$Component) {
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
     });
-  };
-  return ChoiceInternal;
-}(React__namespace.Component);
+  }
+}
 ChoiceInternal.defaultProps = {
   checked: false,
   disabled: false,
@@ -499,57 +470,40 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-let Checkbox = function (_React$Component) {
-  _inheritsLoose(Checkbox, _React$Component);
-  function Checkbox() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = Checkbox.prototype;
-  _proto.render = function render() {
+class Checkbox extends React__namespace.Component {
+  render() {
     return React__namespace.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
-  };
-  return Checkbox;
-}(React__namespace.Component);
+  }
+}
 Checkbox.defaultProps = {
   disabled: false,
   error: false
 };
 
-let Radio = function (_React$Component) {
-  _inheritsLoose(Radio, _React$Component);
-  function Radio() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = Radio.prototype;
-  _proto.render = function render() {
+class Radio extends React__namespace.Component {
+  render() {
     return React__namespace.createElement(ChoiceInternal, _extends({
       variant: "radio"
     }, this.props));
-  };
-  return Radio;
-}(React__namespace.Component);
+  }
+}
 Radio.defaultProps = {
   disabled: false,
   error: false
 };
 
 const _excluded$1 = ["value", "variant"];
-let Choice = function (_React$Component) {
-  _inheritsLoose(Choice, _React$Component);
-  function Choice() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = Choice.prototype;
-  _proto.getChoiceComponent = function getChoiceComponent(variant) {
+class Choice extends React__namespace.Component {
+  getChoiceComponent(variant) {
     if (variant === "checkbox") {
       return Checkbox;
     } else {
       return Radio;
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const _this$props = this.props,
       {
         variant
@@ -557,9 +511,8 @@ let Choice = function (_React$Component) {
       remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const ChoiceComponent = this.getChoiceComponent(variant);
     return React__namespace.createElement(ChoiceComponent, remainingProps);
-  };
-  return Choice;
-}(React__namespace.Component);
+  }
+}
 Choice.defaultProps = {
   checked: false,
   disabled: false,
@@ -590,26 +543,21 @@ const styles$2 = aphrodite.StyleSheet.create({
 
 const StyledFieldset$1 = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend$1 = wonderBlocksCore.addStyle("legend");
-let CheckboxGroup = function (_React$Component) {
-  _inheritsLoose(CheckboxGroup, _React$Component);
-  function CheckboxGroup() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = CheckboxGroup.prototype;
-  _proto.handleChange = function handleChange(changedValue, originalCheckedState) {
+class CheckboxGroup extends React__namespace.Component {
+  handleChange(changedValue, originalCheckedState) {
     const {
       onChange,
       selectedValues
     } = this.props;
     if (originalCheckedState) {
       const index = selectedValues.indexOf(changedValue);
-      const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
+      const updatedSelection = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
       onChange(updatedSelection);
     } else {
-      onChange([].concat(selectedValues, [changedValue]));
+      onChange([...selectedValues, changedValue]);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       label,
@@ -651,22 +599,16 @@ let CheckboxGroup = function (_React$Component) {
         variant: "checkbox"
       });
     })));
-  };
-  return CheckboxGroup;
-}(React__namespace.Component);
+  }
+}
 
 const StyledFieldset = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend = wonderBlocksCore.addStyle("legend");
-let RadioGroup = function (_React$Component) {
-  _inheritsLoose(RadioGroup, _React$Component);
-  function RadioGroup() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = RadioGroup.prototype;
-  _proto.handleChange = function handleChange(changedValue) {
+class RadioGroup extends React__namespace.Component {
+  handleChange(changedValue) {
     this.props.onChange(changedValue);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       label,
@@ -708,30 +650,27 @@ let RadioGroup = function (_React$Component) {
         variant: "radio"
       });
     })));
-  };
-  return RadioGroup;
-}(React__namespace.Component);
+  }
+}
 
 const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
-let TextField = function (_React$Component) {
-  _inheritsLoose(TextField, _React$Component);
-  function TextField(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
+class TextField extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       error: null,
       focused: false
     };
-    _this.maybeValidate = newValue => {
+    this.maybeValidate = newValue => {
       const {
         validate,
         onValidate,
         required
-      } = _this.props;
+      } = this.props;
       if (validate) {
         const maybeError = validate(newValue) || null;
-        _this.setState({
+        this.setState({
           error: maybeError
         }, () => {
           if (onValidate) {
@@ -741,7 +680,7 @@ let TextField = function (_React$Component) {
       } else if (required) {
         const requiredString = typeof required === "string" ? required : defaultErrorMessage;
         const maybeError = newValue ? null : requiredString;
-        _this.setState({
+        this.setState({
           error: maybeError
         }, () => {
           if (onValidate) {
@@ -750,19 +689,19 @@ let TextField = function (_React$Component) {
         });
       }
     };
-    _this.handleChange = event => {
+    this.handleChange = event => {
       const {
         onChange
-      } = _this.props;
+      } = this.props;
       const newValue = event.target.value;
-      _this.maybeValidate(newValue);
+      this.maybeValidate(newValue);
       onChange(newValue);
     };
-    _this.handleFocus = event => {
+    this.handleFocus = event => {
       const {
         onFocus
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: true
       }, () => {
         if (onFocus) {
@@ -770,11 +709,11 @@ let TextField = function (_React$Component) {
         }
       });
     };
-    _this.handleBlur = event => {
+    this.handleBlur = event => {
       const {
         onBlur
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -783,17 +722,15 @@ let TextField = function (_React$Component) {
       });
     };
     if (props.validate && props.value !== "") {
-      _this.state.error = props.validate(props.value) || null;
+      this.state.error = props.validate(props.value) || null;
     }
-    return _this;
   }
-  var _proto = TextField.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     if (this.props.value !== "") {
       this.maybeValidate(this.props.value);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const _this$props = this.props,
       {
         id,
@@ -826,9 +763,8 @@ let TextField = function (_React$Component) {
       autoComplete: autoComplete,
       ref: forwardedRef
     }, otherProps));
-  };
-  return TextField;
-}(React__namespace.Component);
+  }
+}
 TextField.defaultProps = {
   type: "text",
   disabled: false,
@@ -889,13 +825,8 @@ var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.c
 })));
 
 const StyledSpan = wonderBlocksCore.addStyle("span");
-let FieldHeading = function (_React$Component) {
-  _inheritsLoose(FieldHeading, _React$Component);
-  function FieldHeading() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = FieldHeading.prototype;
-  _proto.renderLabel = function renderLabel() {
+class FieldHeading extends React__namespace.Component {
+  renderLabel() {
     const {
       label,
       id,
@@ -914,8 +845,8 @@ let FieldHeading = function (_React$Component) {
     }, label, required && requiredIcon), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: Spacing__default["default"].xxxSmall_4
     }));
-  };
-  _proto.maybeRenderDescription = function maybeRenderDescription() {
+  }
+  maybeRenderDescription() {
     const {
       description,
       testId
@@ -929,8 +860,8 @@ let FieldHeading = function (_React$Component) {
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: Spacing__default["default"].xxxSmall_4
     }));
-  };
-  _proto.maybeRenderError = function maybeRenderError() {
+  }
+  maybeRenderError() {
     const {
       error,
       id,
@@ -947,8 +878,8 @@ let FieldHeading = function (_React$Component) {
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
     }, error));
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       field,
       style
@@ -958,9 +889,8 @@ let FieldHeading = function (_React$Component) {
     }, this.renderLabel(), this.maybeRenderDescription(), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: Spacing__default["default"].xSmall_8
     }), field, this.maybeRenderError());
-  };
-  return FieldHeading;
-}(React__namespace.Component);
+  }
+}
 const styles = aphrodite.StyleSheet.create({
   label: {
     color: Color__default["default"].offBlack
@@ -976,16 +906,14 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-let LabeledTextField = function (_React$Component) {
-  _inheritsLoose(LabeledTextField, _React$Component);
-  function LabeledTextField(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    _this.handleValidate = errorMessage => {
+class LabeledTextField extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+    this.handleValidate = errorMessage => {
       const {
         onValidate
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         error: errorMessage
       }, () => {
         if (onValidate) {
@@ -993,11 +921,11 @@ let LabeledTextField = function (_React$Component) {
         }
       });
     };
-    _this.handleFocus = event => {
+    this.handleFocus = event => {
       const {
         onFocus
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: true
       }, () => {
         if (onFocus) {
@@ -1005,11 +933,11 @@ let LabeledTextField = function (_React$Component) {
         }
       });
     };
-    _this.handleBlur = event => {
+    this.handleBlur = event => {
       const {
         onBlur
-      } = _this.props;
-      _this.setState({
+      } = this.props;
+      this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -1017,14 +945,12 @@ let LabeledTextField = function (_React$Component) {
         }
       });
     };
-    _this.state = {
+    this.state = {
       error: null,
       focused: false
     };
-    return _this;
   }
-  var _proto = LabeledTextField.prototype;
-  _proto.render = function render() {
+  render() {
     const {
       id,
       type,
@@ -1079,9 +1005,8 @@ let LabeledTextField = function (_React$Component) {
       required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
-  };
-  return LabeledTextField;
-}(React__namespace.Component);
+  }
+}
 LabeledTextField.defaultProps = {
   type: "text",
   disabled: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,19 +16,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.5",
+    "@khanacademy/wonder-blocks-clickable": "^3.0.6",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.0.3",
-    "@khanacademy/wonder-blocks-icon": "^2.0.5",
-    "@khanacademy/wonder-blocks-layout": "^2.0.5",
+    "@khanacademy/wonder-blocks-core": "^5.0.4",
+    "@khanacademy/wonder-blocks-icon": "^2.0.6",
+    "@khanacademy/wonder-blocks-layout": "^2.0.6",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.0.5"
+    "@khanacademy/wonder-blocks-typography": "^2.0.6"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.4"
+    "wb-dev-build-settings": "^0.9.5"
   }
 }