@khanacademy/wonder-blocks-form 2.2.1

package/dist/index.js

@@ -0,0 +1,1419 @@
+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 = 11);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 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 || 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["default"] = module.exports, module.exports.__esModule = true;
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-layout");
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+module.exports = _objectWithoutPropertiesLoose;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-clickable");
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon");
+
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "Checkbox", function() { return /* reexport */ checkbox_Checkbox; });
+__webpack_require__.d(__webpack_exports__, "Radio", function() { return /* reexport */ radio_Radio; });
+__webpack_require__.d(__webpack_exports__, "Choice", function() { return /* reexport */ choice_Choice; });
+__webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return /* reexport */ checkbox_group_CheckboxGroup; });
+__webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return /* reexport */ radio_group_RadioGroup; });
+__webpack_require__.d(__webpack_exports__, "TextField", function() { return /* reexport */ text_field; });
+__webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return /* reexport */ labeled_text_field; });
+
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
+var helpers_extends = __webpack_require__(5);
+var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
+var objectWithoutPropertiesLoose = __webpack_require__(8);
+var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose);
+
+// EXTERNAL MODULE: external "aphrodite"
+var external_aphrodite_ = __webpack_require__(6);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
+var wonder_blocks_color_ = __webpack_require__(1);
+var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(2);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
+var wonder_blocks_clickable_ = __webpack_require__(9);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-layout"
+var wonder_blocks_layout_ = __webpack_require__(7);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
+var wonder_blocks_spacing_ = __webpack_require__(3);
+var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
+var wonder_blocks_typography_ = __webpack_require__(4);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
+var wonder_blocks_icon_ = __webpack_require__(10);
+var wonder_blocks_icon_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/checkbox-core.js
+
+
+const _excluded = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+
+
+
+
+
+const {
+  blue,
+  red,
+  white,
+  offWhite,
+  offBlack16,
+  offBlack32,
+  offBlack50
+} = wonder_blocks_color_default.a;
+const StyledInput = Object(wonder_blocks_core_["addStyle"])("input");
+const checkboxCheck = {
+  small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
+};
+/**
+ * The internal stateless ☑️ Checkbox
+ */
+
+class checkbox_core_CheckboxCore extends external_react_["Component"] {
+  constructor(...args) {
+    super(...args);
+
+    this.handleChange = () => {
+      // Empty because change is handled by ClickableBehavior
+      return;
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId,
+      hovered,
+      focused,
+      pressed
+    } = _this$props,
+          sharedProps = objectWithoutPropertiesLoose_default()(_this$props, _excluded);
+
+    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__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](StyledInput, extends_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__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+      color: disabled ? offBlack32 : white,
+      icon: checkboxCheck,
+      size: "small",
+      style: sharedStyles.checkIcon
+    }));
+  }
+
+}
+const size = 16;
+const sharedStyles = external_aphrodite_["StyleSheet"].create({
+  // Reset the default styled input element
+  inputReset: {
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none"
+  },
+  default: {
+    height: size,
+    width: size,
+    minHeight: size,
+    minWidth: size,
+    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(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(blue, 0.16), white);
+const activeBlue = Object(wonder_blocks_color_["mix"])(offBlack32, blue);
+const fadedRed = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(red, 0.08), white);
+const activeRed = Object(wonder_blocks_color_["mix"])(offBlack32, red);
+const colors = {
+  default: {
+    faded: fadedBlue,
+    base: blue,
+    active: activeBlue
+  },
+  error: {
+    faded: fadedRed,
+    base: red,
+    active: activeRed
+  }
+};
+const styles = {};
+
+const _generateStyles = (checked, error) => {
+  // "hash" the parameters
+  const styleKey = `${String(checked)}-${String(error)}`;
+
+  if (styles[styleKey]) {
+    return styles[styleKey];
+  }
+
+  const palette = error ? colors.error : colors.default;
+  let newStyles = {};
+
+  if (checked) {
+    newStyles = {
+      default: {
+        backgroundColor: palette.base,
+        borderWidth: 0
+      },
+      focus: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+      },
+      active: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+        background: palette.active
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: error ? red : offBlack50
+      },
+      focus: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: palette.base,
+        borderWidth: 2
+      },
+      active: {
+        backgroundColor: palette.faded,
+        borderColor: error ? activeRed : blue,
+        borderWidth: 2
+      }
+    };
+  }
+
+  styles[styleKey] = external_aphrodite_["StyleSheet"].create(newStyles);
+  return styles[styleKey];
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/radio-core.js
+
+
+const radio_core_excluded = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+
+
+
+
+const {
+  blue: radio_core_blue,
+  red: radio_core_red,
+  white: radio_core_white,
+  offWhite: radio_core_offWhite,
+  offBlack16: radio_core_offBlack16,
+  offBlack32: radio_core_offBlack32,
+  offBlack50: radio_core_offBlack50
+} = wonder_blocks_color_default.a;
+const radio_core_StyledInput = Object(wonder_blocks_core_["addStyle"])("input");
+/**
+ * The internal stateless 🔘 Radio button
+ */
+
+class radio_core_RadioCore extends external_react_["Component"] {
+  constructor(...args) {
+    super(...args);
+
+    this.handleChange = () => {
+      // Empty because change is handled by ClickableBehavior
+      return;
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId,
+      hovered,
+      focused,
+      pressed
+    } = _this$props,
+          sharedProps = objectWithoutPropertiesLoose_default()(_this$props, radio_core_excluded);
+
+    const stateStyles = radio_core_generateStyles(checked, error);
+
+    const defaultStyle = [radio_core_sharedStyles.inputReset, radio_core_sharedStyles.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && radio_core_sharedStyles.disabled];
+    const props = {
+      "data-test-id": testId
+    };
+    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](radio_core_StyledInput, extends_default()({}, sharedProps, {
+      type: "radio",
+      "aria-invalid": error,
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      name: groupName // Need to specify because this is a controlled React form
+      // component, but we handle the click via ClickableBehavior
+      ,
+      onChange: this.handleChange,
+      style: defaultStyle
+    }, props)), disabled && checked && /*#__PURE__*/external_react_["createElement"]("span", {
+      style: disabledChecked
+    }));
+  }
+
+}
+const radio_core_size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
+
+const disabledChecked = {
+  position: "absolute",
+  top: radio_core_size / 4,
+  left: radio_core_size / 4,
+  height: radio_core_size / 2,
+  width: radio_core_size / 2,
+  borderRadius: "50%",
+  backgroundColor: radio_core_offBlack32
+};
+const radio_core_sharedStyles = external_aphrodite_["StyleSheet"].create({
+  // Reset the default styled input element
+  inputReset: {
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none"
+  },
+  default: {
+    height: radio_core_size,
+    width: radio_core_size,
+    minHeight: radio_core_size,
+    minWidth: radio_core_size,
+    margin: 0,
+    outline: "none",
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: "50%"
+  },
+  disabled: {
+    cursor: "auto",
+    backgroundColor: radio_core_offWhite,
+    borderColor: radio_core_offBlack16,
+    borderWidth: 1
+  }
+});
+const radio_core_fadedBlue = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(radio_core_blue, 0.16), radio_core_white);
+const radio_core_activeBlue = Object(wonder_blocks_color_["mix"])(radio_core_offBlack32, radio_core_blue);
+const radio_core_fadedRed = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(radio_core_red, 0.08), radio_core_white);
+const radio_core_activeRed = Object(wonder_blocks_color_["mix"])(radio_core_offBlack32, radio_core_red);
+const radio_core_colors = {
+  default: {
+    faded: radio_core_fadedBlue,
+    base: radio_core_blue,
+    active: radio_core_activeBlue
+  },
+  error: {
+    faded: radio_core_fadedRed,
+    base: radio_core_red,
+    active: radio_core_activeRed
+  }
+};
+const radio_core_styles = {};
+
+const radio_core_generateStyles = (checked, error) => {
+  // "hash" the parameters
+  const styleKey = `${String(checked)}-${String(error)}`;
+
+  if (radio_core_styles[styleKey]) {
+    return radio_core_styles[styleKey];
+  }
+
+  const palette = error ? radio_core_colors.error : radio_core_colors.default;
+  let newStyles = {};
+
+  if (checked) {
+    newStyles = {
+      default: {
+        backgroundColor: radio_core_white,
+        borderColor: palette.base,
+        borderWidth: radio_core_size / 4
+      },
+      focus: {
+        boxShadow: `0 0 0 1px ${radio_core_white}, 0 0 0 3px ${palette.base}`
+      },
+      active: {
+        boxShadow: `0 0 0 1px ${radio_core_white}, 0 0 0 3px ${palette.active}`,
+        borderColor: palette.active
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: error ? radio_core_fadedRed : radio_core_white,
+        borderColor: error ? radio_core_red : radio_core_offBlack50
+      },
+      focus: {
+        backgroundColor: error ? radio_core_fadedRed : radio_core_white,
+        borderColor: palette.base,
+        borderWidth: 2
+      },
+      active: {
+        backgroundColor: palette.faded,
+        borderColor: error ? radio_core_activeRed : radio_core_blue,
+        borderWidth: 2
+      }
+    };
+  }
+
+  radio_core_styles[styleKey] = external_aphrodite_["StyleSheet"].create(newStyles);
+  return radio_core_styles[styleKey];
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/choice-internal.js
+
+
+const choice_internal_excluded = ["label", "description", "onChange", "style", "className", "variant"];
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * 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 choice_internal_ChoiceInternal extends external_react_["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_RadioCore;
+    } else {
+      return checkbox_core_CheckboxCore;
+    }
+  }
+
+  getLabel() {
+    const {
+      disabled,
+      id,
+      label
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
+      style: [choice_internal_styles.label, disabled && choice_internal_styles.disabledLabel]
+    }, /*#__PURE__*/external_react_["createElement"]("label", {
+      htmlFor: id,
+      onClick: this.handleLabelClick
+    }, label));
+  }
+
+  getDescription(id) {
+    const {
+      description
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: choice_internal_styles.description,
+      id: id
+    }, description);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      label,
+      description,
+      style,
+      className,
+      variant
+    } = _this$props,
+          coreProps = objectWithoutPropertiesLoose_default()(_this$props, choice_internal_excluded);
+
+    const ChoiceCore = this.getChoiceCoreComponent();
+    const ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])();
+    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["UniqueIDProvider"], {
+      mockOnFirstRender: true,
+      scope: "choice"
+    }, ids => {
+      const descriptionId = description && ids.get("description");
+      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+        style: style,
+        className: className
+      }, /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+        disabled: coreProps.disabled,
+        onClick: this.handleClick,
+        role: variant
+      }, (state, childrenProps) => {
+        return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], extends_default()({
+          style: choice_internal_styles.wrapper
+        }, childrenProps, {
+          // We are resetting the tabIndex=0 from handlers
+          // because the ChoiceCore component will receive
+          // focus on basis of it being an input element.
+          tabIndex: -1
+        }), /*#__PURE__*/external_react_["createElement"](ChoiceCore, extends_default()({}, coreProps, state, {
+          "aria-describedby": descriptionId
+        })), /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+          size: wonder_blocks_spacing_default.a.xSmall_8
+        }), label && this.getLabel());
+      }), description && this.getDescription(descriptionId));
+    });
+  }
+
+}
+choice_internal_ChoiceInternal.defaultProps = {
+  checked: false,
+  disabled: false,
+  error: false
+};
+const choice_internal_styles = external_aphrodite_["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: wonder_blocks_color_default.a.offBlack32
+  },
+  description: {
+    // 16 for icon + 8 for spacing strut
+    marginLeft: wonder_blocks_spacing_default.a.medium_16 + wonder_blocks_spacing_default.a.xSmall_8,
+    marginTop: wonder_blocks_spacing_default.a.xxxSmall_4,
+    color: wonder_blocks_color_default.a.offBlack64
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/checkbox.js
+
+
+ // Keep synced with ChoiceComponentProps in ../util/types.js
+
+/**
+ * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
+ * label and description props.
+ *
+ * If you want a whole group of Checkbox[es] that are related, see the Choice
+ * and CheckboxGroup components.
+ */
+class checkbox_Checkbox extends external_react_["Component"] {
+  render() {
+    return /*#__PURE__*/external_react_["createElement"](choice_internal_ChoiceInternal, extends_default()({
+      variant: "checkbox"
+    }, this.props));
+  }
+
+}
+checkbox_Checkbox.defaultProps = {
+  disabled: false,
+  error: false
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/radio.js
+
+
+ // Keep synced with ChoiceComponentProps in ../util/types.js
+
+/**
+ * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
+ * optionally take label and description props.
+ *
+ * This component should not really be used by itself because radio buttons are
+ * often grouped together. See RadioGroup.
+ */
+class radio_Radio extends external_react_["Component"] {
+  render() {
+    return /*#__PURE__*/external_react_["createElement"](choice_internal_ChoiceInternal, extends_default()({
+      variant: "radio"
+    }, this.props));
+  }
+
+}
+radio_Radio.defaultProps = {
+  disabled: false,
+  error: false
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/choice.js
+
+const choice_excluded = ["value", "variant"];
+
+
+
+
+/**
+ * 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.
+ */
+class choice_Choice extends external_react_["Component"] {
+  getChoiceComponent(variant) {
+    if (variant === "checkbox") {
+      return checkbox_Checkbox;
+    } else {
+      return radio_Radio;
+    }
+  }
+
+  render() {
+    // we don't need this going into the ChoiceComponent
+    // eslint-disable-next-line no-unused-vars
+    const _this$props = this.props,
+          {
+      variant
+    } = _this$props,
+          remainingProps = objectWithoutPropertiesLoose_default()(_this$props, choice_excluded);
+
+    const ChoiceComponent = this.getChoiceComponent(variant);
+    return /*#__PURE__*/external_react_["createElement"](ChoiceComponent, remainingProps);
+  }
+
+}
+choice_Choice.defaultProps = {
+  checked: false,
+  disabled: false,
+  onChange: () => {}
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/group-styles.js
+
+
+
+const group_styles_styles = external_aphrodite_["StyleSheet"].create({
+  fieldset: {
+    border: "none",
+    padding: 0,
+    margin: 0
+  },
+  legend: {
+    padding: 0
+  },
+  description: {
+    marginTop: wonder_blocks_spacing_default.a.xxxSmall_4,
+    color: wonder_blocks_color_default.a.offBlack64
+  },
+  error: {
+    marginTop: wonder_blocks_spacing_default.a.xxxSmall_4,
+    color: wonder_blocks_color_default.a.red
+  },
+  defaultLineGap: {
+    marginTop: wonder_blocks_spacing_default.a.xSmall_8
+  }
+});
+/* harmony default export */ var group_styles = (group_styles_styles);
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/checkbox-group.js
+
+
+
+
+
+
+const StyledFieldset = Object(wonder_blocks_core_["addStyle"])("fieldset");
+const StyledLegend = Object(wonder_blocks_core_["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.
+ */
+
+class checkbox_group_CheckboxGroup extends external_react_["Component"] {
+  handleChange(changedValue, originalCheckedState) {
+    const {
+      onChange,
+      selectedValues
+    } = this.props;
+
+    if (originalCheckedState) {
+      const index = selectedValues.indexOf(changedValue);
+      const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
+      onChange(updatedSelection);
+    } else {
+      onChange([].concat(selectedValues, [changedValue]));
+    }
+  }
+
+  render() {
+    const {
+      children,
+      label,
+      description,
+      errorMessage,
+      groupName,
+      selectedValues,
+      style,
+      testId
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](StyledFieldset, {
+      "data-test-id": testId,
+      style: group_styles.fieldset
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: style
+    }, typeof label === "string" ? /*#__PURE__*/external_react_["createElement"](StyledLegend, {
+      style: group_styles.legend
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: group_styles.description
+    }, description) : description && description, errorMessage && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: group_styles.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+      size: wonder_blocks_spacing_default.a.small_12
+    }), external_react_["Children"].map(children, (child, index) => {
+      const {
+        style,
+        value
+      } = child.props;
+      const checked = selectedValues.includes(value);
+      return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["cloneElement"](child, {
+        checked: checked,
+        error: !!errorMessage,
+        groupName: groupName,
+        id: `${groupName}-${value}`,
+        key: value,
+        onChange: () => this.handleChange(value, checked),
+        style: [index > 0 && group_styles.defaultLineGap, style],
+        variant: "checkbox"
+      }));
+    })));
+  }
+
+}
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/radio-group.js
+
+
+
+
+
+
+const radio_group_StyledFieldset = Object(wonder_blocks_core_["addStyle"])("fieldset");
+const radio_group_StyledLegend = Object(wonder_blocks_core_["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.
+ */
+
+class radio_group_RadioGroup extends external_react_["Component"] {
+  handleChange(changedValue) {
+    this.props.onChange(changedValue);
+  }
+
+  render() {
+    const {
+      children,
+      label,
+      description,
+      errorMessage,
+      groupName,
+      selectedValue,
+      style,
+      testId
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](radio_group_StyledFieldset, {
+      "data-test-id": testId,
+      style: group_styles.fieldset
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: style
+    }, label && /*#__PURE__*/external_react_["createElement"](radio_group_StyledLegend, {
+      style: group_styles.legend
+    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], null, label)), description && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: group_styles.description
+    }, description), errorMessage && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: group_styles.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+      size: wonder_blocks_spacing_default.a.small_12
+    }), external_react_["Children"].map(children, (child, index) => {
+      const {
+        style,
+        value
+      } = child.props;
+      const checked = selectedValue === value;
+      return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["cloneElement"](child, {
+        checked: checked,
+        error: !!errorMessage,
+        groupName: groupName,
+        id: `${groupName}-${value}`,
+        key: value,
+        onChange: () => this.handleChange(value),
+        style: [index > 0 && group_styles.defaultLineGap, style],
+        variant: "radio"
+      }));
+    })));
+  }
+
+}
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/text-field.js
+
+
+const text_field_excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "required", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange"];
+
+
+
+
+
+
+// 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 text_field_TextFieldInternal extends external_react_["Component"] {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      focused: false
+    };
+
+    this.maybeValidate = newValue => {
+      const {
+        validate,
+        onValidate
+      } = this.props;
+
+      if (validate) {
+        const maybeError = validate(newValue) || null;
+        this.setState({
+          error: maybeError
+        }, () => {
+          if (onValidate) {
+            onValidate(maybeError);
+          }
+        });
+      }
+    };
+
+    this.handleChange = event => {
+      const {
+        onChange
+      } = this.props;
+      const newValue = event.target.value;
+      this.maybeValidate(newValue);
+      onChange(newValue);
+    };
+
+    this.handleFocus = event => {
+      const {
+        onFocus
+      } = this.props;
+      this.setState({
+        focused: true
+      }, () => {
+        if (onFocus) {
+          onFocus(event);
+        }
+      });
+    };
+
+    this.handleBlur = event => {
+      const {
+        onBlur
+      } = this.props;
+      this.setState({
+        focused: false
+      }, () => {
+        if (onBlur) {
+          onBlur(event);
+        }
+      });
+    };
+
+    if (props.validate) {
+      // Ensures error is updated on unmounted server-side renders
+      this.state.error = props.validate(props.value) || null;
+    }
+  }
+
+  componentDidMount() {
+    this.maybeValidate(this.props.value);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      id,
+      type,
+      value,
+      disabled,
+      onKeyDown,
+      placeholder,
+      required,
+      light,
+      style,
+      testId,
+      readOnly,
+      autoComplete,
+      forwardedRef
+    } = _this$props,
+          otherProps = objectWithoutPropertiesLoose_default()(_this$props, text_field_excluded);
+
+    return /*#__PURE__*/external_react_["createElement"]("input", extends_default()({
+      className: Object(external_aphrodite_["css"])([text_field_styles.input, wonder_blocks_typography_["styles"].LabelMedium, text_field_styles.default, // Prioritizes disabled, then focused, then error (if any)
+      disabled ? text_field_styles.disabled : this.state.focused ? [text_field_styles.focused, light && text_field_styles.defaultLight] : this.state.error && [text_field_styles.error, light && text_field_styles.errorLight], style && style]),
+      id: id,
+      type: type,
+      placeholder: placeholder,
+      value: value,
+      disabled: disabled,
+      onChange: this.handleChange,
+      onKeyDown: onKeyDown,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      required: required,
+      "data-test-id": testId,
+      readOnly: readOnly,
+      autoComplete: autoComplete,
+      ref: forwardedRef
+    }, otherProps));
+  }
+
+}
+
+text_field_TextFieldInternal.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+const text_field_styles = external_aphrodite_["StyleSheet"].create({
+  input: {
+    width: "100%",
+    height: 40,
+    borderRadius: 4,
+    boxSizing: "border-box",
+    paddingLeft: wonder_blocks_spacing_default.a.medium_16,
+    margin: 0,
+    outline: "none",
+    boxShadow: "none"
+  },
+  default: {
+    background: wonder_blocks_color_default.a.white,
+    border: `1px solid ${wonder_blocks_color_default.a.offBlack16}`,
+    color: wonder_blocks_color_default.a.offBlack,
+    "::placeholder": {
+      color: wonder_blocks_color_default.a.offBlack64
+    }
+  },
+  error: {
+    background: `${Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(wonder_blocks_color_default.a.red, 0.06), wonder_blocks_color_default.a.white)}`,
+    border: `1px solid ${wonder_blocks_color_default.a.red}`,
+    color: wonder_blocks_color_default.a.offBlack,
+    "::placeholder": {
+      color: wonder_blocks_color_default.a.offBlack64
+    }
+  },
+  disabled: {
+    background: wonder_blocks_color_default.a.offWhite,
+    border: `1px solid ${wonder_blocks_color_default.a.offBlack16}`,
+    color: wonder_blocks_color_default.a.offBlack64,
+    "::placeholder": {
+      color: wonder_blocks_color_default.a.offBlack32
+    }
+  },
+  focused: {
+    background: wonder_blocks_color_default.a.white,
+    border: `1px solid ${wonder_blocks_color_default.a.blue}`,
+    color: wonder_blocks_color_default.a.offBlack,
+    "::placeholder": {
+      color: wonder_blocks_color_default.a.offBlack64
+    }
+  },
+  defaultLight: {
+    boxShadow: `0px 0px 0px 1px ${wonder_blocks_color_default.a.blue}, 0px 0px 0px 2px ${wonder_blocks_color_default.a.white}`
+  },
+  errorLight: {
+    boxShadow: `0px 0px 0px 1px ${wonder_blocks_color_default.a.red}, 0px 0px 0px 2px ${wonder_blocks_color_default.a.white}`
+  }
+});
+const TextField = /*#__PURE__*/external_react_["forwardRef"]((props, ref) => /*#__PURE__*/external_react_["createElement"](text_field_TextFieldInternal, extends_default()({}, props, {
+  forwardedRef: ref
+})));
+/* harmony default export */ var text_field = (TextField);
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/field-heading.js
+
+
+
+
+
+
+
+
+/**
+ * A FieldHeading is an element that provides a label, description, and error element
+ * to present better context and hints to any type of form field component.
+ */
+class field_heading_FieldHeading extends external_react_["Component"] {
+  renderLabel() {
+    const {
+      label,
+      id,
+      testId
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, typeof label === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
+      style: field_heading_styles.label,
+      tag: "label",
+      htmlFor: id && `${id}-field`,
+      testId: testId && `${testId}-label`
+    }, label) : label, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+      size: wonder_blocks_spacing_default.a.xxxSmall_4
+    }));
+  }
+
+  maybeRenderDescription() {
+    const {
+      description,
+      testId
+    } = this.props;
+
+    if (!description) {
+      return null;
+    }
+
+    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, typeof description === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: field_heading_styles.description,
+      testId: testId && `${testId}-description`
+    }, description) : description, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+      size: wonder_blocks_spacing_default.a.xxxSmall_4
+    }));
+  }
+
+  maybeRenderError() {
+    const {
+      error,
+      id,
+      testId
+    } = this.props;
+
+    if (!error) {
+      return null;
+    }
+
+    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+      size: wonder_blocks_spacing_default.a.small_12
+    }), typeof error === "string" ? /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
+      style: field_heading_styles.error,
+      role: "alert",
+      id: id && `${id}-error`,
+      testId: testId && `${testId}-error`
+    }, error) : error);
+  }
+
+  render() {
+    const {
+      field,
+      style
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+      style: style
+    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+      size: wonder_blocks_spacing_default.a.xSmall_8
+    }), field, this.maybeRenderError());
+  }
+
+}
+const field_heading_styles = external_aphrodite_["StyleSheet"].create({
+  label: {
+    color: wonder_blocks_color_default.a.offBlack
+  },
+  description: {
+    color: wonder_blocks_color_default.a.offBlack64
+  },
+  error: {
+    color: wonder_blocks_color_default.a.red
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/components/labeled-text-field.js
+
+
+
+
+
+
+// TODO(WB-1081): Change class name back to LabeledTextField after Styleguidist is gone.
+
+/**
+ * A LabeledTextField is an element used to accept a single line of text
+ * from the user paired with a label, description, and error field elements.
+ */
+class labeled_text_field_LabeledTextFieldInternal extends external_react_["Component"] {
+  constructor(props) {
+    super(props);
+
+    this.handleValidate = errorMessage => {
+      const {
+        onValidate
+      } = this.props;
+      this.setState({
+        error: errorMessage
+      }, () => {
+        if (onValidate) {
+          onValidate(errorMessage);
+        }
+      });
+    };
+
+    this.handleFocus = event => {
+      const {
+        onFocus
+      } = this.props;
+      this.setState({
+        focused: true
+      }, () => {
+        if (onFocus) {
+          onFocus(event);
+        }
+      });
+    };
+
+    this.handleBlur = event => {
+      const {
+        onBlur
+      } = this.props;
+      this.setState({
+        focused: false
+      }, () => {
+        if (onBlur) {
+          onBlur(event);
+        }
+      });
+    };
+
+    this.state = {
+      error: null,
+      focused: false
+    };
+  }
+
+  render() {
+    const {
+      id,
+      type,
+      label,
+      description,
+      value,
+      disabled,
+      validate,
+      onChange,
+      onKeyDown,
+      placeholder,
+      light,
+      style,
+      testId,
+      readOnly,
+      autoComplete,
+      forwardedRef
+    } = this.props;
+    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["IDProvider"], {
+      id: id,
+      scope: "labeled-text-field"
+    }, uniqueId => /*#__PURE__*/external_react_["createElement"](field_heading_FieldHeading, {
+      id: uniqueId,
+      testId: testId,
+      style: style,
+      field: /*#__PURE__*/external_react_["createElement"](text_field, {
+        id: `${uniqueId}-field`,
+        "aria-describedby": `${uniqueId}-error`,
+        "aria-invalid": this.state.error ? "true" : "false",
+        testId: testId && `${testId}-field`,
+        type: type,
+        value: value,
+        placeholder: placeholder,
+        disabled: disabled,
+        validate: validate,
+        onValidate: this.handleValidate,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        light: light,
+        readOnly: readOnly,
+        autoComplete: autoComplete,
+        ref: forwardedRef
+      }),
+      label: label,
+      description: description,
+      error: !this.state.focused && this.state.error || ""
+    }));
+  }
+
+}
+
+labeled_text_field_LabeledTextFieldInternal.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+const LabeledTextField = /*#__PURE__*/external_react_["forwardRef"]((props, ref) => /*#__PURE__*/external_react_["createElement"](labeled_text_field_LabeledTextFieldInternal, extends_default()({}, props, {
+  forwardedRef: ref
+})));
+/* harmony default export */ var labeled_text_field = (LabeledTextField);
+// CONCATENATED MODULE: ./packages/wonder-blocks-form/src/index.js
+
+
+
+
+
+
+
+
+
+/***/ })
+/******/ ]);