@khanacademy/wonder-blocks-form 3.1.7 → 3.1.9

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-form
 
+## 3.1.9
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-clickable@2.4.4
+    -   @khanacademy/wonder-blocks-core@4.6.2
+    -   @khanacademy/wonder-blocks-icon@1.2.35
+    -   @khanacademy/wonder-blocks-layout@1.4.15
+    -   @khanacademy/wonder-blocks-typography@1.1.37
+
+## 3.1.8
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.4.3
+-   @khanacademy/wonder-blocks-core@4.6.1
+-   @khanacademy/wonder-blocks-icon@1.2.34
+-   @khanacademy/wonder-blocks-layout@1.4.14
+-   @khanacademy/wonder-blocks-typography@1.1.36
+
 ## 3.1.7
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,1067 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var aphrodite = require('aphrodite');
+var Color = require('@khanacademy/wonder-blocks-color');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var Icon = require('@khanacademy/wonder-blocks-icon');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
+
+const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const {
+  blue: blue$1,
+  red: red$1,
+  white: white$1,
+  offWhite: offWhite$1,
+  offBlack16: offBlack16$1,
+  offBlack32: offBlack32$1,
+  offBlack50: offBlack50$1
+} = Color__default["default"];
+const StyledInput$1 = wonderBlocksCore.addStyle("input");
+const checkboxCheck = {
+  small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
+};
+class CheckboxCore extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.handleChange = () => {
+      return;
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId,
+      hovered,
+      focused,
+      pressed
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$4);
+
+    const stateStyles = _generateStyles$1(checked, error);
+
+    const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles$1.disabled];
+    const props = {
+      "data-test-id": testId
+    };
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends__default["default"]({}, sharedProps, {
+      type: "checkbox",
+      "aria-invalid": error,
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      name: groupName,
+      onChange: this.handleChange,
+      style: defaultStyle
+    }, props)), checked && React__namespace.createElement(Icon__default["default"], {
+      color: disabled ? offBlack32$1 : white$1,
+      icon: checkboxCheck,
+      size: "small",
+      style: sharedStyles$1.checkIcon
+    }));
+  }
+
+}
+const size$1 = 16;
+const sharedStyles$1 = aphrodite.StyleSheet.create({
+  inputReset: {
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none"
+  },
+  default: {
+    height: size$1,
+    width: size$1,
+    minHeight: size$1,
+    minWidth: size$1,
+    margin: 0,
+    outline: "none",
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: 3
+  },
+  disabled: {
+    cursor: "auto",
+    backgroundColor: offWhite$1,
+    borderColor: offBlack16$1,
+    borderWidth: 1
+  },
+  checkIcon: {
+    position: "absolute",
+    pointerEvents: "none"
+  }
+});
+const fadedBlue$1 = Color.mix(Color.fade(blue$1, 0.16), white$1);
+const activeBlue$1 = Color.mix(offBlack32$1, blue$1);
+const fadedRed$1 = Color.mix(Color.fade(red$1, 0.08), white$1);
+const activeRed$1 = Color.mix(offBlack32$1, red$1);
+const colors$1 = {
+  default: {
+    faded: fadedBlue$1,
+    base: blue$1,
+    active: activeBlue$1
+  },
+  error: {
+    faded: fadedRed$1,
+    base: red$1,
+    active: activeRed$1
+  }
+};
+const styles$5 = {};
+
+const _generateStyles$1 = (checked, error) => {
+  const styleKey = `${String(checked)}-${String(error)}`;
+
+  if (styles$5[styleKey]) {
+    return styles$5[styleKey];
+  }
+
+  const palette = error ? colors$1.error : colors$1.default;
+  let newStyles = {};
+
+  if (checked) {
+    newStyles = {
+      default: {
+        backgroundColor: palette.base,
+        borderWidth: 0
+      },
+      focus: {
+        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+      },
+      active: {
+        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
+        background: palette.active
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: error ? fadedRed$1 : white$1,
+        borderColor: error ? red$1 : offBlack50$1
+      },
+      focus: {
+        backgroundColor: error ? fadedRed$1 : white$1,
+        borderColor: palette.base,
+        borderWidth: 2
+      },
+      active: {
+        backgroundColor: palette.faded,
+        borderColor: error ? activeRed$1 : blue$1,
+        borderWidth: 2
+      }
+    };
+  }
+
+  styles$5[styleKey] = aphrodite.StyleSheet.create(newStyles);
+  return styles$5[styleKey];
+};
+
+const _excluded$3 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const {
+  blue,
+  red,
+  white,
+  offWhite,
+  offBlack16,
+  offBlack32,
+  offBlack50
+} = Color__default["default"];
+const StyledInput = wonderBlocksCore.addStyle("input");
+class RadioCore extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.handleChange = () => {
+      return;
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      checked,
+      disabled,
+      error,
+      groupName,
+      id,
+      testId,
+      hovered,
+      focused,
+      pressed
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$3);
+
+    const stateStyles = _generateStyles(checked, error);
+
+    const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles.disabled];
+    const props = {
+      "data-test-id": testId
+    };
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput, _extends__default["default"]({}, sharedProps, {
+      type: "radio",
+      "aria-invalid": error,
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      name: groupName,
+      onChange: this.handleChange,
+      style: defaultStyle
+    }, props)), disabled && checked && React__namespace.createElement("span", {
+      style: disabledChecked
+    }));
+  }
+
+}
+const size = 16;
+const disabledChecked = {
+  position: "absolute",
+  top: size / 4,
+  left: size / 4,
+  height: size / 2,
+  width: size / 2,
+  borderRadius: "50%",
+  backgroundColor: offBlack32
+};
+const sharedStyles = aphrodite.StyleSheet.create({
+  inputReset: {
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none"
+  },
+  default: {
+    height: size,
+    width: size,
+    minHeight: size,
+    minWidth: size,
+    margin: 0,
+    outline: "none",
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: "50%"
+  },
+  disabled: {
+    cursor: "auto",
+    backgroundColor: offWhite,
+    borderColor: offBlack16,
+    borderWidth: 1
+  }
+});
+const fadedBlue = Color.mix(Color.fade(blue, 0.16), white);
+const activeBlue = Color.mix(offBlack32, blue);
+const fadedRed = Color.mix(Color.fade(red, 0.08), white);
+const activeRed = Color.mix(offBlack32, red);
+const colors = {
+  default: {
+    faded: fadedBlue,
+    base: blue,
+    active: activeBlue
+  },
+  error: {
+    faded: fadedRed,
+    base: red,
+    active: activeRed
+  }
+};
+const styles$4 = {};
+
+const _generateStyles = (checked, error) => {
+  const styleKey = `${String(checked)}-${String(error)}`;
+
+  if (styles$4[styleKey]) {
+    return styles$4[styleKey];
+  }
+
+  const palette = error ? colors.error : colors.default;
+  let newStyles = {};
+
+  if (checked) {
+    newStyles = {
+      default: {
+        backgroundColor: white,
+        borderColor: palette.base,
+        borderWidth: size / 4
+      },
+      focus: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+      },
+      active: {
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+        borderColor: palette.active
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: error ? red : offBlack50
+      },
+      focus: {
+        backgroundColor: error ? fadedRed : white,
+        borderColor: palette.base,
+        borderWidth: 2
+      },
+      active: {
+        backgroundColor: palette.faded,
+        borderColor: error ? activeRed : blue,
+        borderWidth: 2
+      }
+    };
+  }
+
+  styles$4[styleKey] = aphrodite.StyleSheet.create(newStyles);
+  return styles$4[styleKey];
+};
+
+const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
+class ChoiceInternal extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.handleLabelClick = event => {
+      event.preventDefault();
+    };
+
+    this.handleClick = () => {
+      const {
+        checked,
+        onChange,
+        variant
+      } = this.props;
+
+      if (variant === "radio" && checked) {
+        return;
+      }
+
+      onChange(!checked);
+    };
+  }
+
+  getChoiceCoreComponent() {
+    if (this.props.variant === "radio") {
+      return RadioCore;
+    } else {
+      return CheckboxCore;
+    }
+  }
+
+  getLabel() {
+    const {
+      disabled,
+      id,
+      label
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+      style: [styles$3.label, disabled && styles$3.disabledLabel]
+    }, React__namespace.createElement("label", {
+      htmlFor: id,
+      onClick: this.handleLabelClick
+    }, label));
+  }
+
+  getDescription(id) {
+    const {
+      description
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: styles$3.description,
+      id: id
+    }, description);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      label,
+      description,
+      style,
+      className,
+      variant
+    } = _this$props,
+          coreProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
+
+    const ChoiceCore = this.getChoiceCoreComponent();
+    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior();
+    return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
+      mockOnFirstRender: true,
+      scope: "choice"
+    }, ids => {
+      const descriptionId = description ? ids.get("description") : undefined;
+      return React__namespace.createElement(wonderBlocksCore.View, {
+        style: style,
+        className: className
+      }, React__namespace.createElement(ClickableBehavior, {
+        disabled: coreProps.disabled,
+        onClick: this.handleClick,
+        role: variant
+      }, (state, childrenProps) => {
+        return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
+          style: styles$3.wrapper
+        }, childrenProps, {
+          tabIndex: -1
+        }), React__namespace.createElement(ChoiceCore, _extends__default["default"]({}, coreProps, state, {
+          "aria-describedby": descriptionId
+        })), React__namespace.createElement(wonderBlocksLayout.Strut, {
+          size: Spacing__default["default"].xSmall_8
+        }), label && this.getLabel());
+      }), description && this.getDescription(descriptionId));
+    });
+  }
+
+}
+ChoiceInternal.defaultProps = {
+  checked: false,
+  disabled: false,
+  error: false
+};
+const styles$3 = aphrodite.StyleSheet.create({
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    outline: "none"
+  },
+  label: {
+    userSelect: "none",
+    marginTop: -2
+  },
+  disabledLabel: {
+    color: Color__default["default"].offBlack32
+  },
+  description: {
+    marginLeft: Spacing__default["default"].medium_16 + Spacing__default["default"].xSmall_8,
+    marginTop: Spacing__default["default"].xxxSmall_4,
+    color: Color__default["default"].offBlack64
+  }
+});
+
+class Checkbox extends React__namespace.Component {
+  render() {
+    return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({
+      variant: "checkbox"
+    }, this.props));
+  }
+
+}
+Checkbox.defaultProps = {
+  disabled: false,
+  error: false
+};
+
+class Radio extends React__namespace.Component {
+  render() {
+    return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({
+      variant: "radio"
+    }, this.props));
+  }
+
+}
+Radio.defaultProps = {
+  disabled: false,
+  error: false
+};
+
+const _excluded$1 = ["value", "variant"];
+class Choice extends React__namespace.Component {
+  getChoiceComponent(variant) {
+    if (variant === "checkbox") {
+      return Checkbox;
+    } else {
+      return Radio;
+    }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      variant
+    } = _this$props,
+          remainingProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
+
+    const ChoiceComponent = this.getChoiceComponent(variant);
+    return React__namespace.createElement(ChoiceComponent, remainingProps);
+  }
+
+}
+Choice.defaultProps = {
+  checked: false,
+  disabled: false,
+  onChange: () => {}
+};
+
+const styles$2 = aphrodite.StyleSheet.create({
+  fieldset: {
+    border: "none",
+    padding: 0,
+    margin: 0
+  },
+  legend: {
+    padding: 0
+  },
+  description: {
+    marginTop: Spacing__default["default"].xxxSmall_4,
+    color: Color__default["default"].offBlack64
+  },
+  error: {
+    marginTop: Spacing__default["default"].xxxSmall_4,
+    color: Color__default["default"].red
+  },
+  defaultLineGap: {
+    marginTop: Spacing__default["default"].xSmall_8
+  }
+});
+
+const StyledFieldset$1 = wonderBlocksCore.addStyle("fieldset");
+const StyledLegend$1 = wonderBlocksCore.addStyle("legend");
+class CheckboxGroup extends React__namespace.Component {
+  handleChange(changedValue, originalCheckedState) {
+    const {
+      onChange,
+      selectedValues
+    } = this.props;
+
+    if (originalCheckedState) {
+      const index = selectedValues.indexOf(changedValue);
+      const updatedSelection = [].concat(selectedValues.slice(0, index), selectedValues.slice(index + 1));
+      onChange(updatedSelection);
+    } else {
+      onChange([].concat(selectedValues, [changedValue]));
+    }
+  }
+
+  render() {
+    const {
+      children,
+      label,
+      description,
+      errorMessage,
+      groupName,
+      selectedValues,
+      style,
+      testId
+    } = this.props;
+    const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
+    return React__namespace.createElement(StyledFieldset$1, {
+      "data-test-id": testId,
+      style: styles$2.fieldset
+    }, React__namespace.createElement(wonderBlocksCore.View, {
+      style: style
+    }, label && React__namespace.createElement(StyledLegend$1, {
+      style: styles$2.legend
+    }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: styles$2.description
+    }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: styles$2.error
+    }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].small_12
+    }), allChildren.map((child, index) => {
+      const {
+        style,
+        value
+      } = child.props;
+      const checked = selectedValues.includes(value);
+      return React__namespace.cloneElement(child, {
+        checked: checked,
+        error: !!errorMessage,
+        groupName: groupName,
+        id: `${groupName}-${value}`,
+        key: value,
+        onChange: () => this.handleChange(value, checked),
+        style: [index > 0 && styles$2.defaultLineGap, style],
+        variant: "checkbox"
+      });
+    })));
+  }
+
+}
+
+const StyledFieldset = wonderBlocksCore.addStyle("fieldset");
+const StyledLegend = wonderBlocksCore.addStyle("legend");
+class RadioGroup extends React__namespace.Component {
+  handleChange(changedValue) {
+    this.props.onChange(changedValue);
+  }
+
+  render() {
+    const {
+      children,
+      label,
+      description,
+      errorMessage,
+      groupName,
+      selectedValue,
+      style,
+      testId
+    } = this.props;
+    const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
+    return React__namespace.createElement(StyledFieldset, {
+      "data-test-id": testId,
+      style: styles$2.fieldset
+    }, React__namespace.createElement(wonderBlocksCore.View, {
+      style: style
+    }, label && React__namespace.createElement(StyledLegend, {
+      style: styles$2.legend
+    }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: styles$2.description
+    }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: styles$2.error
+    }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].small_12
+    }), allChildren.map((child, index) => {
+      const {
+        style,
+        value
+      } = child.props;
+      const checked = selectedValue === value;
+      return React__namespace.cloneElement(child, {
+        checked: checked,
+        error: !!errorMessage,
+        groupName: groupName,
+        id: `${groupName}-${value}`,
+        key: value,
+        onChange: () => this.handleChange(value),
+        style: [index > 0 && styles$2.defaultLineGap, style],
+        variant: "radio"
+      });
+    })));
+  }
+
+}
+
+const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const defaultErrorMessage = "This field is required.";
+
+class TextField extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      focused: false
+    };
+
+    this.maybeValidate = newValue => {
+      const {
+        validate,
+        onValidate,
+        required
+      } = this.props;
+
+      if (validate) {
+        const maybeError = validate(newValue) || null;
+        this.setState({
+          error: maybeError
+        }, () => {
+          if (onValidate) {
+            onValidate(maybeError);
+          }
+        });
+      } else if (required) {
+        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+        const maybeError = newValue ? null : requiredString;
+        this.setState({
+          error: maybeError
+        }, () => {
+          if (onValidate) {
+            onValidate(maybeError);
+          }
+        });
+      }
+    };
+
+    this.handleChange = event => {
+      const {
+        onChange
+      } = this.props;
+      const newValue = event.target.value;
+      this.maybeValidate(newValue);
+      onChange(newValue);
+    };
+
+    this.handleFocus = event => {
+      const {
+        onFocus
+      } = this.props;
+      this.setState({
+        focused: true
+      }, () => {
+        if (onFocus) {
+          onFocus(event);
+        }
+      });
+    };
+
+    this.handleBlur = event => {
+      const {
+        onBlur
+      } = this.props;
+      this.setState({
+        focused: false
+      }, () => {
+        if (onBlur) {
+          onBlur(event);
+        }
+      });
+    };
+
+    if (props.validate && props.value !== "") {
+      this.state.error = props.validate(props.value) || null;
+    }
+  }
+
+  componentDidMount() {
+    if (this.props.value !== "") {
+      this.maybeValidate(this.props.value);
+    }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      id,
+      type,
+      value,
+      disabled,
+      onKeyDown,
+      placeholder,
+      light,
+      style,
+      testId,
+      readOnly,
+      autoComplete,
+      forwardedRef
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+
+    return React__namespace.createElement("input", _extends__default["default"]({
+      className: aphrodite.css([styles$1.input, wonderBlocksTypography.styles.LabelMedium, styles$1.default, disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : this.state.error && [styles$1.error, light && styles$1.errorLight], style && style]),
+      id: id,
+      type: type,
+      placeholder: placeholder,
+      value: value,
+      disabled: disabled,
+      onChange: this.handleChange,
+      onKeyDown: onKeyDown,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      "data-test-id": testId,
+      readOnly: readOnly,
+      autoComplete: autoComplete,
+      ref: forwardedRef
+    }, otherProps));
+  }
+
+}
+
+TextField.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+const styles$1 = aphrodite.StyleSheet.create({
+  input: {
+    width: "100%",
+    height: 40,
+    borderRadius: 4,
+    boxSizing: "border-box",
+    paddingLeft: Spacing__default["default"].medium_16,
+    margin: 0,
+    outline: "none",
+    boxShadow: "none"
+  },
+  default: {
+    background: Color__default["default"].white,
+    border: `1px solid ${Color__default["default"].offBlack16}`,
+    color: Color__default["default"].offBlack,
+    "::placeholder": {
+      color: Color__default["default"].offBlack64
+    }
+  },
+  error: {
+    background: `${Color.mix(Color.fade(Color__default["default"].red, 0.06), Color__default["default"].white)}`,
+    border: `1px solid ${Color__default["default"].red}`,
+    color: Color__default["default"].offBlack,
+    "::placeholder": {
+      color: Color__default["default"].offBlack64
+    }
+  },
+  disabled: {
+    background: Color__default["default"].offWhite,
+    border: `1px solid ${Color__default["default"].offBlack16}`,
+    color: Color__default["default"].offBlack64,
+    "::placeholder": {
+      color: Color__default["default"].offBlack32
+    }
+  },
+  focused: {
+    background: Color__default["default"].white,
+    border: `1px solid ${Color__default["default"].blue}`,
+    color: Color__default["default"].offBlack,
+    "::placeholder": {
+      color: Color__default["default"].offBlack64
+    }
+  },
+  defaultLight: {
+    boxShadow: `0px 0px 0px 1px ${Color__default["default"].blue}, 0px 0px 0px 2px ${Color__default["default"].white}`
+  },
+  errorLight: {
+    boxShadow: `0px 0px 0px 1px ${Color__default["default"].red}, 0px 0px 0px 2px ${Color__default["default"].white}`
+  }
+});
+var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
+  forwardedRef: ref
+})));
+
+const StyledSpan = wonderBlocksCore.addStyle("span");
+class FieldHeading extends React__namespace.Component {
+  renderLabel() {
+    const {
+      label,
+      id,
+      required,
+      testId
+    } = this.props;
+    const requiredIcon = React__namespace.createElement(StyledSpan, {
+      style: styles.required,
+      "aria-hidden": true
+    }, " ", "*");
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+      style: styles.label,
+      tag: "label",
+      htmlFor: id && `${id}-field`,
+      testId: testId && `${testId}-label`
+    }, label, required && requiredIcon), React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].xxxSmall_4
+    }));
+  }
+
+  maybeRenderDescription() {
+    const {
+      description,
+      testId
+    } = this.props;
+
+    if (!description) {
+      return null;
+    }
+
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: styles.description,
+      testId: testId && `${testId}-description`
+    }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].xxxSmall_4
+    }));
+  }
+
+  maybeRenderError() {
+    const {
+      error,
+      id,
+      testId
+    } = this.props;
+
+    if (!error) {
+      return null;
+    }
+
+    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].small_12
+    }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: styles.error,
+      role: "alert",
+      id: id && `${id}-error`,
+      testId: testId && `${testId}-error`
+    }, error));
+  }
+
+  render() {
+    const {
+      field,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: style
+    }, this.renderLabel(), this.maybeRenderDescription(), React__namespace.createElement(wonderBlocksLayout.Strut, {
+      size: Spacing__default["default"].xSmall_8
+    }), field, this.maybeRenderError());
+  }
+
+}
+const styles = aphrodite.StyleSheet.create({
+  label: {
+    color: Color__default["default"].offBlack
+  },
+  description: {
+    color: Color__default["default"].offBlack64
+  },
+  error: {
+    color: Color__default["default"].red
+  },
+  required: {
+    color: Color__default["default"].red
+  }
+});
+
+class LabeledTextField extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleValidate = errorMessage => {
+      const {
+        onValidate
+      } = this.props;
+      this.setState({
+        error: errorMessage
+      }, () => {
+        if (onValidate) {
+          onValidate(errorMessage);
+        }
+      });
+    };
+
+    this.handleFocus = event => {
+      const {
+        onFocus
+      } = this.props;
+      this.setState({
+        focused: true
+      }, () => {
+        if (onFocus) {
+          onFocus(event);
+        }
+      });
+    };
+
+    this.handleBlur = event => {
+      const {
+        onBlur
+      } = this.props;
+      this.setState({
+        focused: false
+      }, () => {
+        if (onBlur) {
+          onBlur(event);
+        }
+      });
+    };
+
+    this.state = {
+      error: null,
+      focused: false
+    };
+  }
+
+  render() {
+    const {
+      id,
+      type,
+      label,
+      description,
+      value,
+      disabled,
+      required,
+      validate,
+      onChange,
+      onKeyDown,
+      placeholder,
+      light,
+      style,
+      testId,
+      readOnly,
+      autoComplete,
+      forwardedRef,
+      ariaDescribedby
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+      id: id,
+      scope: "labeled-text-field"
+    }, uniqueId => React__namespace.createElement(FieldHeading, {
+      id: uniqueId,
+      testId: testId,
+      style: style,
+      field: React__namespace.createElement(TextField$1, {
+        id: `${uniqueId}-field`,
+        "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
+        "aria-invalid": this.state.error ? "true" : "false",
+        "aria-required": required ? "true" : "false",
+        required: required,
+        testId: testId && `${testId}-field`,
+        type: type,
+        value: value,
+        placeholder: placeholder,
+        disabled: disabled,
+        validate: validate,
+        onValidate: this.handleValidate,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        light: light,
+        readOnly: readOnly,
+        autoComplete: autoComplete,
+        ref: forwardedRef
+      }),
+      label: label,
+      description: description,
+      required: !!required,
+      error: !this.state.focused && this.state.error || ""
+    }));
+  }
+
+}
+
+LabeledTextField.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, props, {
+  forwardedRef: ref
+})));
+
+exports.Checkbox = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
+exports.Choice = Choice;
+exports.LabeledTextField = labeledTextField;
+exports.RadioGroup = RadioGroup;
+exports.TextField = TextField$1;

package/dist/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export * from "../src/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,19 +16,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.2",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.33",
-    "@khanacademy/wonder-blocks-layout": "^1.4.13",
+    "@khanacademy/wonder-blocks-core": "^4.6.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.35",
+    "@khanacademy/wonder-blocks-layout": "^1.4.15",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.35"
+    "@khanacademy/wonder-blocks-typography": "^1.1.37"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.5.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
 }