diff --git a/packages/hs-react-ui/src/components/Button/Button.tsx b/packages/hs-react-ui/src/components/Button/Button.tsx
index b0abe8ec9..024a4e355 100644
--- a/packages/hs-react-ui/src/components/Button/Button.tsx
+++ b/packages/hs-react-ui/src/components/Button/Button.tsx
@@ -143,7 +143,7 @@ const Button = ({
   isProcessing,
   children,
   elevation = 0,
-  feedbackType = FeedbackTypes.simple,
+  feedbackType = FeedbackTypes.ripple,
   interactionFeedbackProps,
   variant = variants.fill,
   type = ButtonTypes.button,
diff --git a/packages/hs-react-ui/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/hs-react-ui/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index 326782d8c..59a96ded0 100644
--- a/packages/hs-react-ui/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/hs-react-ui/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button keeps the container the same when switching between isLoading and not isLoading 1`] = `
-.c0 {
+.c3 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -22,11 +29,11 @@ exports[`Button keeps the container the same when switching between isLoading an
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #707479;
 }
 
-.c1 {
+.c2 {
   background: linear-gradient( 45deg, rgba(255,255,255,0.75), rgba(0,0,0,0.75), rgba(255,255,255,0.75), rgba(0,0,0,0.75), rgba(255,255,255,0.75) ) repeat;
   background-size: 400% 100%;
   width: 6rem;
@@ -41,21 +48,43 @@ exports[`Button keeps the container the same when switching between isLoading an
   margin-bottom: -5px;
 }
 
-<button
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+<div
   class="c0"
-  color="#7c8186"
-  data-test-id="hsui-button"
-  elevation="0"
-  type="button"
 >
-  <div
+  <button
     class="c1"
+    color="#7c8186"
+    data-test-id="hsui-button"
+    elevation="0"
+    type="button"
+  >
+    <div
+      class="c2"
+    />
+  </button>
+  <svg
+    class="c3"
+    height="0px"
+    viewBox="0 0 0 0"
+    width="0px"
   />
-</button>
+</div>
 `;
 
 exports[`Button keeps the container the same when switching between isLoading and not isLoading 2`] = `
-.c0 {
+.c2 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -76,23 +105,45 @@ exports[`Button keeps the container the same when switching between isLoading an
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #707479;
 }
 
-<button
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+<div
   class="c0"
-  color="#7c8186"
-  data-test-id="hsui-button"
-  elevation="0"
-  type="button"
 >
-  Submit
-</button>
+  <button
+    class="c1"
+    color="#7c8186"
+    data-test-id="hsui-button"
+    elevation="0"
+    type="button"
+  >
+    Submit
+  </button>
+  <svg
+    class="c2"
+    height="0px"
+    viewBox="0 0 0 0"
+    width="0px"
+  />
+</div>
 `;
 
 exports[`Button shows ButtonContainer ButtonVariant.fill 1`] = `
-.c0 {
+.c2 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -113,23 +164,45 @@ exports[`Button shows ButtonContainer ButtonVariant.fill 1`] = `
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #707479;
 }
 
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
 <div>
-  <button
+  <div
     class="c0"
-    color="#7c8186"
-    data-test-id="hsui-button"
-    elevation="0"
-    type="button"
-  />
+  >
+    <button
+      class="c1"
+      color="#7c8186"
+      data-test-id="hsui-button"
+      elevation="0"
+      type="button"
+    />
+    <svg
+      class="c2"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
+    />
+  </div>
 </div>
 `;
 
 exports[`Button shows ButtonContainer ButtonVariant.outline 1`] = `
-.c0 {
+.c2 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -150,23 +223,45 @@ exports[`Button shows ButtonContainer ButtonVariant.outline 1`] = `
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
 <div>
-  <button
+  <div
     class="c0"
-    color="#7c8186"
-    data-test-id="hsui-button"
-    elevation="0"
-    type="button"
-  />
+  >
+    <button
+      class="c1"
+      color="#7c8186"
+      data-test-id="hsui-button"
+      elevation="0"
+      type="button"
+    />
+    <svg
+      class="c2"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
+    />
+  </div>
 </div>
 `;
 
 exports[`Button shows ButtonContainer ButtonVariant.text 1`] = `
-.c0 {
+.c2 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -187,23 +282,45 @@ exports[`Button shows ButtonContainer ButtonVariant.text 1`] = `
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
 <div>
-  <button
+  <div
     class="c0"
-    color="#7c8186"
-    data-test-id="hsui-button"
-    elevation="0"
-    type="button"
-  />
+  >
+    <button
+      class="c1"
+      color="#7c8186"
+      data-test-id="hsui-button"
+      elevation="0"
+      type="button"
+    />
+    <svg
+      class="c2"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
+    />
+  </div>
 </div>
 `;
 
 exports[`Button shows ButtonContainer with nondefault props variant and color 1`] = `
-.c0 {
+.c2 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -226,23 +343,45 @@ exports[`Button shows ButtonContainer with nondefault props variant and color 1`
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
 <div>
-  <button
+  <div
     class="c0"
-    color="#000"
-    data-test-id="hsui-button"
-    elevation="2"
-    type="button"
-  />
+  >
+    <button
+      class="c1"
+      color="#000"
+      data-test-id="hsui-button"
+      elevation="2"
+      type="button"
+    />
+    <svg
+      class="c2"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
+    />
+  </div>
 </div>
 `;
 
 exports[`Button shows LeftIconContainer when isProcessing 1`] = `
-.c0 {
+.c3 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -263,55 +402,77 @@ exports[`Button shows LeftIconContainer when isProcessing 1`] = `
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #707479;
 }
 
-.c1 {
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+.c2 {
   height: 1rem;
   vertical-align: middle;
 }
 
 <div>
-  <button
+  <div
     class="c0"
-    color="#7c8186"
-    data-test-id="hsui-button"
-    elevation="0"
-    type="button"
   >
-    <div
+    <button
       class="c1"
+      color="#7c8186"
+      data-test-id="hsui-button"
+      elevation="0"
+      type="button"
     >
-      <svg
-        role="presentation"
-        style="width: 1rem; height: 1rem;"
-        viewBox="0 0 24 24"
+      <div
+        class="c2"
       >
-        <style>
-          @keyframes spin { to { transform: rotate(360deg) } }
-        </style>
-        <g
-          style="animation: spin linear 1s infinite; transform-origin: center;"
+        <svg
+          role="presentation"
+          style="width: 1rem; height: 1rem;"
+          viewBox="0 0 24 24"
         >
-          <path
-            d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-            style="fill: currentColor;"
-          />
-          <rect
-            fill="transparent"
-            height="24"
-            width="24"
-          />
-        </g>
-      </svg>
-    </div>
-  </button>
+          <style>
+            @keyframes spin { to { transform: rotate(360deg) } }
+          </style>
+          <g
+            style="animation: spin linear 1s infinite; transform-origin: center;"
+          >
+            <path
+              d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+              style="fill: currentColor;"
+            />
+            <rect
+              fill="transparent"
+              height="24"
+              width="24"
+            />
+          </g>
+        </svg>
+      </div>
+    </button>
+    <svg
+      class="c3"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
+    />
+  </div>
 </div>
 `;
 
 exports[`Button shows icons 1`] = `
-.c0 {
+.c4 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -332,60 +493,82 @@ exports[`Button shows icons 1`] = `
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #707479;
 }
 
-.c1 {
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+.c2 {
   height: 1rem;
   vertical-align: middle;
 }
 
-.c2 {
+.c3 {
   height: 1rem;
   vertical-align: middle;
 }
 
 <div>
-  <button
+  <div
     class="c0"
-    color="#7c8186"
-    data-test-id="hsui-button"
-    elevation="0"
-    type="button"
   >
-    <div
+    <button
       class="c1"
+      color="#7c8186"
+      data-test-id="hsui-button"
+      elevation="0"
+      type="button"
     >
-      <svg
-        role="presentation"
-        viewBox="0 0 24 24"
+      <div
+        class="c2"
       >
-        <path
-          d="mdiComment"
-          style="fill: currentColor;"
-        />
-      </svg>
-    </div>
-    <div
-      class="c2"
-    >
-      <svg
-        role="presentation"
-        viewBox="0 0 24 24"
+        <svg
+          role="presentation"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="mdiComment"
+            style="fill: currentColor;"
+          />
+        </svg>
+      </div>
+      <div
+        class="c3"
       >
-        <path
-          d="mdiComment"
-          style="fill: currentColor;"
-        />
-      </svg>
-    </div>
-  </button>
+        <svg
+          role="presentation"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="mdiComment"
+            style="fill: currentColor;"
+          />
+        </svg>
+      </div>
+    </button>
+    <svg
+      class="c4"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
+    />
+  </div>
 </div>
 `;
 
 exports[`Button shows icons with type string 1`] = `
-.c0 {
+.c4 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -406,62 +589,84 @@ exports[`Button shows icons with type string 1`] = `
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #707479;
 }
 
-.c1 {
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
+.c2 {
   height: 1rem;
   vertical-align: middle;
 }
 
-.c2 {
+.c3 {
   height: 1rem;
   vertical-align: middle;
 }
 
 <div>
-  <button
+  <div
     class="c0"
-    color="#7c8186"
-    data-test-id="hsui-button"
-    elevation="0"
-    type="button"
   >
-    <div
+    <button
       class="c1"
+      color="#7c8186"
+      data-test-id="hsui-button"
+      elevation="0"
+      type="button"
     >
-      <svg
-        role="presentation"
-        style="width: 1rem; height: 1rem;"
-        viewBox="0 0 24 24"
+      <div
+        class="c2"
       >
-        <path
-          d="mdiComment"
-          style="fill: currentColor;"
-        />
-      </svg>
-    </div>
-    <div
-      class="c2"
-    >
-      <svg
-        role="presentation"
-        style="width: 1rem; height: 1rem;"
-        viewBox="0 0 24 24"
+        <svg
+          role="presentation"
+          style="width: 1rem; height: 1rem;"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="mdiComment"
+            style="fill: currentColor;"
+          />
+        </svg>
+      </div>
+      <div
+        class="c3"
       >
-        <path
-          d="mdiComment"
-          style="fill: currentColor;"
-        />
-      </svg>
-    </div>
-  </button>
+        <svg
+          role="presentation"
+          style="width: 1rem; height: 1rem;"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="mdiComment"
+            style="fill: currentColor;"
+          />
+        </svg>
+      </div>
+    </button>
+    <svg
+      class="c4"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
+    />
+  </div>
 </div>
 `;
 
 exports[`Button shows loading text when provided 1`] = `
-.c0 {
+.c3 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -482,11 +687,11 @@ exports[`Button shows loading text when provided 1`] = `
   align-items: center;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #707479;
 }
 
-.c1 {
+.c2 {
   background: linear-gradient( 45deg, rgba(255,255,255,0.75), rgba(0,0,0,0.75), rgba(255,255,255,0.75), rgba(0,0,0,0.75), rgba(255,255,255,0.75) ) repeat;
   background-size: 400% 100%;
   width: 6rem;
@@ -501,17 +706,32 @@ exports[`Button shows loading text when provided 1`] = `
   margin-bottom: -5px;
 }
 
+.c0 {
+  position: relative;
+  display: inline-block;
+}
+
 <div>
-  <button
+  <div
     class="c0"
-    color="#7c8186"
-    data-test-id="hsui-button"
-    elevation="0"
-    type="button"
   >
-    <div
+    <button
       class="c1"
+      color="#7c8186"
+      data-test-id="hsui-button"
+      elevation="0"
+      type="button"
+    >
+      <div
+        class="c2"
+      />
+    </button>
+    <svg
+      class="c3"
+      height="0px"
+      viewBox="0 0 0 0"
+      width="0px"
     />
-  </button>
+  </div>
 </div>
 `;
diff --git a/packages/hs-react-ui/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/hs-react-ui/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
index 547476e3c..bfd867883 100644
--- a/packages/hs-react-ui/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/hs-react-ui/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1,6 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown can focus dropdown and select option 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -11,7 +23,7 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -49,11 +61,11 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -69,12 +81,12 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   font-size: 1rem;
   color: undefined;
   opacity: 0.8;
@@ -89,45 +101,67 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          data-test-id="hsui-Text"
-        />
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          id="choosePokemon-value-item"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
+          <span
+            class="c4"
+            data-test-id="hsui-Text"
           />
-        </svg>
-      </div>
-    </button>
+        </div>
+        <div
+          class="c5"
+        >
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown closes options when clicking outside 1`] = `
 <DocumentFragment>
-  .c0 {
+  .c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
+.c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -137,7 +171,7 @@ exports[`Dropdown closes options when clicking outside 1`] = `
   z-index: 7;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -178,11 +212,11 @@ exports[`Dropdown closes options when clicking outside 1`] = `
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -198,12 +232,12 @@ exports[`Dropdown closes options when clicking outside 1`] = `
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c5 {
+.c7 {
   background: white;
   position: absolute;
   top: 100%;
@@ -217,7 +251,7 @@ exports[`Dropdown closes options when clicking outside 1`] = `
   z-index: 1000;
 }
 
-.c6 {
+.c8 {
   padding: 0.5rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -231,18 +265,18 @@ exports[`Dropdown closes options when clicking outside 1`] = `
   background-color: transparent;
 }
 
-.c6:hover {
+.c8:hover {
   background-color: rgba(0,0,0,0.05);
   cursor: pointer;
   outline: none;
 }
 
-.c6:focus {
+.c8:focus {
   outline: none;
   background-color: rgba(0,0,0,0.1);
 }
 
-.c3 {
+.c4 {
   font-size: 1rem;
   color: undefined;
   opacity: 0.8;
@@ -256,44 +290,54 @@ exports[`Dropdown closes options when clicking outside 1`] = `
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          data-test-id="hsui-Text"
-        />
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          id="choosePokemon-value-item"
         >
-          <path
-            d="M7,15L12,10L17,15H7Z"
-            style="fill: currentColor;"
+          <span
+            class="c4"
+            data-test-id="hsui-Text"
           />
-        </svg>
-      </div>
-    </button>
+        </div>
+        <div
+          class="c5"
+        >
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,15L12,10L17,15H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
     <div
-      class="c5"
+      class="c7"
       color="#252c35"
     >
       <div
-        class="c6"
+        class="c8"
         color="#252c35"
         id="choosePokemon-option-bulbasaur"
         tabindex="0"
@@ -305,7 +349,7 @@ exports[`Dropdown closes options when clicking outside 1`] = `
         </span>
       </div>
       <div
-        class="c6"
+        class="c8"
         color="#252c35"
         id="choosePokemon-option-charmander"
         tabindex="0"
@@ -317,7 +361,7 @@ exports[`Dropdown closes options when clicking outside 1`] = `
         </span>
       </div>
       <div
-        class="c6"
+        class="c8"
         color="#252c35"
         id="choosePokemon-option-squirtle"
         tabindex="0"
@@ -335,7 +379,19 @@ exports[`Dropdown closes options when clicking outside 1`] = `
 
 exports[`Dropdown closes options when clicking outside 2`] = `
 <DocumentFragment>
-  .c0 {
+  .c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
+.c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -345,7 +401,7 @@ exports[`Dropdown closes options when clicking outside 2`] = `
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -383,11 +439,11 @@ exports[`Dropdown closes options when clicking outside 2`] = `
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -403,12 +459,12 @@ exports[`Dropdown closes options when clicking outside 2`] = `
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   font-size: 1rem;
   color: undefined;
   opacity: 0.8;
@@ -422,43 +478,65 @@ exports[`Dropdown closes options when clicking outside 2`] = `
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          data-test-id="hsui-Text"
-        />
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          id="choosePokemon-value-item"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
+          <span
+            class="c4"
+            data-test-id="hsui-Text"
           />
-        </svg>
-      </div>
-    </button>
+        </div>
+        <div
+          class="c5"
+        >
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`Dropdown deselects option when clicking on them twice when dropdown is multi 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -469,7 +547,7 @@ exports[`Dropdown deselects option when clicking on them twice when dropdown is
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -507,11 +585,11 @@ exports[`Dropdown deselects option when clicking on them twice when dropdown is
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -527,12 +605,12 @@ exports[`Dropdown deselects option when clicking on them twice when dropdown is
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   font-size: 1rem;
   color: undefined;
   opacity: 0.8;
@@ -547,43 +625,65 @@ exports[`Dropdown deselects option when clicking on them twice when dropdown is
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          data-test-id="hsui-Text"
-        />
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          id="choosePokemon-value-item"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
+          <span
+            class="c4"
+            data-test-id="hsui-Text"
           />
-        </svg>
-      </div>
-    </button>
+        </div>
+        <div
+          class="c5"
+        >
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown displays all options when focused 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -594,7 +694,7 @@ exports[`Dropdown displays all options when focused 1`] = `
   z-index: 7;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -635,11 +735,11 @@ exports[`Dropdown displays all options when focused 1`] = `
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -655,12 +755,12 @@ exports[`Dropdown displays all options when focused 1`] = `
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c5 {
+.c7 {
   background: white;
   position: absolute;
   top: 100%;
@@ -674,7 +774,7 @@ exports[`Dropdown displays all options when focused 1`] = `
   z-index: 1000;
 }
 
-.c6 {
+.c8 {
   padding: 0.5rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -688,18 +788,18 @@ exports[`Dropdown displays all options when focused 1`] = `
   background-color: transparent;
 }
 
-.c6:hover {
+.c8:hover {
   background-color: rgba(0,0,0,0.05);
   cursor: pointer;
   outline: none;
 }
 
-.c6:focus {
+.c8:focus {
   outline: none;
   background-color: rgba(0,0,0,0.1);
 }
 
-.c3 {
+.c4 {
   font-size: 1rem;
   color: undefined;
   opacity: 0.8;
@@ -714,44 +814,54 @@ exports[`Dropdown displays all options when focused 1`] = `
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          data-test-id="hsui-Text"
-        />
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          id="choosePokemon-value-item"
         >
-          <path
-            d="M7,15L12,10L17,15H7Z"
-            style="fill: currentColor;"
+          <span
+            class="c4"
+            data-test-id="hsui-Text"
           />
-        </svg>
-      </div>
-    </button>
+        </div>
+        <div
+          class="c5"
+        >
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,15L12,10L17,15H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
     <div
-      class="c5"
+      class="c7"
       color="#252c35"
     >
       <div
-        class="c6"
+        class="c8"
         color="#252c35"
         id="choosePokemon-option-bulbasaur"
         tabindex="0"
@@ -763,7 +873,7 @@ exports[`Dropdown displays all options when focused 1`] = `
         </span>
       </div>
       <div
-        class="c6"
+        class="c8"
         color="#252c35"
         id="choosePokemon-option-charmander"
         tabindex="0"
@@ -775,7 +885,7 @@ exports[`Dropdown displays all options when focused 1`] = `
         </span>
       </div>
       <div
-        class="c6"
+        class="c8"
         color="#252c35"
         id="choosePokemon-option-squirtle"
         tabindex="0"
@@ -792,6 +902,18 @@ exports[`Dropdown displays all options when focused 1`] = `
 `;
 
 exports[`Dropdown displays placeholder value on initial render 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -802,7 +924,7 @@ exports[`Dropdown displays placeholder value on initial render 1`] = `
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -840,11 +962,11 @@ exports[`Dropdown displays placeholder value on initial render 1`] = `
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -860,12 +982,12 @@ exports[`Dropdown displays placeholder value on initial render 1`] = `
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   font-size: 1rem;
   color: undefined;
   opacity: 0.8;
@@ -880,45 +1002,67 @@ exports[`Dropdown displays placeholder value on initial render 1`] = `
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          data-test-id="hsui-Text"
+          id="choosePokemon-value-item"
         >
-          Choose a pokemon
-        </span>
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          <span
+            class="c4"
+            data-test-id="hsui-Text"
+          >
+            Choose a pokemon
+          </span>
+        </div>
+        <div
+          class="c5"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
-          />
-        </svg>
-      </div>
-    </button>
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown does not display options on initial render 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -929,7 +1073,7 @@ exports[`Dropdown does not display options on initial render 1`] = `
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -967,11 +1111,11 @@ exports[`Dropdown does not display options on initial render 1`] = `
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -987,12 +1131,12 @@ exports[`Dropdown does not display options on initial render 1`] = `
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   font-size: 1rem;
   color: undefined;
   opacity: 0.8;
@@ -1007,43 +1151,65 @@ exports[`Dropdown does not display options on initial render 1`] = `
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          data-test-id="hsui-Text"
-        />
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          id="choosePokemon-value-item"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
+          <span
+            class="c4"
+            data-test-id="hsui-Text"
           />
-        </svg>
-      </div>
-    </button>
+        </div>
+        <div
+          class="c5"
+        >
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown renders a value when given a matching option id through props 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -1054,7 +1220,7 @@ exports[`Dropdown renders a value when given a matching option id through props
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1092,11 +1258,11 @@ exports[`Dropdown renders a value when given a matching option id through props
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1112,12 +1278,12 @@ exports[`Dropdown renders a value when given a matching option id through props
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1152,46 +1318,68 @@ exports[`Dropdown renders a value when given a matching option id through props
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          color="#7c8186"
-          elevation="0"
+          id="choosePokemon-value-item"
         >
-          Bulbasaur
-        </span>
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Bulbasaur
+          </span>
+        </div>
+        <div
+          class="c5"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
-          />
-        </svg>
-      </div>
-    </button>
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown renders no value when given a value that doesn't match any option id 1`] = `
+.c5 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -1202,7 +1390,7 @@ exports[`Dropdown renders no value when given a value that doesn't match any opt
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1240,11 +1428,11 @@ exports[`Dropdown renders no value when given a value that doesn't match any opt
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1260,7 +1448,7 @@ exports[`Dropdown renders no value when given a value that doesn't match any opt
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
@@ -1274,38 +1462,60 @@ exports[`Dropdown renders no value when given a value that doesn't match any opt
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
-      />
-      <div
-        class="c3"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+        <div
+          class="c3"
+          id="choosePokemon-value-item"
+        />
+        <div
+          class="c4"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
-          />
-        </svg>
-      </div>
-    </button>
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c5"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown renders one value when given two values but only one matches an option id 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -1316,7 +1526,7 @@ exports[`Dropdown renders one value when given two values but only one matches a
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1354,11 +1564,11 @@ exports[`Dropdown renders one value when given two values but only one matches a
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1374,12 +1584,12 @@ exports[`Dropdown renders one value when given two values but only one matches a
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1414,46 +1624,68 @@ exports[`Dropdown renders one value when given two values but only one matches a
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          color="#7c8186"
-          elevation="0"
+          id="choosePokemon-value-item"
         >
-          Bulbasaur
-        </span>
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Bulbasaur
+          </span>
+        </div>
+        <div
+          class="c5"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
-          />
-        </svg>
-      </div>
-    </button>
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown renders two values when given matching option ids through props 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -1464,7 +1696,7 @@ exports[`Dropdown renders two values when given matching option ids through prop
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1502,11 +1734,11 @@ exports[`Dropdown renders two values when given matching option ids through prop
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1522,12 +1754,12 @@ exports[`Dropdown renders two values when given matching option ids through prop
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1562,54 +1794,76 @@ exports[`Dropdown renders two values when given matching option ids through prop
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          color="#7c8186"
-          elevation="0"
+          id="choosePokemon-value-item"
         >
-          Bulbasaur
-          ,
-        </span>
-        <span
-          class="c3"
-          color="#7c8186"
-          elevation="0"
-        >
-          Charmander
-        </span>
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Bulbasaur
+            ,
+          </span>
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Charmander
+          </span>
+        </div>
+        <div
+          class="c5"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
-          />
-        </svg>
-      </div>
-    </button>
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown renders two values when given matching option ids through props when multi is set to true 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -1620,7 +1874,7 @@ exports[`Dropdown renders two values when given matching option ids through prop
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1658,11 +1912,11 @@ exports[`Dropdown renders two values when given matching option ids through prop
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1678,12 +1932,12 @@ exports[`Dropdown renders two values when given matching option ids through prop
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1718,54 +1972,76 @@ exports[`Dropdown renders two values when given matching option ids through prop
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
+        <div
           class="c3"
-          color="#7c8186"
-          elevation="0"
+          id="choosePokemon-value-item"
         >
-          Bulbasaur
-          ,
-        </span>
-        <span
-          class="c3"
-          color="#7c8186"
-          elevation="0"
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Bulbasaur
+            ,
+          </span>
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Charmander
+          </span>
+        </div>
+        <div
+          class="c5"
         >
-          Charmander
-        </span>
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
-          />
-        </svg>
-      </div>
-    </button>
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`Dropdown selects options from values prop 1`] = `
+.c6 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
 .c0 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -1776,7 +2052,7 @@ exports[`Dropdown selects options from values prop 1`] = `
   z-index: 1;
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1814,11 +2090,11 @@ exports[`Dropdown selects options from values prop 1`] = `
   padding: .5rem 1rem;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1834,12 +2110,12 @@ exports[`Dropdown selects options from values prop 1`] = `
   width: 3rem;
 }
 
-.c2 {
+.c3 {
   width: 100%;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1874,49 +2150,59 @@ exports[`Dropdown selects options from values prop 1`] = `
     name="choosePokemon"
     tabindex="0"
   >
-    <button
+    <div
       class="c1"
-      color="#252c35"
-      data-test-id="hsui-button"
-      elevation="0"
-      id="choosePokemon-button-value"
-      type="button"
     >
-      <div
+      <button
         class="c2"
-        id="choosePokemon-value-item"
+        color="#252c35"
+        data-test-id="hsui-button"
+        elevation="0"
+        id="choosePokemon-button-value"
+        type="button"
       >
-        <span
-          class="c3"
-          color="#7c8186"
-          elevation="0"
-        >
-          Bulbasaur
-          ,
-        </span>
-        <span
+        <div
           class="c3"
-          color="#7c8186"
-          elevation="0"
+          id="choosePokemon-value-item"
         >
-          Charmander
-        </span>
-      </div>
-      <div
-        class="c4"
-      >
-        <svg
-          role="presentation"
-          style="width: 1.25em; height: 1.25em;"
-          viewBox="0 0 24 24"
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Bulbasaur
+            ,
+          </span>
+          <span
+            class="c4"
+            color="#7c8186"
+            elevation="0"
+          >
+            Charmander
+          </span>
+        </div>
+        <div
+          class="c5"
         >
-          <path
-            d="M7,10L12,15L17,10H7Z"
-            style="fill: currentColor;"
-          />
-        </svg>
-      </div>
-    </button>
+          <svg
+            role="presentation"
+            style="width: 1.25em; height: 1.25em;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7,10L12,15L17,10H7Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+        </div>
+      </button>
+      <svg
+        class="c6"
+        height="0px"
+        viewBox="0 0 0 0"
+        width="0px"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.stories.tsx b/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.stories.tsx
index f56656881..7a1fc89d8 100644
--- a/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.stories.tsx
+++ b/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { color, number } from '@storybook/addon-knobs';
+import { color, number, boolean } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -17,7 +17,7 @@ storiesOf('InteractionFeedback', module).add(
   () => {
     const entranceOpacity = number(
       'Circle entrance opacity',
-      0.25,
+      0.5,
       {
         range: true,
         min: 0,
@@ -38,15 +38,6 @@ storiesOf('InteractionFeedback', module).add(
       'Circle fill',
     );
     const transitionProps = {
-      enter: {
-        r: `${number(
-          'Maximum circle radius',
-          100,
-          { range: true, min: 0, max: 100, step: 1 },
-          'Circle radius',
-        )}`,
-        opacity: entranceOpacity,
-      },
       from: {
         r: `${number(
           'Starting circle radius',
@@ -56,20 +47,20 @@ storiesOf('InteractionFeedback', module).add(
         )}`,
         opacity: entranceOpacity,
       },
-      leave: {
+      enter: {
         r: `${number(
           'Ending circle radius',
-          0,
+          75,
           { range: true, min: 0, max: 100, step: 1 },
           'Circle radius',
         )}`,
         opacity: exitOpacity,
       },
       config: {
-        mass: number('mass', 1, { range: true, min: 1, max: 10, step: 1 }, 'Circle physics'),
+        mass: number('mass', 10, { range: true, min: 1, max: 100, step: 1 }, 'Circle physics'),
         tension: number(
           'tension',
-          750,
+          500,
           { range: true, min: 50, max: 1000, step: 50 },
           'Circle physics',
         ),
@@ -79,6 +70,7 @@ storiesOf('InteractionFeedback', module).add(
           { range: true, min: 1, max: 100, step: 5 },
           'Circle physics',
         ),
+        clamp: boolean('clamp', true, 'Circle physics'),
       },
     };
 
diff --git a/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.tsx b/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.tsx
index 95ad48658..934495114 100644
--- a/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.tsx
+++ b/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.tsx
@@ -6,7 +6,7 @@ import useResizeObserver from 'use-resize-observer/polyfilled';
 import colors from '../../enums/colors';
 import { SubcomponentPropsType } from '../commonTypes';
 
-const Circle = styled.svg`
+const SVGContainer = styled.svg`
   pointer-events: none;
   position: absolute;
   top: 0;
@@ -21,7 +21,9 @@ type Animation = { cx: string; cy: string; id: string };
 type Transition = { r: string } & Animation;
 export type InteractionFeedbackProps = {
   StyledContainer?: string & StyledComponentBase<any, {}>;
+  StyledSVGContainer?: string & StyledComponentBase<any, {}>;
   containerProps?: SubcomponentPropsType;
+  svgContainerProps?: SubcomponentPropsType;
 
   children: React.ReactNode;
   color?: string;
@@ -36,32 +38,31 @@ const defaultInterpolationFunctions = {
 const defaultTransitionProps = {
   from: {
     r: 0,
-    opacity: 0.25,
+    opacity: 0.5,
   },
   enter: {
-    r: 100,
-    opacity: 0.25,
-  },
-  leave: {
-    r: 0,
+    r: 75,
     opacity: 0,
   },
   config: {
-    mass: 1,
-    tension: 750,
+    mass: 10,
+    tension: 500,
     friction: 35,
+    clamp: true,
   },
 };
 const InteractionFeedback = ({
   StyledContainer = Container,
+  StyledSVGContainer = SVGContainer,
   containerProps = {},
+  svgContainerProps = {},
   color = colors.primary,
 
   children,
   interpolationFunctions = defaultInterpolationFunctions,
   transitionProps = { ...defaultTransitionProps },
 }: InteractionFeedbackProps) => {
-  const { ref, width, height } = useResizeObserver();
+  const { ref, width = 0, height = 0 } = useResizeObserver();
   const [animations, setAnimations] = useState<Array<Animation>>([]);
 
   const transitions = useTransition<Animation, Record<string, unknown>>(animations, {
@@ -97,14 +98,20 @@ const InteractionFeedback = ({
   return (
     <StyledContainer ref={ref} onMouseDown={mouseDownHandler} {...containerProps}>
       {children}
-      <Circle width={`${width}px`} height={`${height}px`} viewBox={`0 0 ${width} ${height}`}>
+      <StyledSVGContainer
+        width={`${width}px`}
+        height={`${height}px`}
+        viewBox={`0 0 ${width} ${height}`}
+        {...svgContainerProps}
+      >
         {fragment}
-      </Circle>
+      </StyledSVGContainer>
     </StyledContainer>
   );
 };
 
 InteractionFeedback.Container = Container;
+InteractionFeedback.SVGContainer = SVGContainer;
 InteractionFeedback.defaultTransitionProps = defaultTransitionProps;
 InteractionFeedback.defaultInterpolationFunctions = defaultInterpolationFunctions;