From de61b430d9412858d73b9eaa7d703f45cc827ace Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Wed, 7 Sep 2022 15:22:04 +0300
Subject: [PATCH 01/12] feat(PPDSC-2244): create text-area component

---
 .storybook/preview.js                         |   1 +
 src/form/form-input.tsx                       |  34 +++
 src/test/storybook-comps.tsx                  |  70 ++++++
 src/text-area/__tests__/text-area.stories.tsx | 232 ++++++++++++++++++
 src/text-area/defaults.ts                     |  49 ++++
 src/text-area/index.tsx                       |   2 +
 src/text-area/styled.tsx                      |  49 ++++
 src/text-area/text-area.tsx                   |  45 ++++
 src/text-area/types.ts                        |  22 ++
 9 files changed, 504 insertions(+)
 create mode 100644 src/text-area/__tests__/text-area.stories.tsx
 create mode 100644 src/text-area/defaults.ts
 create mode 100644 src/text-area/index.tsx
 create mode 100644 src/text-area/styled.tsx
 create mode 100644 src/text-area/text-area.tsx
 create mode 100644 src/text-area/types.ts

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 751d2fce8a..9b1c6c8607 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -17,6 +17,7 @@ const unlimitedScenarios = [
   'theme-checker',
   'popover',
   'audio-player-composable',
+  'text-area',
 ];
 
 const BackgroundColor = styled.div`
diff --git a/src/form/form-input.tsx b/src/form/form-input.tsx
index 3ce30b1a55..bd34a1edf5 100644
--- a/src/form/form-input.tsx
+++ b/src/form/form-input.tsx
@@ -23,6 +23,7 @@ import {withOwnTheme} from '../utils/with-own-theme';
 import textFieldDefaults from '../text-field/defaults';
 import assistiveTextDefaults from '../assistive-text/defaults';
 import {RadioButton} from '../radio-button';
+import {TextArea, TextAreaProps} from '../text-area';
 
 const useFormFieldContext = () => useContext(FormInputContext);
 
@@ -308,3 +309,36 @@ export const FormInputRadioButton = React.forwardRef<
     />
   );
 });
+
+export const FormInputTextArea = React.forwardRef<
+  HTMLTextAreaElement,
+  TextAreaProps
+>(({children, onChange, onBlur, ...props}, elementRef) => {
+  const {
+    size,
+    name,
+    state,
+    onChange: onChangeContext,
+    onBlur: onBlurContext,
+    ref,
+    id,
+    assistiveTextId,
+    isRequired,
+  } = useFormFieldContext();
+
+  return (
+    <TextArea
+      aria-required={isRequired || undefined}
+      aria-invalid={state === 'invalid' ? 'true' : 'false'}
+      name={name}
+      state={state}
+      size={size}
+      onChange={composeEventHandlers([onChange, onChangeContext])}
+      onBlur={composeEventHandlers([onBlur, onBlurContext])}
+      ref={composeRefs(elementRef, ref as React.Ref<HTMLTextAreaElement>)}
+      id={id}
+      aria-describedby={assistiveTextId}
+      {...props}
+    />
+  );
+});
diff --git a/src/test/storybook-comps.tsx b/src/test/storybook-comps.tsx
index c7efa0ad67..92d64441f2 100644
--- a/src/test/storybook-comps.tsx
+++ b/src/test/storybook-comps.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
+import {GridLayout} from '../grid-layout';
+import {LinkStandalone} from '../link';
 import {TextBlock} from '../text-block';
+import {TitleBar} from '../title-bar';
+import {Block} from '../block';
 import {MQ, styled, getColorCssFromTheme} from '../utils/style';
 
 interface Props {
@@ -77,3 +81,69 @@ export const StorybookParah: React.FC<Props> = ({children, stylePreset}) => (
 export const StorybookLabel = styled.label`
   ${getColorCssFromTheme('color', 'inkBase')}
 `;
+
+type StorybookPageProps = {
+  title: string;
+  url?: string;
+  children?: React.ReactNode;
+};
+
+export const StorybookPage = ({title, url, children}: StorybookPageProps) => {
+  // if (process.env.STORYBOOK_APPLITOOLS || window.STORYBOOK_APPLITOOLS) {
+  //   return (
+  //     <GridLayout rowGap="space020">
+  //       <div>{title}</div>
+
+  //       {children}
+  //     </GridLayout>
+  //   );
+  // }
+  const link = () =>
+    url ? <LinkStandalone href={url}>Documentation</LinkStandalone> : null;
+  return (
+    <GridLayout rowGap="space060">
+      <TitleBar
+        actionItem={link}
+        overrides={{
+          spaceInset: 'space000',
+          heading: {typographyPreset: 'editorialHeadline050'},
+        }}
+      >
+        {title}
+      </TitleBar>
+      {children}
+    </GridLayout>
+  );
+};
+
+type StorybookCaseProps = {
+  title: string;
+  children?: React.ReactNode;
+};
+
+// TODO: this styling can be done via style preset
+const StyledBlock = styled(Block)`
+  border: 1px solid #c6c6c6;
+  box-shadow: 0px 2px 4px rgba(10, 10, 10, 0.08);
+  border-radius: 8px;
+`;
+
+export const StorybookCase = ({title, children}: StorybookCaseProps) => (
+  // if (process.env.STORYBOOK_APPLITOOLS) {
+  //   return (
+  //     <GridLayout rowGap="space010">
+  //       <div>{title}</div>
+  //       {children}
+  //     </GridLayout>
+  //   );
+  // }
+
+  <GridLayout rowGap="space030">
+    <TextBlock stylePreset="inkBase" typographyPreset="editorialHeadline010">
+      {title.charAt(0).toUpperCase() + title.slice(1)}
+    </TextBlock>
+    <StyledBlock paddingBlock="space050" paddingInline="space050">
+      {children}
+    </StyledBlock>
+  </GridLayout>
+);
diff --git a/src/text-area/__tests__/text-area.stories.tsx b/src/text-area/__tests__/text-area.stories.tsx
new file mode 100644
index 0000000000..271ef6108d
--- /dev/null
+++ b/src/text-area/__tests__/text-area.stories.tsx
@@ -0,0 +1,232 @@
+import * as React from 'react';
+import {Story as StoryType} from '@storybook/react';
+import {TextFieldSize} from '../../text-field';
+import {StorybookPage, StorybookCase} from '../../test/storybook-comps';
+import {ThemeProvider, CreateThemeArgs, newskitLightTheme} from '../../theme';
+import {TextArea} from '../text-area';
+import {Label} from '../../label';
+import {AssistiveText} from '../../assistive-text';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
+import {FormInputState} from '../../form/types';
+import {TextAreaProps} from '../types';
+import {
+  Form,
+  FormInput,
+  FormInputAssistiveText,
+  FormInputLabel,
+  FormInputTextArea,
+} from '../../form';
+import {Button} from '../../button';
+import {deepMerge} from '../../utils';
+
+const textAreaCustomThemeObject: CreateThemeArgs = {
+  name: 'text-area-custom-theme',
+  overrides: {
+    stylePresets: {
+      customStyle: deepMerge(newskitLightTheme.stylePresets.inputField, {
+        base: {
+          borderWidth: '{{borders.borderWidth020}}',
+          borderRadius: '{{borders.borderRadiusRounded030}}',
+          borderColor: '{{colors.teal060}}',
+          placeholderColor: '{{colors.teal060}}',
+          color: '{{colors.teal060}}',
+        },
+      }),
+      customOutline: deepMerge(newskitLightTheme.stylePresets.inputField, {
+        focus: {
+          outlineColor: 'red',
+          outlineStyle: 'dotted',
+          outlineWidth: '5px',
+        },
+      }),
+    },
+  },
+};
+
+const DOCS_URL = 'https://newskit.co.uk/components/text-area/';
+
+const sizes: TextFieldSize[] = ['small', 'medium', 'large'];
+const states: FormInputState[] = ['valid', 'invalid', 'disabled'];
+const resizes: TextAreaProps['resize'][] = [
+  'none',
+  'vertical',
+  'horizontal',
+  'both',
+];
+
+export const TextAreaSizes = () => (
+  <StorybookPage title="TextArea Sizes" url={DOCS_URL}>
+    {sizes.map(size => (
+      <StorybookCase title={size}>
+        <Label size={size}>Label</Label>
+        <TextArea size={size} placeholder="Placeholder" />
+        <AssistiveText size={size}>Assistive Text</AssistiveText>
+      </StorybookCase>
+    ))}
+  </StorybookPage>
+);
+
+export const TextAreaStates = () => (
+  <StorybookPage title="TextArea States" url={DOCS_URL}>
+    <StorybookCase title="Base">
+      <Label>Label</Label>
+      <TextArea placeholder="Placeholder" />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+    <StorybookCase title="auto focus">
+      <Label>Label</Label>
+      <TextArea placeholder="Placeholder" autoFocus />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+    {states.map(state => (
+      <StorybookCase title={state as string}>
+        <Label>Label</Label>
+        <TextArea placeholder="Placeholder" state={state} />
+        <AssistiveText>Assistive Text</AssistiveText>
+      </StorybookCase>
+    ))}
+    <StorybookCase title="read only">
+      <Label>Label</Label>
+      <TextArea placeholder="Placeholder" readOnly />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+  </StorybookPage>
+);
+
+export const TextAreaWidth = () => (
+  <StorybookPage title="TextArea Width" url={DOCS_URL}>
+    <StorybookCase title="default (100%)">
+      <Label>Label</Label>
+      <TextArea placeholder="Placeholder" />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+
+    <StorybookCase title="fixed width">
+      <Label>Label</Label>
+      <TextArea placeholder="Placeholder" overrides={{width: '200px'}} />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+  </StorybookPage>
+);
+
+export const TextAreaHeight = () => (
+  <StorybookPage title="TextArea Height" url={DOCS_URL}>
+    <StorybookCase title="default">
+      <Label>Label</Label>
+      <TextArea placeholder="Placeholder" />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+
+    <StorybookCase title="fixed height">
+      <Label>Label</Label>
+      <TextArea placeholder="Placeholder" overrides={{minHeight: '200px'}} />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+  </StorybookPage>
+);
+
+export const TextAreaResize = () => (
+  <StorybookPage title="TextArea resize" url={DOCS_URL}>
+    {resizes.map(resize => (
+      <StorybookCase title={resize as string}>
+        <Label>Label</Label>
+        <TextArea placeholder="Placeholder" resize={resize} />
+        <AssistiveText>Assistive Text</AssistiveText>
+      </StorybookCase>
+    ))}
+  </StorybookPage>
+);
+
+export const TextAreaRowsAndCols = () => (
+  <StorybookPage title="TextArea cols and rows" url={DOCS_URL}>
+    <StorybookCase title="cols and rows">
+      <Label>Label</Label>
+      <TextArea
+        placeholder="Placeholder"
+        rows={5}
+        cols={40}
+        overrides={{width: 'unset', minHeight: 'unset'}}
+      />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+  </StorybookPage>
+);
+
+export const TextAreaOverrides = () => (
+  <StorybookPage title="TextArea overrides" url={DOCS_URL}>
+    <StorybookCase title="style">
+      <Label>Label</Label>
+      <TextArea
+        placeholder="Placeholder"
+        overrides={{
+          stylePreset: 'customStyle',
+          typographyPreset: 'editorialHeadline010',
+        }}
+      />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+    <StorybookCase title="logical props">
+      <Label>Label</Label>
+      <TextArea
+        placeholder="Placeholder"
+        overrides={{
+          paddingBlock: 'space050',
+          paddingInline: 'space080',
+          marginBlockStart: 'space060',
+          marginBlockEnd: 'space050',
+        }}
+      />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+    <StorybookCase title="outline">
+      <Label>Label</Label>
+      <TextArea
+        placeholder="Placeholder"
+        overrides={{
+          stylePreset: 'customOutline',
+        }}
+      />
+      <AssistiveText>Assistive Text</AssistiveText>
+    </StorybookCase>
+  </StorybookPage>
+);
+
+export const TextAreaValidation = () => (
+  <StorybookPage title="TextArea validation" url={DOCS_URL}>
+    <StorybookCase title="Form validation">
+      <Form onSubmit={() => console.log('Form submitted')}>
+        <FormInput
+          name="name"
+          rules={{
+            required: 'Required field',
+          }}
+        >
+          <FormInputLabel>Label</FormInputLabel>
+          <FormInputTextArea />
+          <FormInputAssistiveText>Assistive text</FormInputAssistiveText>
+        </FormInput>
+        <Button type="submit" overrides={{marginBlockStart: 'space040'}}>
+          Submit
+        </Button>
+      </Form>
+    </StorybookCase>
+  </StorybookPage>
+);
+
+export default {
+  title: 'NewsKit Light/text-area',
+  component: () => 'None',
+  disabledRules: ['color-contrast'],
+  decorators: [
+    (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (
+      <ThemeProvider
+        theme={createCustomThemeWithBaseThemeSwitch(
+          context?.globals?.backgrounds?.value,
+          textAreaCustomThemeObject,
+        )}
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
diff --git a/src/text-area/defaults.ts b/src/text-area/defaults.ts
new file mode 100644
index 0000000000..ce80afa287
--- /dev/null
+++ b/src/text-area/defaults.ts
@@ -0,0 +1,49 @@
+export default {
+  textArea: {
+    small: {
+      stylePreset: 'inputField',
+      minHeight: 'sizing070',
+      height: 'sizing100',
+      width: '100%',
+      typographyPreset: 'utilityBody020',
+
+      // TODO: We should not use this
+      // spaceInset: 'spaceInset020',
+      // spaceStack: 'space020',
+
+      paddingBlock: 'space020',
+      paddingInline: 'space020',
+      marginBlockEnd: 'space020',
+    },
+    medium: {
+      stylePreset: 'inputField',
+      minHeight: 'sizing080',
+      height: 'sizing110',
+      width: '100%',
+      typographyPreset: 'utilityBody020',
+
+      // TODO: We should not use this
+      // spaceInset: 'spaceInset030',
+      // spaceStack: 'space020',
+
+      paddingBlock: 'space030',
+      paddingInline: 'space030',
+      marginBlockEnd: 'space020',
+    },
+    large: {
+      stylePreset: 'inputField',
+      minHeight: 'sizing090',
+      height: 'sizing110',
+      width: '100%',
+      typographyPreset: 'utilityBody030',
+
+      // TODO: We should not use this
+      // spaceInset: 'spaceInset030',
+      // spaceStack: 'space020',
+
+      paddingBlock: 'space030',
+      paddingInline: 'space030',
+      marginBlockEnd: 'space020',
+    },
+  },
+};
diff --git a/src/text-area/index.tsx b/src/text-area/index.tsx
new file mode 100644
index 0000000000..b3f047cf0a
--- /dev/null
+++ b/src/text-area/index.tsx
@@ -0,0 +1,2 @@
+export * from './text-area';
+export * from './types';
diff --git a/src/text-area/styled.tsx b/src/text-area/styled.tsx
new file mode 100644
index 0000000000..9f1cf31edd
--- /dev/null
+++ b/src/text-area/styled.tsx
@@ -0,0 +1,49 @@
+import {
+  getTypographyPreset,
+  styled,
+  getResponsiveSize,
+  getStylePreset,
+} from '../utils/style';
+import {TextAreaProps} from './types';
+import {logicalProps} from '../utils/logical-properties';
+
+type StyledTextAreaProps = Omit<TextAreaProps, 'size'> & {
+  $size: TextAreaProps['size'];
+  placeholderColor?: string;
+};
+
+export const StyledTextArea = styled.textarea<StyledTextAreaProps>`
+  box-sizing: border-box;
+
+  ${({disabled}) => ({cursor: disabled ? 'not-allowed' : 'default'})};
+  ${({resize}) => ({resize})}
+
+  ${({$size}) => getResponsiveSize('width', `textArea.${$size}`, '', 'width')}
+  ${({$size}) => getResponsiveSize('height', `textArea.${$size}`, '', 'height')}
+  ${({$size}) =>
+    getResponsiveSize('maxWidth', `textArea.${$size}`, '', 'maxWidth')}
+  ${({$size}) =>
+    getResponsiveSize('maxHeight', `textArea.${$size}`, '', 'maxHeight')}
+  ${({$size}) =>
+    getResponsiveSize('minHeight', `textArea.${$size}`, '', 'minHeight')}
+  ${({$size}) =>
+    getResponsiveSize('minWidth', `textArea.${$size}`, '', 'minWidth')}
+
+  ${({$size, state}) =>
+    getStylePreset(`textArea.${$size}`, '', {
+      isInvalid: state === 'invalid',
+      isDisabled: state === 'disabled',
+      isValid: state === 'valid',
+    })}
+
+  ${({$size}) =>
+    getTypographyPreset(`textArea.${$size}`, '', {
+      withCrop: true,
+    })}
+
+    ${({$size}) => logicalProps(`textArea.${$size}`)};
+
+  ::placeholder {
+    color: ${({placeholderColor}) => placeholderColor && placeholderColor};
+  }
+`;
diff --git a/src/text-area/text-area.tsx b/src/text-area/text-area.tsx
new file mode 100644
index 0000000000..1fed430334
--- /dev/null
+++ b/src/text-area/text-area.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {TextAreaProps} from './types';
+import defaults from './defaults';
+import {withOwnTheme} from '../utils/with-own-theme';
+import {StyledTextArea} from './styled';
+import {getSingleStylePreset} from '../utils';
+import {getToken} from '../utils/get-token';
+import {useTheme} from '../theme';
+
+const ThemelessTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({size = 'medium', state, overrides, ...props}, ref) => {
+    const theme = useTheme();
+
+    // This is a fix to apply the placeholderColor to input
+    const textFieldStylePreset = getToken(
+      {theme, overrides},
+      `textArea.${size}`,
+      '',
+      'stylePreset',
+    );
+
+    const placeholderColor = getSingleStylePreset(
+      theme,
+      'base',
+      'placeholderColor',
+      textFieldStylePreset,
+    );
+
+    return (
+      <StyledTextArea
+        $size={size}
+        state={state}
+        disabled={state === 'disabled'}
+        placeholderColor={placeholderColor}
+        overrides={overrides}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export const TextArea = withOwnTheme(ThemelessTextArea)({
+  defaults,
+});
diff --git a/src/text-area/types.ts b/src/text-area/types.ts
new file mode 100644
index 0000000000..8ccc7d49c9
--- /dev/null
+++ b/src/text-area/types.ts
@@ -0,0 +1,22 @@
+import {FormInputState} from '../form/types';
+import {EventData} from '../instrumentation';
+import {MQ} from '../utils';
+import {LogicalProps} from '../utils/logical-properties';
+
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    EventData {
+  size?: 'small' | 'medium' | 'large';
+  state?: FormInputState;
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+  overrides: {
+    width?: MQ<string>;
+    height?: MQ<string>;
+    maxWidth?: MQ<string>;
+    maxHeight?: MQ<string>;
+    minWidth?: MQ<string>;
+    minHeight?: MQ<string>;
+    stylePreset?: MQ<string>;
+    typographyPreset?: MQ<string>;
+  } & LogicalProps;
+}

From f2ac8d324e686ddbee478056ecc3b6786e16d2db Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Wed, 7 Sep 2022 16:17:47 +0300
Subject: [PATCH 02/12] feat(PPDSC-2244): add resize prop

---
 src/text-area/text-area.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/text-area/text-area.tsx b/src/text-area/text-area.tsx
index 1fed430334..8a4343f26a 100644
--- a/src/text-area/text-area.tsx
+++ b/src/text-area/text-area.tsx
@@ -8,7 +8,7 @@ import {getToken} from '../utils/get-token';
 import {useTheme} from '../theme';
 
 const ThemelessTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({size = 'medium', state, overrides, ...props}, ref) => {
+  ({size = 'medium', resize = 'vertical', state, overrides, ...props}, ref) => {
     const theme = useTheme();
 
     // This is a fix to apply the placeholderColor to input
@@ -30,6 +30,7 @@ const ThemelessTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       <StyledTextArea
         $size={size}
         state={state}
+        resize={resize}
         disabled={state === 'disabled'}
         placeholderColor={placeholderColor}
         overrides={overrides}

From 581b4a6b7c29f559713b4edc44477b39aa7179e1 Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Thu, 8 Sep 2022 10:37:14 +0300
Subject: [PATCH 03/12] feat(PPDSC-2244): fix overrides

---
 src/text-area/styled.tsx | 15 +++++++++++++++
 src/text-area/types.ts   |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/text-area/styled.tsx b/src/text-area/styled.tsx
index 9f1cf31edd..8254dbe8db 100644
--- a/src/text-area/styled.tsx
+++ b/src/text-area/styled.tsx
@@ -6,6 +6,20 @@ import {
 } from '../utils/style';
 import {TextAreaProps} from './types';
 import {logicalProps} from '../utils/logical-properties';
+import {StylePresetStates} from '../theme/types';
+
+/**
+ * there is an issue with getStylePreset when is used on input/textarea component,
+ * it adds component:valid:hover style by default which is the browser default behaviour
+ * that's why valid:hover and invalid:hover are removed from style-preset when the component don't need these states.
+ */
+const getOmittedStates = (
+  state: TextAreaProps['state'],
+): StylePresetStates[] => {
+  if (state !== 'valid' && state !== 'invalid')
+    return ['valid:hover', 'invalid:hover'];
+  return [];
+};
 
 type StyledTextAreaProps = Omit<TextAreaProps, 'size'> & {
   $size: TextAreaProps['size'];
@@ -34,6 +48,7 @@ export const StyledTextArea = styled.textarea<StyledTextAreaProps>`
       isInvalid: state === 'invalid',
       isDisabled: state === 'disabled',
       isValid: state === 'valid',
+      omitStates: getOmittedStates(state),
     })}
 
   ${({$size}) =>
diff --git a/src/text-area/types.ts b/src/text-area/types.ts
index 8ccc7d49c9..9d73c8f680 100644
--- a/src/text-area/types.ts
+++ b/src/text-area/types.ts
@@ -9,7 +9,7 @@ export interface TextAreaProps
   size?: 'small' | 'medium' | 'large';
   state?: FormInputState;
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
-  overrides: {
+  overrides?: {
     width?: MQ<string>;
     height?: MQ<string>;
     maxWidth?: MQ<string>;

From 7da2f4f49abc285d2e740a86fd71c086c37c3f07 Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Thu, 8 Sep 2022 14:02:36 +0300
Subject: [PATCH 04/12] feat(PPDSC-2244): add unit tests

---
 .../__snapshots__/index.test.ts.snap          |    1 +
 .../__snapshots__/text-area.test.tsx.snap     | 1227 +++++++++++++++++
 src/text-area/__tests__/text-area.test.tsx    |   80 ++
 .../__snapshots__/theme.test.ts.snap          |   32 +
 src/utils/__tests__/style-preset.test.tsx     |   24 +-
 src/utils/style/style-preset.ts               |    1 +
 6 files changed, 1364 insertions(+), 1 deletion(-)
 create mode 100644 src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
 create mode 100644 src/text-area/__tests__/text-area.test.tsx

diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap
index da0610e429..60f2690779 100644
--- a/src/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/__tests__/__snapshots__/index.test.ts.snap
@@ -50,6 +50,7 @@ Array [
   "FormInputLabel",
   "FormInputRadioButton",
   "FormInputSelect",
+  "FormInputTextArea",
   "FormInputTextField",
   "Global",
   "Grid",
diff --git a/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap b/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
new file mode 100644
index 0000000000..0cb45d388e
--- /dev/null
+++ b/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
@@ -0,0 +1,1227 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextArea FormInputTextArea render invalid form 1`] = `
+<DocumentFragment>
+  .emotion-1 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #D60000;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-1 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-1:hover:not(:disabled) {
+  border-color: #D60000;
+  background-color: #F1F1F1;
+}
+
+.emotion-1:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-1::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-1::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-1::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-1::placeholder {
+  color: #6A6A6A;
+}
+
+<form
+    class="emotion-0"
+    novalidate=""
+  >
+    <textarea
+      aria-invalid="true"
+      class="emotion-1"
+      id="mock-nk-1"
+      name="name"
+    />
+  </form>
+</DocumentFragment>
+`;
+
+exports[`TextArea FormInputTextArea render valid form 1`] = `
+<DocumentFragment>
+  .emotion-1 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #007B22;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-1 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-1:hover:not(:disabled) {
+  border-color: #007B22;
+  background-color: #F1F1F1;
+}
+
+.emotion-1:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-1::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-1::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-1::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-1::placeholder {
+  color: #6A6A6A;
+}
+
+<form
+    class="emotion-0"
+    novalidate=""
+  >
+    <textarea
+      aria-invalid="false"
+      aria-required="true"
+      class="emotion-1"
+      id="mock-nk-1"
+      name="name"
+    />
+  </form>
+</DocumentFragment>
+`;
+
+exports[`TextArea render default 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="text-area"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render resize: both 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: both;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render resize: horizontal 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: horizontal;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render resize: none 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: none;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render resize: vertical 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render size: large 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 64px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render size: medium 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render size: small 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 80px;
+  min-height: 40px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #919191;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 8px;
+  padding-block: 8px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:focus:not(:disabled) {
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
+  background-color: #F1F1F1;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
+.emotion-0:hover:not(:disabled) {
+  background-color: #F1F1F1;
+}
+
+.emotion-0:valid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:disabled {
+  border-color: #E2E2E2;
+  color: #ABABAB;
+}
+
+.emotion-0:disabled svg {
+  fill: #ABABAB;
+}
+
+.emotion-0:invalid:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render state: disabled 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: not-allowed;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #E2E2E2;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #ABABAB;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #ABABAB;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    disabled=""
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render state: invalid 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #D60000;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:hover:not(:disabled) {
+  border-color: #D60000;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextArea render state: valid 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  box-sizing: border-box;
+  cursor: default;
+  resize: vertical;
+  width: 100%;
+  height: 120px;
+  min-height: 48px;
+  background-color: transparent;
+  border-style: solid;
+  border-color: #007B22;
+  border-width: 1px;
+  border-radius: 8px;
+  color: #3B3B3B;
+  text-overflow: ellipsis;
+  font-family: "DM Sans",sans-serif;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  margin-block-end: 8px;
+  padding-inline: 12px;
+  padding-block: 12px;
+}
+
+.emotion-0 svg {
+  fill: #3B3B3B;
+}
+
+.emotion-0:hover:not(:disabled) {
+  border-color: #007B22;
+  background-color: #F1F1F1;
+}
+
+.emotion-0:focus:not(:disabled) {
+  border-color: #3768FB;
+  background-color: #F1F1F1;
+}
+
+.emotion-0::before {
+  content: '';
+  margin-bottom: -0.391em;
+  display: block;
+}
+
+.emotion-0::after {
+  content: '';
+  margin-top: -0.409em;
+  display: block;
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::-moz-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: #6A6A6A;
+}
+
+.emotion-0::placeholder {
+  color: #6A6A6A;
+}
+
+<textarea
+    class="emotion-0"
+    name="textArea"
+  />
+</DocumentFragment>
+`;
diff --git a/src/text-area/__tests__/text-area.test.tsx b/src/text-area/__tests__/text-area.test.tsx
new file mode 100644
index 0000000000..7119753fff
--- /dev/null
+++ b/src/text-area/__tests__/text-area.test.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import {TextAreaProps, TextArea} from '..';
+import {renderToFragmentWithTheme} from '../../test/test-utils';
+import {FormInput, FormInputTextArea} from '../../form/form-input';
+import {Form} from '../../form';
+
+describe('TextArea', () => {
+  test('render default', () => {
+    const props = {
+      name: 'text-area',
+    };
+    const fragment = renderToFragmentWithTheme(TextArea, props);
+    expect(fragment).toMatchSnapshot();
+  });
+
+  ['small', 'medium', 'large'].forEach(size => {
+    test(`render size: ${size}`, () => {
+      const props = {
+        name: 'textArea',
+        size: size as TextAreaProps['size'],
+      };
+      const fragment = renderToFragmentWithTheme(TextArea, props);
+      expect(fragment).toMatchSnapshot();
+    });
+  });
+
+  ['valid', 'invalid', 'disabled'].forEach(state => {
+    test(`render state: ${state}`, () => {
+      const props = {
+        name: 'textArea',
+        state: state as TextAreaProps['state'],
+      };
+      const fragment = renderToFragmentWithTheme(TextArea, props);
+      expect(fragment).toMatchSnapshot();
+    });
+  });
+
+  ['none', 'vertical', 'horizontal', 'both'].forEach(resize => {
+    test(`render resize: ${resize}`, () => {
+      const props = {
+        name: 'textArea',
+        resize: resize as TextAreaProps['resize'],
+      };
+      const fragment = renderToFragmentWithTheme(TextArea, props);
+      expect(fragment).toMatchSnapshot();
+    });
+  });
+
+  describe('FormInputTextArea', () => {
+    test('render invalid form', () => {
+      const Component = () => (
+        <Form onSubmit={() => null} reValidationMode="onSubmit">
+          <FormInput name="name" state="invalid">
+            <FormInputTextArea />
+          </FormInput>
+        </Form>
+      );
+      const fragment = renderToFragmentWithTheme(Component, {});
+      expect(fragment).toMatchSnapshot();
+    });
+
+    test('render valid form', () => {
+      const Component = () => (
+        <Form onSubmit={() => null} reValidationMode="onSubmit">
+          <FormInput
+            name="name"
+            state="valid"
+            rules={{
+              required: 'Required field',
+            }}
+          >
+            <FormInputTextArea />
+          </FormInput>
+        </Form>
+      );
+      const fragment = renderToFragmentWithTheme(Component, {});
+      expect(fragment).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
index 4bd1197862..0c8306874b 100644
--- a/src/theme/__tests__/__snapshots__/theme.test.ts.snap
+++ b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -2667,6 +2667,38 @@ Object {
       "typographyPreset": "utilityButton010",
     },
   },
+  "textArea": Object {
+    "large": Object {
+      "height": "sizing110",
+      "marginBlockEnd": "space020",
+      "minHeight": "sizing090",
+      "paddingBlock": "space030",
+      "paddingInline": "space030",
+      "stylePreset": "inputField",
+      "typographyPreset": "utilityBody030",
+      "width": "100%",
+    },
+    "medium": Object {
+      "height": "sizing110",
+      "marginBlockEnd": "space020",
+      "minHeight": "sizing080",
+      "paddingBlock": "space030",
+      "paddingInline": "space030",
+      "stylePreset": "inputField",
+      "typographyPreset": "utilityBody020",
+      "width": "100%",
+    },
+    "small": Object {
+      "height": "sizing100",
+      "marginBlockEnd": "space020",
+      "minHeight": "sizing070",
+      "paddingBlock": "space020",
+      "paddingInline": "space020",
+      "stylePreset": "inputField",
+      "typographyPreset": "utilityBody020",
+      "width": "100%",
+    },
+  },
   "textField": Object {
     "large": Object {
       "endEnhancer": Object {
diff --git a/src/utils/__tests__/style-preset.test.tsx b/src/utils/__tests__/style-preset.test.tsx
index bfa03a333c..986790f7b1 100644
--- a/src/utils/__tests__/style-preset.test.tsx
+++ b/src/utils/__tests__/style-preset.test.tsx
@@ -5,8 +5,9 @@ import {
   getStylePresetFromTheme,
   GetStylePresetFromThemeOptions,
   getPresetStyles,
+  getSingleStylePreset,
 } from '../style';
-import {createTheme} from '../../theme';
+import {compileTheme, createTheme} from '../../theme';
 import {deepMerge} from '../deep-merge';
 
 const TestSurface = styled.div<GetStylePresetFromThemeOptions>`
@@ -908,3 +909,24 @@ describe('getPresetStyles', () => {
     expect(result).toEqual({backgroundColor: 'red'});
   });
 });
+
+describe('getSingleStylePreset', () => {
+  test('return empty when stylePreset does not exist', () => {
+    const result = getSingleStylePreset(
+      compileTheme(themeIconButtonMinimalPrimary),
+      'base',
+      'placeholderColor',
+      'nonExistinOne',
+    );
+    expect(result).toEqual('');
+  });
+  test('return correct state from stylePreset', () => {
+    const result = getSingleStylePreset(
+      compileTheme(themeIconButtonMinimalPrimary),
+      'hover',
+      'backgroundColor',
+      'iconButtonMinimalPrimary',
+    );
+    expect(result).toEqual('#ECF1FF');
+  });
+});
diff --git a/src/utils/style/style-preset.ts b/src/utils/style/style-preset.ts
index 1043eb5a13..a514d7ed99 100644
--- a/src/utils/style/style-preset.ts
+++ b/src/utils/style/style-preset.ts
@@ -272,5 +272,6 @@ export const getSingleStylePreset = (
 ) => {
   const preset =
     (customToken && stylePresets[customToken]) || stylePresets[defaultToken];
+  if (!preset) return '';
   return (preset[state] || {})[cssProp] || '';
 };

From 3e99f1679833e37a6dac6dd3e3b505a8596f051f Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 09:49:17 +0300
Subject: [PATCH 05/12] feat(PPDSC-2244): add text-area instrumantation and fix
 style preset

---
 .storybook/main.js                 |  9 ++++++++
 package.json                       |  1 +
 src/text-area/text-area.tsx        | 34 +++++++++++++++++++++++++++++-
 src/theme/presets/style-presets.ts | 12 +++++++++--
 yarn.lock                          |  2 +-
 5 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 69ec1612e9..9995bf85f7 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -29,6 +29,15 @@ module.exports = {
         },
       },
     },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
+      },
+    },
   ],
   // https://github.com/storybookjs/storybook/issues/13277
   // Remove Emotion aliases once the issue above is resolved
diff --git a/package.json b/package.json
index b0f399ffea..70202b4ee2 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@mdx-js/loader": "^1.5.8",
     "@mdx-js/react": "^1.5.8",
     "@next/mdx": "^9.3.5",
+    "@storybook/addon-docs": "^6.5.10",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-links": "^6.5.9",
diff --git a/src/text-area/text-area.tsx b/src/text-area/text-area.tsx
index 8a4343f26a..23e9f1da4f 100644
--- a/src/text-area/text-area.tsx
+++ b/src/text-area/text-area.tsx
@@ -6,9 +6,22 @@ import {StyledTextArea} from './styled';
 import {getSingleStylePreset} from '../utils';
 import {getToken} from '../utils/get-token';
 import {useTheme} from '../theme';
+import {EventTrigger, useInstrumentation} from '../instrumentation';
 
 const ThemelessTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({size = 'medium', resize = 'vertical', state, overrides, ...props}, ref) => {
+  (
+    {
+      size = 'medium',
+      resize = 'vertical',
+      state,
+      overrides,
+      onFocus,
+      eventContext,
+      eventOriginator = 'text area',
+      ...props
+    },
+    ref,
+  ) => {
     const theme = useTheme();
 
     // This is a fix to apply the placeholderColor to input
@@ -26,6 +39,24 @@ const ThemelessTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       textFieldStylePreset,
     );
 
+    const {fireEvent} = useInstrumentation();
+
+    const onElementFocus = React.useCallback(
+      (event: React.FocusEvent<HTMLTextAreaElement, Element>) => {
+        fireEvent({
+          originator: eventOriginator,
+          trigger: EventTrigger.Focus,
+          context: {
+            ...eventContext,
+          },
+        });
+        if (onFocus) {
+          onFocus(event);
+        }
+      },
+      [eventContext, eventOriginator, fireEvent, onFocus],
+    );
+
     return (
       <StyledTextArea
         $size={size}
@@ -35,6 +66,7 @@ const ThemelessTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         placeholderColor={placeholderColor}
         overrides={overrides}
         ref={ref}
+        onFocus={onElementFocus}
         {...props}
       />
     );
diff --git a/src/theme/presets/style-presets.ts b/src/theme/presets/style-presets.ts
index de03800c6e..90595b60cf 100644
--- a/src/theme/presets/style-presets.ts
+++ b/src/theme/presets/style-presets.ts
@@ -37,7 +37,11 @@ stylePresets.inputField = {
     backgroundColor: '{{colors.interactiveInput010}}',
   },
   'valid:focus': {
-    borderColor: '{{outlines.outlineColorDefault}}',
+    outlineColor: '{{outlines.outlineColorDefault}}',
+    outlineStyle: '{{outlines.outlineStyleDefault}}',
+    outlineWidth: '{{outlines.outlineWidthDefault}}',
+    safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}',
+    borderColor: '{{colors.transparent}}',
     backgroundColor: '{{colors.interactiveInput010}}',
   },
   disabled: {
@@ -52,7 +56,11 @@ stylePresets.inputField = {
     borderColor: '{{colors.interactiveNegative030}}',
   },
   'invalid:focus': {
-    borderColor: '{{outlines.outlineColorDefault}}',
+    outlineColor: '{{outlines.outlineColorDefault}}',
+    outlineStyle: '{{outlines.outlineStyleDefault}}',
+    outlineWidth: '{{outlines.outlineWidthDefault}}',
+    safariOutlineStyle: '{{outlines.safariOutlineStyleDefault}}',
+    borderColor: '{{colors.transparent}}',
     backgroundColor: '{{colors.interactiveInput010}}',
   },
   'invalid:hover': {
diff --git a/yarn.lock b/yarn.lock
index f4140ce85c..cef21a188b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2884,7 +2884,7 @@
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.5.10":
+"@storybook/addon-docs@6.5.10", "@storybook/addon-docs@^6.5.10":
   version "6.5.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.10.tgz#dde18b5659e8033651e139a231a7f69306433b92"
   integrity sha512-1kgjo3f0vL6GN8fTwLL05M/q/kDdzvuqwhxPY/v5hubFb3aQZGr2yk9pRBaLAbs4bez0yG0ASXcwhYnrEZUppg==

From 2c905584c9a9fb8e1ea6e55e18496b607495bc71 Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 10:07:06 +0300
Subject: [PATCH 06/12] feat(PPDSC-2244): update snapshots

---
 .../__snapshots__/doc-theme.test.ts.snap      |  96 +++-
 .../__snapshots__/fieldset.test.tsx.snap      |  78 +++-
 .../__snapshots__/form.test.tsx.snap          | 171 ++++++-
 .../__snapshots__/select.test.tsx.snap        | 416 ++++++++++++++++--
 .../__snapshots__/text-area.test.tsx.snap     | 260 ++++++++++-
 .../__snapshots__/text-field.test.tsx.snap    | 260 ++++++++++-
 .../__snapshots__/creator.test.ts.snap        |  12 +-
 .../__snapshots__/theme.test.ts.snap          |  24 +-
 .../__snapshots__/index.test.ts.snap          |  12 +-
 9 files changed, 1213 insertions(+), 116 deletions(-)

diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
index de5f1f3124..3ed77b5e9e 100644
--- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
+++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
@@ -1315,7 +1315,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -1329,7 +1333,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -3908,7 +3916,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -3922,7 +3934,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -6504,7 +6520,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -6518,7 +6538,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -9097,7 +9121,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -9111,7 +9139,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -11693,7 +11725,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -11707,7 +11743,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -14286,7 +14326,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -14300,7 +14344,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -16882,7 +16930,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -16896,7 +16948,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -19475,7 +19531,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -19489,7 +19549,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
diff --git a/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap b/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap
index 158e4bb95c..1af2fd4fe9 100644
--- a/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap
+++ b/src/fieldset/__tests__/__snapshots__/fieldset.test.tsx.snap
@@ -97,10 +97,21 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-2:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -111,10 +122,21 @@ exports[`Fieldset renders fieldset with large form inputs 1`] = `
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -785,10 +807,21 @@ exports[`Fieldset renders fieldset with medium form inputs 1`] = `
 }
 
 .emotion-2:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -799,10 +832,21 @@ exports[`Fieldset renders fieldset with medium form inputs 1`] = `
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1473,10 +1517,21 @@ exports[`Fieldset renders fieldset with small form inputs 1`] = `
 }
 
 .emotion-2:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1487,10 +1542,21 @@ exports[`Fieldset renders fieldset with small form inputs 1`] = `
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
diff --git a/src/form/__tests__/__snapshots__/form.test.tsx.snap b/src/form/__tests__/__snapshots__/form.test.tsx.snap
index ce45e4038d..908eea32f7 100644
--- a/src/form/__tests__/__snapshots__/form.test.tsx.snap
+++ b/src/form/__tests__/__snapshots__/form.test.tsx.snap
@@ -4129,10 +4129,21 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-2:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -4143,10 +4154,21 @@ exports[`FormInput fireEvent with onBlur valid state 1`] = `
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -5560,10 +5582,21 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-2:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -5574,10 +5607,21 @@ exports[`FormInput fireEvent with onChange when value is invalid 1`] = `
 }
 
 .emotion-2:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-2:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-2:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -6998,10 +7042,21 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -7012,10 +7067,21 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -7322,10 +7388,21 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -7336,10 +7413,21 @@ exports[`FormInput renders FormInput Correctly 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -8749,7 +8837,7 @@ exports[`FormInput renders with error and with submit validation and revalidatio
   margin-bottom: 8px;
   background-color: #F1F1F1;
   border-style: solid;
-  border-color: #3768FB;
+  border-color: transparent;
   border-width: 1px;
   border-radius: 8px;
   color: #3B3B3B;
@@ -8990,10 +9078,21 @@ exports[`FormInput renders with error and with submit validation and revalidatio
 }
 
 .emotion-13:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-13:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-20 {
   box-sizing: border-box;
   display: -webkit-inline-box;
@@ -9413,10 +9512,21 @@ exports[`FormInput renders with nested inputs 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -9427,10 +9537,21 @@ exports[`FormInput renders with nested inputs 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -9737,10 +9858,21 @@ exports[`FormInput renders with nested inputs 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -9751,10 +9883,21 @@ exports[`FormInput renders with nested inputs 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
diff --git a/src/select/__tests__/__snapshots__/select.test.tsx.snap b/src/select/__tests__/__snapshots__/select.test.tsx.snap
index e2d9c42587..5bd77e6249 100644
--- a/src/select/__tests__/__snapshots__/select.test.tsx.snap
+++ b/src/select/__tests__/__snapshots__/select.test.tsx.snap
@@ -58,10 +58,21 @@ exports[`Select in Modal render Select 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -72,10 +83,21 @@ exports[`Select in Modal render Select 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -974,10 +996,21 @@ exports[`Select in Modal render Select with overrides props 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -988,10 +1021,21 @@ exports[`Select in Modal render Select with overrides props 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1727,10 +1771,21 @@ exports[`Select in Modal render Select with overrides style 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1741,10 +1796,21 @@ exports[`Select in Modal render Select with overrides style 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -2635,10 +2701,21 @@ exports[`Select renders Select with logical props 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -2649,10 +2726,21 @@ exports[`Select renders Select with logical props 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -3216,10 +3304,21 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
 }
 
 .emotion-1:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-1:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-1:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -3230,10 +3329,21 @@ exports[`Select renders Select, AssistiveText and Label 1`] = `
 }
 
 .emotion-1:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-1:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-1:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -3573,10 +3683,21 @@ exports[`Select renders SelectOption with logical props 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -3587,10 +3708,21 @@ exports[`Select renders SelectOption with logical props 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -4106,10 +4238,21 @@ exports[`Select renders large Select 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -4120,10 +4263,21 @@ exports[`Select renders large Select 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -4397,10 +4551,21 @@ exports[`Select renders loading select 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -4411,10 +4576,21 @@ exports[`Select renders loading select 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -4667,10 +4843,21 @@ exports[`Select renders medium Select 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -4681,10 +4868,21 @@ exports[`Select renders medium Select 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -4958,10 +5156,21 @@ exports[`Select renders select with a pre selected option 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -4972,10 +5181,21 @@ exports[`Select renders select with a pre selected option 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -5283,10 +5503,21 @@ exports[`Select renders select with a selected option 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -5297,10 +5528,21 @@ exports[`Select renders select with a selected option 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -5608,10 +5850,21 @@ exports[`Select renders select with leading and trailing icon 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -5622,10 +5875,21 @@ exports[`Select renders select with leading and trailing icon 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -5957,10 +6221,21 @@ exports[`Select renders select with non-string options 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -5971,10 +6246,21 @@ exports[`Select renders select with non-string options 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -6284,10 +6570,21 @@ exports[`Select renders small Select 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -6298,10 +6595,21 @@ exports[`Select renders small Select 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -6575,10 +6883,21 @@ exports[`Select should render custom placeholder 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -6589,10 +6908,21 @@ exports[`Select should render custom placeholder 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -6866,10 +7196,21 @@ exports[`Select virtualize long list 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -6880,10 +7221,21 @@ exports[`Select virtualize long list 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
diff --git a/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap b/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
index 0cb45d388e..dd3b87bf6e 100644
--- a/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
+++ b/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
@@ -37,10 +37,21 @@ exports[`TextArea FormInputTextArea render invalid form 1`] = `
 }
 
 .emotion-1:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-1:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-1::before {
   content: '';
   margin-bottom: -0.391em;
@@ -120,10 +131,21 @@ exports[`TextArea FormInputTextArea render valid form 1`] = `
 }
 
 .emotion-1:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-1:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-1::before {
   content: '';
   margin-bottom: -0.391em;
@@ -219,10 +241,21 @@ exports[`TextArea render default 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -233,10 +266,21 @@ exports[`TextArea render default 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -324,10 +368,21 @@ exports[`TextArea render resize: both 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -338,10 +393,21 @@ exports[`TextArea render resize: both 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -429,10 +495,21 @@ exports[`TextArea render resize: horizontal 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -443,10 +520,21 @@ exports[`TextArea render resize: horizontal 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -534,10 +622,21 @@ exports[`TextArea render resize: none 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -548,10 +647,21 @@ exports[`TextArea render resize: none 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -639,10 +749,21 @@ exports[`TextArea render resize: vertical 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -653,10 +774,21 @@ exports[`TextArea render resize: vertical 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -744,10 +876,21 @@ exports[`TextArea render size: large 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -758,10 +901,21 @@ exports[`TextArea render size: large 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -849,10 +1003,21 @@ exports[`TextArea render size: medium 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -863,10 +1028,21 @@ exports[`TextArea render size: medium 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -954,10 +1130,21 @@ exports[`TextArea render size: small 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -968,10 +1155,21 @@ exports[`TextArea render size: small 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -1111,10 +1309,21 @@ exports[`TextArea render state: invalid 1`] = `
 }
 
 .emotion-0:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
@@ -1187,10 +1396,21 @@ exports[`TextArea render state: valid 1`] = `
 }
 
 .emotion-0:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0::before {
   content: '';
   margin-bottom: -0.391em;
diff --git a/src/text-field/__tests__/__snapshots__/text-field.test.tsx.snap b/src/text-field/__tests__/__snapshots__/text-field.test.tsx.snap
index fb4e352b2b..8919370ca6 100644
--- a/src/text-field/__tests__/__snapshots__/text-field.test.tsx.snap
+++ b/src/text-field/__tests__/__snapshots__/text-field.test.tsx.snap
@@ -97,10 +97,21 @@ exports[`TextField renders TextField Correctly 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -111,10 +122,21 @@ exports[`TextField renders TextField Correctly 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -238,10 +260,21 @@ Object {
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -252,10 +285,21 @@ Object {
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -511,10 +555,21 @@ Object {
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -525,10 +580,21 @@ Object {
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1088,10 +1154,21 @@ exports[`TextField renders TextField, AssistiveText and Label 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1102,10 +1179,21 @@ exports[`TextField renders TextField, AssistiveText and Label 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1286,10 +1374,21 @@ exports[`TextField renders disabled text field 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1300,10 +1399,21 @@ exports[`TextField renders disabled text field 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1554,10 +1664,21 @@ exports[`TextField renders large TextField 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1568,10 +1689,21 @@ exports[`TextField renders large TextField 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1690,10 +1822,21 @@ exports[`TextField renders medium TextField 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1704,10 +1847,21 @@ exports[`TextField renders medium TextField 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1826,10 +1980,21 @@ exports[`TextField renders small TextField 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1840,10 +2005,21 @@ exports[`TextField renders small TextField 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -1962,10 +2138,21 @@ exports[`TextField renders text field with leading and trailing icon 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -1976,10 +2163,21 @@ exports[`TextField renders text field with leading and trailing icon 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
@@ -2229,10 +2427,21 @@ exports[`TextField should render custom placeholder 1`] = `
 }
 
 .emotion-0:valid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:valid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:disabled {
   border-color: #E2E2E2;
   color: #ABABAB;
@@ -2243,10 +2452,21 @@ exports[`TextField should render custom placeholder 1`] = `
 }
 
 .emotion-0:invalid:focus:not(:disabled) {
-  border-color: #3768FB;
+  outline-color: #3768FB;
+  outline-style: solid;
+  outline-width: 2px;
+  border-color: transparent;
   background-color: #F1F1F1;
 }
 
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .emotion-0:invalid:focus:not(:disabled) {
+      outline-style: auto;
+    }
+  }
+}
+
 .emotion-0:invalid:hover:not(:disabled) {
   border-color: #D60000;
   background-color: #F1F1F1;
diff --git a/src/theme/__tests__/__snapshots__/creator.test.ts.snap b/src/theme/__tests__/__snapshots__/creator.test.ts.snap
index 8306c5729f..aed528dfd6 100644
--- a/src/theme/__tests__/__snapshots__/creator.test.ts.snap
+++ b/src/theme/__tests__/__snapshots__/creator.test.ts.snap
@@ -483,7 +483,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -497,7 +501,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
index 650f5079c3..109750b09a 100644
--- a/src/theme/__tests__/__snapshots__/theme.test.ts.snap
+++ b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -488,7 +488,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -502,7 +506,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
-        "borderColor": "{{outlines.outlineColorDefault}}",
+        "borderColor": "{{colors.transparent}}",
+        "outlineColor": "{{outlines.outlineColorDefault}}",
+        "outlineStyle": "{{outlines.outlineStyleDefault}}",
+        "outlineWidth": "{{outlines.outlineWidthDefault}}",
+        "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactiveInput010}}",
@@ -4773,7 +4781,11 @@ Object {
     },
     "invalid:focus": Object {
       "backgroundColor": "{{colors.interactiveInput010}}",
-      "borderColor": "{{outlines.outlineColorDefault}}",
+      "borderColor": "{{colors.transparent}}",
+      "outlineColor": "{{outlines.outlineColorDefault}}",
+      "outlineStyle": "{{outlines.outlineStyleDefault}}",
+      "outlineWidth": "{{outlines.outlineWidthDefault}}",
+      "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
     },
     "invalid:hover": Object {
       "backgroundColor": "{{colors.interactiveInput010}}",
@@ -4787,7 +4799,11 @@ Object {
     },
     "valid:focus": Object {
       "backgroundColor": "{{colors.interactiveInput010}}",
-      "borderColor": "{{outlines.outlineColorDefault}}",
+      "borderColor": "{{colors.transparent}}",
+      "outlineColor": "{{outlines.outlineColorDefault}}",
+      "outlineStyle": "{{outlines.outlineStyleDefault}}",
+      "outlineWidth": "{{outlines.outlineWidthDefault}}",
+      "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
     },
     "valid:hover": Object {
       "backgroundColor": "{{colors.interactiveInput010}}",
diff --git a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap
index 5bceb79716..533e681139 100644
--- a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap
@@ -562,7 +562,11 @@ Object {
       },
       "invalid:focus": Object {
         "backgroundColor": "#F1F1F1",
-        "borderColor": "#3768FB",
+        "borderColor": "transparent",
+        "outlineColor": "#3768FB",
+        "outlineStyle": "solid",
+        "outlineWidth": "2px",
+        "safariOutlineStyle": "auto",
       },
       "invalid:hover": Object {
         "backgroundColor": "#F1F1F1",
@@ -576,7 +580,11 @@ Object {
       },
       "valid:focus": Object {
         "backgroundColor": "#F1F1F1",
-        "borderColor": "#3768FB",
+        "borderColor": "transparent",
+        "outlineColor": "#3768FB",
+        "outlineStyle": "solid",
+        "outlineWidth": "2px",
+        "safariOutlineStyle": "auto",
       },
       "valid:hover": Object {
         "backgroundColor": "#F1F1F1",

From a0d43471f7ecc6b88795ceafeeaf9e2cffe12e76 Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 10:18:14 +0300
Subject: [PATCH 07/12] feat(PPDSC-2244): fix coverage

---
 src/text-area/__tests__/text-area.test.tsx | 35 +++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/text-area/__tests__/text-area.test.tsx b/src/text-area/__tests__/text-area.test.tsx
index 7119753fff..65ea178346 100644
--- a/src/text-area/__tests__/text-area.test.tsx
+++ b/src/text-area/__tests__/text-area.test.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
+import {fireEvent} from '@testing-library/react';
 import {TextAreaProps, TextArea} from '..';
-import {renderToFragmentWithTheme} from '../../test/test-utils';
+import {
+  renderToFragmentWithTheme,
+  renderWithTheme,
+} from '../../test/test-utils';
 import {FormInput, FormInputTextArea} from '../../form/form-input';
 import {Form} from '../../form';
+import {EventTrigger, InstrumentationProvider} from '../../instrumentation';
 
 describe('TextArea', () => {
   test('render default', () => {
@@ -46,6 +51,34 @@ describe('TextArea', () => {
     });
   });
 
+  test('fires focus event onFocus with custom originator', async () => {
+    const mockFireEvent = jest.fn();
+    const customFocusEvent = jest.fn();
+
+    const props: TextAreaProps = {
+      eventContext: {event: 'other event data'},
+      eventOriginator: 'custom-originator',
+      onFocus: customFocusEvent,
+    };
+
+    const textArea = await renderWithTheme((() => (
+      <InstrumentationProvider fireEvent={mockFireEvent}>
+        <TextArea {...props} data-testid="text-area" />
+      </InstrumentationProvider>
+    )) as React.FC).findByTestId('text-area');
+
+    fireEvent.focus(textArea);
+
+    expect(mockFireEvent).toHaveBeenCalledWith({
+      originator: 'custom-originator',
+      trigger: EventTrigger.Focus,
+      context: {
+        event: 'other event data',
+      },
+    });
+    expect(customFocusEvent).toHaveBeenCalled();
+  });
+
   describe('FormInputTextArea', () => {
     test('render invalid form', () => {
       const Component = () => (

From 52c899cc1bd91f359804191846d4cc2591a50ebc Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 13:15:57 +0300
Subject: [PATCH 08/12] feat(PPDSC-2244): configure docs in storybook

---
 .storybook/main.js                            |  1 -
 .storybook/preview-head.html                  | 10 ++--
 .storybook/preview.js                         | 25 +++++++--
 src/test/storybook-comps.tsx                  | 54 ++-----------------
 src/text-area/__tests__/text-area.stories.tsx | 20 ++++---
 5 files changed, 42 insertions(+), 68 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 9995bf85f7..78f0ab203e 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -4,7 +4,6 @@ const toPath = _path => path.join(process.cwd(), _path);
 
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
-  // todo: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
   addons: [
     '@storybook/addon-links',
     {
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index f9d95dde60..6746759a80 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -269,7 +269,7 @@
   @font-face {
     font-family: 'The Sun';
     src: url('TheSun-HeavyNarrow.woff2') format('woff2'),
-    url('TheSun-HeavyNarrow.woff') format('woff');
+      url('TheSun-HeavyNarrow.woff') format('woff');
     font-style: normal;
     font-weight: 700;
     font-stretch: condensed;
@@ -279,7 +279,7 @@
   @font-face {
     font-family: 'The Sun';
     src: url('TheSun-Bold.woff2') format('woff2'),
-    url('TheSun-Bold.woff') format('woff');
+      url('TheSun-Bold.woff') format('woff');
     font-style: normal;
     font-weight: 700;
     font-display: block;
@@ -288,7 +288,7 @@
   @font-face {
     font-family: 'The Sun';
     src: url('TheSun-Medium.woff2') format('woff2'),
-    url('TheSun-Medium.woff') format('woff');
+      url('TheSun-Medium.woff') format('woff');
     font-style: normal;
     font-weight: 500;
     font-display: block;
@@ -332,4 +332,8 @@
     src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw9aXx-p7K4KLjztg.woff)
       format('woff');
   }
+
+  .docs-story .innerZoomElementWrapper > div > div > div {
+    position: relative;
+  }
 </style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 9b1c6c8607..64e7360281 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,15 @@
 import React from 'react';
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport';
 import {withPerformance} from 'storybook-addon-performance';
-
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs';
 import {NewsKitProvider, styled, getColorCssFromTheme} from '../src';
 import {getThemeObject} from '../src/test/theme-select-object';
 
@@ -49,9 +57,7 @@ const Background = ({children}) => (
   </BackgroundColor>
 );
 const LimitSizeDecorator = ({children}) => <Container>{children}</Container>;
-const MediaQueryProviderDecorator = ({children}) => (
-  <MediaQueryProvider>{children}</MediaQueryProvider>
-);
+
 const NoDecorator = ({children}) => <>{children}</>;
 
 export const parameters = {
@@ -89,6 +95,17 @@ export const parameters = {
       },
     ],
   },
+  docs: {
+    page: () => (
+      <>
+        <Title />
+        <Subtitle />
+        <Description />
+        <ArgsTable story={PRIMARY_STORY} />
+        <Stories includePrimary />
+      </>
+    ),
+  },
 };
 
 export const decorators = [
diff --git a/src/test/storybook-comps.tsx b/src/test/storybook-comps.tsx
index 92d64441f2..06e06993a7 100644
--- a/src/test/storybook-comps.tsx
+++ b/src/test/storybook-comps.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import {GridLayout} from '../grid-layout';
-import {LinkStandalone} from '../link';
 import {TextBlock} from '../text-block';
-import {TitleBar} from '../title-bar';
 import {Block} from '../block';
 import {MQ, styled, getColorCssFromTheme} from '../utils/style';
 
@@ -83,67 +81,25 @@ export const StorybookLabel = styled.label`
 `;
 
 type StorybookPageProps = {
-  title: string;
-  url?: string;
   children?: React.ReactNode;
 };
 
-export const StorybookPage = ({title, url, children}: StorybookPageProps) => {
-  // if (process.env.STORYBOOK_APPLITOOLS || window.STORYBOOK_APPLITOOLS) {
-  //   return (
-  //     <GridLayout rowGap="space020">
-  //       <div>{title}</div>
-
-  //       {children}
-  //     </GridLayout>
-  //   );
-  // }
-  const link = () =>
-    url ? <LinkStandalone href={url}>Documentation</LinkStandalone> : null;
-  return (
-    <GridLayout rowGap="space060">
-      <TitleBar
-        actionItem={link}
-        overrides={{
-          spaceInset: 'space000',
-          heading: {typographyPreset: 'editorialHeadline050'},
-        }}
-      >
-        {title}
-      </TitleBar>
-      {children}
-    </GridLayout>
-  );
-};
+export const StorybookPage = ({children}: StorybookPageProps) => (
+  <GridLayout rowGap="space060">{children}</GridLayout>
+);
 
 type StorybookCaseProps = {
   title: string;
   children?: React.ReactNode;
 };
 
-// TODO: this styling can be done via style preset
-const StyledBlock = styled(Block)`
-  border: 1px solid #c6c6c6;
-  box-shadow: 0px 2px 4px rgba(10, 10, 10, 0.08);
-  border-radius: 8px;
-`;
-
 export const StorybookCase = ({title, children}: StorybookCaseProps) => (
-  // if (process.env.STORYBOOK_APPLITOOLS) {
-  //   return (
-  //     <GridLayout rowGap="space010">
-  //       <div>{title}</div>
-  //       {children}
-  //     </GridLayout>
-  //   );
-  // }
-
   <GridLayout rowGap="space030">
     <TextBlock stylePreset="inkBase" typographyPreset="editorialHeadline010">
       {title.charAt(0).toUpperCase() + title.slice(1)}
     </TextBlock>
-    <StyledBlock paddingBlock="space050" paddingInline="space050">
+    <Block paddingBlock="space050" paddingInline="space050">
       {children}
-    </StyledBlock>
+    </Block>
   </GridLayout>
 );
diff --git a/src/text-area/__tests__/text-area.stories.tsx b/src/text-area/__tests__/text-area.stories.tsx
index 271ef6108d..c7a6240a2e 100644
--- a/src/text-area/__tests__/text-area.stories.tsx
+++ b/src/text-area/__tests__/text-area.stories.tsx
@@ -43,8 +43,6 @@ const textAreaCustomThemeObject: CreateThemeArgs = {
   },
 };
 
-const DOCS_URL = 'https://newskit.co.uk/components/text-area/';
-
 const sizes: TextFieldSize[] = ['small', 'medium', 'large'];
 const states: FormInputState[] = ['valid', 'invalid', 'disabled'];
 const resizes: TextAreaProps['resize'][] = [
@@ -55,7 +53,7 @@ const resizes: TextAreaProps['resize'][] = [
 ];
 
 export const TextAreaSizes = () => (
-  <StorybookPage title="TextArea Sizes" url={DOCS_URL}>
+  <StorybookPage>
     {sizes.map(size => (
       <StorybookCase title={size}>
         <Label size={size}>Label</Label>
@@ -67,7 +65,7 @@ export const TextAreaSizes = () => (
 );
 
 export const TextAreaStates = () => (
-  <StorybookPage title="TextArea States" url={DOCS_URL}>
+  <StorybookPage>
     <StorybookCase title="Base">
       <Label>Label</Label>
       <TextArea placeholder="Placeholder" />
@@ -94,7 +92,7 @@ export const TextAreaStates = () => (
 );
 
 export const TextAreaWidth = () => (
-  <StorybookPage title="TextArea Width" url={DOCS_URL}>
+  <StorybookPage>
     <StorybookCase title="default (100%)">
       <Label>Label</Label>
       <TextArea placeholder="Placeholder" />
@@ -110,7 +108,7 @@ export const TextAreaWidth = () => (
 );
 
 export const TextAreaHeight = () => (
-  <StorybookPage title="TextArea Height" url={DOCS_URL}>
+  <StorybookPage>
     <StorybookCase title="default">
       <Label>Label</Label>
       <TextArea placeholder="Placeholder" />
@@ -126,7 +124,7 @@ export const TextAreaHeight = () => (
 );
 
 export const TextAreaResize = () => (
-  <StorybookPage title="TextArea resize" url={DOCS_URL}>
+  <StorybookPage>
     {resizes.map(resize => (
       <StorybookCase title={resize as string}>
         <Label>Label</Label>
@@ -138,7 +136,7 @@ export const TextAreaResize = () => (
 );
 
 export const TextAreaRowsAndCols = () => (
-  <StorybookPage title="TextArea cols and rows" url={DOCS_URL}>
+  <StorybookPage>
     <StorybookCase title="cols and rows">
       <Label>Label</Label>
       <TextArea
@@ -153,7 +151,7 @@ export const TextAreaRowsAndCols = () => (
 );
 
 export const TextAreaOverrides = () => (
-  <StorybookPage title="TextArea overrides" url={DOCS_URL}>
+  <StorybookPage>
     <StorybookCase title="style">
       <Label>Label</Label>
       <TextArea
@@ -192,7 +190,7 @@ export const TextAreaOverrides = () => (
 );
 
 export const TextAreaValidation = () => (
-  <StorybookPage title="TextArea validation" url={DOCS_URL}>
+  <StorybookPage>
     <StorybookCase title="Form validation">
       <Form onSubmit={() => console.log('Form submitted')}>
         <FormInput
@@ -215,7 +213,7 @@ export const TextAreaValidation = () => (
 
 export default {
   title: 'NewsKit Light/text-area',
-  component: () => 'None',
+  component: TextArea,
   disabledRules: ['color-contrast'],
   decorators: [
     (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (

From c9c3351b7d1c8eb12febfdbe35b60777c55d76b6 Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 13:30:08 +0300
Subject: [PATCH 09/12] feat(PPDSC-2244): update stories

---
 src/test/storybook-comps.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/test/storybook-comps.tsx b/src/test/storybook-comps.tsx
index 06e06993a7..fcd4020698 100644
--- a/src/test/storybook-comps.tsx
+++ b/src/test/storybook-comps.tsx
@@ -85,7 +85,14 @@ type StorybookPageProps = {
 };
 
 export const StorybookPage = ({children}: StorybookPageProps) => (
-  <GridLayout rowGap="space060">{children}</GridLayout>
+  <GridLayout
+    rowGap="space080"
+    columnGap="space080"
+    columns="repeat(auto-fill, minmax(300px, 1fr))"
+    alignItems="start"
+  >
+    {children}
+  </GridLayout>
 );
 
 type StorybookCaseProps = {
@@ -94,12 +101,10 @@ type StorybookCaseProps = {
 };
 
 export const StorybookCase = ({title, children}: StorybookCaseProps) => (
-  <GridLayout rowGap="space030">
-    <TextBlock stylePreset="inkBase" typographyPreset="editorialHeadline010">
+  <GridLayout rowGap="space040">
+    <TextBlock stylePreset="inkBase" typographyPreset="editorialBody010">
       {title.charAt(0).toUpperCase() + title.slice(1)}
     </TextBlock>
-    <Block paddingBlock="space050" paddingInline="space050">
-      {children}
-    </Block>
+    <Block>{children}</Block>
   </GridLayout>
 );

From e2280d110e7e5a864fcafa74ad3a874c43886377 Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 15:15:07 +0300
Subject: [PATCH 10/12] feat(PPDSC-2244): enhance storybook docs page

---
 .storybook/preview.js                         | 36 +++++++++----------
 src/test/storybook-comps.tsx                  | 27 ++++++++++++++
 src/text-area/__tests__/text-area.stories.tsx | 10 +++++-
 3 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 64e7360281..2f3f236392 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,17 +1,16 @@
 import React from 'react';
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport';
 import {withPerformance} from 'storybook-addon-performance';
+import {Stories, DocsContext} from '@storybook/addon-docs';
 import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  PRIMARY_STORY,
-} from '@storybook/addon-docs';
-import {NewsKitProvider, styled, getColorCssFromTheme} from '../src';
+  NewsKitProvider,
+  styled,
+  getColorCssFromTheme,
+  newskitLightTheme,
+  ThemeProvider,
+} from '../src';
 import {getThemeObject} from '../src/test/theme-select-object';
+import {StoryDocsHeader} from '../src/test/storybook-comps';
 
 const unlimitedScenarios = [
   'grid',
@@ -96,15 +95,16 @@ export const parameters = {
     ],
   },
   docs: {
-    page: () => (
-      <>
-        <Title />
-        <Subtitle />
-        <Description />
-        <ArgsTable story={PRIMARY_STORY} />
-        <Stories includePrimary />
-      </>
-    ),
+    // We create a custom Docs page, using of our components for the header
+    page: () => {
+      const docsContext = React.useContext(DocsContext);
+      return (
+        <ThemeProvider theme={newskitLightTheme}>
+          <StoryDocsHeader context={docsContext} />
+          <Stories includePrimary />
+        </ThemeProvider>
+      );
+    },
   },
 };
 
diff --git a/src/test/storybook-comps.tsx b/src/test/storybook-comps.tsx
index fcd4020698..675e4c775c 100644
--- a/src/test/storybook-comps.tsx
+++ b/src/test/storybook-comps.tsx
@@ -3,6 +3,9 @@ import {GridLayout} from '../grid-layout';
 import {TextBlock} from '../text-block';
 import {Block} from '../block';
 import {MQ, styled, getColorCssFromTheme} from '../utils/style';
+import {get} from '../utils/get';
+import {LinkStandalone} from '../link';
+import {TitleBar} from '../title-bar';
 
 interface Props {
   children: React.ReactNode;
@@ -108,3 +111,27 @@ export const StorybookCase = ({title, children}: StorybookCaseProps) => (
     <Block>{children}</Block>
   </GridLayout>
 );
+
+export const StoryDocsHeader = ({context}: {context: Object}) => {
+  const autoTitle = get(context, 'title').replace('NewsKit Light/', '');
+  const title = get(context, 'parameters.nkDocs.title') || autoTitle;
+  const description = get(context, 'parameters.nkDocs.description');
+  const url = get(context, 'parameters.nkDocs.url');
+  const link = () =>
+    url ? <LinkStandalone href={url}>Documentation</LinkStandalone> : null;
+
+  return (
+    <GridLayout rowGap="space040" overrides={{marginBlockEnd: 'space060'}}>
+      <TitleBar
+        actionItem={link}
+        overrides={{
+          spaceInset: 'space000',
+          heading: {typographyPreset: 'editorialHeadline050'},
+        }}
+      >
+        {title}
+      </TitleBar>
+      {description && <TextBlock>{description}</TextBlock>}
+    </GridLayout>
+  );
+};
diff --git a/src/text-area/__tests__/text-area.stories.tsx b/src/text-area/__tests__/text-area.stories.tsx
index c7a6240a2e..c902bf6f8c 100644
--- a/src/text-area/__tests__/text-area.stories.tsx
+++ b/src/text-area/__tests__/text-area.stories.tsx
@@ -80,7 +80,7 @@ export const TextAreaStates = () => (
       <StorybookCase title={state as string}>
         <Label>Label</Label>
         <TextArea placeholder="Placeholder" state={state} />
-        <AssistiveText>Assistive Text</AssistiveText>
+        <AssistiveText state={state}>Assistive Text</AssistiveText>
       </StorybookCase>
     ))}
     <StorybookCase title="read only">
@@ -215,6 +215,14 @@ export default {
   title: 'NewsKit Light/text-area',
   component: TextArea,
   disabledRules: ['color-contrast'],
+  parameters: {
+    nkDocs: {
+      title: 'Text Area',
+      url: 'https://newskit.co.uk/components/text-area',
+      description:
+        'Text areas allow users to enter and edit multi-line text. They typically appear in forms.',
+    },
+  },
   decorators: [
     (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (
       <ThemeProvider

From e08b534ab52c59035c671423f5fd8dc59b6717dd Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 16:04:49 +0300
Subject: [PATCH 11/12] feat(PPDSC-2244): clean up

---
 .storybook/preview-head.html |  1 +
 src/text-area/defaults.ts    | 15 ---------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 6746759a80..8ee6cebaee 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -333,6 +333,7 @@
       format('woff');
   }
 
+  /* This is to override the size of Canvas in docs pages */
   .docs-story .innerZoomElementWrapper > div > div > div {
     position: relative;
   }
diff --git a/src/text-area/defaults.ts b/src/text-area/defaults.ts
index ce80afa287..fc0f7ecf1c 100644
--- a/src/text-area/defaults.ts
+++ b/src/text-area/defaults.ts
@@ -6,11 +6,6 @@ export default {
       height: 'sizing100',
       width: '100%',
       typographyPreset: 'utilityBody020',
-
-      // TODO: We should not use this
-      // spaceInset: 'spaceInset020',
-      // spaceStack: 'space020',
-
       paddingBlock: 'space020',
       paddingInline: 'space020',
       marginBlockEnd: 'space020',
@@ -21,11 +16,6 @@ export default {
       height: 'sizing110',
       width: '100%',
       typographyPreset: 'utilityBody020',
-
-      // TODO: We should not use this
-      // spaceInset: 'spaceInset030',
-      // spaceStack: 'space020',
-
       paddingBlock: 'space030',
       paddingInline: 'space030',
       marginBlockEnd: 'space020',
@@ -36,11 +26,6 @@ export default {
       height: 'sizing110',
       width: '100%',
       typographyPreset: 'utilityBody030',
-
-      // TODO: We should not use this
-      // spaceInset: 'spaceInset030',
-      // spaceStack: 'space020',
-
       paddingBlock: 'space030',
       paddingInline: 'space030',
       marginBlockEnd: 'space020',

From a2f307af9dd29b87a10198818556529b7fa6a497 Mon Sep 17 00:00:00 2001
From: Stoyan Delev <stoyan.delev@news.co.uk>
Date: Mon, 12 Sep 2022 16:38:59 +0300
Subject: [PATCH 12/12] feat(PPDSC-2244): update snapshots

---
 src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap | 4 ++--
 src/text-area/defaults.ts                                     | 4 ++--
 src/theme/__tests__/__snapshots__/theme.test.ts.snap          | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap b/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
index dd3b87bf6e..ab112754f7 100644
--- a/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
+++ b/src/text-area/__tests__/__snapshots__/text-area.test.tsx.snap
@@ -847,8 +847,8 @@ exports[`TextArea render size: large 1`] = `
   letter-spacing: 0;
   padding: 0.5px 0px;
   margin-block-end: 8px;
-  padding-inline: 12px;
-  padding-block: 12px;
+  padding-inline: 16px;
+  padding-block: 16px;
 }
 
 .emotion-0 svg {
diff --git a/src/text-area/defaults.ts b/src/text-area/defaults.ts
index fc0f7ecf1c..6af4c5c954 100644
--- a/src/text-area/defaults.ts
+++ b/src/text-area/defaults.ts
@@ -26,8 +26,8 @@ export default {
       height: 'sizing110',
       width: '100%',
       typographyPreset: 'utilityBody030',
-      paddingBlock: 'space030',
-      paddingInline: 'space030',
+      paddingBlock: 'space040',
+      paddingInline: 'space040',
       marginBlockEnd: 'space020',
     },
   },
diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
index 109750b09a..72062d4e7a 100644
--- a/src/theme/__tests__/__snapshots__/theme.test.ts.snap
+++ b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -2709,8 +2709,8 @@ Object {
       "height": "sizing110",
       "marginBlockEnd": "space020",
       "minHeight": "sizing090",
-      "paddingBlock": "space030",
-      "paddingInline": "space030",
+      "paddingBlock": "space040",
+      "paddingInline": "space040",
       "stylePreset": "inputField",
       "typographyPreset": "utilityBody030",
       "width": "100%",