@khanacademy/wonder-blocks-form 2.2.1

package/dist/es/index.js

@@ -0,0 +1,1100 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { Component, createElement, Fragment, Children, cloneElement, forwardRef } from 'react';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { StyleSheet, css } from 'aphrodite';
+import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
+import { addStyle, UniqueIDProvider, View, IDProvider } from '@khanacademy/wonder-blocks-core';
+import { getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
+import { Strut } from '@khanacademy/wonder-blocks-layout';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { LabelMedium, LabelSmall, styles as styles$6 } from '@khanacademy/wonder-blocks-typography';
+import Icon from '@khanacademy/wonder-blocks-icon';
+
+const _excluded = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const {
+  blue,
+  red,
+  white,
+  offWhite,
+  offBlack16,
+  offBlack32,
+  offBlack50
+} = Color;
+const StyledInput = addStyle("input");
+const checkboxCheck = {
+  small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
+};
+/**
+ * The internal stateless ☑️ Checkbox
+ */
+
+class CheckboxCore extends 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(_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__*/createElement(Fragment, null, /*#__PURE__*/createElement(StyledInput, _extends({}, sharedProps, {
+      type: "checkbox",
+      "aria-invalid": error,
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      name: groupName // Need to specify because this is a controlled React form
+      // component, but we handle the click via ClickableBehavior
+      ,
+      onChange: this.handleChange,
+      style: defaultStyle
+    }, props)), checked && /*#__PURE__*/createElement(Icon, {
+      color: disabled ? offBlack32 : white,
+      icon: checkboxCheck,
+      size: "small",
+      style: sharedStyles.checkIcon
+    }));
+  }
+
+}
+const size = 16;
+const sharedStyles = 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 = mix(fade(blue, 0.16), white);
+const activeBlue = mix(offBlack32, blue);
+const fadedRed = mix(fade(red, 0.08), white);
+const activeRed = 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] = StyleSheet.create(newStyles);
+  return styles[styleKey];
+};
+
+const _excluded$1 = ["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;
+const StyledInput$1 = addStyle("input");
+/**
+ * The internal stateless 🔘 Radio button
+ */
+
+class RadioCore extends 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(_this$props, _excluded$1);
+
+    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 /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(StyledInput$1, _extends({}, sharedProps, {
+      type: "radio",
+      "aria-invalid": error,
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      name: groupName // Need to specify because this is a controlled React form
+      // component, but we handle the click via ClickableBehavior
+      ,
+      onChange: this.handleChange,
+      style: defaultStyle
+    }, props)), disabled && checked && /*#__PURE__*/createElement("span", {
+      style: disabledChecked
+    }));
+  }
+
+}
+const size$1 = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
+
+const disabledChecked = {
+  position: "absolute",
+  top: size$1 / 4,
+  left: size$1 / 4,
+  height: size$1 / 2,
+  width: size$1 / 2,
+  borderRadius: "50%",
+  backgroundColor: offBlack32$1
+};
+const sharedStyles$1 = StyleSheet.create({
+  // Reset the default styled input element
+  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: "50%"
+  },
+  disabled: {
+    cursor: "auto",
+    backgroundColor: offWhite$1,
+    borderColor: offBlack16$1,
+    borderWidth: 1
+  }
+});
+const fadedBlue$1 = mix(fade(blue$1, 0.16), white$1);
+const activeBlue$1 = mix(offBlack32$1, blue$1);
+const fadedRed$1 = mix(fade(red$1, 0.08), white$1);
+const activeRed$1 = 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$1 = {};
+
+const _generateStyles$1 = (checked, error) => {
+  // "hash" the parameters
+  const styleKey = `${String(checked)}-${String(error)}`;
+
+  if (styles$1[styleKey]) {
+    return styles$1[styleKey];
+  }
+
+  const palette = error ? colors$1.error : colors$1.default;
+  let newStyles = {};
+
+  if (checked) {
+    newStyles = {
+      default: {
+        backgroundColor: white$1,
+        borderColor: palette.base,
+        borderWidth: size$1 / 4
+      },
+      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}`,
+        borderColor: 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$1[styleKey] = StyleSheet.create(newStyles);
+  return styles$1[styleKey];
+};
+
+const _excluded$2 = ["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 ChoiceInternal extends 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 RadioCore;
+    } else {
+      return CheckboxCore;
+    }
+  }
+
+  getLabel() {
+    const {
+      disabled,
+      id,
+      label
+    } = this.props;
+    return /*#__PURE__*/createElement(LabelMedium, {
+      style: [styles$2.label, disabled && styles$2.disabledLabel]
+    }, /*#__PURE__*/createElement("label", {
+      htmlFor: id,
+      onClick: this.handleLabelClick
+    }, label));
+  }
+
+  getDescription(id) {
+    const {
+      description
+    } = this.props;
+    return /*#__PURE__*/createElement(LabelSmall, {
+      style: styles$2.description,
+      id: id
+    }, description);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      label,
+      description,
+      style,
+      className,
+      variant
+    } = _this$props,
+          coreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+
+    const ChoiceCore = this.getChoiceCoreComponent();
+    const ClickableBehavior = getClickableBehavior();
+    return /*#__PURE__*/createElement(UniqueIDProvider, {
+      mockOnFirstRender: true,
+      scope: "choice"
+    }, ids => {
+      const descriptionId = description && ids.get("description");
+      return /*#__PURE__*/createElement(View, {
+        style: style,
+        className: className
+      }, /*#__PURE__*/createElement(ClickableBehavior, {
+        disabled: coreProps.disabled,
+        onClick: this.handleClick,
+        role: variant
+      }, (state, childrenProps) => {
+        return /*#__PURE__*/createElement(View, _extends({
+          style: styles$2.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__*/createElement(ChoiceCore, _extends({}, coreProps, state, {
+          "aria-describedby": descriptionId
+        })), /*#__PURE__*/createElement(Strut, {
+          size: Spacing.xSmall_8
+        }), label && this.getLabel());
+      }), description && this.getDescription(descriptionId));
+    });
+  }
+
+}
+ChoiceInternal.defaultProps = {
+  checked: false,
+  disabled: false,
+  error: false
+};
+const styles$2 = StyleSheet.create({
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    outline: "none"
+  },
+  label: {
+    userSelect: "none",
+    // NOTE: The checkbox/radio button (height 16px) should be center
+    // aligned with the first line of the label. However, LabelMedium has a
+    // declared line height of 20px, so we need to adjust the top to get the
+    // desired alignment.
+    marginTop: -2
+  },
+  disabledLabel: {
+    color: Color.offBlack32
+  },
+  description: {
+    // 16 for icon + 8 for spacing strut
+    marginLeft: Spacing.medium_16 + Spacing.xSmall_8,
+    marginTop: Spacing.xxxSmall_4,
+    color: Color.offBlack64
+  }
+});
+
+/**
+ * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
+ * label and description props.
+ *
+ * If you want a whole group of Checkbox[es] that are related, see the Choice
+ * and CheckboxGroup components.
+ */
+class Checkbox extends Component {
+  render() {
+    return /*#__PURE__*/createElement(ChoiceInternal, _extends({
+      variant: "checkbox"
+    }, this.props));
+  }
+
+}
+Checkbox.defaultProps = {
+  disabled: false,
+  error: false
+};
+
+/**
+ * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
+ * optionally take label and description props.
+ *
+ * This component should not really be used by itself because radio buttons are
+ * often grouped together. See RadioGroup.
+ */
+class Radio extends Component {
+  render() {
+    return /*#__PURE__*/createElement(ChoiceInternal, _extends({
+      variant: "radio"
+    }, this.props));
+  }
+
+}
+Radio.defaultProps = {
+  disabled: false,
+  error: false
+};
+
+const _excluded$3 = ["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 extends Component {
+  getChoiceComponent(variant) {
+    if (variant === "checkbox") {
+      return Checkbox;
+    } else {
+      return 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(_this$props, _excluded$3);
+
+    const ChoiceComponent = this.getChoiceComponent(variant);
+    return /*#__PURE__*/createElement(ChoiceComponent, remainingProps);
+  }
+
+}
+Choice.defaultProps = {
+  checked: false,
+  disabled: false,
+  onChange: () => {}
+};
+
+const styles$3 = StyleSheet.create({
+  fieldset: {
+    border: "none",
+    padding: 0,
+    margin: 0
+  },
+  legend: {
+    padding: 0
+  },
+  description: {
+    marginTop: Spacing.xxxSmall_4,
+    color: Color.offBlack64
+  },
+  error: {
+    marginTop: Spacing.xxxSmall_4,
+    color: Color.red
+  },
+  defaultLineGap: {
+    marginTop: Spacing.xSmall_8
+  }
+});
+
+const StyledFieldset = addStyle("fieldset");
+const StyledLegend = 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 CheckboxGroup extends 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__*/createElement(StyledFieldset, {
+      "data-test-id": testId,
+      style: styles$3.fieldset
+    }, /*#__PURE__*/createElement(View, {
+      style: style
+    }, typeof label === "string" ? /*#__PURE__*/createElement(StyledLegend, {
+      style: styles$3.legend
+    }, /*#__PURE__*/createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/createElement(LabelSmall, {
+      style: styles$3.description
+    }, description) : description && description, errorMessage && /*#__PURE__*/createElement(LabelSmall, {
+      style: styles$3.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/createElement(Strut, {
+      size: Spacing.small_12
+    }), Children.map(children, (child, index) => {
+      const {
+        style,
+        value
+      } = child.props;
+      const checked = selectedValues.includes(value);
+      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/cloneElement(child, {
+        checked: checked,
+        error: !!errorMessage,
+        groupName: groupName,
+        id: `${groupName}-${value}`,
+        key: value,
+        onChange: () => this.handleChange(value, checked),
+        style: [index > 0 && styles$3.defaultLineGap, style],
+        variant: "checkbox"
+      }));
+    })));
+  }
+
+}
+
+const StyledFieldset$1 = addStyle("fieldset");
+const StyledLegend$1 = addStyle("legend");
+/**
+ * A radio group allows only single selection. Like CheckboxGroup, this
+ * component auto-populates many props for its children Choice components. The
+ * Choice component is exposed for the user to apply custom styles or to
+ * indicate which choices are disabled. The use of the groupName prop is
+ * important to maintain expected keyboard navigation behavior for
+ * accessibility.
+ */
+
+class RadioGroup extends Component {
+  handleChange(changedValue) {
+    this.props.onChange(changedValue);
+  }
+
+  render() {
+    const {
+      children,
+      label,
+      description,
+      errorMessage,
+      groupName,
+      selectedValue,
+      style,
+      testId
+    } = this.props;
+    return /*#__PURE__*/createElement(StyledFieldset$1, {
+      "data-test-id": testId,
+      style: styles$3.fieldset
+    }, /*#__PURE__*/createElement(View, {
+      style: style
+    }, label && /*#__PURE__*/createElement(StyledLegend$1, {
+      style: styles$3.legend
+    }, /*#__PURE__*/createElement(LabelMedium, null, label)), description && /*#__PURE__*/createElement(LabelSmall, {
+      style: styles$3.description
+    }, description), errorMessage && /*#__PURE__*/createElement(LabelSmall, {
+      style: styles$3.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/createElement(Strut, {
+      size: Spacing.small_12
+    }), Children.map(children, (child, index) => {
+      const {
+        style,
+        value
+      } = child.props;
+      const checked = selectedValue === value;
+      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/cloneElement(child, {
+        checked: checked,
+        error: !!errorMessage,
+        groupName: groupName,
+        id: `${groupName}-${value}`,
+        key: value,
+        onChange: () => this.handleChange(value),
+        style: [index > 0 && styles$3.defaultLineGap, style],
+        variant: "radio"
+      }));
+    })));
+  }
+
+}
+
+const _excluded$4 = ["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 TextFieldInternal extends 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(_this$props, _excluded$4);
+
+    return /*#__PURE__*/createElement("input", _extends({
+      className: css([styles$4.input, styles$6.LabelMedium, styles$4.default, // Prioritizes disabled, then focused, then error (if any)
+      disabled ? styles$4.disabled : this.state.focused ? [styles$4.focused, light && styles$4.defaultLight] : this.state.error && [styles$4.error, light && styles$4.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));
+  }
+
+}
+
+TextFieldInternal.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+const styles$4 = StyleSheet.create({
+  input: {
+    width: "100%",
+    height: 40,
+    borderRadius: 4,
+    boxSizing: "border-box",
+    paddingLeft: Spacing.medium_16,
+    margin: 0,
+    outline: "none",
+    boxShadow: "none"
+  },
+  default: {
+    background: Color.white,
+    border: `1px solid ${Color.offBlack16}`,
+    color: Color.offBlack,
+    "::placeholder": {
+      color: Color.offBlack64
+    }
+  },
+  error: {
+    background: `${mix(fade(Color.red, 0.06), Color.white)}`,
+    border: `1px solid ${Color.red}`,
+    color: Color.offBlack,
+    "::placeholder": {
+      color: Color.offBlack64
+    }
+  },
+  disabled: {
+    background: Color.offWhite,
+    border: `1px solid ${Color.offBlack16}`,
+    color: Color.offBlack64,
+    "::placeholder": {
+      color: Color.offBlack32
+    }
+  },
+  focused: {
+    background: Color.white,
+    border: `1px solid ${Color.blue}`,
+    color: Color.offBlack,
+    "::placeholder": {
+      color: Color.offBlack64
+    }
+  },
+  defaultLight: {
+    boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`
+  },
+  errorLight: {
+    boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`
+  }
+});
+const TextField = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(TextFieldInternal, _extends({}, props, {
+  forwardedRef: ref
+})));
+
+/**
+ * A FieldHeading is an element that provides a label, description, and error element
+ * to present better context and hints to any type of form field component.
+ */
+class FieldHeading extends Component {
+  renderLabel() {
+    const {
+      label,
+      id,
+      testId
+    } = this.props;
+    return /*#__PURE__*/createElement(Fragment, null, typeof label === "string" ? /*#__PURE__*/createElement(LabelMedium, {
+      style: styles$5.label,
+      tag: "label",
+      htmlFor: id && `${id}-field`,
+      testId: testId && `${testId}-label`
+    }, label) : label, /*#__PURE__*/createElement(Strut, {
+      size: Spacing.xxxSmall_4
+    }));
+  }
+
+  maybeRenderDescription() {
+    const {
+      description,
+      testId
+    } = this.props;
+
+    if (!description) {
+      return null;
+    }
+
+    return /*#__PURE__*/createElement(Fragment, null, typeof description === "string" ? /*#__PURE__*/createElement(LabelSmall, {
+      style: styles$5.description,
+      testId: testId && `${testId}-description`
+    }, description) : description, /*#__PURE__*/createElement(Strut, {
+      size: Spacing.xxxSmall_4
+    }));
+  }
+
+  maybeRenderError() {
+    const {
+      error,
+      id,
+      testId
+    } = this.props;
+
+    if (!error) {
+      return null;
+    }
+
+    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Strut, {
+      size: Spacing.small_12
+    }), typeof error === "string" ? /*#__PURE__*/createElement(LabelSmall, {
+      style: styles$5.error,
+      role: "alert",
+      id: id && `${id}-error`,
+      testId: testId && `${testId}-error`
+    }, error) : error);
+  }
+
+  render() {
+    const {
+      field,
+      style
+    } = this.props;
+    return /*#__PURE__*/createElement(View, {
+      style: style
+    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/createElement(Strut, {
+      size: Spacing.xSmall_8
+    }), field, this.maybeRenderError());
+  }
+
+}
+const styles$5 = StyleSheet.create({
+  label: {
+    color: Color.offBlack
+  },
+  description: {
+    color: Color.offBlack64
+  },
+  error: {
+    color: Color.red
+  }
+});
+
+// TODO(WB-1081): Change class name back to LabeledTextField after Styleguidist is gone.
+
+/**
+ * A LabeledTextField is an element used to accept a single line of text
+ * from the user paired with a label, description, and error field elements.
+ */
+class LabeledTextFieldInternal extends 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__*/createElement(IDProvider, {
+      id: id,
+      scope: "labeled-text-field"
+    }, uniqueId => /*#__PURE__*/createElement(FieldHeading, {
+      id: uniqueId,
+      testId: testId,
+      style: style,
+      field: /*#__PURE__*/createElement(TextField, {
+        id: `${uniqueId}-field`,
+        "aria-describedby": `${uniqueId}-error`,
+        "aria-invalid": this.state.error ? "true" : "false",
+        testId: testId && `${testId}-field`,
+        type: type,
+        value: value,
+        placeholder: placeholder,
+        disabled: disabled,
+        validate: validate,
+        onValidate: this.handleValidate,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        light: light,
+        readOnly: readOnly,
+        autoComplete: autoComplete,
+        ref: forwardedRef
+      }),
+      label: label,
+      description: description,
+      error: !this.state.focused && this.state.error || ""
+    }));
+  }
+
+}
+
+LabeledTextFieldInternal.defaultProps = {
+  type: "text",
+  disabled: false,
+  light: false
+};
+const LabeledTextField = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(LabeledTextFieldInternal, _extends({}, props, {
+  forwardedRef: ref
+})));
+
+export { Checkbox, CheckboxGroup, Choice, LabeledTextField, Radio, RadioGroup, TextField };