From 309768581ab39b79f904c894aa8794bde4aceecb Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 17 Feb 2022 15:28:20 -0700
Subject: [PATCH 01/28] Initial working text field

---
 package.json       |  1 +
 src/index.tsx      |  2 +-
 src/types/index.ts |  3 ++
 yarn.lock          | 86 ++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 98b5110b..3a1472b4 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "@react-aria/radio": "^3.1.3",
     "@react-aria/select": "^3.5.0",
     "@react-aria/separator": "^3.1.3",
+    "@react-aria/textfield": "^3.5.2",
     "@react-aria/tooltip": "^3.1.1",
     "@react-aria/utils": "^3.6.0",
     "@react-aria/virtualizer": "^3.3.4",
diff --git a/src/index.tsx b/src/index.tsx
index f127b306..8d28263e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,7 +15,7 @@ export * from './dropdown';
 export * from './listbox';
 export * from './picker';
 export * from './notification';
-
+export * from './textfield';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
 //   /** custom content, defaults to 'the snozzberries taste like snozzberries' */
 //   children?: ReactChild;
diff --git a/src/types/index.ts b/src/types/index.ts
index e88f5c22..6558b3c3 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -5,3 +5,6 @@ export * from './selection';
 export * from './select';
 export * from './labelable';
 export * from './severity';
+export * from './input';
+export * from './events';
+export * from './dom';
diff --git a/yarn.lock b/yarn.lock
index fac2e6a6..850dde71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1830,6 +1830,17 @@
     "@react-types/shared" "^3.9.0"
     clsx "^1.1.1"
 
+"@react-aria/focus@^3.5.2":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.5.2.tgz#250852f328fdb8317b8aa8b01427cf53b68ffca4"
+  integrity sha512-7o40oDWvguFOxflOCOe1xioa3z6LewTLPp9liThmVuQYe7DAso8ZV0E+ssxRWlMkI2Td6CJQek1+en5nVPXvfQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.8.1"
+    "@react-aria/utils" "^3.11.2"
+    "@react-types/shared" "^3.11.1"
+    clsx "^1.1.1"
+
 "@react-aria/i18n@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.3.0.tgz#7f92ae81f6536b19b17b89c0991ddb6c10f2512a"
@@ -1872,6 +1883,15 @@
     "@react-aria/utils" "^3.9.0"
     "@react-types/shared" "^3.9.0"
 
+"@react-aria/interactions@^3.8.1":
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.8.1.tgz#d86aa8fcf93b38e2cf61dda7ef04c9e0a0527056"
+  integrity sha512-oE6Yo5BTiqInQCTnERMOALwULJy6TbBv+XXEAmifKWBvjbKSb6jN91lhWOruuYZpWAV+eAawHAk/u/KMzwVVEQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/utils" "^3.11.2"
+    "@react-types/shared" "^3.11.1"
+
 "@react-aria/label@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.1.1.tgz#03dc5c4813cd1f51760ba48783c186c2eeda1189"
@@ -1892,6 +1912,16 @@
     "@react-types/label" "^3.5.0"
     "@react-types/shared" "^3.9.0"
 
+"@react-aria/label@^3.2.3":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.2.3.tgz#b2205941cadee24cdd6ceb6ae96224604247cfec"
+  integrity sha512-17gxnd4WXdUwlHOvKzhVzInX8qUOWVm/fggKEo1M/1z3XRg3+AIwFx7pm6t0yBGwmomLE89PXS9abfYrKA3aEA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/utils" "^3.11.2"
+    "@react-types/label" "^3.5.2"
+    "@react-types/shared" "^3.11.1"
+
 "@react-aria/listbox@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@react-aria/listbox/-/listbox-3.3.1.tgz#ecba0e3a3bee04d569479096c9245fe482b19611"
@@ -2025,6 +2055,25 @@
   dependencies:
     "@babel/runtime" "^7.6.2"
 
+"@react-aria/ssr@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.2.tgz#665a6fd56385068c7417922af2d0d71b0618e52d"
+  integrity sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@react-aria/textfield@^3.5.2":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/textfield/-/textfield-3.5.2.tgz#8fdf2f8375ee20c64bf21882ba03c00cc194995e"
+  integrity sha512-EHrAn2XkNYAB0UfUuji3iV177826I+PczENMF+7UN7pmWC7v3vXeq3S5WtnU24JvVLthIrLqr7B/64KmPuoTSQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.5.2"
+    "@react-aria/label" "^3.2.3"
+    "@react-aria/utils" "^3.11.2"
+    "@react-types/shared" "^3.11.1"
+    "@react-types/textfield" "^3.3.2"
+
 "@react-aria/tooltip@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@react-aria/tooltip/-/tooltip-3.1.1.tgz#e0dfdd9e51b581563f684927249d70e1bad761e3"
@@ -2039,6 +2088,17 @@
     "@react-types/shared" "^3.4.0"
     "@react-types/tooltip" "^3.1.1"
 
+"@react-aria/utils@^3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.11.2.tgz#95747fb362bfcbc591270e5c67b7a38eaa60c187"
+  integrity sha512-mbOIPJ2zXgSMQTVXUenl8A8oOUvXPQPmlJv1OqkYPXf74yI5MagpWqbekj8t9Mwrbnj87LL3dY39pWjvlHoJ+w==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/ssr" "^3.1.2"
+    "@react-stately/utils" "^3.4.1"
+    "@react-types/shared" "^3.11.1"
+    clsx "^1.1.1"
+
 "@react-aria/utils@^3.3.0", "@react-aria/utils@^3.6.0", "@react-aria/utils@^3.7.0":
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.7.0.tgz#0aab1f682e9f1781cfadd2dd1ef9494bfaca0cbf"
@@ -2229,6 +2289,13 @@
   dependencies:
     "@babel/runtime" "^7.6.2"
 
+"@react-stately/utils@^3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.4.1.tgz#56f049aa1704d338968b5973c796ee606e9c0c62"
+  integrity sha512-mjFbKklj/W8KRw1CQSpUJxHd7lhUge4i00NwJTwGxbzmiJgsTWlKKS/1rBf48ey9hUBopXT5x5vG/AxQfWTQug==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
 "@react-stately/virtualizer@^3.1.5":
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/@react-stately/virtualizer/-/virtualizer-3.1.5.tgz#a0a0751f3b291ea25e015ca2c0f933c30d190d05"
@@ -2288,6 +2355,13 @@
   dependencies:
     "@react-types/shared" "^3.9.0"
 
+"@react-types/label@^3.5.2":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.5.2.tgz#27185c60c249c0c60fc8f5e0cc8b05120be863a2"
+  integrity sha512-8S2dbbVgCf7S76/CXabPYh2W4ddnmtZ97nhS+iZPA2eVYUNTsEDY9WG7Gt8b+M3uyt4pUb17y8Zlnvi3sOzkzg==
+  dependencies:
+    "@react-types/shared" "^3.11.1"
+
 "@react-types/listbox@^3.2.1":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@react-types/listbox/-/listbox-3.2.1.tgz#881bbc9690343f35fe08a99526a90618f53328bf"
@@ -2331,6 +2405,11 @@
   dependencies:
     "@react-types/shared" "^3.9.0"
 
+"@react-types/shared@^3.11.1":
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.11.1.tgz#fbe4f28b28f2b22461bbe88c4cce5d1d44d3ae64"
+  integrity sha512-2wwUnvLFsWPiNXK5kiKfS3+k6mtWXAtfp76haIow3OyyFLEezWD9F9ZsCtyjNG+R+JlRcmvQRgRjQaGoeUWLKg==
+
 "@react-types/shared@^3.2.1", "@react-types/shared@^3.3.0", "@react-types/shared@^3.4.0", "@react-types/shared@^3.5.0":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.5.0.tgz#dbc90e8fe711967e66d6f3ce0e17d34b24bd6283"
@@ -2349,6 +2428,13 @@
     "@react-types/grid" "^3.0.0"
     "@react-types/shared" "^3.8.0"
 
+"@react-types/textfield@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@react-types/textfield/-/textfield-3.3.2.tgz#c2d6cf6136e758358f759a38b97f2795ef34b7f3"
+  integrity sha512-SYB1o7ErVuVd34jZrW72ZvIiXOpJgN7vRm4X8GScFbQuxXZNAkIMxE1SCGUvGeqxku36jUaMGZ/RoCht3yR1ew==
+  dependencies:
+    "@react-types/shared" "^3.11.1"
+
 "@react-types/tooltip@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@react-types/tooltip/-/tooltip-3.1.1.tgz#7d45a4dd8c57c422a1a2dcb03b6c043e7481c3ca"

From c966eae8889c5c4d82afe1b711a517d0854ed276 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Fri, 18 Feb 2022 19:40:31 -0700
Subject: [PATCH 02/28] feat: new text field

---
 src/dropdown/DropdownButton.tsx |   7 +-
 src/field/Field.tsx             | 123 ++++++++++++++++
 src/field/FieldLabel.tsx        |  92 ++++++++++++
 src/field/HelpText.tsx          |  73 +++++++++
 src/field/index.tsx             |   1 +
 src/icon/Icon.tsx               |   5 +-
 src/textfield/TextField.tsx     |  40 +++++
 src/textfield/TextFieldBase.tsx | 252 ++++++++++++++++++++++++++++++++
 src/textfield/index.tsx         |   1 +
 src/theme.ts                    |  32 +++-
 stories/Gallery.stories.tsx     | 123 ++++++++++------
 stories/TextField.stories.tsx   |  56 +++++++
 12 files changed, 752 insertions(+), 53 deletions(-)
 create mode 100644 src/field/Field.tsx
 create mode 100644 src/field/FieldLabel.tsx
 create mode 100644 src/field/HelpText.tsx
 create mode 100644 src/field/index.tsx
 create mode 100644 src/textfield/TextField.tsx
 create mode 100644 src/textfield/TextFieldBase.tsx
 create mode 100644 src/textfield/index.tsx
 create mode 100644 stories/TextField.stories.tsx

diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx
index abbbebf5..9a361b7c 100644
--- a/src/dropdown/DropdownButton.tsx
+++ b/src/dropdown/DropdownButton.tsx
@@ -66,7 +66,7 @@ function DropdownButton(
         background-color: ${theme.colors.gray500};
         min-width: 200px;
         border: none;
-        border-radius: 4px;
+        border-radius: ${theme.borderRadius.medium}px;
         color: ${theme.textColors.white90};
         display: flex;
         justify-content: center;
@@ -78,8 +78,11 @@ function DropdownButton(
         transition: all 0.2s ease-in-out;
         /** provide an alternate highlight */
         outline: none;
+        &.is-hovered {
+          border: 1px solid ${theme.components.dropdown.hoverBorderColor};
+          background-color: ${theme.components.dropdown.activeBackgroundColor};
+        }
         &.is-active,
-        &.is-hovered,
         &:focus {
           border: 1px solid ${theme.components.dropdown.activeBorderColor};
           background-color: ${theme.components.dropdown.activeBackgroundColor};
diff --git a/src/field/Field.tsx b/src/field/Field.tsx
new file mode 100644
index 00000000..b97aa06a
--- /dev/null
+++ b/src/field/Field.tsx
@@ -0,0 +1,123 @@
+import { css } from '@emotion/core';
+import { classNames } from '../utils';
+import { HelpText, HelpTextComponentProps } from './HelpText';
+import { FieldLabel, FieldLabelProps } from './FieldLabel';
+import { LabelPosition } from '@react-types/shared';
+import { mergeProps } from '@react-aria/utils';
+import { Validation } from '../types';
+import React, {
+  RefObject,
+  HTMLAttributes,
+  ReactNode,
+  ReactElement,
+} from 'react';
+
+export interface FieldProps
+  extends FieldLabelProps,
+    HelpTextComponentProps,
+    Validation {
+  children: ReactElement;
+  label?: ReactNode;
+  labelProps: HTMLAttributes<HTMLElement>;
+  wrapperClassName?: string;
+}
+
+function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
+  let {
+    label,
+    labelPosition = 'top' as LabelPosition,
+    labelAlign,
+    isRequired,
+    necessityIndicator,
+    includeNecessityIndicatorInAccessibilityName,
+    validationState,
+    description,
+    errorMessage,
+    isDisabled,
+    showErrorIcon,
+    children,
+    labelProps,
+    // Not every component that uses <Field> supports help text.
+    descriptionProps = {},
+    errorMessageProps = {},
+    elementType,
+    wrapperClassName,
+  } = props;
+  let hasHelpText =
+    !!description || (errorMessage && validationState === 'invalid');
+
+  if (label || hasHelpText) {
+    let labelWrapperClass = classNames(
+      'ac-field',
+      {
+        'ac-field--positionTop': labelPosition === 'top',
+        'ac-field--positionSide': labelPosition === 'side',
+      },
+      wrapperClassName
+    );
+
+    children = React.cloneElement(
+      children,
+      // @ts-ignore
+      mergeProps(children.props, {
+        className: 'ac-field',
+      })
+    );
+
+    let renderHelpText = () => (
+      <HelpText
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+        description={description}
+        errorMessage={errorMessage}
+        validationState={validationState}
+        isDisabled={isDisabled}
+        // labelAlign={labelAlign} TODO support different alignments
+        showErrorIcon={showErrorIcon}
+      />
+    );
+
+    return (
+      <div
+        ref={ref as RefObject<HTMLDivElement>}
+        className={labelWrapperClass}
+        css={css`
+          /* For now assume vertical alignment of labels */
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+        `}
+      >
+        {label && (
+          <FieldLabel
+            {...labelProps}
+            labelPosition={labelPosition}
+            labelAlign={labelAlign}
+            isRequired={isRequired}
+            necessityIndicator={necessityIndicator}
+            includeNecessityIndicatorInAccessibilityName={
+              includeNecessityIndicatorInAccessibilityName
+            }
+            elementType={elementType}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        {children}
+        {renderHelpText()}
+      </div>
+    );
+  }
+
+  return React.cloneElement(
+    children,
+    // @ts-ignore
+    mergeProps(children.props, {
+      ref,
+    })
+  );
+}
+
+// @ts-ignore
+let _Field = React.forwardRef(Field);
+export { _Field as Field };
diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx
new file mode 100644
index 00000000..5928fff8
--- /dev/null
+++ b/src/field/FieldLabel.tsx
@@ -0,0 +1,92 @@
+import { classNames, useDOMRef } from '../utils';
+import { DOMRef } from '@react-types/shared';
+import { css } from '@emotion/core';
+import { filterDOMProps } from '@react-aria/utils';
+import React, { ReactNode, ElementType, HTMLAttributes } from 'react';
+import { DOMProps, LabelPosition, Alignment } from '../types';
+import theme from '../theme';
+
+interface LabelProps {
+  children?: ReactNode;
+  htmlFor?: string; // for compatibility with React
+  for?: string;
+  elementType?: ElementType;
+}
+
+interface FieldLabelPropsBase extends LabelProps, DOMProps {
+  labelPosition?: LabelPosition; // default top
+  labelAlign?: Alignment; // default start
+  isRequired?: boolean;
+
+  necessityIndicator?: 'icon' | 'label'; // default icon
+  includeNecessityIndicatorInAccessibilityName?: boolean;
+}
+
+export interface FieldLabelProps
+  extends FieldLabelPropsBase,
+    HTMLAttributes<HTMLElement> {}
+
+function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
+  let {
+    children,
+    labelPosition = 'top',
+    labelAlign = labelPosition === 'side' ? 'start' : null,
+    isRequired,
+    necessityIndicator = 'icon',
+    includeNecessityIndicatorInAccessibilityName = false,
+    htmlFor,
+    for: labelFor,
+    elementType: ElementType = 'label',
+    onClick,
+    ...otherProps
+  } = props;
+
+  let domRef = useDOMRef(ref);
+  let necessityLabel = isRequired ? '(required)' : '(optional)';
+  let icon = '*';
+
+  let labelClassNames = classNames('ac-field-label', {
+    'ac-field-label--positionSide': labelPosition === 'side',
+    'ac-field-label--alignEnd': labelAlign === 'end',
+  });
+
+  return (
+    <ElementType
+      {...filterDOMProps(otherProps)}
+      onClick={onClick}
+      ref={domRef}
+      className={labelClassNames}
+      htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}
+      css={css`
+        font-size: ${theme.typography.sizes.medium.fontSize}px;
+        font-weight: ${theme.typography.sizes.medium.lineHeight}px;
+        color: ${theme.textColors.white90};
+        padding: ${theme.spacing.padding4}px 0;
+        display: inline-block;
+      `}
+    >
+      {children}
+      {(necessityIndicator === 'label' ||
+        (necessityIndicator === 'icon' && isRequired)) &&
+        ' \u200b'}
+      {/* necessityLabel is hidden to screen readers if the field is required because
+       * aria-required is set on the field in that case. That will already be announced,
+       * so no need to duplicate it here. If optional, we do want it to be announced here. */}
+      {necessityIndicator === 'label' && (
+        <span
+          aria-hidden={
+            !includeNecessityIndicatorInAccessibilityName
+              ? isRequired
+              : undefined
+          }
+        >
+          {necessityLabel}
+        </span>
+      )}
+      {necessityIndicator === 'icon' && isRequired && icon}
+    </ElementType>
+  );
+}
+
+let _FieldLabel = React.forwardRef(FieldLabel);
+export { _FieldLabel as FieldLabel };
diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx
new file mode 100644
index 00000000..02dd56af
--- /dev/null
+++ b/src/field/HelpText.tsx
@@ -0,0 +1,73 @@
+// import AlertMedium from '@spectrum-icons/ui/AlertMedium';
+import { classNames, useDOMRef } from '../utils';
+import { DOMRef, HelpTextProps, Validation } from '../types';
+import React, { HTMLAttributes } from 'react';
+import { css } from '@emotion/core';
+import theme from '../theme';
+
+export interface HelpTextComponentProps extends HelpTextProps, Validation {
+  /** Props for the help text description element. */
+  descriptionProps: HTMLAttributes<HTMLElement>;
+  /** Props for the help text error message element. */
+  errorMessageProps: HTMLAttributes<HTMLElement>;
+  /** Whether the description is displayed with lighter text. */
+  isDisabled?: boolean;
+  /** Whether an error icon is rendered. */
+  showErrorIcon?: boolean;
+}
+
+function HelpText(props: HelpTextComponentProps, ref: DOMRef<HTMLDivElement>) {
+  let {
+    description,
+    errorMessage,
+    validationState,
+    isDisabled,
+    showErrorIcon,
+    descriptionProps,
+    errorMessageProps,
+  } = props;
+  let domRef = useDOMRef(ref);
+  let isErrorMessage = errorMessage && validationState === 'invalid';
+
+  return (
+    <div
+      className={classNames(
+        'ac-help-text',
+        `ac-help-text--${isErrorMessage ? 'danger' : 'neutral'}`,
+        { 'is-disabled': isDisabled }
+      )}
+      ref={domRef}
+      css={css`
+        height: 18px;
+        padding: ${theme.spacing.padding8}px 0 0 0;
+        &.ac-help-text--danger {
+          color: ${theme.colors.statusDanger};
+        }
+        .ac-help-text__text {
+          font-size: ${theme.typography.sizes.small.fontSize}px;
+          line-height: ${theme.typography.sizes.small.lineHeight}px;
+        }
+      `}
+    >
+      {isErrorMessage ? (
+        <>
+          {/* TODO support icons */}
+          {showErrorIcon && 'error icon here'}
+          <div {...errorMessageProps} className={'ac-help-text__text'}>
+            {errorMessage}
+          </div>
+        </>
+      ) : (
+        <div {...descriptionProps} className={'ac-help-text__text'}>
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
+ */
+const _HelpText = React.forwardRef(HelpText);
+export { _HelpText as HelpText };
diff --git a/src/field/index.tsx b/src/field/index.tsx
new file mode 100644
index 00000000..deacb782
--- /dev/null
+++ b/src/field/index.tsx
@@ -0,0 +1 @@
+export * from './Field';
diff --git a/src/icon/Icon.tsx b/src/icon/Icon.tsx
index 924827e8..ab928989 100644
--- a/src/icon/Icon.tsx
+++ b/src/icon/Icon.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, HTMLAttributes } from 'react';
+import { classNames } from '../utils';
 import { css } from '@emotion/core';
 
 interface IconProps extends HTMLAttributes<HTMLElement> {
@@ -8,10 +9,10 @@ interface IconProps extends HTMLAttributes<HTMLElement> {
 /**
  * Wraps the svg in a reasonable size and applies a color
  */
-export const Icon = ({ svg, style, ...restProps }: IconProps) => {
+export const Icon = ({ svg, style, className, ...restProps }: IconProps) => {
   return (
     <i
-      className="ac-icon-wrap"
+      className={classNames('ac-icon-wrap', className)}
       css={css`
         width: 1em;
         height: 1em;
diff --git a/src/textfield/TextField.tsx b/src/textfield/TextField.tsx
new file mode 100644
index 00000000..48d58217
--- /dev/null
+++ b/src/textfield/TextField.tsx
@@ -0,0 +1,40 @@
+import React, { forwardRef, RefObject, useRef } from 'react';
+import {
+  TextFieldBase,
+  AriaTextFieldProps,
+  TextFieldRef,
+} from './TextFieldBase';
+import { useTextField } from '@react-aria/textfield';
+
+export interface TextFieldProps extends AriaTextFieldProps {}
+function TextField(props: TextFieldProps, ref: RefObject<TextFieldRef>) {
+  let inputRef = useRef<HTMLInputElement>();
+  let {
+    labelProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    // @ts-ignore
+  } = useTextField(props, inputRef);
+  return (
+    <TextFieldBase
+      {...props}
+      labelProps={labelProps}
+      inputProps={inputProps}
+      descriptionProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+      ref={ref}
+      // @ts-ignore
+      inputRef={inputRef}
+    />
+  );
+}
+
+/**
+ * TextFields are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+// @ts-ignore
+const _TextField = forwardRef(TextField);
+export { _TextField as TextField };
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
new file mode 100644
index 00000000..4702d6dd
--- /dev/null
+++ b/src/textfield/TextFieldBase.tsx
@@ -0,0 +1,252 @@
+// import AlertMedium from '@spectrum-icons/ui/AlertMedium';
+// import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
+import { css } from '@emotion/core';
+import { classNames, createFocusableRef } from '../utils';
+import { Field } from '../field';
+import { FocusRing } from '@react-aria/focus';
+import { mergeProps } from '@react-aria/utils';
+import { PressEvents } from '@react-types/shared';
+import { Icon, AlertCircleOutline } from '../icon';
+import React, {
+  HTMLAttributes,
+  InputHTMLAttributes,
+  LabelHTMLAttributes,
+  ReactElement,
+  Ref,
+  RefObject,
+  TextareaHTMLAttributes,
+  useImperativeHandle,
+  useRef,
+  forwardRef,
+} from 'react';
+import {
+  InputBase,
+  LabelableProps,
+  ValueBase,
+  TextInputBase,
+  FocusableProps,
+  HelpTextProps,
+  Validation,
+  AriaLabelingProps,
+  FocusableDOMProps,
+  TextInputDOMProps,
+  AriaValidationProps,
+  FocusableRefValue,
+} from '../types';
+import { useHover } from '@react-aria/interactions';
+import theme from '../theme';
+
+export interface TextFieldProps
+  extends InputBase,
+    Validation,
+    HelpTextProps,
+    FocusableProps,
+    TextInputBase,
+    ValueBase<string>,
+    LabelableProps {}
+
+/**
+ * Extend the base interface with a11y props
+ */
+
+export interface AriaTextFieldProps
+  extends TextFieldProps,
+    AriaLabelingProps,
+    FocusableDOMProps,
+    TextInputDOMProps,
+    AriaValidationProps {
+  // https://www.w3.org/TR/wai-aria-1.2/#textbox
+  /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
+  'aria-activedescendant'?: string;
+  /**
+   * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
+   * presented if they are made.
+   */
+  'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
+  /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+  'aria-haspopup'?:
+    | boolean
+    | 'false'
+    | 'true'
+    | 'menu'
+    | 'listbox'
+    | 'tree'
+    | 'grid'
+    | 'dialog';
+}
+
+interface TextFieldBaseProps
+  extends Omit<AriaTextFieldProps, 'onChange'>,
+    PressEvents {
+  wrapperChildren?: ReactElement | ReactElement[];
+  inputClassName?: string;
+  validationIconClassName?: string;
+  multiLine?: boolean;
+  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+  inputProps:
+    | InputHTMLAttributes<HTMLInputElement>
+    | TextareaHTMLAttributes<HTMLTextAreaElement>;
+  descriptionProps?: HTMLAttributes<HTMLElement>;
+  errorMessageProps?: HTMLAttributes<HTMLElement>;
+  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;
+  loadingIndicator?: ReactElement;
+  isLoading?: boolean;
+}
+
+export interface TextFieldRef
+  extends FocusableRefValue<
+    HTMLInputElement | HTMLTextAreaElement,
+    HTMLDivElement
+  > {
+  select(): void;
+  getInputElement(): HTMLInputElement | HTMLTextAreaElement;
+}
+
+function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
+  let {
+    label,
+    validationState,
+    isDisabled,
+    multiLine,
+    autoFocus,
+    inputClassName,
+    wrapperChildren,
+    labelProps = {},
+    inputProps,
+    descriptionProps = {},
+    errorMessageProps = {},
+    inputRef,
+    isLoading,
+    loadingIndicator,
+  } = props;
+  let { hoverProps, isHovered } = useHover({ isDisabled });
+  let domRef = useRef<HTMLDivElement>(null);
+  let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  inputRef = inputRef || defaultInputRef;
+
+  // Expose imperative interface for ref
+  useImperativeHandle(ref, () => ({
+    ...createFocusableRef(domRef, inputRef),
+    select() {
+      if (inputRef?.current) {
+        inputRef?.current.select();
+      }
+    },
+    // @ts-ignore
+    getInputElement() {
+      return inputRef?.current;
+    },
+  }));
+
+  let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';
+  let isInvalid = validationState === 'invalid';
+
+  let validation = (
+    <Icon
+      className="ac-textfield__validation-icon"
+      svg={<AlertCircleOutline />}
+    />
+  );
+
+  let textField = (
+    <div
+      className={classNames('ac-textfield', {
+        'ac-textfield--invalid': isInvalid,
+        'ac-textfield--valid': validationState === 'valid',
+        'ac-textfield--loadable': loadingIndicator,
+        'ac-textfield--multiline': multiLine,
+      })}
+      css={css`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-width: 400px;
+        border: 1px solid ${theme.colors.lightGrayBorder};
+        border-radius: ${theme.borderRadius.medium}px;
+        background-color: ${theme.components.textField.backgroundColor};
+        &.is-hovered {
+          border: 1px solid ${theme.components.textField.hoverBorderColor};
+          background-color: ${theme.components.textField.activeBackgroundColor};
+        }
+        &:focus {
+          border: 1px solid ${theme.components.textField.activeBorderColor};
+          background-color: ${theme.components.textField.activeBackgroundColor};
+        }
+        ::placeholder {
+          color: ${theme.textColors.white50};
+          font-style: italic;
+        }
+        .ac-textfield__input {
+          flex: 1 1 auto;
+          box-sizing: border-box;
+          background-color: transparent;
+          color: ${theme.textColors.white90};
+          height: ${theme.singleLineHeight}px;
+          padding: ${theme.spacing.padding4}px ${theme.spacing.padding8}px;
+          transition: all 0.2s ease-in-out;
+          /** provide an alternate highlight */
+          outline: none;
+          border: none;
+        }
+
+        &.ac-textfield--invalid {
+          color: ${theme.colors.statusDanger};
+          border: 1px solid ${theme.colors.statusDanger};
+        }
+        .ac-textfield__validation-icon {
+          color: inherit;
+          flex: none;
+          margin-right: ${theme.spacing.padding8}px;
+        }
+      `}
+    >
+      <FocusRing
+        focusRingClass={'focus-ring'}
+        isTextInput
+        autoFocus={autoFocus}
+      >
+        <ElementType
+          {...mergeProps(inputProps, hoverProps)}
+          ref={inputRef as any}
+          rows={multiLine ? 1 : undefined}
+          className={classNames(
+            'ac-textfield__input',
+            {
+              'is-hovered': isHovered,
+            },
+            inputClassName
+          )}
+        />
+      </FocusRing>
+      {validationState && !isLoading ? validation : null}
+      {isLoading && loadingIndicator}
+      {wrapperChildren}
+    </div>
+  );
+
+  if (label) {
+    textField = React.cloneElement(
+      textField,
+      mergeProps(textField.props, {
+        // TODO support muli-line text areas
+        className: multiLine ? 'ac-field--multiline' : '',
+      })
+    );
+  }
+
+  return (
+    <Field
+      {...props}
+      labelProps={labelProps}
+      descriptionProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+      showErrorIcon={false}
+      ref={domRef}
+    >
+      {textField}
+    </Field>
+  );
+}
+
+const _TextFieldBase = forwardRef(TextFieldBase);
+export { _TextFieldBase as TextFieldBase };
diff --git a/src/textfield/index.tsx b/src/textfield/index.tsx
new file mode 100644
index 00000000..665fa3cb
--- /dev/null
+++ b/src/textfield/index.tsx
@@ -0,0 +1 @@
+export * from './TextField';
diff --git a/src/theme.ts b/src/theme.ts
index 1ce9cff4..3cab6042 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,3 +1,4 @@
+import { lighten } from 'polished';
 const baseColors = {
   dark1: '#0B1015', // body bg
   dark2: '#17202A', // nav bg
@@ -25,6 +26,12 @@ const arizeColors = {
   arizeLightBlue: '#72D9FF',
 };
 
+const borderColors = {
+  grayBorder: '#2e363e',
+  lightGrayBorder: '#768CA3',
+  lightGrayHoverBorder: lighten(0.2, '#768CA3'),
+};
+
 const textColors = {
   white90: `rgba(255, 255, 255, 0.9)`,
   white70: `rgba(255, 255, 255, 0.7)`,
@@ -48,9 +55,9 @@ const theme = {
     ...baseColors,
     ...arizeColors,
     ...grayColors,
+    ...borderColors,
     primary: '#db247c', // pink
     secondary: '#db247c', // blue
-    grayBorder: '#2e363e',
     statusInfo: '#72D9FF',
     statusSuccess: '#7EE787', // RGB independent success color
     statusWarning: '#E69958',
@@ -73,14 +80,22 @@ const theme = {
       borderColor: '#6F7D8C',
     },
     dropdown: {
-      borderColor: 'rgba(118, 140, 163, .6)',
-      activeBorderColor: 'rgba(118, 140, 163, 1)',
-      activeBackgroundColor: '#313A44',
+      borderColor: borderColors.lightGrayBorder,
+      hoverBorderColor: borderColors.lightGrayHoverBorder,
+      activeBorderColor: arizeColors.arizeLightBlue,
+      activeBackgroundColor: lighten(0.05, grayColors.gray500),
+    },
+    textField: {
+      borderColor: borderColors.lightGrayBorder,
+      hoverBorderColor: borderColors.lightGrayHoverBorder,
+      activeBorderColor: arizeColors.arizeLightBlue,
+      backgroundColor: grayColors.gray500,
+      activeBackgroundColor: lighten(0.05, grayColors.gray500),
     },
     button: {
       primaryBorderColor: '#5BAECC',
       primaryHoverBackgroundColor: '#5BAECC',
-      defaultBorderColor: '#768CA3',
+      defaultBorderColor: borderColors.lightGrayBorder,
       defaultHoverBackgroundColor: '#64768A',
     },
   },
@@ -154,6 +169,13 @@ const theme = {
       duration: 200,
     },
   },
+  /**
+   * The height of a single line of form input etc.
+   */
+  singleLineHeight: 38,
+  borderRadius: {
+    medium: 4,
+  },
 };
 
 export default theme;
diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
index f1f6c74f..a6a24617 100644
--- a/stories/Gallery.stories.tsx
+++ b/stories/Gallery.stories.tsx
@@ -1,7 +1,15 @@
 import React from 'react';
 import { css } from '@emotion/core';
 import { Meta, Story } from '@storybook/react';
-import { Alert, Card, useNotification, Button } from '../src';
+import {
+  Alert,
+  Card,
+  useNotification,
+  Button,
+  TextField,
+  Dropdown,
+  Provider,
+} from '../src';
 
 // @ts-ignore
 import chartFile from './images/chart.png';
@@ -23,54 +31,81 @@ export default meta;
 const Template: Story = args => {
   const [notify, holder] = useNotification();
   return (
-    <div>
-      <Card
-        title="Prediction Volume"
-        bodyStyle={{ padding: 0 }}
-        extra={
-          <Button
-            variant="default"
-            onClick={() => {
-              notify({
-                variant: 'success',
-                title: 'Awesome!',
-                message: 'Things worked as expected',
-                action: {
-                  text: 'Try This',
-                  onClick: () => {},
-                },
-              });
-            }}
-          >
-            Notify
-          </Button>
-        }
+    <Provider>
+      <div
+        css={css`
+          .ac-card + .ac-card {
+            margin-top: 16px;
+          }
+        `}
       >
-        <div
-          css={css`
-            position: relative;
-            .ac-alert {
-              position: absolute;
-              left: 0;
-              right: 0;
-            }
-          `}
+        <Card
+          title="Prediction Volume"
+          bodyStyle={{ padding: 0 }}
+          extra={
+            <Button
+              variant="default"
+              onClick={() => {
+                notify({
+                  variant: 'success',
+                  title: 'Awesome!',
+                  message: 'Things worked as expected',
+                  action: {
+                    text: 'Try This',
+                    onClick: () => {},
+                  },
+                });
+              }}
+            >
+              Notify
+            </Button>
+          }
         >
-          <Alert variant="info" banner title="Heads up">
-            Your predictions may be delayed by up to 10 minutes
-          </Alert>
+          <div
+            css={css`
+              position: relative;
+              .ac-alert {
+                position: absolute;
+                left: 0;
+                right: 0;
+              }
+            `}
+          >
+            <Alert variant="info" banner title="Heads up">
+              Your predictions may be delayed by up to 10 minutes
+            </Alert>
 
-          <img
-            src={chartFile}
-            alt="chart image"
+            <img
+              src={chartFile}
+              alt="chart image"
+              css={css`
+                margin: 24px;
+              `}
+            />
+          </div>
+        </Card>
+        <Card title="Example Form">
+          <div
             css={css`
-              margin: 24px;
+              display: flex;
+              align-items: flex-end;
+              flex-direction: row;
+              .ac-textfield {
+                margin-right: 8px;
+              }
+              .ac-button {
+                margin-left: 8px;
+              }
             `}
-          />
-        </div>
-      </Card>
-      {holder}
-    </div>
+          >
+            <TextField label="name" placeholder="enter your name" />
+            <Dropdown menu={<div>Hello</div>}>Action</Dropdown>
+            <Button variant="primary">Submit</Button>
+          </div>
+        </Card>
+        {holder}
+      </div>
+    </Provider>
   );
 };
 
diff --git a/stories/TextField.stories.tsx b/stories/TextField.stories.tsx
new file mode 100644
index 00000000..9ba96969
--- /dev/null
+++ b/stories/TextField.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { withDesign } from 'storybook-addon-designs';
+import { TextField, TextFieldProps } from '../src';
+
+const meta: Meta = {
+  title: 'TextField',
+  component: TextField,
+  decorators: [withDesign],
+  parameters: {
+    controls: { expanded: true },
+    // design: {
+    //   type: 'figma',
+    //   url:
+    //     'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=76%3A505',
+    // },
+  },
+};
+
+export default meta;
+
+/**
+ * A gallery of all the variants
+ */
+export const Gallery = () => (
+  <div>
+    <TextField label="Name" placeholder="enter your name" />
+    <TextField
+      label="Name"
+      placeholder="enter your name"
+      defaultValue="Michael King"
+    />
+    <TextField label="Name" placeholder="enter your name" isRequired />
+    <TextField
+      label="Name"
+      placeholder="enter your name"
+      isRequired
+      validationState={'invalid'}
+    />
+    <TextField
+      label="Name"
+      placeholder="enter your name"
+      isRequired
+      validationState={'invalid'}
+      errorMessage="This field is required"
+    />
+  </div>
+);
+
+const Template: Story<TextFieldProps> = args => (
+  <TextField {...args}>Label Text</TextField>
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});

From db34e78aa2436a0f10df71ad43d9d33276633afc Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Tue, 22 Feb 2022 13:52:11 -0700
Subject: [PATCH 03/28] feat: textfield

---
 src/content/Addon.tsx           | 24 ++++++++++++++++++++++++
 src/content/index.tsx           |  1 +
 src/dropdown/DropdownButton.tsx | 20 +-------------------
 src/field/Field.tsx             |  3 ++-
 src/field/FieldLabel.tsx        |  4 ++--
 src/field/HelpText.tsx          |  4 ++--
 src/textfield/TextField.tsx     |  3 ++-
 src/textfield/TextFieldBase.tsx | 28 ++++++++++++++++++----------
 src/theme.ts                    |  6 +++---
 stories/TextField.stories.tsx   |  8 ++++++++
 10 files changed, 63 insertions(+), 38 deletions(-)
 create mode 100644 src/content/Addon.tsx

diff --git a/src/content/Addon.tsx b/src/content/Addon.tsx
new file mode 100644
index 00000000..6e89e00f
--- /dev/null
+++ b/src/content/Addon.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/core';
+import theme from '../theme';
+import { Text } from './Text';
+
+const addonBeforeCSS = css`
+  background-color: ${theme.colors.gray400};
+  padding: ${theme.spacing.padding8}px;
+  flex: none;
+  box-sizing: border-box;
+`;
+
+/**
+ * A label element that describes the button
+ */
+export function AddonBefore({ children }: { children: ReactNode }) {
+  return (
+    <div css={addonBeforeCSS}>
+      <Text textSize="medium" weight="heavy" color="white70">
+        {children}
+      </Text>
+    </div>
+  );
+}
diff --git a/src/content/index.tsx b/src/content/index.tsx
index 84bd7a30..159f8517 100644
--- a/src/content/index.tsx
+++ b/src/content/index.tsx
@@ -1,2 +1,3 @@
 export * from './Heading';
 export * from './Text';
+export * from './Addon';
diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx
index 9a361b7c..4e493b40 100644
--- a/src/dropdown/DropdownButton.tsx
+++ b/src/dropdown/DropdownButton.tsx
@@ -7,28 +7,10 @@ import { useHover } from '@react-aria/interactions';
 import { FocusableRef } from '../types';
 import { useFocusableRef } from '../utils/useDOMRef';
 import theme from '../theme';
-import { Text } from '../content';
+import { Text, AddonBefore } from '../content';
 import { Icon, ArrowIosDownwardOutline } from '../icon';
 import { AddonableProps } from '../types';
 
-const addonBeforeCSS = css`
-  background-color: ${theme.colors.gray400};
-  padding: ${theme.spacing.padding8}px;
-  flex: none;
-`;
-
-/**
- * A label element that describes the button
- */
-function AddonBefore({ children }: { children: ReactNode }) {
-  return (
-    <div css={addonBeforeCSS}>
-      <Text textSize="medium" weight="heavy" color="white70">
-        {children}
-      </Text>
-    </div>
-  );
-}
 export interface DropdownButtonProps extends AddonableProps {
   /** Whether the button is disabled. */
   isDisabled?: boolean;
diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index b97aa06a..f4d73651 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -52,6 +52,7 @@ function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
       {
         'ac-field--positionTop': labelPosition === 'top',
         'ac-field--positionSide': labelPosition === 'side',
+        'ac-field--hasHelpText': hasHelpText,
       },
       wrapperClassName
     );
@@ -104,7 +105,7 @@ function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
           </FieldLabel>
         )}
         {children}
-        {renderHelpText()}
+        {hasHelpText && renderHelpText()}
       </div>
     );
   }
diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx
index 5928fff8..fa9b611f 100644
--- a/src/field/FieldLabel.tsx
+++ b/src/field/FieldLabel.tsx
@@ -58,8 +58,8 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
       className={labelClassNames}
       htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}
       css={css`
-        font-size: ${theme.typography.sizes.medium.fontSize}px;
-        font-weight: ${theme.typography.sizes.medium.lineHeight}px;
+        font-size: ${theme.typography.sizes.small.fontSize}px;
+        font-weight: ${theme.typography.sizes.small.lineHeight}px;
         color: ${theme.textColors.white90};
         padding: ${theme.spacing.padding4}px 0;
         display: inline-block;
diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx
index 02dd56af..031adcd6 100644
--- a/src/field/HelpText.tsx
+++ b/src/field/HelpText.tsx
@@ -38,8 +38,8 @@ function HelpText(props: HelpTextComponentProps, ref: DOMRef<HTMLDivElement>) {
       )}
       ref={domRef}
       css={css`
-        height: 18px;
-        padding: ${theme.spacing.padding8}px 0 0 0;
+        height: 16px;
+        padding: ${theme.spacing.padding4}px 0;
         &.ac-help-text--danger {
           color: ${theme.colors.statusDanger};
         }
diff --git a/src/textfield/TextField.tsx b/src/textfield/TextField.tsx
index 48d58217..17a0ee7a 100644
--- a/src/textfield/TextField.tsx
+++ b/src/textfield/TextField.tsx
@@ -5,8 +5,9 @@ import {
   TextFieldRef,
 } from './TextFieldBase';
 import { useTextField } from '@react-aria/textfield';
+import { AddonableProps } from '../types';
 
-export interface TextFieldProps extends AriaTextFieldProps {}
+export interface TextFieldProps extends AriaTextFieldProps, AddonableProps {}
 function TextField(props: TextFieldProps, ref: RefObject<TextFieldRef>) {
   let inputRef = useRef<HTMLInputElement>();
   let {
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index 4702d6dd..d07dc2de 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -32,7 +32,9 @@ import {
   TextInputDOMProps,
   AriaValidationProps,
   FocusableRefValue,
+  AddonableProps,
 } from '../types';
+import { AddonBefore } from '../content';
 import { useHover } from '@react-aria/interactions';
 import theme from '../theme';
 
@@ -77,6 +79,7 @@ export interface AriaTextFieldProps
 
 interface TextFieldBaseProps
   extends Omit<AriaTextFieldProps, 'onChange'>,
+    AddonableProps,
     PressEvents {
   wrapperChildren?: ReactElement | ReactElement[];
   inputClassName?: string;
@@ -118,8 +121,10 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
     inputRef,
     isLoading,
     loadingIndicator,
+    addonBefore,
   } = props;
   let { hoverProps, isHovered } = useHover({ isDisabled });
+  let [isFocused, setIsFocused] = React.useState(false);
   let domRef = useRef<HTMLDivElement>(null);
   let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   inputRef = inputRef || defaultInputRef;
@@ -155,20 +160,23 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         'ac-textfield--valid': validationState === 'valid',
         'ac-textfield--loadable': loadingIndicator,
         'ac-textfield--multiline': multiLine,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
       })}
       css={css`
         display: flex;
         flex-direction: row;
         align-items: center;
-        min-width: 400px;
+        min-width: 250px;
         border: 1px solid ${theme.colors.lightGrayBorder};
         border-radius: ${theme.borderRadius.medium}px;
         background-color: ${theme.components.textField.backgroundColor};
+        transition: all 0.2s ease-in-out;
         &.is-hovered {
           border: 1px solid ${theme.components.textField.hoverBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
         }
-        &:focus {
+        &.is-focused {
           border: 1px solid ${theme.components.textField.activeBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
         }
@@ -200,22 +208,22 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         }
       `}
     >
+      {addonBefore != null ? <AddonBefore>{addonBefore}</AddonBefore> : null}
       <FocusRing
         focusRingClass={'focus-ring'}
         isTextInput
         autoFocus={autoFocus}
       >
         <ElementType
-          {...mergeProps(inputProps, hoverProps)}
+          {...mergeProps(inputProps, hoverProps, {
+            onFocus: () => {
+              setIsFocused(true);
+            },
+            onBlur: () => setIsFocused(false),
+          })}
           ref={inputRef as any}
           rows={multiLine ? 1 : undefined}
-          className={classNames(
-            'ac-textfield__input',
-            {
-              'is-hovered': isHovered,
-            },
-            inputClassName
-          )}
+          className={classNames('ac-textfield__input', inputClassName)}
         />
       </FocusRing>
       {validationState && !isLoading ? validation : null}
diff --git a/src/theme.ts b/src/theme.ts
index 3cab6042..eea88d8c 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,4 +1,4 @@
-import { lighten } from 'polished';
+import { lighten, darken } from 'polished';
 const baseColors = {
   dark1: '#0B1015', // body bg
   dark2: '#17202A', // nav bg
@@ -83,14 +83,14 @@ const theme = {
       borderColor: borderColors.lightGrayBorder,
       hoverBorderColor: borderColors.lightGrayHoverBorder,
       activeBorderColor: arizeColors.arizeLightBlue,
-      activeBackgroundColor: lighten(0.05, grayColors.gray500),
+      activeBackgroundColor: darken(0.05, grayColors.gray500),
     },
     textField: {
       borderColor: borderColors.lightGrayBorder,
       hoverBorderColor: borderColors.lightGrayHoverBorder,
       activeBorderColor: arizeColors.arizeLightBlue,
       backgroundColor: grayColors.gray500,
-      activeBackgroundColor: lighten(0.05, grayColors.gray500),
+      activeBackgroundColor: darken(0.05, grayColors.gray500),
     },
     button: {
       primaryBorderColor: '#5BAECC',
diff --git a/stories/TextField.stories.tsx b/stories/TextField.stories.tsx
index 9ba96969..b0dcaed9 100644
--- a/stories/TextField.stories.tsx
+++ b/stories/TextField.stories.tsx
@@ -44,6 +44,14 @@ export const Gallery = () => (
       validationState={'invalid'}
       errorMessage="This field is required"
     />
+    <TextField
+      label="Charge"
+      placeholder="enter your amount"
+      isRequired
+      validationState={'invalid'}
+      addonBefore="$"
+      errorMessage="This field is required"
+    />
   </div>
 );
 

From a096fbd38783cbb8a50d6827315ee518f23e5192 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Tue, 22 Feb 2022 13:55:35 -0700
Subject: [PATCH 04/28] fix addon class names

---
 src/content/Addon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/Addon.tsx b/src/content/Addon.tsx
index 6e89e00f..071c5291 100644
--- a/src/content/Addon.tsx
+++ b/src/content/Addon.tsx
@@ -11,11 +11,11 @@ const addonBeforeCSS = css`
 `;
 
 /**
- * A label element that describes the button
+ * A label element that describes a button or an input field
  */
 export function AddonBefore({ children }: { children: ReactNode }) {
   return (
-    <div css={addonBeforeCSS}>
+    <div css={addonBeforeCSS} className="ac-addon ac-addon--before">
       <Text textSize="medium" weight="heavy" color="white70">
         {children}
       </Text>

From fb08081e0b7e004ffcf6085ac2b76028fd14b6b9 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Tue, 22 Feb 2022 14:33:29 -0700
Subject: [PATCH 05/28] fix label extra

---
 src/content/Addon.tsx           | 24 ------------------------
 src/content/index.tsx           |  1 -
 src/dropdown/DropdownButton.tsx |  3 ++-
 src/field/Field.tsx             |  2 ++
 src/field/FieldLabel.tsx        | 24 +++++++++++++++++-------
 src/field/index.tsx             |  1 +
 src/textfield/TextFieldBase.tsx |  6 ++++--
 src/types/labelable.ts          |  7 +++++++
 stories/TextField.stories.tsx   |  2 ++
 stories/components/InfoTip.tsx  |  1 +
 10 files changed, 36 insertions(+), 35 deletions(-)
 delete mode 100644 src/content/Addon.tsx

diff --git a/src/content/Addon.tsx b/src/content/Addon.tsx
deleted file mode 100644
index 071c5291..00000000
--- a/src/content/Addon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { ReactNode } from 'react';
-import { css } from '@emotion/core';
-import theme from '../theme';
-import { Text } from './Text';
-
-const addonBeforeCSS = css`
-  background-color: ${theme.colors.gray400};
-  padding: ${theme.spacing.padding8}px;
-  flex: none;
-  box-sizing: border-box;
-`;
-
-/**
- * A label element that describes a button or an input field
- */
-export function AddonBefore({ children }: { children: ReactNode }) {
-  return (
-    <div css={addonBeforeCSS} className="ac-addon ac-addon--before">
-      <Text textSize="medium" weight="heavy" color="white70">
-        {children}
-      </Text>
-    </div>
-  );
-}
diff --git a/src/content/index.tsx b/src/content/index.tsx
index 159f8517..84bd7a30 100644
--- a/src/content/index.tsx
+++ b/src/content/index.tsx
@@ -1,3 +1,2 @@
 export * from './Heading';
 export * from './Text';
-export * from './Addon';
diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx
index 4e493b40..59455fec 100644
--- a/src/dropdown/DropdownButton.tsx
+++ b/src/dropdown/DropdownButton.tsx
@@ -7,7 +7,8 @@ import { useHover } from '@react-aria/interactions';
 import { FocusableRef } from '../types';
 import { useFocusableRef } from '../utils/useDOMRef';
 import theme from '../theme';
-import { Text, AddonBefore } from '../content';
+import { Text } from '../content';
+import { AddonBefore } from '../field';
 import { Icon, ArrowIosDownwardOutline } from '../icon';
 import { AddonableProps } from '../types';
 
diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index f4d73651..b6444dc1 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -25,6 +25,7 @@ export interface FieldProps
 function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
   let {
     label,
+    labelExtra,
     labelPosition = 'top' as LabelPosition,
     labelAlign,
     isRequired,
@@ -94,6 +95,7 @@ function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
             {...labelProps}
             labelPosition={labelPosition}
             labelAlign={labelAlign}
+            labelExtra={labelExtra}
             isRequired={isRequired}
             necessityIndicator={necessityIndicator}
             includeNecessityIndicatorInAccessibilityName={
diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx
index fa9b611f..30fd43e1 100644
--- a/src/field/FieldLabel.tsx
+++ b/src/field/FieldLabel.tsx
@@ -3,7 +3,7 @@ import { DOMRef } from '@react-types/shared';
 import { css } from '@emotion/core';
 import { filterDOMProps } from '@react-aria/utils';
 import React, { ReactNode, ElementType, HTMLAttributes } from 'react';
-import { DOMProps, LabelPosition, Alignment } from '../types';
+import { DOMProps, LabelableProps, ExtendableLabelProps } from '../types';
 import theme from '../theme';
 
 interface LabelProps {
@@ -13,12 +13,11 @@ interface LabelProps {
   elementType?: ElementType;
 }
 
-interface FieldLabelPropsBase extends LabelProps, DOMProps {
-  labelPosition?: LabelPosition; // default top
-  labelAlign?: Alignment; // default start
-  isRequired?: boolean;
-
-  necessityIndicator?: 'icon' | 'label'; // default icon
+interface FieldLabelPropsBase
+  extends LabelProps,
+    LabelableProps,
+    ExtendableLabelProps,
+    DOMProps {
   includeNecessityIndicatorInAccessibilityName?: boolean;
 }
 
@@ -31,6 +30,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
     children,
     labelPosition = 'top',
     labelAlign = labelPosition === 'side' ? 'start' : null,
+    labelExtra,
     isRequired,
     necessityIndicator = 'icon',
     includeNecessityIndicatorInAccessibilityName = false,
@@ -84,6 +84,16 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         </span>
       )}
       {necessityIndicator === 'icon' && isRequired && icon}
+      {labelExtra && (
+        <span
+          className="ac-field-label__label-extra"
+          css={css`
+            margin-left: ${theme.spacing.padding4}px;
+          `}
+        >
+          {labelExtra}
+        </span>
+      )}
     </ElementType>
   );
 }
diff --git a/src/field/index.tsx b/src/field/index.tsx
index deacb782..bb7f4b70 100644
--- a/src/field/index.tsx
+++ b/src/field/index.tsx
@@ -1 +1,2 @@
 export * from './Field';
+export * from './Addon';
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index d07dc2de..a8ca6500 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -22,6 +22,7 @@ import React, {
 import {
   InputBase,
   LabelableProps,
+  ExtendableLabelProps,
   ValueBase,
   TextInputBase,
   FocusableProps,
@@ -34,7 +35,7 @@ import {
   FocusableRefValue,
   AddonableProps,
 } from '../types';
-import { AddonBefore } from '../content';
+import { AddonBefore } from '../field';
 import { useHover } from '@react-aria/interactions';
 import theme from '../theme';
 
@@ -45,7 +46,8 @@ export interface TextFieldProps
     FocusableProps,
     TextInputBase,
     ValueBase<string>,
-    LabelableProps {}
+    LabelableProps,
+    ExtendableLabelProps {}
 
 /**
  * Extend the base interface with a11y props
diff --git a/src/types/labelable.ts b/src/types/labelable.ts
index 2740e9b1..a69559b3 100644
--- a/src/types/labelable.ts
+++ b/src/types/labelable.ts
@@ -28,6 +28,13 @@ export interface LabelableProps {
   isRequired?: boolean;
 }
 
+export interface ExtendableLabelProps {
+  /**
+   * An extra element to add at the end of the label
+   */
+  labelExtra?: ReactNode;
+}
+
 /**
  * An interface for things that support addon labels
  */
diff --git a/stories/TextField.stories.tsx b/stories/TextField.stories.tsx
index b0dcaed9..a287feda 100644
--- a/stories/TextField.stories.tsx
+++ b/stories/TextField.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
 import { TextField, TextFieldProps } from '../src';
+import InfoTip from './components/InfoTip';
 
 const meta: Meta = {
   title: 'TextField',
@@ -46,6 +47,7 @@ export const Gallery = () => (
     />
     <TextField
       label="Charge"
+      labelExtra={<InfoTip>The amount you will be charged</InfoTip>}
       placeholder="enter your amount"
       isRequired
       validationState={'invalid'}
diff --git a/stories/components/InfoTip.tsx b/stories/components/InfoTip.tsx
index 500eddec..f2079575 100644
--- a/stories/components/InfoTip.tsx
+++ b/stories/components/InfoTip.tsx
@@ -50,6 +50,7 @@ function InfoTip({ children, postfix = true }: InfoTipProps) {
             background: 'transparent',
             cursor: 'pointer',
             color: 'inherit',
+            verticalAlign: 'bottom',
           }}
         >
           <Icon

From 6c32db1af2740dd883dd529256c22b7d560aa520 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Tue, 22 Feb 2022 15:18:12 -0700
Subject: [PATCH 06/28] Bump size

---
 package.json        |  4 ++--
 src/field/Addon.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/field/Addon.tsx

diff --git a/package.json b/package.json
index 3a1472b4..c2db05e0 100644
--- a/package.json
+++ b/package.json
@@ -55,11 +55,11 @@
   "size-limit": [
     {
       "path": "dist/components.cjs.production.min.js",
-      "limit": "100 KB"
+      "limit": "150 KB"
     },
     {
       "path": "dist/components.esm.js",
-      "limit": "100 KB"
+      "limit": "150 KB"
     }
   ],
   "devDependencies": {
diff --git a/src/field/Addon.tsx b/src/field/Addon.tsx
new file mode 100644
index 00000000..e5a812e0
--- /dev/null
+++ b/src/field/Addon.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/core';
+import theme from '../theme';
+import { Text } from '../content/Text';
+
+const addonBeforeCSS = css`
+  background-color: ${theme.colors.gray400};
+  padding: ${theme.spacing.padding8}px;
+  flex: none;
+  box-sizing: border-box;
+`;
+
+/**
+ * A label element that describes a button or an input field
+ */
+export function AddonBefore({ children }: { children: ReactNode }) {
+  return (
+    <div css={addonBeforeCSS} className="ac-addon ac-addon--before">
+      <Text textSize="medium" weight="heavy" color="white70">
+        {children}
+      </Text>
+    </div>
+  );
+}

From 2c6e02b9f18171ac6f4457baa4d498729082dccb Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Tue, 22 Feb 2022 15:25:54 -0700
Subject: [PATCH 07/28] Fix overflow

---
 src/textfield/TextFieldBase.tsx | 1 +
 src/theme.ts                    | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index a8ca6500..fe76f2d4 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -174,6 +174,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         border-radius: ${theme.borderRadius.medium}px;
         background-color: ${theme.components.textField.backgroundColor};
         transition: all 0.2s ease-in-out;
+        overflow: hidden;
         &.is-hovered {
           border: 1px solid ${theme.components.textField.hoverBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
diff --git a/src/theme.ts b/src/theme.ts
index eea88d8c..665d6e53 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -83,14 +83,14 @@ const theme = {
       borderColor: borderColors.lightGrayBorder,
       hoverBorderColor: borderColors.lightGrayHoverBorder,
       activeBorderColor: arizeColors.arizeLightBlue,
-      activeBackgroundColor: darken(0.05, grayColors.gray500),
+      activeBackgroundColor: darken(0.02, grayColors.gray500),
     },
     textField: {
       borderColor: borderColors.lightGrayBorder,
       hoverBorderColor: borderColors.lightGrayHoverBorder,
       activeBorderColor: arizeColors.arizeLightBlue,
       backgroundColor: grayColors.gray500,
-      activeBackgroundColor: darken(0.05, grayColors.gray500),
+      activeBackgroundColor: darken(0.02, grayColors.gray500),
     },
     button: {
       primaryBorderColor: '#5BAECC',
@@ -172,7 +172,7 @@ const theme = {
   /**
    * The height of a single line of form input etc.
    */
-  singleLineHeight: 38,
+  singleLineHeight: 36,
   borderRadius: {
     medium: 4,
   },

From 4934c2fb89ecc39fed8dd9d16498f420d1c240d1 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Tue, 22 Feb 2022 17:03:40 -0700
Subject: [PATCH 08/28] upgrade chromatic

---
 package.json                    |   2 +-
 src/textfield/TextFieldBase.tsx |   2 +-
 yarn.lock                       | 735 ++------------------------------
 3 files changed, 38 insertions(+), 701 deletions(-)

diff --git a/package.json b/package.json
index c2db05e0..59b11206 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "@types/react-transition-group": "^4.4.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-polished": "^1.1.0",
-    "chromatic": "^5.2.0",
+    "chromatic": "^6.5.1",
     "husky": "^4.3.0",
     "polished": "^4.1.0",
     "react": "^17.0.1",
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index fe76f2d4..d8f09b38 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -183,7 +183,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
           border: 1px solid ${theme.components.textField.activeBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
         }
-        ::placeholder {
+        .ac-textfield__input::placeholder {
           color: ${theme.textColors.white50};
           font-style: italic;
         }
diff --git a/yarn.lock b/yarn.lock
index 850dde71..a7c2d0af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,28 +2,6 @@
 # yarn lockfile v1
 
 
-"@actions/core@^1.2.4":
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@actions/core/-/core-1.2.7.tgz#594f8c45b213f0146e4be7eda8ae5cf4e198e5ab"
-  integrity sha512-kzLFD5BgEvq6ubcxdgPbRKGD2Qrgya/5j+wh4LZzqT915I0V3rED+MvjH6NXghbvk1MXknpNNQ3uKjXSEN00Ig==
-
-"@actions/github@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@actions/github/-/github-4.0.0.tgz#d520483151a2bf5d2dc9cd0f20f9ac3a2e458816"
-  integrity sha512-Ej/Y2E+VV6sR9X7pWL5F3VgEWrABaT292DRqRU6R4hnQjPtC/zD3nagxVdXWiRQvYDh8kHXo7IDmG42eJ/dOMA==
-  dependencies:
-    "@actions/http-client" "^1.0.8"
-    "@octokit/core" "^3.0.0"
-    "@octokit/plugin-paginate-rest" "^2.2.3"
-    "@octokit/plugin-rest-endpoint-methods" "^4.0.0"
-
-"@actions/http-client@^1.0.8":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@actions/http-client/-/http-client-1.0.11.tgz#c58b12e9aa8b159ee39e7dd6cbd0e91d905633c0"
-  integrity sha512-VRYHGQV1rqnROJqdMvGUbY/Kn8vriQe/F9HR2AlYHzmKuM/p3kjNuXhmdBfcVgsvRWTz5C5XW5xvndZrVBuAYg==
-  dependencies:
-    tunnel "0.0.6"
-
 "@babel/code-frame@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -1110,16 +1088,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@chromaui/localtunnel@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chromaui/localtunnel/-/localtunnel-2.0.3.tgz#b43c8560d9cae8744c37f6ed51bc78ce04e0969a"
-  integrity sha512-/2Fg9QNjQXMgywPWvnNzUxIyjuxyiFHluvsXRjOaqRRn8RH+duYWIDuGMgNh5waNS2neYCWNSBJkRWxOl6LNkw==
-  dependencies:
-    axios "0.21.1"
-    debug "4.3.1"
-    openurl "1.1.1"
-    yargs "16.2.0"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1666,92 +1634,6 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@octokit/auth-token@^2.4.4":
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
-  integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-
-"@octokit/core@^3.0.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-3.4.0.tgz#b48aa27d755b339fe7550548b340dcc2b513b742"
-  integrity sha512-6/vlKPP8NF17cgYXqucdshWqmMZGXkuvtcrWCgU5NOI0Pl2GjlmZyWgBMrU8zJ3v2MJlM6++CiB45VKYmhiWWg==
-  dependencies:
-    "@octokit/auth-token" "^2.4.4"
-    "@octokit/graphql" "^4.5.8"
-    "@octokit/request" "^5.4.12"
-    "@octokit/request-error" "^2.0.5"
-    "@octokit/types" "^6.0.3"
-    before-after-hook "^2.2.0"
-    universal-user-agent "^6.0.0"
-
-"@octokit/endpoint@^6.0.1":
-  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.11.tgz#082adc2aebca6dcefa1fb383f5efb3ed081949d1"
-  integrity sha512-fUIPpx+pZyoLW4GCs3yMnlj2LfoXTWDUVPTC4V3MUEKZm48W+XYpeWSZCv+vYF1ZABUm2CqnDVf1sFtIYrj7KQ==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-    is-plain-object "^5.0.0"
-    universal-user-agent "^6.0.0"
-
-"@octokit/graphql@^4.5.8":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.6.1.tgz#f975486a46c94b7dbe58a0ca751935edc7e32cc9"
-  integrity sha512-2lYlvf4YTDgZCTXTW4+OX+9WTLFtEUc6hGm4qM1nlZjzxj+arizM4aHWzBVBCxY9glh7GIs0WEuiSgbVzv8cmA==
-  dependencies:
-    "@octokit/request" "^5.3.0"
-    "@octokit/types" "^6.0.3"
-    universal-user-agent "^6.0.0"
-
-"@octokit/openapi-types@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-6.2.1.tgz#5830395622ca0d8e945532c7ace722aec3670508"
-  integrity sha512-rSyuVb2zVwEbWpl1FJzVziyDfvEhNcvIsp6QxmEJkpiFuPfcZ4LwXz2/fhVdVC8Xy7BCugUQr7/ISdhYwgs3zQ==
-
-"@octokit/plugin-paginate-rest@^2.2.3":
-  version "2.13.3"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.13.3.tgz#f0f1792230805108762d87906fb02d573b9e070a"
-  integrity sha512-46lptzM9lTeSmIBt/sVP/FLSTPGx6DCzAdSX3PfeJ3mTf4h9sGC26WpaQzMEq/Z44cOcmx8VsOhO+uEgE3cjYg==
-  dependencies:
-    "@octokit/types" "^6.11.0"
-
-"@octokit/plugin-rest-endpoint-methods@^4.0.0":
-  version "4.15.1"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-4.15.1.tgz#91a064bee99d0ffcef74a04357e1cf15c27d1cd0"
-  integrity sha512-4gQg4ySoW7ktKB0Mf38fHzcSffVZd6mT5deJQtpqkuPuAqzlED5AJTeW8Uk7dPRn7KaOlWcXB0MedTFJU1j4qA==
-  dependencies:
-    "@octokit/types" "^6.13.0"
-    deprecation "^2.3.1"
-
-"@octokit/request-error@^2.0.0", "@octokit/request-error@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.0.5.tgz#72cc91edc870281ad583a42619256b380c600143"
-  integrity sha512-T/2wcCFyM7SkXzNoyVNWjyVlUwBvW3igM3Btr/eKYiPmucXTtkxt2RBsf6gn3LTzaLSLTQtNmvg+dGsOxQrjZg==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-    deprecation "^2.0.0"
-    once "^1.4.0"
-
-"@octokit/request@^5.3.0", "@octokit/request@^5.4.12":
-  version "5.4.15"
-  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.15.tgz#829da413dc7dd3aa5e2cdbb1c7d0ebe1f146a128"
-  integrity sha512-6UnZfZzLwNhdLRreOtTkT9n57ZwulCve8q3IT/Z477vThu6snfdkBuhxnChpOKNGxcQ71ow561Qoa6uqLdPtag==
-  dependencies:
-    "@octokit/endpoint" "^6.0.1"
-    "@octokit/request-error" "^2.0.0"
-    "@octokit/types" "^6.7.1"
-    is-plain-object "^5.0.0"
-    node-fetch "^2.6.1"
-    universal-user-agent "^6.0.0"
-
-"@octokit/types@^6.0.3", "@octokit/types@^6.11.0", "@octokit/types@^6.13.0", "@octokit/types@^6.7.1":
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.14.1.tgz#4579bbdabee9a8349ce302f29ebc6f81775f0f5c"
-  integrity sha512-RDzkeFPaT2TgZcNtB2s1HtaMmtOrvXsc5VsAdpzApNkTwNN7Jk76RRCzGYhjm+hQ/HHuQXZkxUDWhJlt2QAyKQ==
-  dependencies:
-    "@octokit/openapi-types" "^6.2.1"
-
 "@pmmmwh/react-refresh-webpack-plugin@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766"
@@ -2500,13 +2382,6 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@samverschueren/stream-to-observable@^0.3.0":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
-  integrity sha512-c/qwwcHyafOQuVQJj0IlBjf5yYgBI7YPJ77k4fOJYesb41jio65eaJODRUmfYKhTOFBrIZ66kgvGPlNbjuoRdQ==
-  dependencies:
-    any-observable "^0.3.0"
-
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -3547,11 +3422,6 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
   integrity sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==
 
-"@types/minimist@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256"
-  integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
-
 "@types/node-fetch@^2.5.7":
   version "2.5.10"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.10.tgz#9b4d4a0425562f9fcea70b12cb3fcdd946ca8132"
@@ -4153,11 +4023,6 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -4179,11 +4044,6 @@ ansi-to-html@^0.6.11:
   dependencies:
     entities "^1.1.2"
 
-any-observable@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
-  integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
-
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -4321,11 +4181,6 @@ array.prototype.map@^1.0.3:
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.5"
 
-arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-
 arrify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
@@ -4393,13 +4248,6 @@ async-each@^1.0.1:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
-async-retry@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/async-retry/-/async-retry-1.3.1.tgz#139f31f8ddce50c0870b0ba558a6079684aaed55"
-  integrity sha512-aiieFW/7h3hY0Bq5d+ktDBejxuwR78vRu9hDUdR8rNhSaQ29VzPL4AoIRG7D/c7tdenwOcKvgPM6tIxB3cB6HA==
-  dependencies:
-    retry "0.12.0"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -4448,13 +4296,6 @@ axe-core@^4.0.2, axe-core@^4.1.1:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.0.tgz#6594db4ee62f78be79e32a7295d21b099b60668d"
   integrity sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg==
 
-axios@0.21.1:
-  version "0.21.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
-  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
-  dependencies:
-    follow-redirects "^1.10.0"
-
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4722,11 +4563,6 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-before-after-hook@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.1.tgz#73540563558687586b52ed217dad6a802ab1549c"
-  integrity sha512-/6FKxSTWoJdbsLDF8tdIjaRiFXiE6UHsEHE3OPI/cwPURCVi1ukP0gmLn7XWEiFk5TcwQjjY5PWsU+j+tgXgmw==
-
 better-opn@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/better-opn/-/better-opn-2.1.1.tgz#94a55b4695dc79288f31d7d0e5f658320759f7c6"
@@ -5115,15 +4951,6 @@ camelcase-css@2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-camelcase-keys@^6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
-  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
-  dependencies:
-    camelcase "^5.3.1"
-    map-obj "^4.0.0"
-    quick-lru "^4.0.1"
-
 camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -5185,17 +5012,6 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^1.0.0, chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
 chalk@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@@ -5276,46 +5092,10 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chromatic@^5.2.0:
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-5.6.2.tgz#21ed613c498572b34cb7d27145b807699f1450f7"
-  integrity sha512-MJJcMugIjHXZ0Khm/xD3lQJ/clbIL6EGoX/TsVL7Q6WyVd+kvnD1YAABH0CwCSRlSAYj+JTjAIGFFodkBKAlIw==
-  dependencies:
-    "@actions/core" "^1.2.4"
-    "@actions/github" "^4.0.0"
-    "@babel/runtime" "^7.12.13"
-    "@chromaui/localtunnel" "^2.0.2"
-    async-retry "^1.3.1"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.3.1"
-    dotenv "^8.2.0"
-    env-ci "^5.0.2"
-    esm "^3.2.25"
-    execa "^5.0.0"
-    fake-tag "^2.0.0"
-    fs-extra "^9.1.0"
-    jsonfile "^6.0.1"
-    junit-report-builder "2.1.0"
-    listr "0.14.3"
-    meow "^9.0.0"
-    node-ask "^1.0.1"
-    node-fetch "^2.6.0"
-    node-loggly-bulk "^2.2.4"
-    p-limit "3.1.0"
-    picomatch "2.2.2"
-    pkg-up "^3.1.0"
-    pluralize "^8.0.0"
-    progress-stream "^2.0.0"
-    semver "^7.3.4"
-    slash "^3.0.0"
-    strip-ansi "6.0.0"
-    tmp-promise "3.0.2"
-    tree-kill "^1.2.2"
-    ts-dedent "^1.0.0"
-    util-deprecate "^1.0.2"
-    uuid "^8.3.2"
-    yarn-or-npm "^3.0.1"
+chromatic@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.5.1.tgz#9efd2d19b4a9596ba4ea66f622823f4533df05b3"
+  integrity sha512-TASnx9apJAokwpnTZvmLzd0+xDMkByEa4i89rrP27cqriI0aLqvGt/ckocGOk6UrVBn/e2pdwPeTLtkGMxCQHQ==
 
 chrome-trace-event@^1.0.2:
   version "1.0.3"
@@ -5372,7 +5152,7 @@ cli-boxes@^2.2.0:
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
   integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
 
-cli-cursor@^2.0.0, cli-cursor@^2.1.0:
+cli-cursor@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
   integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
@@ -5406,14 +5186,6 @@ cli-table3@0.6.0:
   optionalDependencies:
     colors "^1.1.2"
 
-cli-truncate@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
-  integrity sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=
-  dependencies:
-    slice-ansi "0.0.4"
-    string-width "^1.0.1"
-
 cli-width@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
@@ -5437,15 +5209,6 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -5816,7 +5579,7 @@ create-react-context@0.3.0:
     gud "^1.0.0"
     warning "^4.0.3"
 
-cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@7.0.3, cross-spawn@^7.0.0:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -6071,16 +5834,6 @@ data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-fns@^1.27.2:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
-  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
-
-date-format@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/date-format/-/date-format-0.0.2.tgz#fafd448f72115ef1e2b739155ae92f2be6c28dd1"
-  integrity sha1-+v1Ej3IRXvHitzkVWukvK+bCjdE=
-
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -6088,13 +5841,6 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4.3.1, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
-  dependencies:
-    ms "2.1.2"
-
 debug@^3.0.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -6102,15 +5848,14 @@ debug@^3.0.0:
   dependencies:
     ms "^2.1.1"
 
-decamelize-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
-  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
   dependencies:
-    decamelize "^1.1.0"
-    map-obj "^1.0.0"
+    ms "2.1.2"
 
-decamelize@^1.1.0, decamelize@^1.2.0:
+decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -6208,11 +5953,6 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-deprecation@^2.0.0, deprecation@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
-  integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
-
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -6420,7 +6160,7 @@ dotenv@^6.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
-dotenv@^8.0.0, dotenv@^8.2.0:
+dotenv@^8.0.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
@@ -6468,11 +6208,6 @@ electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.719:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.723.tgz#52769a75635342a4db29af5f1e40bd3dad02c877"
   integrity sha512-L+WXyXI7c7+G1V8ANzRsPI5giiimLAUDC6Zs1ojHHPhYXb3k/iTABFmWjivEtsWrRQymjnO66/rO2ZTABGdmWg==
 
-elegant-spinner@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
-  integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
-
 element-resize-detector@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.2.tgz#bf7c3ff915957e4e62e86241ed2f9c86b078892b"
@@ -6581,14 +6316,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-env-ci@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-5.0.2.tgz#48b6687f8af8cdf5e31b8fcf2987553d085249d9"
-  integrity sha512-Xc41mKvjouTXD3Oy9AqySz1IeyvJvHZ20Twf5ZLYbNpPPIuCnL/qHCmNlD01LoNy0JTunw9HPYVptD19Ac7Mbw==
-  dependencies:
-    execa "^4.0.0"
-    java-properties "^1.0.0"
-
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -6685,7 +6412,7 @@ escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -6905,11 +6632,6 @@ eslint@^6.1.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-esm@^3.2.25:
-  version "3.2.25"
-  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
-  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
-
 espree@^6.1.2:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
@@ -7015,7 +6737,7 @@ execa@^3.2.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-execa@^4.0.0, execa@^4.0.3:
+execa@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
   integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
@@ -7030,21 +6752,6 @@ execa@^4.0.0, execa@^4.0.3:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-execa@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-5.0.0.tgz#4029b0007998a841fbd1032e5f4de86a3c1e3376"
-  integrity sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.0"
-    human-signals "^2.1.0"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.1"
-    onetime "^5.1.2"
-    signal-exit "^3.0.3"
-    strip-final-newline "^2.0.0"
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -7164,11 +6871,6 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fake-tag@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fake-tag/-/fake-tag-2.0.0.tgz#08ea5df950ef8635833186247f569e8406ffb4da"
-  integrity sha512-QDz+8qiNQ9AfBZ31EXlID5JIbUkU3e1nXDWk4tidFzd2gy8XJaEUW1HCuDY6DUy6t2Y0nvhD6PsUc+2WYy5w0w==
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
@@ -7262,21 +6964,6 @@ figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
   integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
-figures@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
-  integrity sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=
-  dependencies:
-    escape-string-regexp "^1.0.5"
-    object-assign "^4.1.0"
-
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
 figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -7437,11 +7124,6 @@ focus-lock@^0.8.1:
   dependencies:
     tslib "^1.9.3"
 
-follow-redirects@^1.10.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.0.tgz#f5d260f95c5f8c105894491feee5dc8993b402fe"
-  integrity sha512-0vRwd7RKQBTt+mgu87mtYeofLFZpTas2S9zY+jIeuLJMNvudIgF52nr19q40HOwH5RrhWIPuj9puybzSJiRrVg==
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -7551,7 +7233,7 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^9.0.0, fs-extra@^9.0.1, fs-extra@^9.1.0:
+fs-extra@^9.0.0, fs-extra@^9.0.1:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
@@ -7650,7 +7332,7 @@ gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -7688,11 +7370,6 @@ get-stream@^5.0.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
-  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
-
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -7907,18 +7584,6 @@ har-validator@~5.1.3:
     ajv "^6.12.3"
     har-schema "^2.0.0"
 
-hard-rejection@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
-  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
-
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -8125,13 +7790,6 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hosted-git-info@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.0.2.tgz#5e425507eede4fea846b7262f0838456c4209961"
-  integrity sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==
-  dependencies:
-    lru-cache "^6.0.0"
-
 hsl-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
@@ -8250,11 +7908,6 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-human-signals@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
-  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
-
 humanize-duration@^3.15.3:
   version "3.25.2"
   resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.25.2.tgz#5259585b749ecc5ad5a60fb37121aee0e9ab0c5e"
@@ -8356,11 +8009,6 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
-indent-string@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
-  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
-
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -8793,18 +8441,6 @@ is-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
   integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
 
-is-observable@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e"
-  integrity sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==
-  dependencies:
-    symbol-observable "^1.1.0"
-
-is-plain-obj@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
-
 is-plain-obj@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
@@ -8822,16 +8458,6 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-plain-object@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
-  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
-
-is-promise@^2.1.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
-  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
-
 is-reference@^1.1.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
@@ -9025,11 +8651,6 @@ iterate-value@^1.0.2:
     es-get-iterator "^1.0.2"
     iterate-iterator "^1.0.1"
 
-java-properties@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-1.0.2.tgz#ccd1fa73907438a5b5c38982269d0e771fe78211"
-  integrity sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==
-
 jest-changed-files@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.5.0.tgz#141cc23567ceb3f534526f8614ba39421383634c"
@@ -9565,7 +9186,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stringify-safe@5.0.x, json-stringify-safe@~5.0.1:
+json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
@@ -9625,16 +9246,6 @@ jsprim@^1.2.2:
     array-includes "^3.1.2"
     object.assign "^4.1.2"
 
-junit-report-builder@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/junit-report-builder/-/junit-report-builder-2.1.0.tgz#7089dd8ae547657509b9a5eb7b5082bde22bcc7e"
-  integrity sha512-Ioj5I4w18ZcHFaaisqCKdh1z+ipzN7sA2JB+h+WOlGcOMWm0FFN1dfxkgc2I4EXfhSP/mOfM3W43uFzEdz4sTw==
-  dependencies:
-    date-format "0.0.2"
-    lodash "^4.17.15"
-    make-dir "^1.3.0"
-    xmlbuilder "^10.0.0"
-
 junk@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
@@ -9659,7 +9270,7 @@ kind-of@^5.0.0:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
+kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -9735,50 +9346,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-listr-silent-renderer@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
-  integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
-
-listr-update-renderer@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
-  integrity sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==
-  dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    elegant-spinner "^1.0.1"
-    figures "^1.7.0"
-    indent-string "^3.0.0"
-    log-symbols "^1.0.2"
-    log-update "^2.3.0"
-    strip-ansi "^3.0.1"
-
-listr-verbose-renderer@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
-  integrity sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==
-  dependencies:
-    chalk "^2.4.1"
-    cli-cursor "^2.1.0"
-    date-fns "^1.27.2"
-    figures "^2.0.0"
-
-listr@0.14.3:
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
-  integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==
-  dependencies:
-    "@samverschueren/stream-to-observable" "^0.3.0"
-    is-observable "^1.1.0"
-    is-promise "^2.1.0"
-    is-stream "^1.1.0"
-    listr-silent-renderer "^1.1.1"
-    listr-update-renderer "^0.5.0"
-    listr-verbose-renderer "^0.5.0"
-    p-map "^2.0.0"
-    rxjs "^6.3.3"
-
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
@@ -9877,13 +9444,6 @@ lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
-  integrity sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=
-  dependencies:
-    chalk "^1.0.0"
-
 log-symbols@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -9971,13 +9531,6 @@ make-cancellable-promise@^1.0.0:
   resolved "https://registry.yarnpkg.com/make-cancellable-promise/-/make-cancellable-promise-1.0.0.tgz#826214115b0827ca7a45ba204df7c31546243870"
   integrity sha512-+YO6Grg2uy/z8Mv3uV90OP6yAUHIF43YGgEFbejmBrK9VWFsVO6DvzFMcopXr9wCNg3/QIltIKiSCROC7zFB2g==
 
-make-dir@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
-  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
-  dependencies:
-    pify "^3.0.0"
-
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -10015,16 +9568,6 @@ map-cache@^0.2.2:
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
   integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
-map-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
-  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
-
-map-obj@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.2.1.tgz#e4ea399dbc979ae735c83c863dd31bdf364277b7"
-  integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
-
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
@@ -10161,24 +9704,6 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
-  integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==
-  dependencies:
-    "@types/minimist" "^1.2.0"
-    camelcase-keys "^6.2.2"
-    decamelize "^1.2.0"
-    decamelize-keys "^1.1.0"
-    hard-rejection "^2.1.0"
-    minimist-options "4.1.0"
-    normalize-package-data "^3.0.0"
-    read-pkg-up "^7.0.1"
-    redent "^3.0.0"
-    trim-newlines "^3.0.0"
-    type-fest "^0.18.0"
-    yargs-parser "^20.2.3"
-
 merge-class-names@^1.1.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/merge-class-names/-/merge-class-names-1.4.0.tgz#02edcdd5ff677fbb03b47ecd4586df89d697b81b"
@@ -10305,15 +9830,6 @@ minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist-options@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
-  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
-  dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-    kind-of "^6.0.3"
-
 minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -10391,11 +9907,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moment@^2.18.1:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -10510,11 +10021,6 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
-node-ask@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/node-ask/-/node-ask-1.0.1.tgz#caaa1076cc58e0364267a0903e3eadfac158396b"
-  integrity sha1-yqoQdsxY4DZCZ6CQPj6t+sFYOWs=
-
 node-dir@^0.1.10:
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
@@ -10535,7 +10041,7 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-fetch@^2.6.0, node-fetch@^2.6.1:
+node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -10574,15 +10080,6 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
-node-loggly-bulk@^2.2.4:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/node-loggly-bulk/-/node-loggly-bulk-2.2.5.tgz#6f41136f91b363d1b50612e8be0063859226967e"
-  integrity sha512-N6RjZfjqwhAYwT9nM8PFKXpWfaGFaDHnzwj2JBgsNq04xsEZNGMlI+rds90p5/TTkYAS8Ya6tbJChXFRqTSmiA==
-  dependencies:
-    json-stringify-safe "5.0.x"
-    moment "^2.18.1"
-    request ">=2.76.0 <3.0.0"
-
 node-modules-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
@@ -10614,16 +10111,6 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-package-data@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.2.tgz#cae5c410ae2434f9a6c1baa65d5bc3b9366c8699"
-  integrity sha512-6CdZocmfGaKnIHPVFhJJZ3GuR8SsLKvDANFp47Jmy51aKIr8akjAWTSxtpI+MBgBFdSMRyo4hMpDlT6dTffgZg==
-  dependencies:
-    hosted-git-info "^4.0.1"
-    resolve "^1.20.0"
-    semver "^7.3.4"
-    validate-npm-package-license "^3.0.1"
-
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -10653,7 +10140,7 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^4.0.0, npm-run-path@^4.0.1:
+npm-run-path@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
@@ -10818,7 +10305,7 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-onetime@^5.1.0, onetime@^5.1.2:
+onetime@^5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
   integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
@@ -10843,11 +10330,6 @@ opener@^1.5.2:
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
-openurl@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/openurl/-/openurl-1.1.1.tgz#3875b4b0ef7a52c156f0db41d4609dbb0f94b387"
-  integrity sha1-OHW0sO96UsFW8NtB1GCduw+Us4c=
-
 optimize-css-assets-webpack-plugin@^5.0.4:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz#85883c6528aaa02e30bbad9908c92926bb52dc90"
@@ -10948,13 +10430,6 @@ p-finally@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
   integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
 
-p-limit@3.1.0, p-limit@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
-  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
-  dependencies:
-    yocto-queue "^0.1.0"
-
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -10969,6 +10444,13 @@ p-limit@^2.0.0, p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -11238,11 +10720,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
-
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
@@ -11298,7 +10775,7 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
-pkg-up@3.1.0, pkg-up@^3.1.0:
+pkg-up@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
   integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
@@ -11312,11 +10789,6 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
-pluralize@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
-  integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
-
 pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
@@ -11807,14 +11279,6 @@ progress-estimator@^0.2.2:
     humanize-duration "^3.15.3"
     log-update "^2.3.0"
 
-progress-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/progress-stream/-/progress-stream-2.0.0.tgz#fac63a0b3d11deacbb0969abcc93b214bce19ed5"
-  integrity sha1-+sY6Cz0R3qy7CWmrzJOyFLzhntU=
-  dependencies:
-    speedometer "~1.0.0"
-    through2 "~2.0.3"
-
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -11997,11 +11461,6 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-quick-lru@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
-  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
-
 ramda@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
@@ -12442,14 +11901,6 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
-redent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
-  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
-  dependencies:
-    indent-string "^4.0.0"
-    strip-indent "^3.0.0"
-
 refractor@^2.4.1:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
@@ -12657,7 +12108,7 @@ request-promise-native@^1.0.7:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-"request@>=2.76.0 <3.0.0", request@^2.88.0:
+request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -12737,7 +12188,7 @@ resolve@1.17.0:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.3.2:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -12774,11 +12225,6 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
-retry@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
-  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
-
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -12893,7 +12339,7 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@^6.3.3, rxjs@^6.6.0:
+rxjs@^6.6.0:
   version "6.6.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
   integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
@@ -13207,7 +12653,7 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
+signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
@@ -13277,11 +12723,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slice-ansi@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
-  integrity sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=
-
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
@@ -13409,11 +12850,6 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz#e9c18a410e5ed7e12442a549fbd8afa767038d65"
   integrity sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==
 
-speedometer@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/speedometer/-/speedometer-1.0.0.tgz#cd671cb06752c22bca3370e2f334440be4fc62e2"
-  integrity sha1-zWccsGdSwivKM3Di8zREC+T8YuI=
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -13740,11 +13176,6 @@ stylis@^4.0.3:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
   integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -13793,11 +13224,6 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -13944,7 +13370,7 @@ throttle-debounce@^3.0.1:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
   integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
 
-through2@^2.0.0, through2@~2.0.3:
+through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -13982,13 +13408,6 @@ tiny-glob@^0.2.6:
     globalyzer "0.1.0"
     globrex "^0.1.2"
 
-tmp-promise@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/tmp-promise/-/tmp-promise-3.0.2.tgz#6e933782abff8b00c3119d63589ca1fb9caaa62a"
-  integrity sha512-OyCLAKU1HzBjL6Ev3gxUeraJNlbNingmi8IrHHEsYH8LTmEuhvYfqvhn2F/je+mjf4N58UmZ96OMEy1JanSCpA==
-  dependencies:
-    tmp "^0.2.0"
-
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -13996,13 +13415,6 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
-tmp@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
-
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -14089,16 +13501,6 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-tree-kill@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
-  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
-
-trim-newlines@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
-  integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
-
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
@@ -14114,7 +13516,7 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-ts-dedent@^1.0.0, ts-dedent@^1.1.0:
+ts-dedent@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.2.0.tgz#6aa2229d837159bb6d635b6b233002423b91e0b0"
   integrity sha512-6zSJp23uQI+Txyz5LlXMXAHpUhY4Hi0oluXny0OgIR7g/Cromq4vDBnhtbBdyIV34g0pgwxUvnvg+jLJe4c1NA==
@@ -14261,11 +13663,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tunnel@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/tunnel/-/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
-  integrity sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -14283,11 +13680,6 @@ type-detect@4.0.8:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
-type-fest@^0.18.0:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
-  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
-
 type-fest@^0.21.3:
   version "0.21.3"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
@@ -14493,11 +13885,6 @@ unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
-universal-user-agent@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
-  integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
-
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
@@ -14654,11 +14041,6 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -15005,15 +14387,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -15046,11 +14419,6 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xmlbuilder@^10.0.0:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-10.1.1.tgz#8cae6688cc9b38d850b7c8d3c0a4161dcaf475b0"
-  integrity sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==
-
 xmlchars@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
@@ -15066,11 +14434,6 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
   integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
 
-y18n@^5.0.5:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
-  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
-
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
@@ -15094,24 +14457,6 @@ yargs-parser@18.x, yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2, yargs-parser@^20.2.3:
-  version "20.2.7"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
-  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
-
-yargs@16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
 yargs@^15.3.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
@@ -15129,14 +14474,6 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yarn-or-npm@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/yarn-or-npm/-/yarn-or-npm-3.0.1.tgz#6336eea4dff7e23e226acc98c1a8ada17a1b8666"
-  integrity sha512-fTiQP6WbDAh5QZAVdbMQkecZoahnbOjClTQhzv74WX5h2Uaidj1isf9FDes11TKtsZ0/ZVfZsqZ+O3x6aLERHQ==
-  dependencies:
-    cross-spawn "^6.0.5"
-    pkg-dir "^4.2.0"
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From 67333194b74a92c825142dcdb9aa0f04363bea19 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Wed, 23 Feb 2022 18:47:09 -0700
Subject: [PATCH 09/28] Add form

---
 src/Form.tsx                    |  74 --------------------
 src/field/Field.tsx             |   2 +
 src/form/Form.tsx               | 119 ++++++++++++++++++++++++++++++++
 src/form/index.tsx              |   1 +
 src/index.tsx                   |   1 +
 src/textfield/TextFieldBase.tsx |  13 +++-
 stories/Form.stories.tsx        |  51 ++++++++++----
 stories/TextField.stories.tsx   |  18 +++--
 8 files changed, 184 insertions(+), 95 deletions(-)
 delete mode 100644 src/Form.tsx
 create mode 100644 src/form/Form.tsx
 create mode 100644 src/form/index.tsx

diff --git a/src/Form.tsx b/src/Form.tsx
deleted file mode 100644
index a2635bdd..00000000
--- a/src/Form.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { ReactNode } from 'react';
-import { css } from '@emotion/core';
-import theme from './theme';
-
-export type FormProps = {
-  children: ReactNode;
-  className?: string;
-};
-
-function Form({ children, className }: FormProps) {
-  return (
-    <div role="form" className={className}>
-      {children}
-    </div>
-  );
-}
-
-export const RequiredFieldsDisclosure = () => (
-  <div
-    data-testid="required-fields-disclosure"
-    css={css`
-      color: #bbbdbf;
-      font-size: ${theme.typography.sizes.medium};
-      text-align: right;
-    `}
-  >
-    * Required fields
-  </div>
-);
-
-const formLabelText = css`
-  margin-bottom: 4px;
-  margin-top: 8px;
-  font-size: ${theme.typography.sizes.medium};
-  color: ${theme.colors.text1};
-`;
-
-const formLabelHelper = css`
-  padding-left: 4px;
-  color: #bbbdbf;
-  font-size: ${theme.typography.sizes.medium};
-`;
-
-const formLabelContents = css`
-  margin-bottom: 8px;
-`;
-
-export const FormLabel = ({
-  children,
-  text,
-  required = false,
-  helperText,
-}: {
-  children: ReactNode;
-  text: ReactNode;
-  required?: boolean;
-  helperText?: string; // Text the describe the field or display limits
-}) => {
-  return (
-    <label>
-      <div css={formLabelText}>
-        {text}
-        {required ? <span css={formLabelHelper}>*</span> : null}
-        {helperText ? <span css={formLabelHelper}>{helperText}</span> : null}
-      </div>
-      {children ? <div css={formLabelContents}>{children}</div> : null}
-    </label>
-  );
-};
-
-Form.RequiredFieldsDisclosure = RequiredFieldsDisclosure;
-Form.FormLabel = FormLabel;
-
-export default Form;
diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index b6444dc1..f0bdf23e 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -11,6 +11,7 @@ import React, {
   ReactNode,
   ReactElement,
 } from 'react';
+import { useFormProps } from '../form';
 
 export interface FieldProps
   extends FieldLabelProps,
@@ -23,6 +24,7 @@ export interface FieldProps
 }
 
 function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
+  props = useFormProps(props);
   let {
     label,
     labelExtra,
diff --git a/src/form/Form.tsx b/src/form/Form.tsx
new file mode 100644
index 00000000..f3c9a1fe
--- /dev/null
+++ b/src/form/Form.tsx
@@ -0,0 +1,119 @@
+import {
+  Alignment,
+  DOMRef,
+  LabelPosition,
+  LabelableProps,
+  DOMProps,
+  AriaLabelingProps,
+  ValidationState,
+} from '../types';
+import { classNames, useDOMRef } from '../utils';
+import { filterDOMProps } from '@react-aria/utils';
+import React, { useContext, ReactElement, FormEventHandler } from 'react';
+import { css } from '@emotion/core';
+import theme from '../theme';
+
+let FormContext = React.createContext<LabelableProps>({});
+
+export function useFormProps<T extends LabelableProps>(props: T): T {
+  let ctx = useContext(FormContext);
+  return { ...ctx, ...props };
+}
+
+const formPropNames = new Set([
+  'action',
+  'autoComplete',
+  'encType',
+  'method',
+  'target',
+  'onSubmit',
+]);
+
+export interface FormProps extends DOMProps, AriaLabelingProps, LabelableProps {
+  /** The contents of the Form. */
+  children: ReactElement<LabelableProps> | ReactElement<LabelableProps>[];
+
+  /** Whether the Form elements are disabled. */
+  isDisabled?: boolean;
+  /** Whether user input is required on each of the Form elements before Form submission. */
+  isRequired?: boolean;
+  /** Whether the Form elements can be selected but not changed by the user. */
+  isReadOnly?: boolean;
+  /**
+   * Whether the Form elements should display their "valid" or "invalid" visual styling.
+   * @default 'valid'
+   */
+  validationState?: ValidationState;
+  /**
+   * Where to send the form-data when the form is submitted.
+   */
+  action?: string;
+  /**
+   * The enctype attribute specifies how the form-data should be encoded when submitting it to the server.
+   */
+  encType?:
+    | 'application/x-www-form-urlencoded'
+    | 'multipart/form-data'
+    | 'text/plain';
+  /**
+   * The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
+   */
+  method?: 'get' | 'post';
+  /**
+   * The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  /**
+   * Fired on form submission.
+   */
+  onSubmit?: FormEventHandler;
+}
+
+function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
+  let {
+    children,
+    labelPosition = 'top' as LabelPosition,
+    labelAlign = 'start' as Alignment,
+    isRequired,
+    necessityIndicator,
+    isDisabled,
+    isReadOnly,
+    validationState,
+    ...otherProps
+  } = props;
+  let domRef = useDOMRef(ref);
+
+  let ctx = {
+    labelPosition,
+    labelAlign,
+    necessityIndicator,
+  };
+
+  return (
+    <form
+      {...filterDOMProps(otherProps, {
+        labelable: true,
+        propNames: formPropNames,
+      })}
+      noValidate
+      ref={domRef}
+      className={classNames('ac-form', {
+        'ac-form--positionSide': labelPosition === 'side',
+        'ac-form--positionTop': labelPosition === 'top',
+      })}
+      css={css`
+        & > *:not(:last-child):not(.ac-field--hasHelpText) {
+          margin-bottom: ${theme.spacing.margin24}px;
+        }
+      `}
+    >
+      <FormContext.Provider value={ctx}>{children}</FormContext.Provider>
+    </form>
+  );
+}
+
+/**
+ * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
+ */
+const _Form = React.forwardRef(Form);
+export { _Form as Form };
diff --git a/src/form/index.tsx b/src/form/index.tsx
new file mode 100644
index 00000000..b690c60a
--- /dev/null
+++ b/src/form/index.tsx
@@ -0,0 +1 @@
+export * from './Form';
diff --git a/src/index.tsx b/src/index.tsx
index 8d28263e..3e7e2b2a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -16,6 +16,7 @@ export * from './listbox';
 export * from './picker';
 export * from './notification';
 export * from './textfield';
+export * from './form';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
 //   /** custom content, defaults to 'the snozzberries taste like snozzberries' */
 //   children?: ReactChild;
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index d8f09b38..d6efe039 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -112,6 +112,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
     label,
     validationState,
     isDisabled,
+    isReadOnly,
     multiLine,
     autoFocus,
     inputClassName,
@@ -164,6 +165,8 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         'ac-textfield--multiline': multiLine,
         'is-hovered': isHovered,
         'is-focused': isFocused,
+        'is-disabled': isDisabled,
+        'is-readonly': isReadOnly,
       })}
       css={css`
         display: flex;
@@ -175,7 +178,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         background-color: ${theme.components.textField.backgroundColor};
         transition: all 0.2s ease-in-out;
         overflow: hidden;
-        &.is-hovered {
+        &.is-hovered[:not(.is-disabled)] {
           border: 1px solid ${theme.components.textField.hoverBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
         }
@@ -183,6 +186,14 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
           border: 1px solid ${theme.components.textField.activeBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
         }
+        &.is-disabled,
+        &.is-readonly {
+          border: 1px solid ${theme.components.textField.backgroundColor};
+          background-color: ${theme.components.textField.backgroundColor};
+          .ac-textfield__input {
+            color: ${theme.textColors.white70};
+          }
+        }
         .ac-textfield__input::placeholder {
           color: ${theme.textColors.white50};
           font-style: italic;
diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx
index 9bf7319a..ad5a3576 100644
--- a/stories/Form.stories.tsx
+++ b/stories/Form.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import Form, { FormProps } from '../src/Form';
+import { Form, FormProps, TextField } from '../src';
+import InfoTip from './components/InfoTip';
 
 const meta: Meta = {
   title: 'Form',
@@ -19,20 +20,40 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<FormProps> = args => (
-  <Form {...args}>
-    <Form.RequiredFieldsDisclosure />
-    <Form.FormLabel text="Label Text" required>
-      <input type="text" />
-    </Form.FormLabel>
-    <Form.FormLabel text="Label Text" helperText="Limit 10">
-      <input type="text" />
-    </Form.FormLabel>
-    <Form.FormLabel text="Label Text" required helperText="Limit 10">
-      <input type="text" />
-    </Form.FormLabel>
-  </Form>
-);
+const Template: Story<FormProps> = args => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  return (
+    <Form {...args}>
+      <TextField
+        label="Name"
+        placeholder="enter your name"
+        isRequired
+        errorMessage={!name ? 'This field is required' : null}
+        value={name}
+        validationState={!name ? 'invalid' : null}
+        onChange={v => setName(v)}
+      />
+      <TextField
+        label="Email"
+        placeholder="enter your email address"
+        isRequired
+        errorMessage={!email ? 'This field is required' : null}
+        value={email}
+        onChange={v => setEmail(v)}
+      />
+      <TextField
+        label="Charge"
+        labelExtra={<InfoTip>The amount you will be charged</InfoTip>}
+        placeholder="enter your amount"
+        isRequired
+        validationState={'invalid'}
+        addonBefore="$"
+        errorMessage="This field is required"
+      />
+    </Form>
+  );
+};
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
diff --git a/stories/TextField.stories.tsx b/stories/TextField.stories.tsx
index a287feda..f2a5b71c 100644
--- a/stories/TextField.stories.tsx
+++ b/stories/TextField.stories.tsx
@@ -10,11 +10,11 @@ const meta: Meta = {
   decorators: [withDesign],
   parameters: {
     controls: { expanded: true },
-    // design: {
-    //   type: 'figma',
-    //   url:
-    //     'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=76%3A505',
-    // },
+    design: {
+      type: 'figma',
+      url:
+        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=76%3A505',
+    },
   },
 };
 
@@ -54,6 +54,14 @@ export const Gallery = () => (
       addonBefore="$"
       errorMessage="This field is required"
     />
+    <TextField
+      label="Charge"
+      labelExtra={<InfoTip>The amount you will be charged</InfoTip>}
+      placeholder="enter your amount"
+      isDisabled
+      addonBefore="$"
+      value="100"
+    />
   </div>
 );
 

From a1c7ad37f87cd3c54026b88d4f5a6cc6e4f3af25 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Wed, 23 Feb 2022 19:39:03 -0700
Subject: [PATCH 10/28] form hooks example

---
 package.json             |  1 +
 stories/Form.stories.tsx | 75 ++++++++++++++++++++++++++--------------
 yarn.lock                |  5 +++
 3 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 59b11206..36536680 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "polished": "^4.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^7.27.1",
     "react-is": "^17.0.1",
     "size-limit": "^4.6.2",
     "storybook-addon-designs": "^5.4.5",
diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx
index ad5a3576..435281ac 100644
--- a/stories/Form.stories.tsx
+++ b/stories/Form.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Form, FormProps, TextField } from '../src';
 import InfoTip from './components/InfoTip';
+import { useForm, Controller } from 'react-hook-form';
 
 const meta: Meta = {
   title: 'Form',
@@ -21,36 +22,58 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<FormProps> = args => {
-  const [name, setName] = React.useState('');
-  const [email, setEmail] = React.useState('');
+  const { control, handleSubmit } = useForm();
+  const onSubmit = (d: any) => {
+    alert(JSON.stringify(d));
+  };
   return (
-    <Form {...args}>
-      <TextField
-        label="Name"
-        placeholder="enter your name"
-        isRequired
-        errorMessage={!name ? 'This field is required' : null}
-        value={name}
-        validationState={!name ? 'invalid' : null}
-        onChange={v => setName(v)}
+    // @ts-ignore
+    <Form {...args} action="" onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name={'name'}
+        control={control}
+        rules={{ required: 'This field is required' }}
+        render={({
+          field: { onChange, value },
+          fieldState: { invalid, error },
+        }) => (
+          <TextField
+            onChange={onChange}
+            value={value}
+            validationState={invalid ? 'invalid' : undefined}
+            label={'Name'}
+            placeholder={'enter your name'}
+            errorMessage={error?.message}
+          />
+        )}
       />
-      <TextField
-        label="Email"
-        placeholder="enter your email address"
-        isRequired
-        errorMessage={!email ? 'This field is required' : null}
-        value={email}
-        onChange={v => setEmail(v)}
+      <Controller
+        name={'email'}
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <TextField onChange={onChange} value={value} label={'Email'} />
+        )}
       />
-      <TextField
-        label="Charge"
-        labelExtra={<InfoTip>The amount you will be charged</InfoTip>}
-        placeholder="enter your amount"
-        isRequired
-        validationState={'invalid'}
-        addonBefore="$"
-        errorMessage="This field is required"
+      <Controller
+        name={'Occupation'}
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <TextField onChange={onChange} value={value} label={'Occupation'} />
+        )}
       />
+      <Controller
+        name={'chargeAmount'}
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <TextField
+            addonBefore="$"
+            onChange={onChange}
+            value={value}
+            label={'Charge Amount'}
+          />
+        )}
+      />
+      <input type="submit" />
     </Form>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index a7c2d0af..220ed04d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11653,6 +11653,11 @@ react-helmet-async@^1.0.2, react-helmet-async@^1.0.7:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-hook-form@^7.27.1:
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.27.1.tgz#fe5fbcb6bf58751f66d9569e998d671480cc57f6"
+  integrity sha512-N3a7A6zIQ8DJeThisVZGtOUabTbJw+7DHJidmB9w8m3chckv2ZWKb5MHps9d2pPJqmCDoWe53Bos56bYmJms5w==
+
 react-inspector@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"

From 718cd12d66e3b1beab9d456763110450877da400 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 19:25:19 -0700
Subject: [PATCH 11/28] Add form and provider context

---
 src/field/Field.tsx             | 13 +++++++++++--
 src/field/HelpText.tsx          |  2 +-
 src/form/Form.tsx               | 20 ++++++++------------
 src/index.tsx                   |  2 +-
 src/textfield/TextField.tsx     |  4 ++++
 src/textfield/TextFieldBase.tsx | 30 ++++++++++++++++++------------
 src/types/index.ts              |  1 +
 stories/Form.stories.tsx        |  3 ++-
 stories/TextField.stories.tsx   | 26 ++++++++++++++++++++------
 9 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index f0bdf23e..e8ddd02f 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css, keyframes } from '@emotion/core';
 import { classNames } from '../utils';
 import { HelpText, HelpTextComponentProps } from './HelpText';
 import { FieldLabel, FieldLabelProps } from './FieldLabel';
@@ -13,6 +13,11 @@ import React, {
 } from 'react';
 import { useFormProps } from '../form';
 
+const appearKeyframes = keyframes`
+    0% {  opacity: 0; }
+    100% { opacity: 1; }
+`;
+
 export interface FieldProps
   extends FieldLabelProps,
     HelpTextComponentProps,
@@ -64,7 +69,7 @@ function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
       children,
       // @ts-ignore
       mergeProps(children.props, {
-        className: 'ac-field',
+        className: 'ac-field__field',
       })
     );
 
@@ -90,6 +95,10 @@ function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
+          .ac-help-text--danger {
+            /* Animate in the help text */
+            animation: ${appearKeyframes} ${0.3}s forwards ease-in-out;
+          }
         `}
       >
         {label && (
diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx
index 031adcd6..a34f1054 100644
--- a/src/field/HelpText.tsx
+++ b/src/field/HelpText.tsx
@@ -39,7 +39,7 @@ function HelpText(props: HelpTextComponentProps, ref: DOMRef<HTMLDivElement>) {
       ref={domRef}
       css={css`
         height: 16px;
-        padding: ${theme.spacing.padding4}px 0;
+        padding: ${theme.spacing.padding4}px 0 0;
         &.ac-help-text--danger {
           color: ${theme.colors.statusDanger};
         }
diff --git a/src/form/Form.tsx b/src/form/Form.tsx
index f3c9a1fe..df5b7100 100644
--- a/src/form/Form.tsx
+++ b/src/form/Form.tsx
@@ -11,7 +11,7 @@ import { classNames, useDOMRef } from '../utils';
 import { filterDOMProps } from '@react-aria/utils';
 import React, { useContext, ReactElement, FormEventHandler } from 'react';
 import { css } from '@emotion/core';
-import theme from '../theme';
+import { Provider } from '../provider';
 
 let FormContext = React.createContext<LabelableProps>({});
 
@@ -35,15 +35,8 @@ export interface FormProps extends DOMProps, AriaLabelingProps, LabelableProps {
 
   /** Whether the Form elements are disabled. */
   isDisabled?: boolean;
-  /** Whether user input is required on each of the Form elements before Form submission. */
-  isRequired?: boolean;
   /** Whether the Form elements can be selected but not changed by the user. */
   isReadOnly?: boolean;
-  /**
-   * Whether the Form elements should display their "valid" or "invalid" visual styling.
-   * @default 'valid'
-   */
-  validationState?: ValidationState;
   /**
    * Where to send the form-data when the form is submitted.
    */
@@ -78,7 +71,6 @@ function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
     necessityIndicator,
     isDisabled,
     isReadOnly,
-    validationState,
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
@@ -102,12 +94,16 @@ function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
         'ac-form--positionTop': labelPosition === 'top',
       })}
       css={css`
-        & > *:not(:last-child):not(.ac-field--hasHelpText) {
-          margin-bottom: ${theme.spacing.margin24}px;
+        .ac-field:not(:last-child):not(.ac-field--hasHelpText) {
+          margin-bottom: 20px;
         }
       `}
     >
-      <FormContext.Provider value={ctx}>{children}</FormContext.Provider>
+      <FormContext.Provider value={ctx}>
+        <Provider isDisabled={isDisabled} isReadOnly={isReadOnly}>
+          {children}
+        </Provider>
+      </FormContext.Provider>
     </form>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
index 3e7e2b2a..d3c089f5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-export { OverlayProvider as Provider } from '@react-aria/overlays';
+export * from './provider';
 export * from './popover';
 export * from './content';
 export * from './button';
diff --git a/src/textfield/TextField.tsx b/src/textfield/TextField.tsx
index 17a0ee7a..4a22f884 100644
--- a/src/textfield/TextField.tsx
+++ b/src/textfield/TextField.tsx
@@ -6,9 +6,13 @@ import {
 } from './TextFieldBase';
 import { useTextField } from '@react-aria/textfield';
 import { AddonableProps } from '../types';
+import { useProviderProps } from '../provider';
 
 export interface TextFieldProps extends AriaTextFieldProps, AddonableProps {}
 function TextField(props: TextFieldProps, ref: RefObject<TextFieldRef>) {
+  // Call use provider props so the textfield can inherit from the provider
+  // E.x. disabled, readOnly, etc.
+  props = useProviderProps(props);
   let inputRef = useRef<HTMLInputElement>();
   let {
     labelProps,
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index d6efe039..f76ecc97 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -1,6 +1,4 @@
-// import AlertMedium from '@spectrum-icons/ui/AlertMedium';
-// import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
-import { css } from '@emotion/core';
+import { css, keyframes } from '@emotion/core';
 import { classNames, createFocusableRef } from '../utils';
 import { Field } from '../field';
 import { FocusRing } from '@react-aria/focus';
@@ -39,6 +37,11 @@ import { AddonBefore } from '../field';
 import { useHover } from '@react-aria/interactions';
 import theme from '../theme';
 
+const appearKeyframes = keyframes`
+    0% {  opacity: 0; }
+    100% { opacity: 1; }
+`;
+
 export interface TextFieldProps
   extends InputBase,
     Validation,
@@ -149,9 +152,9 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
   let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';
   let isInvalid = validationState === 'invalid';
 
-  let validation = (
+  const validation = (
     <Icon
-      className="ac-textfield__validation-icon"
+      className={`ac-textfield__validation-icon ac-textfield__validation-icon--${validationState}`}
       svg={<AlertCircleOutline />}
     />
   );
@@ -172,7 +175,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         display: flex;
         flex-direction: row;
         align-items: center;
-        min-width: 250px;
+        min-width: 270px;
         border: 1px solid ${theme.colors.lightGrayBorder};
         border-radius: ${theme.borderRadius.medium}px;
         background-color: ${theme.components.textField.backgroundColor};
@@ -186,16 +189,15 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
           border: 1px solid ${theme.components.textField.activeBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
         }
-        &.is-disabled,
-        &.is-readonly {
+        &.is-disabled {
           border: 1px solid ${theme.components.textField.backgroundColor};
           background-color: ${theme.components.textField.backgroundColor};
           .ac-textfield__input {
-            color: ${theme.textColors.white70};
+            color: ${theme.textColors.white50};
           }
         }
         .ac-textfield__input::placeholder {
-          color: ${theme.textColors.white50};
+          color: ${theme.textColors.white30};
           font-style: italic;
         }
         .ac-textfield__input {
@@ -216,9 +218,13 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
           border: 1px solid ${theme.colors.statusDanger};
         }
         .ac-textfield__validation-icon {
-          color: inherit;
+          /* Animate in the icon */
+          animation: ${appearKeyframes} ${0.2}s forwards ease-in-out;
           flex: none;
           margin-right: ${theme.spacing.padding8}px;
+          &.ac-textfield__validation-icon--invalid {
+            color: ${theme.colors.statusDanger};
+          }
         }
       `}
     >
@@ -251,7 +257,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
       textField,
       mergeProps(textField.props, {
         // TODO support muli-line text areas
-        className: multiLine ? 'ac-field--multiline' : '',
+        className: multiLine ? 'ac-text-field--multiline' : '',
       })
     );
   }
diff --git a/src/types/index.ts b/src/types/index.ts
index 6558b3c3..b19b8a95 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,3 +8,4 @@ export * from './severity';
 export * from './input';
 export * from './events';
 export * from './dom';
+export * from './provider';
diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx
index 435281ac..ceea2182 100644
--- a/stories/Form.stories.tsx
+++ b/stories/Form.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Form, FormProps, TextField } from '../src';
-import InfoTip from './components/InfoTip';
 import { useForm, Controller } from 'react-hook-form';
 
 const meta: Meta = {
@@ -82,4 +81,6 @@ const Template: Story<FormProps> = args => {
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 
+export const Disabled = Template.bind({ isDisabled: true });
+
 Default.args = { type: 'primary', children: 'Button' };
diff --git a/stories/TextField.stories.tsx b/stories/TextField.stories.tsx
index f2a5b71c..18db20e5 100644
--- a/stories/TextField.stories.tsx
+++ b/stories/TextField.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
-import { TextField, TextFieldProps } from '../src';
+import { Form, TextField, TextFieldProps } from '../src';
 import InfoTip from './components/InfoTip';
 
 const meta: Meta = {
@@ -24,7 +24,7 @@ export default meta;
  * A gallery of all the variants
  */
 export const Gallery = () => (
-  <div>
+  <Form>
     <TextField label="Name" placeholder="enter your name" />
     <TextField
       label="Name"
@@ -47,7 +47,9 @@ export const Gallery = () => (
     />
     <TextField
       label="Charge"
-      labelExtra={<InfoTip>The amount you will be charged</InfoTip>}
+      labelExtra={
+        <InfoTip postfix={false}>The amount you will be charged</InfoTip>
+      }
       placeholder="enter your amount"
       isRequired
       validationState={'invalid'}
@@ -55,14 +57,26 @@ export const Gallery = () => (
       errorMessage="This field is required"
     />
     <TextField
-      label="Charge"
-      labelExtra={<InfoTip>The amount you will be charged</InfoTip>}
+      label="Disabled"
+      labelExtra={
+        <InfoTip postfix={false}>The amount you will be charged</InfoTip>
+      }
       placeholder="enter your amount"
       isDisabled
       addonBefore="$"
       value="100"
     />
-  </div>
+    <TextField
+      label="Read Only"
+      labelExtra={
+        <InfoTip postfix={false}>The amount you will be charged</InfoTip>
+      }
+      placeholder="enter your amount"
+      isReadOnly
+      addonBefore="$"
+      value="100"
+    />
+  </Form>
 );
 
 const Template: Story<TextFieldProps> = args => (

From be22fba7bf365df247fbdda3d1356b5c8fb418dd Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 19:25:51 -0700
Subject: [PATCH 12/28] Add form and provider context

---
 src/form/Form.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/form/Form.tsx b/src/form/Form.tsx
index df5b7100..f9e79344 100644
--- a/src/form/Form.tsx
+++ b/src/form/Form.tsx
@@ -5,7 +5,6 @@ import {
   LabelableProps,
   DOMProps,
   AriaLabelingProps,
-  ValidationState,
 } from '../types';
 import { classNames, useDOMRef } from '../utils';
 import { filterDOMProps } from '@react-aria/utils';

From e0ef768e4a7173f2de79d9c26b79fdaf01dfd8f1 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 19:27:06 -0700
Subject: [PATCH 13/28] Add form and provider context

---
 src/provider/Provider.tsx | 37 +++++++++++++++++++++++++++++++++++++
 src/provider/index.tsx    |  1 +
 src/types/provider.ts     | 15 +++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 src/provider/Provider.tsx
 create mode 100644 src/provider/index.tsx
 create mode 100644 src/types/provider.ts

diff --git a/src/provider/Provider.tsx b/src/provider/Provider.tsx
new file mode 100644
index 00000000..62f75eca
--- /dev/null
+++ b/src/provider/Provider.tsx
@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { OverlayProvider } from '@react-aria/overlays';
+import { ProviderProps, ProviderContext } from '../types';
+
+const Context = React.createContext<ProviderContext | null>(null);
+
+export function Provider(props: ProviderProps) {
+  const { children, ...context } = props;
+  return (
+    <Context.Provider value={context}>
+      <OverlayProvider>{children}</OverlayProvider>
+    </Context.Provider>
+  );
+}
+
+export function useProvider(): ProviderContext {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error('useProvider must be used within a Provider');
+  }
+  return context;
+}
+
+export function useProviderProps<T>(props: T): T {
+  let context = useProvider();
+  if (!context) {
+    return props;
+  }
+  return Object.assign(
+    {},
+    {
+      isDisabled: context.isDisabled,
+      isReadOnly: context.isReadOnly,
+    },
+    props
+  );
+}
diff --git a/src/provider/index.tsx b/src/provider/index.tsx
new file mode 100644
index 00000000..50509410
--- /dev/null
+++ b/src/provider/index.tsx
@@ -0,0 +1 @@
+export * from './Provider';
diff --git a/src/types/provider.ts b/src/types/provider.ts
new file mode 100644
index 00000000..315512a1
--- /dev/null
+++ b/src/types/provider.ts
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+interface ContextProps {
+  /** Whether descendants should be disabled. */
+  isDisabled?: boolean;
+  /** Whether descendants should be read only. */
+  isReadOnly?: boolean;
+}
+
+export interface ProviderProps extends ContextProps {
+  /** The content of the Provider. */
+  children: ReactNode;
+}
+
+export interface ProviderContext extends ContextProps {}

From 8c77a9331078ee67aba135c582fa7c05b93c9eff Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 19:38:10 -0700
Subject: [PATCH 14/28] fix story

---
 stories/TextField.stories.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/stories/TextField.stories.tsx b/stories/TextField.stories.tsx
index 18db20e5..b79c30fe 100644
--- a/stories/TextField.stories.tsx
+++ b/stories/TextField.stories.tsx
@@ -80,7 +80,9 @@ export const Gallery = () => (
 );
 
 const Template: Story<TextFieldProps> = args => (
-  <TextField {...args}>Label Text</TextField>
+  <Form>
+    <TextField {...args}>Label Text</TextField>
+  </Form>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

From bdefd171c640c7f13604b8dc1775de60fbe382c0 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 19:44:52 -0700
Subject: [PATCH 15/28] fix story

---
 stories/Form.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx
index ceea2182..6b2ab4db 100644
--- a/stories/Form.stories.tsx
+++ b/stories/Form.stories.tsx
@@ -81,6 +81,6 @@ const Template: Story<FormProps> = args => {
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 
-export const Disabled = Template.bind({ isDisabled: true });
+export const Disabled = Template.bind({}, { isDisabled: true });
 
 Default.args = { type: 'primary', children: 'Button' };

From 700e3fe995692b2e5ee8e42b466e79596928c52a Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 19:47:09 -0700
Subject: [PATCH 16/28] v0.4.0-0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 36536680..b2ede3ae 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.4",
+  "version": "0.4.0-0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From 51ab832253e4e24290fa0899099f052789ec2579 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 22:10:06 -0700
Subject: [PATCH 17/28] Export field

---
 src/field/Field.tsx         |  2 +-
 src/field/FieldLabel.tsx    |  3 ++-
 src/field/HelpText.tsx      |  4 ++--
 src/index.tsx               |  1 +
 stories/Gallery.stories.tsx | 10 +++++++++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index e8ddd02f..2adced51 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -24,7 +24,7 @@ export interface FieldProps
     Validation {
   children: ReactElement;
   label?: ReactNode;
-  labelProps: HTMLAttributes<HTMLElement>;
+  labelProps?: HTMLAttributes<HTMLElement>;
   wrapperClassName?: string;
 }
 
diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx
index 30fd43e1..de435db7 100644
--- a/src/field/FieldLabel.tsx
+++ b/src/field/FieldLabel.tsx
@@ -59,7 +59,8 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
       htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}
       css={css`
         font-size: ${theme.typography.sizes.small.fontSize}px;
-        font-weight: ${theme.typography.sizes.small.lineHeight}px;
+        line-height: ${theme.typography.sizes.small.lineHeight}px;
+        font-weight: ${theme.typography.weights.heavy};
         color: ${theme.textColors.white90};
         padding: ${theme.spacing.padding4}px 0;
         display: inline-block;
diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx
index a34f1054..65dce7b4 100644
--- a/src/field/HelpText.tsx
+++ b/src/field/HelpText.tsx
@@ -7,9 +7,9 @@ import theme from '../theme';
 
 export interface HelpTextComponentProps extends HelpTextProps, Validation {
   /** Props for the help text description element. */
-  descriptionProps: HTMLAttributes<HTMLElement>;
+  descriptionProps?: HTMLAttributes<HTMLElement>;
   /** Props for the help text error message element. */
-  errorMessageProps: HTMLAttributes<HTMLElement>;
+  errorMessageProps?: HTMLAttributes<HTMLElement>;
   /** Whether the description is displayed with lighter text. */
   isDisabled?: boolean;
   /** Whether an error icon is rendered. */
diff --git a/src/index.tsx b/src/index.tsx
index d3c089f5..09da1045 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,6 +15,7 @@ export * from './dropdown';
 export * from './listbox';
 export * from './picker';
 export * from './notification';
+export * from './field';
 export * from './textfield';
 export * from './form';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
index a6a24617..cf5686ef 100644
--- a/stories/Gallery.stories.tsx
+++ b/stories/Gallery.stories.tsx
@@ -9,6 +9,7 @@ import {
   TextField,
   Dropdown,
   Provider,
+  Field,
 } from '../src';
 
 // @ts-ignore
@@ -99,7 +100,14 @@ const Template: Story = args => {
             `}
           >
             <TextField label="name" placeholder="enter your name" />
-            <Dropdown menu={<div>Hello</div>}>Action</Dropdown>
+            <TextField
+              label="email"
+              addonBefore="mail"
+              placeholder="enter your email"
+            />
+            <Field label="Perform action">
+              <Dropdown menu={<div>Hello</div>}>Action</Dropdown>
+            </Field>
             <Button variant="primary">Submit</Button>
           </div>
         </Card>

From 8a259f7a91ac28f65ba836355987ff9028e3c175 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 22:11:35 -0700
Subject: [PATCH 18/28] v0.4.0-1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b2ede3ae..0a456fb8 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0-0",
+  "version": "0.4.0-1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From 1e4fe33d53cdd200ac23bd64f7e2014a6ffed359 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 22:29:11 -0700
Subject: [PATCH 19/28] fix font size

---
 src/textfield/TextFieldBase.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index f76ecc97..8f9991b2 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -181,6 +181,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         background-color: ${theme.components.textField.backgroundColor};
         transition: all 0.2s ease-in-out;
         overflow: hidden;
+        font-size: ${theme.typography.sizes.medium.fontSize}px;
         &.is-hovered[:not(.is-disabled)] {
           border: 1px solid ${theme.components.textField.hoverBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};

From cea9fd877fbc4e71a759b11c9b2d2d45bb9786d9 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 22:30:19 -0700
Subject: [PATCH 20/28] v0.4.0-2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0a456fb8..29543282 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0-1",
+  "version": "0.4.0-2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From ed1c480f582be60d1ec5064505df331a35d9292e Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 23:06:39 -0700
Subject: [PATCH 21/28] Add custom class name support

---
 src/textfield/TextField.tsx     | 4 +++-
 src/textfield/TextFieldBase.tsx | 3 +++
 stories/Gallery.stories.tsx     | 9 ++++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/textfield/TextField.tsx b/src/textfield/TextField.tsx
index 4a22f884..679348b7 100644
--- a/src/textfield/TextField.tsx
+++ b/src/textfield/TextField.tsx
@@ -8,7 +8,9 @@ import { useTextField } from '@react-aria/textfield';
 import { AddonableProps } from '../types';
 import { useProviderProps } from '../provider';
 
-export interface TextFieldProps extends AriaTextFieldProps, AddonableProps {}
+export interface TextFieldProps extends AriaTextFieldProps, AddonableProps {
+  className?: string;
+}
 function TextField(props: TextFieldProps, ref: RefObject<TextFieldRef>) {
   // Call use provider props so the textfield can inherit from the provider
   // E.x. disabled, readOnly, etc.
diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index 8f9991b2..80e5184b 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -99,6 +99,7 @@ interface TextFieldBaseProps
   inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;
   loadingIndicator?: ReactElement;
   isLoading?: boolean;
+  className?: string;
 }
 
 export interface TextFieldRef
@@ -128,6 +129,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
     isLoading,
     loadingIndicator,
     addonBefore,
+    className,
   } = props;
   let { hoverProps, isHovered } = useHover({ isDisabled });
   let [isFocused, setIsFocused] = React.useState(false);
@@ -271,6 +273,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
       errorMessageProps={errorMessageProps}
       showErrorIcon={false}
       ref={domRef}
+      wrapperClassName={className}
     >
       {textField}
     </Field>
diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
index cf5686ef..70821f03 100644
--- a/stories/Gallery.stories.tsx
+++ b/stories/Gallery.stories.tsx
@@ -91,9 +91,15 @@ const Template: Story = args => {
               display: flex;
               align-items: flex-end;
               flex-direction: row;
-              .ac-textfield {
+              .ac-field {
                 margin-right: 8px;
               }
+              .email-textfield {
+                flex: 1 1 auto;
+                .ac-textfield {
+                  width: 100%;
+                }
+              }
               .ac-button {
                 margin-left: 8px;
               }
@@ -104,6 +110,7 @@ const Template: Story = args => {
               label="email"
               addonBefore="mail"
               placeholder="enter your email"
+              className="email-textfield"
             />
             <Field label="Perform action">
               <Dropdown menu={<div>Hello</div>}>Action</Dropdown>

From 64cc9806738181367cfd86b45f87b97d20a2180b Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Thu, 24 Feb 2022 23:07:40 -0700
Subject: [PATCH 22/28] v0.4.0-3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 29543282..c43329a0 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0-2",
+  "version": "0.4.0-3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From 071c97fb54bf8c6218e4b7196696c3c1472e1e7a Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Fri, 25 Feb 2022 09:20:29 -0700
Subject: [PATCH 23/28] v0.4.0-4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c43329a0..b7e5ad9f 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0-3",
+  "version": "0.4.0-4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From 5ada7fe32b14c037ae1eaf2d0971ccee6edbf275 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Fri, 25 Feb 2022 10:04:11 -0700
Subject: [PATCH 24/28] Change addon styling strategy

---
 src/field/Addon.tsx         | 5 ++++-
 stories/Gallery.stories.tsx | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/field/Addon.tsx b/src/field/Addon.tsx
index e5a812e0..2903043c 100644
--- a/src/field/Addon.tsx
+++ b/src/field/Addon.tsx
@@ -5,9 +5,12 @@ import { Text } from '../content/Text';
 
 const addonBeforeCSS = css`
   background-color: ${theme.colors.gray400};
-  padding: ${theme.spacing.padding8}px;
+  padding: 0 ${theme.spacing.padding8}px;
   flex: none;
   box-sizing: border-box;
+  height: ${theme.singleLineHeight}px;
+  display: flex;
+  align-items: center;
 `;
 
 /**
diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
index 70821f03..c9eb2be3 100644
--- a/stories/Gallery.stories.tsx
+++ b/stories/Gallery.stories.tsx
@@ -11,7 +11,6 @@ import {
   Provider,
   Field,
 } from '../src';
-
 // @ts-ignore
 import chartFile from './images/chart.png';
 

From 8dc550830d67d9259bb9fb2df290976ff5dfd406 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Fri, 25 Feb 2022 10:37:24 -0700
Subject: [PATCH 25/28] v0.4.0-5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b7e5ad9f..f6298b30 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0-4",
+  "version": "0.4.0-5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From 3a79a71c3cc53abc5d4582f75d942c8c10703793 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Fri, 25 Feb 2022 13:00:50 -0700
Subject: [PATCH 26/28] v0.4.0-6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f6298b30..50d8bfec 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0-5",
+  "version": "0.4.0-6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From f10980e44080f64bd65446935d3b3a808725fe1c Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Mon, 28 Feb 2022 18:47:09 -0700
Subject: [PATCH 27/28] Update stories for picker

---
 stories/Form.stories.tsx   | 19 ++++++++++++++++++-
 stories/Picker.stories.tsx | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx
index 6b2ab4db..699fbdaa 100644
--- a/stories/Form.stories.tsx
+++ b/stories/Form.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Form, FormProps, TextField } from '../src';
+import { Form, FormProps, TextField, Picker, Item, Field } from '../src';
 import { useForm, Controller } from 'react-hook-form';
 
 const meta: Meta = {
@@ -72,6 +72,23 @@ const Template: Story<FormProps> = args => {
           />
         )}
       />
+      <Field label="Pricing">
+        <Controller
+          name={'tier'}
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <Picker
+              addonBefore="$"
+              onSelectionChange={onChange}
+              selectedKey={value}
+              label={'Charge Amount'}
+            >
+              <Item>Free</Item>
+              <Item>Paid</Item>
+            </Picker>
+          )}
+        />
+      </Field>
       <input type="submit" />
     </Form>
   );
diff --git a/stories/Picker.stories.tsx b/stories/Picker.stories.tsx
index cea9ec83..a58060ae 100644
--- a/stories/Picker.stories.tsx
+++ b/stories/Picker.stories.tsx
@@ -162,3 +162,36 @@ const Gallery: Story<void> = () => {
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const gallery = Gallery.bind({});
+
+const ItemsViaProps: Story<PickerProps<string>> = args => {
+  const [frequency, setFrequency] = React.useState<string>('rarely');
+  return (
+    <Provider>
+      <Picker
+        addonBefore={'Frequency'}
+        {...args}
+        selectedKey={frequency}
+        onSelectionChange={selected => setFrequency(selected as string)}
+        items={[
+          { id: 1, name: 'Aardvark' },
+          { id: 2, name: 'Cat' },
+          { id: 3, name: 'Dog' },
+          { id: 4, name: 'Kangaroo' },
+          { id: 5, name: 'Koala' },
+          { id: 6, name: 'Penguin' },
+          { id: 7, name: 'Snake' },
+          { id: 8, name: 'Turtle' },
+          { id: 9, name: 'Wombat' },
+        ]}
+      >
+        {item => <Item>{item.name}</Item>}
+      </Picker>
+      <br />
+      <Text>Selected Value: {frequency}</Text>
+    </Provider>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const itemsViaProps = ItemsViaProps.bind({});

From c0d53463b4a886c818e18505828a0bf56f6c0cb0 Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Mon, 28 Feb 2022 18:48:49 -0700
Subject: [PATCH 28/28] v0.4.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 50d8bfec..f4769619 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0-6",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",