From bbb263ebfae6eda394dd8975295a98cba62306cb Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Thu, 22 Nov 2018 12:41:13 +1100
Subject: [PATCH] Added TextareaField

---
 src/Textarea/Textarea.mdx                     |   31 +-
 src/Textarea/TextareaField.js                 |  126 +
 src/Textarea/__tests__/TextareaField.test.js  |   69 +
 .../__snapshots__/TextareaField.test.js.snap  | 2604 +++++++++++++++++
 src/Textarea/index.js                         |    1 +
 src/index.js                                  |    2 +-
 6 files changed, 2831 insertions(+), 2 deletions(-)
 create mode 100644 src/Textarea/TextareaField.js
 create mode 100644 src/Textarea/__tests__/TextareaField.test.js
 create mode 100644 src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap

diff --git a/src/Textarea/Textarea.mdx b/src/Textarea/Textarea.mdx
index 3b9e4cae5..05d0e1533 100644
--- a/src/Textarea/Textarea.mdx
+++ b/src/Textarea/Textarea.mdx
@@ -7,6 +7,7 @@ menu: Form
 import { Playground, PropsTable } from 'docz';
 import { Box } from '../primitives/index';
 import Textarea from './index';
+import TextareaField from './TextareaField';
 import Component from '@reactions/component';
 
 # Textarea
@@ -93,12 +94,40 @@ Using an accessibility label (`a11yLabel`), will enable screen readers to read t
 
 <PropsTable of={Textarea} />
 
+# TextareaField
+
+## Import
+
+`import { TextareaField } from 'fannypack'`
+
+## Basic Usage
+
+The `<TextareaField>` component contains of the [`<Textarea>` component](#input) wrapped by the [`<FieldWrapper>` component](/form/fieldwrapper).
+
+It accepts a combination of [`<Textarea>` props](/form/textarea#textarea-props) and [`<FieldWrapper>` props](/form/fieldwrapper#props).
+
+<Playground>
+  <TextareaField a11yId="description" label="Description" />
+</Playground>
+
+## `<TextareaField>` Props
+
+<PropsTable of={TextareaField} />
+
 ## Theming
 
 ### Schema
 
 ```jsx
 {
-  base: string | Object
+  base: string | Object,
+  disabled: string | Object,
+  focus: string | Object,
+  placeholder: string | Object,
+  sizes: {
+    small: string | Object,
+    medium: string | Object,
+    large: string | Object
+  }
 }
 ```
diff --git a/src/Textarea/TextareaField.js b/src/Textarea/TextareaField.js
new file mode 100644
index 000000000..ba298a05a
--- /dev/null
+++ b/src/Textarea/TextareaField.js
@@ -0,0 +1,126 @@
+import React, { type Node } from 'react';
+
+import type { Size } from '../types';
+import Textarea from './Textarea';
+import FieldWrapper from '../FieldWrapper';
+
+export type Props = {
+  /** An accessible identifier for the textarea */
+  a11yId?: string,
+  /** An accessible label for the textarea */
+  a11yLabel?: string,
+  as?: any,
+  autoComplete?: string,
+  /** Automatically focus on the textarea */
+  autoFocus?: boolean,
+  children: Node,
+  className?: string,
+  /** Default value of the textarea */
+  defaultValue?: string,
+  description?: string | Element<any>,
+  /** Disables the textrea */
+  disabled?: boolean,
+  hint?: string | Element<any>,
+  /** Makes the textarea span full width */
+  isFullWidth?: boolean,
+  /** Adds a cute loading indicator to the textarea */
+  isLoading?: boolean,
+  isOptional?: boolean,
+  /** Makes the texrea required and sets aria-invalid to true */
+  isRequired?: boolean,
+  label?: string | Element<any>,
+  /** Name of the textarea */
+  name?: string,
+  /** Alters the size of the textarea. Can be "small", "medium" or "large" */
+  size?: Size,
+  /** If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. */
+  maxLength?: number,
+  /** If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored. */
+  minLength?: number,
+  /** Regex pattern to apply to the textarea */
+  pattern?: string,
+  /** Hint text to display */
+  placeholder?: string,
+  /** This prop prevents the user from modifying the value of the textarea. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit). */
+  readOnly?: boolean,
+  /** The minimum number of rows in the text area. */
+  rows?: number,
+  /** Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked. */
+  spellCheck?: boolean,
+  /** State of the input. Can be any color in the palette. */
+  state?: string,
+  validationText?: string,
+  /** Value of the input */
+  value?: string,
+  /** Function to invoke when focus is lost */
+  onBlur?: Function,
+  /** Function to invoke when input has changed */
+  onChange?: Function,
+  /** Function to invoke when input is focused */
+  onFocus?: Function
+};
+
+const TextareaField = ({
+  a11yId,
+  a11yLabel,
+  description,
+  hint,
+  isFullWidth,
+  isLoading,
+  isOptional,
+  isRequired,
+  label,
+  size,
+  state,
+  validationText,
+  ...props
+}: Props) => (
+  <FieldWrapper
+    a11yId={a11yId}
+    description={description}
+    hint={hint}
+    isFullWidth={isFullWidth}
+    isOptional={isOptional}
+    isRequired={isRequired}
+    label={label}
+    state={state}
+    validationText={validationText}
+  >
+    {({ elementProps }) => <Textarea {...props} {...elementProps} />}
+  </FieldWrapper>
+);
+
+TextareaField.defaultProps = {
+  a11yId: undefined,
+  a11yLabel: undefined,
+  as: undefined,
+  autoComplete: undefined,
+  autoFocus: false,
+  className: undefined,
+  defaultValue: undefined,
+  description: undefined,
+  disabled: false,
+  hint: undefined,
+  isFullWidth: false,
+  isLoading: false,
+  isOptional: false,
+  isRequired: false,
+  label: undefined,
+  maxLength: undefined,
+  minLength: undefined,
+  name: undefined,
+  onBlur: undefined,
+  onChange: undefined,
+  onFocus: undefined,
+  pattern: undefined,
+  placeholder: undefined,
+  readOnly: undefined,
+  rows: '3',
+  spellCheck: undefined,
+  size: 'default',
+  state: undefined,
+  validationText: undefined,
+  value: undefined
+};
+
+export default TextareaField;
diff --git a/src/Textarea/__tests__/TextareaField.test.js b/src/Textarea/__tests__/TextareaField.test.js
new file mode 100644
index 000000000..5d1e37bde
--- /dev/null
+++ b/src/Textarea/__tests__/TextareaField.test.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import TextareaField from '../TextareaField';
+import 'jest-styled-components';
+
+it('renders correctly for a basic input field', () => {
+  const { container } = render(<TextareaField />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an input field with a placeholder', () => {
+  const { container } = render(<TextareaField placeholder="Awesome placeholder" />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a disabled input field', () => {
+  const { container } = render(<TextareaField disabled />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an input field with a default value', () => {
+  const { container } = render(<TextareaField defaultValue="Awesome value" />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a full width input field', () => {
+  const { container } = render(<TextareaField isFullWidth />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+describe('sizes', () => {
+  ['small', 'medium', 'large'].forEach(size => {
+    it(`renders correctly for an input field with size ${size}`, () => {
+      const { container } = render(<TextareaField size={size} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+});
+
+describe('states', () => {
+  ['danger', 'success', 'warning', 'primary'].forEach(state => {
+    it(`renders correctly for an input field with state ${state}`, () => {
+      const { container } = render(<TextareaField state={state} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+});
+
+it('renders correctly for an input field with a description', () => {
+  const { container } = render(
+    <TextareaField a11yId="username" label="Username" description="Required for your fannypack" />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an input field with a hint', () => {
+  const { container } = render(<TextareaField a11yId="username" label="Username" hint="Must be awesome" />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an optional input field', () => {
+  const { container } = render(<TextareaField a11yId="username" label="Username" isOptional />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a required field', () => {
+  const { container } = render(<TextareaField a11yId="username" label="Username" isRequired />);
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap b/src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap
new file mode 100644
index 000000000..1223c1b5a
--- /dev/null
+++ b/src/Textarea/__tests__/__snapshots__/TextareaField.test.js.snap
@@ -0,0 +1,2604 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly for a basic input field 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a disabled input field 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        disabled=""
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a full width input field 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c4 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c4.c4.c4 {
+  position: relative;
+}
+
+.c6 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c3 {
+  display: inline-block;
+}
+
+.c5 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c5[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c5:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c5::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c5:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c5::placeholder {
+  opacity: 0.6;
+}
+
+.c5 {
+  width: 100%;
+}
+
+.c2 {
+  width: 100%;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c3 c4"
+      style="width: 100%;"
+      width="100%"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c5 c6"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a required field 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c8 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c8.c8.c8 {
+  position: relative;
+}
+
+.c10 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c6 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+  margin-bottom: 0.25rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c7 {
+  display: inline-block;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c9 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c9[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c9:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c9::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c9::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c9:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c9::placeholder {
+  opacity: 0.6;
+}
+
+.c5 {
+  display: inline-block;
+}
+
+.c4 {
+  display: block;
+}
+
+.c3 {
+  margin-bottom: 0 !important;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div
+      class="c2 c1"
+      style="align-items: center;"
+    >
+      <label
+        class="c3 c4 c5 c6"
+        font-weight="600"
+        for="username"
+        style="font-weight: 600;"
+      >
+        Username
+      </label>
+    </div>
+    <div />
+    <div
+      class="c7 c8"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="true"
+        class="c9 c10"
+        id="username"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an input field with a default value 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      >
+        Awesome value
+      </textarea>
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an input field with a description 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c10 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c10.c10.c10 {
+  position: relative;
+}
+
+.c12 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c6 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+  margin-bottom: 0.25rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c9 {
+  display: inline-block;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c11 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c11[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c11:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c11:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::placeholder {
+  opacity: 0.6;
+}
+
+.c5 {
+  display: inline-block;
+}
+
+.c4 {
+  display: block;
+}
+
+abbr.c8 {
+  border-bottom: 1px dotted;
+  cursor: help;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+i.c8 {
+  font-style: italic;
+}
+
+kbd.c8 {
+  background: #454d5d;
+  border-radius: 0.1rem;
+  color: #fff;
+  padding: 0.1rem 0.2rem;
+}
+
+mark.c8 {
+  background: #ffe9b3;
+  border-radius: 0.1rem;
+  padding: 0.1rem 0.2rem;
+}
+
+strong.c8 {
+  font-weight: bold;
+}
+
+sub.c8,
+sup.c8 {
+  font-size: 0.8em;
+  vertical-align: baseline;
+}
+
+ins.c8,
+u.c8 {
+  -webkit-text-decoration-skip: ink edges;
+  text-decoration-skip: ink edges;
+}
+
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
+  font-style: italic;
+}
+
+kbd.c8,
+pre.c8,
+samp.c8 {
+  font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
+.c3 {
+  margin-bottom: 0 !important;
+}
+
+.c7 {
+  display: block;
+  font-size: 0.8rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div
+      class="c2 c1"
+      style="align-items: center;"
+    >
+      <label
+        class="c3 c4 c5 c6"
+        font-weight="600"
+        for="username"
+        style="font-weight: 600;"
+      >
+        Username
+      </label>
+    </div>
+    <span
+      class="c7 c8 c1"
+    >
+      Required for your fannypack
+    </span>
+    <div
+      class="c9 c10"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c11 c12"
+        id="username"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an input field with a hint 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c8 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c8.c8.c8 {
+  position: relative;
+}
+
+.c10 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c6 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+  margin-bottom: 0.25rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c7 {
+  display: inline-block;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c9 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c9[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c9:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c9::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c9::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c9:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c9::placeholder {
+  opacity: 0.6;
+}
+
+.c5 {
+  display: inline-block;
+}
+
+.c4 {
+  display: block;
+}
+
+abbr.c12 {
+  border-bottom: 1px dotted;
+  cursor: help;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+i.c12 {
+  font-style: italic;
+}
+
+kbd.c12 {
+  background: #454d5d;
+  border-radius: 0.1rem;
+  color: #fff;
+  padding: 0.1rem 0.2rem;
+}
+
+mark.c12 {
+  background: #ffe9b3;
+  border-radius: 0.1rem;
+  padding: 0.1rem 0.2rem;
+}
+
+strong.c12 {
+  font-weight: bold;
+}
+
+sub.c12,
+sup.c12 {
+  font-size: 0.8em;
+  vertical-align: baseline;
+}
+
+ins.c12,
+u.c12 {
+  -webkit-text-decoration-skip: ink edges;
+  text-decoration-skip: ink edges;
+}
+
+i.c12,
+cite.c12,
+var.c12,
+em.c12 {
+  font-style: italic;
+}
+
+kbd.c12,
+pre.c12,
+samp.c12 {
+  font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
+.c3 {
+  margin-bottom: 0 !important;
+}
+
+.c11 {
+  display: block;
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div
+      class="c2 c1"
+      style="align-items: center;"
+    >
+      <label
+        class="c3 c4 c5 c6"
+        font-weight="600"
+        for="username"
+        style="font-weight: 600;"
+      >
+        Username
+      </label>
+    </div>
+    <div />
+    <div
+      class="c7 c8"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c9 c10"
+        id="username"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <span
+      class="c11 c12 c1"
+    >
+      Must be awesome
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an input field with a placeholder 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        placeholder="Awesome placeholder"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`renders correctly for an optional input field 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c10 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c10.c10.c10 {
+  position: relative;
+}
+
+.c12 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c6 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+  margin-bottom: 0.25rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c9 {
+  display: inline-block;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c11 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c11[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c11:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c11:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c11::placeholder {
+  opacity: 0.6;
+}
+
+.c5 {
+  display: inline-block;
+}
+
+.c4 {
+  display: block;
+}
+
+abbr.c8 {
+  border-bottom: 1px dotted;
+  cursor: help;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+i.c8 {
+  font-style: italic;
+}
+
+kbd.c8 {
+  background: #454d5d;
+  border-radius: 0.1rem;
+  color: #fff;
+  padding: 0.1rem 0.2rem;
+}
+
+mark.c8 {
+  background: #ffe9b3;
+  border-radius: 0.1rem;
+  padding: 0.1rem 0.2rem;
+}
+
+strong.c8 {
+  font-weight: bold;
+}
+
+sub.c8,
+sup.c8 {
+  font-size: 0.8em;
+  vertical-align: baseline;
+}
+
+ins.c8,
+u.c8 {
+  -webkit-text-decoration-skip: ink edges;
+  text-decoration-skip: ink edges;
+}
+
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
+  font-style: italic;
+}
+
+kbd.c8,
+pre.c8,
+samp.c8 {
+  font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
+.c3 {
+  margin-bottom: 0 !important;
+}
+
+.c7 {
+  font-size: 0.8rem;
+  color: #708da8;
+  margin-left: 0.5rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div
+      class="c2 c1"
+      style="align-items: center;"
+    >
+      <label
+        class="c3 c4 c5 c6"
+        font-weight="600"
+        for="username"
+        style="font-weight: 600;"
+      >
+        Username
+      </label>
+      <span
+        class="c7 c8 c1"
+      >
+        OPTIONAL
+      </span>
+    </div>
+    <div />
+    <div
+      class="c9 c10"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c11 c12"
+        id="username"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`sizes renders correctly for an input field with size large 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`sizes renders correctly for an input field with size medium 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`sizes renders correctly for an input field with size small 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`states renders correctly for an input field with state danger 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+.c4 {
+  border-color: #e24c67;
+  box-shadow: #e24c67 0px 0px 0px 1px !important;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="true"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`states renders correctly for an input field with state primary 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+.c4 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`states renders correctly for an input field with state success 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+.c4 {
+  border-color: #4ca26c;
+  box-shadow: #4ca26c 0px 0px 0px 1px !important;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
+
+exports[`states renders correctly for an input field with state warning 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c3.c3.c3 {
+  position: relative;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+  margin-top: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c4 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  width: 100%;
+  padding: 0.4em 0.6em;
+}
+
+.c4[disabled] {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+  color: #8d8d8d;
+}
+
+.c4:focus {
+  outline: unset;
+  z-index: 2;
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4::-webkit-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::-moz-placeholder {
+  opacity: 0.6;
+}
+
+.c4:-ms-input-placeholder {
+  opacity: 0.6;
+}
+
+.c4::placeholder {
+  opacity: 0.6;
+}
+
+.c4 {
+  border-color: #ffc94c;
+  box-shadow: #ffc94c 0px 0px 0px 1px !important;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c1"
+    display="inline-block"
+    style="display: inline-block;"
+  >
+    <div />
+    <div
+      class="c2 c3"
+    >
+      <textarea
+        aria-invalid="false"
+        aria-required="false"
+        class="c4 c5"
+        rows="3"
+        style="size: default;"
+        type="text"
+      />
+    </div>
+    <div />
+  </div>
+</div>
+`;
diff --git a/src/Textarea/index.js b/src/Textarea/index.js
index 3fd3bc28c..58e4e2d8d 100644
--- a/src/Textarea/index.js
+++ b/src/Textarea/index.js
@@ -1,2 +1,3 @@
 export { default as Textarea } from './Textarea';
+export { default as TextareaField } from './TextareaField';
 export { default } from './Textarea';
diff --git a/src/index.js b/src/index.js
index 3cae01dc4..4f0dfb6fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,4 +35,4 @@ export { Switch, SwitchField } from './Switch';
 export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeadCell, TableRow } from './Table';
 export { Tag } from './Tag';
 export { Text } from './Text';
-export { Textarea } from './Textarea';
+export { Textarea, TextareaField } from './Textarea';