@khanacademy/wonder-blocks-form 2.4.7 → 2.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.js +202 -172
  3. package/package.json +6 -6
  4. package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap +60 -60
  5. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +292 -292
package/dist/index.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 21);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 22);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ([
@@ -119,14 +119,37 @@ module.exports = require("@khanacademy/wonder-blocks-typography");
119
119
  /* 5 */
120
120
  /***/ (function(module, exports) {
121
121
 
122
- module.exports = require("aphrodite");
122
+ function _extends() {
123
+ module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
124
+ for (var i = 1; i < arguments.length; i++) {
125
+ var source = arguments[i];
126
+
127
+ for (var key in source) {
128
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
129
+ target[key] = source[key];
130
+ }
131
+ }
132
+ }
133
+
134
+ return target;
135
+ }, module.exports.__esModule = true, module.exports["default"] = module.exports;
136
+ return _extends.apply(this, arguments);
137
+ }
138
+
139
+ module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
123
140
 
124
141
  /***/ }),
125
142
  /* 6 */
143
+ /***/ (function(module, exports) {
144
+
145
+ module.exports = require("aphrodite");
146
+
147
+ /***/ }),
148
+ /* 7 */
126
149
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
127
150
 
128
151
  "use strict";
129
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
152
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
130
153
  /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
131
154
  /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
132
155
  /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__);
@@ -159,21 +182,22 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
159
182
  /* harmony default export */ __webpack_exports__["a"] = (styles);
160
183
 
161
184
  /***/ }),
162
- /* 7 */
185
+ /* 8 */
163
186
  /***/ (function(module, exports) {
164
187
 
165
188
  module.exports = require("@khanacademy/wonder-blocks-layout");
166
189
 
167
190
  /***/ }),
168
- /* 8 */
191
+ /* 9 */
169
192
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
170
193
 
171
194
  "use strict";
172
195
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Checkbox; });
173
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
174
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
175
- /* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
176
- 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); }
196
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
197
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
198
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
199
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
200
+ /* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
177
201
 
178
202
 
179
203
  // Keep synced with ChoiceComponentProps in ../util/types.js
@@ -199,9 +223,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
199
223
  * <Checkbox checked={checked} onChange={setChecked} />
200
224
  * ```
201
225
  */
202
- class Checkbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
226
+ class Checkbox extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
203
227
  render() {
204
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"], _extends({
228
+ 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()({
205
229
  variant: "checkbox"
206
230
  }, this.props));
207
231
  }
@@ -213,15 +237,16 @@ Checkbox.defaultProps = {
213
237
  };
214
238
 
215
239
  /***/ }),
216
- /* 9 */
240
+ /* 10 */
217
241
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
218
242
 
219
243
  "use strict";
220
244
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Radio; });
221
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
222
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
223
- /* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
224
- 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); }
245
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
246
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
247
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
248
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
249
+ /* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
225
250
 
226
251
 
227
252
  // Keep synced with ChoiceComponentProps in ../util/types.js
@@ -233,9 +258,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
233
258
  * This component should not really be used by itself because radio buttons are
234
259
  * often grouped together. See RadioGroup.
235
260
  */
236
- class Radio extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
261
+ class Radio extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
237
262
  render() {
238
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"], _extends({
263
+ 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()({
239
264
  variant: "radio"
240
265
  }, this.props));
241
266
  }
@@ -247,21 +272,22 @@ Radio.defaultProps = {
247
272
  };
248
273
 
249
274
  /***/ }),
250
- /* 10 */
275
+ /* 11 */
251
276
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
252
277
 
253
278
  "use strict";
254
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
255
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
256
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
257
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
258
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
259
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
260
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
261
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
262
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
263
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
264
- 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); }
279
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
280
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
281
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
282
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
283
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
284
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
285
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
286
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
287
+ /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
288
+ /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
289
+ /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
290
+ /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
265
291
 
266
292
 
267
293
 
@@ -275,7 +301,7 @@ const defaultErrorMessage = "This field is required.";
275
301
  /**
276
302
  * A TextField is an element used to accept a single line of text from the user.
277
303
  */
278
- class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
304
+ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
279
305
  constructor(props) {
280
306
  super(props);
281
307
  this.state = {
@@ -388,8 +414,8 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
388
414
  // Should only include Aria related props
389
415
  ...otherProps
390
416
  } = this.props;
391
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", _extends({
392
- 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)
417
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
418
+ 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)
393
419
  disabled ? styles.disabled : this.state.focused ? [styles.focused, light && styles.defaultLight] : this.state.error && [styles.error, light && styles.errorLight], style && style]),
394
420
  id: id,
395
421
  type: type,
@@ -414,54 +440,54 @@ TextFieldInternal.defaultProps = {
414
440
  disabled: false,
415
441
  light: false
416
442
  };
417
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
443
+ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
418
444
  input: {
419
445
  width: "100%",
420
446
  height: 40,
421
447
  borderRadius: 4,
422
448
  boxSizing: "border-box",
423
- paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.medium_16,
449
+ paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
424
450
  margin: 0,
425
451
  outline: "none",
426
452
  boxShadow: "none"
427
453
  },
428
454
  default: {
429
- background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white,
430
- border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
431
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack,
455
+ background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white,
456
+ border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack16}`,
457
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
432
458
  "::placeholder": {
433
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
459
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
434
460
  }
435
461
  },
436
462
  error: {
437
- 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)}`,
438
- border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.red}`,
439
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack,
463
+ 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)}`,
464
+ border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red}`,
465
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
440
466
  "::placeholder": {
441
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
467
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
442
468
  }
443
469
  },
444
470
  disabled: {
445
- background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offWhite,
446
- border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
447
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64,
471
+ background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offWhite,
472
+ border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack16}`,
473
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64,
448
474
  "::placeholder": {
449
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack32
475
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack32
450
476
  }
451
477
  },
452
478
  focused: {
453
- background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white,
454
- border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.blue}`,
455
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack,
479
+ background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white,
480
+ border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.blue}`,
481
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
456
482
  "::placeholder": {
457
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
483
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
458
484
  }
459
485
  },
460
486
  defaultLight: {
461
- 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}`
487
+ 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}`
462
488
  },
463
489
  errorLight: {
464
- 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}`
490
+ 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}`
465
491
  }
466
492
  });
467
493
 
@@ -482,36 +508,37 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
482
508
  * />
483
509
  * ```
484
510
  */
485
- const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](TextFieldInternal, _extends({}, props, {
511
+ 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, {
486
512
  forwardedRef: ref
487
513
  })));
488
514
  /* harmony default export */ __webpack_exports__["a"] = (TextField);
489
515
 
490
516
  /***/ }),
491
- /* 11 */
517
+ /* 12 */
492
518
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
493
519
 
494
520
  "use strict";
495
521
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChoiceInternal; });
496
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
497
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
498
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
499
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
500
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
501
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
502
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
503
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
504
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
505
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4__);
506
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
507
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__);
508
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
509
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__);
510
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
511
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__);
512
- /* harmony import */ var _checkbox_core_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(17);
513
- /* harmony import */ var _radio_core_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(19);
514
- 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); }
522
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
523
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
524
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
525
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
526
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
527
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
528
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
529
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
530
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
531
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
532
+ /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
533
+ /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__);
534
+ /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
535
+ /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__);
536
+ /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
537
+ /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__);
538
+ /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(4);
539
+ /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__);
540
+ /* harmony import */ var _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(18);
541
+ /* harmony import */ var _radio_core_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(20);
515
542
 
516
543
 
517
544
 
@@ -532,7 +559,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
532
559
  * example, we can make onChange a required prop on Checkbox but not on Choice
533
560
  * (because for Choice, that prop would be auto-populated by CheckboxGroup).
534
561
  */
535
- class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
562
+ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
536
563
  constructor(...args) {
537
564
  super(...args);
538
565
 
@@ -559,9 +586,9 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
559
586
 
560
587
  getChoiceCoreComponent() {
561
588
  if (this.props.variant === "radio") {
562
- return _radio_core_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"];
589
+ return _radio_core_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"];
563
590
  } else {
564
- return _checkbox_core_js__WEBPACK_IMPORTED_MODULE_8__[/* default */ "a"];
591
+ return _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"];
565
592
  }
566
593
  }
567
594
 
@@ -571,9 +598,9 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
571
598
  id,
572
599
  label
573
600
  } = this.props;
574
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__["LabelMedium"], {
601
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__["LabelMedium"], {
575
602
  style: [styles.label, disabled && styles.disabledLabel]
576
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", {
603
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", {
577
604
  htmlFor: id,
578
605
  onClick: this.handleLabelClick
579
606
  }, label));
@@ -583,7 +610,7 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
583
610
  const {
584
611
  description
585
612
  } = this.props;
586
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_7__["LabelSmall"], {
613
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__["LabelSmall"], {
587
614
  style: styles.description,
588
615
  id: id
589
616
  }, description);
@@ -601,31 +628,31 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
601
628
  ...coreProps
602
629
  } = this.props;
603
630
  const ChoiceCore = this.getChoiceCoreComponent();
604
- const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_4__["getClickableBehavior"])();
605
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["UniqueIDProvider"], {
631
+ const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__["getClickableBehavior"])();
632
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["UniqueIDProvider"], {
606
633
  mockOnFirstRender: true,
607
634
  scope: "choice"
608
635
  }, ids => {
609
636
  const descriptionId = description && ids.get("description");
610
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
637
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
611
638
  style: style,
612
639
  className: className
613
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
640
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
614
641
  disabled: coreProps.disabled,
615
642
  onClick: this.handleClick,
616
643
  role: variant
617
644
  }, (state, childrenProps) => {
618
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], _extends({
645
+ 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()({
619
646
  style: styles.wrapper
620
647
  }, childrenProps, {
621
648
  // We are resetting the tabIndex=0 from handlers
622
649
  // because the ChoiceCore component will receive
623
650
  // focus on basis of it being an input element.
624
651
  tabIndex: -1
625
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ChoiceCore, _extends({}, coreProps, state, {
652
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ChoiceCore, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, coreProps, state, {
626
653
  "aria-describedby": descriptionId
627
- })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__["Strut"], {
628
- size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xSmall_8
654
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__["Strut"], {
655
+ size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xSmall_8
629
656
  }), label && this.getLabel());
630
657
  }), description && this.getDescription(descriptionId));
631
658
  });
@@ -637,7 +664,7 @@ ChoiceInternal.defaultProps = {
637
664
  disabled: false,
638
665
  error: false
639
666
  };
640
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
667
+ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
641
668
  wrapper: {
642
669
  flexDirection: "row",
643
670
  alignItems: "flex-start",
@@ -652,26 +679,26 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
652
679
  marginTop: -2
653
680
  },
654
681
  disabledLabel: {
655
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack32
682
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack32
656
683
  },
657
684
  description: {
658
685
  // 16 for icon + 8 for spacing strut
659
- 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,
660
- marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxSmall_4,
661
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
686
+ 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,
687
+ marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4,
688
+ color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
662
689
  }
663
690
  });
664
691
 
665
692
  /***/ }),
666
- /* 12 */
693
+ /* 13 */
667
694
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
668
695
 
669
696
  "use strict";
670
697
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Choice; });
671
698
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
672
699
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
673
- /* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
674
- /* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
700
+ /* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
701
+ /* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
675
702
 
676
703
 
677
704
 
@@ -771,7 +798,7 @@ Choice.defaultProps = {
771
798
  };
772
799
 
773
800
  /***/ }),
774
- /* 13 */
801
+ /* 14 */
775
802
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
776
803
 
777
804
  "use strict";
@@ -780,13 +807,13 @@ Choice.defaultProps = {
780
807
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
781
808
  /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
782
809
  /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
783
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
810
+ /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
784
811
  /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
785
812
  /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
786
813
  /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
787
814
  /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
788
815
  /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
789
- /* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
816
+ /* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
790
817
 
791
818
 
792
819
 
@@ -891,7 +918,7 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
891
918
  }
892
919
 
893
920
  /***/ }),
894
- /* 14 */
921
+ /* 15 */
895
922
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
896
923
 
897
924
  "use strict";
@@ -900,13 +927,13 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
900
927
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
901
928
  /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
902
929
  /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
903
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
930
+ /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
904
931
  /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
905
932
  /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
906
933
  /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
907
934
  /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
908
935
  /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
909
- /* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
936
+ /* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
910
937
 
911
938
 
912
939
 
@@ -1002,17 +1029,18 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1002
1029
  }
1003
1030
 
1004
1031
  /***/ }),
1005
- /* 15 */
1032
+ /* 16 */
1006
1033
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1007
1034
 
1008
1035
  "use strict";
1009
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
1010
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1011
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
1012
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
1013
- /* harmony import */ var _field_heading_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
1014
- /* harmony import */ var _text_field_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
1015
- 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); }
1036
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
1037
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
1038
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
1039
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
1040
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
1041
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
1042
+ /* harmony import */ var _field_heading_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21);
1043
+ /* harmony import */ var _text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
1016
1044
 
1017
1045
 
1018
1046
 
@@ -1025,7 +1053,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
1025
1053
  * A LabeledTextField is an element used to accept a single line of text
1026
1054
  * from the user paired with a label, description, and error field elements.
1027
1055
  */
1028
- class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1056
+ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
1029
1057
  constructor(props) {
1030
1058
  super(props);
1031
1059
 
@@ -1095,14 +1123,14 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
1095
1123
  forwardedRef,
1096
1124
  ariaDescribedby
1097
1125
  } = this.props;
1098
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["IDProvider"], {
1126
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["IDProvider"], {
1099
1127
  id: id,
1100
1128
  scope: "labeled-text-field"
1101
- }, uniqueId => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_field_heading_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], {
1129
+ }, uniqueId => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_field_heading_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
1102
1130
  id: uniqueId,
1103
1131
  testId: testId,
1104
1132
  style: style,
1105
- field: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_text_field_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
1133
+ field: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_text_field_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
1106
1134
  id: `${uniqueId}-field`,
1107
1135
  "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
1108
1136
  "aria-invalid": this.state.error ? "true" : "false",
@@ -1159,34 +1187,35 @@ LabeledTextFieldInternal.defaultProps = {
1159
1187
  * />
1160
1188
  * ```
1161
1189
  */
1162
- const LabeledTextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](LabeledTextFieldInternal, _extends({}, props, {
1190
+ 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, {
1163
1191
  forwardedRef: ref
1164
1192
  })));
1165
1193
  /* harmony default export */ __webpack_exports__["a"] = (LabeledTextField);
1166
1194
 
1167
1195
  /***/ }),
1168
- /* 16 */
1196
+ /* 17 */
1169
1197
  /***/ (function(module, exports) {
1170
1198
 
1171
1199
  module.exports = require("@khanacademy/wonder-blocks-clickable");
1172
1200
 
1173
1201
  /***/ }),
1174
- /* 17 */
1202
+ /* 18 */
1175
1203
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1176
1204
 
1177
1205
  "use strict";
1178
1206
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CheckboxCore; });
1179
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
1180
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1181
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
1182
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
1183
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
1184
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
1185
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
1186
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
1187
- /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(18);
1188
- /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4__);
1189
- 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); }
1207
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
1208
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
1209
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
1210
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
1211
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
1212
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
1213
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
1214
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
1215
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
1216
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
1217
+ /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
1218
+ /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__);
1190
1219
 
1191
1220
 
1192
1221
 
@@ -1201,8 +1230,8 @@ const {
1201
1230
  offBlack16,
1202
1231
  offBlack32,
1203
1232
  offBlack50
1204
- } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a;
1205
- const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["addStyle"])("input");
1233
+ } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
1234
+ const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("input");
1206
1235
  const checkboxCheck = {
1207
1236
  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"
1208
1237
  };
@@ -1210,7 +1239,7 @@ const checkboxCheck = {
1210
1239
  * The internal stateless ☑️ Checkbox
1211
1240
  */
1212
1241
 
1213
- class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1242
+ class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
1214
1243
  constructor(...args) {
1215
1244
  super(...args);
1216
1245
 
@@ -1241,7 +1270,7 @@ class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1241
1270
  const props = {
1242
1271
  "data-test-id": testId
1243
1272
  };
1244
- 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, {
1273
+ 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, {
1245
1274
  type: "checkbox",
1246
1275
  "aria-invalid": error,
1247
1276
  checked: checked,
@@ -1252,7 +1281,7 @@ class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1252
1281
  ,
1253
1282
  onChange: this.handleChange,
1254
1283
  style: defaultStyle
1255
- }, props)), checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_4___default.a, {
1284
+ }, props)), checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default.a, {
1256
1285
  color: disabled ? offBlack32 : white,
1257
1286
  icon: checkboxCheck,
1258
1287
  size: "small",
@@ -1262,7 +1291,7 @@ class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1262
1291
 
1263
1292
  }
1264
1293
  const size = 16;
1265
- const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
1294
+ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
1266
1295
  // Reset the default styled input element
1267
1296
  inputReset: {
1268
1297
  appearance: "none",
@@ -1292,10 +1321,10 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
1292
1321
  pointerEvents: "none"
1293
1322
  }
1294
1323
  });
1295
- 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);
1296
- const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, blue);
1297
- 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);
1298
- const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, red);
1324
+ 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);
1325
+ const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, blue);
1326
+ 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);
1327
+ const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, red);
1299
1328
  const colors = {
1300
1329
  default: {
1301
1330
  faded: fadedBlue,
@@ -1354,31 +1383,32 @@ const _generateStyles = (checked, error) => {
1354
1383
  };
1355
1384
  }
1356
1385
 
1357
- styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
1386
+ styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
1358
1387
  return styles[styleKey];
1359
1388
  };
1360
1389
 
1361
1390
  /***/ }),
1362
- /* 18 */
1391
+ /* 19 */
1363
1392
  /***/ (function(module, exports) {
1364
1393
 
1365
1394
  module.exports = require("@khanacademy/wonder-blocks-icon");
1366
1395
 
1367
1396
  /***/ }),
1368
- /* 19 */
1397
+ /* 20 */
1369
1398
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1370
1399
 
1371
1400
  "use strict";
1372
1401
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RadioCore; });
1373
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
1374
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1375
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
1376
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
1377
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
1378
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
1379
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
1380
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
1381
- 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); }
1402
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
1403
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
1404
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
1405
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
1406
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
1407
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
1408
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
1409
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
1410
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
1411
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
1382
1412
 
1383
1413
 
1384
1414
 
@@ -1392,13 +1422,13 @@ const {
1392
1422
  offBlack16,
1393
1423
  offBlack32,
1394
1424
  offBlack50
1395
- } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a;
1396
- const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["addStyle"])("input");
1425
+ } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
1426
+ const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("input");
1397
1427
  /**
1398
1428
  * The internal stateless 🔘 Radio button
1399
1429
  */
1400
1430
 
1401
- class RadioCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1431
+ class RadioCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
1402
1432
  constructor(...args) {
1403
1433
  super(...args);
1404
1434
 
@@ -1429,7 +1459,7 @@ class RadioCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1429
1459
  const props = {
1430
1460
  "data-test-id": testId
1431
1461
  };
1432
- 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, {
1462
+ 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, {
1433
1463
  type: "radio",
1434
1464
  "aria-invalid": error,
1435
1465
  checked: checked,
@@ -1440,7 +1470,7 @@ class RadioCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
1440
1470
  ,
1441
1471
  onChange: this.handleChange,
1442
1472
  style: defaultStyle
1443
- }, props)), disabled && checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
1473
+ }, props)), disabled && checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", {
1444
1474
  style: disabledChecked
1445
1475
  }));
1446
1476
  }
@@ -1457,7 +1487,7 @@ const disabledChecked = {
1457
1487
  borderRadius: "50%",
1458
1488
  backgroundColor: offBlack32
1459
1489
  };
1460
- const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
1490
+ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
1461
1491
  // Reset the default styled input element
1462
1492
  inputReset: {
1463
1493
  appearance: "none",
@@ -1483,10 +1513,10 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
1483
1513
  borderWidth: 1
1484
1514
  }
1485
1515
  });
1486
- 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);
1487
- const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, blue);
1488
- 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);
1489
- const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__["mix"])(offBlack32, red);
1516
+ 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);
1517
+ const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, blue);
1518
+ 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);
1519
+ const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, red);
1490
1520
  const colors = {
1491
1521
  default: {
1492
1522
  faded: fadedBlue,
@@ -1546,25 +1576,25 @@ const _generateStyles = (checked, error) => {
1546
1576
  };
1547
1577
  }
1548
1578
 
1549
- styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
1579
+ styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
1550
1580
  return styles[styleKey];
1551
1581
  };
1552
1582
 
1553
1583
  /***/ }),
1554
- /* 20 */
1584
+ /* 21 */
1555
1585
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1556
1586
 
1557
1587
  "use strict";
1558
1588
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FieldHeading; });
1559
1589
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
1560
1590
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1561
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
1591
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
1562
1592
  /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
1563
1593
  /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
1564
1594
  /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
1565
1595
  /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
1566
1596
  /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
1567
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
1597
+ /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
1568
1598
  /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__);
1569
1599
  /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
1570
1600
  /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
@@ -1673,30 +1703,30 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
1673
1703
  });
1674
1704
 
1675
1705
  /***/ }),
1676
- /* 21 */
1706
+ /* 22 */
1677
1707
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1678
1708
 
1679
1709
  "use strict";
1680
1710
  __webpack_require__.r(__webpack_exports__);
1681
- /* harmony import */ var _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
1711
+ /* harmony import */ var _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
1682
1712
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
1683
1713
 
1684
- /* harmony import */ var _components_radio_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
1714
+ /* harmony import */ var _components_radio_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
1685
1715
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Radio", function() { return _components_radio_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
1686
1716
 
1687
- /* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
1717
+ /* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
1688
1718
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Choice", function() { return _components_choice_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
1689
1719
 
1690
- /* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
1720
+ /* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
1691
1721
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
1692
1722
 
1693
- /* harmony import */ var _components_radio_group_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
1723
+ /* harmony import */ var _components_radio_group_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(15);
1694
1724
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _components_radio_group_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
1695
1725
 
1696
- /* harmony import */ var _components_text_field_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
1726
+ /* harmony import */ var _components_text_field_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
1697
1727
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextField", function() { return _components_text_field_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
1698
1728
 
1699
- /* harmony import */ var _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(15);
1729
+ /* harmony import */ var _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(16);
1700
1730
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
1701
1731
 
1702
1732