@khanacademy/wonder-blocks-form 4.7.4 → 4.8.0

package/dist/index.js

@@ -2,7 +2,9 @@
 
 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 wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
@@ -15,56 +17,30 @@ var minusIcon = require('@phosphor-icons/core/bold/minus-bold.svg');
 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]; }
+    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);
+    }
+    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 checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
 var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$7 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
   switch (value) {
     case true:
@@ -96,7 +72,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$6);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$7);
   const innerRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
     if (innerRef.current != null) {
@@ -118,7 +94,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
     }]
   });
   const ariaChecked = mapCheckedToAriaChecked(checked);
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends({}, sharedProps, {
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$2, _extends__default["default"]({}, sharedProps, {
     ref: node => {
       innerRef.current = node;
       if (typeof ref === "function") {
@@ -185,11 +161,11 @@ const colors$1 = {
     active: activeRed
   }
 };
-const styles$5 = {};
+const styles$6 = {};
 const _generateStyles$1 = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-  if (styles$5[styleKey]) {
-    return styles$5[styleKey];
+  if (styles$6[styleKey]) {
+    return styles$6[styleKey];
   }
   const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
@@ -233,11 +209,11 @@ const _generateStyles$1 = (checked, error) => {
       }
     };
   }
-  styles$5[styleKey] = aphrodite.StyleSheet.create(newStyles);
-  return styles$5[styleKey];
+  styles$6[styleKey] = aphrodite.StyleSheet.create(newStyles);
+  return styles$6[styleKey];
 };
 
-const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -260,10 +236,10 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$6);
   const stateStyles = _generateStyles(checked, error);
   const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends__default["default"]({}, sharedProps, {
     type: "radio",
     "aria-invalid": error,
     checked: checked != null ? checked : undefined,
@@ -327,11 +303,11 @@ const colors = {
     active: wonderBlocksTokens.color.activeRed
   }
 };
-const styles$4 = {};
+const styles$5 = {};
 const _generateStyles = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-  if (styles$4[styleKey]) {
-    return styles$4[styleKey];
+  if (styles$5[styleKey]) {
+    return styles$5[styleKey];
   }
   const palette = error ? colors.error : colors.default;
   let newStyles = {};
@@ -376,11 +352,11 @@ const _generateStyles = (checked, error) => {
       }
     };
   }
-  styles$4[styleKey] = aphrodite.StyleSheet.create(newStyles);
-  return styles$4[styleKey];
+  styles$5[styleKey] = aphrodite.StyleSheet.create(newStyles);
+  return styles$5[styleKey];
 };
 
-const _excluded$4 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
+const _excluded$5 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
 const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props, ref) {
   const {
       checked,
@@ -394,7 +370,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       className,
       variant
     } = props,
-    coreProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+    coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$5);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -410,14 +386,14 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
   };
   const getLabel = id => {
     return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: [styles$3.label, disabled && styles$3.disabledLabel]
+      style: [styles$4.label, disabled && styles$4.disabledLabel]
     }, React__namespace.createElement("label", {
       htmlFor: id
     }, label));
   };
   const getDescription = id => {
     return React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles$3.description,
+      style: styles$4.description,
       id: id
     }, description);
   };
@@ -432,9 +408,9 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       style: style,
       className: className
     }, React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$3.wrapper,
+      style: styles$4.wrapper,
       tabIndex: -1
-    }, React__namespace.createElement(ChoiceCore, _extends({}, coreProps, {
+    }, React__namespace.createElement(ChoiceCore, _extends__default["default"]({}, coreProps, {
       id: uniqueId,
       checked: checked,
       "aria-describedby": descriptionId,
@@ -447,7 +423,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
     }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
   });
 });
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   wrapper: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -471,7 +447,7 @@ const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
     disabled = false,
     error = false
   } = props;
-  return React__namespace.createElement(ChoiceInternal, _extends({}, props, {
+  return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({}, props, {
     variant: "checkbox",
     disabled: disabled,
     error: error,
@@ -479,14 +455,14 @@ const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
   }));
 });
 
-const _excluded$3 = ["disabled", "error"];
+const _excluded$4 = ["disabled", "error"];
 const Radio = React__namespace.forwardRef(function Radio(props, ref) {
   const {
       disabled = false,
       error = false
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-  return React__namespace.createElement(ChoiceInternal, _extends({}, otherProps, {
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$4);
+  return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({}, otherProps, {
     variant: "radio",
     disabled: disabled,
     error: error,
@@ -494,7 +470,7 @@ const Radio = React__namespace.forwardRef(function Radio(props, ref) {
   }));
 });
 
-const _excluded$2 = ["checked", "disabled", "onChange", "value", "variant"];
+const _excluded$3 = ["checked", "disabled", "onChange", "value", "variant"];
 const Choice = React__namespace.forwardRef(function Choice(props, ref) {
   const {
       checked = false,
@@ -502,7 +478,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
       onChange = () => {},
       variant
     } = props,
-    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+    remainingProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$3);
   const getChoiceComponent = variant => {
     if (variant === "checkbox") {
       return Checkbox;
@@ -511,7 +487,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
     }
   };
   const ChoiceComponent = getChoiceComponent(variant);
-  return React__namespace.createElement(ChoiceComponent, _extends({}, remainingProps, {
+  return React__namespace.createElement(ChoiceComponent, _extends__default["default"]({}, remainingProps, {
     checked: checked,
     disabled: disabled,
     onChange: onChange,
@@ -519,7 +495,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
   }));
 });
 
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$3 = aphrodite.StyleSheet.create({
   fieldset: {
     border: "none",
     padding: 0,
@@ -567,16 +543,16 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
   const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
   return React__namespace.createElement(StyledFieldset$1, {
     "data-testid": testId,
-    style: styles$2.fieldset,
+    style: styles$3.fieldset,
     ref: ref
   }, React__namespace.createElement(wonderBlocksCore.View, {
     style: style
   }, label && React__namespace.createElement(StyledLegend$1, {
-    style: styles$2.legend
+    style: styles$3.legend
   }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.description
+    style: styles$3.description
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.error
+    style: styles$3.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
@@ -592,7 +568,7 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
       id: `${groupName}-${value}`,
       key: value,
       onChange: () => handleChange(value, checked),
-      style: [index > 0 && styles$2.defaultLineGap, style],
+      style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "checkbox"
     });
   })));
@@ -615,16 +591,16 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
   return React__namespace.createElement(StyledFieldset, {
     "data-testid": testId,
-    style: styles$2.fieldset,
+    style: styles$3.fieldset,
     ref: ref
   }, React__namespace.createElement(wonderBlocksCore.View, {
     style: style
   }, label && React__namespace.createElement(StyledLegend, {
-    style: styles$2.legend
+    style: styles$3.legend
   }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.description
+    style: styles$3.description
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.error
+    style: styles$3.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
@@ -640,14 +616,14 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
       id: `${groupName}-${value}`,
       key: value,
       onChange: () => onChange(value),
-      style: [index > 0 && styles$2.defaultLineGap, style],
+      style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "radio"
     });
   })));
 });
 
-const _excluded$1 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
-const defaultErrorMessage = "This field is required.";
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const defaultErrorMessage$1 = "This field is required.";
 const StyledInput = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
   constructor(props) {
@@ -672,7 +648,7 @@ class TextField extends React__namespace.Component {
           }
         });
       } else if (required) {
-        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+        const requiredString = typeof required === "string" ? required : defaultErrorMessage$1;
         const maybeError = newValue ? null : requiredString;
         this.setState({
           error: maybeError
@@ -742,12 +718,12 @@ class TextField extends React__namespace.Component {
         autoComplete,
         forwardedRef
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
     return React__namespace.createElement(wonderBlocksCore.IDProvider, {
       id: id,
       scope: "text-field"
-    }, uniqueId => React__namespace.createElement(StyledInput, _extends({
-      style: [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], !!this.state.error && styles$1.error, style && style],
+    }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
+      style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, disabled ? styles$2.disabled : this.state.focused ? [styles$2.focused, light && styles$2.defaultLight] : !!this.state.error && [styles$2.error, light && styles$2.errorLight], !!this.state.error && styles$2.error, style && style],
       id: uniqueId,
       type: type,
       placeholder: placeholder,
@@ -773,7 +749,7 @@ TextField.defaultProps = {
   disabled: false,
   light: false
 };
-const styles$1 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
@@ -823,7 +799,7 @@ const styles$1 = aphrodite.StyleSheet.create({
     boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
   }
 });
-var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends({}, props, {
+var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
   forwardedRef: ref
 })));
 
@@ -837,11 +813,11 @@ class FieldHeading extends React__namespace.Component {
       testId
     } = this.props;
     const requiredIcon = React__namespace.createElement(StyledSpan, {
-      style: styles.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: styles.label,
+      style: styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -858,7 +834,7 @@ class FieldHeading extends React__namespace.Component {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.xxxSmall_4
@@ -876,7 +852,7 @@ class FieldHeading extends React__namespace.Component {
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.small_12
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles.error,
+      style: styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -894,7 +870,7 @@ class FieldHeading extends React__namespace.Component {
     }), field, this.maybeRenderError());
   }
 }
-const styles = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   label: {
     color: wonderBlocksTokens.color.offBlack
   },
@@ -909,7 +885,7 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -976,7 +952,7 @@ class LabeledTextField extends React__namespace.Component {
         forwardedRef,
         ariaDescribedby
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
     return React__namespace.createElement(wonderBlocksCore.IDProvider, {
       id: id,
       scope: "labeled-text-field"
@@ -984,7 +960,7 @@ class LabeledTextField extends React__namespace.Component {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: React__namespace.createElement(TextField$1, _extends({
+      field: React__namespace.createElement(TextField$1, _extends__default["default"]({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-required": required ? "true" : "false",
@@ -1017,13 +993,214 @@ LabeledTextField.defaultProps = {
   disabled: false,
   light: false
 };
-var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends({}, props, {
+var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, props, {
   forwardedRef: ref
 })));
 
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light"];
+const defaultErrorMessage = "This field is required.";
+const StyledTextArea = wonderBlocksCore.addStyle("textarea");
+const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
+  const {
+      onChange,
+      value,
+      placeholder,
+      disabled,
+      id,
+      testId,
+      style,
+      readOnly,
+      autoComplete,
+      name,
+      className,
+      autoFocus,
+      rows,
+      spellCheck,
+      wrap,
+      minLength,
+      maxLength,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      validate,
+      onValidate,
+      required,
+      resizeType,
+      light
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
+  const [error, setError] = React__namespace.useState(null);
+  const ids = wonderBlocksCore.useUniqueIdWithMock("text-area");
+  const uniqueId = id != null ? id : ids.get("id");
+  const handleChange = event => {
+    const newValue = event.target.value;
+    onChange(newValue);
+    handleValidation(newValue);
+  };
+  const handleValidation = newValue => {
+    if (validate) {
+      const error = validate(newValue) || null;
+      setError(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    } else if (required) {
+      const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+      const error = newValue ? null : requiredString;
+      setError(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    }
+  };
+  wonderBlocksCore.useOnMountEffect(() => {
+    if (value !== "") {
+      handleValidation(value);
+    }
+  });
+  const getStyles = () => {
+    const baseStyles = [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType]];
+    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, !!error && styles.error];
+    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, !!error && styles.lightError];
+    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
+  };
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      width: "100%"
+    }
+  }, React__namespace.createElement(StyledTextArea, _extends__default["default"]({
+    id: uniqueId,
+    "data-testid": testId,
+    ref: ref,
+    className: className,
+    style: [...getStyles(), style],
+    value: value,
+    onChange: handleChange,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    name: name,
+    autoFocus: autoFocus,
+    rows: rows,
+    spellCheck: spellCheck,
+    wrap: wrap,
+    minLength: minLength,
+    maxLength: maxLength,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    required: !!required
+  }, otherProps, {
+    "aria-invalid": !!error
+  })));
+});
+const styles = aphrodite.StyleSheet.create({
+  textarea: {
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    boxSizing: "border-box",
+    padding: `10px ${wonderBlocksTokens.spacing.medium_16}px`,
+    minHeight: "1em"
+  },
+  default: {
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    }
+  },
+  defaultFocus: {
+    ":focus-visible": {
+      borderColor: wonderBlocksTokens.color.blue,
+      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: 0
+    }
+  },
+  disabled: {
+    background: wonderBlocksTokens.color.offWhite,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack64,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    cursor: "not-allowed"
+  },
+  error: {
+    background: wonderBlocksTokens.color.fadedRed8,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: wonderBlocksTokens.color.red,
+      borderColor: wonderBlocksTokens.color.red
+    }
+  },
+  light: {
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    }
+  },
+  lightFocus: {
+    ":focus-visible": {
+      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: 0,
+      borderColor: wonderBlocksTokens.color.blue,
+      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+    }
+  },
+  lightDisabled: {
+    backgroundColor: "transparent",
+    border: `1px solid ${wonderBlocksTokens.color.white32}`,
+    color: wonderBlocksTokens.color.white64,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.white64
+    },
+    cursor: "not-allowed"
+  },
+  lightError: {
+    background: wonderBlocksTokens.color.fadedRed8,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: wonderBlocksTokens.color.red,
+      borderColor: wonderBlocksTokens.color.red,
+      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.red}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+    }
+  }
+});
+const resizeStyles = aphrodite.StyleSheet.create({
+  both: {
+    resize: "both"
+  },
+  none: {
+    resize: "none"
+  },
+  horizontal: {
+    resize: "horizontal"
+  },
+  vertical: {
+    resize: "vertical"
+  }
+});
+
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.Choice = Choice;
 exports.LabeledTextField = labeledTextField;
 exports.RadioGroup = RadioGroup;
+exports.TextArea = TextArea;
 exports.TextField = TextField$1;