@khanacademy/wonder-blocks-form 2.3.0 → 2.4.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import _extends from '@babel/runtime/helpers/extends';
-import { Component, createElement, Fragment, Children, cloneElement, forwardRef } from 'react';
+import * as React from 'react';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { StyleSheet, css } from 'aphrodite';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
@@ -10,17 +10,17 @@ 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 _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
 const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
+  blue: blue$1,
+  red: red$1,
+  white: white$1,
+  offWhite: offWhite$1,
+  offBlack16: offBlack16$1,
+  offBlack32: offBlack32$1,
+  offBlack50: offBlack50$1
 } = Color;
-const StyledInput = addStyle("input");
+const StyledInput$1 = 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"
 };
@@ -28,7 +28,7 @@ const checkboxCheck = {
  * The internal stateless ☑️ Checkbox
  */
 
-class CheckboxCore extends Component {
+class CheckboxCore extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -51,15 +51,15 @@ class CheckboxCore extends Component {
       focused,
       pressed
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
 
-    const stateStyles = _generateStyles(checked, error);
+    const stateStyles = _generateStyles$1(checked, error);
 
-    const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, stateStyles.default, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus), disabled && sharedStyles.disabled];
+    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, _extends({}, sharedProps, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput$1, _extends({}, sharedProps, {
       type: "checkbox",
       "aria-invalid": error,
       checked: checked,
@@ -70,17 +70,17 @@ class CheckboxCore extends Component {
       ,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), checked && /*#__PURE__*/createElement(Icon, {
-      color: disabled ? offBlack32 : white,
+    }, props)), checked && /*#__PURE__*/React.createElement(Icon, {
+      color: disabled ? offBlack32$1 : white$1,
       icon: checkboxCheck,
       size: "small",
-      style: sharedStyles.checkIcon
+      style: sharedStyles$1.checkIcon
     }));
   }
 
 }
-const size = 16;
-const sharedStyles = StyleSheet.create({
+const size$1 = 16;
+const sharedStyles$1 = StyleSheet.create({
   // Reset the default styled input element
   inputReset: {
     appearance: "none",
@@ -88,10 +88,10 @@ const sharedStyles = StyleSheet.create({
     MozAppearance: "none"
   },
   default: {
-    height: size,
-    width: size,
-    minHeight: size,
-    minWidth: size,
+    height: size$1,
+    width: size$1,
+    minHeight: size$1,
+    minWidth: size$1,
     margin: 0,
     outline: "none",
     boxSizing: "border-box",
@@ -101,8 +101,8 @@ const sharedStyles = StyleSheet.create({
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
+    backgroundColor: offWhite$1,
+    borderColor: offBlack16$1,
     borderWidth: 1
   },
   checkIcon: {
@@ -110,33 +110,33 @@ const sharedStyles = StyleSheet.create({
     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 = {
+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,
-    base: blue,
-    active: activeBlue
+    faded: fadedBlue$1,
+    base: blue$1,
+    active: activeBlue$1
   },
   error: {
-    faded: fadedRed,
-    base: red,
-    active: activeRed
+    faded: fadedRed$1,
+    base: red$1,
+    active: activeRed$1
   }
 };
-const styles = {};
+const styles$5 = {};
 
-const _generateStyles = (checked, error) => {
+const _generateStyles$1 = (checked, error) => {
   // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
-  if (styles[styleKey]) {
-    return styles[styleKey];
+  if (styles$5[styleKey]) {
+    return styles$5[styleKey];
   }
 
-  const palette = error ? colors.error : colors.default;
+  const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
 
   if (checked) {
@@ -146,52 +146,52 @@ const _generateStyles = (checked, error) => {
         borderWidth: 0
       },
       focus: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
       },
       active: {
-        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
         background: palette.active
       }
     };
   } else {
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: error ? red : offBlack50
+        backgroundColor: error ? fadedRed$1 : white$1,
+        borderColor: error ? red$1 : offBlack50$1
       },
       focus: {
-        backgroundColor: error ? fadedRed : white,
+        backgroundColor: error ? fadedRed$1 : white$1,
         borderColor: palette.base,
         borderWidth: 2
       },
       active: {
         backgroundColor: palette.faded,
-        borderColor: error ? activeRed : blue,
+        borderColor: error ? activeRed$1 : blue$1,
         borderWidth: 2
       }
     };
   }
 
-  styles[styleKey] = StyleSheet.create(newStyles);
-  return styles[styleKey];
+  styles$5[styleKey] = StyleSheet.create(newStyles);
+  return styles$5[styleKey];
 };
 
-const _excluded$1 = ["checked", "disabled", "error", "groupName", "id", "testId", "hovered", "focused", "pressed", "waiting"];
+const _excluded$3 = ["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
+  blue,
+  red,
+  white,
+  offWhite,
+  offBlack16,
+  offBlack32,
+  offBlack50
 } = Color;
-const StyledInput$1 = addStyle("input");
+const StyledInput = addStyle("input");
 /**
  * The internal stateless 🔘 Radio button
  */
 
-class RadioCore extends Component {
+class RadioCore extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -214,15 +214,15 @@ class RadioCore extends Component {
       focused,
       pressed
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
 
-    const stateStyles = _generateStyles$1(checked, error);
+    const stateStyles = _generateStyles(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 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$1, _extends({}, sharedProps, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput, _extends({}, sharedProps, {
       type: "radio",
       "aria-invalid": error,
       checked: checked,
@@ -233,24 +233,24 @@ class RadioCore extends Component {
       ,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), disabled && checked && /*#__PURE__*/createElement("span", {
+    }, props)), disabled && checked && /*#__PURE__*/React.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 size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
 
 const disabledChecked = {
   position: "absolute",
-  top: size$1 / 4,
-  left: size$1 / 4,
-  height: size$1 / 2,
-  width: size$1 / 2,
+  top: size / 4,
+  left: size / 4,
+  height: size / 2,
+  width: size / 2,
   borderRadius: "50%",
-  backgroundColor: offBlack32$1
+  backgroundColor: offBlack32
 };
-const sharedStyles$1 = StyleSheet.create({
+const sharedStyles = StyleSheet.create({
   // Reset the default styled input element
   inputReset: {
     appearance: "none",
@@ -258,10 +258,10 @@ const sharedStyles$1 = StyleSheet.create({
     MozAppearance: "none"
   },
   default: {
-    height: size$1,
-    width: size$1,
-    minHeight: size$1,
-    minWidth: size$1,
+    height: size,
+    width: size,
+    minHeight: size,
+    minWidth: size,
     margin: 0,
     outline: "none",
     boxSizing: "border-box",
@@ -271,76 +271,76 @@ const sharedStyles$1 = StyleSheet.create({
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite$1,
-    borderColor: offBlack16$1,
+    backgroundColor: offWhite,
+    borderColor: offBlack16,
     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 = {
+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$1,
-    base: blue$1,
-    active: activeBlue$1
+    faded: fadedBlue,
+    base: blue,
+    active: activeBlue
   },
   error: {
-    faded: fadedRed$1,
-    base: red$1,
-    active: activeRed$1
+    faded: fadedRed,
+    base: red,
+    active: activeRed
   }
 };
-const styles$1 = {};
+const styles$4 = {};
 
-const _generateStyles$1 = (checked, error) => {
+const _generateStyles = (checked, error) => {
   // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
-  if (styles$1[styleKey]) {
-    return styles$1[styleKey];
+  if (styles$4[styleKey]) {
+    return styles$4[styleKey];
   }
 
-  const palette = error ? colors$1.error : colors$1.default;
+  const palette = error ? colors.error : colors.default;
   let newStyles = {};
 
   if (checked) {
     newStyles = {
       default: {
-        backgroundColor: white$1,
+        backgroundColor: white,
         borderColor: palette.base,
-        borderWidth: size$1 / 4
+        borderWidth: size / 4
       },
       focus: {
-        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
       },
       active: {
-        boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
+        boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
         borderColor: palette.active
       }
     };
   } else {
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed$1 : white$1,
-        borderColor: error ? red$1 : offBlack50$1
+        backgroundColor: error ? fadedRed : white,
+        borderColor: error ? red : offBlack50
       },
       focus: {
-        backgroundColor: error ? fadedRed$1 : white$1,
+        backgroundColor: error ? fadedRed : white,
         borderColor: palette.base,
         borderWidth: 2
       },
       active: {
         backgroundColor: palette.faded,
-        borderColor: error ? activeRed$1 : blue$1,
+        borderColor: error ? activeRed : blue,
         borderWidth: 2
       }
     };
   }
 
-  styles$1[styleKey] = StyleSheet.create(newStyles);
-  return styles$1[styleKey];
+  styles$4[styleKey] = StyleSheet.create(newStyles);
+  return styles$4[styleKey];
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
@@ -353,7 +353,7 @@ const _excluded$2 = ["label", "description", "onChange", "style", "className", "
  * 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 {
+class ChoiceInternal extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -392,9 +392,9 @@ class ChoiceInternal extends Component {
       id,
       label
     } = this.props;
-    return /*#__PURE__*/createElement(LabelMedium, {
-      style: [styles$2.label, disabled && styles$2.disabledLabel]
-    }, /*#__PURE__*/createElement("label", {
+    return /*#__PURE__*/React.createElement(LabelMedium, {
+      style: [styles$3.label, disabled && styles$3.disabledLabel]
+    }, /*#__PURE__*/React.createElement("label", {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
@@ -404,8 +404,8 @@ class ChoiceInternal extends Component {
     const {
       description
     } = this.props;
-    return /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$2.description,
+    return /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$3.description,
       id: id
     }, description);
   }
@@ -423,29 +423,29 @@ class ChoiceInternal extends Component {
 
     const ChoiceCore = this.getChoiceCoreComponent();
     const ClickableBehavior = getClickableBehavior();
-    return /*#__PURE__*/createElement(UniqueIDProvider, {
+    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
       const descriptionId = description && ids.get("description");
-      return /*#__PURE__*/createElement(View, {
+      return /*#__PURE__*/React.createElement(View, {
         style: style,
         className: className
-      }, /*#__PURE__*/createElement(ClickableBehavior, {
+      }, /*#__PURE__*/React.createElement(ClickableBehavior, {
         disabled: coreProps.disabled,
         onClick: this.handleClick,
         role: variant
       }, (state, childrenProps) => {
-        return /*#__PURE__*/createElement(View, _extends({
-          style: styles$2.wrapper
+        return /*#__PURE__*/React.createElement(View, _extends({
+          style: styles$3.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, {
+        }), /*#__PURE__*/React.createElement(ChoiceCore, _extends({}, coreProps, state, {
           "aria-describedby": descriptionId
-        })), /*#__PURE__*/createElement(Strut, {
+        })), /*#__PURE__*/React.createElement(Strut, {
           size: Spacing.xSmall_8
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
@@ -458,7 +458,7 @@ ChoiceInternal.defaultProps = {
   disabled: false,
   error: false
 };
-const styles$2 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   wrapper: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -490,9 +490,9 @@ const styles$2 = StyleSheet.create({
  * If you want a whole group of Checkbox[es] that are related, see the Choice
  * and CheckboxGroup components.
  */
-class Checkbox extends Component {
+class Checkbox extends React.Component {
   render() {
-    return /*#__PURE__*/createElement(ChoiceInternal, _extends({
+    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
   }
@@ -510,9 +510,9 @@ Checkbox.defaultProps = {
  * This component should not really be used by itself because radio buttons are
  * often grouped together. See RadioGroup.
  */
-class Radio extends Component {
+class Radio extends React.Component {
   render() {
-    return /*#__PURE__*/createElement(ChoiceInternal, _extends({
+    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
       variant: "radio"
     }, this.props));
   }
@@ -523,7 +523,7 @@ Radio.defaultProps = {
   error: false
 };
 
-const _excluded$3 = ["value", "variant"];
+const _excluded$1 = ["value", "variant"];
 
 /**
  * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
@@ -534,7 +534,7 @@ const _excluded$3 = ["value", "variant"];
  * If you wish to use just a single field, use Checkbox or Radio with the
  * optional label and description props.
  */
-class Choice extends Component {
+class Choice extends React.Component {
   getChoiceComponent(variant) {
     if (variant === "checkbox") {
       return Checkbox;
@@ -550,10 +550,10 @@ class Choice extends Component {
           {
       variant
     } = _this$props,
-          remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+          remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     const ChoiceComponent = this.getChoiceComponent(variant);
-    return /*#__PURE__*/createElement(ChoiceComponent, remainingProps);
+    return /*#__PURE__*/React.createElement(ChoiceComponent, remainingProps);
   }
 
 }
@@ -563,7 +563,7 @@ Choice.defaultProps = {
   onChange: () => {}
 };
 
-const styles$3 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   fieldset: {
     border: "none",
     padding: 0,
@@ -585,8 +585,8 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-const StyledFieldset = addStyle("fieldset");
-const StyledLegend = addStyle("legend");
+const StyledFieldset$1 = addStyle("fieldset");
+const StyledLegend$1 = addStyle("legend");
 /**
  * A checkbox group allows multiple selection. This component auto-populates
  * many props for its children Choice components. The Choice component is
@@ -594,7 +594,7 @@ const StyledLegend = addStyle("legend");
  * disabled.
  */
 
-class CheckboxGroup extends Component {
+class CheckboxGroup extends React.Component {
   handleChange(changedValue, originalCheckedState) {
     const {
       onChange,
@@ -621,33 +621,33 @@ class CheckboxGroup extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(StyledFieldset, {
+    return /*#__PURE__*/React.createElement(StyledFieldset$1, {
       "data-test-id": testId,
-      style: styles$3.fieldset
-    }, /*#__PURE__*/createElement(View, {
+      style: styles$2.fieldset
+    }, /*#__PURE__*/React.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, {
+    }, typeof label === "string" ? /*#__PURE__*/React.createElement(StyledLegend$1, {
+      style: styles$2.legend
+    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.description
+    }, description) : description && description, errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.small_12
-    }), Children.map(children, (child, index) => {
+    }), React.Children.map(children, (child, index) => {
       const {
         style,
         value
       } = child.props;
       const checked = selectedValues.includes(value);
-      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/cloneElement(child, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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],
+        style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "checkbox"
       }));
     })));
@@ -655,8 +655,8 @@ class CheckboxGroup extends Component {
 
 }
 
-const StyledFieldset$1 = addStyle("fieldset");
-const StyledLegend$1 = addStyle("legend");
+const StyledFieldset = addStyle("fieldset");
+const StyledLegend = addStyle("legend");
 /**
  * A radio group allows only single selection. Like CheckboxGroup, this
  * component auto-populates many props for its children Choice components. The
@@ -666,7 +666,7 @@ const StyledLegend$1 = addStyle("legend");
  * accessibility.
  */
 
-class RadioGroup extends Component {
+class RadioGroup extends React.Component {
   handleChange(changedValue) {
     this.props.onChange(changedValue);
   }
@@ -682,33 +682,33 @@ class RadioGroup extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(StyledFieldset$1, {
+    return /*#__PURE__*/React.createElement(StyledFieldset, {
       "data-test-id": testId,
-      style: styles$3.fieldset
-    }, /*#__PURE__*/createElement(View, {
+      style: styles$2.fieldset
+    }, /*#__PURE__*/React.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, {
+    }, label && /*#__PURE__*/React.createElement(StyledLegend, {
+      style: styles$2.legend
+    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)), description && /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.description
+    }, description), errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles$2.error
+    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.small_12
-    }), Children.map(children, (child, index) => {
+    }), React.Children.map(children, (child, index) => {
       const {
         style,
         value
       } = child.props;
       const checked = selectedValue === value;
-      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/cloneElement(child, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
         id: `${groupName}-${value}`,
         key: value,
         onChange: () => this.handleChange(value),
-        style: [index > 0 && styles$3.defaultLineGap, style],
+        style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "radio"
       }));
     })));
@@ -716,14 +716,15 @@ class RadioGroup extends Component {
 
 }
 
-const _excluded$4 = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "required", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange"];
+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.";
 
 // 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 {
+class TextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -734,7 +735,8 @@ class TextFieldInternal extends Component {
     this.maybeValidate = newValue => {
       const {
         validate,
-        onValidate
+        onValidate,
+        required
       } = this.props;
 
       if (validate) {
@@ -746,6 +748,16 @@ class TextFieldInternal extends Component {
             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);
+          }
+        });
       }
     };
 
@@ -784,14 +796,16 @@ class TextFieldInternal extends Component {
       });
     };
 
-    if (props.validate) {
+    if (props.validate && props.value !== "") {
       // Ensures error is updated on unmounted server-side renders
       this.state.error = props.validate(props.value) || null;
     }
   }
 
   componentDidMount() {
-    this.maybeValidate(this.props.value);
+    if (this.props.value !== "") {
+      this.maybeValidate(this.props.value);
+    }
   }
 
   render() {
@@ -803,7 +817,6 @@ class TextFieldInternal extends Component {
       disabled,
       onKeyDown,
       placeholder,
-      required,
       light,
       style,
       testId,
@@ -811,11 +824,11 @@ class TextFieldInternal extends Component {
       autoComplete,
       forwardedRef
     } = _this$props,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    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]),
+    return /*#__PURE__*/React.createElement("input", _extends({
+      className: css([styles$1.input, styles$6.LabelMedium, styles$1.default, // Prioritizes disabled, then focused, then error (if any)
+      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,
@@ -825,7 +838,6 @@ class TextFieldInternal extends Component {
       onKeyDown: onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      required: required,
       "data-test-id": testId,
       readOnly: readOnly,
       autoComplete: autoComplete,
@@ -840,7 +852,7 @@ TextFieldInternal.defaultProps = {
   disabled: false,
   light: false
 };
-const styles$4 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
@@ -890,27 +902,34 @@ const styles$4 = StyleSheet.create({
     boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`
   }
 });
-const TextField = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(TextFieldInternal, _extends({}, props, {
+const TextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(TextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));
 
+const StyledSpan = addStyle("span");
 /**
  * A FieldHeading is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
-class FieldHeading extends Component {
+
+class FieldHeading extends React.Component {
   renderLabel() {
     const {
       label,
       id,
+      required,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(Fragment, null, typeof label === "string" ? /*#__PURE__*/createElement(LabelMedium, {
-      style: styles$5.label,
+    const requiredIcon = /*#__PURE__*/React.createElement(StyledSpan, {
+      style: styles.required,
+      "aria-hidden": true
+    }, " ", "*");
+    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof label === "string" ? /*#__PURE__*/React.createElement(LabelMedium, {
+      style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label) : label, /*#__PURE__*/createElement(Strut, {
+    }, label, required && requiredIcon) : label, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -925,10 +944,10 @@ class FieldHeading extends Component {
       return null;
     }
 
-    return /*#__PURE__*/createElement(Fragment, null, typeof description === "string" ? /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$5.description,
+    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles.description,
       testId: testId && `${testId}-description`
-    }, description) : description, /*#__PURE__*/createElement(Strut, {
+    }, description) : description, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -944,10 +963,10 @@ class FieldHeading extends Component {
       return null;
     }
 
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Strut, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.small_12
-    }), typeof error === "string" ? /*#__PURE__*/createElement(LabelSmall, {
-      style: styles$5.error,
+    }), typeof error === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+      style: styles.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -959,15 +978,15 @@ class FieldHeading extends Component {
       field,
       style
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(View, {
       style: style
-    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/createElement(Strut, {
+    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
 
 }
-const styles$5 = StyleSheet.create({
+const styles = StyleSheet.create({
   label: {
     color: Color.offBlack
   },
@@ -976,6 +995,9 @@ const styles$5 = StyleSheet.create({
   },
   error: {
     color: Color.red
+  },
+  required: {
+    color: Color.red
   }
 });
 
@@ -985,7 +1007,7 @@ const styles$5 = StyleSheet.create({
  * 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 {
+class LabeledTextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
 
@@ -1042,6 +1064,7 @@ class LabeledTextFieldInternal extends Component {
       description,
       value,
       disabled,
+      required,
       validate,
       onChange,
       onKeyDown,
@@ -1054,17 +1077,19 @@ class LabeledTextFieldInternal extends Component {
       forwardedRef,
       ariaDescribedby
     } = this.props;
-    return /*#__PURE__*/createElement(IDProvider, {
+    return /*#__PURE__*/React.createElement(IDProvider, {
       id: id,
       scope: "labeled-text-field"
-    }, uniqueId => /*#__PURE__*/createElement(FieldHeading, {
+    }, uniqueId => /*#__PURE__*/React.createElement(FieldHeading, {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: /*#__PURE__*/createElement(TextField, {
+      field: /*#__PURE__*/React.createElement(TextField, {
         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,
@@ -1083,6 +1108,7 @@ class LabeledTextFieldInternal extends Component {
       }),
       label: label,
       description: description,
+      required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
   }
@@ -1094,7 +1120,7 @@ LabeledTextFieldInternal.defaultProps = {
   disabled: false,
   light: false
 };
-const LabeledTextField = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/createElement(LabeledTextFieldInternal, _extends({}, props, {
+const LabeledTextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(LabeledTextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));