@khanacademy/wonder-blocks-form 2.2.1 → 2.2.2

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 21);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -119,33 +119,44 @@ module.exports = require("@khanacademy/wonder-blocks-typography");
 /* 5 */
 /***/ (function(module, exports) {
 
-function _extends() {
-  module.exports = _extends = Object.assign || 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];
-        }
-      }
-    }
+module.exports = require("aphrodite");
 
-    return target;
-  };
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
+"use strict";
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__);
 
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
 
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
 
-module.exports = require("aphrodite");
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
+  fieldset: {
+    border: "none",
+    padding: 0,
+    margin: 0
+  },
+  legend: {
+    padding: 0
+  },
+  description: {
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxxSmall_4,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default.a.offBlack64
+  },
+  error: {
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxxSmall_4,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default.a.red
+  },
+  defaultLineGap: {
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xSmall_8
+  }
+});
+/* harmony default export */ __webpack_exports__["a"] = (styles);
 
 /***/ }),
 /* 7 */
@@ -155,443 +166,308 @@ module.exports = require("@khanacademy/wonder-blocks-layout");
 
 /***/ }),
 /* 8 */
-/***/ (function(module, exports) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Checkbox; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+function _extends() { _extends = Object.assign || 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 _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
+ // Keep synced with ChoiceComponentProps in ../util/types.js
 
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+/**
+ * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
+ * label and description props.
+ *
+ * If you want a whole group of Checkbox[es] that are related, see the Choice
+ * and CheckboxGroup components.
+ */
+class Checkbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"], _extends({
+      variant: "checkbox"
+    }, this.props));
   }
 
-  return target;
 }
-
-module.exports = _objectWithoutPropertiesLoose;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
+Checkbox.defaultProps = {
+  disabled: false,
+  error: false
+};
 
 /***/ }),
 /* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-clickable");
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon");
-
-/***/ }),
-/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Radio; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+function _extends() { _extends = Object.assign || 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); }
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "Checkbox", function() { return /* reexport */ checkbox_Checkbox; });
-__webpack_require__.d(__webpack_exports__, "Radio", function() { return /* reexport */ radio_Radio; });
-__webpack_require__.d(__webpack_exports__, "Choice", function() { return /* reexport */ choice_Choice; });
-__webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return /* reexport */ checkbox_group_CheckboxGroup; });
-__webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return /* reexport */ radio_group_RadioGroup; });
-__webpack_require__.d(__webpack_exports__, "TextField", function() { return /* reexport */ text_field; });
-__webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return /* reexport */ labeled_text_field; });
 
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(5);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
+ // Keep synced with ChoiceComponentProps in ../util/types.js
 
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var objectWithoutPropertiesLoose = __webpack_require__(8);
-var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose);
+/**
+ * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
+ * optionally take label and description props.
+ *
+ * This component should not really be used by itself because radio buttons are
+ * often grouped together. See RadioGroup.
+ */
+class Radio extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"], _extends({
+      variant: "radio"
+    }, this.props));
+  }
 
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(6);
+}
+Radio.defaultProps = {
+  disabled: false,
+  error: false
+};
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(1);
-var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(2);
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
+function _extends() { _extends = Object.assign || 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); }
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
-var wonder_blocks_clickable_ = __webpack_require__(9);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-layout"
-var wonder_blocks_layout_ = __webpack_require__(7);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
-var wonder_blocks_spacing_ = __webpack_require__(3);
-var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
-var wonder_blocks_typography_ = __webpack_require__(4);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
-var wonder_blocks_icon_ = __webpack_require__(10);
-var wonder_blocks_icon_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/checkbox-core.js
 
+// TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
 
-const _excluded = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+/**
+ * A TextField is an element used to accept a single line of text from the user.
+ */
+class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      focused: false
+    };
 
+    this.maybeValidate = newValue => {
+      const {
+        validate,
+        onValidate
+      } = this.props;
 
+      if (validate) {
+        const maybeError = validate(newValue) || null;
+        this.setState({
+          error: maybeError
+        }, () => {
+          if (onValidate) {
+            onValidate(maybeError);
+          }
+        });
+      }
+    };
 
+    this.handleChange = event => {
+      const {
+        onChange
+      } = this.props;
+      const newValue = event.target.value;
+      this.maybeValidate(newValue);
+      onChange(newValue);
+    };
 
+    this.handleFocus = event => {
+      const {
+        onFocus
+      } = this.props;
+      this.setState({
+        focused: true
+      }, () => {
+        if (onFocus) {
+          onFocus(event);
+        }
+      });
+    };
 
-const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
-} = wonder_blocks_color_default.a;
-const StyledInput = Object(wonder_blocks_core_["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"
-};
-/**
- * The internal stateless ☑️ Checkbox
- */
+    this.handleBlur = event => {
+      const {
+        onBlur
+      } = this.props;
+      this.setState({
+        focused: false
+      }, () => {
+        if (onBlur) {
+          onBlur(event);
+        }
+      });
+    };
 
-class checkbox_core_CheckboxCore extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
+    if (props.validate) {
+      // Ensures error is updated on unmounted server-side renders
+      this.state.error = props.validate(props.value) || null;
+    }
+  }
 
-    this.handleChange = () => {
-      // Empty because change is handled by ClickableBehavior
-      return;
-    };
+  componentDidMount() {
+    this.maybeValidate(this.props.value);
   }
 
   render() {
-    const _this$props = this.props,
-          {
-      checked,
-      disabled,
-      error,
-      groupName,
+    const {
       id,
+      type,
+      value,
+      disabled,
+      onKeyDown,
+      placeholder,
+      required,
+      light,
+      style,
       testId,
-      hovered,
-      focused,
-      pressed
-    } = _this$props,
-          sharedProps = objectWithoutPropertiesLoose_default()(_this$props, _excluded);
-
-    const stateStyles = _generateStyles(checked, error);
+      readOnly,
+      autoComplete,
+      forwardedRef,
+      // The following props are being included here to avoid
+      // passing them down to the otherProps spread
+
+      /* eslint-disable no-unused-vars */
+      onFocus,
+      onBlur,
+      onValidate,
+      validate,
+      onChange,
 
-    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__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](StyledInput, extends_default()({}, sharedProps, {
-      type: "checkbox",
-      "aria-invalid": error,
-      checked: checked,
-      disabled: disabled,
+      /* eslint-enable no-unused-vars */
+      // Should only include Aria related props
+      ...otherProps
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", _extends({
+      className: Object(aphrodite__WEBPACK_IMPORTED_MODULE_1__["css"])([styles.input, _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["styles"].LabelMedium, styles.default, // Prioritizes disabled, then focused, then error (if any)
+      disabled ? styles.disabled : this.state.focused ? [styles.focused, light && styles.defaultLight] : this.state.error && [styles.error, light && styles.errorLight], style && style]),
       id: id,
-      name: groupName // Need to specify because this is a controlled React form
-      // component, but we handle the click via ClickableBehavior
-      ,
+      type: type,
+      placeholder: placeholder,
+      value: value,
+      disabled: disabled,
       onChange: this.handleChange,
-      style: defaultStyle
-    }, props)), checked && /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
-      color: disabled ? offBlack32 : white,
-      icon: checkboxCheck,
-      size: "small",
-      style: sharedStyles.checkIcon
-    }));
+      onKeyDown: onKeyDown,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      required: required,
+      "data-test-id": testId,
+      readOnly: readOnly,
+      autoComplete: autoComplete,
+      ref: forwardedRef
+    }, otherProps));
   }
 
 }
-const size = 16;
-const sharedStyles = external_aphrodite_["StyleSheet"].create({
-  // Reset the default styled input element
-  inputReset: {
-    appearance: "none",
-    WebkitAppearance: "none",
-    MozAppearance: "none"
-  },
-  default: {
-    height: size,
-    width: size,
-    minHeight: size,
-    minWidth: size,
+
+TextFieldInternal.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  input: {
+    width: "100%",
+    height: 40,
+    borderRadius: 4,
+    boxSizing: "border-box",
+    paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.medium_16,
     margin: 0,
     outline: "none",
-    boxSizing: "border-box",
-    borderStyle: "solid",
-    borderWidth: 1,
-    borderRadius: 3
+    boxShadow: "none"
   },
-  disabled: {
-    cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
-    borderWidth: 1
-  },
-  checkIcon: {
-    position: "absolute",
-    pointerEvents: "none"
-  }
-});
-const fadedBlue = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(blue, 0.16), white);
-const activeBlue = Object(wonder_blocks_color_["mix"])(offBlack32, blue);
-const fadedRed = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(red, 0.08), white);
-const activeRed = Object(wonder_blocks_color_["mix"])(offBlack32, red);
-const colors = {
-  default: {
-    faded: fadedBlue,
-    base: blue,
-    active: activeBlue
+  default: {
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white,
+    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack,
+    "::placeholder": {
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
+    }
   },
   error: {
-    faded: fadedRed,
-    base: red,
-    active: activeRed
-  }
-};
-const styles = {};
-
-const _generateStyles = (checked, error) => {
-  // "hash" the parameters
-  const styleKey = `${String(checked)}-${String(error)}`;
-
-  if (styles[styleKey]) {
-    return styles[styleKey];
-  }
-
-  const palette = error ? colors.error : colors.default;
-  let newStyles = {};
-
-  if (checked) {
-    newStyles = {
-      default: {
-        backgroundColor: palette.base,
-        borderWidth: 0
-      },
-      focus: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
-      },
-      active: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
-        background: palette.active
-      }
-    };
-  } else {
-    newStyles = {
-      default: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: error ? red : offBlack50
-      },
-      focus: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: palette.base,
-        borderWidth: 2
-      },
-      active: {
-        backgroundColor: palette.faded,
-        borderColor: error ? activeRed : blue,
-        borderWidth: 2
-      }
-    };
-  }
-
-  styles[styleKey] = external_aphrodite_["StyleSheet"].create(newStyles);
-  return styles[styleKey];
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/radio-core.js
-
-
-const radio_core_excluded = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
-
-
-
-
-const {
-  blue: radio_core_blue,
-  red: radio_core_red,
-  white: radio_core_white,
-  offWhite: radio_core_offWhite,
-  offBlack16: radio_core_offBlack16,
-  offBlack32: radio_core_offBlack32,
-  offBlack50: radio_core_offBlack50
-} = wonder_blocks_color_default.a;
-const radio_core_StyledInput = Object(wonder_blocks_core_["addStyle"])("input");
-/**
- * The internal stateless 🔘 Radio button
- */
-
-class radio_core_RadioCore extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = () => {
-      // Empty because change is handled by ClickableBehavior
-      return;
-    };
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      checked,
-      disabled,
-      error,
-      groupName,
-      id,
-      testId,
-      hovered,
-      focused,
-      pressed
-    } = _this$props,
-          sharedProps = objectWithoutPropertiesLoose_default()(_this$props, radio_core_excluded);
-
-    const stateStyles = radio_core_generateStyles(checked, error);
-
-    const defaultStyle = [radio_core_sharedStyles.inputReset, radio_core_sharedStyles.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && radio_core_sharedStyles.disabled];
-    const props = {
-      "data-test-id": testId
-    };
-    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](radio_core_StyledInput, extends_default()({}, sharedProps, {
-      type: "radio",
-      "aria-invalid": error,
-      checked: checked,
-      disabled: disabled,
-      id: id,
-      name: groupName // Need to specify because this is a controlled React form
-      // component, but we handle the click via ClickableBehavior
-      ,
-      onChange: this.handleChange,
-      style: defaultStyle
-    }, props)), disabled && checked && /*#__PURE__*/external_react_["createElement"]("span", {
-      style: disabledChecked
-    }));
-  }
-
-}
-const radio_core_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: radio_core_size / 4,
-  left: radio_core_size / 4,
-  height: radio_core_size / 2,
-  width: radio_core_size / 2,
-  borderRadius: "50%",
-  backgroundColor: radio_core_offBlack32
-};
-const radio_core_sharedStyles = external_aphrodite_["StyleSheet"].create({
-  // Reset the default styled input element
-  inputReset: {
-    appearance: "none",
-    WebkitAppearance: "none",
-    MozAppearance: "none"
-  },
-  default: {
-    height: radio_core_size,
-    width: radio_core_size,
-    minHeight: radio_core_size,
-    minWidth: radio_core_size,
-    margin: 0,
-    outline: "none",
-    boxSizing: "border-box",
-    borderStyle: "solid",
-    borderWidth: 1,
-    borderRadius: "50%"
+    background: `${Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.red, 0.06), _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white)}`,
+    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.red}`,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack,
+    "::placeholder": {
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
+    }
   },
   disabled: {
-    cursor: "auto",
-    backgroundColor: radio_core_offWhite,
-    borderColor: radio_core_offBlack16,
-    borderWidth: 1
-  }
-});
-const radio_core_fadedBlue = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(radio_core_blue, 0.16), radio_core_white);
-const radio_core_activeBlue = Object(wonder_blocks_color_["mix"])(radio_core_offBlack32, radio_core_blue);
-const radio_core_fadedRed = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(radio_core_red, 0.08), radio_core_white);
-const radio_core_activeRed = Object(wonder_blocks_color_["mix"])(radio_core_offBlack32, radio_core_red);
-const radio_core_colors = {
-  default: {
-    faded: radio_core_fadedBlue,
-    base: radio_core_blue,
-    active: radio_core_activeBlue
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offWhite,
+    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64,
+    "::placeholder": {
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack32
+    }
   },
-  error: {
-    faded: radio_core_fadedRed,
-    base: radio_core_red,
-    active: radio_core_activeRed
-  }
-};
-const radio_core_styles = {};
-
-const radio_core_generateStyles = (checked, error) => {
-  // "hash" the parameters
-  const styleKey = `${String(checked)}-${String(error)}`;
-
-  if (radio_core_styles[styleKey]) {
-    return radio_core_styles[styleKey];
-  }
-
-  const palette = error ? radio_core_colors.error : radio_core_colors.default;
-  let newStyles = {};
-
-  if (checked) {
-    newStyles = {
-      default: {
-        backgroundColor: radio_core_white,
-        borderColor: palette.base,
-        borderWidth: radio_core_size / 4
-      },
-      focus: {
-        boxShadow: `0 0 0 1px ${radio_core_white}, 0 0 0 3px ${palette.base}`
-      },
-      active: {
-        boxShadow: `0 0 0 1px ${radio_core_white}, 0 0 0 3px ${palette.active}`,
-        borderColor: palette.active
-      }
-    };
-  } else {
-    newStyles = {
-      default: {
-        backgroundColor: error ? radio_core_fadedRed : radio_core_white,
-        borderColor: error ? radio_core_red : radio_core_offBlack50
-      },
-      focus: {
-        backgroundColor: error ? radio_core_fadedRed : radio_core_white,
-        borderColor: palette.base,
-        borderWidth: 2
-      },
-      active: {
-        backgroundColor: palette.faded,
-        borderColor: error ? radio_core_activeRed : radio_core_blue,
-        borderWidth: 2
-      }
-    };
+  focused: {
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white,
+    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.blue}`,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack,
+    "::placeholder": {
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
+    }
+  },
+  defaultLight: {
+    boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.blue}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white}`
+  },
+  errorLight: {
+    boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.red}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white}`
   }
+});
+const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](TextFieldInternal, _extends({}, props, {
+  forwardedRef: ref
+})));
+/* harmony default export */ __webpack_exports__["a"] = (TextField);
 
-  radio_core_styles[styleKey] = external_aphrodite_["StyleSheet"].create(newStyles);
-  return radio_core_styles[styleKey];
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/choice-internal.js
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChoiceInternal; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _checkbox_core_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(17);
+/* harmony import */ var _radio_core_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(19);
+function _extends() { _extends = Object.assign || 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); }
 
-const choice_internal_excluded = ["label", "description", "onChange", "style", "className", "variant"];
 
 
 
@@ -611,7 +487,7 @@ const choice_internal_excluded = ["label", "description", "onChange", "style", "
  * 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 choice_internal_ChoiceInternal extends external_react_["Component"] {
+class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
     super(...args);
 
@@ -638,9 +514,9 @@ class choice_internal_ChoiceInternal extends external_react_["Component"] {
 
   getChoiceCoreComponent() {
     if (this.props.variant === "radio") {
-      return radio_core_RadioCore;
+      return _radio_core_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"];
     } else {
-      return checkbox_core_CheckboxCore;
+      return _checkbox_core_js__WEBPACK_IMPORTED_MODULE_8__[/* default */ "a"];
     }
   }
 
@@ -650,9 +526,9 @@ class choice_internal_ChoiceInternal extends external_react_["Component"] {
       id,
       label
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
-      style: [choice_internal_styles.label, disabled && choice_internal_styles.disabledLabel]
-    }, /*#__PURE__*/external_react_["createElement"]("label", {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__["LabelMedium"], {
+      style: [styles.label, disabled && styles.disabledLabel]
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
@@ -662,61 +538,61 @@ class choice_internal_ChoiceInternal extends external_react_["Component"] {
     const {
       description
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: choice_internal_styles.description,
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__["LabelSmall"], {
+      style: styles.description,
       id: id
     }, description);
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       label,
       description,
+      // eslint-disable-next-line no-unused-vars
+      onChange,
       style,
       className,
-      variant
-    } = _this$props,
-          coreProps = objectWithoutPropertiesLoose_default()(_this$props, choice_internal_excluded);
-
+      variant,
+      ...coreProps
+    } = this.props;
     const ChoiceCore = this.getChoiceCoreComponent();
-    const ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])();
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["UniqueIDProvider"], {
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4__["getClickableBehavior"])();
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["UniqueIDProvider"], {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
       const descriptionId = description && ids.get("description");
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
         style: style,
         className: className
-      }, /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
         disabled: coreProps.disabled,
         onClick: this.handleClick,
         role: variant
       }, (state, childrenProps) => {
-        return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], extends_default()({
-          style: choice_internal_styles.wrapper
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], _extends({
+          style: styles.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__*/external_react_["createElement"](ChoiceCore, extends_default()({}, coreProps, state, {
+        }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ChoiceCore, _extends({}, coreProps, state, {
           "aria-describedby": descriptionId
-        })), /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
-          size: wonder_blocks_spacing_default.a.xSmall_8
+        })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__["Strut"], {
+          size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xSmall_8
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
     });
   }
 
 }
-choice_internal_ChoiceInternal.defaultProps = {
+ChoiceInternal.defaultProps = {
   checked: false,
   disabled: false,
   error: false
 };
-const choice_internal_styles = external_aphrodite_["StyleSheet"].create({
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   wrapper: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -731,66 +607,26 @@ const choice_internal_styles = external_aphrodite_["StyleSheet"].create({
     marginTop: -2
   },
   disabledLabel: {
-    color: wonder_blocks_color_default.a.offBlack32
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack32
   },
   description: {
     // 16 for icon + 8 for spacing strut
-    marginLeft: wonder_blocks_spacing_default.a.medium_16 + wonder_blocks_spacing_default.a.xSmall_8,
-    marginTop: wonder_blocks_spacing_default.a.xxxSmall_4,
-    color: wonder_blocks_color_default.a.offBlack64
+    marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.medium_16 + _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xSmall_8,
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxSmall_4,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
   }
 });
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/checkbox.js
-
-
- // Keep synced with ChoiceComponentProps in ../util/types.js
-
-/**
- * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
- * label and description props.
- *
- * If you want a whole group of Checkbox[es] that are related, see the Choice
- * and CheckboxGroup components.
- */
-class checkbox_Checkbox extends external_react_["Component"] {
-  render() {
-    return /*#__PURE__*/external_react_["createElement"](choice_internal_ChoiceInternal, extends_default()({
-      variant: "checkbox"
-    }, this.props));
-  }
-
-}
-checkbox_Checkbox.defaultProps = {
-  disabled: false,
-  error: false
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/radio.js
-
-
- // Keep synced with ChoiceComponentProps in ../util/types.js
-
-/**
- * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
- * optionally take label and description props.
- *
- * This component should not really be used by itself because radio buttons are
- * often grouped together. See RadioGroup.
- */
-class radio_Radio extends external_react_["Component"] {
-  render() {
-    return /*#__PURE__*/external_react_["createElement"](choice_internal_ChoiceInternal, extends_default()({
-      variant: "radio"
-    }, this.props));
-  }
 
-}
-radio_Radio.defaultProps = {
-  disabled: false,
-  error: false
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/choice.js
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-const choice_excluded = ["value", "variant"];
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Choice; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
 
 
 
@@ -804,69 +640,59 @@ const choice_excluded = ["value", "variant"];
  * If you wish to use just a single field, use Checkbox or Radio with the
  * optional label and description props.
  */
-class choice_Choice extends external_react_["Component"] {
+class Choice extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   getChoiceComponent(variant) {
     if (variant === "checkbox") {
-      return checkbox_Checkbox;
+      return _checkbox_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"];
     } else {
-      return radio_Radio;
+      return _radio_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"];
     }
   }
 
   render() {
     // we don't need this going into the ChoiceComponent
     // eslint-disable-next-line no-unused-vars
-    const _this$props = this.props,
-          {
-      variant
-    } = _this$props,
-          remainingProps = objectWithoutPropertiesLoose_default()(_this$props, choice_excluded);
-
+    const {
+      value,
+      variant,
+      ...remainingProps
+    } = this.props;
     const ChoiceComponent = this.getChoiceComponent(variant);
-    return /*#__PURE__*/external_react_["createElement"](ChoiceComponent, remainingProps);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ChoiceComponent, remainingProps);
   }
 
 }
-choice_Choice.defaultProps = {
+Choice.defaultProps = {
   checked: false,
   disabled: false,
   onChange: () => {}
 };
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/group-styles.js
 
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-
-const group_styles_styles = external_aphrodite_["StyleSheet"].create({
-  fieldset: {
-    border: "none",
-    padding: 0,
-    margin: 0
-  },
-  legend: {
-    padding: 0
-  },
-  description: {
-    marginTop: wonder_blocks_spacing_default.a.xxxSmall_4,
-    color: wonder_blocks_color_default.a.offBlack64
-  },
-  error: {
-    marginTop: wonder_blocks_spacing_default.a.xxxSmall_4,
-    color: wonder_blocks_color_default.a.red
-  },
-  defaultLineGap: {
-    marginTop: wonder_blocks_spacing_default.a.xSmall_8
-  }
-});
-/* harmony default export */ var group_styles = (group_styles_styles);
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/checkbox-group.js
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CheckboxGroup; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
 
 
 
 
 
 
-const StyledFieldset = Object(wonder_blocks_core_["addStyle"])("fieldset");
-const StyledLegend = Object(wonder_blocks_core_["addStyle"])("legend");
+const StyledFieldset = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["addStyle"])("fieldset");
+const StyledLegend = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["addStyle"])("legend");
 /**
  * A checkbox group allows multiple selection. This component auto-populates
  * many props for its children Choice components. The Choice component is
@@ -874,7 +700,7 @@ const StyledLegend = Object(wonder_blocks_core_["addStyle"])("legend");
  * disabled.
  */
 
-class checkbox_group_CheckboxGroup extends external_react_["Component"] {
+class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   handleChange(changedValue, originalCheckedState) {
     const {
       onChange,
@@ -901,48 +727,65 @@ class checkbox_group_CheckboxGroup extends external_react_["Component"] {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](StyledFieldset, {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledFieldset, {
       "data-test-id": testId,
-      style: group_styles.fieldset
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].fieldset
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
       style: style
-    }, typeof label === "string" ? /*#__PURE__*/external_react_["createElement"](StyledLegend, {
-      style: group_styles.legend
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: group_styles.description
-    }, description) : description && description, errorMessage && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: group_styles.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
-      size: wonder_blocks_spacing_default.a.small_12
-    }), external_react_["Children"].map(children, (child, index) => {
+    }, typeof label === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLegend, {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].legend
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelMedium"], null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].description
+    }, description) : description && description, errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.small_12
+    }), react__WEBPACK_IMPORTED_MODULE_0__["Children"].map(children, (child, index) => {
       const {
         style,
         value
       } = child.props;
       const checked = selectedValues.includes(value);
-      return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["cloneElement"](child, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
         id: `${groupName}-${value}`,
         key: value,
         onChange: () => this.handleChange(value, checked),
-        style: [index > 0 && group_styles.defaultLineGap, style],
+        style: [index > 0 && _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
         variant: "checkbox"
       }));
     })));
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/radio-group.js
+
+/***/ }),
+/* 14 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RadioGroup; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
 
 
 
 
 
 
-const radio_group_StyledFieldset = Object(wonder_blocks_core_["addStyle"])("fieldset");
-const radio_group_StyledLegend = Object(wonder_blocks_core_["addStyle"])("legend");
+const StyledFieldset = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["addStyle"])("fieldset");
+const StyledLegend = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["addStyle"])("legend");
 /**
  * A radio group allows only single selection. Like CheckboxGroup, this
  * component auto-populates many props for its children Choice components. The
@@ -952,7 +795,7 @@ const radio_group_StyledLegend = Object(wonder_blocks_core_["addStyle"])("legend
  * accessibility.
  */
 
-class radio_group_RadioGroup extends external_react_["Component"] {
+class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   handleChange(changedValue) {
     this.props.onChange(changedValue);
   }
@@ -968,87 +811,79 @@ class radio_group_RadioGroup extends external_react_["Component"] {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](radio_group_StyledFieldset, {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledFieldset, {
       "data-test-id": testId,
-      style: group_styles.fieldset
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].fieldset
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
       style: style
-    }, label && /*#__PURE__*/external_react_["createElement"](radio_group_StyledLegend, {
-      style: group_styles.legend
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], null, label)), description && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: group_styles.description
-    }, description), errorMessage && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: group_styles.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
-      size: wonder_blocks_spacing_default.a.small_12
-    }), external_react_["Children"].map(children, (child, index) => {
+    }, label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLegend, {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].legend
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelMedium"], null, label)), description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].description
+    }, description), errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
+      style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.small_12
+    }), react__WEBPACK_IMPORTED_MODULE_0__["Children"].map(children, (child, index) => {
       const {
         style,
         value
       } = child.props;
       const checked = selectedValue === value;
-      return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["cloneElement"](child, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
         id: `${groupName}-${value}`,
         key: value,
         onChange: () => this.handleChange(value),
-        style: [index > 0 && group_styles.defaultLineGap, style],
+        style: [index > 0 && _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
         variant: "radio"
       }));
     })));
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/text-field.js
 
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-const text_field_excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "required", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange"];
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _field_heading_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
+/* harmony import */ var _text_field_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
+function _extends() { _extends = Object.assign || 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); }
 
 
 
 
 
 
-// TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
+// TODO(WB-1081): Change class name back to LabeledTextField after Styleguidist is gone.
 
 /**
- * A TextField is an element used to accept a single line of text from the user.
+ * 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 text_field_TextFieldInternal extends external_react_["Component"] {
+class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(props) {
     super(props);
-    this.state = {
-      error: null,
-      focused: false
-    };
 
-    this.maybeValidate = newValue => {
+    this.handleValidate = errorMessage => {
       const {
-        validate,
         onValidate
       } = this.props;
-
-      if (validate) {
-        const maybeError = validate(newValue) || null;
-        this.setState({
-          error: maybeError
-        }, () => {
-          if (onValidate) {
-            onValidate(maybeError);
-          }
-        });
-      }
-    };
-
-    this.handleChange = event => {
-      const {
-        onChange
-      } = this.props;
-      const newValue = event.target.value;
-      this.maybeValidate(newValue);
-      onChange(newValue);
+      this.setState({
+        error: errorMessage
+      }, () => {
+        if (onValidate) {
+          onValidate(errorMessage);
+        }
+      });
     };
 
     this.handleFocus = event => {
@@ -1077,117 +912,482 @@ class text_field_TextFieldInternal extends external_react_["Component"] {
       });
     };
 
-    if (props.validate) {
-      // Ensures error is updated on unmounted server-side renders
-      this.state.error = props.validate(props.value) || null;
-    }
-  }
-
-  componentDidMount() {
-    this.maybeValidate(this.props.value);
+    this.state = {
+      error: null,
+      focused: false
+    };
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       id,
       type,
+      label,
+      description,
       value,
       disabled,
+      validate,
+      onChange,
       onKeyDown,
       placeholder,
-      required,
       light,
       style,
       testId,
       readOnly,
       autoComplete,
       forwardedRef
-    } = _this$props,
-          otherProps = objectWithoutPropertiesLoose_default()(_this$props, text_field_excluded);
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["IDProvider"], {
+      id: id,
+      scope: "labeled-text-field"
+    }, uniqueId => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_field_heading_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], {
+      id: uniqueId,
+      testId: testId,
+      style: style,
+      field: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_text_field_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
+        id: `${uniqueId}-field`,
+        "aria-describedby": `${uniqueId}-error`,
+        "aria-invalid": this.state.error ? "true" : "false",
+        testId: testId && `${testId}-field`,
+        type: type,
+        value: value,
+        placeholder: placeholder,
+        disabled: disabled,
+        validate: validate,
+        onValidate: this.handleValidate,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        light: light,
+        readOnly: readOnly,
+        autoComplete: autoComplete,
+        ref: forwardedRef
+      }),
+      label: label,
+      description: description,
+      error: !this.state.focused && this.state.error || ""
+    }));
+  }
+
+}
+
+LabeledTextFieldInternal.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+const LabeledTextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](LabeledTextFieldInternal, _extends({}, props, {
+  forwardedRef: ref
+})));
+/* harmony default export */ __webpack_exports__["a"] = (LabeledTextField);
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-clickable");
+
+/***/ }),
+/* 17 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CheckboxCore; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(18);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__);
+function _extends() { _extends = Object.assign || 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); }
+
+
+
+
+
+
+const {
+  blue,
+  red,
+  white,
+  offWhite,
+  offBlack16,
+  offBlack32,
+  offBlack50
+} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a;
+const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["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"
+};
+/**
+ * The internal stateless ☑️ Checkbox
+ */
+
+class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+
+    this.handleChange = () => {
+      // Empty because change is handled by ClickableBehavior
+      return;
+    };
+  }
+
+  render() {
+    const {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId,
+      hovered,
+      focused,
+      pressed,
+      waiting: _,
+      ...sharedProps
+    } = this.props;
+
+    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 /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledInput, _extends({}, sharedProps, {
+      type: "checkbox",
+      "aria-invalid": error,
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      name: groupName // Need to specify because this is a controlled React form
+      // component, but we handle the click via ClickableBehavior
+      ,
+      onChange: this.handleChange,
+      style: defaultStyle
+    }, props)), checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4___default.a, {
+      color: disabled ? offBlack32 : white,
+      icon: checkboxCheck,
+      size: "small",
+      style: sharedStyles.checkIcon
+    }));
+  }
+
+}
+const size = 16;
+const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  // Reset the default styled input element
+  inputReset: {
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none"
+  },
+  default: {
+    height: size,
+    width: size,
+    minHeight: size,
+    minWidth: size,
+    margin: 0,
+    outline: "none",
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: 3
+  },
+  disabled: {
+    cursor: "auto",
+    backgroundColor: offWhite,
+    borderColor: offBlack16,
+    borderWidth: 1
+  },
+  checkIcon: {
+    position: "absolute",
+    pointerEvents: "none"
+  }
+});
+const fadedBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["fade"])(blue, 0.16), white);
+const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, blue);
+const fadedRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["fade"])(red, 0.08), white);
+const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, red);
+const colors = {
+  default: {
+    faded: fadedBlue,
+    base: blue,
+    active: activeBlue
+  },
+  error: {
+    faded: fadedRed,
+    base: red,
+    active: activeRed
+  }
+};
+const styles = {};
+
+const _generateStyles = (checked, error) => {
+  // "hash" the parameters
+  const styleKey = `${String(checked)}-${String(error)}`;
+
+  if (styles[styleKey]) {
+    return styles[styleKey];
+  }
+
+  const palette = error ? colors.error : colors.default;
+  let newStyles = {};
+
+  if (checked) {
+    newStyles = {
+      default: {
+        backgroundColor: palette.base,
+        borderWidth: 0
+      },
+      focus: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+      },
+      active: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+        background: palette.active
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: error ? red : offBlack50
+      },
+      focus: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: palette.base,
+        borderWidth: 2
+      },
+      active: {
+        backgroundColor: palette.faded,
+        borderColor: error ? activeRed : blue,
+        borderWidth: 2
+      }
+    };
+  }
+
+  styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
+  return styles[styleKey];
+};
+
+/***/ }),
+/* 18 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon");
+
+/***/ }),
+/* 19 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RadioCore; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+function _extends() { _extends = Object.assign || 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); }
+
+
+
+
+
+const {
+  blue,
+  red,
+  white,
+  offWhite,
+  offBlack16,
+  offBlack32,
+  offBlack50
+} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a;
+const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["addStyle"])("input");
+/**
+ * The internal stateless 🔘 Radio button
+ */
+
+class RadioCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+
+    this.handleChange = () => {
+      // Empty because change is handled by ClickableBehavior
+      return;
+    };
+  }
+
+  render() {
+    const {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId,
+      hovered,
+      focused,
+      pressed,
+      waiting: _,
+      ...sharedProps
+    } = this.props;
 
-    return /*#__PURE__*/external_react_["createElement"]("input", extends_default()({
-      className: Object(external_aphrodite_["css"])([text_field_styles.input, wonder_blocks_typography_["styles"].LabelMedium, text_field_styles.default, // Prioritizes disabled, then focused, then error (if any)
-      disabled ? text_field_styles.disabled : this.state.focused ? [text_field_styles.focused, light && text_field_styles.defaultLight] : this.state.error && [text_field_styles.error, light && text_field_styles.errorLight], style && style]),
-      id: id,
-      type: type,
-      placeholder: placeholder,
-      value: value,
+    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 /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledInput, _extends({}, sharedProps, {
+      type: "radio",
+      "aria-invalid": error,
+      checked: checked,
       disabled: disabled,
+      id: id,
+      name: groupName // Need to specify because this is a controlled React form
+      // component, but we handle the click via ClickableBehavior
+      ,
       onChange: this.handleChange,
-      onKeyDown: onKeyDown,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      required: required,
-      "data-test-id": testId,
-      readOnly: readOnly,
-      autoComplete: autoComplete,
-      ref: forwardedRef
-    }, otherProps));
+      style: defaultStyle
+    }, props)), disabled && checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+      style: disabledChecked
+    }));
   }
 
 }
+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
 
-text_field_TextFieldInternal.defaultProps = {
-  type: "text",
-  disabled: false,
-  light: false
+const disabledChecked = {
+  position: "absolute",
+  top: size / 4,
+  left: size / 4,
+  height: size / 2,
+  width: size / 2,
+  borderRadius: "50%",
+  backgroundColor: offBlack32
 };
-const text_field_styles = external_aphrodite_["StyleSheet"].create({
-  input: {
-    width: "100%",
-    height: 40,
-    borderRadius: 4,
-    boxSizing: "border-box",
-    paddingLeft: wonder_blocks_spacing_default.a.medium_16,
+const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  // Reset the default styled input element
+  inputReset: {
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none"
+  },
+  default: {
+    height: size,
+    width: size,
+    minHeight: size,
+    minWidth: size,
     margin: 0,
     outline: "none",
-    boxShadow: "none"
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: "50%"
   },
+  disabled: {
+    cursor: "auto",
+    backgroundColor: offWhite,
+    borderColor: offBlack16,
+    borderWidth: 1
+  }
+});
+const fadedBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["fade"])(blue, 0.16), white);
+const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, blue);
+const fadedRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["fade"])(red, 0.08), white);
+const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, red);
+const colors = {
   default: {
-    background: wonder_blocks_color_default.a.white,
-    border: `1px solid ${wonder_blocks_color_default.a.offBlack16}`,
-    color: wonder_blocks_color_default.a.offBlack,
-    "::placeholder": {
-      color: wonder_blocks_color_default.a.offBlack64
-    }
+    faded: fadedBlue,
+    base: blue,
+    active: activeBlue
   },
   error: {
-    background: `${Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(wonder_blocks_color_default.a.red, 0.06), wonder_blocks_color_default.a.white)}`,
-    border: `1px solid ${wonder_blocks_color_default.a.red}`,
-    color: wonder_blocks_color_default.a.offBlack,
-    "::placeholder": {
-      color: wonder_blocks_color_default.a.offBlack64
-    }
-  },
-  disabled: {
-    background: wonder_blocks_color_default.a.offWhite,
-    border: `1px solid ${wonder_blocks_color_default.a.offBlack16}`,
-    color: wonder_blocks_color_default.a.offBlack64,
-    "::placeholder": {
-      color: wonder_blocks_color_default.a.offBlack32
-    }
-  },
-  focused: {
-    background: wonder_blocks_color_default.a.white,
-    border: `1px solid ${wonder_blocks_color_default.a.blue}`,
-    color: wonder_blocks_color_default.a.offBlack,
-    "::placeholder": {
-      color: wonder_blocks_color_default.a.offBlack64
-    }
-  },
-  defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${wonder_blocks_color_default.a.blue}, 0px 0px 0px 2px ${wonder_blocks_color_default.a.white}`
-  },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${wonder_blocks_color_default.a.red}, 0px 0px 0px 2px ${wonder_blocks_color_default.a.white}`
+    faded: fadedRed,
+    base: red,
+    active: activeRed
   }
-});
-const TextField = /*#__PURE__*/external_react_["forwardRef"]((props, ref) => /*#__PURE__*/external_react_["createElement"](text_field_TextFieldInternal, extends_default()({}, props, {
-  forwardedRef: ref
-})));
-/* harmony default export */ var text_field = (TextField);
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/field-heading.js
+};
+const styles = {};
+
+const _generateStyles = (checked, error) => {
+  // "hash" the parameters
+  const styleKey = `${String(checked)}-${String(error)}`;
+
+  if (styles[styleKey]) {
+    return styles[styleKey];
+  }
+
+  const palette = error ? colors.error : colors.default;
+  let newStyles = {};
+
+  if (checked) {
+    newStyles = {
+      default: {
+        backgroundColor: white,
+        borderColor: palette.base,
+        borderWidth: size / 4
+      },
+      focus: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+      },
+      active: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+        borderColor: palette.active
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: error ? red : offBlack50
+      },
+      focus: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: palette.base,
+        borderWidth: 2
+      },
+      active: {
+        backgroundColor: palette.faded,
+        borderColor: error ? activeRed : blue,
+        borderWidth: 2
+      }
+    };
+  }
+
+  styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
+  return styles[styleKey];
+};
+
+/***/ }),
+/* 20 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FieldHeading; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__);
 
 
 
@@ -1200,20 +1400,20 @@ const TextField = /*#__PURE__*/external_react_["forwardRef"]((props, ref) => /*#
  * 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 field_heading_FieldHeading extends external_react_["Component"] {
+class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   renderLabel() {
     const {
       label,
       id,
       testId
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, typeof label === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
-      style: field_heading_styles.label,
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, typeof label === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
+      style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label) : label, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
-      size: wonder_blocks_spacing_default.a.xxxSmall_4
+    }, label) : label, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
     }));
   }
 
@@ -1227,11 +1427,11 @@ class field_heading_FieldHeading extends external_react_["Component"] {
       return null;
     }
 
-    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, typeof description === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: field_heading_styles.description,
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, typeof description === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
+      style: styles.description,
       testId: testId && `${testId}-description`
-    }, description) : description, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
-      size: wonder_blocks_spacing_default.a.xxxSmall_4
+    }, description) : description, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
     }));
   }
 
@@ -1246,10 +1446,10 @@ class field_heading_FieldHeading extends external_react_["Component"] {
       return null;
     }
 
-    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
-      size: wonder_blocks_spacing_default.a.small_12
-    }), typeof error === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: field_heading_styles.error,
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.small_12
+    }), typeof error === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
+      style: styles.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -1261,151 +1461,53 @@ class field_heading_FieldHeading extends external_react_["Component"] {
       field,
       style
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
       style: style
-    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
-      size: wonder_blocks_spacing_default.a.xSmall_8
+    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xSmall_8
     }), field, this.maybeRenderError());
   }
 
 }
-const field_heading_styles = external_aphrodite_["StyleSheet"].create({
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   label: {
-    color: wonder_blocks_color_default.a.offBlack
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack
   },
   description: {
-    color: wonder_blocks_color_default.a.offBlack64
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
   },
   error: {
-    color: wonder_blocks_color_default.a.red
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red
   }
 });
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/labeled-text-field.js
 
+/***/ }),
+/* 21 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
+/* harmony import */ var _components_radio_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Radio", function() { return _components_radio_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
+/* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Choice", function() { return _components_choice_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
+/* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-// TODO(WB-1081): Change class name back to LabeledTextField after Styleguidist is gone.
-
-/**
- * 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 labeled_text_field_LabeledTextFieldInternal extends external_react_["Component"] {
-  constructor(props) {
-    super(props);
-
-    this.handleValidate = errorMessage => {
-      const {
-        onValidate
-      } = this.props;
-      this.setState({
-        error: errorMessage
-      }, () => {
-        if (onValidate) {
-          onValidate(errorMessage);
-        }
-      });
-    };
-
-    this.handleFocus = event => {
-      const {
-        onFocus
-      } = this.props;
-      this.setState({
-        focused: true
-      }, () => {
-        if (onFocus) {
-          onFocus(event);
-        }
-      });
-    };
-
-    this.handleBlur = event => {
-      const {
-        onBlur
-      } = this.props;
-      this.setState({
-        focused: false
-      }, () => {
-        if (onBlur) {
-          onBlur(event);
-        }
-      });
-    };
-
-    this.state = {
-      error: null,
-      focused: false
-    };
-  }
+/* harmony import */ var _components_radio_group_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _components_radio_group_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-  render() {
-    const {
-      id,
-      type,
-      label,
-      description,
-      value,
-      disabled,
-      validate,
-      onChange,
-      onKeyDown,
-      placeholder,
-      light,
-      style,
-      testId,
-      readOnly,
-      autoComplete,
-      forwardedRef
-    } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["IDProvider"], {
-      id: id,
-      scope: "labeled-text-field"
-    }, uniqueId => /*#__PURE__*/external_react_["createElement"](field_heading_FieldHeading, {
-      id: uniqueId,
-      testId: testId,
-      style: style,
-      field: /*#__PURE__*/external_react_["createElement"](text_field, {
-        id: `${uniqueId}-field`,
-        "aria-describedby": `${uniqueId}-error`,
-        "aria-invalid": this.state.error ? "true" : "false",
-        testId: testId && `${testId}-field`,
-        type: type,
-        value: value,
-        placeholder: placeholder,
-        disabled: disabled,
-        validate: validate,
-        onValidate: this.handleValidate,
-        onChange: onChange,
-        onKeyDown: onKeyDown,
-        onFocus: this.handleFocus,
-        onBlur: this.handleBlur,
-        light: light,
-        readOnly: readOnly,
-        autoComplete: autoComplete,
-        ref: forwardedRef
-      }),
-      label: label,
-      description: description,
-      error: !this.state.focused && this.state.error || ""
-    }));
-  }
+/* harmony import */ var _components_text_field_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextField", function() { return _components_text_field_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-}
+/* harmony import */ var _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
-labeled_text_field_LabeledTextFieldInternal.defaultProps = {
-  type: "text",
-  disabled: false,
-  light: false
-};
-const LabeledTextField = /*#__PURE__*/external_react_["forwardRef"]((props, ref) => /*#__PURE__*/external_react_["createElement"](labeled_text_field_LabeledTextFieldInternal, extends_default()({}, props, {
-  forwardedRef: ref
-})));
-/* harmony default export */ var labeled_text_field = (LabeledTextField);
-// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/index.js