@khanacademy/wonder-blocks-form 3.1.5 → 3.1.7

package/dist/index.js

@@ -1,1737 +0,0 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 22);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-color");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-spacing");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-typography");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _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;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  return _extends.apply(this, arguments);
-}
-module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 7 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
-/* 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__);
-
-
-
-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);
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-layout");
-
-/***/ }),
-/* 9 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Checkbox; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
-
-
- // 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 used by itself, a checkbox provides two options - checked and unchecked.
- * A group of checkboxes can be used to allow a user to select multiple values
- * from a list of options.
- *
- * If you want a whole group of Checkbox[es] that are related, see the Choice
- * and CheckboxGroup components.
- *
- * ### Usage
- *
- * ```jsx
- * import {Checkbox} from "@khanacademy/wonder-blocks-form";
- *
- * const [checked, setChecked] = React.useState(false);
- *
- * <Checkbox checked={checked} onChange={setChecked} />
- * ```
- */
-class Checkbox extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-      variant: "checkbox"
-    }, this.props));
-  }
-
-}
-Checkbox.defaultProps = {
-  disabled: false,
-  error: false
-};
-
-/***/ }),
-/* 10 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__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_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
-
-
-
-
-
-
-const defaultErrorMessage = "This field is required.";
-
-// TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
-
-/**
- * A TextField is an element used to accept a single line of text from the user.
- */
-class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null,
-      focused: false
-    };
-
-    this.maybeValidate = newValue => {
-      const {
-        validate,
-        onValidate,
-        required
-      } = this.props;
-
-      if (validate) {
-        const maybeError = validate(newValue) || null;
-        this.setState({
-          error: maybeError
-        }, () => {
-          if (onValidate) {
-            onValidate(maybeError);
-          }
-        });
-      } else if (required) {
-        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
-        const maybeError = newValue ? null : requiredString;
-        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);
-        }
-      });
-    };
-
-    this.handleBlur = event => {
-      const {
-        onBlur
-      } = this.props;
-      this.setState({
-        focused: false
-      }, () => {
-        if (onBlur) {
-          onBlur(event);
-        }
-      });
-    };
-
-    if (props.validate && props.value !== "") {
-      // Ensures error is updated on unmounted server-side renders
-      this.state.error = props.validate(props.value) || null;
-    }
-  }
-
-  componentDidMount() {
-    if (this.props.value !== "") {
-      this.maybeValidate(this.props.value);
-    }
-  }
-
-  render() {
-    const {
-      id,
-      type,
-      value,
-      disabled,
-      onKeyDown,
-      placeholder,
-      light,
-      style,
-      testId,
-      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,
-      required,
-
-      /* eslint-enable no-unused-vars */
-      // Should only include Aria related props
-      ...otherProps
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-      className: Object(aphrodite__WEBPACK_IMPORTED_MODULE_2__["css"])([styles.input, _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["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,
-      type: type,
-      placeholder: placeholder,
-      value: value,
-      disabled: disabled,
-      onChange: this.handleChange,
-      onKeyDown: onKeyDown,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      "data-test-id": testId,
-      readOnly: readOnly,
-      autoComplete: autoComplete,
-      ref: forwardedRef
-    }, otherProps));
-  }
-
-}
-
-TextFieldInternal.defaultProps = {
-  type: "text",
-  disabled: false,
-  light: false
-};
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
-  input: {
-    width: "100%",
-    height: 40,
-    borderRadius: 4,
-    boxSizing: "border-box",
-    paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
-    margin: 0,
-    outline: "none",
-    boxShadow: "none"
-  },
-  default: {
-    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white,
-    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack16}`,
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
-    "::placeholder": {
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
-    }
-  },
-  error: {
-    background: `${Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red, 0.06), _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white)}`,
-    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red}`,
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
-    "::placeholder": {
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
-    }
-  },
-  disabled: {
-    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offWhite,
-    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack16}`,
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64,
-    "::placeholder": {
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack32
-    }
-  },
-  focused: {
-    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white,
-    border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.blue}`,
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
-    "::placeholder": {
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
-    }
-  },
-  defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.blue}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white}`
-  },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white}`
-  }
-});
-
-/**
- * A TextField is an element used to accept a single line of text from the user.
- *
- * ### Usage
- *
- * ```jsx
- * import {TextField} from "@khanacademy/wonder-blocks-form";
- *
- * const [value, setValue] = React.useState("");
- *
- * <TextField
- *     id="some-unique-text-field-id"
- *     value={value}
- *     onChange={setValue}
- * />
- * ```
- */
-const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](TextFieldInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, props, {
-  forwardedRef: ref
-})));
-/* harmony default export */ __webpack_exports__["a"] = (TextField);
-
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChoiceInternal; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__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_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(4);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(17);
-/* harmony import */ var _radio_core_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(19);
-
-
-
-
-
-
-
-
-
-
-
-
-/**
- * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
- * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
- * Radio with many of its props auto-populated, to be used with CheckboxGroup
- * and RadioGroup. This design allows for more explicit prop typing. For
- * example, we can make onChange a required prop on Checkbox but not on Choice
- * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */
-class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  constructor(...args) {
-    super(...args);
-
-    this.handleLabelClick = event => {
-      // Browsers automatically use the for attribute to select the input,
-      // but we use ClickableBehavior to handle this.
-      event.preventDefault();
-    };
-
-    this.handleClick = () => {
-      const {
-        checked,
-        onChange,
-        variant
-      } = this.props; // Radio buttons cannot be unchecked
-
-      if (variant === "radio" && checked) {
-        return;
-      }
-
-      onChange(!checked);
-    };
-  }
-
-  getChoiceCoreComponent() {
-    if (this.props.variant === "radio") {
-      return _radio_core_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"];
-    } else {
-      return _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"];
-    }
-  }
-
-  getLabel() {
-    const {
-      disabled,
-      id,
-      label
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__["LabelMedium"], {
-      style: [styles.label, disabled && styles.disabledLabel]
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", {
-      htmlFor: id,
-      onClick: this.handleLabelClick
-    }, label));
-  }
-
-  getDescription(id) {
-    const {
-      description
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__["LabelSmall"], {
-      style: styles.description,
-      id: id
-    }, description);
-  }
-
-  render() {
-    const {
-      label,
-      description,
-      // eslint-disable-next-line no-unused-vars
-      onChange,
-      style,
-      className,
-      variant,
-      ...coreProps
-    } = this.props;
-    const ChoiceCore = this.getChoiceCoreComponent();
-    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__["getClickableBehavior"])();
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["UniqueIDProvider"], {
-      mockOnFirstRender: true,
-      scope: "choice"
-    }, ids => {
-      const descriptionId = description ? ids.get("description") : undefined;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
-        style: style,
-        className: className
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
-        disabled: coreProps.disabled,
-        onClick: this.handleClick,
-        role: variant
-      }, (state, childrenProps) => {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-          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__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ChoiceCore, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, coreProps, state, {
-          "aria-describedby": descriptionId
-        })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__["Strut"], {
-          size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xSmall_8
-        }), label && this.getLabel());
-      }), description && this.getDescription(descriptionId));
-    });
-  }
-
-}
-ChoiceInternal.defaultProps = {
-  checked: false,
-  disabled: false,
-  error: false
-};
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
-  wrapper: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    outline: "none"
-  },
-  label: {
-    userSelect: "none",
-    // NOTE: The checkbox/radio button (height 16px) should be center
-    // aligned with the first line of the label. However, LabelMedium has a
-    // declared line height of 20px, so we need to adjust the top to get the
-    // desired alignment.
-    marginTop: -2
-  },
-  disabledLabel: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack32
-  },
-  description: {
-    // 16 for icon + 8 for spacing strut
-    marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.medium_16 + _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xSmall_8,
-    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4,
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
-  }
-});
-
-/***/ }),
-/* 12 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"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__(9);
-/* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
-
-
-
-
-/**
- * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
- * CheckboxGroup and RadioGroup because many of its props are auto-populated
- * and not shown in the documentation here. See those components for usage
- * examples.
- *
- * If you wish to use just a single field, use Checkbox or Radio with the
- * optional label and description props.
- *
- * ### Checkbox Usage
- *
- * ```jsx
- * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValues, setSelectedValues] = React.useState([]);
- *
- * // Checkbox usage
- * <CheckboxGroup
- *     label="some-label"
- *     description="some-description"
- *     groupName="some-group-name"
- *     onChange={setSelectedValues}
- *     selectedValues={selectedValues}
- * />
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *        description="Some choice description."
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </CheckboxGroup>
- * ```
- *
- * ### Radio Usage
- *
- * ```jsx
- * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValue, setSelectedValue] = React.useState("");
- *
- * <RadioGroup
- *     label="some-label"
- *     description="some-description"
- *     groupName="some-group-name"
- *     onChange={setSelectedValue}>
- *     selectedValues={selectedValue}
- * />
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *        description="Some choice description."
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </RadioGroup>
- * ```
- */
-class Choice extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  getChoiceComponent(variant) {
-    if (variant === "checkbox") {
-      return _checkbox_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"];
-    } else {
-      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 {
-      value,
-      variant,
-      ...remainingProps
-    } = this.props;
-    const ChoiceComponent = this.getChoiceComponent(variant);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ChoiceComponent, remainingProps);
-  }
-
-}
-Choice.defaultProps = {
-  checked: false,
-  disabled: false,
-  onChange: () => {}
-};
-
-/***/ }),
-/* 13 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"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__(8);
-/* 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__(7);
-
-
-
-
-
-
-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
- * exposed for the user to apply custom styles or to indicate which choices are
- * disabled.
- *
- * ### Usage
- *
- * ```jsx
- * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValues, setSelectedValues] = React.useState([]);
- *
- * <CheckboxGroup
- *     label="some-label"
- *     description="some-description"
- *     groupName="some-group-name"
- *     onChange={setSelectedValues}
- *     selectedValues={selectedValues}
- * >
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </CheckboxGroup>
- * ```
- */
-
-class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  handleChange(changedValue, originalCheckedState) {
-    const {
-      onChange,
-      selectedValues
-    } = this.props;
-
-    if (originalCheckedState) {
-      const index = selectedValues.indexOf(changedValue);
-      const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
-      onChange(updatedSelection);
-    } else {
-      onChange([].concat(selectedValues, [changedValue]));
-    }
-  }
-
-  render() {
-    const {
-      children,
-      label,
-      description,
-      errorMessage,
-      groupName,
-      selectedValues,
-      style,
-      testId
-    } = this.props;
-    const allChildren = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(children).filter(Boolean);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledFieldset, {
-      "data-test-id": testId,
-      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__*/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
-    }), allChildren.map((child, index) => {
-      const {
-        style,
-        value
-      } = child.props;
-      const checked = selectedValues.includes(value);
-      return /*#__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_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
-        variant: "checkbox"
-      });
-    })));
-  }
-
-}
-
-/***/ }),
-/* 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__(8);
-/* 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__(7);
-
-
-
-
-
-
-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
- * Choice component is exposed for the user to apply custom styles or to
- * indicate which choices are disabled. The use of the groupName prop is
- * important to maintain expected keyboard navigation behavior for
- * accessibility.
- *
- * ### Usage
- *
- * ```jsx
- * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValue, setSelectedValue] = React.useState("");
- *
- * <RadioGroup
- *     label="some-label"
- *     description="some-description"
- *     groupName="some-group-name"
- *     onChange={setSelectedValue}
- *     selectedValue={selectedValue}
- * >
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </RadioGroup>
- * ```
- */
-
-class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  handleChange(changedValue) {
-    this.props.onChange(changedValue);
-  }
-
-  render() {
-    const {
-      children,
-      label,
-      description,
-      errorMessage,
-      groupName,
-      selectedValue,
-      style,
-      testId
-    } = this.props;
-    const allChildren = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(children).filter(Boolean);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledFieldset, {
-      "data-test-id": testId,
-      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__*/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
-    }), allChildren.map((child, index) => {
-      const {
-        style,
-        value
-      } = child.props;
-      const checked = selectedValue === value;
-      return /*#__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_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
-        variant: "radio"
-      });
-    })));
-  }
-
-}
-
-/***/ }),
-/* 15 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__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 _field_heading_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21);
-/* harmony import */ var _text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
-
-
-
-
-
-
-// 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 LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_1__["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
-    };
-  }
-
-  render() {
-    const {
-      id,
-      type,
-      label,
-      description,
-      value,
-      disabled,
-      required,
-      validate,
-      onChange,
-      onKeyDown,
-      placeholder,
-      light,
-      style,
-      testId,
-      readOnly,
-      autoComplete,
-      forwardedRef,
-      ariaDescribedby
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["IDProvider"], {
-      id: id,
-      scope: "labeled-text-field"
-    }, uniqueId => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_field_heading_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
-      id: uniqueId,
-      testId: testId,
-      style: style,
-      field: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_text_field_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
-        id: `${uniqueId}-field`,
-        "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
-        "aria-invalid": this.state.error ? "true" : "false",
-        "aria-required": required ? "true" : "false",
-        required: required,
-        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,
-      required: !!required,
-      error: !this.state.focused && this.state.error || ""
-    }));
-  }
-
-}
-
-LabeledTextFieldInternal.defaultProps = {
-  type: "text",
-  disabled: false,
-  light: false
-};
-
-/**
- * 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.
- *
- * ### Usage
- *
- * ```jsx
- * import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
- *
- * const [value, setValue] = React.useState("");
- *
- * <LabeledTextField
- *     label="Label"
- *     description="Hello, this is the description for this field"
- *     placeholder="Placeholder"
- *     value={value}
- *     onChange={setValue}
- * />
- * ```
- */
-const LabeledTextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](LabeledTextFieldInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, 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 _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__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_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(18);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__);
-
-
-
-
-
-
-const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
-} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
-const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["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_1__["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_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledInput, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, 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_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default.a, {
-      color: disabled ? offBlack32 : white,
-      icon: checkboxCheck,
-      size: "small",
-      style: sharedStyles.checkIcon
-    }));
-  }
-
-}
-const size = 16;
-const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["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_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(blue, 0.16), white);
-const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, blue);
-const fadedRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(red, 0.08), white);
-const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["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_2__["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 _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__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_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-
-
-
-
-
-const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
-} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
-const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("input");
-/**
- * The internal stateless 🔘 Radio button
- */
-
-class RadioCore extends react__WEBPACK_IMPORTED_MODULE_1__["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_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledInput, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___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__*/react__WEBPACK_IMPORTED_MODULE_1__["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
-
-const disabledChecked = {
-  position: "absolute",
-  top: size / 4,
-  left: size / 4,
-  height: size / 2,
-  width: size / 2,
-  borderRadius: "50%",
-  backgroundColor: offBlack32
-};
-const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["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: "50%"
-  },
-  disabled: {
-    cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
-    borderWidth: 1
-  }
-});
-const fadedBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(blue, 0.16), white);
-const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, blue);
-const fadedRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(red, 0.08), white);
-const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["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: 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_2__["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 Radio; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
-
-
- // 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 extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-      variant: "radio"
-    }, this.props));
-  }
-
-}
-Radio.defaultProps = {
-  disabled: false,
-  error: false
-};
-
-/***/ }),
-/* 21 */
-/***/ (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__(6);
-/* 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__(8);
-/* 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__);
-
-
-
-
-
-
-
-const StyledSpan = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["addStyle"])("span");
-/**
- * A FieldHeading is an element that provides a label, description, and error element
- * to present better context and hints to any type of form field component.
- */
-
-class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  renderLabel() {
-    const {
-      label,
-      id,
-      required,
-      testId
-    } = this.props;
-    const requiredIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSpan, {
-      style: styles.required,
-      "aria-hidden": true
-    }, " ", "*");
-    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_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
-      style: styles.label,
-      tag: "label",
-      htmlFor: id && `${id}-field`,
-      testId: testId && `${testId}-label`
-    }, label, required && requiredIcon), /*#__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
-    }));
-  }
-
-  maybeRenderDescription() {
-    const {
-      description,
-      testId
-    } = this.props;
-
-    if (!description) {
-      return null;
-    }
-
-    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_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
-      style: styles.description,
-      testId: testId && `${testId}-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
-    }));
-  }
-
-  maybeRenderError() {
-    const {
-      error,
-      id,
-      testId
-    } = this.props;
-
-    if (!error) {
-      return null;
-    }
-
-    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
-    }), /*#__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`
-    }, error));
-  }
-
-  render() {
-    const {
-      field,
-      style
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
-      style: style
-    }, 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 styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-  label: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack
-  },
-  description: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
-  },
-  error: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red
-  },
-  required: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red
-  }
-});
-
-/***/ }),
-/* 22 */
-/***/ (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__(9);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
-
-/* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Choice", function() { return _components_choice_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
-
-/* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
-
-/* harmony import */ var _components_radio_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _components_radio_group_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
-
-/* harmony import */ var _components_text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextField", function() { return _components_text_field_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
-
-/* harmony import */ var _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
-
-
-
-
-
-
-
-
-
-/***/ })
-/******/ ]);