@khanacademy/wonder-blocks-form 3.1.10 → 3.1.12

package/dist/index.js

@@ -2,9 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var aphrodite = require('aphrodite');
 var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -17,30 +15,70 @@ var Icon = require('@khanacademy/wonder-blocks-icon');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  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 = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
 const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
 const {
   blue: blue$1,
@@ -55,37 +93,37 @@ 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"
 };
-class CheckboxCore extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = () => {
+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 = () => {
       return;
     };
+    return _this;
   }
-
-  render() {
+  var _proto = CheckboxCore.prototype;
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      checked,
-      disabled,
-      error,
-      groupName,
-      id,
-      testId,
-      hovered,
-      focused,
-      pressed
-    } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$4);
-
+      {
+        checked,
+        disabled,
+        error,
+        groupName,
+        id,
+        testId,
+        hovered,
+        focused,
+        pressed
+      } = _this$props,
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
     const stateStyles = _generateStyles$1(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 props = {
       "data-test-id": testId
     };
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends__default["default"]({}, sharedProps, {
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
       type: "checkbox",
       "aria-invalid": error,
       checked: checked,
@@ -100,9 +138,9 @@ class CheckboxCore extends React__namespace.Component {
       size: "small",
       style: sharedStyles$1.checkIcon
     }));
-  }
-
-}
+  };
+  return CheckboxCore;
+}(React__namespace.Component);
 const size$1 = 16;
 const sharedStyles$1 = aphrodite.StyleSheet.create({
   inputReset: {
@@ -150,17 +188,13 @@ const colors$1 = {
   }
 };
 const styles$5 = {};
-
 const _generateStyles$1 = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-
   if (styles$5[styleKey]) {
     return styles$5[styleKey];
   }
-
   const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
-
   if (checked) {
     newStyles = {
       default: {
@@ -193,7 +227,6 @@ const _generateStyles$1 = (checked, error) => {
       }
     };
   }
-
   styles$5[styleKey] = aphrodite.StyleSheet.create(newStyles);
   return styles$5[styleKey];
 };
@@ -209,37 +242,37 @@ const {
   offBlack50
 } = Color__default["default"];
 const StyledInput = wonderBlocksCore.addStyle("input");
-class RadioCore extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = () => {
+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 = () => {
       return;
     };
+    return _this;
   }
-
-  render() {
+  var _proto = RadioCore.prototype;
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      checked,
-      disabled,
-      error,
-      groupName,
-      id,
-      testId,
-      hovered,
-      focused,
-      pressed
-    } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$3);
-
+      {
+        checked,
+        disabled,
+        error,
+        groupName,
+        id,
+        testId,
+        hovered,
+        focused,
+        pressed
+      } = _this$props,
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     const stateStyles = _generateStyles(checked, error);
-
     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 React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput, _extends__default["default"]({}, sharedProps, {
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput, _extends({}, sharedProps, {
       type: "radio",
       "aria-invalid": error,
       checked: checked,
@@ -251,9 +284,9 @@ class RadioCore extends React__namespace.Component {
     }, props)), disabled && checked && React__namespace.createElement("span", {
       style: disabledChecked
     }));
-  }
-
-}
+  };
+  return RadioCore;
+}(React__namespace.Component);
 const size = 16;
 const disabledChecked = {
   position: "absolute",
@@ -306,17 +339,13 @@ const colors = {
   }
 };
 const styles$4 = {};
-
 const _generateStyles = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-
   if (styles$4[styleKey]) {
     return styles$4[styleKey];
   }
-
   const palette = error ? colors.error : colors.default;
   let newStyles = {};
-
   if (checked) {
     newStyles = {
       default: {
@@ -350,44 +379,41 @@ const _generateStyles = (checked, error) => {
       }
     };
   }
-
   styles$4[styleKey] = aphrodite.StyleSheet.create(newStyles);
   return styles$4[styleKey];
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
-class ChoiceInternal extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleLabelClick = event => {
+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 => {
       event.preventDefault();
     };
-
-    this.handleClick = () => {
+    _this.handleClick = () => {
       const {
         checked,
         onChange,
         variant
-      } = this.props;
-
+      } = _this.props;
       if (variant === "radio" && checked) {
         return;
       }
-
       onChange(!checked);
     };
+    return _this;
   }
-
-  getChoiceCoreComponent() {
+  var _proto = ChoiceInternal.prototype;
+  _proto.getChoiceCoreComponent = function getChoiceCoreComponent() {
     if (this.props.variant === "radio") {
       return RadioCore;
     } else {
       return CheckboxCore;
     }
-  }
-
-  getLabel() {
+  };
+  _proto.getLabel = function getLabel() {
     const {
       disabled,
       id,
@@ -399,9 +425,8 @@ class ChoiceInternal extends React__namespace.Component {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
-  }
-
-  getDescription(id) {
+  };
+  _proto.getDescription = function getDescription(id) {
     const {
       description
     } = this.props;
@@ -409,19 +434,17 @@ class ChoiceInternal extends React__namespace.Component {
       style: styles$3.description,
       id: id
     }, description);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      label,
-      description,
-      style,
-      className,
-      variant
-    } = _this$props,
-          coreProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
-
+      {
+        label,
+        description,
+        style,
+        className,
+        variant
+      } = _this$props,
+      coreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const ChoiceCore = this.getChoiceCoreComponent();
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior();
     return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
@@ -437,20 +460,20 @@ class ChoiceInternal extends React__namespace.Component {
         onClick: this.handleClick,
         role: variant
       }, (state, childrenProps) => {
-        return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
+        return React__namespace.createElement(wonderBlocksCore.View, _extends({
           style: styles$3.wrapper
         }, childrenProps, {
           tabIndex: -1
-        }), React__namespace.createElement(ChoiceCore, _extends__default["default"]({}, coreProps, state, {
+        }), React__namespace.createElement(ChoiceCore, _extends({}, coreProps, state, {
           "aria-describedby": descriptionId
         })), React__namespace.createElement(wonderBlocksLayout.Strut, {
           size: Spacing__default["default"].xSmall_8
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
     });
-  }
-
-}
+  };
+  return ChoiceInternal;
+}(React__namespace.Component);
 ChoiceInternal.defaultProps = {
   checked: false,
   disabled: false,
@@ -476,54 +499,67 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-class Checkbox extends React__namespace.Component {
-  render() {
-    return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({
+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() {
+    return React__namespace.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
-  }
-
-}
+  };
+  return Checkbox;
+}(React__namespace.Component);
 Checkbox.defaultProps = {
   disabled: false,
   error: false
 };
 
-class Radio extends React__namespace.Component {
-  render() {
-    return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({
+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() {
+    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"];
-class Choice extends React__namespace.Component {
-  getChoiceComponent(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) {
     if (variant === "checkbox") {
       return Checkbox;
     } else {
       return Radio;
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      variant
-    } = _this$props,
-          remainingProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
-
+      {
+        variant
+      } = _this$props,
+      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,
@@ -554,13 +590,17 @@ const styles$2 = aphrodite.StyleSheet.create({
 
 const StyledFieldset$1 = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend$1 = wonderBlocksCore.addStyle("legend");
-class CheckboxGroup extends React__namespace.Component {
-  handleChange(changedValue, originalCheckedState) {
+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) {
     const {
       onChange,
       selectedValues
     } = this.props;
-
     if (originalCheckedState) {
       const index = selectedValues.indexOf(changedValue);
       const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
@@ -568,9 +608,8 @@ class CheckboxGroup extends React__namespace.Component {
     } else {
       onChange([].concat(selectedValues, [changedValue]));
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       children,
       label,
@@ -612,18 +651,22 @@ class CheckboxGroup extends React__namespace.Component {
         variant: "checkbox"
       });
     })));
-  }
-
-}
+  };
+  return CheckboxGroup;
+}(React__namespace.Component);
 
 const StyledFieldset = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend = wonderBlocksCore.addStyle("legend");
-class RadioGroup extends React__namespace.Component {
-  handleChange(changedValue) {
-    this.props.onChange(changedValue);
+let RadioGroup = function (_React$Component) {
+  _inheritsLoose(RadioGroup, _React$Component);
+  function RadioGroup() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-  render() {
+  var _proto = RadioGroup.prototype;
+  _proto.handleChange = function handleChange(changedValue) {
+    this.props.onChange(changedValue);
+  };
+  _proto.render = function render() {
     const {
       children,
       label,
@@ -665,31 +708,30 @@ class RadioGroup extends React__namespace.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.";
-
-class TextField extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
+let TextField = function (_React$Component) {
+  _inheritsLoose(TextField, _React$Component);
+  function TextField(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _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) {
@@ -699,7 +741,7 @@ class TextField extends React__namespace.Component {
       } else if (required) {
         const requiredString = typeof required === "string" ? required : defaultErrorMessage;
         const maybeError = newValue ? null : requiredString;
-        this.setState({
+        _this.setState({
           error: maybeError
         }, () => {
           if (onValidate) {
@@ -708,21 +750,19 @@ class TextField extends React__namespace.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) {
@@ -730,12 +770,11 @@ class TextField extends React__namespace.Component {
         }
       });
     };
-
-    this.handleBlur = event => {
+    _this.handleBlur = event => {
       const {
         onBlur
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -743,37 +782,35 @@ class TextField extends React__namespace.Component {
         }
       });
     };
-
     if (props.validate && props.value !== "") {
-      this.state.error = props.validate(props.value) || null;
+      _this.state.error = props.validate(props.value) || null;
     }
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = TextField.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this.props.value !== "") {
       this.maybeValidate(this.props.value);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const _this$props = this.props,
-          {
-      id,
-      type,
-      value,
-      disabled,
-      onKeyDown,
-      placeholder,
-      light,
-      style,
-      testId,
-      readOnly,
-      autoComplete,
-      forwardedRef
-    } = _this$props,
-          otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
-
-    return React__namespace.createElement("input", _extends__default["default"]({
+      {
+        id,
+        type,
+        value,
+        disabled,
+        onKeyDown,
+        placeholder,
+        light,
+        style,
+        testId,
+        readOnly,
+        autoComplete,
+        forwardedRef
+      } = _this$props,
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+    return React__namespace.createElement("input", _extends({
       className: aphrodite.css([styles$1.input, wonderBlocksTypography.styles.LabelMedium, styles$1.default, 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,
@@ -789,10 +826,9 @@ class TextField extends React__namespace.Component {
       autoComplete: autoComplete,
       ref: forwardedRef
     }, otherProps));
-  }
-
-}
-
+  };
+  return TextField;
+}(React__namespace.Component);
 TextField.defaultProps = {
   type: "text",
   disabled: false,
@@ -848,13 +884,18 @@ const styles$1 = aphrodite.StyleSheet.create({
     boxShadow: `0px 0px 0px 1px ${Color__default["default"].red}, 0px 0px 0px 2px ${Color__default["default"].white}`
   }
 });
-var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
+var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends({}, props, {
   forwardedRef: ref
 })));
 
 const StyledSpan = wonderBlocksCore.addStyle("span");
-class FieldHeading extends React__namespace.Component {
-  renderLabel() {
+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() {
     const {
       label,
       id,
@@ -873,37 +914,31 @@ class FieldHeading extends React__namespace.Component {
     }, label, required && requiredIcon), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: Spacing__default["default"].xxxSmall_4
     }));
-  }
-
-  maybeRenderDescription() {
+  };
+  _proto.maybeRenderDescription = function maybeRenderDescription() {
     const {
       description,
       testId
     } = this.props;
-
     if (!description) {
       return null;
     }
-
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       style: styles.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: Spacing__default["default"].xxxSmall_4
     }));
-  }
-
-  maybeRenderError() {
+  };
+  _proto.maybeRenderError = function maybeRenderError() {
     const {
       error,
       id,
       testId
     } = this.props;
-
     if (!error) {
       return null;
     }
-
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: Spacing__default["default"].small_12
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
@@ -912,9 +947,8 @@ class FieldHeading extends React__namespace.Component {
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
     }, error));
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       field,
       style
@@ -924,9 +958,9 @@ class FieldHeading extends React__namespace.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
@@ -942,15 +976,16 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-class LabeledTextField extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleValidate = errorMessage => {
+let LabeledTextField = function (_React$Component) {
+  _inheritsLoose(LabeledTextField, _React$Component);
+  function LabeledTextField(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.handleValidate = errorMessage => {
       const {
         onValidate
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         error: errorMessage
       }, () => {
         if (onValidate) {
@@ -958,12 +993,11 @@ class LabeledTextField extends React__namespace.Component {
         }
       });
     };
-
-    this.handleFocus = event => {
+    _this.handleFocus = event => {
       const {
         onFocus
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         focused: true
       }, () => {
         if (onFocus) {
@@ -971,12 +1005,11 @@ class LabeledTextField extends React__namespace.Component {
         }
       });
     };
-
-    this.handleBlur = event => {
+    _this.handleBlur = event => {
       const {
         onBlur
-      } = this.props;
-      this.setState({
+      } = _this.props;
+      _this.setState({
         focused: false
       }, () => {
         if (onBlur) {
@@ -984,14 +1017,14 @@ class LabeledTextField extends React__namespace.Component {
         }
       });
     };
-
-    this.state = {
+    _this.state = {
       error: null,
       focused: false
     };
+    return _this;
   }
-
-  render() {
+  var _proto = LabeledTextField.prototype;
+  _proto.render = function render() {
     const {
       id,
       type,
@@ -1046,16 +1079,15 @@ class LabeledTextField extends React__namespace.Component {
       required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
-  }
-
-}
-
+  };
+  return LabeledTextField;
+}(React__namespace.Component);
 LabeledTextField.defaultProps = {
   type: "text",
   disabled: false,
   light: false
 };
-var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, props, {
+var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends({}, props, {
   forwardedRef: ref
 })));