From 4b44c8c68dfbc5604f4050cf4375c9366cd93014 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9ril?= <merildev@users.noreply.github.com>
Date: Mon, 21 Jan 2019 18:18:06 +0000
Subject: [PATCH] feat(input): allow refs for input components (#235)

---
 .eslintrc                                     |    2 +-
 .flowconfig                                   |    2 +-
 package.json                                  |   12 +-
 src/Atoms/Inputs/Checkbox.js                  |   21 +-
 src/Atoms/Inputs/Input.js                     |   14 +-
 src/Atoms/Inputs/Input.spec.js                |   26 +-
 src/Atoms/Inputs/Password.js                  |   11 +-
 src/Atoms/Inputs/Radio.js                     |   11 +-
 src/Atoms/Inputs/TextArea.js                  |   10 +-
 .../Inputs/__snapshots__/Input.spec.js.snap   | 2757 +++++-----
 .../__snapshots__/Password.spec.js.snap       | 4716 +++++++++--------
 .../__snapshots__/TextArea.spec.js.snap       | 1942 +++----
 src/Molecules/Dropdowns/SingleDropdown.js     |    9 +-
 .../__snapshots__/SingleDropdown.spec.js.snap | 3551 +++++++------
 .../__snapshots__/SearchBar.spec.js.snap      | 1369 ++---
 .../SearchBarUnderlined.spec.js.snap          | 1369 ++---
 16 files changed, 8302 insertions(+), 7520 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index df36a972..3cab041a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -25,7 +25,7 @@ settings:
     onlyFilesWithFlowAnnotation: true
   react:
     version: 16.7.0
-    flowVersion: 0.90.0
+    flowVersion: 0.91.0
 
 rules:
   react/sort-comp:
diff --git a/.flowconfig b/.flowconfig
index 4aa57f90..1df6272e 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -27,4 +27,4 @@ sketchy-null
 sketchy-number
 
 [version]
-^0.90.0
\ No newline at end of file
+^0.91.0
\ No newline at end of file
diff --git a/package.json b/package.json
index 7fbedd8f..6c0697cb 100644
--- a/package.json
+++ b/package.json
@@ -76,8 +76,8 @@
     "enzyme": "3.8.0",
     "enzyme-adapter-react-16": "1.7.1",
     "enzyme-to-json": "3.3.5",
-    "eslint": "5.12.0",
-    "eslint-config-prettier": "3.4.0",
+    "eslint": "5.12.1",
+    "eslint-config-prettier": "3.6.0",
     "eslint-config-standard": "12.0.0",
     "eslint-loader": "2.1.1",
     "eslint-plugin-babel": "5.3.0",
@@ -86,23 +86,23 @@
     "eslint-plugin-node": "8.0.1",
     "eslint-plugin-prettier": "3.0.1",
     "eslint-plugin-promise": "4.0.1",
-    "eslint-plugin-react": "7.12.3",
+    "eslint-plugin-react": "7.12.4",
     "eslint-plugin-standard": "4.0.0",
-    "flow-bin": "0.90.0",
+    "flow-bin": "0.91.0",
     "flow-copy-source": "2.0.2",
     "flow-coverage-report": "0.6.1",
     "husky": "1.3.1",
     "jest": "23.6.0",
     "jest-styled-components": "6.3.1",
     "lint-staged": "8.1.0",
-    "prettier": "1.15.3",
+    "prettier": "1.16.0",
     "prop-types": "15.6.2",
     "react": "16.7.0",
     "react-dom": "16.7.0",
     "rimraf": "2.6.3",
     "standard": "12.0.1",
     "styled-components": "4.1.3",
-    "stylelint": "9.10.0",
+    "stylelint": "9.10.1",
     "stylelint-config-recommended": "2.1.0",
     "stylelint-config-standard": "18.2.0",
     "stylelint-config-styled-components": "0.1.1",
diff --git a/src/Atoms/Inputs/Checkbox.js b/src/Atoms/Inputs/Checkbox.js
index d87beace..07eff448 100644
--- a/src/Atoms/Inputs/Checkbox.js
+++ b/src/Atoms/Inputs/Checkbox.js
@@ -89,11 +89,26 @@ export const CheckboxLabel = styled.label`
   }
 `
 
-const Checkbox = ({ className, input, ...rest }: PropsType) => (
+const Checkbox = ({
+  className,
+  forwardRef: ref,
+  input,
+  ...rest
+}: PropsType) => (
   <Wrapper className={className}>
-    <Input {...input} {...rest} id={toId(rest.name)} type="checkbox" />
+    <Input
+      {...input}
+      {...rest}
+      id={toId(rest.name)}
+      ref={ref}
+      type="checkbox"
+    />
     <CheckboxLabel htmlFor={toId(rest.name)}>{rest.label}</CheckboxLabel>
   </Wrapper>
 )
 
-export default Checkbox
+type RefPropsType = { ...PropsType }
+
+const CheckboxWithRef = (props, ref) => <Checkbox {...props} forwardRef={ref} />
+
+export default React.forwardRef<RefPropsType, _>(CheckboxWithRef)
diff --git a/src/Atoms/Inputs/Input.js b/src/Atoms/Inputs/Input.js
index db35020b..c2280dc4 100644
--- a/src/Atoms/Inputs/Input.js
+++ b/src/Atoms/Inputs/Input.js
@@ -27,6 +27,7 @@ export type PropsType = {
   +disabled?: boolean,
   +e2e?: string,
   +error?: string,
+  +forwardRef?: React.ElementRef<*>,
   +input?: {},
   +label?: string,
   +name?: string,
@@ -109,8 +110,9 @@ export const InputLabel = styled.label`
     props.disabled === true ? 'cursor: not-allowed' : ''};
 `
 
-const Input = ({
+export const Input = ({
   className = '',
+  forwardRef: ref,
   input,
   type,
   renderSuffix,
@@ -141,7 +143,7 @@ const Input = ({
             hasLabel && hasError ? ' - ' : ''
           }${rest.error || ''}`}
         </InputLabel>
-        <InputWrapper {...input} {...rest} type={type} />
+        <InputWrapper {...input} {...rest} ref={ref} type={type} />
         {renderSuffix && renderSuffix(rest.disabled)}
       </Container>
     )
@@ -149,7 +151,7 @@ const Input = ({
 
   return (
     <Container className={className} width={rest.width}>
-      <InputWrapper {...input} {...rest} type={type} />
+      <InputWrapper {...input} {...rest} ref={ref} type={type} />
       {renderSuffix && renderSuffix(rest.disabled)}
     </Container>
   )
@@ -184,4 +186,8 @@ Input.defaultProps = {
   width: '100%',
 }
 
-export default Input
+type RefPropsType = { ...PropsType }
+
+const InputWithRef = (props, ref) => <Input {...props} forwardRef={ref} />
+
+export default React.forwardRef<RefPropsType, _>(InputWithRef)
diff --git a/src/Atoms/Inputs/Input.spec.js b/src/Atoms/Inputs/Input.spec.js
index d32e494a..f7506eca 100644
--- a/src/Atoms/Inputs/Input.spec.js
+++ b/src/Atoms/Inputs/Input.spec.js
@@ -1,6 +1,7 @@
+import { mount } from 'enzyme'
 import React from 'react'
-import { mountWithTheme } from '../../Utils/testHelper'
 
+import { mountWithTheme } from '../../Utils/testHelper'
 import Input from './Input'
 
 describe('Input', () => {
@@ -63,4 +64,27 @@ describe('Input', () => {
 
     expect(tree.find(Input)).toMatchSnapshot()
   })
+
+  it('should accept ref', () => {
+    class MyComponent extends React.Component {
+      constructor(props) {
+        super(props)
+        this.myRef = React.createRef()
+        this.focus = this.focus.bind(this)
+      }
+
+      focus() {
+        this.myRef.current.focus()
+      }
+
+      render() {
+        return <Input id="TestRef" ref={this.myRef} />
+      }
+    }
+    const wrapper = mount(<MyComponent />)
+
+    expect(document.activeElement.type).toBeUndefined()
+    wrapper.instance().focus()
+    expect(document.activeElement.id).toEqual('TestRef')
+  })
 })
diff --git a/src/Atoms/Inputs/Password.js b/src/Atoms/Inputs/Password.js
index b497e109..6ddf39c1 100644
--- a/src/Atoms/Inputs/Password.js
+++ b/src/Atoms/Inputs/Password.js
@@ -3,7 +3,7 @@ import * as React from 'react'
 import styled from 'styled-components'
 
 import { fontSize, theme } from '../../Tools/interpolation'
-import Input, { type PropsType, type HtmlInputType } from './Input'
+import { Input, type PropsType, type HtmlInputType } from './Input'
 import { FarEye, FarEyeSlash } from '../Icons'
 
 const Switch = styled.span`
@@ -59,11 +59,12 @@ class Password extends React.Component<PropsType, StateType> {
 
   render() {
     const { type } = this.state
-    const { renderSuffix } = this.props
+    const { forwardRef: ref, renderSuffix } = this.props
 
     return (
       <PasswordInput
         {...this.props}
+        ref={ref}
         renderSuffix={renderSuffix || this.renderToggle}
         type={type}
       />
@@ -71,4 +72,8 @@ class Password extends React.Component<PropsType, StateType> {
   }
 }
 
-export default Password
+type RefPropsType = { ...PropsType }
+
+const PasswordWithRef = (props, ref) => <Password {...props} forwardRef={ref} />
+
+export default React.forwardRef<RefPropsType, _>(PasswordWithRef)
diff --git a/src/Atoms/Inputs/Radio.js b/src/Atoms/Inputs/Radio.js
index 8a55bfe4..9453a796 100644
--- a/src/Atoms/Inputs/Radio.js
+++ b/src/Atoms/Inputs/Radio.js
@@ -34,6 +34,7 @@ const Input = styled.input.attrs(injectE2E)`
   visibility: visible;
   white-space: nowrap;
   width: 1px;
+  user-select: none;
 
   &:focus ~ label ${RadioButton} {
     box-shadow: 0 0 0 2px ${theme('inputActiveColor')};
@@ -69,9 +70,9 @@ export const RadioLabel = styled.label`
   font-size: ${fontSize('md')};
 `
 
-const Radio = ({ className, input, ...rest }: PropsType) => (
+const Radio = ({ className, forwardRef: ref, input, ...rest }: PropsType) => (
   <Wrapper className={className}>
-    <Input {...input} {...rest} id={toId(rest.value)} type="radio" />
+    <Input {...input} {...rest} id={toId(rest.value)} ref={ref} type="radio" />
     <RadioLabel htmlFor={toId(rest.value)}>
       <RadioButton />
       {rest.label}
@@ -79,4 +80,8 @@ const Radio = ({ className, input, ...rest }: PropsType) => (
   </Wrapper>
 )
 
-export default Radio
+type RefPropsType = { ...PropsType }
+
+const RadioWithRef = (props, ref) => <Radio {...props} forwardRef={ref} />
+
+export default React.forwardRef<RefPropsType, _>(RadioWithRef)
diff --git a/src/Atoms/Inputs/TextArea.js b/src/Atoms/Inputs/TextArea.js
index 53df83cc..72efe9d6 100644
--- a/src/Atoms/Inputs/TextArea.js
+++ b/src/Atoms/Inputs/TextArea.js
@@ -62,7 +62,7 @@ const Wrapper = styled.textarea.attrs(injectE2E)`
   }
 `
 
-const TextArea = ({ input, ...rest }: PropsType) => {
+const TextArea = ({ forwardRef: ref, input, ...rest }: PropsType) => {
   const hasLabel = rest.label != null
   const hasError = rest.error != null
 
@@ -74,7 +74,7 @@ const TextArea = ({ input, ...rest }: PropsType) => {
             hasLabel && hasError ? ' - ' : ''
           }${rest.error || ''}`}
         </InputLabel>
-        <Wrapper {...input} {...rest} />
+        <Wrapper {...input} {...rest} ref={ref} />
       </Container>
     )
   }
@@ -99,4 +99,8 @@ TextArea.defaultProps = {
   width: '100%',
 }
 
-export default TextArea
+type RefPropsType = { ...PropsType }
+
+const TextAreaWithRef = (props, ref) => <TextArea {...props} forwardRef={ref} />
+
+export default React.forwardRef<RefPropsType, _>(TextAreaWithRef)
diff --git a/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap b/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap
index af6455a4..f32f268a 100644
--- a/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap
+++ b/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap
@@ -69,102 +69,104 @@ exports[`Input should render correctly 1`] = `
   font-size: 0.875rem;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
-  type="text"
-  width="100%"
->
-  <styled.div
-    className=""
+<ForwardRef(InputWithRef)>
+  <Input
+    disabled={false}
+    e2e="defaultInput"
+    forwardRef={null}
+    type="text"
     width="100%"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="100%"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.input
-          disabled={false}
-          e2e="defaultInput"
-          type="text"
+        <div
+          className="c0"
           width="100%"
         >
-          <StyledComponent
+          <styled.input
             disabled={false}
             e2e="defaultInput"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            type="text"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultInput"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -172,14 +174,14 @@ exports[`Input should render correctly 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -187,48 +189,49 @@ exports[`Input should render correctly 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            type="text"
-            width="100%"
-          >
-            <input
-              className="c1"
-              data-e2e="defaultInput"
-              disabled={false}
+              forwardedRef={null}
               type="text"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c1"
+                data-e2e="defaultInput"
+                disabled={false}
+                type="text"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with disabled 1`] = `
@@ -300,102 +303,106 @@ exports[`Input should render correctly with disabled 1`] = `
   font-size: 0.875rem;
 }
 
-<Input
+<ForwardRef(InputWithRef)
   disabled={true}
-  e2e="defaultInput"
-  type="text"
-  width="100%"
 >
-  <styled.div
-    className=""
+  <Input
+    disabled={true}
+    e2e="defaultInput"
+    forwardRef={null}
+    type="text"
     width="100%"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="100%"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.input
-          disabled={true}
-          e2e="defaultInput"
-          type="text"
+        <div
+          className="c0"
           width="100%"
         >
-          <StyledComponent
+          <styled.input
             disabled={true}
             e2e="defaultInput"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            type="text"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={true}
+              e2e="defaultInput"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -403,14 +410,14 @@ exports[`Input should render correctly with disabled 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -418,48 +425,49 @@ exports[`Input should render correctly with disabled 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            type="text"
-            width="100%"
-          >
-            <input
-              className="c1"
-              data-e2e="defaultInput"
-              disabled={true}
+              forwardedRef={null}
               type="text"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c1"
+                data-e2e="defaultInput"
+                disabled={true}
+                type="text"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with error="error" 1`] = `
@@ -538,158 +546,162 @@ exports[`Input should render correctly with error="error" 1`] = `
   color: #F36331;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(InputWithRef)
   error="error"
-  type="text"
-  width="100%"
 >
-  <styled.div
-    className=""
+  <Input
+    disabled={false}
+    e2e="defaultInput"
+    error="error"
+    forwardRef={null}
+    type="text"
     width="100%"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="100%"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          disabled={false}
-          error={true}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             disabled={false}
             error={true}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              disabled={false}
+              error={true}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
-              disabled={false}
+              forwardedRef={null}
             >
-              error
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.input
-          disabled={false}
-          e2e="defaultInput"
-          error="error"
-          type="text"
-          width="100%"
-        >
-          <StyledComponent
+              <label
+                className="c1"
+                disabled={false}
+              >
+                error
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.input
             disabled={false}
             e2e="defaultInput"
             error="error"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            type="text"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultInput"
+              error="error"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -697,14 +709,14 @@ exports[`Input should render correctly with error="error" 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -712,48 +724,49 @@ exports[`Input should render correctly with error="error" 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            type="text"
-            width="100%"
-          >
-            <input
-              className="c2"
-              data-e2e="defaultInput"
-              disabled={false}
+              forwardedRef={null}
               type="text"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c2"
+                data-e2e="defaultInput"
+                disabled={false}
+                type="text"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with label="label" 1`] = `
@@ -832,157 +845,161 @@ exports[`Input should render correctly with label="label" 1`] = `
   color: #757679;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(InputWithRef)
   label="label"
-  type="text"
-  width="100%"
 >
-  <styled.div
-    className=""
+  <Input
+    disabled={false}
+    e2e="defaultInput"
+    forwardRef={null}
+    label="label"
+    type="text"
     width="100%"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="100%"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          disabled={false}
-          error={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             disabled={false}
             error={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              disabled={false}
+              error={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
-              disabled={false}
+              forwardedRef={null}
             >
-              label
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.input
-          disabled={false}
-          e2e="defaultInput"
-          label="label"
-          type="text"
-          width="100%"
-        >
-          <StyledComponent
+              <label
+                className="c1"
+                disabled={false}
+              >
+                label
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.input
             disabled={false}
             e2e="defaultInput"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            label="label"
+            type="text"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultInput"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -990,14 +1007,14 @@ exports[`Input should render correctly with label="label" 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -1005,50 +1022,51 @@ exports[`Input should render correctly with label="label" 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            label="label"
-            type="text"
-            width="100%"
-          >
-            <input
-              className="c2"
-              data-e2e="defaultInput"
-              disabled={false}
+              forwardedRef={null}
               label="label"
               type="text"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c2"
+                data-e2e="defaultInput"
+                disabled={false}
+                label="label"
+                type="text"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with label="label" and disabled 1`] = `
@@ -1128,157 +1146,162 @@ exports[`Input should render correctly with label="label" and disabled 1`] = `
   cursor: not-allowed;
 }
 
-<Input
+<ForwardRef(InputWithRef)
   disabled={true}
-  e2e="defaultInput"
   label="label"
-  type="text"
-  width="100%"
 >
-  <styled.div
-    className=""
+  <Input
+    disabled={true}
+    e2e="defaultInput"
+    forwardRef={null}
+    label="label"
+    type="text"
     width="100%"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="100%"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          disabled={true}
-          error={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             disabled={true}
             error={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              disabled={true}
+              error={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
-              disabled={true}
+              forwardedRef={null}
             >
-              label
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.input
-          disabled={true}
-          e2e="defaultInput"
-          label="label"
-          type="text"
-          width="100%"
-        >
-          <StyledComponent
+              <label
+                className="c1"
+                disabled={true}
+              >
+                label
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.input
             disabled={true}
             e2e="defaultInput"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            label="label"
+            type="text"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={true}
+              e2e="defaultInput"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1286,14 +1309,14 @@ exports[`Input should render correctly with label="label" and disabled 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -1301,50 +1324,51 @@ exports[`Input should render correctly with label="label" and disabled 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            label="label"
-            type="text"
-            width="100%"
-          >
-            <input
-              className="c2"
-              data-e2e="defaultInput"
-              disabled={true}
+              forwardedRef={null}
               label="label"
               type="text"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c2"
+                data-e2e="defaultInput"
+                disabled={true}
+                label="label"
+                type="text"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with label="label" and error="error" 1`] = `
@@ -1423,160 +1447,165 @@ exports[`Input should render correctly with label="label" and error="error" 1`]
   color: #F36331;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(InputWithRef)
   error="error"
   label="label"
-  type="text"
-  width="100%"
 >
-  <styled.div
-    className=""
+  <Input
+    disabled={false}
+    e2e="defaultInput"
+    error="error"
+    forwardRef={null}
+    label="label"
+    type="text"
     width="100%"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="100%"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          disabled={false}
-          error={true}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             disabled={false}
             error={true}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              disabled={false}
+              error={true}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
-              disabled={false}
+              forwardedRef={null}
             >
-              label - error
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.input
-          disabled={false}
-          e2e="defaultInput"
-          error="error"
-          label="label"
-          type="text"
-          width="100%"
-        >
-          <StyledComponent
+              <label
+                className="c1"
+                disabled={false}
+              >
+                label - error
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.input
             disabled={false}
             e2e="defaultInput"
             error="error"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            label="label"
+            type="text"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultInput"
+              error="error"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1584,14 +1613,14 @@ exports[`Input should render correctly with label="label" and error="error" 1`]
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -1599,50 +1628,51 @@ exports[`Input should render correctly with label="label" and error="error" 1`]
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            label="label"
-            type="text"
-            width="100%"
-          >
-            <input
-              className="c2"
-              data-e2e="defaultInput"
-              disabled={false}
+              forwardedRef={null}
               label="label"
               type="text"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c2"
+                data-e2e="defaultInput"
+                disabled={false}
+                label="label"
+                type="text"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with type 1`] = `
@@ -1714,102 +1744,106 @@ exports[`Input should render correctly with type 1`] = `
   font-size: 0.875rem;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(InputWithRef)
   type="password"
-  width="100%"
 >
-  <styled.div
-    className=""
+  <Input
+    disabled={false}
+    e2e="defaultInput"
+    forwardRef={null}
+    type="password"
     width="100%"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="100%"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.input
-          disabled={false}
-          e2e="defaultInput"
-          type="password"
+        <div
+          className="c0"
           width="100%"
         >
-          <StyledComponent
+          <styled.input
             disabled={false}
             e2e="defaultInput"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            type="password"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultInput"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1817,14 +1851,14 @@ exports[`Input should render correctly with type 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -1832,48 +1866,49 @@ exports[`Input should render correctly with type 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            type="password"
-            width="100%"
-          >
-            <input
-              className="c1"
-              data-e2e="defaultInput"
-              disabled={false}
+              forwardedRef={null}
               type="password"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c1"
+                data-e2e="defaultInput"
+                disabled={false}
+                type="password"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with type="checkbox" 1`] = `
@@ -1967,47 +2002,59 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
   width: 9px;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(InputWithRef)
   type="checkbox"
-  width="100%"
 >
-  <Checkbox
-    className=""
+  <Input
     disabled={false}
     e2e="defaultInput"
+    forwardRef={null}
     type="checkbox"
     width="100%"
   >
-    <styled.div
+    <ForwardRef(CheckboxWithRef)
       className=""
+      disabled={false}
+      e2e="defaultInput"
+      type="checkbox"
+      width="100%"
     >
-      <StyledComponent
+      <Checkbox
         className=""
-        forwardedComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "attrs": Array [],
-            "componentStyle": ComponentStyle {
-              "componentId": "sc-bdVaJa",
-              "isStatic": false,
-              "lastClassName": "c0",
-              "rules": Array [
-                "
+        disabled={false}
+        e2e="defaultInput"
+        forwardRef={null}
+        type="checkbox"
+        width="100%"
+      >
+        <styled.div
+          className=""
+        >
+          <StyledComponent
+            className=""
+            forwardedComponent={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "attrs": Array [],
+                "componentStyle": ComponentStyle {
+                  "componentId": "sc-bdVaJa",
+                  "isStatic": false,
+                  "lastClassName": "c0",
+                  "rules": Array [
+                    "
   input:checked + label::before {
     background-color: ",
-                [Function],
-                ";
+                    [Function],
+                    ";
     border-color: ",
-                [Function],
-                ";
+                    [Function],
+                    ";
   }
 
   input:focus + label::before {
     box-shadow: 0 0 0 2px ",
-                [Function],
-                ";
+                    [Function],
+                    ";
     outline: 1px solid transparent;
   }
 
@@ -2019,59 +2066,59 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
 
   input:disabled + label::before {
     background-color: ",
-                [Function],
-                ";
+                    [Function],
+                    ";
     border: none;
   }
 
   input:disabled + label::after {
     border-left: 2px solid ",
-                [Function],
-                ";
+                    [Function],
+                    ";
     border-bottom: 2px solid ",
-                [Function],
-                ";
+                    [Function],
+                    ";
   }
 ",
-              ],
-            },
-            "displayName": "styled.div",
-            "foldedComponentIds": Array [],
-            "render": [Function],
-            "styledComponentId": "sc-bdVaJa",
-            "target": "div",
-            "toString": [Function],
-            "warnTooManyClasses": [Function],
-            "withComponent": [Function],
-          }
-        }
-        forwardedRef={null}
-      >
-        <div
-          className="c0"
-        >
-          <styled.input
-            disabled={false}
-            e2e="defaultInput"
-            id="-checkbox"
-            type="checkbox"
-            width="100%"
-          >
-            <StyledComponent
-              disabled={false}
-              e2e="defaultInput"
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [
-                    [Function],
                   ],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "sc-bwzfXH",
-                    "isStatic": false,
-                    "lastClassName": "c1",
-                    "rules": Array [
-                      "
+                },
+                "displayName": "styled.div",
+                "foldedComponentIds": Array [],
+                "render": [Function],
+                "styledComponentId": "sc-bdVaJa",
+                "target": "div",
+                "toString": [Function],
+                "warnTooManyClasses": [Function],
+                "withComponent": [Function],
+              }
+            }
+            forwardedRef={null}
+          >
+            <div
+              className="c0"
+            >
+              <styled.input
+                disabled={false}
+                e2e="defaultInput"
+                id="-checkbox"
+                type="checkbox"
+                width="100%"
+              >
+                <StyledComponent
+                  disabled={false}
+                  e2e="defaultInput"
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "attrs": Array [
+                        [Function],
+                      ],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "sc-bwzfXH",
+                        "isStatic": false,
+                        "lastClassName": "c1",
+                        "rules": Array [
+                          "
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -2083,47 +2130,47 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
   white-space: nowrap;
   width: 1px;
 ",
-                    ],
-                  },
-                  "displayName": "styled.input",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "sc-bwzfXH",
-                  "target": "input",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="-checkbox"
-              type="checkbox"
-              width="100%"
-            >
-              <input
-                className="c1"
-                data-e2e="defaultInput"
-                disabled={false}
-                id="-checkbox"
-                type="checkbox"
-                width="100%"
-              />
-            </StyledComponent>
-          </styled.input>
-          <styled.label
-            htmlFor="-checkbox"
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "sc-htpNat",
-                    "isStatic": false,
-                    "lastClassName": "c2",
-                    "rules": Array [
-                      "
+                        ],
+                      },
+                      "displayName": "styled.input",
+                      "foldedComponentIds": Array [],
+                      "render": [Function],
+                      "styledComponentId": "sc-bwzfXH",
+                      "target": "input",
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                  id="-checkbox"
+                  type="checkbox"
+                  width="100%"
+                >
+                  <input
+                    className="c1"
+                    data-e2e="defaultInput"
+                    disabled={false}
+                    id="-checkbox"
+                    type="checkbox"
+                    width="100%"
+                  />
+                </StyledComponent>
+              </styled.input>
+              <styled.label
+                htmlFor="-checkbox"
+              >
+                <StyledComponent
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "attrs": Array [],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "sc-htpNat",
+                        "isStatic": false,
+                        "lastClassName": "c2",
+                        "rules": Array [
+                          "
   position: relative;
   display: flex;
   align-items: center;
@@ -2131,19 +2178,19 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
   padding-left: 1.5rem;
   cursor: pointer;
   font-family: ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
   font-size: ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
 
   &::before {
     background-color: ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
     border: 1px solid ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
     box-sizing: border-box;
     content: '';
     height: 16px;
@@ -2157,11 +2204,11 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
   &::after {
     background: none;
     border-left: 2px solid ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
     border-bottom: 2px solid ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
     box-sizing: border-box;
     content: '';
     height: 5px;
@@ -2174,32 +2221,34 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
     width: 9px;
   }
 ",
-                    ],
-                  },
-                  "displayName": "styled.label",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "sc-htpNat",
-                  "target": "label",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              htmlFor="-checkbox"
-            >
-              <label
-                className="c2"
-                htmlFor="-checkbox"
-              />
-            </StyledComponent>
-          </styled.label>
-        </div>
-      </StyledComponent>
-    </styled.div>
-  </Checkbox>
-</Input>
+                        ],
+                      },
+                      "displayName": "styled.label",
+                      "foldedComponentIds": Array [],
+                      "render": [Function],
+                      "styledComponentId": "sc-htpNat",
+                      "target": "label",
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                  htmlFor="-checkbox"
+                >
+                  <label
+                    className="c2"
+                    htmlFor="-checkbox"
+                  />
+                </StyledComponent>
+              </styled.label>
+            </div>
+          </StyledComponent>
+        </styled.div>
+      </Checkbox>
+    </ForwardRef(CheckboxWithRef)>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with type="radio" 1`] = `
@@ -2232,6 +2281,10 @@ exports[`Input should render correctly with type="radio" 1`] = `
   visibility: visible;
   white-space: nowrap;
   width: 1px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .c1:focus ~ label .c3 {
@@ -2282,75 +2335,87 @@ exports[`Input should render correctly with type="radio" 1`] = `
   font-size: 1rem;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(InputWithRef)
   type="radio"
-  width="100%"
 >
-  <Radio
-    className=""
+  <Input
     disabled={false}
     e2e="defaultInput"
+    forwardRef={null}
     type="radio"
     width="100%"
   >
-    <styled.div
+    <ForwardRef(RadioWithRef)
       className=""
+      disabled={false}
+      e2e="defaultInput"
+      type="radio"
+      width="100%"
     >
-      <StyledComponent
+      <Radio
         className=""
-        forwardedComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "attrs": Array [],
-            "componentStyle": ComponentStyle {
-              "componentId": "sc-bxivhb",
-              "isStatic": true,
-              "lastClassName": "c0",
-              "rules": Array [
-                "
-  display: flex;
-",
-              ],
-            },
-            "displayName": "styled.div",
-            "foldedComponentIds": Array [],
-            "render": [Function],
-            "styledComponentId": "sc-bxivhb",
-            "target": "div",
-            "toString": [Function],
-            "warnTooManyClasses": [Function],
-            "withComponent": [Function],
-          }
-        }
-        forwardedRef={null}
+        disabled={false}
+        e2e="defaultInput"
+        forwardRef={null}
+        type="radio"
+        width="100%"
       >
-        <div
-          className="c0"
-        >
-          <styled.input
-            disabled={false}
-            e2e="defaultInput"
-            id="-checkbox"
-            type="radio"
-            width="100%"
-          >
-            <StyledComponent
-              disabled={false}
-              e2e="defaultInput"
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [
-                    [Function],
+        <styled.div
+          className=""
+        >
+          <StyledComponent
+            className=""
+            forwardedComponent={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "attrs": Array [],
+                "componentStyle": ComponentStyle {
+                  "componentId": "sc-bxivhb",
+                  "isStatic": true,
+                  "lastClassName": "c0",
+                  "rules": Array [
+                    "
+  display: flex;
+",
                   ],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "sc-EHOje",
-                    "isStatic": false,
-                    "lastClassName": "c1",
-                    "rules": Array [
-                      "
+                },
+                "displayName": "styled.div",
+                "foldedComponentIds": Array [],
+                "render": [Function],
+                "styledComponentId": "sc-bxivhb",
+                "target": "div",
+                "toString": [Function],
+                "warnTooManyClasses": [Function],
+                "withComponent": [Function],
+              }
+            }
+            forwardedRef={null}
+          >
+            <div
+              className="c0"
+            >
+              <styled.input
+                disabled={false}
+                e2e="defaultInput"
+                id="-checkbox"
+                type="radio"
+                width="100%"
+              >
+                <StyledComponent
+                  disabled={false}
+                  e2e="defaultInput"
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "attrs": Array [
+                        [Function],
+                      ],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "sc-EHOje",
+                        "isStatic": false,
+                        "lastClassName": "c1",
+                        "rules": Array [
+                          "
   position: absolute;
   border: 0;
   clip: rect(0, 0, 0, 0);
@@ -2361,25 +2426,26 @@ exports[`Input should render correctly with type="radio" 1`] = `
   visibility: visible;
   white-space: nowrap;
   width: 1px;
+  user-select: none;
 
   &:focus ~ label ",
-                      ".c3",
-                      " {
+                          ".c3",
+                          " {
     box-shadow: 0 0 0 2px ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
     outline: 1px solid transparent;
   }
 
   &:checked ~ label ",
-                      ".c3",
-                      " {
+                          ".c3",
+                          " {
     display: flex;
     align-items: center;
     justify-content: center;
     border-color: ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
 
     &::before {
       border-radius: 51%;
@@ -2389,52 +2455,52 @@ exports[`Input should render correctly with type="radio" 1`] = `
       width: 8px;
       position: relative;
       background: ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
     }
   }
 ",
-                    ],
-                  },
-                  "displayName": "styled.input",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "sc-EHOje",
-                  "target": "input",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="-checkbox"
-              type="radio"
-              width="100%"
-            >
-              <input
-                className="c1"
-                data-e2e="defaultInput"
-                disabled={false}
-                id="-checkbox"
-                type="radio"
-                width="100%"
-              />
-            </StyledComponent>
-          </styled.input>
-          <styled.label
-            htmlFor="-checkbox"
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "sc-bZQynM",
-                    "isStatic": false,
-                    "lastClassName": "c2",
-                    "rules": Array [
-                      "
+                        ],
+                      },
+                      "displayName": "styled.input",
+                      "foldedComponentIds": Array [],
+                      "render": [Function],
+                      "styledComponentId": "sc-EHOje",
+                      "target": "input",
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                  id="-checkbox"
+                  type="radio"
+                  width="100%"
+                >
+                  <input
+                    className="c1"
+                    data-e2e="defaultInput"
+                    disabled={false}
+                    id="-checkbox"
+                    type="radio"
+                    width="100%"
+                  />
+                </StyledComponent>
+              </styled.input>
+              <styled.label
+                htmlFor="-checkbox"
+              >
+                <StyledComponent
+                  forwardedComponent={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "attrs": Array [],
+                      "componentStyle": ComponentStyle {
+                        "componentId": "sc-bZQynM",
+                        "isStatic": false,
+                        "lastClassName": "c2",
+                        "rules": Array [
+                          "
   position: relative;
   left: 1px;
   display: flex;
@@ -2442,82 +2508,84 @@ exports[`Input should render correctly with type="radio" 1`] = `
   min-height: 1rem;
   cursor: pointer;
   font-family: ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
   font-size: ",
-                      [Function],
-                      ";
+                          [Function],
+                          ";
 ",
-                    ],
-                  },
-                  "displayName": "styled.label",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "sc-bZQynM",
-                  "target": "label",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              htmlFor="-checkbox"
-            >
-              <label
-                className="c2"
-                htmlFor="-checkbox"
-              >
-                <styled.span>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "c3",
-                          "isStatic": false,
-                          "lastClassName": "c4",
-                          "rules": Array [
-                            "
+                        ],
+                      },
+                      "displayName": "styled.label",
+                      "foldedComponentIds": Array [],
+                      "render": [Function],
+                      "styledComponentId": "sc-bZQynM",
+                      "target": "label",
+                      "toString": [Function],
+                      "warnTooManyClasses": [Function],
+                      "withComponent": [Function],
+                    }
+                  }
+                  forwardedRef={null}
+                  htmlFor="-checkbox"
+                >
+                  <label
+                    className="c2"
+                    htmlFor="-checkbox"
+                  >
+                    <styled.span>
+                      <StyledComponent
+                        forwardedComponent={
+                          Object {
+                            "$$typeof": Symbol(react.forward_ref),
+                            "attrs": Array [],
+                            "componentStyle": ComponentStyle {
+                              "componentId": "c3",
+                              "isStatic": false,
+                              "lastClassName": "c4",
+                              "rules": Array [
+                                "
   margin-right: 0.5rem;
   background: ",
-                            [Function],
-                            ";
+                                [Function],
+                                ";
   border: 2px solid ",
-                            [Function],
-                            ";
+                                [Function],
+                                ";
   box-sizing: border-box;
   border-radius: 50%;
   height: 16px;
   width: 16px;
 ",
-                          ],
-                        },
-                        "displayName": "styled.span",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "c3",
-                        "target": "span",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <span
-                      className="c3 c4"
-                    />
-                  </StyledComponent>
-                </styled.span>
-              </label>
-            </StyledComponent>
-          </styled.label>
-        </div>
-      </StyledComponent>
-    </styled.div>
-  </Radio>
-</Input>
+                              ],
+                            },
+                            "displayName": "styled.span",
+                            "foldedComponentIds": Array [],
+                            "render": [Function],
+                            "styledComponentId": "c3",
+                            "target": "span",
+                            "toString": [Function],
+                            "warnTooManyClasses": [Function],
+                            "withComponent": [Function],
+                          }
+                        }
+                        forwardedRef={null}
+                      >
+                        <span
+                          className="c3 c4"
+                        />
+                      </StyledComponent>
+                    </styled.span>
+                  </label>
+                </StyledComponent>
+              </styled.label>
+            </div>
+          </StyledComponent>
+        </styled.div>
+      </Radio>
+    </ForwardRef(RadioWithRef)>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
 
 exports[`Input should render correctly with width 1`] = `
@@ -2589,102 +2657,106 @@ exports[`Input should render correctly with width 1`] = `
   font-size: 0.875rem;
 }
 
-<Input
-  disabled={false}
-  e2e="defaultInput"
-  type="text"
+<ForwardRef(InputWithRef)
   width="200px"
 >
-  <styled.div
-    className=""
+  <Input
+    disabled={false}
+    e2e="defaultInput"
+    forwardRef={null}
+    type="text"
     width="200px"
   >
-    <StyledComponent
+    <styled.div
       className=""
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gzVnrw",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      width="200px"
+    >
+      <StyledComponent
+        className=""
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gzVnrw",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   position: relative;
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gzVnrw",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gzVnrw",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="200px"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="200px"
       >
-        <styled.input
-          disabled={false}
-          e2e="defaultInput"
-          type="text"
+        <div
+          className="c0"
           width="200px"
         >
-          <StyledComponent
+          <styled.input
             disabled={false}
             e2e="defaultInput"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-htoDjs",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            type="text"
+            width="200px"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultInput"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-htoDjs",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: block;
   height: 2.7rem;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -2692,14 +2764,14 @@ exports[`Input should render correctly with width 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -2707,46 +2779,47 @@ exports[`Input should render correctly with width 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.input",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-htoDjs",
-                "target": "input",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.input",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-htoDjs",
+                  "target": "input",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            type="text"
-            width="200px"
-          >
-            <input
-              className="c1"
-              data-e2e="defaultInput"
-              disabled={false}
+              forwardedRef={null}
               type="text"
               width="200px"
-            />
-          </StyledComponent>
-        </styled.input>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</Input>
+            >
+              <input
+                className="c1"
+                data-e2e="defaultInput"
+                disabled={false}
+                type="text"
+                width="200px"
+              />
+            </StyledComponent>
+          </styled.input>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </Input>
+</ForwardRef(InputWithRef)>
 `;
diff --git a/src/Atoms/Inputs/__snapshots__/Password.spec.js.snap b/src/Atoms/Inputs/__snapshots__/Password.spec.js.snap
index 9c8911df..4d2fe3e2 100644
--- a/src/Atoms/Inputs/__snapshots__/Password.spec.js.snap
+++ b/src/Atoms/Inputs/__snapshots__/Password.spec.js.snap
@@ -100,152 +100,157 @@ exports[`Password should render correctly 1`] = `
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
-  type="password"
-  width="100%"
->
-  <Styled(Input)
+<ForwardRef(PasswordWithRef)>
+  <Password
     disabled={false}
     e2e="defaultInput"
-    renderSuffix={[Function]}
+    forwardRef={null}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          forwardRef={null}
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                type="password"
+              <div
+                className="c0 c1"
                 width="100%"
               >
-                <StyledComponent
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -253,14 +258,14 @@ exports[`Password should render correctly 1`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -268,67 +273,67 @@ exports[`Password should render correctly 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c2"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c2"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -336,111 +341,112 @@ exports[`Password should render correctly 1`] = `
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c3"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEye
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c3"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEye)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEye
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-cqOjgt",
-                                "isStatic": false,
-                                "lastClassName": "c4",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEye)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-cqOjgt",
+                                  "isStatic": false,
+                                  "lastClassName": "c4",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEye)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-cqOjgt",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEye)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-cqOjgt",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEye
-                            className="c4"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEye
                               className="c4"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
-                              />
-                            </svg>
-                          </SvgFarEye>
-                        </StyledComponent>
-                      </Styled(SvgFarEye)>
-                    </FarEye>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c4"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
+                                />
+                              </svg>
+                            </SvgFarEye>
+                          </StyledComponent>
+                        </Styled(SvgFarEye)>
+                      </FarEye>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with disabled 1`] = `
@@ -516,152 +522,159 @@ exports[`Password should render correctly with disabled 1`] = `
   padding-right: 3rem;
 }
 
-<Password
+<ForwardRef(PasswordWithRef)
   disabled={true}
-  e2e="defaultInput"
-  type="password"
-  width="100%"
 >
-  <Styled(Input)
+  <Password
     disabled={true}
     e2e="defaultInput"
-    renderSuffix={[Function]}
+    forwardRef={null}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={true}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={true}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={true}
+          e2e="defaultInput"
+          forwardRef={null}
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.input
-                disabled={true}
-                e2e="defaultInput"
-                type="password"
+              <div
+                className="c0 c1"
                 width="100%"
               >
-                <StyledComponent
+                <styled.input
                   disabled={true}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={true}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -669,14 +682,14 @@ exports[`Password should render correctly with disabled 1`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -684,51 +697,52 @@ exports[`Password should render correctly with disabled 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c2"
-                    data-e2e="defaultInput"
-                    disabled={true}
+                    forwardedRef={null}
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                  >
+                    <input
+                      className="c2"
+                      data-e2e="defaultInput"
+                      disabled={true}
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with error="error" 1`] = `
@@ -838,211 +852,218 @@ exports[`Password should render correctly with error="error" 1`] = `
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(PasswordWithRef)
   error="error"
-  type="password"
-  width="100%"
 >
-  <Styled(Input)
+  <Password
     disabled={false}
     e2e="defaultInput"
     error="error"
-    renderSuffix={[Function]}
+    forwardRef={null}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
       error="error"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
         error="error"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          error="error"
+          forwardRef={null}
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.label
-                disabled={false}
-                error={true}
+              <div
+                className="c0 c1"
+                width="100%"
               >
-                <StyledComponent
+                <styled.label
                   disabled={false}
                   error={true}
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-dnqmqq",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                >
+                  <StyledComponent
+                    disabled={false}
+                    error={true}
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-dnqmqq",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding-bottom: 0.5rem;
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
 ",
-                        ],
-                      },
-                      "displayName": "styled.label",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-dnqmqq",
-                      "target": "label",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.label",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-dnqmqq",
+                        "target": "label",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                >
-                  <label
-                    className="c2"
-                    disabled={false}
+                    forwardedRef={null}
                   >
-                    error
-                  </label>
-                </StyledComponent>
-              </styled.label>
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                error="error"
-                type="password"
-                width="100%"
-              >
-                <StyledComponent
+                    <label
+                      className="c2"
+                      disabled={false}
+                    >
+                      error
+                    </label>
+                  </StyledComponent>
+                </styled.label>
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
                   error="error"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    error="error"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1050,14 +1071,14 @@ exports[`Password should render correctly with error="error" 1`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -1065,67 +1086,67 @@ exports[`Password should render correctly with error="error" 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c3"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c4",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c3"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c4",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -1133,111 +1154,112 @@ exports[`Password should render correctly with error="error" 1`] = `
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c4"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEye
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c4"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEye)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEye
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-cqOjgt",
-                                "isStatic": false,
-                                "lastClassName": "c5",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEye)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-cqOjgt",
+                                  "isStatic": false,
+                                  "lastClassName": "c5",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEye)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-cqOjgt",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEye)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-cqOjgt",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEye
-                            className="c5"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEye
                               className="c5"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
-                              />
-                            </svg>
-                          </SvgFarEye>
-                        </StyledComponent>
-                      </Styled(SvgFarEye)>
-                    </FarEye>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c5"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
+                                />
+                              </svg>
+                            </SvgFarEye>
+                          </StyledComponent>
+                        </Styled(SvgFarEye)>
+                      </FarEye>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with label="label" 1`] = `
@@ -1347,210 +1369,217 @@ exports[`Password should render correctly with label="label" 1`] = `
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(PasswordWithRef)
   label="label"
-  type="password"
-  width="100%"
 >
-  <Styled(Input)
+  <Password
     disabled={false}
     e2e="defaultInput"
+    forwardRef={null}
     label="label"
-    renderSuffix={[Function]}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       label="label"
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         label="label"
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          forwardRef={null}
+          label="label"
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.label
-                disabled={false}
-                error={false}
+              <div
+                className="c0 c1"
+                width="100%"
               >
-                <StyledComponent
+                <styled.label
                   disabled={false}
                   error={false}
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-dnqmqq",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                >
+                  <StyledComponent
+                    disabled={false}
+                    error={false}
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-dnqmqq",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding-bottom: 0.5rem;
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
 ",
-                        ],
-                      },
-                      "displayName": "styled.label",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-dnqmqq",
-                      "target": "label",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.label",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-dnqmqq",
+                        "target": "label",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                >
-                  <label
-                    className="c2"
-                    disabled={false}
+                    forwardedRef={null}
                   >
-                    label
-                  </label>
-                </StyledComponent>
-              </styled.label>
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                label="label"
-                type="password"
-                width="100%"
-              >
-                <StyledComponent
+                    <label
+                      className="c2"
+                      disabled={false}
+                    >
+                      label
+                    </label>
+                  </StyledComponent>
+                </styled.label>
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  label="label"
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1558,14 +1587,14 @@ exports[`Password should render correctly with label="label" 1`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -1573,69 +1602,69 @@ exports[`Password should render correctly with label="label" 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  label="label"
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c3"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     label="label"
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c4",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c3"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      label="label"
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c4",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -1643,111 +1672,112 @@ exports[`Password should render correctly with label="label" 1`] = `
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c4"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEye
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c4"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEye)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEye
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-cqOjgt",
-                                "isStatic": false,
-                                "lastClassName": "c5",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEye)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-cqOjgt",
+                                  "isStatic": false,
+                                  "lastClassName": "c5",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEye)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-cqOjgt",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEye)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-cqOjgt",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEye
-                            className="c5"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEye
                               className="c5"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
-                              />
-                            </svg>
-                          </SvgFarEye>
-                        </StyledComponent>
-                      </Styled(SvgFarEye)>
-                    </FarEye>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c5"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
+                                />
+                              </svg>
+                            </SvgFarEye>
+                          </StyledComponent>
+                        </Styled(SvgFarEye)>
+                      </FarEye>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with label="label" and disabled 1`] = `
@@ -1831,210 +1861,218 @@ exports[`Password should render correctly with label="label" and disabled 1`] =
   padding-right: 3rem;
 }
 
-<Password
+<ForwardRef(PasswordWithRef)
   disabled={true}
-  e2e="defaultInput"
   label="label"
-  type="password"
-  width="100%"
 >
-  <Styled(Input)
+  <Password
     disabled={true}
     e2e="defaultInput"
+    forwardRef={null}
     label="label"
-    renderSuffix={[Function]}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={true}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       label="label"
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={true}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         label="label"
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={true}
+          e2e="defaultInput"
+          forwardRef={null}
+          label="label"
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.label
-                disabled={true}
-                error={false}
+              <div
+                className="c0 c1"
+                width="100%"
               >
-                <StyledComponent
+                <styled.label
                   disabled={true}
                   error={false}
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-dnqmqq",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                >
+                  <StyledComponent
+                    disabled={true}
+                    error={false}
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-dnqmqq",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding-bottom: 0.5rem;
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
 ",
-                        ],
-                      },
-                      "displayName": "styled.label",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-dnqmqq",
-                      "target": "label",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.label",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-dnqmqq",
+                        "target": "label",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                >
-                  <label
-                    className="c2"
-                    disabled={true}
+                    forwardedRef={null}
                   >
-                    label
-                  </label>
-                </StyledComponent>
-              </styled.label>
-              <styled.input
-                disabled={true}
-                e2e="defaultInput"
-                label="label"
-                type="password"
-                width="100%"
-              >
-                <StyledComponent
+                    <label
+                      className="c2"
+                      disabled={true}
+                    >
+                      label
+                    </label>
+                  </StyledComponent>
+                </styled.label>
+                <styled.input
                   disabled={true}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  label="label"
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={true}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -2042,14 +2080,14 @@ exports[`Password should render correctly with label="label" and disabled 1`] =
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -2057,53 +2095,54 @@ exports[`Password should render correctly with label="label" and disabled 1`] =
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  label="label"
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c3"
-                    data-e2e="defaultInput"
-                    disabled={true}
+                    forwardedRef={null}
                     label="label"
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                  >
+                    <input
+                      className="c3"
+                      data-e2e="defaultInput"
+                      disabled={true}
+                      label="label"
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with label="label" and error="error" 1`] = `
@@ -2213,216 +2252,224 @@ exports[`Password should render correctly with label="label" and error="error" 1
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(PasswordWithRef)
   error="error"
   label="label"
-  type="password"
-  width="100%"
 >
-  <Styled(Input)
+  <Password
     disabled={false}
     e2e="defaultInput"
     error="error"
+    forwardRef={null}
     label="label"
-    renderSuffix={[Function]}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
       error="error"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       label="label"
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
         error="error"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         label="label"
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          error="error"
+          forwardRef={null}
+          label="label"
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.label
-                disabled={false}
-                error={true}
+              <div
+                className="c0 c1"
+                width="100%"
               >
-                <StyledComponent
+                <styled.label
                   disabled={false}
                   error={true}
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-dnqmqq",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                >
+                  <StyledComponent
+                    disabled={false}
+                    error={true}
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-dnqmqq",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding-bottom: 0.5rem;
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
 ",
-                        ],
-                      },
-                      "displayName": "styled.label",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-dnqmqq",
-                      "target": "label",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.label",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-dnqmqq",
+                        "target": "label",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                >
-                  <label
-                    className="c2"
-                    disabled={false}
+                    forwardedRef={null}
                   >
-                    label - error
-                  </label>
-                </StyledComponent>
-              </styled.label>
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                error="error"
-                label="label"
-                type="password"
-                width="100%"
-              >
-                <StyledComponent
+                    <label
+                      className="c2"
+                      disabled={false}
+                    >
+                      label - error
+                    </label>
+                  </StyledComponent>
+                </styled.label>
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
                   error="error"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  label="label"
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    error="error"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -2430,14 +2477,14 @@ exports[`Password should render correctly with label="label" and error="error" 1
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -2445,69 +2492,69 @@ exports[`Password should render correctly with label="label" and error="error" 1
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  label="label"
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c3"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     label="label"
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c4",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c3"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      label="label"
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c4",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -2515,111 +2562,112 @@ exports[`Password should render correctly with label="label" and error="error" 1
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c4"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEye
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c4"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEye)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEye
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-cqOjgt",
-                                "isStatic": false,
-                                "lastClassName": "c5",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEye)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-cqOjgt",
+                                  "isStatic": false,
+                                  "lastClassName": "c5",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEye)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-cqOjgt",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEye)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-cqOjgt",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEye
-                            className="c5"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEye
                               className="c5"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
-                              />
-                            </svg>
-                          </SvgFarEye>
-                        </StyledComponent>
-                      </Styled(SvgFarEye)>
-                    </FarEye>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c5"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
+                                />
+                              </svg>
+                            </SvgFarEye>
+                          </StyledComponent>
+                        </Styled(SvgFarEye)>
+                      </FarEye>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with switching its type 1`] = `
@@ -2722,152 +2770,157 @@ exports[`Password should render correctly with switching its type 1`] = `
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
-  type="password"
-  width="100%"
->
-  <Styled(Input)
+<ForwardRef(PasswordWithRef)>
+  <Password
     disabled={false}
     e2e="defaultInput"
-    renderSuffix={[Function]}
-    type="text"
+    forwardRef={null}
+    type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       renderSuffix={[Function]}
       type="text"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         renderSuffix={[Function]}
         type="text"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          forwardRef={null}
+          renderSuffix={[Function]}
+          type="text"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                type="text"
+              <div
+                className="c0 c1"
                 width="100%"
               >
-                <StyledComponent
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  type="text"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -2875,14 +2928,14 @@ exports[`Password should render correctly with switching its type 1`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -2890,67 +2943,67 @@ exports[`Password should render correctly with switching its type 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  type="text"
-                  width="100%"
-                >
-                  <input
-                    className="c2"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     type="text"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c2"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      type="text"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -2958,111 +3011,112 @@ exports[`Password should render correctly with switching its type 1`] = `
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c3"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEyeSlash
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c3"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEyeSlash)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEyeSlash
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-dmXgXv",
-                                "isStatic": false,
-                                "lastClassName": "c4",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEyeSlash)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-dmXgXv",
+                                  "isStatic": false,
+                                  "lastClassName": "c4",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEyeSlash)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-dmXgXv",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEyeSlash)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-dmXgXv",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEyeSlash
-                            className="c4"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEyeSlash
                               className="c4"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M272.702 359.139c-80.483-9.011-136.212-86.886-116.93-167.042l116.93 167.042zM288 392c-102.556 0-192.092-54.701-240-136 21.755-36.917 52.1-68.342 88.344-91.658l-27.541-39.343C67.001 152.234 31.921 188.741 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.004 376.006 168.14 440 288 440a332.89 332.89 0 0 0 39.648-2.367l-32.021-45.744A284.16 284.16 0 0 1 288 392zm281.354-111.631c-33.232 56.394-83.421 101.742-143.554 129.492l48.116 68.74c3.801 5.429 2.48 12.912-2.949 16.712L450.23 509.83c-5.429 3.801-12.912 2.48-16.712-2.949L102.084 33.399c-3.801-5.429-2.48-12.912 2.949-16.712L125.77 2.17c5.429-3.801 12.912-2.48 16.712 2.949l55.526 79.325C226.612 76.343 256.808 72 288 72c119.86 0 224.996 63.994 281.354 159.631a48.002 48.002 0 0 1 0 48.738zM528 256c-44.157-74.933-123.677-127.27-216.162-135.007C302.042 131.078 296 144.83 296 160c0 30.928 25.072 56 56 56s56-25.072 56-56l-.001-.042c30.632 57.277 16.739 130.26-36.928 171.719l26.695 38.135C452.626 346.551 498.308 306.386 528 256z"
-                              />
-                            </svg>
-                          </SvgFarEyeSlash>
-                        </StyledComponent>
-                      </Styled(SvgFarEyeSlash)>
-                    </FarEyeSlash>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c4"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M272.702 359.139c-80.483-9.011-136.212-86.886-116.93-167.042l116.93 167.042zM288 392c-102.556 0-192.092-54.701-240-136 21.755-36.917 52.1-68.342 88.344-91.658l-27.541-39.343C67.001 152.234 31.921 188.741 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.004 376.006 168.14 440 288 440a332.89 332.89 0 0 0 39.648-2.367l-32.021-45.744A284.16 284.16 0 0 1 288 392zm281.354-111.631c-33.232 56.394-83.421 101.742-143.554 129.492l48.116 68.74c3.801 5.429 2.48 12.912-2.949 16.712L450.23 509.83c-5.429 3.801-12.912 2.48-16.712-2.949L102.084 33.399c-3.801-5.429-2.48-12.912 2.949-16.712L125.77 2.17c5.429-3.801 12.912-2.48 16.712 2.949l55.526 79.325C226.612 76.343 256.808 72 288 72c119.86 0 224.996 63.994 281.354 159.631a48.002 48.002 0 0 1 0 48.738zM528 256c-44.157-74.933-123.677-127.27-216.162-135.007C302.042 131.078 296 144.83 296 160c0 30.928 25.072 56 56 56s56-25.072 56-56l-.001-.042c30.632 57.277 16.739 130.26-36.928 171.719l26.695 38.135C452.626 346.551 498.308 306.386 528 256z"
+                                />
+                              </svg>
+                            </SvgFarEyeSlash>
+                          </StyledComponent>
+                        </Styled(SvgFarEyeSlash)>
+                      </FarEyeSlash>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with switching its type 2`] = `
@@ -3165,152 +3219,157 @@ exports[`Password should render correctly with switching its type 2`] = `
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
-  type="password"
-  width="100%"
->
-  <Styled(Input)
+<ForwardRef(PasswordWithRef)>
+  <Password
     disabled={false}
     e2e="defaultInput"
-    renderSuffix={[Function]}
+    forwardRef={null}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          forwardRef={null}
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                type="password"
+              <div
+                className="c0 c1"
                 width="100%"
               >
-                <StyledComponent
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -3318,14 +3377,14 @@ exports[`Password should render correctly with switching its type 2`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -3333,67 +3392,67 @@ exports[`Password should render correctly with switching its type 2`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c2"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c2"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -3401,111 +3460,112 @@ exports[`Password should render correctly with switching its type 2`] = `
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c3"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEye
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c3"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEye)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEye
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-cqOjgt",
-                                "isStatic": false,
-                                "lastClassName": "c4",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEye)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-cqOjgt",
+                                  "isStatic": false,
+                                  "lastClassName": "c4",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEye)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-cqOjgt",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEye)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-cqOjgt",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEye
-                            className="c4"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEye
                               className="c4"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
-                              />
-                            </svg>
-                          </SvgFarEye>
-                        </StyledComponent>
-                      </Styled(SvgFarEye)>
-                    </FarEye>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c4"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
+                                />
+                              </svg>
+                            </SvgFarEye>
+                          </StyledComponent>
+                        </Styled(SvgFarEye)>
+                      </FarEye>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with type 1`] = `
@@ -3608,152 +3668,159 @@ exports[`Password should render correctly with type 1`] = `
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
+<ForwardRef(PasswordWithRef)
   type="password"
-  width="100%"
 >
-  <Styled(Input)
+  <Password
     disabled={false}
     e2e="defaultInput"
-    renderSuffix={[Function]}
+    forwardRef={null}
     type="password"
     width="100%"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       renderSuffix={[Function]}
       type="password"
       width="100%"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         renderSuffix={[Function]}
         type="password"
         width="100%"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          forwardRef={null}
+          renderSuffix={[Function]}
+          type="password"
           width="100%"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="100%"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="100%"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="100%"
             >
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                type="password"
+              <div
+                className="c0 c1"
                 width="100%"
               >
-                <StyledComponent
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  type="password"
+                  width="100%"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -3761,14 +3828,14 @@ exports[`Password should render correctly with type 1`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -3776,67 +3843,67 @@ exports[`Password should render correctly with type 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  type="password"
-                  width="100%"
-                >
-                  <input
-                    className="c2"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     type="password"
                     width="100%"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c2"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      type="password"
+                      width="100%"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -3844,111 +3911,112 @@ exports[`Password should render correctly with type 1`] = `
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c3"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEye
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c3"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEye)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEye
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-cqOjgt",
-                                "isStatic": false,
-                                "lastClassName": "c4",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEye)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-cqOjgt",
+                                  "isStatic": false,
+                                  "lastClassName": "c4",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEye)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-cqOjgt",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEye)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-cqOjgt",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEye
-                            className="c4"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEye
                               className="c4"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
-                              />
-                            </svg>
-                          </SvgFarEye>
-                        </StyledComponent>
-                      </Styled(SvgFarEye)>
-                    </FarEye>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c4"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
+                                />
+                              </svg>
+                            </SvgFarEye>
+                          </StyledComponent>
+                        </Styled(SvgFarEye)>
+                      </FarEye>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
 
 exports[`Password should render correctly with width 1`] = `
@@ -4051,152 +4119,159 @@ exports[`Password should render correctly with width 1`] = `
   padding-right: 3rem;
 }
 
-<Password
-  disabled={false}
-  e2e="defaultInput"
-  type="password"
+<ForwardRef(PasswordWithRef)
   width="200px"
 >
-  <Styled(Input)
+  <Password
     disabled={false}
     e2e="defaultInput"
-    renderSuffix={[Function]}
+    forwardRef={null}
     type="password"
     width="200px"
   >
-    <StyledComponent
+    <Styled(Input)
       disabled={false}
       e2e="defaultInput"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-bhxjyQ",
-            "isStatic": true,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
-  input {
-    padding-right: 3rem;
-  }
-",
-            ],
-          },
-          "displayName": "Styled(Input)",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-bhxjyQ",
-          "target": [Function],
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-          Symbol(Symbol.hasInstance): [Function],
-        }
-      }
-      forwardedRef={null}
+      forwardRef={null}
       renderSuffix={[Function]}
       type="password"
       width="200px"
     >
-      <Input
-        className="c0"
+      <StyledComponent
         disabled={false}
         e2e="defaultInput"
+        forwardRef={null}
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-bhxjyQ",
+              "isStatic": true,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
+  input {
+    padding-right: 3rem;
+  }
+",
+              ],
+            },
+            "displayName": "Styled(Input)",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-bhxjyQ",
+            "target": [Function],
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+            Symbol(Symbol.hasInstance): [Function],
+          }
+        }
+        forwardedRef={null}
         renderSuffix={[Function]}
         type="password"
         width="200px"
       >
-        <styled.div
+        <Input
           className="c0"
+          disabled={false}
+          e2e="defaultInput"
+          forwardRef={null}
+          renderSuffix={[Function]}
+          type="password"
           width="200px"
         >
-          <StyledComponent
+          <styled.div
             className="c0"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gzVnrw",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            width="200px"
+          >
+            <StyledComponent
+              className="c0"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gzVnrw",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   display: flex;
   flex-direction: column;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   position: relative;
 ",
-                  ],
-                },
-                "displayName": "styled.div",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gzVnrw",
-                "target": "div",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.div",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gzVnrw",
+                  "target": "div",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            width="200px"
-          >
-            <div
-              className="c0 c1"
+              forwardedRef={null}
               width="200px"
             >
-              <styled.input
-                disabled={false}
-                e2e="defaultInput"
-                type="password"
+              <div
+                className="c0 c1"
                 width="200px"
               >
-                <StyledComponent
+                <styled.input
                   disabled={false}
                   e2e="defaultInput"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        [Function],
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-htoDjs",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  type="password"
+                  width="200px"
+                >
+                  <StyledComponent
+                    disabled={false}
+                    e2e="defaultInput"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [
+                          [Function],
+                        ],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-htoDjs",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: block;
   height: 2.7rem;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-width: 1px;
   border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   border-style: solid;
   border-radius: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -4204,14 +4279,14 @@ exports[`Password should render correctly with width 1`] = `
 
   &:disabled {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     border-color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     background: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     cursor: not-allowed;
   }
 
@@ -4219,67 +4294,67 @@ exports[`Password should render correctly with width 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 
   &::placeholder {
     color: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
     font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.input",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-htoDjs",
-                      "target": "input",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.input",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-htoDjs",
+                        "target": "input",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  type="password"
-                  width="200px"
-                >
-                  <input
-                    className="c2"
-                    data-e2e="defaultInput"
-                    disabled={false}
+                    forwardedRef={null}
                     type="password"
                     width="200px"
-                  />
-                </StyledComponent>
-              </styled.input>
-              <styled.span
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-fjoeMy",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          "
+                  >
+                    <input
+                      className="c2"
+                      data-e2e="defaultInput"
+                      disabled={false}
+                      type="password"
+                      width="200px"
+                    />
+                  </StyledComponent>
+                </styled.input>
+                <styled.span
+                  onClick={[Function]}
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-fjoeMy",
+                          "isStatic": false,
+                          "lastClassName": "c3",
+                          "rules": Array [
+                            "
   position: absolute;
   right: 1rem;
   bottom: 0.5rem;
   font-family: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-size: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   font-weight: 600;
   user-select: none;
 
@@ -4287,109 +4362,110 @@ exports[`Password should render correctly with width 1`] = `
     text-decoration: underline;
   }
 ",
-                        ],
-                      },
-                      "displayName": "styled.span",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-fjoeMy",
-                      "target": "span",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.span",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-fjoeMy",
+                        "target": "span",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="c3"
+                    forwardedRef={null}
                     onClick={[Function]}
                   >
-                    <FarEye
-                      selectable={true}
-                      size="20px"
+                    <span
+                      className="c3"
+                      onClick={[Function]}
                     >
-                      <Styled(SvgFarEye)
-                        height="20px"
-                        selectable={1}
-                        width="20px"
+                      <FarEye
+                        selectable={true}
+                        size="20px"
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-cqOjgt",
-                                "isStatic": false,
-                                "lastClassName": "c4",
-                                "rules": Array [
-                                  "
+                        <Styled(SvgFarEye)
+                          height="20px"
+                          selectable={1}
+                          width="20px"
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-cqOjgt",
+                                  "isStatic": false,
+                                  "lastClassName": "c4",
+                                  "rules": Array [
+                                    "
     ",
-                                  "
+                                    "
   fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   cursor: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
 
   &:hover {
     fill: ",
-                                  [Function],
-                                  ";
+                                    [Function],
+                                    ";
   }
 ",
-                                  ";
+                                    ";
   ",
-                                ],
-                              },
-                              "displayName": "Styled(SvgFarEye)",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-cqOjgt",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                              Symbol(Symbol.hasInstance): [Function],
+                                  ],
+                                },
+                                "displayName": "Styled(SvgFarEye)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-cqOjgt",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                                Symbol(Symbol.hasInstance): [Function],
+                              }
                             }
-                          }
-                          forwardedRef={null}
-                          height="20px"
-                          selectable={1}
-                          width="20px"
-                        >
-                          <SvgFarEye
-                            className="c4"
+                            forwardedRef={null}
                             height="20px"
                             selectable={1}
                             width="20px"
                           >
-                            <svg
+                            <SvgFarEye
                               className="c4"
                               height="20px"
                               selectable={1}
-                              viewBox="0 0 576 512"
                               width="20px"
                             >
-                              <path
-                                d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
-                              />
-                            </svg>
-                          </SvgFarEye>
-                        </StyledComponent>
-                      </Styled(SvgFarEye)>
-                    </FarEye>
-                  </span>
-                </StyledComponent>
-              </styled.span>
-            </div>
-          </StyledComponent>
-        </styled.div>
-      </Input>
-    </StyledComponent>
-  </Styled(Input)>
-</Password>
+                              <svg
+                                className="c4"
+                                height="20px"
+                                selectable={1}
+                                viewBox="0 0 576 512"
+                                width="20px"
+                              >
+                                <path
+                                  d="M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z"
+                                />
+                              </svg>
+                            </SvgFarEye>
+                          </StyledComponent>
+                        </Styled(SvgFarEye)>
+                      </FarEye>
+                    </span>
+                  </StyledComponent>
+                </styled.span>
+              </div>
+            </StyledComponent>
+          </styled.div>
+        </Input>
+      </StyledComponent>
+    </Styled(Input)>
+  </Password>
+</ForwardRef(PasswordWithRef)>
 `;
diff --git a/src/Atoms/Inputs/__snapshots__/TextArea.spec.js.snap b/src/Atoms/Inputs/__snapshots__/TextArea.spec.js.snap
index da544931..a882c7e1 100644
--- a/src/Atoms/Inputs/__snapshots__/TextArea.spec.js.snap
+++ b/src/Atoms/Inputs/__snapshots__/TextArea.spec.js.snap
@@ -57,62 +57,64 @@ exports[`TextArea should render correctly 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
-  height="100px"
-  width="100%"
->
-  <styled.textarea
+<ForwardRef(TextAreaWithRef)>
+  <TextArea
     disabled={false}
     e2e="defaultTextArea"
+    forwardRef={null}
     height="100px"
     width="100%"
   >
-    <StyledComponent
+    <styled.textarea
       disabled={false}
       e2e="defaultTextArea"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [
-            [Function],
-          ],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gZMcBi",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      height="100px"
+      width="100%"
+    >
+      <StyledComponent
+        disabled={false}
+        e2e="defaultTextArea"
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [
+              [Function],
+            ],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gZMcBi",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: block;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   height: ",
-              [Function],
-              ";
+                [Function],
+                ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-              [Function],
-              ";
+                [Function],
+                ";
   font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-width: 1px;
   border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-style: solid;
   border-radius: ",
-              [Function],
-              ";
+                [Function],
+                ";
   background-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -120,14 +122,14 @@ exports[`TextArea should render correctly 1`] = `
 
   &:disabled {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     background: ",
-              [Function],
-              ";
+                [Function],
+                ";
     cursor: not-allowed;
   }
 
@@ -135,45 +137,46 @@ exports[`TextArea should render correctly 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 
   &::placeholder {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 ",
-            ],
-          },
-          "displayName": "styled.textarea",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gZMcBi",
-          "target": "textarea",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.textarea",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gZMcBi",
+            "target": "textarea",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      height="100px"
-      width="100%"
-    >
-      <textarea
-        className="c0"
-        data-e2e="defaultTextArea"
-        disabled={false}
+        forwardedRef={null}
         height="100px"
         width="100%"
-      />
-    </StyledComponent>
-  </styled.textarea>
-</TextArea>
+      >
+        <textarea
+          className="c0"
+          data-e2e="defaultTextArea"
+          disabled={false}
+          height="100px"
+          width="100%"
+        />
+      </StyledComponent>
+    </styled.textarea>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with disabled 1`] = `
@@ -233,62 +236,66 @@ exports[`TextArea should render correctly with disabled 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
+<ForwardRef(TextAreaWithRef)
   disabled={true}
-  e2e="defaultTextArea"
-  height="100px"
-  width="100%"
 >
-  <styled.textarea
+  <TextArea
     disabled={true}
     e2e="defaultTextArea"
+    forwardRef={null}
     height="100px"
     width="100%"
   >
-    <StyledComponent
+    <styled.textarea
       disabled={true}
       e2e="defaultTextArea"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [
-            [Function],
-          ],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gZMcBi",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      height="100px"
+      width="100%"
+    >
+      <StyledComponent
+        disabled={true}
+        e2e="defaultTextArea"
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [
+              [Function],
+            ],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gZMcBi",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: block;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   height: ",
-              [Function],
-              ";
+                [Function],
+                ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-              [Function],
-              ";
+                [Function],
+                ";
   font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-width: 1px;
   border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-style: solid;
   border-radius: ",
-              [Function],
-              ";
+                [Function],
+                ";
   background-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -296,14 +303,14 @@ exports[`TextArea should render correctly with disabled 1`] = `
 
   &:disabled {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     background: ",
-              [Function],
-              ";
+                [Function],
+                ";
     cursor: not-allowed;
   }
 
@@ -311,45 +318,46 @@ exports[`TextArea should render correctly with disabled 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 
   &::placeholder {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 ",
-            ],
-          },
-          "displayName": "styled.textarea",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gZMcBi",
-          "target": "textarea",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.textarea",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gZMcBi",
+            "target": "textarea",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      height="100px"
-      width="100%"
-    >
-      <textarea
-        className="c0"
-        data-e2e="defaultTextArea"
-        disabled={true}
+        forwardedRef={null}
         height="100px"
         width="100%"
-      />
-    </StyledComponent>
-  </styled.textarea>
-</TextArea>
+      >
+        <textarea
+          className="c0"
+          data-e2e="defaultTextArea"
+          disabled={true}
+          height="100px"
+          width="100%"
+        />
+      </StyledComponent>
+    </styled.textarea>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with e2e 1`] = `
@@ -409,62 +417,66 @@ exports[`TextArea should render correctly with e2e 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
+<ForwardRef(TextAreaWithRef)
   e2e="E2ELabel"
-  height="100px"
-  width="100%"
 >
-  <styled.textarea
+  <TextArea
     disabled={false}
     e2e="E2ELabel"
+    forwardRef={null}
     height="100px"
     width="100%"
   >
-    <StyledComponent
+    <styled.textarea
       disabled={false}
       e2e="E2ELabel"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [
-            [Function],
-          ],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gZMcBi",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      height="100px"
+      width="100%"
+    >
+      <StyledComponent
+        disabled={false}
+        e2e="E2ELabel"
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [
+              [Function],
+            ],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gZMcBi",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: block;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   height: ",
-              [Function],
-              ";
+                [Function],
+                ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-              [Function],
-              ";
+                [Function],
+                ";
   font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-width: 1px;
   border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-style: solid;
   border-radius: ",
-              [Function],
-              ";
+                [Function],
+                ";
   background-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -472,14 +484,14 @@ exports[`TextArea should render correctly with e2e 1`] = `
 
   &:disabled {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     background: ",
-              [Function],
-              ";
+                [Function],
+                ";
     cursor: not-allowed;
   }
 
@@ -487,45 +499,46 @@ exports[`TextArea should render correctly with e2e 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 
   &::placeholder {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 ",
-            ],
-          },
-          "displayName": "styled.textarea",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gZMcBi",
-          "target": "textarea",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.textarea",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gZMcBi",
+            "target": "textarea",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      height="100px"
-      width="100%"
-    >
-      <textarea
-        className="c0"
-        data-e2e="E2ELabel"
-        disabled={false}
+        forwardedRef={null}
         height="100px"
         width="100%"
-      />
-    </StyledComponent>
-  </styled.textarea>
-</TextArea>
+      >
+        <textarea
+          className="c0"
+          data-e2e="E2ELabel"
+          disabled={false}
+          height="100px"
+          width="100%"
+        />
+      </StyledComponent>
+    </styled.textarea>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with error="error" 1`] = `
@@ -603,157 +616,161 @@ exports[`TextArea should render correctly with error="error" 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
+<ForwardRef(TextAreaWithRef)
   error="error"
-  height="100px"
-  width="100%"
 >
-  <styled.div
+  <TextArea
+    disabled={false}
+    e2e="defaultTextArea"
+    error="error"
+    forwardRef={null}
+    height="100px"
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          disabled={false}
-          error={true}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             disabled={false}
             error={true}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              disabled={false}
+              error={true}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
-              disabled={false}
+              forwardedRef={null}
             >
-              error
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.textarea
-          disabled={false}
-          e2e="defaultTextArea"
-          error="error"
-          height="100px"
-          width="100%"
-        >
-          <StyledComponent
+              <label
+                className="c1"
+                disabled={false}
+              >
+                error
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.textarea
             disabled={false}
             e2e="defaultTextArea"
             error="error"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            height="100px"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultTextArea"
+              error="error"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   display: block;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   height: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -761,14 +778,14 @@ exports[`TextArea should render correctly with error="error" 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -776,48 +793,49 @@ exports[`TextArea should render correctly with error="error" 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.textarea",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "textarea",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.textarea",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "textarea",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            height="100px"
-            width="100%"
-          >
-            <textarea
-              className="c2"
-              data-e2e="defaultTextArea"
-              disabled={false}
+              forwardedRef={null}
               height="100px"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.textarea>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</TextArea>
+            >
+              <textarea
+                className="c2"
+                data-e2e="defaultTextArea"
+                disabled={false}
+                height="100px"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.textarea>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with height 1`] = `
@@ -877,62 +895,66 @@ exports[`TextArea should render correctly with height 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
+<ForwardRef(TextAreaWithRef)
   height="200px"
-  width="100%"
 >
-  <styled.textarea
+  <TextArea
     disabled={false}
     e2e="defaultTextArea"
+    forwardRef={null}
     height="200px"
     width="100%"
   >
-    <StyledComponent
+    <styled.textarea
       disabled={false}
       e2e="defaultTextArea"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [
-            [Function],
-          ],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gZMcBi",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      height="200px"
+      width="100%"
+    >
+      <StyledComponent
+        disabled={false}
+        e2e="defaultTextArea"
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [
+              [Function],
+            ],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gZMcBi",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: block;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   height: ",
-              [Function],
-              ";
+                [Function],
+                ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-              [Function],
-              ";
+                [Function],
+                ";
   font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-width: 1px;
   border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-style: solid;
   border-radius: ",
-              [Function],
-              ";
+                [Function],
+                ";
   background-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -940,14 +962,14 @@ exports[`TextArea should render correctly with height 1`] = `
 
   &:disabled {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     background: ",
-              [Function],
-              ";
+                [Function],
+                ";
     cursor: not-allowed;
   }
 
@@ -955,45 +977,46 @@ exports[`TextArea should render correctly with height 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 
   &::placeholder {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 ",
-            ],
-          },
-          "displayName": "styled.textarea",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gZMcBi",
-          "target": "textarea",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.textarea",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gZMcBi",
+            "target": "textarea",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      height="200px"
-      width="100%"
-    >
-      <textarea
-        className="c0"
-        data-e2e="defaultTextArea"
-        disabled={false}
+        forwardedRef={null}
         height="200px"
         width="100%"
-      />
-    </StyledComponent>
-  </styled.textarea>
-</TextArea>
+      >
+        <textarea
+          className="c0"
+          data-e2e="defaultTextArea"
+          disabled={false}
+          height="200px"
+          width="100%"
+        />
+      </StyledComponent>
+    </styled.textarea>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with label="label" 1`] = `
@@ -1071,156 +1094,160 @@ exports[`TextArea should render correctly with label="label" 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
-  height="100px"
+<ForwardRef(TextAreaWithRef)
   label="label"
-  width="100%"
 >
-  <styled.div
+  <TextArea
+    disabled={false}
+    e2e="defaultTextArea"
+    forwardRef={null}
+    height="100px"
+    label="label"
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          disabled={false}
-          error={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             disabled={false}
             error={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              disabled={false}
+              error={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
-              disabled={false}
+              forwardedRef={null}
             >
-              label
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.textarea
-          disabled={false}
-          e2e="defaultTextArea"
-          height="100px"
-          label="label"
-          width="100%"
-        >
-          <StyledComponent
+              <label
+                className="c1"
+                disabled={false}
+              >
+                label
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.textarea
             disabled={false}
             e2e="defaultTextArea"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            height="100px"
+            label="label"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultTextArea"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   display: block;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   height: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -1228,14 +1255,14 @@ exports[`TextArea should render correctly with label="label" 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -1243,50 +1270,51 @@ exports[`TextArea should render correctly with label="label" 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.textarea",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "textarea",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.textarea",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "textarea",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            height="100px"
-            label="label"
-            width="100%"
-          >
-            <textarea
-              className="c2"
-              data-e2e="defaultTextArea"
-              disabled={false}
+              forwardedRef={null}
               height="100px"
               label="label"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.textarea>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</TextArea>
+            >
+              <textarea
+                className="c2"
+                data-e2e="defaultTextArea"
+                disabled={false}
+                height="100px"
+                label="label"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.textarea>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with label="label" and error="error" 1`] = `
@@ -1364,159 +1392,164 @@ exports[`TextArea should render correctly with label="label" and error="error" 1
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
+<ForwardRef(TextAreaWithRef)
   error="error"
-  height="100px"
   label="label"
-  width="100%"
 >
-  <styled.div
+  <TextArea
+    disabled={false}
+    e2e="defaultTextArea"
+    error="error"
+    forwardRef={null}
+    height="100px"
+    label="label"
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: flex;
   flex-direction: column;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          disabled={false}
-          error={true}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             disabled={false}
             error={true}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              disabled={false}
+              error={true}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
-              disabled={false}
+              forwardedRef={null}
             >
-              label - error
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.textarea
-          disabled={false}
-          e2e="defaultTextArea"
-          error="error"
-          height="100px"
-          label="label"
-          width="100%"
-        >
-          <StyledComponent
+              <label
+                className="c1"
+                disabled={false}
+              >
+                label - error
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.textarea
             disabled={false}
             e2e="defaultTextArea"
             error="error"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [
-                  [Function],
-                ],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            height="100px"
+            label="label"
+            width="100%"
+          >
+            <StyledComponent
+              disabled={false}
+              e2e="defaultTextArea"
+              error="error"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [
+                    [Function],
+                  ],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   display: block;
   width: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   height: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -1524,14 +1557,14 @@ exports[`TextArea should render correctly with label="label" and error="error" 1
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
@@ -1539,50 +1572,51 @@ exports[`TextArea should render correctly with label="label" and error="error" 1
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &::placeholder {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.textarea",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "textarea",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.textarea",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "textarea",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            height="100px"
-            label="label"
-            width="100%"
-          >
-            <textarea
-              className="c2"
-              data-e2e="defaultTextArea"
-              disabled={false}
+              forwardedRef={null}
               height="100px"
               label="label"
               width="100%"
-            />
-          </StyledComponent>
-        </styled.textarea>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</TextArea>
+            >
+              <textarea
+                className="c2"
+                data-e2e="defaultTextArea"
+                disabled={false}
+                height="100px"
+                label="label"
+                width="100%"
+              />
+            </StyledComponent>
+          </styled.textarea>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with name 1`] = `
@@ -1642,64 +1676,68 @@ exports[`TextArea should render correctly with name 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
-  height="100px"
+<ForwardRef(TextAreaWithRef)
   name="mytextarea"
-  width="100%"
 >
-  <styled.textarea
+  <TextArea
     disabled={false}
     e2e="defaultTextArea"
+    forwardRef={null}
     height="100px"
     name="mytextarea"
     width="100%"
   >
-    <StyledComponent
+    <styled.textarea
       disabled={false}
       e2e="defaultTextArea"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [
-            [Function],
-          ],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gZMcBi",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      height="100px"
+      name="mytextarea"
+      width="100%"
+    >
+      <StyledComponent
+        disabled={false}
+        e2e="defaultTextArea"
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [
+              [Function],
+            ],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gZMcBi",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: block;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   height: ",
-              [Function],
-              ";
+                [Function],
+                ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-              [Function],
-              ";
+                [Function],
+                ";
   font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-width: 1px;
   border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-style: solid;
   border-radius: ",
-              [Function],
-              ";
+                [Function],
+                ";
   background-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -1707,14 +1745,14 @@ exports[`TextArea should render correctly with name 1`] = `
 
   &:disabled {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     background: ",
-              [Function],
-              ";
+                [Function],
+                ";
     cursor: not-allowed;
   }
 
@@ -1722,47 +1760,48 @@ exports[`TextArea should render correctly with name 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 
   &::placeholder {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 ",
-            ],
-          },
-          "displayName": "styled.textarea",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gZMcBi",
-          "target": "textarea",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.textarea",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gZMcBi",
+            "target": "textarea",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      height="100px"
-      name="mytextarea"
-      width="100%"
-    >
-      <textarea
-        className="c0"
-        data-e2e="defaultTextArea"
-        disabled={false}
+        forwardedRef={null}
         height="100px"
         name="mytextarea"
         width="100%"
-      />
-    </StyledComponent>
-  </styled.textarea>
-</TextArea>
+      >
+        <textarea
+          className="c0"
+          data-e2e="defaultTextArea"
+          disabled={false}
+          height="100px"
+          name="mytextarea"
+          width="100%"
+        />
+      </StyledComponent>
+    </styled.textarea>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with value 1`] = `
@@ -1822,66 +1861,71 @@ exports[`TextArea should render correctly with value 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
-  height="100px"
+<ForwardRef(TextAreaWithRef)
   onChange={[Function]}
   value="Hello dear friend"
-  width="100%"
 >
-  <styled.textarea
+  <TextArea
     disabled={false}
     e2e="defaultTextArea"
+    forwardRef={null}
     height="100px"
     onChange={[Function]}
     value="Hello dear friend"
     width="100%"
   >
-    <StyledComponent
+    <styled.textarea
       disabled={false}
       e2e="defaultTextArea"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [
-            [Function],
-          ],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gZMcBi",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      height="100px"
+      onChange={[Function]}
+      value="Hello dear friend"
+      width="100%"
+    >
+      <StyledComponent
+        disabled={false}
+        e2e="defaultTextArea"
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [
+              [Function],
+            ],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gZMcBi",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: block;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   height: ",
-              [Function],
-              ";
+                [Function],
+                ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-              [Function],
-              ";
+                [Function],
+                ";
   font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-width: 1px;
   border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-style: solid;
   border-radius: ",
-              [Function],
-              ";
+                [Function],
+                ";
   background-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -1889,14 +1933,14 @@ exports[`TextArea should render correctly with value 1`] = `
 
   &:disabled {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     background: ",
-              [Function],
-              ";
+                [Function],
+                ";
     cursor: not-allowed;
   }
 
@@ -1904,49 +1948,50 @@ exports[`TextArea should render correctly with value 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 
   &::placeholder {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 ",
-            ],
-          },
-          "displayName": "styled.textarea",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gZMcBi",
-          "target": "textarea",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.textarea",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gZMcBi",
+            "target": "textarea",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      height="100px"
-      onChange={[Function]}
-      value="Hello dear friend"
-      width="100%"
-    >
-      <textarea
-        className="c0"
-        data-e2e="defaultTextArea"
-        disabled={false}
+        forwardedRef={null}
         height="100px"
         onChange={[Function]}
         value="Hello dear friend"
         width="100%"
-      />
-    </StyledComponent>
-  </styled.textarea>
-</TextArea>
+      >
+        <textarea
+          className="c0"
+          data-e2e="defaultTextArea"
+          disabled={false}
+          height="100px"
+          onChange={[Function]}
+          value="Hello dear friend"
+          width="100%"
+        />
+      </StyledComponent>
+    </styled.textarea>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
 
 exports[`TextArea should render correctly with width 1`] = `
@@ -2006,62 +2051,66 @@ exports[`TextArea should render correctly with width 1`] = `
   font-size: 0.875rem;
 }
 
-<TextArea
-  disabled={false}
-  e2e="defaultTextArea"
-  height="100px"
+<ForwardRef(TextAreaWithRef)
   width="200px"
 >
-  <styled.textarea
+  <TextArea
     disabled={false}
     e2e="defaultTextArea"
+    forwardRef={null}
     height="100px"
     width="200px"
   >
-    <StyledComponent
+    <styled.textarea
       disabled={false}
       e2e="defaultTextArea"
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [
-            [Function],
-          ],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-gZMcBi",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+      height="100px"
+      width="200px"
+    >
+      <StyledComponent
+        disabled={false}
+        e2e="defaultTextArea"
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [
+              [Function],
+            ],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-gZMcBi",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   display: block;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   height: ",
-              [Function],
-              ";
+                [Function],
+                ";
   padding: 0.7rem 1rem;
   box-sizing: border-box;
   font-family: ",
-              [Function],
-              ";
+                [Function],
+                ";
   font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-width: 1px;
   border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   border-style: solid;
   border-radius: ",
-              [Function],
-              ";
+                [Function],
+                ";
   background-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
   outline-width: 0;
   user-select: text;
   resize: none;
@@ -2069,14 +2118,14 @@ exports[`TextArea should render correctly with width 1`] = `
 
   &:disabled {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     border-color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     background: ",
-              [Function],
-              ";
+                [Function],
+                ";
     cursor: not-allowed;
   }
 
@@ -2084,43 +2133,44 @@ exports[`TextArea should render correctly with width 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 
   &::placeholder {
     color: ",
-              [Function],
-              ";
+                [Function],
+                ";
     font-size: ",
-              [Function],
-              ";
+                [Function],
+                ";
   }
 ",
-            ],
-          },
-          "displayName": "styled.textarea",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-gZMcBi",
-          "target": "textarea",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.textarea",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-gZMcBi",
+            "target": "textarea",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      height="100px"
-      width="200px"
-    >
-      <textarea
-        className="c0"
-        data-e2e="defaultTextArea"
-        disabled={false}
+        forwardedRef={null}
         height="100px"
         width="200px"
-      />
-    </StyledComponent>
-  </styled.textarea>
-</TextArea>
+      >
+        <textarea
+          className="c0"
+          data-e2e="defaultTextArea"
+          disabled={false}
+          height="100px"
+          width="200px"
+        />
+      </StyledComponent>
+    </styled.textarea>
+  </TextArea>
+</ForwardRef(TextAreaWithRef)>
 `;
diff --git a/src/Molecules/Dropdowns/SingleDropdown.js b/src/Molecules/Dropdowns/SingleDropdown.js
index 997da78f..6ec72f85 100644
--- a/src/Molecules/Dropdowns/SingleDropdown.js
+++ b/src/Molecules/Dropdowns/SingleDropdown.js
@@ -16,6 +16,7 @@ export type PropsType = {
   +className?: string,
   +disabled?: boolean,
   +error?: string,
+  +forwardRef?: React.ElementRef<*>,
   +input?: {},
   +italic?: boolean,
   +items: Array<{ +text: string, +value: string | number }>,
@@ -105,6 +106,7 @@ const Select = styled.select`
 
 const SingleDropdown = ({
   className,
+  forwardRef: ref,
   input,
   items,
   placeholder,
@@ -128,6 +130,7 @@ const SingleDropdown = ({
           defaultValue: placeholder != null ? '' : undefined,
           ...input,
           ...rest,
+          ref,
         }}
       >
         {placeholder != null && (
@@ -166,4 +169,8 @@ SingleDropdown.defaultProps = {
   width: '100%',
 }
 
-export default SingleDropdown
+const SingleDropdownWithRef = (props, ref) => (
+  <SingleDropdown {...props} forwardRef={ref} />
+)
+
+export default React.forwardRef<PropsType, _>(SingleDropdownWithRef)
diff --git a/src/Molecules/Dropdowns/__snapshots__/SingleDropdown.spec.js.snap b/src/Molecules/Dropdowns/__snapshots__/SingleDropdown.spec.js.snap
index ca4762d6..9626c9f6 100644
--- a/src/Molecules/Dropdowns/__snapshots__/SingleDropdown.spec.js.snap
+++ b/src/Molecules/Dropdowns/__snapshots__/SingleDropdown.spec.js.snap
@@ -76,9 +76,7 @@ exports[`SingleDropdown should render correctly 1`] = `
   box-shadow: 0 0 0 1px #10ADE4;
 }
 
-<SingleDropdown
-  capitalize={false}
-  italic={false}
+<ForwardRef(SingleDropdownWithRef)
   items={
     Array [
       Object {
@@ -120,30 +118,76 @@ exports[`SingleDropdown should render correctly 1`] = `
     ]
   }
   onChange={[MockFunction]}
-  uppercase={false}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    onChange={[MockFunction]}
+    uppercase={false}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -156,78 +200,78 @@ exports[`SingleDropdown should render correctly 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.select
-          capitalize={false}
-          italic={false}
-          onChange={[MockFunction]}
-          uppercase={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.select
             capitalize={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            italic={false}
+            onChange={[MockFunction]}
+            uppercase={false}
+          >
+            <StyledComponent
+              capitalize={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -236,21 +280,21 @@ exports[`SingleDropdown should render correctly 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -259,100 +303,101 @@ exports[`SingleDropdown should render correctly 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            onChange={[MockFunction]}
-            uppercase={false}
-          >
-            <select
-              className="c1"
+              forwardedRef={null}
+              italic={false}
               onChange={[MockFunction]}
+              uppercase={false}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c1"
+                onChange={[MockFunction]}
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with capitalize 1`] = `
@@ -431,9 +476,8 @@ exports[`SingleDropdown should render correctly with capitalize 1`] = `
   box-shadow: 0 0 0 1px #10ADE4;
 }
 
-<SingleDropdown
+<ForwardRef(SingleDropdownWithRef)
   capitalize={true}
-  italic={false}
   items={
     Array [
       Object {
@@ -475,30 +519,76 @@ exports[`SingleDropdown should render correctly with capitalize 1`] = `
     ]
   }
   onChange={[MockFunction]}
-  uppercase={false}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={true}
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    onChange={[MockFunction]}
+    uppercase={false}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -511,78 +601,78 @@ exports[`SingleDropdown should render correctly with capitalize 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.select
-          capitalize={true}
-          italic={false}
-          onChange={[MockFunction]}
-          uppercase={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.select
             capitalize={true}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            italic={false}
+            onChange={[MockFunction]}
+            uppercase={false}
+          >
+            <StyledComponent
+              capitalize={true}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -591,21 +681,21 @@ exports[`SingleDropdown should render correctly with capitalize 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -614,100 +704,101 @@ exports[`SingleDropdown should render correctly with capitalize 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            onChange={[MockFunction]}
-            uppercase={false}
-          >
-            <select
-              className="c1"
+              forwardedRef={null}
+              italic={false}
               onChange={[MockFunction]}
+              uppercase={false}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c1"
+                onChange={[MockFunction]}
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with error="error" 1`] = `
@@ -793,10 +884,8 @@ exports[`SingleDropdown should render correctly with error="error" 1`] = `
   box-shadow: 0 0 0 1px transparent;
 }
 
-<SingleDropdown
-  capitalize={false}
+<ForwardRef(SingleDropdownWithRef)
   error="error"
-  italic={false}
   items={
     Array [
       Object {
@@ -837,30 +926,76 @@ exports[`SingleDropdown should render correctly with error="error" 1`] = `
       },
     ]
   }
-  uppercase={false}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    error="error"
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    uppercase={false}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -873,129 +1008,129 @@ exports[`SingleDropdown should render correctly with error="error" 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          error={true}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             error={true}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              error={true}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
+              forwardedRef={null}
             >
-              error
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.select
-          capitalize={false}
-          error="error"
-          italic={false}
-          uppercase={false}
-        >
-          <StyledComponent
+              <label
+                className="c1"
+              >
+                error
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.select
             capitalize={false}
             error="error"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            italic={false}
+            uppercase={false}
+          >
+            <StyledComponent
+              capitalize={false}
+              error="error"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -1004,21 +1139,21 @@ exports[`SingleDropdown should render correctly with error="error" 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -1027,98 +1162,99 @@ exports[`SingleDropdown should render correctly with error="error" 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            uppercase={false}
-          >
-            <select
-              className="c2"
+              forwardedRef={null}
+              italic={false}
+              uppercase={false}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c2"
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with italic 1`] = `
@@ -1197,8 +1333,7 @@ exports[`SingleDropdown should render correctly with italic 1`] = `
   box-shadow: 0 0 0 1px #10ADE4;
 }
 
-<SingleDropdown
-  capitalize={false}
+<ForwardRef(SingleDropdownWithRef)
   italic={true}
   items={
     Array [
@@ -1241,30 +1376,76 @@ exports[`SingleDropdown should render correctly with italic 1`] = `
     ]
   }
   onChange={[MockFunction]}
-  uppercase={false}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    forwardRef={null}
+    italic={true}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    onChange={[MockFunction]}
+    uppercase={false}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -1277,78 +1458,78 @@ exports[`SingleDropdown should render correctly with italic 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.select
-          capitalize={false}
-          italic={true}
-          onChange={[MockFunction]}
-          uppercase={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.select
             capitalize={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            italic={true}
+            onChange={[MockFunction]}
+            uppercase={false}
+          >
+            <StyledComponent
+              capitalize={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -1357,21 +1538,21 @@ exports[`SingleDropdown should render correctly with italic 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -1380,100 +1561,101 @@ exports[`SingleDropdown should render correctly with italic 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={true}
-            onChange={[MockFunction]}
-            uppercase={false}
-          >
-            <select
-              className="c1"
+              forwardedRef={null}
+              italic={true}
               onChange={[MockFunction]}
+              uppercase={false}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c1"
+                onChange={[MockFunction]}
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with label="label" 1`] = `
@@ -1559,9 +1741,7 @@ exports[`SingleDropdown should render correctly with label="label" 1`] = `
   box-shadow: 0 0 0 1px #10ADE4;
 }
 
-<SingleDropdown
-  capitalize={false}
-  italic={false}
+<ForwardRef(SingleDropdownWithRef)
   items={
     Array [
       Object {
@@ -1603,30 +1783,76 @@ exports[`SingleDropdown should render correctly with label="label" 1`] = `
     ]
   }
   label="label"
-  uppercase={false}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    label="label"
+    uppercase={false}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -1639,128 +1865,128 @@ exports[`SingleDropdown should render correctly with label="label" 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          error={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             error={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              error={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
+              forwardedRef={null}
             >
-              label
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.select
-          capitalize={false}
-          italic={false}
-          label="label"
-          uppercase={false}
-        >
-          <StyledComponent
+              <label
+                className="c1"
+              >
+                label
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.select
             capitalize={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            italic={false}
+            label="label"
+            uppercase={false}
+          >
+            <StyledComponent
+              capitalize={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -1769,21 +1995,21 @@ exports[`SingleDropdown should render correctly with label="label" 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -1792,100 +2018,101 @@ exports[`SingleDropdown should render correctly with label="label" 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            label="label"
-            uppercase={false}
-          >
-            <select
-              className="c2"
+              forwardedRef={null}
+              italic={false}
               label="label"
+              uppercase={false}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c2"
+                label="label"
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with label="label" and error="error" 1`] = `
@@ -1971,10 +2198,8 @@ exports[`SingleDropdown should render correctly with label="label" and error="er
   box-shadow: 0 0 0 1px transparent;
 }
 
-<SingleDropdown
-  capitalize={false}
+<ForwardRef(SingleDropdownWithRef)
   error="error"
-  italic={false}
   items={
     Array [
       Object {
@@ -2016,30 +2241,77 @@ exports[`SingleDropdown should render correctly with label="label" and error="er
     ]
   }
   label="label"
-  uppercase={false}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    error="error"
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    label="label"
+    uppercase={false}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -2052,130 +2324,130 @@ exports[`SingleDropdown should render correctly with label="label" and error="er
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.label
-          error={true}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.label
             error={true}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-dnqmqq",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+          >
+            <StyledComponent
+              error={true}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-dnqmqq",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   padding-bottom: 0.5rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
 ",
-                  ],
-                },
-                "displayName": "styled.label",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-dnqmqq",
-                "target": "label",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.label",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-dnqmqq",
+                  "target": "label",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-          >
-            <label
-              className="c1"
+              forwardedRef={null}
             >
-              label - error
-            </label>
-          </StyledComponent>
-        </styled.label>
-        <styled.select
-          capitalize={false}
-          error="error"
-          italic={false}
-          label="label"
-          uppercase={false}
-        >
-          <StyledComponent
+              <label
+                className="c1"
+              >
+                label - error
+              </label>
+            </StyledComponent>
+          </styled.label>
+          <styled.select
             capitalize={false}
             error="error"
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c2",
-                  "rules": Array [
-                    "
+            italic={false}
+            label="label"
+            uppercase={false}
+          >
+            <StyledComponent
+              capitalize={false}
+              error="error"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c2",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -2184,21 +2456,21 @@ exports[`SingleDropdown should render correctly with label="label" and error="er
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -2207,100 +2479,101 @@ exports[`SingleDropdown should render correctly with label="label" and error="er
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            label="label"
-            uppercase={false}
-          >
-            <select
-              className="c2"
+              forwardedRef={null}
+              italic={false}
               label="label"
+              uppercase={false}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c2"
+                label="label"
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with placeholder 1`] = `
@@ -2379,9 +2652,7 @@ exports[`SingleDropdown should render correctly with placeholder 1`] = `
   box-shadow: 0 0 0 1px #10ADE4;
 }
 
-<SingleDropdown
-  capitalize={false}
-  italic={false}
+<ForwardRef(SingleDropdownWithRef)
   items={
     Array [
       Object {
@@ -2424,30 +2695,77 @@ exports[`SingleDropdown should render correctly with placeholder 1`] = `
   }
   onChange={[MockFunction]}
   placeholder="Select"
-  uppercase={false}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    onChange={[MockFunction]}
+    placeholder="Select"
+    uppercase={false}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -2460,80 +2778,80 @@ exports[`SingleDropdown should render correctly with placeholder 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.select
-          capitalize={false}
-          defaultValue=""
-          italic={false}
-          onChange={[MockFunction]}
-          uppercase={false}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.select
             capitalize={false}
             defaultValue=""
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            italic={false}
+            onChange={[MockFunction]}
+            uppercase={false}
+          >
+            <StyledComponent
+              capitalize={false}
+              defaultValue=""
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -2542,21 +2860,21 @@ exports[`SingleDropdown should render correctly with placeholder 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -2565,107 +2883,108 @@ exports[`SingleDropdown should render correctly with placeholder 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            onChange={[MockFunction]}
-            uppercase={false}
-          >
-            <select
-              className="c1"
-              defaultValue=""
+              forwardedRef={null}
+              italic={false}
               onChange={[MockFunction]}
+              uppercase={false}
             >
-              <option
-                disabled={true}
-                hidden={true}
-                label="Select"
-                value=""
-              />
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c1"
+                defaultValue=""
+                onChange={[MockFunction]}
+              >
+                <option
+                  disabled={true}
+                  hidden={true}
+                  label="Select"
+                  value=""
+                />
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with uppercase 1`] = `
@@ -2744,9 +3063,7 @@ exports[`SingleDropdown should render correctly with uppercase 1`] = `
   box-shadow: 0 0 0 1px #10ADE4;
 }
 
-<SingleDropdown
-  capitalize={false}
-  italic={false}
+<ForwardRef(SingleDropdownWithRef)
   items={
     Array [
       Object {
@@ -2789,29 +3106,76 @@ exports[`SingleDropdown should render correctly with uppercase 1`] = `
   }
   onChange={[MockFunction]}
   uppercase={true}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    onChange={[MockFunction]}
+    uppercase={true}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -2824,78 +3188,78 @@ exports[`SingleDropdown should render correctly with uppercase 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.select
-          capitalize={false}
-          italic={false}
-          onChange={[MockFunction]}
-          uppercase={true}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.select
             capitalize={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            italic={false}
+            onChange={[MockFunction]}
+            uppercase={true}
+          >
+            <StyledComponent
+              capitalize={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -2904,21 +3268,21 @@ exports[`SingleDropdown should render correctly with uppercase 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -2927,100 +3291,101 @@ exports[`SingleDropdown should render correctly with uppercase 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            onChange={[MockFunction]}
-            uppercase={true}
-          >
-            <select
-              className="c1"
+              forwardedRef={null}
+              italic={false}
               onChange={[MockFunction]}
+              uppercase={true}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c1"
+                onChange={[MockFunction]}
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
 
 exports[`SingleDropdown should render correctly with weight 1`] = `
@@ -3100,9 +3465,7 @@ exports[`SingleDropdown should render correctly with weight 1`] = `
   box-shadow: 0 0 0 1px #10ADE4;
 }
 
-<SingleDropdown
-  capitalize={false}
-  italic={false}
+<ForwardRef(SingleDropdownWithRef)
   items={
     Array [
       Object {
@@ -3144,31 +3507,78 @@ exports[`SingleDropdown should render correctly with weight 1`] = `
     ]
   }
   onChange={[MockFunction]}
-  uppercase={false}
   weight={500}
-  width="100%"
 >
-  <styled.div
+  <SingleDropdown
+    capitalize={false}
+    forwardRef={null}
+    italic={false}
+    items={
+      Array [
+        Object {
+          "text": "Item1",
+          "value": 1,
+        },
+        Object {
+          "text": "Item2",
+          "value": 2,
+        },
+        Object {
+          "text": "Item3",
+          "value": 3,
+        },
+        Object {
+          "text": "Item4",
+          "value": 4,
+        },
+        Object {
+          "text": "Item5",
+          "value": 5,
+        },
+        Object {
+          "text": "Item6",
+          "value": 6,
+        },
+        Object {
+          "text": "Item7",
+          "value": 7,
+        },
+        Object {
+          "text": "Item8",
+          "value": 8,
+        },
+        Object {
+          "text": "Item9",
+          "value": 9,
+        },
+      ]
+    }
+    onChange={[MockFunction]}
+    uppercase={false}
+    weight={500}
     width="100%"
   >
-    <StyledComponent
-      forwardedComponent={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": ComponentStyle {
-            "componentId": "sc-iwsKbI",
-            "isStatic": false,
-            "lastClassName": "c0",
-            "rules": Array [
-              "
+    <styled.div
+      width="100%"
+    >
+      <StyledComponent
+        forwardedComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "attrs": Array [],
+            "componentStyle": ComponentStyle {
+              "componentId": "sc-iwsKbI",
+              "isStatic": false,
+              "lastClassName": "c0",
+              "rules": Array [
+                "
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: ",
-              [Function],
-              ";
+                [Function],
+                ";
   box-sizing: border-box;
 
   &::after {
@@ -3181,79 +3591,79 @@ exports[`SingleDropdown should render correctly with weight 1`] = `
     border-left: 0.4rem solid transparent;
     border-right: 0.4rem solid transparent;
     border-top: 0.4rem solid ",
-              [Function],
-              ";
+                [Function],
+                ";
     pointer-events: none;
   }
 ",
-            ],
-          },
-          "displayName": "styled.div",
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "styledComponentId": "sc-iwsKbI",
-          "target": "div",
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
+              ],
+            },
+            "displayName": "styled.div",
+            "foldedComponentIds": Array [],
+            "render": [Function],
+            "styledComponentId": "sc-iwsKbI",
+            "target": "div",
+            "toString": [Function],
+            "warnTooManyClasses": [Function],
+            "withComponent": [Function],
+          }
         }
-      }
-      forwardedRef={null}
-      width="100%"
-    >
-      <div
-        className="c0"
+        forwardedRef={null}
         width="100%"
       >
-        <styled.select
-          capitalize={false}
-          italic={false}
-          onChange={[MockFunction]}
-          uppercase={false}
-          weight={500}
+        <div
+          className="c0"
+          width="100%"
         >
-          <StyledComponent
+          <styled.select
             capitalize={false}
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "sc-gZMcBi",
-                  "isStatic": false,
-                  "lastClassName": "c1",
-                  "rules": Array [
-                    "
+            italic={false}
+            onChange={[MockFunction]}
+            uppercase={false}
+            weight={500}
+          >
+            <StyledComponent
+              capitalize={false}
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "sc-gZMcBi",
+                    "isStatic": false,
+                    "lastClassName": "c1",
+                    "rules": Array [
+                      "
   width: 100%;
   height: 2.7rem;
   padding: 0 2.4rem 0 1rem;
   color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   background-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   appearance: none;
   font-family: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-weight: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-size: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   font-style: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-width: 1px;
   border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   border-style: solid;
   border-radius: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   cursor: pointer;
   outline: none;
   text-overflow: ellipsis;
@@ -3262,21 +3672,21 @@ exports[`SingleDropdown should render correctly with weight 1`] = `
 
   &:disabled {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     border-color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     background: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
     cursor: not-allowed;
   }
 
   &:required:invalid {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   option[value=''][disabled] {
@@ -3285,99 +3695,100 @@ exports[`SingleDropdown should render correctly with weight 1`] = `
 
   option {
     color: ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 
   &:active:not(:disabled),
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                    [Function],
-                    ";
+                      [Function],
+                      ";
   }
 ",
-                  ],
-                },
-                "displayName": "styled.select",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "sc-gZMcBi",
-                "target": "select",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                    ],
+                  },
+                  "displayName": "styled.select",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "sc-gZMcBi",
+                  "target": "select",
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
               }
-            }
-            forwardedRef={null}
-            italic={false}
-            onChange={[MockFunction]}
-            uppercase={false}
-            weight={500}
-          >
-            <select
-              className="c1"
+              forwardedRef={null}
+              italic={false}
               onChange={[MockFunction]}
+              uppercase={false}
+              weight={500}
             >
-              <option
-                key="1"
-                value={1}
-              >
-                Item1
-              </option>
-              <option
-                key="2"
-                value={2}
-              >
-                Item2
-              </option>
-              <option
-                key="3"
-                value={3}
-              >
-                Item3
-              </option>
-              <option
-                key="4"
-                value={4}
-              >
-                Item4
-              </option>
-              <option
-                key="5"
-                value={5}
-              >
-                Item5
-              </option>
-              <option
-                key="6"
-                value={6}
-              >
-                Item6
-              </option>
-              <option
-                key="7"
-                value={7}
-              >
-                Item7
-              </option>
-              <option
-                key="8"
-                value={8}
-              >
-                Item8
-              </option>
-              <option
-                key="9"
-                value={9}
-              >
-                Item9
-              </option>
-            </select>
-          </StyledComponent>
-        </styled.select>
-      </div>
-    </StyledComponent>
-  </styled.div>
-</SingleDropdown>
+              <select
+                className="c1"
+                onChange={[MockFunction]}
+              >
+                <option
+                  key="1"
+                  value={1}
+                >
+                  Item1
+                </option>
+                <option
+                  key="2"
+                  value={2}
+                >
+                  Item2
+                </option>
+                <option
+                  key="3"
+                  value={3}
+                >
+                  Item3
+                </option>
+                <option
+                  key="4"
+                  value={4}
+                >
+                  Item4
+                </option>
+                <option
+                  key="5"
+                  value={5}
+                >
+                  Item5
+                </option>
+                <option
+                  key="6"
+                  value={6}
+                >
+                  Item6
+                </option>
+                <option
+                  key="7"
+                  value={7}
+                >
+                  Item7
+                </option>
+                <option
+                  key="8"
+                  value={8}
+                >
+                  Item8
+                </option>
+                <option
+                  key="9"
+                  value={9}
+                >
+                  Item9
+                </option>
+              </select>
+            </StyledComponent>
+          </styled.select>
+        </div>
+      </StyledComponent>
+    </styled.div>
+  </SingleDropdown>
+</ForwardRef(SingleDropdownWithRef)>
 `;
diff --git a/src/Molecules/SearchBars/__snapshots__/SearchBar.spec.js.snap b/src/Molecules/SearchBars/__snapshots__/SearchBar.spec.js.snap
index f95a493a..d7a23822 100644
--- a/src/Molecules/SearchBars/__snapshots__/SearchBar.spec.js.snap
+++ b/src/Molecules/SearchBars/__snapshots__/SearchBar.spec.js.snap
@@ -401,7 +401,7 @@ exports[`SearchBar should render correctly 1`] = `
             </div>
           </StyledComponent>
         </styled.div>
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBar.Input"
         >
           <StyledComponent
@@ -430,116 +430,123 @@ exports[`SearchBar should render correctly 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-SpTIZ",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c4"
-              disabled={false}
               e2e="defaultSearchBar.Input"
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c4"
+                disabled={false}
+                e2e="defaultSearchBar.Input"
+                forwardRef={null}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c4"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c5",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c4"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c4 c5"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBar.Input"
-                      type="text"
+                    <div
+                      className="c4 c5"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBar.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c6",
-                              "rules": Array [
-                                "
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBar.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c6",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -547,14 +554,14 @@ exports[`SearchBar should render correctly 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -562,50 +569,51 @@ exports[`SearchBar should render correctly 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c6"
-                          data-e2e="defaultSearchBar.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c6"
+                            data-e2e="defaultSearchBar.Input"
+                            disabled={false}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBar.Button"
         >
@@ -1087,7 +1095,7 @@ exports[`SearchBar should render correctly with e2e 1`] = `
             </div>
           </StyledComponent>
         </styled.div>
-        <Styled(Input)
+        <Styled(Component)
           e2e=".Input"
         >
           <StyledComponent
@@ -1116,116 +1124,123 @@ exports[`SearchBar should render correctly with e2e 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-SpTIZ",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c4"
-              disabled={false}
               e2e=".Input"
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c4"
+                disabled={false}
+                e2e=".Input"
+                forwardRef={null}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c4"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c5",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c4"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c4 c5"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e=".Input"
-                      type="text"
+                    <div
+                      className="c4 c5"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e=".Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c6",
-                              "rules": Array [
-                                "
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e=".Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c6",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1233,14 +1248,14 @@ exports[`SearchBar should render correctly with e2e 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -1248,50 +1263,51 @@ exports[`SearchBar should render correctly with e2e 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c6"
-                          data-e2e=".Input"
-                          disabled={false}
+                          forwardedRef={null}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c6"
+                            data-e2e=".Input"
+                            disabled={false}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e=".Button"
         >
@@ -1774,7 +1790,7 @@ exports[`SearchBar should render correctly with onChange 1`] = `
             </div>
           </StyledComponent>
         </styled.div>
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBar.Input"
           onChange={[MockFunction]}
         >
@@ -1804,119 +1820,127 @@ exports[`SearchBar should render correctly with onChange 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-SpTIZ",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
             onChange={[MockFunction]}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c4"
-              disabled={false}
               e2e="defaultSearchBar.Input"
               onChange={[MockFunction]}
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c4"
+                disabled={false}
+                e2e="defaultSearchBar.Input"
+                forwardRef={null}
+                onChange={[MockFunction]}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c4"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c5",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c4"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c4 c5"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBar.Input"
-                      onChange={[MockFunction]}
-                      type="text"
+                    <div
+                      className="c4 c5"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBar.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c6",
-                              "rules": Array [
-                                "
+                        onChange={[MockFunction]}
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBar.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c6",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1924,14 +1948,14 @@ exports[`SearchBar should render correctly with onChange 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -1939,52 +1963,53 @@ exports[`SearchBar should render correctly with onChange 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        onChange={[MockFunction]}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c6"
-                          data-e2e="defaultSearchBar.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           onChange={[MockFunction]}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c6"
+                            data-e2e="defaultSearchBar.Input"
+                            disabled={false}
+                            onChange={[MockFunction]}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBar.Button"
         >
@@ -2467,7 +2492,7 @@ exports[`SearchBar should render correctly with onClick 1`] = `
             </div>
           </StyledComponent>
         </styled.div>
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBar.Input"
         >
           <StyledComponent
@@ -2496,116 +2521,123 @@ exports[`SearchBar should render correctly with onClick 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-SpTIZ",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c4"
-              disabled={false}
               e2e="defaultSearchBar.Input"
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c4"
+                disabled={false}
+                e2e="defaultSearchBar.Input"
+                forwardRef={null}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c4"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c5",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c4"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c4 c5"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBar.Input"
-                      type="text"
+                    <div
+                      className="c4 c5"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBar.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c6",
-                              "rules": Array [
-                                "
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBar.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c6",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -2613,14 +2645,14 @@ exports[`SearchBar should render correctly with onClick 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -2628,50 +2660,51 @@ exports[`SearchBar should render correctly with onClick 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c6"
-                          data-e2e="defaultSearchBar.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c6"
+                            data-e2e="defaultSearchBar.Input"
+                            disabled={false}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBar.Button"
           onClick={[MockFunction]}
@@ -3158,7 +3191,7 @@ exports[`SearchBar should render correctly with value 1`] = `
             </div>
           </StyledComponent>
         </styled.div>
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBar.Input"
           onChange={[MockFunction]}
           value="My search"
@@ -3189,122 +3222,131 @@ exports[`SearchBar should render correctly with value 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-SpTIZ",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
             onChange={[MockFunction]}
             value="My search"
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c4"
-              disabled={false}
               e2e="defaultSearchBar.Input"
               onChange={[MockFunction]}
-              type="text"
               value="My search"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c4"
+                disabled={false}
+                e2e="defaultSearchBar.Input"
+                forwardRef={null}
+                onChange={[MockFunction]}
+                type="text"
+                value="My search"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c4"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c5",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c4"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c4 c5"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBar.Input"
-                      onChange={[MockFunction]}
-                      type="text"
-                      value="My search"
+                    <div
+                      className="c4 c5"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBar.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c6",
-                              "rules": Array [
-                                "
+                        onChange={[MockFunction]}
+                        type="text"
+                        value="My search"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBar.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c6",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -3312,14 +3354,14 @@ exports[`SearchBar should render correctly with value 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -3327,54 +3369,55 @@ exports[`SearchBar should render correctly with value 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        onChange={[MockFunction]}
-                        type="text"
-                        value="My search"
-                        width="100%"
-                      >
-                        <input
-                          className="c6"
-                          data-e2e="defaultSearchBar.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           onChange={[MockFunction]}
                           type="text"
                           value="My search"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c6"
+                            data-e2e="defaultSearchBar.Input"
+                            disabled={false}
+                            onChange={[MockFunction]}
+                            type="text"
+                            value="My search"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBar.Button"
         >
@@ -3858,7 +3901,7 @@ exports[`SearchBar should render correctly with width 1`] = `
             </div>
           </StyledComponent>
         </styled.div>
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBar.Input"
           onChange={[MockFunction]}
           value="My search"
@@ -3889,122 +3932,131 @@ exports[`SearchBar should render correctly with width 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-SpTIZ",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
             onChange={[MockFunction]}
             value="My search"
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c4"
-              disabled={false}
               e2e="defaultSearchBar.Input"
               onChange={[MockFunction]}
-              type="text"
               value="My search"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c4"
+                disabled={false}
+                e2e="defaultSearchBar.Input"
+                forwardRef={null}
+                onChange={[MockFunction]}
+                type="text"
+                value="My search"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c4"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c5",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c4"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c4 c5"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBar.Input"
-                      onChange={[MockFunction]}
-                      type="text"
-                      value="My search"
+                    <div
+                      className="c4 c5"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBar.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c6",
-                              "rules": Array [
-                                "
+                        onChange={[MockFunction]}
+                        type="text"
+                        value="My search"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBar.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c6",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -4012,14 +4064,14 @@ exports[`SearchBar should render correctly with width 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -4027,54 +4079,55 @@ exports[`SearchBar should render correctly with width 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        onChange={[MockFunction]}
-                        type="text"
-                        value="My search"
-                        width="100%"
-                      >
-                        <input
-                          className="c6"
-                          data-e2e="defaultSearchBar.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           onChange={[MockFunction]}
                           type="text"
                           value="My search"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c6"
+                            data-e2e="defaultSearchBar.Input"
+                            disabled={false}
+                            onChange={[MockFunction]}
+                            type="text"
+                            value="My search"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBar.Button"
         >
diff --git a/src/Molecules/SearchBars/__snapshots__/SearchBarUnderlined.spec.js.snap b/src/Molecules/SearchBars/__snapshots__/SearchBarUnderlined.spec.js.snap
index 0b367141..bd866bab 100644
--- a/src/Molecules/SearchBars/__snapshots__/SearchBarUnderlined.spec.js.snap
+++ b/src/Molecules/SearchBars/__snapshots__/SearchBarUnderlined.spec.js.snap
@@ -180,7 +180,7 @@ exports[`SearchBarUnderlined should render correctly 1`] = `
         className="c0"
         width="100%"
       >
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBarUnderlined.Input"
         >
           <StyledComponent
@@ -207,116 +207,123 @@ exports[`SearchBarUnderlined should render correctly 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-irJFYO",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c1"
-              disabled={false}
               e2e="defaultSearchBarUnderlined.Input"
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c1"
+                disabled={false}
+                e2e="defaultSearchBarUnderlined.Input"
+                forwardRef={null}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c1"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c1"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c1 c2"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBarUnderlined.Input"
-                      type="text"
+                    <div
+                      className="c1 c2"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBarUnderlined.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c3",
-                              "rules": Array [
-                                "
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBarUnderlined.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c3",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -324,14 +331,14 @@ exports[`SearchBarUnderlined should render correctly 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -339,50 +346,51 @@ exports[`SearchBarUnderlined should render correctly 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c3"
-                          data-e2e="defaultSearchBarUnderlined.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c3"
+                            data-e2e="defaultSearchBarUnderlined.Input"
+                            disabled={false}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBarUnderlined.Button"
         >
@@ -690,7 +698,7 @@ exports[`SearchBarUnderlined should render correctly with e2e 1`] = `
         className="c0"
         width="100%"
       >
-        <Styled(Input)
+        <Styled(Component)
           e2e=".Input"
         >
           <StyledComponent
@@ -717,116 +725,123 @@ exports[`SearchBarUnderlined should render correctly with e2e 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-irJFYO",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c1"
-              disabled={false}
               e2e=".Input"
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c1"
+                disabled={false}
+                e2e=".Input"
+                forwardRef={null}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c1"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c1"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c1 c2"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e=".Input"
-                      type="text"
+                    <div
+                      className="c1 c2"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e=".Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c3",
-                              "rules": Array [
-                                "
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e=".Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c3",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -834,14 +849,14 @@ exports[`SearchBarUnderlined should render correctly with e2e 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -849,50 +864,51 @@ exports[`SearchBarUnderlined should render correctly with e2e 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c3"
-                          data-e2e=".Input"
-                          disabled={false}
+                          forwardedRef={null}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c3"
+                            data-e2e=".Input"
+                            disabled={false}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e=".Button"
         >
@@ -1201,7 +1217,7 @@ exports[`SearchBarUnderlined should render correctly with onChange 1`] = `
         className="c0"
         width="100%"
       >
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBarUnderlined.Input"
           onChange={[MockFunction]}
         >
@@ -1229,119 +1245,127 @@ exports[`SearchBarUnderlined should render correctly with onChange 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-irJFYO",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
             onChange={[MockFunction]}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c1"
-              disabled={false}
               e2e="defaultSearchBarUnderlined.Input"
               onChange={[MockFunction]}
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c1"
+                disabled={false}
+                e2e="defaultSearchBarUnderlined.Input"
+                forwardRef={null}
+                onChange={[MockFunction]}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c1"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c1"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c1 c2"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBarUnderlined.Input"
-                      onChange={[MockFunction]}
-                      type="text"
+                    <div
+                      className="c1 c2"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBarUnderlined.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c3",
-                              "rules": Array [
-                                "
+                        onChange={[MockFunction]}
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBarUnderlined.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c3",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1349,14 +1373,14 @@ exports[`SearchBarUnderlined should render correctly with onChange 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -1364,52 +1388,53 @@ exports[`SearchBarUnderlined should render correctly with onChange 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        onChange={[MockFunction]}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c3"
-                          data-e2e="defaultSearchBarUnderlined.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           onChange={[MockFunction]}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c3"
+                            data-e2e="defaultSearchBarUnderlined.Input"
+                            disabled={false}
+                            onChange={[MockFunction]}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBarUnderlined.Button"
         >
@@ -1718,7 +1743,7 @@ exports[`SearchBarUnderlined should render correctly with onClick 1`] = `
         className="c0"
         width="100%"
       >
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBarUnderlined.Input"
         >
           <StyledComponent
@@ -1745,116 +1770,123 @@ exports[`SearchBarUnderlined should render correctly with onClick 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-irJFYO",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c1"
-              disabled={false}
               e2e="defaultSearchBarUnderlined.Input"
-              type="text"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c1"
+                disabled={false}
+                e2e="defaultSearchBarUnderlined.Input"
+                forwardRef={null}
+                type="text"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c1"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c1"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c1 c2"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBarUnderlined.Input"
-                      type="text"
+                    <div
+                      className="c1 c2"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBarUnderlined.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c3",
-                              "rules": Array [
-                                "
+                        type="text"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBarUnderlined.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c3",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -1862,14 +1894,14 @@ exports[`SearchBarUnderlined should render correctly with onClick 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -1877,50 +1909,51 @@ exports[`SearchBarUnderlined should render correctly with onClick 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        type="text"
-                        width="100%"
-                      >
-                        <input
-                          className="c3"
-                          data-e2e="defaultSearchBarUnderlined.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           type="text"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c3"
+                            data-e2e="defaultSearchBarUnderlined.Input"
+                            disabled={false}
+                            type="text"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBarUnderlined.Button"
           onClick={[MockFunction]}
@@ -2233,7 +2266,7 @@ exports[`SearchBarUnderlined should render correctly with value 1`] = `
         className="c0"
         width="100%"
       >
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBarUnderlined.Input"
           onChange={[MockFunction]}
           value="My search"
@@ -2262,122 +2295,131 @@ exports[`SearchBarUnderlined should render correctly with value 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-irJFYO",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
             onChange={[MockFunction]}
             value="My search"
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c1"
-              disabled={false}
               e2e="defaultSearchBarUnderlined.Input"
               onChange={[MockFunction]}
-              type="text"
               value="My search"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c1"
+                disabled={false}
+                e2e="defaultSearchBarUnderlined.Input"
+                forwardRef={null}
+                onChange={[MockFunction]}
+                type="text"
+                value="My search"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c1"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c1"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c1 c2"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBarUnderlined.Input"
-                      onChange={[MockFunction]}
-                      type="text"
-                      value="My search"
+                    <div
+                      className="c1 c2"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBarUnderlined.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c3",
-                              "rules": Array [
-                                "
+                        onChange={[MockFunction]}
+                        type="text"
+                        value="My search"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBarUnderlined.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c3",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -2385,14 +2427,14 @@ exports[`SearchBarUnderlined should render correctly with value 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -2400,54 +2442,55 @@ exports[`SearchBarUnderlined should render correctly with value 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        onChange={[MockFunction]}
-                        type="text"
-                        value="My search"
-                        width="100%"
-                      >
-                        <input
-                          className="c3"
-                          data-e2e="defaultSearchBarUnderlined.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           onChange={[MockFunction]}
                           type="text"
                           value="My search"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c3"
+                            data-e2e="defaultSearchBarUnderlined.Input"
+                            disabled={false}
+                            onChange={[MockFunction]}
+                            type="text"
+                            value="My search"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBarUnderlined.Button"
         >
@@ -2757,7 +2800,7 @@ exports[`SearchBarUnderlined should render correctly with width 1`] = `
         className="c0"
         width="200px"
       >
-        <Styled(Input)
+        <Styled(Component)
           e2e="defaultSearchBarUnderlined.Input"
           onChange={[MockFunction]}
           value="My search"
@@ -2786,122 +2829,131 @@ exports[`SearchBarUnderlined should render correctly with width 1`] = `
 ",
                   ],
                 },
-                "displayName": "Styled(Input)",
+                "displayName": "Styled(Component)",
                 "foldedComponentIds": Array [],
                 "render": [Function],
                 "styledComponentId": "sc-irJFYO",
-                "target": [Function],
+                "target": Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "render": [Function],
+                },
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
-                Symbol(Symbol.hasInstance): [Function],
               }
             }
             forwardedRef={null}
             onChange={[MockFunction]}
             value="My search"
           >
-            <Input
+            <ForwardRef(InputWithRef)
               className="c1"
-              disabled={false}
               e2e="defaultSearchBarUnderlined.Input"
               onChange={[MockFunction]}
-              type="text"
               value="My search"
-              width="100%"
             >
-              <styled.div
+              <Input
                 className="c1"
+                disabled={false}
+                e2e="defaultSearchBarUnderlined.Input"
+                forwardRef={null}
+                onChange={[MockFunction]}
+                type="text"
+                value="My search"
                 width="100%"
               >
-                <StyledComponent
+                <styled.div
                   className="c1"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-kPMMwu",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "
+                  width="100%"
+                >
+                  <StyledComponent
+                    className="c1"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "sc-kPMMwu",
+                          "isStatic": false,
+                          "lastClassName": "c2",
+                          "rules": Array [
+                            "
   display: flex;
   flex-direction: column;
   width: ",
-                          [Function],
-                          ";
+                            [Function],
+                            ";
   position: relative;
 ",
-                        ],
-                      },
-                      "displayName": "styled.div",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-kPMMwu",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
+                          ],
+                        },
+                        "displayName": "styled.div",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "sc-kPMMwu",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
                     }
-                  }
-                  forwardedRef={null}
-                  width="100%"
-                >
-                  <div
-                    className="c1 c2"
+                    forwardedRef={null}
                     width="100%"
                   >
-                    <styled.input
-                      disabled={false}
-                      e2e="defaultSearchBarUnderlined.Input"
-                      onChange={[MockFunction]}
-                      type="text"
-                      value="My search"
+                    <div
+                      className="c1 c2"
                       width="100%"
                     >
-                      <StyledComponent
+                      <styled.input
                         disabled={false}
                         e2e="defaultSearchBarUnderlined.Input"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [
-                              [Function],
-                            ],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "sc-joZmNN",
-                              "isStatic": false,
-                              "lastClassName": "c3",
-                              "rules": Array [
-                                "
+                        onChange={[MockFunction]}
+                        type="text"
+                        value="My search"
+                        width="100%"
+                      >
+                        <StyledComponent
+                          disabled={false}
+                          e2e="defaultSearchBarUnderlined.Input"
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [
+                                [Function],
+                              ],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "sc-joZmNN",
+                                "isStatic": false,
+                                "lastClassName": "c3",
+                                "rules": Array [
+                                  "
   display: block;
   height: 2.7rem;
   width: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   padding: 0 1rem;
   box-sizing: border-box;
   font-family: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-width: 1px;
   border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   border-style: solid;
   border-radius: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   background-image: none;
   outline-width: 0;
   user-select: text;
@@ -2909,14 +2961,14 @@ exports[`SearchBarUnderlined should render correctly with width 1`] = `
 
   &:disabled {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     border-color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     background: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     cursor: not-allowed;
   }
 
@@ -2924,54 +2976,55 @@ exports[`SearchBarUnderlined should render correctly with width 1`] = `
   &:focus:not(:disabled) {
     box-shadow: 0 0 0 1px
       ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 
   &::placeholder {
     color: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
     font-size: ",
-                                [Function],
-                                ";
+                                  [Function],
+                                  ";
   }
 ",
-                              ],
-                            },
-                            "displayName": "styled.input",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "sc-joZmNN",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
+                                ],
+                              },
+                              "displayName": "styled.input",
+                              "foldedComponentIds": Array [],
+                              "render": [Function],
+                              "styledComponentId": "sc-joZmNN",
+                              "target": "input",
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
                           }
-                        }
-                        forwardedRef={null}
-                        onChange={[MockFunction]}
-                        type="text"
-                        value="My search"
-                        width="100%"
-                      >
-                        <input
-                          className="c3"
-                          data-e2e="defaultSearchBarUnderlined.Input"
-                          disabled={false}
+                          forwardedRef={null}
                           onChange={[MockFunction]}
                           type="text"
                           value="My search"
                           width="100%"
-                        />
-                      </StyledComponent>
-                    </styled.input>
-                  </div>
-                </StyledComponent>
-              </styled.div>
-            </Input>
+                        >
+                          <input
+                            className="c3"
+                            data-e2e="defaultSearchBarUnderlined.Input"
+                            disabled={false}
+                            onChange={[MockFunction]}
+                            type="text"
+                            value="My search"
+                            width="100%"
+                          />
+                        </StyledComponent>
+                      </styled.input>
+                    </div>
+                  </StyledComponent>
+                </styled.div>
+              </Input>
+            </ForwardRef(InputWithRef)>
           </StyledComponent>
-        </Styled(Input)>
+        </Styled(Component)>
         <styled.div
           e2e="defaultSearchBarUnderlined.Button"
         >