diff --git a/package.json b/package.json
index 8ec1d79dec3e6..e5b6daabdd7e8 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
   },
   "dependencies": {
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "7.1.0",
+    "@elastic/eui": "9.0.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.2",
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
index de6c8292d4de7..3281c50463fd9 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
@@ -94,6 +94,7 @@ exports[`renders ControlsTab 1`] = `
           fullWidth={false}
           hasEmptyLabelSpace={false}
           id="selectControlType"
+          labelType="label"
         >
           <EuiSelect
             aria-label="Select control type"
@@ -127,6 +128,7 @@ exports[`renders ControlsTab 1`] = `
           fullWidth={false}
           hasEmptyLabelSpace={false}
           id="addControl"
+          labelType="label"
         >
           <EuiButton
             aria-label="Add control"
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
index e05bfac6fd803..db9c6f27c4457 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
@@ -28,6 +28,7 @@ exports[`renders dynamic options should display disabled dynamic options with to
     }
     id="multiselect-0"
     key="multiselect"
+    labelType="label"
   >
     <EuiSwitch
       checked={true}
@@ -55,6 +56,7 @@ exports[`renders dynamic options should display disabled dynamic options with to
     }
     id="dynamicOptions-0"
     key="dynamicOptions"
+    labelType="label"
   >
     <EuiSwitch
       checked={true}
@@ -90,6 +92,7 @@ exports[`renders dynamic options should display disabled dynamic options with to
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
@@ -132,6 +135,7 @@ exports[`renders dynamic options should display dynamic options for string field
     }
     id="multiselect-0"
     key="multiselect"
+    labelType="label"
   >
     <EuiSwitch
       checked={true}
@@ -159,6 +163,7 @@ exports[`renders dynamic options should display dynamic options for string field
     }
     id="dynamicOptions-0"
     key="dynamicOptions"
+    labelType="label"
   >
     <EuiSwitch
       checked={true}
@@ -205,6 +210,7 @@ exports[`renders dynamic options should display size field when dynamic options
     }
     id="multiselect-0"
     key="multiselect"
+    labelType="label"
   >
     <EuiSwitch
       checked={true}
@@ -232,6 +238,7 @@ exports[`renders dynamic options should display size field when dynamic options
     }
     id="dynamicOptions-0"
     key="dynamicOptions"
+    labelType="label"
   >
     <EuiSwitch
       checked={false}
@@ -267,6 +274,7 @@ exports[`renders dynamic options should display size field when dynamic options
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
@@ -316,6 +324,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -354,6 +363,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
     }
     id="multiselect-0"
     key="multiselect"
+    labelType="label"
   >
     <EuiSwitch
       checked={true}
@@ -381,6 +391,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
     }
     id="dynamicOptions-0"
     key="dynamicOptions"
+    labelType="label"
   >
     <EuiSwitch
       checked={false}
@@ -416,6 +427,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
index 522ea00ffd194..807241adadf11 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
@@ -7,6 +7,7 @@ exports[`renders OptionsTab 1`] = `
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="updateFiltersOnChange"
+    labelType="label"
   >
     <EuiSwitch
       checked={false}
@@ -26,6 +27,7 @@ exports[`renders OptionsTab 1`] = `
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="useTimeFilter"
+    labelType="label"
   >
     <EuiSwitch
       checked={false}
@@ -45,6 +47,7 @@ exports[`renders OptionsTab 1`] = `
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="pinFilters"
+    labelType="label"
   >
     <EuiSwitch
       data-test-subj="inputControlEditorPinFiltersCheckbox"
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
index 627af7e573094..2df5162032ce6 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
@@ -27,6 +27,7 @@ exports[`renders RangeControlEditor 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
@@ -49,6 +50,7 @@ exports[`renders RangeControlEditor 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
index ffd55e7b0bac7..e178418c48ab0 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
@@ -8,6 +8,7 @@ exports[`renders disabled control with tooltip 1`] = `
   hasEmptyLabelSpace={false}
   id="controlId"
   label="test control"
+  labelType="label"
 >
   <EuiToolTip
     content="I am disabled for testing purposes"
@@ -30,6 +31,7 @@ exports[`renders enabled control 1`] = `
   hasEmptyLabelSpace={false}
   id="controlId"
   label="test control"
+  labelType="label"
 >
   <div>
     My Control
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
index 19b7a7aeb64ca..a4ca2c399be54 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
@@ -13,12 +13,13 @@ exports[`disabled 1`] = `
     fullWidth={false}
     levels={Array []}
     max={100}
-    min={1}
+    min={0}
     showInput={false}
     showLabels={false}
     showRange={false}
     showTicks={false}
     showValue={false}
+    step={1}
   />
 </FormRow>
 `;
@@ -37,6 +38,7 @@ exports[`renders RangeControl 1`] = `
     fullWidth={false}
     hasEmptyLabelSpace={false}
     isInvalid={false}
+    labelType="label"
   >
     <EuiFlexGroup
       alignItems="center"
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/clone_modal.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/clone_modal.test.js.snap
index 92e8f07ea0da4..35412b16d7fdb 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/clone_modal.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/clone_modal.test.js.snap
@@ -30,9 +30,7 @@ exports[`renders DashboardCloneModal 1`] = `
           />
         </p>
       </EuiText>
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiFieldText
         autoFocus={true}
         compressed={false}
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
index aae42c0b98ce0..c626fcd2b2292 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
@@ -18,6 +18,7 @@ exports[`renders DashboardSaveModal 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiTextArea
           compressed={true}
@@ -46,6 +47,7 @@ exports[`renders DashboardSaveModal 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiSwitch
           checked={true}
diff --git a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
index a056f3d0c47dd..afeede58afda5 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
@@ -45,9 +45,7 @@ exports[`apmUiEnabled 1`] = `
       </EuiText>
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiFlexGroup
     alignItems="stretch"
     className="homeAddData__flexGroup"
@@ -84,7 +82,6 @@ exports[`apmUiEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="apmApp"
           />
         }
@@ -120,7 +117,6 @@ exports[`apmUiEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="loggingApp"
           />
         }
@@ -156,7 +152,6 @@ exports[`apmUiEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="monitoringApp"
           />
         }
@@ -192,7 +187,6 @@ exports[`apmUiEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="securityApp"
           />
         }
@@ -203,10 +197,7 @@ exports[`apmUiEnabled 1`] = `
       />
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiHorizontalRule
-    margin="l"
-    size="full"
-  />
+  <EuiHorizontalRule />
   <EuiFlexGrid
     columns={2}
     gutterSize="l"
@@ -343,9 +334,7 @@ exports[`isNewKibanaInstance 1`] = `
       </EuiText>
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiFlexGroup
     alignItems="stretch"
     className="homeAddData__flexGroup"
@@ -382,7 +371,6 @@ exports[`isNewKibanaInstance 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="loggingApp"
           />
         }
@@ -418,7 +406,6 @@ exports[`isNewKibanaInstance 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="monitoringApp"
           />
         }
@@ -454,7 +441,6 @@ exports[`isNewKibanaInstance 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="securityApp"
           />
         }
@@ -465,10 +451,7 @@ exports[`isNewKibanaInstance 1`] = `
       />
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiHorizontalRule
-    margin="l"
-    size="full"
-  />
+  <EuiHorizontalRule />
   <EuiFlexGrid
     columns={2}
     gutterSize="l"
@@ -605,9 +588,7 @@ exports[`mlEnabled 1`] = `
       </EuiText>
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiFlexGroup
     alignItems="stretch"
     className="homeAddData__flexGroup"
@@ -644,7 +625,6 @@ exports[`mlEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="apmApp"
           />
         }
@@ -680,7 +660,6 @@ exports[`mlEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="loggingApp"
           />
         }
@@ -716,7 +695,6 @@ exports[`mlEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="monitoringApp"
           />
         }
@@ -752,7 +730,6 @@ exports[`mlEnabled 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="securityApp"
           />
         }
@@ -763,10 +740,7 @@ exports[`mlEnabled 1`] = `
       />
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiHorizontalRule
-    margin="l"
-    size="full"
-  />
+  <EuiHorizontalRule />
   <EuiFlexGrid
     columns={3}
     gutterSize="l"
@@ -944,9 +918,7 @@ exports[`render 1`] = `
       </EuiText>
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiFlexGroup
     alignItems="stretch"
     className="homeAddData__flexGroup"
@@ -983,7 +955,6 @@ exports[`render 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="loggingApp"
           />
         }
@@ -1019,7 +990,6 @@ exports[`render 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="monitoringApp"
           />
         }
@@ -1055,7 +1025,6 @@ exports[`render 1`] = `
         icon={
           <EuiIcon
             className="homAddData__icon"
-            size="m"
             type="securityApp"
           />
         }
@@ -1066,10 +1035,7 @@ exports[`render 1`] = `
       />
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiHorizontalRule
-    margin="l"
-    size="full"
-  />
+  <EuiHorizontalRule />
   <EuiFlexGrid
     columns={2}
     gutterSize="l"
diff --git a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
index c666579fd8530..61ffe4c183641 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
@@ -86,7 +86,6 @@ exports[`render 1`] = `
           >
             <EuiIcon
               color="subdued"
-              size="m"
               type="dot"
             />
           </EuiText>
diff --git a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap
index 51af1e92a211f..0753972712f11 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap
@@ -2,10 +2,7 @@
 
 exports[`render 1`] = `
 <div>
-  <EuiHorizontalRule
-    margin="l"
-    size="full"
-  />
+  <EuiHorizontalRule />
   <EuiFlexGroup
     alignItems="center"
     component="div"
diff --git a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
index 74988a9c3d14d..4849a21ff82fa 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -42,9 +42,7 @@ exports[`props exportedFieldsUrl 1`] = `
       text="this is a great tutorial about..."
     />
     <div>
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiButton
         color="primary"
         fill={false}
diff --git a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
index 4e7bd8a7e33d2..c1542ec868496 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
@@ -553,7 +553,6 @@ exports[`bulkCreate should display success message when bulkCreate is successful
               >
                 <EuiIcon
                   className="euiStepNumber__icon"
-                  size="m"
                   title="complete"
                   type="check"
                 >
diff --git a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
index c86e9aad95f99..bf0219a50c886 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
@@ -12,15 +12,11 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
         description="tutorial used to drive jest tests"
         title="jest test tutorial"
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <div
         className="eui-textCenter"
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiPanel
         grow={true}
         hasShadow={false}
@@ -67,9 +63,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
         iconType="logoApache"
         title="jest test tutorial"
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <div
         className="eui-textCenter"
       >
@@ -109,9 +103,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiPanel
         grow={true}
         hasShadow={false}
@@ -158,15 +150,11 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
         iconType="logoApache"
         title="jest test tutorial"
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <div
         className="eui-textCenter"
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiPanel
         grow={true}
         hasShadow={false}
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap
index 95c6b2f5bafdc..e6696af75cecd 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap
@@ -80,6 +80,7 @@ exports[`Header should mark the input as invalid 1`] = `
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiFieldText
             compressed={false}
@@ -196,6 +197,7 @@ exports[`Header should render normally 1`] = `
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiFieldText
             compressed={false}
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__jest__/__snapshots__/indices_list.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__jest__/__snapshots__/indices_list.test.js.snap
index 342b8a0c531bb..fa329b106e706 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__jest__/__snapshots__/indices_list.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__jest__/__snapshots__/indices_list.test.js.snap
@@ -11,12 +11,22 @@ exports[`IndicesList should change pages 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -25,12 +35,22 @@ exports[`IndicesList should change pages 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -138,12 +158,22 @@ exports[`IndicesList should change per page 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -261,6 +291,11 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           <span>
@@ -272,6 +307,11 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -280,12 +320,22 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -393,12 +443,22 @@ exports[`IndicesList should render normally 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -407,12 +467,22 @@ exports[`IndicesList should render normally 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -520,12 +590,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -534,12 +614,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -548,12 +638,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -562,12 +662,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -576,12 +686,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -590,12 +710,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -604,12 +734,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -618,12 +758,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -632,12 +782,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           kibana
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
@@ -646,12 +806,22 @@ exports[`IndicesList updating props should render all new indices 1`] = `
       >
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         >
           es
         </EuiTableRowCell>
         <EuiTableRowCell
           align="left"
+          mobileOptions={
+            Object {
+              "show": true,
+            }
+          }
           textOnly={true}
         />
       </EuiTableRow>
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/status_message/__jest__/__snapshots__/status_message.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/status_message/__jest__/__snapshots__/status_message.test.js.snap
index 748eb2d0b9680..b03730cf9176d 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/status_message/__jest__/__snapshots__/status_message.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/status_message/__jest__/__snapshots__/status_message.test.js.snap
@@ -11,7 +11,6 @@ exports[`StatusMessage should render with exact matches 1`] = `
     component="span"
   >
     <EuiIcon
-      size="m"
       type="check"
     />
     <span>
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap
index 524990c5daf8e..25f8fe8330d7c 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap
@@ -56,6 +56,7 @@ exports[`TimeField should render a loading state 1`] = `
         </EuiFlexItem>
       </EuiFlexGroup>
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -143,6 +144,7 @@ exports[`TimeField should render a selected time field 1`] = `
         </EuiFlexItem>
       </EuiFlexGroup>
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -232,6 +234,7 @@ exports[`TimeField should render normally 1`] = `
         </EuiFlexItem>
       </EuiFlexGroup>
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap
index 03c36783f4c72..2279ef63deef2 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap
@@ -9,9 +9,7 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = `
   ownFocus={false}
   size="s"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiTitle
       size="m"
       textTransform="none"
@@ -202,9 +200,7 @@ exports[`Flyout should render import step 1`] = `
   ownFocus={false}
   size="s"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiTitle
       size="m"
       textTransform="none"
@@ -231,6 +227,7 @@ exports[`Flyout should render import step 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFilePicker
           compressed={false}
@@ -248,6 +245,7 @@ exports[`Flyout should render import step 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={false}
+        labelType="label"
       >
         <EuiSwitch
           checked={true}
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/__snapshots__/relationships.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/__snapshots__/relationships.test.js.snap
index 957b5b3fb534c..3515d98c23a4d 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/__snapshots__/relationships.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/__snapshots__/relationships.test.js.snap
@@ -9,9 +9,7 @@ exports[`Relationships should render dashboards normally 1`] = `
   ownFocus={false}
   size="m"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiTitle
       size="m"
       textTransform="none"
@@ -121,9 +119,7 @@ exports[`Relationships should render errors 1`] = `
   ownFocus={false}
   size="m"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiTitle
       size="m"
       textTransform="none"
@@ -172,9 +168,7 @@ exports[`Relationships should render index patterns normally 1`] = `
   ownFocus={false}
   size="m"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiTitle
       size="m"
       textTransform="none"
@@ -213,9 +207,7 @@ exports[`Relationships should render searches normally 1`] = `
   ownFocus={false}
   size="m"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiTitle
       size="m"
       textTransform="none"
@@ -386,9 +378,7 @@ exports[`Relationships should render visualizations normally 1`] = `
   ownFocus={false}
   size="m"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiTitle
       size="m"
       textTransform="none"
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
index 9c4455f26ac51..2a3fc13998104 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
@@ -86,6 +86,7 @@ exports[`Field for array setting should render as read only with help text if ov
         }
         isInvalid={false}
         label="array:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="array test setting"
@@ -171,6 +172,7 @@ exports[`Field for array setting should render custom setting icon if it is cust
         helpText={null}
         isInvalid={false}
         label="array:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="array test setting"
@@ -245,6 +247,7 @@ exports[`Field for array setting should render default value if there is no user
         helpText={null}
         isInvalid={false}
         label="array:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="array test setting"
@@ -361,6 +364,7 @@ exports[`Field for array setting should render user value if there is user value
         }
         isInvalid={false}
         label="array:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="array test setting"
@@ -469,6 +473,7 @@ exports[`Field for boolean setting should render as read only with help text if
         }
         isInvalid={false}
         label="boolean:test:setting"
+        labelType="label"
       >
         <EuiSwitch
           aria-label="boolean test setting"
@@ -558,6 +563,7 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
         helpText={null}
         isInvalid={false}
         label="boolean:test:setting"
+        labelType="label"
       >
         <EuiSwitch
           aria-label="boolean test setting"
@@ -636,6 +642,7 @@ exports[`Field for boolean setting should render default value if there is no us
         helpText={null}
         isInvalid={false}
         label="boolean:test:setting"
+        labelType="label"
       >
         <EuiSwitch
           aria-label="boolean test setting"
@@ -756,6 +763,7 @@ exports[`Field for boolean setting should render user value if there is user val
         }
         isInvalid={false}
         label="boolean:test:setting"
+        labelType="label"
       >
         <EuiSwitch
           aria-label="boolean test setting"
@@ -868,6 +876,7 @@ exports[`Field for image setting should render as read only with help text if ov
         }
         isInvalid={false}
         label="image:test:setting"
+        labelType="label"
       >
         <EuiImage
           allowFullScreen={true}
@@ -950,6 +959,7 @@ exports[`Field for image setting should render custom setting icon if it is cust
         helpText={null}
         isInvalid={false}
         label="image:test:setting"
+        labelType="label"
       >
         <EuiFilePicker
           accept=".jpg,.jpeg,.png"
@@ -1022,6 +1032,7 @@ exports[`Field for image setting should render default value if there is no user
         helpText={null}
         isInvalid={false}
         label="image:test:setting"
+        labelType="label"
       >
         <EuiFilePicker
           accept=".jpg,.jpeg,.png"
@@ -1151,6 +1162,7 @@ exports[`Field for image setting should render user value if there is user value
         }
         isInvalid={false}
         label="image:test:setting"
+        labelType="label"
       >
         <EuiImage
           allowFullScreen={true}
@@ -1260,6 +1272,7 @@ exports[`Field for json setting should render as read only with help text if ove
         }
         isInvalid={false}
         label="json:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-json:test:setting"
@@ -1361,6 +1374,7 @@ exports[`Field for json setting should render custom setting icon if it is custo
         helpText={null}
         isInvalid={false}
         label="json:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-json:test:setting"
@@ -1497,6 +1511,7 @@ exports[`Field for json setting should render default value if there is no user
         }
         isInvalid={false}
         label="json:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-json:test:setting"
@@ -1633,6 +1648,7 @@ exports[`Field for json setting should render user value if there is user value
         }
         isInvalid={false}
         label="json:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-json:test:setting"
@@ -1757,6 +1773,7 @@ exports[`Field for markdown setting should render as read only with help text if
         }
         isInvalid={false}
         label="markdown:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-markdown:test:setting"
@@ -1858,6 +1875,7 @@ exports[`Field for markdown setting should render custom setting icon if it is c
         helpText={null}
         isInvalid={false}
         label="markdown:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-markdown:test:setting"
@@ -1948,6 +1966,7 @@ exports[`Field for markdown setting should render default value if there is no u
         helpText={null}
         isInvalid={false}
         label="markdown:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-markdown:test:setting"
@@ -2080,6 +2099,7 @@ exports[`Field for markdown setting should render user value if there is user va
         }
         isInvalid={false}
         label="markdown:test:setting"
+        labelType="label"
       >
         <div
           data-test-subj="advancedSetting-editField-markdown:test:setting"
@@ -2204,6 +2224,7 @@ exports[`Field for number setting should render as read only with help text if o
         }
         isInvalid={false}
         label="number:test:setting"
+        labelType="label"
       >
         <EuiFieldNumber
           aria-label="number test setting"
@@ -2289,6 +2310,7 @@ exports[`Field for number setting should render custom setting icon if it is cus
         helpText={null}
         isInvalid={false}
         label="number:test:setting"
+        labelType="label"
       >
         <EuiFieldNumber
           aria-label="number test setting"
@@ -2363,6 +2385,7 @@ exports[`Field for number setting should render default value if there is no use
         helpText={null}
         isInvalid={false}
         label="number:test:setting"
+        labelType="label"
       >
         <EuiFieldNumber
           aria-label="number test setting"
@@ -2479,6 +2502,7 @@ exports[`Field for number setting should render user value if there is user valu
         }
         isInvalid={false}
         label="number:test:setting"
+        labelType="label"
       >
         <EuiFieldNumber
           aria-label="number test setting"
@@ -2587,6 +2611,7 @@ exports[`Field for select setting should render as read only with help text if o
         }
         isInvalid={false}
         label="select:test:setting"
+        labelType="label"
       >
         <EuiSelect
           aria-label="select test setting"
@@ -2689,6 +2714,7 @@ exports[`Field for select setting should render custom setting icon if it is cus
         helpText={null}
         isInvalid={false}
         label="select:test:setting"
+        labelType="label"
       >
         <EuiSelect
           aria-label="select test setting"
@@ -2780,6 +2806,7 @@ exports[`Field for select setting should render default value if there is no use
         helpText={null}
         isInvalid={false}
         label="select:test:setting"
+        labelType="label"
       >
         <EuiSelect
           aria-label="select test setting"
@@ -2913,6 +2940,7 @@ exports[`Field for select setting should render user value if there is user valu
         }
         isInvalid={false}
         label="select:test:setting"
+        labelType="label"
       >
         <EuiSelect
           aria-label="select test setting"
@@ -3038,6 +3066,7 @@ exports[`Field for string setting should render as read only with help text if o
         }
         isInvalid={false}
         label="string:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="string test setting"
@@ -3123,6 +3152,7 @@ exports[`Field for string setting should render custom setting icon if it is cus
         helpText={null}
         isInvalid={false}
         label="string:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="string test setting"
@@ -3197,6 +3227,7 @@ exports[`Field for string setting should render default value if there is no use
         helpText={null}
         isInvalid={false}
         label="string:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="string test setting"
@@ -3313,6 +3344,7 @@ exports[`Field for string setting should render user value if there is user valu
         }
         isInvalid={false}
         label="string:test:setting"
+        labelType="label"
       >
         <EuiFieldText
           aria-label="string test setting"
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index 1ae41c8c9e7ac..df2a7d729db90 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -148,7 +148,19 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
         <div
           class="euiOverlayMask"
         >
-          <div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="0"
+          />
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="1"
+          />
+          <div
+            data-focus-lock-disabled="false"
+          >
             <div
               class="euiModal euiModal--maxWidth-default visNewVisDialog"
               tabindex="0"
@@ -355,6 +367,11 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
               </div>
             </div>
           </div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="0"
+          />
         </div>
       }
     >
@@ -363,65 +380,78 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
         maxWidth={true}
         onClose={[Function]}
       >
-        <FocusTrap
-          _createFocusTrap={[Function]}
-          active={true}
-          focusTrapOptions={
-            Object {
-              "fallbackFocus": [Function],
-              "initialFocus": undefined,
-            }
-          }
-          paused={false}
-          tag="div"
+        <EuiFocusTrap
+          clickOutsideDisables={false}
+          disabled={false}
+          returnFocus={true}
         >
-          <div>
+          <FocusLock
+            as="div"
+            autoFocus={true}
+            disabled={false}
+            lockProps={Object {}}
+            noFocusGuards={false}
+            persistentFocus={false}
+            returnFocus={true}
+          >
             <div
-              className="euiModal euiModal--maxWidth-default visNewVisDialog"
-              onKeyDown={[Function]}
+              data-focus-guard={true}
+              key="guard-first"
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
               tabIndex={0}
+            />
+            <div
+              data-focus-guard={true}
+              key="guard-nearest"
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={1}
+            />
+            <div
+              data-focus-lock-disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
             >
-              <EuiI18n
-                default="Closes this modal window"
-                token="euiModal.closeModal"
-              >
-                <EuiButtonIcon
-                  aria-label="Closes this modal window"
-                  className="euiModal__closeIcon"
-                  color="text"
-                  iconSize="m"
-                  iconType="cross"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <button
-                    aria-label="Closes this modal window"
-                    className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                    onClick={[Function]}
-                    type="button"
+              <SideEffect(FocusWatcher)
+                autoFocus={true}
+                disabled={false}
+                observed={
+                  <div
+                    data-focus-lock-disabled="false"
                   >
-                    <EuiIcon
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      size="m"
-                      type="cross"
+                    <div
+                      class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                      tabindex="0"
                     >
-                      <cross
-                        aria-hidden="true"
-                        className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                        focusable="false"
-                        height="16"
-                        style={null}
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        aria-label="Closes this modal window"
+                        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                        type="button"
                       >
                         <svg
                           aria-hidden="true"
-                          className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                          class="euiIcon euiIcon--medium euiButtonIcon__icon"
                           focusable="false"
                           height="16"
-                          style={null}
                           viewBox="0 0 16 16"
                           width="16"
                           xmlns="http://www.w3.org/2000/svg"
@@ -430,179 +460,629 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                             d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
                           />
                         </svg>
-                      </cross>
-                    </EuiIcon>
-                  </button>
-                </EuiButtonIcon>
-              </EuiI18n>
-              <div
-                className="euiModal__flex"
-              >
-                <TypeSelection
-                  onVisTypeSelected={[Function]}
-                  visTypesRegistry={
-                    Array [
-                      Object {
-                        "hidden": false,
-                        "name": "vis",
-                        "requestHandler": "none",
-                        "requiresSearch": false,
-                        "responseHandler": "none",
-                        "stage": "production",
-                        "title": "Vis Type 1",
-                        "visualization": [Function],
-                      },
-                      Object {
-                        "hidden": false,
-                        "name": "visExp",
-                        "requestHandler": "none",
-                        "requiresSearch": false,
-                        "responseHandler": "none",
-                        "stage": "experimental",
-                        "title": "Experimental Vis",
-                        "visualization": [Function],
-                      },
-                      Object {
-                        "hidden": false,
-                        "name": "visWithSearch",
-                        "requestHandler": "none",
-                        "requiresSearch": false,
-                        "responseHandler": "none",
-                        "stage": "production",
-                        "title": "Vis with search",
-                        "visualization": [Function],
-                      },
-                    ]
-                  }
-                >
-                  <EuiModalHeader>
-                    <div
-                      className="euiModalHeader"
-                    >
-                      <EuiModalHeaderTitle>
+                      </button>
+                      <div
+                        class="euiModal__flex"
+                      >
                         <div
-                          className="euiModalHeader__title"
+                          class="euiModalHeader"
                         >
-                          <FormattedMessage
-                            defaultMessage="New Visualization"
-                            id="kbn.visualize.newVisWizard.title"
-                            values={Object {}}
+                          <div
+                            class="euiModalHeader__title"
                           >
                             New Visualization
-                          </FormattedMessage>
+                          </div>
                         </div>
-                      </EuiModalHeaderTitle>
+                        <div
+                          class="visNewVisDialog__body"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                              >
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                >
+                                  <div
+                                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                  >
+                                    <div
+                                      class="euiFormControlLayout__childrenWrapper"
+                                    >
+                                      <input
+                                        aria-label="Filter for a visualization type"
+                                        class="euiFieldSearch euiFieldSearch--fullWidth"
+                                        data-test-subj="filterVisType"
+                                        placeholder="Filter"
+                                        type="search"
+                                        value="with"
+                                      />
+                                      <div
+                                        class="euiFormControlLayoutIcons"
+                                      >
+                                        <span
+                                          class="euiFormControlLayoutCustomIcon"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                            focusable="false"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                                          >
+                                            <defs>
+                                              <path
+                                                d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                id="search-a"
+                                              />
+                                            </defs>
+                                            <use
+                                              xlink:href="#search-a"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                >
+                                  <span
+                                    aria-live="polite"
+                                    class="euiScreenReaderOnly"
+                                  >
+                                    1 type found
+                                  </span>
+                                  <div
+                                    class="euiKeyPadMenu visNewVisDialog__types"
+                                    data-test-subj="visNewDialogTypes"
+                                    role="menu"
+                                  >
+                                    <button
+                                      aria-describedby="visTypeDescription-visWithSearch"
+                                      class="euiKeyPadMenuItem visNewVisDialog__type"
+                                      data-test-subj="visType-visWithSearch"
+                                      data-vis-stage="production"
+                                      type="button"
+                                    >
+                                      <div
+                                        class="euiKeyPadMenuItem__inner"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__icon"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--large euiIcon--secondary"
+                                            focusable="false"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </div>
+                                        <p
+                                          class="euiKeyPadMenuItem__label"
+                                        >
+                                          <span
+                                            data-test-subj="visTypeTitle"
+                                          >
+                                            Vis with search
+                                          </span>
+                                        </p>
+                                      </div>
+                                    </button>
+                                    <button
+                                      aria-describedby="visTypeDescription-vis"
+                                      class="euiKeyPadMenuItem visNewVisDialog__type"
+                                      data-test-subj="visType-vis"
+                                      data-vis-stage="production"
+                                      disabled=""
+                                      type="button"
+                                    >
+                                      <div
+                                        class="euiKeyPadMenuItem__inner"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__icon"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--large euiIcon--secondary"
+                                            focusable="false"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </div>
+                                        <p
+                                          class="euiKeyPadMenuItem__label"
+                                        >
+                                          <span
+                                            data-test-subj="visTypeTitle"
+                                          >
+                                            Vis Type 1
+                                          </span>
+                                        </p>
+                                      </div>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--small"
+                              >
+                                Select a visualization type
+                              </h2>
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <p>
+                                  Start creating your visualization by selecting a type for that visualization.
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
-                  </EuiModalHeader>
-                  <div
-                    className="visNewVisDialog__body"
-                  >
-                    <EuiFlexGroup
-                      alignItems="stretch"
-                      component="div"
-                      direction="row"
-                      gutterSize="xl"
-                      justifyContent="flexStart"
-                      responsive={true}
-                      wrap={false}
+                  </div>
+                }
+                onActivation={[Function]}
+                onDeactivation={[Function]}
+                persistentFocus={false}
+              >
+                <FocusWatcher
+                  autoFocus={true}
+                  disabled={false}
+                  observed={
+                    <div
+                      data-focus-lock-disabled="false"
                     >
                       <div
-                        className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                        tabindex="0"
                       >
-                        <EuiFlexItem
-                          component="div"
-                          grow={true}
+                        <button
+                          aria-label="Closes this modal window"
+                          class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                          type="button"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                            focusable="false"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                            />
+                          </svg>
+                        </button>
+                        <div
+                          class="euiModal__flex"
                         >
                           <div
-                            className="euiFlexItem"
+                            class="euiModalHeader"
                           >
-                            <EuiFlexGroup
-                              alignItems="stretch"
-                              className="visNewVisDialog__list"
-                              component="div"
-                              direction="column"
-                              gutterSize="none"
-                              justifyContent="flexStart"
-                              responsive={false}
-                              wrap={false}
+                            <div
+                              class="euiModalHeader__title"
+                            >
+                              New Visualization
+                            </div>
+                          </div>
+                          <div
+                            class="visNewVisDialog__body"
+                          >
+                            <div
+                              class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                             >
                               <div
-                                className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                class="euiFlexItem"
                               >
-                                <EuiFlexItem
-                                  className="visNewVisDialog__searchWrapper"
-                                  component="div"
-                                  grow={false}
+                                <div
+                                  class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                                 >
                                   <div
-                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                  >
+                                    <div
+                                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                    >
+                                      <div
+                                        class="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <input
+                                          aria-label="Filter for a visualization type"
+                                          class="euiFieldSearch euiFieldSearch--fullWidth"
+                                          data-test-subj="filterVisType"
+                                          placeholder="Filter"
+                                          type="search"
+                                          value="with"
+                                        />
+                                        <div
+                                          class="euiFormControlLayoutIcons"
+                                        >
+                                          <span
+                                            class="euiFormControlLayoutCustomIcon"
+                                          >
+                                            <svg
+                                              aria-hidden="true"
+                                              class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                              xmlns="http://www.w3.org/2000/svg"
+                                              xmlns:xlink="http://www.w3.org/1999/xlink"
+                                            >
+                                              <defs>
+                                                <path
+                                                  d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                  id="search-a"
+                                                />
+                                              </defs>
+                                              <use
+                                                xlink:href="#search-a"
+                                              />
+                                            </svg>
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                  >
+                                    <span
+                                      aria-live="polite"
+                                      class="euiScreenReaderOnly"
+                                    >
+                                      1 type found
+                                    </span>
+                                    <div
+                                      class="euiKeyPadMenu visNewVisDialog__types"
+                                      data-test-subj="visNewDialogTypes"
+                                      role="menu"
+                                    >
+                                      <button
+                                        aria-describedby="visTypeDescription-visWithSearch"
+                                        class="euiKeyPadMenuItem visNewVisDialog__type"
+                                        data-test-subj="visType-visWithSearch"
+                                        data-vis-stage="production"
+                                        type="button"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__inner"
+                                        >
+                                          <div
+                                            class="euiKeyPadMenuItem__icon"
+                                          >
+                                            <svg
+                                              aria-hidden="true"
+                                              class="euiIcon euiIcon--large euiIcon--secondary"
+                                              focusable="false"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </div>
+                                          <p
+                                            class="euiKeyPadMenuItem__label"
+                                          >
+                                            <span
+                                              data-test-subj="visTypeTitle"
+                                            >
+                                              Vis with search
+                                            </span>
+                                          </p>
+                                        </div>
+                                      </button>
+                                      <button
+                                        aria-describedby="visTypeDescription-vis"
+                                        class="euiKeyPadMenuItem visNewVisDialog__type"
+                                        data-test-subj="visType-vis"
+                                        data-vis-stage="production"
+                                        disabled=""
+                                        type="button"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__inner"
+                                        >
+                                          <div
+                                            class="euiKeyPadMenuItem__icon"
+                                          >
+                                            <svg
+                                              aria-hidden="true"
+                                              class="euiIcon euiIcon--large euiIcon--secondary"
+                                              focusable="false"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </div>
+                                          <p
+                                            class="euiKeyPadMenuItem__label"
+                                          >
+                                            <span
+                                              data-test-subj="visTypeTitle"
+                                            >
+                                              Vis Type 1
+                                            </span>
+                                          </p>
+                                        </div>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                              >
+                                <h2
+                                  class="euiTitle euiTitle--small"
+                                >
+                                  Select a visualization type
+                                </h2>
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <p>
+                                    Start creating your visualization by selecting a type for that visualization.
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                  onActivation={[Function]}
+                  onDeactivation={[Function]}
+                  persistentFocus={false}
+                />
+              </SideEffect(FocusWatcher)>
+              <div
+                className="euiModal euiModal--maxWidth-default visNewVisDialog"
+                onKeyDown={[Function]}
+                tabIndex={0}
+              >
+                <EuiI18n
+                  default="Closes this modal window"
+                  token="euiModal.closeModal"
+                >
+                  <EuiButtonIcon
+                    aria-label="Closes this modal window"
+                    className="euiModal__closeIcon"
+                    color="text"
+                    iconSize="m"
+                    iconType="cross"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <button
+                      aria-label="Closes this modal window"
+                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        size="m"
+                        type="cross"
+                      >
+                        <cross
+                          aria-hidden="true"
+                          className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                          focusable="false"
+                          height="16"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                            focusable="false"
+                            height="16"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                            />
+                          </svg>
+                        </cross>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </EuiI18n>
+                <div
+                  className="euiModal__flex"
+                >
+                  <TypeSelection
+                    onVisTypeSelected={[Function]}
+                    visTypesRegistry={
+                      Array [
+                        Object {
+                          "hidden": false,
+                          "name": "vis",
+                          "requestHandler": "none",
+                          "requiresSearch": false,
+                          "responseHandler": "none",
+                          "stage": "production",
+                          "title": "Vis Type 1",
+                          "visualization": [Function],
+                        },
+                        Object {
+                          "hidden": false,
+                          "name": "visExp",
+                          "requestHandler": "none",
+                          "requiresSearch": false,
+                          "responseHandler": "none",
+                          "stage": "experimental",
+                          "title": "Experimental Vis",
+                          "visualization": [Function],
+                        },
+                        Object {
+                          "hidden": false,
+                          "name": "visWithSearch",
+                          "requestHandler": "none",
+                          "requiresSearch": false,
+                          "responseHandler": "none",
+                          "stage": "production",
+                          "title": "Vis with search",
+                          "visualization": [Function],
+                        },
+                      ]
+                    }
+                  >
+                    <EuiModalHeader>
+                      <div
+                        className="euiModalHeader"
+                      >
+                        <EuiModalHeaderTitle>
+                          <div
+                            className="euiModalHeader__title"
+                          >
+                            <FormattedMessage
+                              defaultMessage="New Visualization"
+                              id="kbn.visualize.newVisWizard.title"
+                              values={Object {}}
+                            >
+                              New Visualization
+                            </FormattedMessage>
+                          </div>
+                        </EuiModalHeaderTitle>
+                      </div>
+                    </EuiModalHeader>
+                    <div
+                      className="visNewVisDialog__body"
+                    >
+                      <EuiFlexGroup
+                        alignItems="stretch"
+                        component="div"
+                        direction="row"
+                        gutterSize="xl"
+                        justifyContent="flexStart"
+                        responsive={true}
+                        wrap={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem
+                            component="div"
+                            grow={true}
+                          >
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiFlexGroup
+                                alignItems="stretch"
+                                className="visNewVisDialog__list"
+                                component="div"
+                                direction="column"
+                                gutterSize="none"
+                                justifyContent="flexStart"
+                                responsive={false}
+                                wrap={false}
+                              >
+                                <div
+                                  className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                >
+                                  <EuiFlexItem
+                                    className="visNewVisDialog__searchWrapper"
+                                    component="div"
+                                    grow={false}
                                   >
-                                    <EuiFieldSearch
-                                      aria-label="Filter for a visualization type"
-                                      compressed={false}
-                                      data-test-subj="filterVisType"
-                                      fullWidth={true}
-                                      incremental={false}
-                                      isLoading={false}
-                                      onChange={[Function]}
-                                      placeholder="Filter"
-                                      value="with"
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                     >
-                                      <EuiFormControlLayout
+                                      <EuiFieldSearch
+                                        aria-label="Filter for a visualization type"
                                         compressed={false}
+                                        data-test-subj="filterVisType"
                                         fullWidth={true}
-                                        icon="search"
+                                        incremental={false}
                                         isLoading={false}
+                                        onChange={[Function]}
+                                        placeholder="Filter"
+                                        value="with"
                                       >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        <EuiFormControlLayout
+                                          compressed={false}
+                                          fullWidth={true}
+                                          icon="search"
+                                          isLoading={false}
                                         >
                                           <div
-                                            className="euiFormControlLayout__childrenWrapper"
+                                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                           >
-                                            <EuiValidatableControl>
-                                              <input
-                                                aria-label="Filter for a visualization type"
-                                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                data-test-subj="filterVisType"
-                                                onChange={[Function]}
-                                                onKeyUp={[Function]}
-                                                placeholder="Filter"
-                                                type="search"
-                                                value="with"
-                                              />
-                                            </EuiValidatableControl>
-                                            <EuiFormControlLayoutIcons
-                                              icon="search"
-                                              isLoading={false}
+                                            <div
+                                              className="euiFormControlLayout__childrenWrapper"
                                             >
-                                              <div
-                                                className="euiFormControlLayoutIcons"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
+                                              <EuiValidatableControl>
+                                                <input
+                                                  aria-label="Filter for a visualization type"
+                                                  className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                  data-test-subj="filterVisType"
+                                                  onChange={[Function]}
+                                                  onKeyUp={[Function]}
+                                                  placeholder="Filter"
                                                   type="search"
+                                                  value="with"
+                                                />
+                                              </EuiValidatableControl>
+                                              <EuiFormControlLayoutIcons
+                                                icon="search"
+                                                isLoading={false}
+                                              >
+                                                <div
+                                                  className="euiFormControlLayoutIcons"
                                                 >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
+                                                  <EuiFormControlLayoutCustomIcon
+                                                    type="search"
                                                   >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
+                                                    <span
+                                                      className="euiFormControlLayoutCustomIcon"
                                                     >
-                                                      <search
+                                                      <EuiIcon
                                                         aria-hidden="true"
-                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                        focusable="false"
-                                                        height="16"
-                                                        style={null}
-                                                        viewBox="0 0 16 16"
-                                                        width="16"
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        xmlnsXlink="http://www.w3.org/1999/xlink"
+                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                        type="search"
                                                       >
-                                                        <svg
+                                                        <search
                                                           aria-hidden="true"
                                                           className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                                           focusable="false"
@@ -613,137 +1093,138 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                                           xmlns="http://www.w3.org/2000/svg"
                                                           xmlnsXlink="http://www.w3.org/1999/xlink"
                                                         >
-                                                          <defs>
-                                                            <path
-                                                              d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
-                                                              id="search-a"
+                                                          <svg
+                                                            aria-hidden="true"
+                                                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                            focusable="false"
+                                                            height="16"
+                                                            style={null}
+                                                            viewBox="0 0 16 16"
+                                                            width="16"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                                                          >
+                                                            <defs>
+                                                              <path
+                                                                d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                                id="search-a"
+                                                              />
+                                                            </defs>
+                                                            <use
+                                                              xlinkHref="#search-a"
                                                             />
-                                                          </defs>
-                                                          <use
-                                                            xlinkHref="#search-a"
-                                                          />
-                                                        </svg>
-                                                      </search>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </EuiFormControlLayoutCustomIcon>
-                                              </div>
-                                            </EuiFormControlLayoutIcons>
+                                                          </svg>
+                                                        </search>
+                                                      </EuiIcon>
+                                                    </span>
+                                                  </EuiFormControlLayoutCustomIcon>
+                                                </div>
+                                              </EuiFormControlLayoutIcons>
+                                            </div>
                                           </div>
-                                        </div>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </div>
-                                </EuiFlexItem>
-                                <EuiFlexItem
-                                  className="visNewVisDialog__typesWrapper"
-                                  component="div"
-                                  grow={1}
-                                >
-                                  <div
-                                    className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                        </EuiFormControlLayout>
+                                      </EuiFieldSearch>
+                                    </div>
+                                  </EuiFlexItem>
+                                  <EuiFlexItem
+                                    className="visNewVisDialog__typesWrapper"
+                                    component="div"
+                                    grow={1}
                                   >
-                                    <EuiScreenReaderOnly>
-                                      <span
-                                        aria-live="polite"
-                                        className="euiScreenReaderOnly"
-                                      >
-                                        <FormattedMessage
-                                          defaultMessage="{resultCount} {resultCount, plural,
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                    >
+                                      <EuiScreenReaderOnly>
+                                        <span
+                                          aria-live="polite"
+                                          className="euiScreenReaderOnly"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="{resultCount} {resultCount, plural,
                             one {type}
                             other {types}
                           } found"
-                                          id="kbn.visualize.newVisWizard.resultsFound"
-                                          values={
-                                            Object {
-                                              "resultCount": 1,
+                                            id="kbn.visualize.newVisWizard.resultsFound"
+                                            values={
+                                              Object {
+                                                "resultCount": 1,
+                                              }
                                             }
-                                          }
-                                        >
-                                          1 type found
-                                        </FormattedMessage>
-                                      </span>
-                                    </EuiScreenReaderOnly>
-                                    <EuiKeyPadMenu
-                                      className="visNewVisDialog__types"
-                                      data-test-subj="visNewDialogTypes"
-                                    >
-                                      <div
-                                        className="euiKeyPadMenu visNewVisDialog__types"
+                                          >
+                                            1 type found
+                                          </FormattedMessage>
+                                        </span>
+                                      </EuiScreenReaderOnly>
+                                      <EuiKeyPadMenu
+                                        className="visNewVisDialog__types"
                                         data-test-subj="visNewDialogTypes"
-                                        role="menu"
                                       >
-                                        <EuiKeyPadMenuItemButton
-                                          aria-describedby="visTypeDescription-visWithSearch"
-                                          className="visNewVisDialog__type"
-                                          data-test-subj="visType-visWithSearch"
-                                          data-vis-stage="production"
-                                          disabled={false}
-                                          key="visWithSearch"
-                                          label={
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis with search
-                                            </span>
-                                          }
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseEnter={[Function]}
-                                          onMouseLeave={[Function]}
+                                        <div
+                                          className="euiKeyPadMenu visNewVisDialog__types"
+                                          data-test-subj="visNewDialogTypes"
+                                          role="menu"
                                         >
-                                          <button
+                                          <EuiKeyPadMenuItemButton
                                             aria-describedby="visTypeDescription-visWithSearch"
-                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            className="visNewVisDialog__type"
                                             data-test-subj="visType-visWithSearch"
                                             data-vis-stage="production"
                                             disabled={false}
+                                            key="visWithSearch"
+                                            label={
+                                              <span
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis with search
+                                              </span>
+                                            }
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            type="button"
                                           >
-                                            <div
-                                              className="euiKeyPadMenuItem__inner"
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithSearch"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-visWithSearch"
+                                              data-vis-stage="production"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              type="button"
                                             >
                                               <div
-                                                className="euiKeyPadMenuItem__icon"
+                                                className="euiKeyPadMenuItem__inner"
                                               >
-                                                <Component
-                                                  visType={
-                                                    Object {
-                                                      "hidden": false,
-                                                      "highlighted": true,
-                                                      "name": "visWithSearch",
-                                                      "requestHandler": "none",
-                                                      "requiresSearch": false,
-                                                      "responseHandler": "none",
-                                                      "stage": "production",
-                                                      "title": "Vis with search",
-                                                      "visualization": [Function],
-                                                    }
-                                                  }
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
                                                 >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    color="secondary"
-                                                    size="l"
-                                                    type="empty"
+                                                  <Component
+                                                    visType={
+                                                      Object {
+                                                        "hidden": false,
+                                                        "highlighted": true,
+                                                        "name": "visWithSearch",
+                                                        "requestHandler": "none",
+                                                        "requiresSearch": false,
+                                                        "responseHandler": "none",
+                                                        "stage": "production",
+                                                        "title": "Vis with search",
+                                                        "visualization": [Function],
+                                                      }
+                                                    }
                                                   >
-                                                    <empty
+                                                    <EuiIcon
                                                       aria-hidden="true"
-                                                      className="euiIcon euiIcon--large euiIcon--secondary"
-                                                      focusable="false"
-                                                      height="16"
-                                                      style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width="16"
-                                                      xmlns="http://www.w3.org/2000/svg"
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
                                                     >
-                                                      <svg
+                                                      <empty
                                                         aria-hidden="true"
                                                         className="euiIcon euiIcon--large euiIcon--secondary"
                                                         focusable="false"
@@ -752,94 +1233,94 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                                         viewBox="0 0 16 16"
                                                         width="16"
                                                         xmlns="http://www.w3.org/2000/svg"
-                                                      />
-                                                    </empty>
-                                                  </EuiIcon>
-                                                </Component>
-                                              </div>
-                                              <p
-                                                className="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
+                                                      >
+                                                        <svg
+                                                          aria-hidden="true"
+                                                          className="euiIcon euiIcon--large euiIcon--secondary"
+                                                          focusable="false"
+                                                          height="16"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width="16"
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        />
+                                                      </empty>
+                                                    </EuiIcon>
+                                                  </Component>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
                                                 >
-                                                  Vis with search
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </EuiKeyPadMenuItemButton>
-                                        <EuiKeyPadMenuItemButton
-                                          aria-describedby="visTypeDescription-vis"
-                                          className="visNewVisDialog__type"
-                                          data-test-subj="visType-vis"
-                                          data-vis-stage="production"
-                                          disabled={true}
-                                          key="vis"
-                                          label={
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis Type 1
-                                            </span>
-                                          }
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseEnter={[Function]}
-                                          onMouseLeave={[Function]}
-                                        >
-                                          <button
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with search
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItemButton>
+                                          <EuiKeyPadMenuItemButton
                                             aria-describedby="visTypeDescription-vis"
-                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            className="visNewVisDialog__type"
                                             data-test-subj="visType-vis"
                                             data-vis-stage="production"
                                             disabled={true}
+                                            key="vis"
+                                            label={
+                                              <span
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis Type 1
+                                              </span>
+                                            }
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            type="button"
                                           >
-                                            <div
-                                              className="euiKeyPadMenuItem__inner"
+                                            <button
+                                              aria-describedby="visTypeDescription-vis"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-vis"
+                                              data-vis-stage="production"
+                                              disabled={true}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              type="button"
                                             >
                                               <div
-                                                className="euiKeyPadMenuItem__icon"
+                                                className="euiKeyPadMenuItem__inner"
                                               >
-                                                <Component
-                                                  visType={
-                                                    Object {
-                                                      "hidden": false,
-                                                      "highlighted": false,
-                                                      "name": "vis",
-                                                      "requestHandler": "none",
-                                                      "requiresSearch": false,
-                                                      "responseHandler": "none",
-                                                      "stage": "production",
-                                                      "title": "Vis Type 1",
-                                                      "visualization": [Function],
-                                                    }
-                                                  }
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
                                                 >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    color="secondary"
-                                                    size="l"
-                                                    type="empty"
+                                                  <Component
+                                                    visType={
+                                                      Object {
+                                                        "hidden": false,
+                                                        "highlighted": false,
+                                                        "name": "vis",
+                                                        "requestHandler": "none",
+                                                        "requiresSearch": false,
+                                                        "responseHandler": "none",
+                                                        "stage": "production",
+                                                        "title": "Vis Type 1",
+                                                        "visualization": [Function],
+                                                      }
+                                                    }
                                                   >
-                                                    <empty
+                                                    <EuiIcon
                                                       aria-hidden="true"
-                                                      className="euiIcon euiIcon--large euiIcon--secondary"
-                                                      focusable="false"
-                                                      height="16"
-                                                      style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width="16"
-                                                      xmlns="http://www.w3.org/2000/svg"
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
                                                     >
-                                                      <svg
+                                                      <empty
                                                         aria-hidden="true"
                                                         className="euiIcon euiIcon--large euiIcon--secondary"
                                                         focusable="false"
@@ -848,92 +1329,118 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                                         viewBox="0 0 16 16"
                                                         width="16"
                                                         xmlns="http://www.w3.org/2000/svg"
-                                                      />
-                                                    </empty>
-                                                  </EuiIcon>
-                                                </Component>
-                                              </div>
-                                              <p
-                                                className="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
+                                                      >
+                                                        <svg
+                                                          aria-hidden="true"
+                                                          className="euiIcon euiIcon--large euiIcon--secondary"
+                                                          focusable="false"
+                                                          height="16"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width="16"
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        />
+                                                      </empty>
+                                                    </EuiIcon>
+                                                  </Component>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
                                                 >
-                                                  Vis Type 1
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </EuiKeyPadMenuItemButton>
-                                      </div>
-                                    </EuiKeyPadMenu>
-                                  </div>
-                                </EuiFlexItem>
-                              </div>
-                            </EuiFlexGroup>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          className="visNewVisDialog__description"
-                          component="div"
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis Type 1
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItemButton>
+                                        </div>
+                                      </EuiKeyPadMenu>
+                                    </div>
+                                  </EuiFlexItem>
+                                </div>
+                              </EuiFlexGroup>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            className="visNewVisDialog__description"
+                            component="div"
+                            grow={false}
                           >
-                            <EuiTitle
-                              size="s"
-                              textTransform="none"
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                             >
-                              <h2
-                                className="euiTitle euiTitle--small"
+                              <EuiTitle
+                                size="s"
+                                textTransform="none"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Select a visualization type"
-                                  id="kbn.visualize.newVisWizard.selectVisType"
-                                  values={Object {}}
+                                <h2
+                                  className="euiTitle euiTitle--small"
                                 >
-                                  Select a visualization type
-                                </FormattedMessage>
-                              </h2>
-                            </EuiTitle>
-                            <EuiSpacer
-                              size="m"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--m"
-                              />
-                            </EuiSpacer>
-                            <Component>
-                              <EuiText
-                                grow={true}
+                                  <FormattedMessage
+                                    defaultMessage="Select a visualization type"
+                                    id="kbn.visualize.newVisWizard.selectVisType"
+                                    values={Object {}}
+                                  >
+                                    Select a visualization type
+                                  </FormattedMessage>
+                                </h2>
+                              </EuiTitle>
+                              <EuiSpacer
                                 size="m"
                               >
                                 <div
-                                  className="euiText euiText--medium"
+                                  className="euiSpacer euiSpacer--m"
+                                />
+                              </EuiSpacer>
+                              <Component>
+                                <EuiText
+                                  grow={true}
+                                  size="m"
                                 >
-                                  <p>
-                                    <FormattedMessage
-                                      defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                      id="kbn.visualize.newVisWizard.helpText"
-                                      values={Object {}}
-                                    >
-                                      Start creating your visualization by selecting a type for that visualization.
-                                    </FormattedMessage>
-                                  </p>
-                                </div>
-                              </EuiText>
-                            </Component>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </TypeSelection>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <p>
+                                      <FormattedMessage
+                                        defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                        id="kbn.visualize.newVisWizard.helpText"
+                                        values={Object {}}
+                                      >
+                                        Start creating your visualization by selecting a type for that visualization.
+                                      </FormattedMessage>
+                                    </p>
+                                  </div>
+                                </EuiText>
+                              </Component>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </TypeSelection>
+                </div>
               </div>
             </div>
-          </div>
-        </FocusTrap>
+            <div
+              data-focus-guard={true}
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={0}
+            />
+          </FocusLock>
+        </EuiFocusTrap>
       </EuiModal>
     </Portal>
   </EuiOverlayMask>
@@ -1088,7 +1595,19 @@ exports[`NewVisModal should render as expected 1`] = `
         <div
           class="euiOverlayMask"
         >
-          <div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="0"
+          />
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="1"
+          />
+          <div
+            data-focus-lock-disabled="false"
+          >
             <div
               class="euiModal euiModal--maxWidth-default visNewVisDialog"
               tabindex="0"
@@ -1219,141 +1738,605 @@ exports[`NewVisModal should render as expected 1`] = `
                                     xmlns="http://www.w3.org/2000/svg"
                                   />
                                 </div>
-                                <p
-                                  class="euiKeyPadMenuItem__label"
-                                >
-                                  <span
-                                    data-test-subj="visTypeTitle"
-                                  >
-                                    Vis Type 1
-                                  </span>
-                                </p>
+                                <p
+                                  class="euiKeyPadMenuItem__label"
+                                >
+                                  <span
+                                    data-test-subj="visTypeTitle"
+                                  >
+                                    Vis Type 1
+                                  </span>
+                                </p>
+                              </div>
+                            </button>
+                            <button
+                              aria-describedby="visTypeDescription-visWithSearch"
+                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                              data-test-subj="visType-visWithSearch"
+                              data-vis-stage="production"
+                              type="button"
+                            >
+                              <div
+                                class="euiKeyPadMenuItem__inner"
+                              >
+                                <div
+                                  class="euiKeyPadMenuItem__icon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--large euiIcon--secondary"
+                                    focusable="false"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </div>
+                                <p
+                                  class="euiKeyPadMenuItem__label"
+                                >
+                                  <span
+                                    data-test-subj="visTypeTitle"
+                                  >
+                                    Vis with search
+                                  </span>
+                                </p>
+                              </div>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                    >
+                      <h2
+                        class="euiTitle euiTitle--small"
+                      >
+                        Select a visualization type
+                      </h2>
+                      <div
+                        class="euiSpacer euiSpacer--m"
+                      />
+                      <div
+                        class="euiText euiText--medium"
+                      >
+                        <p>
+                          Start creating your visualization by selecting a type for that visualization.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="0"
+          />
+        </div>
+      }
+    >
+      <EuiModal
+        className="visNewVisDialog"
+        maxWidth={true}
+        onClose={[Function]}
+      >
+        <EuiFocusTrap
+          clickOutsideDisables={false}
+          disabled={false}
+          returnFocus={true}
+        >
+          <FocusLock
+            as="div"
+            autoFocus={true}
+            disabled={false}
+            lockProps={Object {}}
+            noFocusGuards={false}
+            persistentFocus={false}
+            returnFocus={true}
+          >
+            <div
+              data-focus-guard={true}
+              key="guard-first"
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={0}
+            />
+            <div
+              data-focus-guard={true}
+              key="guard-nearest"
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={1}
+            />
+            <div
+              data-focus-lock-disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+            >
+              <SideEffect(FocusWatcher)
+                autoFocus={true}
+                disabled={false}
+                observed={
+                  <div
+                    data-focus-lock-disabled="false"
+                  >
+                    <div
+                      class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                      tabindex="0"
+                    >
+                      <button
+                        aria-label="Closes this modal window"
+                        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                          focusable="false"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                          />
+                        </svg>
+                      </button>
+                      <div
+                        class="euiModal__flex"
+                      >
+                        <div
+                          class="euiModalHeader"
+                        >
+                          <div
+                            class="euiModalHeader__title"
+                          >
+                            New Visualization
+                          </div>
+                        </div>
+                        <div
+                          class="visNewVisDialog__body"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                              >
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                >
+                                  <div
+                                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                  >
+                                    <div
+                                      class="euiFormControlLayout__childrenWrapper"
+                                    >
+                                      <input
+                                        aria-label="Filter for a visualization type"
+                                        class="euiFieldSearch euiFieldSearch--fullWidth"
+                                        data-test-subj="filterVisType"
+                                        placeholder="Filter"
+                                        type="search"
+                                        value=""
+                                      />
+                                      <div
+                                        class="euiFormControlLayoutIcons"
+                                      >
+                                        <span
+                                          class="euiFormControlLayoutCustomIcon"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                            focusable="false"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                                          >
+                                            <defs>
+                                              <path
+                                                d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                id="search-a"
+                                              />
+                                            </defs>
+                                            <use
+                                              xlink:href="#search-a"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                >
+                                  <span
+                                    aria-live="polite"
+                                    class="euiScreenReaderOnly"
+                                  />
+                                  <div
+                                    class="euiKeyPadMenu visNewVisDialog__types"
+                                    data-test-subj="visNewDialogTypes"
+                                    role="menu"
+                                  >
+                                    <button
+                                      aria-describedby="visTypeDescription-vis"
+                                      class="euiKeyPadMenuItem visNewVisDialog__type"
+                                      data-test-subj="visType-vis"
+                                      data-vis-stage="production"
+                                      type="button"
+                                    >
+                                      <div
+                                        class="euiKeyPadMenuItem__inner"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__icon"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--large euiIcon--secondary"
+                                            focusable="false"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </div>
+                                        <p
+                                          class="euiKeyPadMenuItem__label"
+                                        >
+                                          <span
+                                            data-test-subj="visTypeTitle"
+                                          >
+                                            Vis Type 1
+                                          </span>
+                                        </p>
+                                      </div>
+                                    </button>
+                                    <button
+                                      aria-describedby="visTypeDescription-visWithSearch"
+                                      class="euiKeyPadMenuItem visNewVisDialog__type"
+                                      data-test-subj="visType-visWithSearch"
+                                      data-vis-stage="production"
+                                      type="button"
+                                    >
+                                      <div
+                                        class="euiKeyPadMenuItem__inner"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__icon"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--large euiIcon--secondary"
+                                            focusable="false"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </div>
+                                        <p
+                                          class="euiKeyPadMenuItem__label"
+                                        >
+                                          <span
+                                            data-test-subj="visTypeTitle"
+                                          >
+                                            Vis with search
+                                          </span>
+                                        </p>
+                                      </div>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--small"
+                              >
+                                Select a visualization type
+                              </h2>
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <p>
+                                  Start creating your visualization by selecting a type for that visualization.
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                }
+                onActivation={[Function]}
+                onDeactivation={[Function]}
+                persistentFocus={false}
+              >
+                <FocusWatcher
+                  autoFocus={true}
+                  disabled={false}
+                  observed={
+                    <div
+                      data-focus-lock-disabled="false"
+                    >
+                      <div
+                        class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                        tabindex="0"
+                      >
+                        <button
+                          aria-label="Closes this modal window"
+                          class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                          type="button"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                            focusable="false"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                            />
+                          </svg>
+                        </button>
+                        <div
+                          class="euiModal__flex"
+                        >
+                          <div
+                            class="euiModalHeader"
+                          >
+                            <div
+                              class="euiModalHeader__title"
+                            >
+                              New Visualization
+                            </div>
+                          </div>
+                          <div
+                            class="visNewVisDialog__body"
+                          >
+                            <div
+                              class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            >
+                              <div
+                                class="euiFlexItem"
+                              >
+                                <div
+                                  class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                >
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                  >
+                                    <div
+                                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                    >
+                                      <div
+                                        class="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <input
+                                          aria-label="Filter for a visualization type"
+                                          class="euiFieldSearch euiFieldSearch--fullWidth"
+                                          data-test-subj="filterVisType"
+                                          placeholder="Filter"
+                                          type="search"
+                                          value=""
+                                        />
+                                        <div
+                                          class="euiFormControlLayoutIcons"
+                                        >
+                                          <span
+                                            class="euiFormControlLayoutCustomIcon"
+                                          >
+                                            <svg
+                                              aria-hidden="true"
+                                              class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                              xmlns="http://www.w3.org/2000/svg"
+                                              xmlns:xlink="http://www.w3.org/1999/xlink"
+                                            >
+                                              <defs>
+                                                <path
+                                                  d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                  id="search-a"
+                                                />
+                                              </defs>
+                                              <use
+                                                xlink:href="#search-a"
+                                              />
+                                            </svg>
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                  >
+                                    <span
+                                      aria-live="polite"
+                                      class="euiScreenReaderOnly"
+                                    />
+                                    <div
+                                      class="euiKeyPadMenu visNewVisDialog__types"
+                                      data-test-subj="visNewDialogTypes"
+                                      role="menu"
+                                    >
+                                      <button
+                                        aria-describedby="visTypeDescription-vis"
+                                        class="euiKeyPadMenuItem visNewVisDialog__type"
+                                        data-test-subj="visType-vis"
+                                        data-vis-stage="production"
+                                        type="button"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__inner"
+                                        >
+                                          <div
+                                            class="euiKeyPadMenuItem__icon"
+                                          >
+                                            <svg
+                                              aria-hidden="true"
+                                              class="euiIcon euiIcon--large euiIcon--secondary"
+                                              focusable="false"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </div>
+                                          <p
+                                            class="euiKeyPadMenuItem__label"
+                                          >
+                                            <span
+                                              data-test-subj="visTypeTitle"
+                                            >
+                                              Vis Type 1
+                                            </span>
+                                          </p>
+                                        </div>
+                                      </button>
+                                      <button
+                                        aria-describedby="visTypeDescription-visWithSearch"
+                                        class="euiKeyPadMenuItem visNewVisDialog__type"
+                                        data-test-subj="visType-visWithSearch"
+                                        data-vis-stage="production"
+                                        type="button"
+                                      >
+                                        <div
+                                          class="euiKeyPadMenuItem__inner"
+                                        >
+                                          <div
+                                            class="euiKeyPadMenuItem__icon"
+                                          >
+                                            <svg
+                                              aria-hidden="true"
+                                              class="euiIcon euiIcon--large euiIcon--secondary"
+                                              focusable="false"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </div>
+                                          <p
+                                            class="euiKeyPadMenuItem__label"
+                                          >
+                                            <span
+                                              data-test-subj="visTypeTitle"
+                                            >
+                                              Vis with search
+                                            </span>
+                                          </p>
+                                        </div>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
                               </div>
-                            </button>
-                            <button
-                              aria-describedby="visTypeDescription-visWithSearch"
-                              class="euiKeyPadMenuItem visNewVisDialog__type"
-                              data-test-subj="visType-visWithSearch"
-                              data-vis-stage="production"
-                              type="button"
-                            >
                               <div
-                                class="euiKeyPadMenuItem__inner"
+                                class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                               >
+                                <h2
+                                  class="euiTitle euiTitle--small"
+                                >
+                                  Select a visualization type
+                                </h2>
                                 <div
-                                  class="euiKeyPadMenuItem__icon"
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
                                 >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="euiIcon euiIcon--large euiIcon--secondary"
-                                    focusable="false"
-                                    height="16"
-                                    viewBox="0 0 16 16"
-                                    width="16"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  />
+                                  <p>
+                                    Start creating your visualization by selecting a type for that visualization.
+                                  </p>
                                 </div>
-                                <p
-                                  class="euiKeyPadMenuItem__label"
-                                >
-                                  <span
-                                    data-test-subj="visTypeTitle"
-                                  >
-                                    Vis with search
-                                  </span>
-                                </p>
                               </div>
-                            </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                    <div
-                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                    >
-                      <h2
-                        class="euiTitle euiTitle--small"
-                      >
-                        Select a visualization type
-                      </h2>
-                      <div
-                        class="euiSpacer euiSpacer--m"
-                      />
-                      <div
-                        class="euiText euiText--medium"
-                      >
-                        <p>
-                          Start creating your visualization by selecting a type for that visualization.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-    >
-      <EuiModal
-        className="visNewVisDialog"
-        maxWidth={true}
-        onClose={[Function]}
-      >
-        <FocusTrap
-          _createFocusTrap={[Function]}
-          active={true}
-          focusTrapOptions={
-            Object {
-              "fallbackFocus": [Function],
-              "initialFocus": undefined,
-            }
-          }
-          paused={false}
-          tag="div"
-        >
-          <div>
-            <div
-              className="euiModal euiModal--maxWidth-default visNewVisDialog"
-              onKeyDown={[Function]}
-              tabIndex={0}
-            >
-              <EuiI18n
-                default="Closes this modal window"
-                token="euiModal.closeModal"
+                  }
+                  onActivation={[Function]}
+                  onDeactivation={[Function]}
+                  persistentFocus={false}
+                />
+              </SideEffect(FocusWatcher)>
+              <div
+                className="euiModal euiModal--maxWidth-default visNewVisDialog"
+                onKeyDown={[Function]}
+                tabIndex={0}
               >
-                <EuiButtonIcon
-                  aria-label="Closes this modal window"
-                  className="euiModal__closeIcon"
-                  color="text"
-                  iconSize="m"
-                  iconType="cross"
-                  onClick={[Function]}
-                  type="button"
+                <EuiI18n
+                  default="Closes this modal window"
+                  token="euiModal.closeModal"
                 >
-                  <button
+                  <EuiButtonIcon
                     aria-label="Closes this modal window"
-                    className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                    className="euiModal__closeIcon"
+                    color="text"
+                    iconSize="m"
+                    iconType="cross"
                     onClick={[Function]}
                     type="button"
                   >
-                    <EuiIcon
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      size="m"
-                      type="cross"
+                    <button
+                      aria-label="Closes this modal window"
+                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <cross
+                      <EuiIcon
                         aria-hidden="true"
-                        className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                        focusable="false"
-                        height="16"
-                        style={null}
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
+                        className="euiButtonIcon__icon"
+                        size="m"
+                        type="cross"
                       >
-                        <svg
+                        <cross
                           aria-hidden="true"
                           className="euiIcon euiIcon--medium euiButtonIcon__icon"
                           focusable="false"
@@ -1363,183 +2346,181 @@ exports[`NewVisModal should render as expected 1`] = `
                           width="16"
                           xmlns="http://www.w3.org/2000/svg"
                         >
-                          <path
-                            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                          />
-                        </svg>
-                      </cross>
-                    </EuiIcon>
-                  </button>
-                </EuiButtonIcon>
-              </EuiI18n>
-              <div
-                className="euiModal__flex"
-              >
-                <TypeSelection
-                  onVisTypeSelected={[Function]}
-                  visTypesRegistry={
-                    Array [
-                      Object {
-                        "hidden": false,
-                        "name": "vis",
-                        "requestHandler": "none",
-                        "requiresSearch": false,
-                        "responseHandler": "none",
-                        "stage": "production",
-                        "title": "Vis Type 1",
-                        "visualization": [Function],
-                      },
-                      Object {
-                        "hidden": false,
-                        "name": "visExp",
-                        "requestHandler": "none",
-                        "requiresSearch": false,
-                        "responseHandler": "none",
-                        "stage": "experimental",
-                        "title": "Experimental Vis",
-                        "visualization": [Function],
-                      },
-                      Object {
-                        "hidden": false,
-                        "name": "visWithSearch",
-                        "requestHandler": "none",
-                        "requiresSearch": false,
-                        "responseHandler": "none",
-                        "stage": "production",
-                        "title": "Vis with search",
-                        "visualization": [Function],
-                      },
-                    ]
-                  }
-                >
-                  <EuiModalHeader>
-                    <div
-                      className="euiModalHeader"
-                    >
-                      <EuiModalHeaderTitle>
-                        <div
-                          className="euiModalHeader__title"
-                        >
-                          <FormattedMessage
-                            defaultMessage="New Visualization"
-                            id="kbn.visualize.newVisWizard.title"
-                            values={Object {}}
+                          <svg
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                            focusable="false"
+                            height="16"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            New Visualization
-                          </FormattedMessage>
-                        </div>
-                      </EuiModalHeaderTitle>
-                    </div>
-                  </EuiModalHeader>
-                  <div
-                    className="visNewVisDialog__body"
+                            <path
+                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                            />
+                          </svg>
+                        </cross>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </EuiI18n>
+                <div
+                  className="euiModal__flex"
+                >
+                  <TypeSelection
+                    onVisTypeSelected={[Function]}
+                    visTypesRegistry={
+                      Array [
+                        Object {
+                          "hidden": false,
+                          "name": "vis",
+                          "requestHandler": "none",
+                          "requiresSearch": false,
+                          "responseHandler": "none",
+                          "stage": "production",
+                          "title": "Vis Type 1",
+                          "visualization": [Function],
+                        },
+                        Object {
+                          "hidden": false,
+                          "name": "visExp",
+                          "requestHandler": "none",
+                          "requiresSearch": false,
+                          "responseHandler": "none",
+                          "stage": "experimental",
+                          "title": "Experimental Vis",
+                          "visualization": [Function],
+                        },
+                        Object {
+                          "hidden": false,
+                          "name": "visWithSearch",
+                          "requestHandler": "none",
+                          "requiresSearch": false,
+                          "responseHandler": "none",
+                          "stage": "production",
+                          "title": "Vis with search",
+                          "visualization": [Function],
+                        },
+                      ]
+                    }
                   >
-                    <EuiFlexGroup
-                      alignItems="stretch"
-                      component="div"
-                      direction="row"
-                      gutterSize="xl"
-                      justifyContent="flexStart"
-                      responsive={true}
-                      wrap={false}
-                    >
+                    <EuiModalHeader>
                       <div
-                        className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        className="euiModalHeader"
                       >
-                        <EuiFlexItem
-                          component="div"
-                          grow={true}
-                        >
+                        <EuiModalHeaderTitle>
                           <div
-                            className="euiFlexItem"
+                            className="euiModalHeader__title"
                           >
-                            <EuiFlexGroup
-                              alignItems="stretch"
-                              className="visNewVisDialog__list"
-                              component="div"
-                              direction="column"
-                              gutterSize="none"
-                              justifyContent="flexStart"
-                              responsive={false}
-                              wrap={false}
+                            <FormattedMessage
+                              defaultMessage="New Visualization"
+                              id="kbn.visualize.newVisWizard.title"
+                              values={Object {}}
                             >
-                              <div
-                                className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                              New Visualization
+                            </FormattedMessage>
+                          </div>
+                        </EuiModalHeaderTitle>
+                      </div>
+                    </EuiModalHeader>
+                    <div
+                      className="visNewVisDialog__body"
+                    >
+                      <EuiFlexGroup
+                        alignItems="stretch"
+                        component="div"
+                        direction="row"
+                        gutterSize="xl"
+                        justifyContent="flexStart"
+                        responsive={true}
+                        wrap={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem
+                            component="div"
+                            grow={true}
+                          >
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiFlexGroup
+                                alignItems="stretch"
+                                className="visNewVisDialog__list"
+                                component="div"
+                                direction="column"
+                                gutterSize="none"
+                                justifyContent="flexStart"
+                                responsive={false}
+                                wrap={false}
                               >
-                                <EuiFlexItem
-                                  className="visNewVisDialog__searchWrapper"
-                                  component="div"
-                                  grow={false}
+                                <div
+                                  className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                                 >
-                                  <div
-                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                  <EuiFlexItem
+                                    className="visNewVisDialog__searchWrapper"
+                                    component="div"
+                                    grow={false}
                                   >
-                                    <EuiFieldSearch
-                                      aria-label="Filter for a visualization type"
-                                      compressed={false}
-                                      data-test-subj="filterVisType"
-                                      fullWidth={true}
-                                      incremental={false}
-                                      isLoading={false}
-                                      onChange={[Function]}
-                                      placeholder="Filter"
-                                      value=""
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                     >
-                                      <EuiFormControlLayout
+                                      <EuiFieldSearch
+                                        aria-label="Filter for a visualization type"
                                         compressed={false}
+                                        data-test-subj="filterVisType"
                                         fullWidth={true}
-                                        icon="search"
+                                        incremental={false}
                                         isLoading={false}
+                                        onChange={[Function]}
+                                        placeholder="Filter"
+                                        value=""
                                       >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        <EuiFormControlLayout
+                                          compressed={false}
+                                          fullWidth={true}
+                                          icon="search"
+                                          isLoading={false}
                                         >
                                           <div
-                                            className="euiFormControlLayout__childrenWrapper"
+                                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                           >
-                                            <EuiValidatableControl>
-                                              <input
-                                                aria-label="Filter for a visualization type"
-                                                className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                data-test-subj="filterVisType"
-                                                onChange={[Function]}
-                                                onKeyUp={[Function]}
-                                                placeholder="Filter"
-                                                type="search"
-                                                value=""
-                                              />
-                                            </EuiValidatableControl>
-                                            <EuiFormControlLayoutIcons
-                                              icon="search"
-                                              isLoading={false}
+                                            <div
+                                              className="euiFormControlLayout__childrenWrapper"
                                             >
-                                              <div
-                                                className="euiFormControlLayoutIcons"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
+                                              <EuiValidatableControl>
+                                                <input
+                                                  aria-label="Filter for a visualization type"
+                                                  className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                  data-test-subj="filterVisType"
+                                                  onChange={[Function]}
+                                                  onKeyUp={[Function]}
+                                                  placeholder="Filter"
                                                   type="search"
+                                                  value=""
+                                                />
+                                              </EuiValidatableControl>
+                                              <EuiFormControlLayoutIcons
+                                                icon="search"
+                                                isLoading={false}
+                                              >
+                                                <div
+                                                  className="euiFormControlLayoutIcons"
                                                 >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
+                                                  <EuiFormControlLayoutCustomIcon
+                                                    type="search"
                                                   >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
+                                                    <span
+                                                      className="euiFormControlLayoutCustomIcon"
                                                     >
-                                                      <search
+                                                      <EuiIcon
                                                         aria-hidden="true"
-                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                        focusable="false"
-                                                        height="16"
-                                                        style={null}
-                                                        viewBox="0 0 16 16"
-                                                        width="16"
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        xmlnsXlink="http://www.w3.org/1999/xlink"
+                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                        type="search"
                                                       >
-                                                        <svg
+                                                        <search
                                                           aria-hidden="true"
                                                           className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                                           focusable="false"
@@ -1550,122 +2531,123 @@ exports[`NewVisModal should render as expected 1`] = `
                                                           xmlns="http://www.w3.org/2000/svg"
                                                           xmlnsXlink="http://www.w3.org/1999/xlink"
                                                         >
-                                                          <defs>
-                                                            <path
-                                                              d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
-                                                              id="search-a"
+                                                          <svg
+                                                            aria-hidden="true"
+                                                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                            focusable="false"
+                                                            height="16"
+                                                            style={null}
+                                                            viewBox="0 0 16 16"
+                                                            width="16"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                                                          >
+                                                            <defs>
+                                                              <path
+                                                                d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+                                                                id="search-a"
+                                                              />
+                                                            </defs>
+                                                            <use
+                                                              xlinkHref="#search-a"
                                                             />
-                                                          </defs>
-                                                          <use
-                                                            xlinkHref="#search-a"
-                                                          />
-                                                        </svg>
-                                                      </search>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </EuiFormControlLayoutCustomIcon>
-                                              </div>
-                                            </EuiFormControlLayoutIcons>
+                                                          </svg>
+                                                        </search>
+                                                      </EuiIcon>
+                                                    </span>
+                                                  </EuiFormControlLayoutCustomIcon>
+                                                </div>
+                                              </EuiFormControlLayoutIcons>
+                                            </div>
                                           </div>
-                                        </div>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </div>
-                                </EuiFlexItem>
-                                <EuiFlexItem
-                                  className="visNewVisDialog__typesWrapper"
-                                  component="div"
-                                  grow={1}
-                                >
-                                  <div
-                                    className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                        </EuiFormControlLayout>
+                                      </EuiFieldSearch>
+                                    </div>
+                                  </EuiFlexItem>
+                                  <EuiFlexItem
+                                    className="visNewVisDialog__typesWrapper"
+                                    component="div"
+                                    grow={1}
                                   >
-                                    <EuiScreenReaderOnly>
-                                      <span
-                                        aria-live="polite"
-                                        className="euiScreenReaderOnly"
-                                      />
-                                    </EuiScreenReaderOnly>
-                                    <EuiKeyPadMenu
-                                      className="visNewVisDialog__types"
-                                      data-test-subj="visNewDialogTypes"
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
                                     >
-                                      <div
-                                        className="euiKeyPadMenu visNewVisDialog__types"
+                                      <EuiScreenReaderOnly>
+                                        <span
+                                          aria-live="polite"
+                                          className="euiScreenReaderOnly"
+                                        />
+                                      </EuiScreenReaderOnly>
+                                      <EuiKeyPadMenu
+                                        className="visNewVisDialog__types"
                                         data-test-subj="visNewDialogTypes"
-                                        role="menu"
                                       >
-                                        <EuiKeyPadMenuItemButton
-                                          aria-describedby="visTypeDescription-vis"
-                                          className="visNewVisDialog__type"
-                                          data-test-subj="visType-vis"
-                                          data-vis-stage="production"
-                                          disabled={false}
-                                          key="vis"
-                                          label={
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis Type 1
-                                            </span>
-                                          }
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseEnter={[Function]}
-                                          onMouseLeave={[Function]}
+                                        <div
+                                          className="euiKeyPadMenu visNewVisDialog__types"
+                                          data-test-subj="visNewDialogTypes"
+                                          role="menu"
                                         >
-                                          <button
+                                          <EuiKeyPadMenuItemButton
                                             aria-describedby="visTypeDescription-vis"
-                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            className="visNewVisDialog__type"
                                             data-test-subj="visType-vis"
                                             data-vis-stage="production"
                                             disabled={false}
+                                            key="vis"
+                                            label={
+                                              <span
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis Type 1
+                                              </span>
+                                            }
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            type="button"
                                           >
-                                            <div
-                                              className="euiKeyPadMenuItem__inner"
+                                            <button
+                                              aria-describedby="visTypeDescription-vis"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-vis"
+                                              data-vis-stage="production"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              type="button"
                                             >
                                               <div
-                                                className="euiKeyPadMenuItem__icon"
+                                                className="euiKeyPadMenuItem__inner"
                                               >
-                                                <Component
-                                                  visType={
-                                                    Object {
-                                                      "hidden": false,
-                                                      "highlighted": false,
-                                                      "name": "vis",
-                                                      "requestHandler": "none",
-                                                      "requiresSearch": false,
-                                                      "responseHandler": "none",
-                                                      "stage": "production",
-                                                      "title": "Vis Type 1",
-                                                      "visualization": [Function],
-                                                    }
-                                                  }
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
                                                 >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    color="secondary"
-                                                    size="l"
-                                                    type="empty"
+                                                  <Component
+                                                    visType={
+                                                      Object {
+                                                        "hidden": false,
+                                                        "highlighted": false,
+                                                        "name": "vis",
+                                                        "requestHandler": "none",
+                                                        "requiresSearch": false,
+                                                        "responseHandler": "none",
+                                                        "stage": "production",
+                                                        "title": "Vis Type 1",
+                                                        "visualization": [Function],
+                                                      }
+                                                    }
                                                   >
-                                                    <empty
+                                                    <EuiIcon
                                                       aria-hidden="true"
-                                                      className="euiIcon euiIcon--large euiIcon--secondary"
-                                                      focusable="false"
-                                                      height="16"
-                                                      style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width="16"
-                                                      xmlns="http://www.w3.org/2000/svg"
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
                                                     >
-                                                      <svg
+                                                      <empty
                                                         aria-hidden="true"
                                                         className="euiIcon euiIcon--large euiIcon--secondary"
                                                         focusable="false"
@@ -1674,94 +2656,94 @@ exports[`NewVisModal should render as expected 1`] = `
                                                         viewBox="0 0 16 16"
                                                         width="16"
                                                         xmlns="http://www.w3.org/2000/svg"
-                                                      />
-                                                    </empty>
-                                                  </EuiIcon>
-                                                </Component>
-                                              </div>
-                                              <p
-                                                className="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
+                                                      >
+                                                        <svg
+                                                          aria-hidden="true"
+                                                          className="euiIcon euiIcon--large euiIcon--secondary"
+                                                          focusable="false"
+                                                          height="16"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width="16"
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        />
+                                                      </empty>
+                                                    </EuiIcon>
+                                                  </Component>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
                                                 >
-                                                  Vis Type 1
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </EuiKeyPadMenuItemButton>
-                                        <EuiKeyPadMenuItemButton
-                                          aria-describedby="visTypeDescription-visWithSearch"
-                                          className="visNewVisDialog__type"
-                                          data-test-subj="visType-visWithSearch"
-                                          data-vis-stage="production"
-                                          disabled={false}
-                                          key="visWithSearch"
-                                          label={
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis with search
-                                            </span>
-                                          }
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseEnter={[Function]}
-                                          onMouseLeave={[Function]}
-                                        >
-                                          <button
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis Type 1
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItemButton>
+                                          <EuiKeyPadMenuItemButton
                                             aria-describedby="visTypeDescription-visWithSearch"
-                                            className="euiKeyPadMenuItem visNewVisDialog__type"
+                                            className="visNewVisDialog__type"
                                             data-test-subj="visType-visWithSearch"
                                             data-vis-stage="production"
                                             disabled={false}
+                                            key="visWithSearch"
+                                            label={
+                                              <span
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis with search
+                                              </span>
+                                            }
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
                                             onMouseEnter={[Function]}
                                             onMouseLeave={[Function]}
-                                            type="button"
                                           >
-                                            <div
-                                              className="euiKeyPadMenuItem__inner"
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithSearch"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-visWithSearch"
+                                              data-vis-stage="production"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              type="button"
                                             >
                                               <div
-                                                className="euiKeyPadMenuItem__icon"
+                                                className="euiKeyPadMenuItem__inner"
                                               >
-                                                <Component
-                                                  visType={
-                                                    Object {
-                                                      "hidden": false,
-                                                      "highlighted": false,
-                                                      "name": "visWithSearch",
-                                                      "requestHandler": "none",
-                                                      "requiresSearch": false,
-                                                      "responseHandler": "none",
-                                                      "stage": "production",
-                                                      "title": "Vis with search",
-                                                      "visualization": [Function],
-                                                    }
-                                                  }
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
                                                 >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    color="secondary"
-                                                    size="l"
-                                                    type="empty"
+                                                  <Component
+                                                    visType={
+                                                      Object {
+                                                        "hidden": false,
+                                                        "highlighted": false,
+                                                        "name": "visWithSearch",
+                                                        "requestHandler": "none",
+                                                        "requiresSearch": false,
+                                                        "responseHandler": "none",
+                                                        "stage": "production",
+                                                        "title": "Vis with search",
+                                                        "visualization": [Function],
+                                                      }
+                                                    }
                                                   >
-                                                    <empty
+                                                    <EuiIcon
                                                       aria-hidden="true"
-                                                      className="euiIcon euiIcon--large euiIcon--secondary"
-                                                      focusable="false"
-                                                      height="16"
-                                                      style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width="16"
-                                                      xmlns="http://www.w3.org/2000/svg"
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
                                                     >
-                                                      <svg
+                                                      <empty
                                                         aria-hidden="true"
                                                         className="euiIcon euiIcon--large euiIcon--secondary"
                                                         focusable="false"
@@ -1770,92 +2752,118 @@ exports[`NewVisModal should render as expected 1`] = `
                                                         viewBox="0 0 16 16"
                                                         width="16"
                                                         xmlns="http://www.w3.org/2000/svg"
-                                                      />
-                                                    </empty>
-                                                  </EuiIcon>
-                                                </Component>
-                                              </div>
-                                              <p
-                                                className="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
+                                                      >
+                                                        <svg
+                                                          aria-hidden="true"
+                                                          className="euiIcon euiIcon--large euiIcon--secondary"
+                                                          focusable="false"
+                                                          height="16"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width="16"
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        />
+                                                      </empty>
+                                                    </EuiIcon>
+                                                  </Component>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
                                                 >
-                                                  Vis with search
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </EuiKeyPadMenuItemButton>
-                                      </div>
-                                    </EuiKeyPadMenu>
-                                  </div>
-                                </EuiFlexItem>
-                              </div>
-                            </EuiFlexGroup>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          className="visNewVisDialog__description"
-                          component="div"
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with search
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItemButton>
+                                        </div>
+                                      </EuiKeyPadMenu>
+                                    </div>
+                                  </EuiFlexItem>
+                                </div>
+                              </EuiFlexGroup>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            className="visNewVisDialog__description"
+                            component="div"
+                            grow={false}
                           >
-                            <EuiTitle
-                              size="s"
-                              textTransform="none"
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                             >
-                              <h2
-                                className="euiTitle euiTitle--small"
+                              <EuiTitle
+                                size="s"
+                                textTransform="none"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Select a visualization type"
-                                  id="kbn.visualize.newVisWizard.selectVisType"
-                                  values={Object {}}
+                                <h2
+                                  className="euiTitle euiTitle--small"
                                 >
-                                  Select a visualization type
-                                </FormattedMessage>
-                              </h2>
-                            </EuiTitle>
-                            <EuiSpacer
-                              size="m"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--m"
-                              />
-                            </EuiSpacer>
-                            <Component>
-                              <EuiText
-                                grow={true}
+                                  <FormattedMessage
+                                    defaultMessage="Select a visualization type"
+                                    id="kbn.visualize.newVisWizard.selectVisType"
+                                    values={Object {}}
+                                  >
+                                    Select a visualization type
+                                  </FormattedMessage>
+                                </h2>
+                              </EuiTitle>
+                              <EuiSpacer
                                 size="m"
                               >
                                 <div
-                                  className="euiText euiText--medium"
+                                  className="euiSpacer euiSpacer--m"
+                                />
+                              </EuiSpacer>
+                              <Component>
+                                <EuiText
+                                  grow={true}
+                                  size="m"
                                 >
-                                  <p>
-                                    <FormattedMessage
-                                      defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                      id="kbn.visualize.newVisWizard.helpText"
-                                      values={Object {}}
-                                    >
-                                      Start creating your visualization by selecting a type for that visualization.
-                                    </FormattedMessage>
-                                  </p>
-                                </div>
-                              </EuiText>
-                            </Component>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </TypeSelection>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <p>
+                                      <FormattedMessage
+                                        defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                        id="kbn.visualize.newVisWizard.helpText"
+                                        values={Object {}}
+                                      >
+                                        Start creating your visualization by selecting a type for that visualization.
+                                      </FormattedMessage>
+                                    </p>
+                                  </div>
+                                </EuiText>
+                              </Component>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </TypeSelection>
+                </div>
               </div>
             </div>
-          </div>
-        </FocusTrap>
+            <div
+              data-focus-guard={true}
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={0}
+            />
+          </FocusLock>
+        </EuiFocusTrap>
       </EuiModal>
     </Portal>
   </EuiOverlayMask>
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap
index 38b3890005a98..7af2a164bd8cc 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap
@@ -22,7 +22,6 @@ exports[`BytesFormatEditor should render normally 1`] = `
           />
            
           <EuiIcon
-            size="m"
             type="link"
           />
         </EuiLink>
@@ -42,6 +41,7 @@ exports[`BytesFormatEditor should render normally 1`] = `
         }
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap
index 7502b03af40c6..42df3b761d963 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap
@@ -22,7 +22,6 @@ exports[`DateFormatEditor should render normally 1`] = `
           />
            
           <EuiIcon
-            size="m"
             type="link"
           />
         </EuiLink>
@@ -42,6 +41,7 @@ exports[`DateFormatEditor should render normally 1`] = `
         }
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap
index 438e3a3c9932b..fadb2e0aaf25c 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap
@@ -15,6 +15,7 @@ exports[`DurationFormatEditor should render human readable output normally 1`] =
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -45,6 +46,7 @@ exports[`DurationFormatEditor should render human readable output normally 1`] =
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -127,6 +129,7 @@ exports[`DurationFormatEditor should render non-human readable output normally 1
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -157,6 +160,7 @@ exports[`DurationFormatEditor should render non-human readable output normally 1
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -192,6 +196,7 @@ exports[`DurationFormatEditor should render non-human readable output normally 1
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap
index 97947f01612c3..bf47fd73b8388 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap
@@ -22,7 +22,6 @@ exports[`NumberFormatEditor should render normally 1`] = `
           />
            
           <EuiIcon
-            size="m"
             type="link"
           />
         </EuiLink>
@@ -42,6 +41,7 @@ exports[`NumberFormatEditor should render normally 1`] = `
         }
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap
index a04f27cacf59e..4fb01d8b1ab2c 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap
@@ -22,7 +22,6 @@ exports[`PercentFormatEditor should render normally 1`] = `
           />
            
           <EuiIcon
-            size="m"
             type="link"
           />
         </EuiLink>
@@ -42,6 +41,7 @@ exports[`PercentFormatEditor should render normally 1`] = `
         }
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
index 68a7a03e47c10..c991f2e2f33cb 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
@@ -84,6 +84,7 @@ exports[`StaticLookupFormatEditorComponent should render multiple lookup entries
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -178,6 +179,7 @@ exports[`StaticLookupFormatEditorComponent should render normally 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap
index 537c31f64d5f0..1b48a8e6a7250 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap
@@ -15,6 +15,7 @@ exports[`StringFormatEditor should render normally 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap
index d6651e5568d58..d5912370324fd 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap
@@ -15,6 +15,7 @@ exports[`TruncateFormatEditor should render normally 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap
index 20d42c19f04bd..41b5cadca3bf6 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap
@@ -21,6 +21,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -73,6 +74,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -109,6 +111,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -146,6 +149,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -198,6 +202,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -234,6 +239,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -271,6 +277,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
@@ -323,6 +330,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -359,6 +367,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap
index a1e131d81b0a3..66a97acc6cf2a 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap
@@ -12,6 +12,7 @@ exports[`FormatEditorSamples should render normally 1`] = `
       values={Object {}}
     />
   }
+  labelType="label"
 >
   <EuiBasicTable
     className="kbnFieldFormatEditor__samples"
diff --git a/src/legacy/ui/public/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.js.snap b/src/legacy/ui/public/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.js.snap
index 790ed21d44cda..47c419d44f8cc 100644
--- a/src/legacy/ui/public/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.js.snap
@@ -33,7 +33,6 @@ exports[`ScriptingWarningCallOut should render normally 1`] = `
               />
                
               <EuiIcon
-                size="m"
                 type="link"
               />
             </EuiLink>,
@@ -50,7 +49,6 @@ exports[`ScriptingWarningCallOut should render normally 1`] = `
               />
                
               <EuiIcon
-                size="m"
                 type="link"
               />
             </EuiLink>,
diff --git a/src/legacy/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap b/src/legacy/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
index ec424a401a632..c58cab79fdc4e 100644
--- a/src/legacy/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
+++ b/src/legacy/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
@@ -85,6 +85,7 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiSwitch
           checked={false}
@@ -191,6 +192,7 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiSwitch
           checked={true}
diff --git a/src/legacy/ui/public/query_bar/components/query_bar.tsx b/src/legacy/ui/public/query_bar/components/query_bar.tsx
index 1cc532f861cd4..758c386bdb84c 100644
--- a/src/legacy/ui/public/query_bar/components/query_bar.tsx
+++ b/src/legacy/ui/public/query_bar/components/query_bar.tsx
@@ -38,7 +38,13 @@ import { matchPairs } from '../lib/match_pairs';
 import { QueryLanguageSwitcher } from './language_switcher';
 import { SuggestionsComponent } from './typeahead/suggestions_component';
 
-import { EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiOutsideClickDetector } from '@elastic/eui';
+import {
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiOutsideClickDetector,
+  OnRefreshChangeProps,
+} from '@elastic/eui';
 
 // @ts-ignore
 import { EuiSuperDatePicker, EuiSuperUpdateButton } from '@elastic/eui';
@@ -85,7 +91,7 @@ interface Props {
   isRefreshPaused?: boolean;
   refreshInterval?: number;
   showAutoRefreshOnly?: boolean;
-  onRefreshChange?: (isPaused: boolean, refreshInterval: number) => void;
+  onRefreshChange?: (props: OnRefreshChangeProps) => void;
 }
 
 interface State {
diff --git a/src/legacy/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap b/src/legacy/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
index e9ca6b2096021..56875f1f1c3f1 100644
--- a/src/legacy/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
+++ b/src/legacy/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
@@ -16,7 +16,6 @@ exports[`SuggestionComponent Should display the suggestion and use the provided
       className="kbnSuggestionItem__type"
     >
       <EuiIcon
-        size="m"
         type="kqlValue"
       />
     </div>
@@ -53,7 +52,6 @@ exports[`SuggestionComponent Should make the element active if the selected prop
       className="kbnSuggestionItem__type"
     >
       <EuiIcon
-        size="m"
         type="kqlValue"
       />
     </div>
diff --git a/src/legacy/ui/public/search_bar/components/search_bar.tsx b/src/legacy/ui/public/search_bar/components/search_bar.tsx
index 52e49e6d7b056..496e8531649a4 100644
--- a/src/legacy/ui/public/search_bar/components/search_bar.tsx
+++ b/src/legacy/ui/public/search_bar/components/search_bar.tsx
@@ -18,7 +18,7 @@
  */
 
 // @ts-ignore
-import { EuiFilterButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFilterButton, EuiFlexGroup, EuiFlexItem, OnRefreshChangeProps } from '@elastic/eui';
 import { Filter } from '@kbn/es-query';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
@@ -60,7 +60,7 @@ interface Props {
   isRefreshPaused?: boolean;
   refreshInterval?: number;
   showAutoRefreshOnly?: boolean;
-  onRefreshChange?: (isPaused: boolean, refreshInterval: number) => void;
+  onRefreshChange?: (props: OnRefreshChangeProps) => void;
 }
 
 interface State {
@@ -135,7 +135,7 @@ class SearchBarUI extends Component<Props, State> {
         onClick={this.toggleFiltersVisible}
         isSelected={this.state.isFiltersVisible}
         hasActiveFilters={this.state.isFiltersVisible}
-        numFilters={this.props.filters.length > 0 ? this.props.filters.length : null}
+        numFilters={this.props.filters.length > 0 ? this.props.filters.length : undefined}
         aria-controls="GlobalFilterGroup"
         aria-expanded={!!this.state.isFiltersVisible}
         title={`${this.props.filters.length} ${filtersAppliedText} ${clickToShowOrHideText}`}
diff --git a/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap b/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap
index 8de71120f92a6..764a4e5c9b1e3 100644
--- a/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap
+++ b/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap
@@ -27,6 +27,7 @@ exports[`render 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiRadioGroup
       idSelected="snapshot"
@@ -133,6 +134,7 @@ exports[`render 1`] = `
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
+    labelType="label"
   >
     <EuiFlexGroup
       alignItems="stretch"
@@ -208,6 +210,7 @@ exports[`should enable saved object export option when objectId is provided 1`]
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiRadioGroup
       idSelected="snapshot"
@@ -314,6 +317,7 @@ exports[`should enable saved object export option when objectId is provided 1`]
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
+    labelType="label"
   >
     <EuiFlexGroup
       alignItems="stretch"
diff --git a/x-pack/package.json b/x-pack/package.json
index ff40567c8cb4e..341a9ce4ca10a 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -135,7 +135,7 @@
   },
   "dependencies": {
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "7.1.0",
+    "@elastic/eui": "9.0.1",
     "@elastic/node-crypto": "0.1.2",
     "@elastic/numeral": "2.3.2",
     "@kbn/babel-preset": "1.0.0",
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index 21a6c5c296984..048e41dcc6a31 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -9,54 +9,65 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
       className="euiTableHeaderMobile"
     >
       <div
-        className="euiTableSortMobile"
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
       >
         <div
-          className="euiPopover euiPopover--anchorDownRight"
-          id="sortPopover"
-          onClick={[Function]}
-          onKeyDown={[Function]}
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            className="euiPopover__anchor"
+            className="euiTableSortMobile"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+            <div
+              className="euiPopover euiPopover--anchorDownRight"
+              id="sortPopover"
               onClick={[Function]}
-              type="button"
+              onKeyDown={[Function]}
             >
-              <span
-                className="euiButtonEmpty__content"
+              <div
+                className="euiPopover__anchor"
               >
-                <svg
-                  aria-hidden="true"
-                  className="euiIcon euiIcon--medium euiButtonEmpty__icon"
-                  focusable="false"
-                  height="16"
-                  style={null}
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <defs>
-                    <path
-                      d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
-                      id="arrow_down-a"
-                    />
-                  </defs>
-                  <use
-                    fillRule="nonzero"
-                    xlinkHref="#arrow_down-a"
-                  />
-                </svg>
-                <span
-                  className="euiButtonEmpty__text"
+                <button
+                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  Sorting
-                </span>
-              </span>
-            </button>
+                  <span
+                    className="euiButtonEmpty__content"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiButtonEmpty__icon"
+                      focusable="false"
+                      height="16"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                    >
+                      <defs>
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                          id="arrow_down-a"
+                        />
+                      </defs>
+                      <use
+                        fillRule="nonzero"
+                        xlinkHref="#arrow_down-a"
+                      />
+                    </svg>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Sorting
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -324,54 +335,65 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
       className="euiTableHeaderMobile"
     >
       <div
-        className="euiTableSortMobile"
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
       >
         <div
-          className="euiPopover euiPopover--anchorDownRight"
-          id="sortPopover"
-          onClick={[Function]}
-          onKeyDown={[Function]}
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            className="euiPopover__anchor"
+            className="euiTableSortMobile"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+            <div
+              className="euiPopover euiPopover--anchorDownRight"
+              id="sortPopover"
               onClick={[Function]}
-              type="button"
+              onKeyDown={[Function]}
             >
-              <span
-                className="euiButtonEmpty__content"
+              <div
+                className="euiPopover__anchor"
               >
-                <svg
-                  aria-hidden="true"
-                  className="euiIcon euiIcon--medium euiButtonEmpty__icon"
-                  focusable="false"
-                  height="16"
-                  style={null}
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <defs>
-                    <path
-                      d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
-                      id="arrow_down-a"
-                    />
-                  </defs>
-                  <use
-                    fillRule="nonzero"
-                    xlinkHref="#arrow_down-a"
-                  />
-                </svg>
-                <span
-                  className="euiButtonEmpty__text"
+                <button
+                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  Sorting
-                </span>
-              </span>
-            </button>
+                  <span
+                    className="euiButtonEmpty__content"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiButtonEmpty__icon"
+                      focusable="false"
+                      height="16"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                    >
+                      <defs>
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                          id="arrow_down-a"
+                        />
+                      </defs>
+                      <use
+                        fillRule="nonzero"
+                        xlinkHref="#arrow_down-a"
+                      />
+                    </svg>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Sorting
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -519,9 +541,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         >
           <td
             className="euiTableRowCell"
-            data-header="Group ID"
             width="96px"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Group ID
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -535,9 +561,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Error message and culprit"
             width="50%"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Error message and culprit
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -579,7 +609,6 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header=""
           >
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
@@ -587,8 +616,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Occurrences"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Occurrences
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
@@ -597,8 +630,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Latest occurrence"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Latest occurrence
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
@@ -611,9 +648,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         >
           <td
             className="euiTableRowCell"
-            data-header="Group ID"
             width="96px"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Group ID
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -627,9 +668,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Error message and culprit"
             width="50%"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Error message and culprit
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -671,7 +716,6 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header=""
           >
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
@@ -679,8 +723,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Occurrences"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Occurrences
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
@@ -689,8 +737,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Latest occurrence"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Latest occurrence
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
@@ -703,9 +755,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         >
           <td
             className="euiTableRowCell"
-            data-header="Group ID"
             width="96px"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Group ID
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -719,9 +775,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Error message and culprit"
             width="50%"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Error message and culprit
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -763,7 +823,6 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header=""
           >
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
@@ -771,8 +830,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Occurrences"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Occurrences
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
@@ -781,8 +844,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Latest occurrence"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Latest occurrence
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
@@ -795,9 +862,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         >
           <td
             className="euiTableRowCell"
-            data-header="Group ID"
             width="96px"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Group ID
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -811,9 +882,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Error message and culprit"
             width="50%"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Error message and culprit
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--overflowingContent"
             >
@@ -855,7 +930,6 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header=""
           >
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
@@ -863,8 +937,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Occurrences"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Occurrences
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
@@ -873,8 +951,12 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </td>
           <td
             className="euiTableRowCell"
-            data-header="Latest occurrence"
           >
+            <div
+              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Latest occurrence
+            </div>
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
index 3404486b9be6b..6c9e5d5a2be6c 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
@@ -485,8 +485,8 @@ Object {
     },
   ],
   "serviceColors": Object {
-    "opbeans-node": "rgb(49, 133, 252)",
-    "opbeans-ruby": "rgb(0, 179, 164)",
+    "opbeans-node": "#3185fc",
+    "opbeans-ruby": "#00b3a4",
   },
   "services": Array [
     "opbeans-node",
@@ -919,7 +919,7 @@ Object {
     },
   ],
   "serviceColors": Object {
-    "opbeans-ruby": "rgb(49, 133, 252)",
+    "opbeans-ruby": "#3185fc",
   },
   "services": Array [
     "opbeans-ruby",
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap b/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
index cc5c169bbda11..943d47f335b96 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
@@ -7,6 +7,7 @@ exports[`TransactionOverviewView should render with type filter controls 1`] = `
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Filter by type"
+    labelType="label"
   >
     <EuiSelect
       compressed={false}
diff --git a/x-pack/plugins/apm/public/components/shared/HistoryTabs/__test__/__snapshots__/HistoryTabs.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/HistoryTabs/__test__/__snapshots__/HistoryTabs.test.tsx.snap
index f9ed76ec38cd3..c2513d33d969d 100644
--- a/x-pack/plugins/apm/public/components/shared/HistoryTabs/__test__/__snapshots__/HistoryTabs.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/HistoryTabs/__test__/__snapshots__/HistoryTabs.test.tsx.snap
@@ -51,9 +51,7 @@ exports[`HistoryTabs should render correctly 1`] = `
       Three
     </EuiTab>
   </EuiTabs>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <Route
     key="/one"
     path="/one"
diff --git a/x-pack/plugins/apm/public/components/shared/ImpactBar/__test__/__snapshots__/ImpactBar.test.js.snap b/x-pack/plugins/apm/public/components/shared/ImpactBar/__test__/__snapshots__/ImpactBar.test.js.snap
index 67378b5634040..8e89939f585aa 100644
--- a/x-pack/plugins/apm/public/components/shared/ImpactBar/__test__/__snapshots__/ImpactBar.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/ImpactBar/__test__/__snapshots__/ImpactBar.test.js.snap
@@ -4,7 +4,6 @@ exports[`ImpactBar component should render with default values 1`] = `
 <EuiProgress
   color="primary"
   max={100}
-  position="static"
   size="l"
   value={25}
 />
@@ -14,7 +13,6 @@ exports[`ImpactBar component should render with overridden values 1`] = `
 <EuiProgress
   color="danger"
   max={5}
-  position="static"
   size="s"
   value={2}
 />
diff --git a/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/__snapshots__/NestedKeyValueTable.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/__snapshots__/NestedKeyValueTable.test.tsx.snap
index 67f89fd06cc32..74309f0edf7a2 100644
--- a/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/__snapshots__/NestedKeyValueTable.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/__snapshots__/NestedKeyValueTable.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`FormattedKey component should render when the value is defined 3`] = `
 
 exports[`FormattedKey component should render when the value is null or undefined 1`] = `
 .c0 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
 }
 
 <FormattedKey
@@ -48,7 +48,7 @@ exports[`FormattedKey component should render when the value is null or undefine
 
 exports[`FormattedKey component should render when the value is null or undefined 2`] = `
 .c0 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
 }
 
 <FormattedKey
@@ -134,7 +134,7 @@ exports[`FormattedValue component should render an object 1`] = `
 
 exports[`FormattedValue component should render null 1`] = `
 .c0 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
 }
 
 <FormattedValue
@@ -152,7 +152,7 @@ exports[`FormattedValue component should render null 1`] = `
 
 exports[`FormattedValue component should render undefined 1`] = `
 .c0 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
 }
 
 <FormattedValue>
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
index 30bb7cc64b06d..7f00162106454 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Stackframe when stackframe has source lines should render correctly 1`] = `
 .c2 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
   padding: 8px;
   font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
   font-size: 14px;
@@ -10,7 +10,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
 
 .c3 {
   font-weight: bold;
-  color: rgb(0,0,0);
+  color: #000000;
 }
 
 .c4 {
@@ -32,7 +32,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
   top: 0;
   left: 0;
   border-radius: 0 0 0 5px;
-  background: rgb(245,247,250);
+  background: #f5f7fa;
 }
 
 .c7 {
@@ -40,10 +40,10 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
   min-width: 42px;
   padding-left: 8px;
   padding-right: 4px;
-  color: rgb(152,162,179);
+  color: #98a2b3;
   line-height: 18px;
   text-align: right;
-  border-right: 1px solid rgb(211,218,230);
+  border-right: 1px solid #d3dae6;
 }
 
 .c7:last-of-type {
@@ -55,10 +55,10 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
   min-width: 42px;
   padding-left: 8px;
   padding-right: 4px;
-  color: rgb(152,162,179);
+  color: #98a2b3;
   line-height: 18px;
   text-align: right;
-  border-right: 1px solid rgb(211,218,230);
+  border-right: 1px solid #d3dae6;
   background-color: #fef6e5;
 }
 
@@ -70,7 +70,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
   overflow: auto;
   margin: 0 0 0 42px;
   padding: 0;
-  background-color: rgb(255,255,255);
+  background-color: #ffffff;
 }
 
 .c9:last-of-type {
@@ -97,7 +97,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
 }
 
 .c1 {
-  border-bottom: 1px solid rgb(211,218,230);
+  border-bottom: 1px solid #d3dae6;
   border-radius: 5px 5px 0 0;
 }
 
@@ -105,9 +105,9 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
   position: relative;
   font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
   font-size: 14px;
-  border: 1px solid rgb(211,218,230);
+  border: 1px solid #d3dae6;
   border-radius: 5px;
-  background: rgb(245,247,250);
+  background: #f5f7fa;
 }
 
 <Stackframe
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
index a0ee770a0898a..ac9bfbca57002 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
@@ -50,7 +50,6 @@ exports[`TransactionActionMenu component should render with data 1`] = `
               grow={false}
             >
               <EuiIcon
-                size="m"
                 type="popout"
               />
             </EuiFlexItem>
@@ -87,7 +86,6 @@ exports[`TransactionActionMenu component should render with data 1`] = `
               grow={false}
             >
               <EuiIcon
-                size="m"
                 type="popout"
               />
             </EuiFlexItem>
@@ -124,7 +122,6 @@ exports[`TransactionActionMenu component should render with data 1`] = `
               grow={false}
             >
               <EuiIcon
-                size="m"
                 type="popout"
               />
             </EuiFlexItem>
@@ -161,7 +158,6 @@ exports[`TransactionActionMenu component should render with data 1`] = `
               grow={false}
             >
               <EuiIcon
-                size="m"
                 type="popout"
               />
             </EuiFlexItem>
@@ -198,7 +194,6 @@ exports[`TransactionActionMenu component should render with data 1`] = `
               grow={false}
             >
               <EuiIcon
-                size="m"
                 type="popout"
               />
             </EuiFlexItem>
@@ -235,7 +230,6 @@ exports[`TransactionActionMenu component should render with data 1`] = `
               grow={false}
             >
               <EuiIcon
-                size="m"
                 type="popout"
               />
             </EuiFlexItem>
@@ -272,7 +266,6 @@ exports[`TransactionActionMenu component should render with data 1`] = `
               grow={false}
             >
               <EuiIcon
-                size="m"
                 type="popout"
               />
             </EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
index e486ff9f21fc3..119f46f09d1ea 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
@@ -3,7 +3,7 @@
 exports[`when response has data Initially should have 3 legends  1`] = `
 Array [
   Object {
-    "color": "rgb(49, 133, 252)",
+    "color": "#3185fc",
     "disabled": undefined,
     "onClick": [Function],
     "text": <styled.span>
@@ -14,7 +14,7 @@ Array [
     </styled.span>,
   },
   Object {
-    "color": "rgb(230, 194, 32)",
+    "color": "#e6c220",
     "disabled": undefined,
     "onClick": [Function],
     "text": <styled.span>
@@ -22,7 +22,7 @@ Array [
     </styled.span>,
   },
   Object {
-    "color": "rgb(249, 133, 16)",
+    "color": "#f98510",
     "disabled": undefined,
     "onClick": [Function],
     "text": <styled.span>
@@ -441,7 +441,7 @@ Array [
               style={
                 Object {
                   "opacity": 1,
-                  "stroke": "rgb(249, 133, 16)",
+                  "stroke": "#f98510",
                   "strokeDasharray": undefined,
                   "strokeWidth": undefined,
                 }
@@ -462,9 +462,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -479,9 +479,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -496,9 +496,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -513,9 +513,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -530,9 +530,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -547,9 +547,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -564,9 +564,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -581,9 +581,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -598,9 +598,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -615,9 +615,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -632,9 +632,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -649,9 +649,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -666,9 +666,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -683,9 +683,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -700,9 +700,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -717,9 +717,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -734,9 +734,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -751,9 +751,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -768,9 +768,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -785,9 +785,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -802,9 +802,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -819,9 +819,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -836,9 +836,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -853,9 +853,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -870,9 +870,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -887,9 +887,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -904,9 +904,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -921,9 +921,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -938,9 +938,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -955,9 +955,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -972,9 +972,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -994,7 +994,7 @@ Array [
               style={
                 Object {
                   "opacity": 1,
-                  "stroke": "rgb(230, 194, 32)",
+                  "stroke": "#e6c220",
                   "strokeDasharray": undefined,
                   "strokeWidth": undefined,
                 }
@@ -1015,9 +1015,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1032,9 +1032,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1049,9 +1049,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1066,9 +1066,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1083,9 +1083,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1100,9 +1100,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1117,9 +1117,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1134,9 +1134,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1151,9 +1151,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1168,9 +1168,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1185,9 +1185,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1202,9 +1202,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1219,9 +1219,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1236,9 +1236,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1253,9 +1253,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1270,9 +1270,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1287,9 +1287,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1304,9 +1304,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1321,9 +1321,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1338,9 +1338,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1355,9 +1355,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1372,9 +1372,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1389,9 +1389,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1406,9 +1406,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1423,9 +1423,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1440,9 +1440,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1457,9 +1457,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1474,9 +1474,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1491,9 +1491,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1508,9 +1508,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1525,9 +1525,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -1547,7 +1547,7 @@ Array [
               style={
                 Object {
                   "opacity": 1,
-                  "stroke": "rgb(49, 133, 252)",
+                  "stroke": "#3185fc",
                   "strokeDasharray": undefined,
                   "strokeWidth": undefined,
                 }
@@ -1568,9 +1568,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1585,9 +1585,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1602,9 +1602,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1619,9 +1619,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1636,9 +1636,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1653,9 +1653,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1670,9 +1670,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1687,9 +1687,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1704,9 +1704,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1721,9 +1721,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1738,9 +1738,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1755,9 +1755,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1772,9 +1772,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1789,9 +1789,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1806,9 +1806,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1823,9 +1823,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1840,9 +1840,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1857,9 +1857,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1874,9 +1874,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1891,9 +1891,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1908,9 +1908,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1925,9 +1925,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1942,9 +1942,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1959,9 +1959,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1976,9 +1976,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -1993,9 +1993,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -2010,9 +2010,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -2027,9 +2027,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -2044,9 +2044,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -2061,9 +2061,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -2078,9 +2078,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -2635,7 +2635,7 @@ Array [
   -ms-flex-align: center;
   align-items: center;
   font-size: 12px;
-  color: rgb(105,112,125);
+  color: #69707d;
   cursor: pointer;
   opacity: 1;
   -webkit-user-select: none;
@@ -2648,7 +2648,7 @@ Array [
   width: 11px;
   height: 11px;
   margin-right: 5.5px;
-  background: rgb(49,133,252);
+  background: #3185fc;
   border-radius: 100%;
 }
 
@@ -2656,7 +2656,7 @@ Array [
   width: 11px;
   height: 11px;
   margin-right: 5.5px;
-  background: rgb(230,194,32);
+  background: #e6c220;
   border-radius: 100%;
 }
 
@@ -2664,7 +2664,7 @@ Array [
   width: 11px;
   height: 11px;
   margin-right: 5.5px;
-  background: rgb(249,133,16);
+  background: #f98510;
   border-radius: 100%;
 }
 
@@ -2690,7 +2690,7 @@ Array [
 
 .c3 {
   white-space: nowrap;
-  color: rgb(152,162,179);
+  color: #98a2b3;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2699,7 +2699,7 @@ Array [
 
 .c4 {
   margin-left: 4px;
-  color: rgb(0,0,0);
+  color: #000000;
   display: inline-block;
 }
 
@@ -2714,7 +2714,7 @@ Array [
     >
       <span
         className="c2"
-        color="rgb(49, 133, 252)"
+        color="#3185fc"
         radius={11}
       />
       <span
@@ -2736,7 +2736,7 @@ Array [
     >
       <span
         className="c5"
-        color="rgb(230, 194, 32)"
+        color="#e6c220"
         radius={11}
       />
       <span
@@ -2753,7 +2753,7 @@ Array [
     >
       <span
         className="c6"
-        color="rgb(249, 133, 16)"
+        color="#f98510"
         radius={11}
       />
       <span
@@ -2790,17 +2790,17 @@ exports[`when response has data when dragging without releasing should display S
 exports[`when response has data when setting hoverX should display tooltip 1`] = `
 Array [
   Object {
-    "color": "rgb(49, 133, 252)",
+    "color": "#3185fc",
     "text": "Avg.",
     "value": 438704.4,
   },
   Object {
-    "color": "rgb(230, 194, 32)",
+    "color": "#e6c220",
     "text": "95th",
     "value": 1557383.999999999,
   },
   Object {
-    "color": "rgb(249, 133, 16)",
+    "color": "#f98510",
     "text": "99th",
     "value": 1820377.1200000006,
   },
@@ -2819,7 +2819,7 @@ Array [
   -ms-flex-align: center;
   align-items: center;
   font-size: 12px;
-  color: rgb(105,112,125);
+  color: #69707d;
   cursor: initial;
   opacity: 1;
   -webkit-user-select: none;
@@ -2832,7 +2832,7 @@ Array [
   width: 8px;
   height: 8px;
   margin-right: 4px;
-  background: rgb(49,133,252);
+  background: #3185fc;
   border-radius: 100%;
 }
 
@@ -2840,7 +2840,7 @@ Array [
   width: 8px;
   height: 8px;
   margin-right: 4px;
-  background: rgb(230,194,32);
+  background: #e6c220;
   border-radius: 100%;
 }
 
@@ -2848,7 +2848,7 @@ Array [
   width: 8px;
   height: 8px;
   margin-right: 4px;
-  background: rgb(249,133,16);
+  background: #f98510;
   border-radius: 100%;
 }
 
@@ -2857,19 +2857,19 @@ Array [
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
-  border: 1px solid rgb(211,218,230);
-  background: rgb(255,255,255);
+  border: 1px solid #d3dae6;
+  background: #ffffff;
   border-radius: 5px;
   font-size: 14px;
-  color: rgb(0,0,0);
+  color: #000000;
 }
 
 .c1 {
-  background: rgb(245,247,250);
-  border-bottom: 1px solid rgb(211,218,230);
+  background: #f5f7fa;
+  border-bottom: 1px solid #d3dae6;
   border-radius: 5px 5px 0 0;
   padding: 8px;
-  color: rgb(152,162,179);
+  color: #98a2b3;
 }
 
 .c2 {
@@ -2879,7 +2879,7 @@ Array [
 }
 
 .c10 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
   margin: 8px;
   font-size: 12px;
 }
@@ -2901,12 +2901,12 @@ Array [
 }
 
 .c4 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
   padding-bottom: 0;
 }
 
 .c7 {
-  color: rgb(105,112,125);
+  color: #69707d;
   font-size: 14px;
 }
 
@@ -3317,7 +3317,7 @@ Array [
               style={
                 Object {
                   "opacity": 1,
-                  "stroke": "rgb(249, 133, 16)",
+                  "stroke": "#f98510",
                   "strokeDasharray": undefined,
                   "strokeWidth": undefined,
                 }
@@ -3338,9 +3338,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3355,9 +3355,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3372,9 +3372,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3389,9 +3389,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3406,9 +3406,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3423,9 +3423,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3440,9 +3440,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3457,9 +3457,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3474,9 +3474,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3491,9 +3491,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3508,9 +3508,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3525,9 +3525,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3542,9 +3542,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3559,9 +3559,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3576,9 +3576,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3593,9 +3593,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3610,9 +3610,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3627,9 +3627,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3644,9 +3644,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3661,9 +3661,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3678,9 +3678,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3695,9 +3695,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3712,9 +3712,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3729,9 +3729,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3746,9 +3746,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3763,9 +3763,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3780,9 +3780,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3797,9 +3797,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3814,9 +3814,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3831,9 +3831,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3848,9 +3848,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(249, 133, 16)",
+                    "fill": "#f98510",
                     "opacity": 1,
-                    "stroke": "rgb(249, 133, 16)",
+                    "stroke": "#f98510",
                     "strokeWidth": 1,
                   }
                 }
@@ -3870,7 +3870,7 @@ Array [
               style={
                 Object {
                   "opacity": 1,
-                  "stroke": "rgb(230, 194, 32)",
+                  "stroke": "#e6c220",
                   "strokeDasharray": undefined,
                   "strokeWidth": undefined,
                 }
@@ -3891,9 +3891,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -3908,9 +3908,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -3925,9 +3925,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -3942,9 +3942,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -3959,9 +3959,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -3976,9 +3976,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -3993,9 +3993,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4010,9 +4010,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4027,9 +4027,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4044,9 +4044,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4061,9 +4061,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4078,9 +4078,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4095,9 +4095,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4112,9 +4112,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4129,9 +4129,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4146,9 +4146,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4163,9 +4163,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4180,9 +4180,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4197,9 +4197,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4214,9 +4214,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4231,9 +4231,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4248,9 +4248,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4265,9 +4265,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4282,9 +4282,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4299,9 +4299,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4316,9 +4316,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4333,9 +4333,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4350,9 +4350,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4367,9 +4367,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4384,9 +4384,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4401,9 +4401,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(230, 194, 32)",
+                    "fill": "#e6c220",
                     "opacity": 1,
-                    "stroke": "rgb(230, 194, 32)",
+                    "stroke": "#e6c220",
                     "strokeWidth": 1,
                   }
                 }
@@ -4423,7 +4423,7 @@ Array [
               style={
                 Object {
                   "opacity": 1,
-                  "stroke": "rgb(49, 133, 252)",
+                  "stroke": "#3185fc",
                   "strokeDasharray": undefined,
                   "strokeWidth": undefined,
                 }
@@ -4444,9 +4444,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4461,9 +4461,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4478,9 +4478,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4495,9 +4495,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4512,9 +4512,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4529,9 +4529,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4546,9 +4546,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4563,9 +4563,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4580,9 +4580,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4597,9 +4597,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4614,9 +4614,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4631,9 +4631,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4648,9 +4648,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4665,9 +4665,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4682,9 +4682,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4699,9 +4699,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4716,9 +4716,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4733,9 +4733,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4750,9 +4750,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4767,9 +4767,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4784,9 +4784,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4801,9 +4801,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4818,9 +4818,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4835,9 +4835,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4852,9 +4852,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4869,9 +4869,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4886,9 +4886,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4903,9 +4903,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4920,9 +4920,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4937,9 +4937,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -4954,9 +4954,9 @@ Array [
                 r={0.5}
                 style={
                   Object {
-                    "fill": "rgb(49, 133, 252)",
+                    "fill": "#3185fc",
                     "opacity": 1,
-                    "stroke": "rgb(49, 133, 252)",
+                    "stroke": "#3185fc",
                     "strokeWidth": 1,
                   }
                 }
@@ -5010,9 +5010,9 @@ Array [
               r={5}
               style={
                 Object {
-                  "fill": "rgb(49, 133, 252)",
+                  "fill": "#3185fc",
                   "opacity": 1,
-                  "stroke": "rgb(49, 133, 252)",
+                  "stroke": "#3185fc",
                   "strokeWidth": 1,
                 }
               }
@@ -5027,9 +5027,9 @@ Array [
               r={5}
               style={
                 Object {
-                  "fill": "rgb(230, 194, 32)",
+                  "fill": "#e6c220",
                   "opacity": 1,
-                  "stroke": "rgb(230, 194, 32)",
+                  "stroke": "#e6c220",
                   "strokeWidth": 1,
                 }
               }
@@ -5044,9 +5044,9 @@ Array [
               r={5}
               style={
                 Object {
-                  "fill": "rgb(249, 133, 16)",
+                  "fill": "#f98510",
                   "opacity": 1,
-                  "stroke": "rgb(249, 133, 16)",
+                  "stroke": "#f98510",
                   "strokeWidth": 1,
                 }
               }
@@ -5097,7 +5097,7 @@ Array [
                 >
                   <span
                     className="c6"
-                    color="rgb(49, 133, 252)"
+                    color="#3185fc"
                     radius={8}
                   />
                   Avg.
@@ -5118,7 +5118,7 @@ Array [
                 >
                   <span
                     className="c8"
-                    color="rgb(230, 194, 32)"
+                    color="#e6c220"
                     radius={8}
                   />
                   95th
@@ -5139,7 +5139,7 @@ Array [
                 >
                   <span
                     className="c9"
-                    color="rgb(249, 133, 16)"
+                    color="#f98510"
                     radius={8}
                   />
                   99th
@@ -5671,7 +5671,7 @@ Array [
   -ms-flex-align: center;
   align-items: center;
   font-size: 12px;
-  color: rgb(105,112,125);
+  color: #69707d;
   cursor: pointer;
   opacity: 1;
   -webkit-user-select: none;
@@ -5684,7 +5684,7 @@ Array [
   width: 11px;
   height: 11px;
   margin-right: 5.5px;
-  background: rgb(49,133,252);
+  background: #3185fc;
   border-radius: 100%;
 }
 
@@ -5692,7 +5692,7 @@ Array [
   width: 11px;
   height: 11px;
   margin-right: 5.5px;
-  background: rgb(230,194,32);
+  background: #e6c220;
   border-radius: 100%;
 }
 
@@ -5700,7 +5700,7 @@ Array [
   width: 11px;
   height: 11px;
   margin-right: 5.5px;
-  background: rgb(249,133,16);
+  background: #f98510;
   border-radius: 100%;
 }
 
@@ -5726,7 +5726,7 @@ Array [
 
 .c3 {
   white-space: nowrap;
-  color: rgb(152,162,179);
+  color: #98a2b3;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5735,7 +5735,7 @@ Array [
 
 .c4 {
   margin-left: 4px;
-  color: rgb(0,0,0);
+  color: #000000;
   display: inline-block;
 }
 
@@ -5750,7 +5750,7 @@ Array [
     >
       <span
         className="c2"
-        color="rgb(49, 133, 252)"
+        color="#3185fc"
         radius={11}
       />
       <span
@@ -5772,7 +5772,7 @@ Array [
     >
       <span
         className="c5"
-        color="rgb(230, 194, 32)"
+        color="#e6c220"
         radius={11}
       />
       <span
@@ -5789,7 +5789,7 @@ Array [
     >
       <span
         className="c6"
-        color="rgb(249, 133, 16)"
+        color="#f98510"
         radius={11}
       />
       <span
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
index c4d35ceeb9862..13baf226c8610 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
@@ -1410,19 +1410,19 @@ exports[`Histogram when hovering over a non-empty bucket should have correct mar
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
-  border: 1px solid rgb(211,218,230);
-  background: rgb(255,255,255);
+  border: 1px solid #d3dae6;
+  background: #ffffff;
   border-radius: 5px;
   font-size: 14px;
-  color: rgb(0,0,0);
+  color: #000000;
 }
 
 .c1 {
-  background: rgb(245,247,250);
-  border-bottom: 1px solid rgb(211,218,230);
+  background: #f5f7fa;
+  border-bottom: 1px solid #d3dae6;
   border-radius: 5px 5px 0 0;
   padding: 8px;
-  color: rgb(152,162,179);
+  color: #98a2b3;
 }
 
 .c2 {
@@ -1432,13 +1432,13 @@ exports[`Histogram when hovering over a non-empty bucket should have correct mar
 }
 
 .c4 {
-  color: rgb(152,162,179);
+  color: #98a2b3;
   margin: 8px;
   font-size: 12px;
 }
 
 .c3 {
-  color: rgb(105,112,125);
+  color: #69707d;
   font-size: 14px;
 }
 
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap
index 2a06101ee779f..3d2c94ea89183 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap
@@ -11,7 +11,7 @@ exports[`Timeline should render with data 1`] = `
   -ms-flex-align: center;
   align-items: center;
   font-size: 12px;
-  color: rgb(105,112,125);
+  color: #69707d;
   cursor: pointer;
   opacity: 1;
   -webkit-user-select: none;
@@ -24,7 +24,7 @@ exports[`Timeline should render with data 1`] = `
   width: 11px;
   height: 11px;
   margin-right: 5.5px;
-  background: rgb(152,162,179);
+  background: #98a2b3;
   border-radius: 100%;
 }
 
@@ -48,8 +48,8 @@ exports[`Timeline should render with data 1`] = `
         <div
           style={
             Object {
-              "backgroundColor": "rgb(255, 255, 255)",
-              "borderBottom": "1px solid rgb(152, 162, 179)",
+              "backgroundColor": "#ffffff",
+              "borderBottom": "1px solid #98a2b3",
               "height": "100px",
               "position": "absolute",
               "width": "100%",
@@ -83,7 +83,7 @@ exports[`Timeline should render with data 1`] = `
                 style={
                   Object {
                     "text": Object {
-                      "fill": "rgb(152, 162, 179)",
+                      "fill": "#98a2b3",
                     },
                   }
                 }
@@ -98,7 +98,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -109,7 +109,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -123,9 +123,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -140,7 +140,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -151,7 +151,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -165,9 +165,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -182,7 +182,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -193,7 +193,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -207,9 +207,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -224,7 +224,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -235,7 +235,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -249,9 +249,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -266,7 +266,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -277,7 +277,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -291,9 +291,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -308,7 +308,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -319,7 +319,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -333,9 +333,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -350,7 +350,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -361,7 +361,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -375,9 +375,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -392,7 +392,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -403,7 +403,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -417,9 +417,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -434,7 +434,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -445,7 +445,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -459,9 +459,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -476,7 +476,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                         },
                       }
                     }
@@ -487,7 +487,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -501,9 +501,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "rgb(152, 162, 179)",
+                          "fill": "#98a2b3",
                           "text": Object {
-                            "fill": "rgb(152, 162, 179)",
+                            "fill": "#98a2b3",
                           },
                         }
                       }
@@ -551,7 +551,7 @@ exports[`Timeline should render with data 1`] = `
                 >
                   <span
                     className="c1"
-                    color="rgb(152, 162, 179)"
+                    color="#98a2b3"
                     radius={11}
                   />
                 </div>
@@ -581,7 +581,7 @@ exports[`Timeline should render with data 1`] = `
                 >
                   <span
                     className="c1"
-                    color="rgb(152, 162, 179)"
+                    color="#98a2b3"
                     radius={11}
                   />
                 </div>
@@ -611,7 +611,7 @@ exports[`Timeline should render with data 1`] = `
                 >
                   <span
                     className="c1"
-                    color="rgb(152, 162, 179)"
+                    color="#98a2b3"
                     radius={11}
                   />
                 </div>
@@ -658,7 +658,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={0}
@@ -670,7 +670,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={90}
@@ -682,7 +682,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={180}
@@ -694,7 +694,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={270}
@@ -706,7 +706,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={360}
@@ -718,7 +718,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={450}
@@ -730,7 +730,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={540}
@@ -742,7 +742,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={630}
@@ -754,7 +754,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={720}
@@ -766,7 +766,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={810}
@@ -778,7 +778,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(245, 247, 250)",
+                    "stroke": "#f5f7fa",
                   }
                 }
                 x1={900}
@@ -795,7 +795,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(152, 162, 179)",
+                    "stroke": "#98a2b3",
                   }
                 }
                 x1={450}
@@ -807,7 +807,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(152, 162, 179)",
+                    "stroke": "#98a2b3",
                   }
                 }
                 x1={495.00000000000006}
@@ -819,7 +819,7 @@ exports[`Timeline should render with data 1`] = `
                 className="rv-xy-plot__grid-lines__line"
                 style={
                   Object {
-                    "stroke": "rgb(152, 162, 179)",
+                    "stroke": "#98a2b3",
                   }
                 }
                 x1={855}
diff --git a/x-pack/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx
index 2ab04b4d87157..09c65eea7c916 100644
--- a/x-pack/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx
+++ b/x-pack/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx
@@ -50,7 +50,7 @@ const SuggestionItemContainer = styled.div<{
   display: flex;
   flex-direction: row;
   font-size: ${props => props.theme.eui.default.euiFontSizeS};
-  height: ${props => props.theme.eui.default.euiSizeXl};
+  height: ${props => props.theme.eui.default.euiSizeXL};
   white-space: nowrap;
   background-color: ${props =>
     props.isSelected ? props.theme.eui.default.euiColorLightestShade : 'transparent'};
@@ -61,8 +61,8 @@ const SuggestionItemField = styled.div`
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  height: ${props => props.theme.eui.default.euiSizeXl};
-  padding: ${props => props.theme.eui.default.euiSizeXs};
+  height: ${props => props.theme.eui.default.euiSizeXL};
+  padding: ${props => props.theme.eui.default.euiSizeXS};
 `;
 
 const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
@@ -74,7 +74,7 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
   }};
   flex: 0 0 auto;
   justify-content: center;
-  width: ${props => props.theme.eui.default.euiSizeXl};
+  width: ${props => props.theme.eui.default.euiSizeXL};
 `;
 
 const SuggestionItemTextField = SuggestionItemField.extend`
diff --git a/x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap b/x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap
index 1b8f28569fedc..398a503d142b0 100644
--- a/x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap
+++ b/x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap
@@ -1,32 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`index table clear cache button works from context menu 1`] = `"clearing cache..."`;
+exports[`index table clear cache button works from context menu 1`] = `"statusclearing cache..."`;
 
-exports[`index table clear cache button works from context menu 2`] = `"open"`;
+exports[`index table clear cache button works from context menu 2`] = `"statusopen"`;
 
-exports[`index table close index button works from context menu 1`] = `"closing..."`;
+exports[`index table close index button works from context menu 1`] = `"statusclosing..."`;
 
-exports[`index table close index button works from context menu 2`] = `"closed"`;
+exports[`index table close index button works from context menu 2`] = `"statusclosed"`;
 
 exports[`index table edit index button works from context menu 1`] = `"Edit settings"`;
 
-exports[`index table flush button works from context menu 1`] = `"flushing..."`;
+exports[`index table flush button works from context menu 1`] = `"statusflushing..."`;
 
-exports[`index table flush button works from context menu 2`] = `"open"`;
+exports[`index table flush button works from context menu 2`] = `"statusopen"`;
 
-exports[`index table force merge button works from context menu 1`] = `"open"`;
+exports[`index table force merge button works from context menu 1`] = `"statusopen"`;
 
-exports[`index table force merge button works from context menu 2`] = `"forcing merge..."`;
+exports[`index table force merge button works from context menu 2`] = `"statusforcing merge..."`;
 
-exports[`index table force merge button works from context menu 3`] = `"open"`;
+exports[`index table force merge button works from context menu 3`] = `"statusopen"`;
 
-exports[`index table open index button works from context menu 1`] = `"opening..."`;
+exports[`index table open index button works from context menu 1`] = `"statusopening..."`;
 
-exports[`index table open index button works from context menu 2`] = `"open"`;
+exports[`index table open index button works from context menu 2`] = `"statusopen"`;
 
-exports[`index table refresh button works from context menu 1`] = `"refreshing..."`;
+exports[`index table refresh button works from context menu 1`] = `"statusrefreshing..."`;
 
-exports[`index table refresh button works from context menu 2`] = `"open"`;
+exports[`index table refresh button works from context menu 2`] = `"statusopen"`;
 
 exports[`index table should change pages when a pagination link is clicked on 1`] = `
 Array [
diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
index 69c02e1c7f7d7..1e3ce4d0f43a4 100644
--- a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
+++ b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
@@ -50,7 +50,7 @@ const SuggestionItemContainer = styled.div<{
   display: flex;
   flex-direction: row;
   font-size: ${props => props.theme.eui.euiFontSizeS};
-  height: ${props => props.theme.eui.euiSizeXl};
+  height: ${props => props.theme.eui.euiSizeXL};
   white-space: nowrap;
   background-color: ${props =>
     props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
@@ -61,8 +61,8 @@ const SuggestionItemField = styled.div`
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  height: ${props => props.theme.eui.euiSizeXl};
-  padding: ${props => props.theme.eui.euiSizeXs};
+  height: ${props => props.theme.eui.euiSizeXL};
+  padding: ${props => props.theme.eui.euiSizeXS};
 `;
 
 const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
@@ -71,7 +71,7 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
   color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
   flex: 0 0 auto;
   justify-content: center;
-  width: ${props => props.theme.eui.euiSizeXl};
+  width: ${props => props.theme.eui.euiSizeXL};
 `;
 
 const SuggestionItemTextField = SuggestionItemField.extend`
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
index 9e0479eb6476e..d70e32ca1618d 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -44,7 +44,7 @@ export const TimeRuler: React.SFC<TimeRulerProps> = ({ end, height, start, tickC
 TimeRuler.displayName = 'TimeRuler';
 
 const TimeRulerTickLabel = styled.text`
-  font-size: ${props => props.theme.eui.euiFontSizeXs};
+  font-size: ${props => props.theme.eui.euiFontSizeXS};
   line-height: ${props => props.theme.eui.euiLineHeight};
   fill: ${props => props.theme.eui.textColors.subdued};
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx
index 4b6dcdb635ad9..b098e6b9234b3 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx
@@ -15,7 +15,7 @@ export const LogTextStreamItemField = styled.div.attrs<{
     switchProp('scale', {
       large: props.theme.eui.euiFontSizeM,
       medium: props.theme.eui.euiFontSizeS,
-      small: props.theme.eui.euiFontSizeXs,
+      small: props.theme.eui.euiFontSizeXS,
       [switchProp.default]: props.theme.eui.euiFontSize,
     })};
   line-height: ${props => props.theme.eui.euiLineHeight};
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
index a39af89d89f34..a0bdd671bda38 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
@@ -137,7 +137,7 @@ class ProgressEntry extends React.PureComponent<ProgressEntryProps, {}> {
 const ProgressEntryWrapper = styled.div`
   align-items: center;
   display: flex;
-  min-height: ${props => props.theme.eui.euiSizeXxl};
+  min-height: ${props => props.theme.eui.euiSizeXXL};
   position: relative;
 `;
 
diff --git a/x-pack/plugins/infra/public/components/range_date_picker/index.tsx b/x-pack/plugins/infra/public/components/range_date_picker/index.tsx
index a889601a4c166..be25a8cc762ce 100644
--- a/x-pack/plugins/infra/public/components/range_date_picker/index.tsx
+++ b/x-pack/plugins/infra/public/components/range_date_picker/index.tsx
@@ -275,7 +275,6 @@ export const RangeDatePicker = injectI18n(
           <EuiDatePickerRange
             className="euiDatePickerRange--inGroup"
             iconType={false}
-            disabled={disabled}
             fullWidth
             startDateControl={
               <EuiDatePicker
diff --git a/x-pack/plugins/infra/types/eui.d.ts b/x-pack/plugins/infra/types/eui.d.ts
index 78a9f81e5e6fd..af944fb1c66f8 100644
--- a/x-pack/plugins/infra/types/eui.d.ts
+++ b/x-pack/plugins/infra/types/eui.d.ts
@@ -46,60 +46,6 @@ declare module '@elastic/eui' {
   type EuiHeaderBreadcrumbsProps = EuiBreadcrumbsProps;
   export const EuiHeaderBreadcrumbs: React.SFC<EuiHeaderBreadcrumbsProps>;
 
-  type EuiDatePickerProps = CommonProps &
-    Pick<
-      ReactDatePickerProps,
-      Exclude<
-        keyof ReactDatePickerProps,
-        | 'monthsShown'
-        | 'showWeekNumbers'
-        | 'fixedHeight'
-        | 'dropdownMode'
-        | 'useShortMonthInDropdown'
-        | 'todayButton'
-        | 'timeCaption'
-        | 'disabledKeyboardNavigation'
-        | 'isClearable'
-        | 'withPortal'
-        | 'ref'
-        | 'placeholderText'
-        | 'selected'
-      >
-    > & {
-      fullWidth?: boolean;
-      inputRef?: Ref<Element | ReactType>;
-      injectTimes?: moment.Moment[];
-      isInvalid?: boolean;
-      isLoading?: boolean;
-      selected?: moment.Moment | null | undefined;
-      placeholder?: string;
-      shadow?: boolean;
-      calendarContainer?: React.ReactNode;
-      onChange?: (date: moment.Moment | null) => void;
-      startDate?: moment.Moment | undefined;
-      endDate?: moment.Moment | undefined;
-    };
-  export const EuiDatePicker: React.SFC<EuiDatePickerProps>;
-
-  type EuiFilterGroupProps = CommonProps;
-  export const EuiFilterGroup: React.SFC<EuiFilterGroupProps>;
-
-  type EuiFilterButtonProps = CommonProps & {
-    color?: ButtonColor;
-    href?: string;
-    iconSide?: ButtonIconSide;
-    iconType?: IconType;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    onClick: MouseEventHandler<HTMLElement>;
-    rel?: string;
-    target?: string;
-    type?: string;
-    hasActiveFilters?: boolean;
-    numFilters?: number;
-  };
-  export const EuiFilterButton: React.SFC<EuiFilterButtonProps>;
-
   interface EuiOutsideClickDetectorProps {
     children: React.ReactNode;
     isDisabled?: boolean;
@@ -159,18 +105,6 @@ declare module '@elastic/eui' {
 
   export const EuiShowFor: React.SFC<EuiResponsiveProps>;
 
-  type EuiDatePickerRangeProps = CommonProps & {
-    startDateControl: React.ReactNode;
-    endDateControl: React.ReactNode;
-    iconType?: IconType | boolean;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    isLoading?: boolean;
-    dateFormat?: string;
-  };
-
-  export const EuiDatePickerRange: React.SFC<EuiDatePickerRangeProps>;
-
   type EuiInMemoryTableProps = CommonProps & {
     items?: any;
     columns?: any;
@@ -185,19 +119,4 @@ declare module '@elastic/eui' {
     message?: any;
   };
   export const EuiInMemoryTable: React.SFC<EuiInMemoryTableProps>;
-
-  type EuiButtonGroupProps = CommonProps & {
-    buttonSize?: any;
-    color?: any;
-    idToSelectedMap?: any;
-    options?: any;
-    type?: any;
-    onChange?: any;
-    isIconOnly?: any;
-    isDisabled?: any;
-    isFullWidth?: any;
-    legend?: any;
-    idSelected?: any;
-  };
-  export const EuiButtonGroup: React.SFC<EuiButtonGroupProps>;
 }
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.js.snap
index 79085acb0b2f5..554f25ab47b1d 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.js.snap
@@ -167,9 +167,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                     </FormattedMessage>
                   </h1>
                 </EuiTitle>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -180,7 +178,19 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                       <div
                         class="euiOverlayMask"
                       >
-                        <div>
+                        <div
+                          data-focus-guard="true"
+                          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                          tabindex="0"
+                        />
+                        <div
+                          data-focus-guard="true"
+                          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                          tabindex="1"
+                        />
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
                           <div
                             class="euiModal euiModal--maxWidth-default euiModal--confirmation"
                             tabindex="0"
@@ -279,6 +289,11 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                             </div>
                           </div>
                         </div>
+                        <div
+                          data-focus-guard="true"
+                          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                          tabindex="0"
+                        />
                       </div>
                     }
                   >
@@ -313,61 +328,78 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                         maxWidth={true}
                         onClose={[Function]}
                       >
-                        <Component
-                          focusTrapOptions={
-                            Object {
-                              "fallbackFocus": [Function],
-                              "initialFocus": undefined,
-                            }
-                          }
+                        <EuiFocusTrap
+                          clickOutsideDisables={false}
+                          disabled={false}
+                          returnFocus={true}
                         >
-                          <div>
+                          <FocusLock
+                            as="div"
+                            autoFocus={true}
+                            disabled={false}
+                            lockProps={Object {}}
+                            noFocusGuards={false}
+                            persistentFocus={false}
+                            returnFocus={true}
+                          >
                             <div
-                              className="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                              onKeyDown={[Function]}
+                              data-focus-guard={true}
+                              key="guard-first"
+                              style={
+                                Object {
+                                  "height": "0px",
+                                  "left": "1px",
+                                  "overflow": "hidden",
+                                  "padding": 0,
+                                  "position": "fixed",
+                                  "top": "1px",
+                                  "width": "1px",
+                                }
+                              }
                               tabIndex={0}
+                            />
+                            <div
+                              data-focus-guard={true}
+                              key="guard-nearest"
+                              style={
+                                Object {
+                                  "height": "0px",
+                                  "left": "1px",
+                                  "overflow": "hidden",
+                                  "padding": 0,
+                                  "position": "fixed",
+                                  "top": "1px",
+                                  "width": "1px",
+                                }
+                              }
+                              tabIndex={1}
+                            />
+                            <div
+                              data-focus-lock-disabled={false}
+                              onBlur={[Function]}
+                              onFocus={[Function]}
                             >
-                              <EuiI18n
-                                default="Closes this modal window"
-                                token="euiModal.closeModal"
-                              >
-                                <EuiButtonIcon
-                                  aria-label="Closes this modal window"
-                                  className="euiModal__closeIcon"
-                                  color="text"
-                                  iconSize="m"
-                                  iconType="cross"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <button
-                                    aria-label="Closes this modal window"
-                                    className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                    onClick={[Function]}
-                                    type="button"
+                              <SideEffect(FocusWatcher)
+                                autoFocus={true}
+                                disabled={false}
+                                observed={
+                                  <div
+                                    data-focus-lock-disabled="false"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiButtonIcon__icon"
-                                      size="m"
-                                      type="cross"
+                                    <div
+                                      class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                      tabindex="0"
                                     >
-                                      <cross
-                                        aria-hidden="true"
-                                        className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
+                                      <button
+                                        aria-label="Closes this modal window"
+                                        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                        type="button"
                                       >
                                         <svg
                                           aria-hidden="true"
-                                          className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                                          class="euiIcon euiIcon--medium euiButtonIcon__icon"
                                           focusable="false"
                                           height="16"
-                                          style={null}
                                           viewBox="0 0 16 16"
                                           width="16"
                                           xmlns="http://www.w3.org/2000/svg"
@@ -376,154 +408,416 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                             d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
                                           />
                                         </svg>
-                                      </cross>
-                                    </EuiIcon>
-                                  </button>
-                                </EuiButtonIcon>
-                              </EuiI18n>
-                              <div
-                                className="euiModal__flex"
-                              >
-                                <EuiModalHeader>
-                                  <div
-                                    className="euiModalHeader"
-                                  >
-                                    <EuiModalHeaderTitle
-                                      data-test-subj="confirmModalTitleText"
-                                    >
+                                      </button>
                                       <div
-                                        className="euiModalHeader__title"
-                                        data-test-subj="confirmModalTitleText"
+                                        class="euiModal__flex"
                                       >
-                                        <FormattedMessage
-                                          defaultMessage="Confirm License Upload"
-                                          id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
-                                          values={Object {}}
+                                        <div
+                                          class="euiModalHeader"
+                                        >
+                                          <div
+                                            class="euiModalHeader__title"
+                                            data-test-subj="confirmModalTitleText"
+                                          >
+                                            Confirm License Upload
+                                          </div>
+                                        </div>
+                                        <div
+                                          class="euiModalBody"
+                                        >
+                                          <div
+                                            class="euiText euiText--medium"
+                                            data-test-subj="confirmModalBodyText"
+                                          >
+                                            <div>
+                                              <div
+                                                class="euiText euiText--medium"
+                                              >
+                                                Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                              </div>
+                                              <div
+                                                class="euiText euiText--medium"
+                                              >
+                                                <ul>
+                                                  <li>
+                                                    Watcher will be disabled
+                                                  </li>
+                                                </ul>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                        <div
+                                          class="euiModalFooter"
                                         >
-                                          Confirm License Upload
-                                        </FormattedMessage>
+                                          <button
+                                            class="euiButtonEmpty euiButtonEmpty--primary"
+                                            data-test-subj="confirmModalCancelButton"
+                                            type="button"
+                                          >
+                                            <span
+                                              class="euiButtonEmpty__content"
+                                            >
+                                              <span
+                                                class="euiButtonEmpty__text"
+                                              >
+                                                Cancel
+                                              </span>
+                                            </span>
+                                          </button>
+                                          <button
+                                            class="euiButton euiButton--primary euiButton--fill"
+                                            data-test-subj="confirmModalConfirmButton"
+                                            type="button"
+                                          >
+                                            <span
+                                              class="euiButton__content"
+                                            >
+                                              <span
+                                                class="euiButton__text"
+                                              >
+                                                Confirm
+                                              </span>
+                                            </span>
+                                          </button>
+                                        </div>
                                       </div>
-                                    </EuiModalHeaderTitle>
+                                    </div>
                                   </div>
-                                </EuiModalHeader>
-                                <EuiModalBody>
-                                  <div
-                                    className="euiModalBody"
-                                  >
-                                    <EuiText
-                                      data-test-subj="confirmModalBodyText"
-                                      grow={true}
-                                      size="m"
+                                }
+                                onActivation={[Function]}
+                                onDeactivation={[Function]}
+                                persistentFocus={false}
+                              >
+                                <FocusWatcher
+                                  autoFocus={true}
+                                  disabled={false}
+                                  observed={
+                                    <div
+                                      data-focus-lock-disabled="false"
                                     >
                                       <div
-                                        className="euiText euiText--medium"
-                                        data-test-subj="confirmModalBodyText"
+                                        class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                        tabindex="0"
                                       >
-                                        <div>
-                                          <EuiText
-                                            grow={true}
-                                            size="m"
+                                        <button
+                                          aria-label="Closes this modal window"
+                                          class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                                            focusable="false"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                                            />
+                                          </svg>
+                                        </button>
+                                        <div
+                                          class="euiModal__flex"
+                                        >
+                                          <div
+                                            class="euiModalHeader"
                                           >
                                             <div
-                                              className="euiText euiText--medium"
+                                              class="euiModalHeader__title"
+                                              data-test-subj="confirmModalTitleText"
                                             >
-                                              Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                              Confirm License Upload
                                             </div>
-                                          </EuiText>
-                                          <EuiText
-                                            grow={true}
-                                            size="m"
+                                          </div>
+                                          <div
+                                            class="euiModalBody"
                                           >
                                             <div
-                                              className="euiText euiText--medium"
+                                              class="euiText euiText--medium"
+                                              data-test-subj="confirmModalBodyText"
                                             >
-                                              <ul>
-                                                <li
-                                                  key="Watcher will be disabled"
+                                              <div>
+                                                <div
+                                                  class="euiText euiText--medium"
+                                                >
+                                                  Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                                </div>
+                                                <div
+                                                  class="euiText euiText--medium"
                                                 >
-                                                  Watcher will be disabled
-                                                </li>
-                                              </ul>
+                                                  <ul>
+                                                    <li>
+                                                      Watcher will be disabled
+                                                    </li>
+                                                  </ul>
+                                                </div>
+                                              </div>
                                             </div>
-                                          </EuiText>
+                                          </div>
+                                          <div
+                                            class="euiModalFooter"
+                                          >
+                                            <button
+                                              class="euiButtonEmpty euiButtonEmpty--primary"
+                                              data-test-subj="confirmModalCancelButton"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="euiButtonEmpty__content"
+                                              >
+                                                <span
+                                                  class="euiButtonEmpty__text"
+                                                >
+                                                  Cancel
+                                                </span>
+                                              </span>
+                                            </button>
+                                            <button
+                                              class="euiButton euiButton--primary euiButton--fill"
+                                              data-test-subj="confirmModalConfirmButton"
+                                              type="button"
+                                            >
+                                              <span
+                                                class="euiButton__content"
+                                              >
+                                                <span
+                                                  class="euiButton__text"
+                                                >
+                                                  Confirm
+                                                </span>
+                                              </span>
+                                            </button>
+                                          </div>
                                         </div>
                                       </div>
-                                    </EuiText>
-                                  </div>
-                                </EuiModalBody>
-                                <EuiModalFooter>
-                                  <div
-                                    className="euiModalFooter"
+                                    </div>
+                                  }
+                                  onActivation={[Function]}
+                                  onDeactivation={[Function]}
+                                  persistentFocus={false}
+                                />
+                              </SideEffect(FocusWatcher)>
+                              <div
+                                className="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                onKeyDown={[Function]}
+                                tabIndex={0}
+                              >
+                                <EuiI18n
+                                  default="Closes this modal window"
+                                  token="euiModal.closeModal"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Closes this modal window"
+                                    className="euiModal__closeIcon"
+                                    color="text"
+                                    iconSize="m"
+                                    iconType="cross"
+                                    onClick={[Function]}
+                                    type="button"
                                   >
-                                    <EuiButtonEmpty
-                                      buttonRef={[Function]}
-                                      color="primary"
-                                      data-test-subj="confirmModalCancelButton"
-                                      iconSide="left"
+                                    <button
+                                      aria-label="Closes this modal window"
+                                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
                                       onClick={[Function]}
                                       type="button"
                                     >
-                                      <button
-                                        className="euiButtonEmpty euiButtonEmpty--primary"
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        size="m"
+                                        type="cross"
+                                      >
+                                        <cross
+                                          aria-hidden="true"
+                                          className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                                          focusable="false"
+                                          height="16"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                                            focusable="false"
+                                            height="16"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                                            />
+                                          </svg>
+                                        </cross>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                                <div
+                                  className="euiModal__flex"
+                                >
+                                  <EuiModalHeader>
+                                    <div
+                                      className="euiModalHeader"
+                                    >
+                                      <EuiModalHeaderTitle
+                                        data-test-subj="confirmModalTitleText"
+                                      >
+                                        <div
+                                          className="euiModalHeader__title"
+                                          data-test-subj="confirmModalTitleText"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Confirm License Upload"
+                                            id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
+                                            values={Object {}}
+                                          >
+                                            Confirm License Upload
+                                          </FormattedMessage>
+                                        </div>
+                                      </EuiModalHeaderTitle>
+                                    </div>
+                                  </EuiModalHeader>
+                                  <EuiModalBody>
+                                    <div
+                                      className="euiModalBody"
+                                    >
+                                      <EuiText
+                                        data-test-subj="confirmModalBodyText"
+                                        grow={true}
+                                        size="m"
+                                      >
+                                        <div
+                                          className="euiText euiText--medium"
+                                          data-test-subj="confirmModalBodyText"
+                                        >
+                                          <div>
+                                            <EuiText
+                                              grow={true}
+                                              size="m"
+                                            >
+                                              <div
+                                                className="euiText euiText--medium"
+                                              >
+                                                Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                              </div>
+                                            </EuiText>
+                                            <EuiText
+                                              grow={true}
+                                              size="m"
+                                            >
+                                              <div
+                                                className="euiText euiText--medium"
+                                              >
+                                                <ul>
+                                                  <li
+                                                    key="Watcher will be disabled"
+                                                  >
+                                                    Watcher will be disabled
+                                                  </li>
+                                                </ul>
+                                              </div>
+                                            </EuiText>
+                                          </div>
+                                        </div>
+                                      </EuiText>
+                                    </div>
+                                  </EuiModalBody>
+                                  <EuiModalFooter>
+                                    <div
+                                      className="euiModalFooter"
+                                    >
+                                      <EuiButtonEmpty
+                                        buttonRef={[Function]}
+                                        color="primary"
                                         data-test-subj="confirmModalCancelButton"
+                                        iconSide="left"
                                         onClick={[Function]}
                                         type="button"
                                       >
-                                        <span
-                                          className="euiButtonEmpty__content"
+                                        <button
+                                          className="euiButtonEmpty euiButtonEmpty--primary"
+                                          data-test-subj="confirmModalCancelButton"
+                                          onClick={[Function]}
+                                          type="button"
                                         >
                                           <span
-                                            className="euiButtonEmpty__text"
+                                            className="euiButtonEmpty__content"
                                           >
-                                            <FormattedMessage
-                                              defaultMessage="Cancel"
-                                              id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
-                                              values={Object {}}
+                                            <span
+                                              className="euiButtonEmpty__text"
                                             >
-                                              Cancel
-                                            </FormattedMessage>
+                                              <FormattedMessage
+                                                defaultMessage="Cancel"
+                                                id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
+                                                values={Object {}}
+                                              >
+                                                Cancel
+                                              </FormattedMessage>
+                                            </span>
                                           </span>
-                                        </span>
-                                      </button>
-                                    </EuiButtonEmpty>
-                                    <EuiButton
-                                      buttonRef={[Function]}
-                                      color="primary"
-                                      data-test-subj="confirmModalConfirmButton"
-                                      fill={true}
-                                      iconSide="left"
-                                      onClick={[Function]}
-                                      type="button"
-                                    >
-                                      <button
-                                        className="euiButton euiButton--primary euiButton--fill"
+                                        </button>
+                                      </EuiButtonEmpty>
+                                      <EuiButton
+                                        buttonRef={[Function]}
+                                        color="primary"
                                         data-test-subj="confirmModalConfirmButton"
+                                        fill={true}
+                                        iconSide="left"
                                         onClick={[Function]}
                                         type="button"
                                       >
-                                        <span
-                                          className="euiButton__content"
+                                        <button
+                                          className="euiButton euiButton--primary euiButton--fill"
+                                          data-test-subj="confirmModalConfirmButton"
+                                          onClick={[Function]}
+                                          type="button"
                                         >
                                           <span
-                                            className="euiButton__text"
+                                            className="euiButton__content"
                                           >
-                                            <FormattedMessage
-                                              defaultMessage="Confirm"
-                                              id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
-                                              values={Object {}}
+                                            <span
+                                              className="euiButton__text"
                                             >
-                                              Confirm
-                                            </FormattedMessage>
+                                              <FormattedMessage
+                                                defaultMessage="Confirm"
+                                                id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
+                                                values={Object {}}
+                                              >
+                                                Confirm
+                                              </FormattedMessage>
+                                            </span>
                                           </span>
-                                        </span>
-                                      </button>
-                                    </EuiButton>
-                                  </div>
-                                </EuiModalFooter>
+                                        </button>
+                                      </EuiButton>
+                                    </div>
+                                  </EuiModalFooter>
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        </Component>
+                            <div
+                              data-focus-guard={true}
+                              style={
+                                Object {
+                                  "height": "0px",
+                                  "left": "1px",
+                                  "overflow": "hidden",
+                                  "padding": 0,
+                                  "position": "fixed",
+                                  "top": "1px",
+                                  "width": "1px",
+                                }
+                              }
+                              tabIndex={0}
+                            />
+                          </FocusLock>
+                        </EuiFocusTrap>
                       </EuiModal>
                     </EuiConfirmModal>
                   </Portal>
@@ -563,9 +857,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                     </p>
                   </div>
                 </EuiText>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -955,9 +1247,7 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                     </FormattedMessage>
                   </h1>
                 </EuiTitle>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -997,9 +1287,7 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                     </p>
                   </div>
                 </EuiText>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -1461,9 +1749,7 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                     </FormattedMessage>
                   </h1>
                 </EuiTitle>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -1503,9 +1789,7 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                     </p>
                   </div>
                 </EuiText>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -1967,9 +2251,7 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
                     </FormattedMessage>
                   </h1>
                 </EuiTitle>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -2009,9 +2291,7 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
                     </p>
                   </div>
                 </EuiText>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -2473,9 +2753,7 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                     </FormattedMessage>
                   </h1>
                 </EuiTitle>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -2515,9 +2793,7 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                     </p>
                   </div>
                 </EuiText>
-                <EuiSpacer
-                  size="l"
-                >
+                <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
diff --git a/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap b/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap
index dab283236b4a3..71c714c8a3da0 100644
--- a/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap
+++ b/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap
@@ -10,6 +10,7 @@ exports[`FlexItemSetting component renders a null label if label/tooltip text no
     fullWidth={false}
     hasEmptyLabelSpace={true}
     label={null}
+    labelType="label"
   >
     <p>
       The child elements
@@ -33,6 +34,7 @@ exports[`FlexItemSetting component renders component and children as expected 1`
         formRowTooltipText="tooltip text"
       />
     }
+    labelType="label"
   >
     <p>
       The child elements
diff --git a/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap b/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap
index 3606095eebab1..71f28af38bce9 100644
--- a/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap
+++ b/x-pack/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap
@@ -45,6 +45,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -69,6 +70,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -91,6 +93,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <div
           data-test-subj="acePipeline"
@@ -123,6 +126,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
 Default value: Number of the host’s CPU cores"
           />
         }
+        labelType="label"
       >
         <EuiFieldNumber
           compressed={false}
@@ -387,6 +391,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -411,6 +416,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -433,6 +439,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <div
           data-test-subj="acePipeline"
@@ -465,6 +472,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
 Default value: Number of the host’s CPU cores"
           />
         }
+        labelType="label"
       >
         <EuiFieldNumber
           compressed={false}
@@ -729,6 +737,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -753,6 +762,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -775,6 +785,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <div
           data-test-subj="acePipeline"
@@ -807,6 +818,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
 Default value: Number of the host’s CPU cores"
           />
         }
+        labelType="label"
       >
         <EuiFieldNumber
           compressed={false}
@@ -1067,6 +1079,7 @@ exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -1089,6 +1102,7 @@ exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <div
           data-test-subj="acePipeline"
@@ -1121,6 +1135,7 @@ exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
 Default value: Number of the host’s CPU cores"
           />
         }
+        labelType="label"
       >
         <EuiFieldNumber
           compressed={false}
@@ -1399,6 +1414,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -1423,6 +1439,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -1445,6 +1462,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <div
           data-test-subj="acePipeline"
@@ -1477,6 +1495,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
 Default value: Number of the host’s CPU cores"
           />
         }
+        labelType="label"
       >
         <EuiFieldNumber
           compressed={false}
@@ -1737,6 +1756,7 @@ exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -1759,6 +1779,7 @@ exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <div
           data-test-subj="acePipeline"
@@ -1791,6 +1812,7 @@ exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
 Default value: Number of the host’s CPU cores"
           />
         }
+        labelType="label"
       >
         <EuiFieldNumber
           compressed={false}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
index 1e886067c2080..823bd01185cde 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
@@ -67,7 +67,6 @@ exports[`TOCEntry is rendered 1`] = `
         className="mapTocEntry__grab"
       >
         <EuiIcon
-          size="m"
           type="grab"
         />
       </span>
diff --git a/x-pack/plugins/ml/public/components/documentation_help_link/__snapshots__/documentation_help_link_view.test.js.snap b/x-pack/plugins/ml/public/components/documentation_help_link/__snapshots__/documentation_help_link_view.test.js.snap
index e40545e3815c2..1ae34b3080cd7 100644
--- a/x-pack/plugins/ml/public/components/documentation_help_link/__snapshots__/documentation_help_link_view.test.js.snap
+++ b/x-pack/plugins/ml/public/components/documentation_help_link/__snapshots__/documentation_help_link_view.test.js.snap
@@ -10,7 +10,6 @@ exports[`DocumentationHelpLink renders the link 1`] = `
   Label Text
    
   <EuiIcon
-    size="m"
     type="popout"
   />
 </a>
diff --git a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/condition_expression.test.js.snap b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/condition_expression.test.js.snap
index da128f093fdf4..e630986558a7e 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/condition_expression.test.js.snap
+++ b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/condition_expression.test.js.snap
@@ -18,7 +18,6 @@ exports[`ConditionExpression renders with appliesTo, operator and value supplied
       anchorPosition="downLeft"
       button={
         <EuiExpression
-          color="secondary"
           description={
             <FormattedMessage
               defaultMessage="when"
@@ -28,7 +27,6 @@ exports[`ConditionExpression renders with appliesTo, operator and value supplied
           }
           isActive={false}
           onClick={[Function]}
-          uppercase={true}
           value="diff from typical"
         />
       }
@@ -98,7 +96,6 @@ exports[`ConditionExpression renders with appliesTo, operator and value supplied
       anchorPosition="downLeft"
       button={
         <EuiExpression
-          color="secondary"
           description={
             <FormattedMessage
               defaultMessage="is {operator}"
@@ -112,7 +109,6 @@ exports[`ConditionExpression renders with appliesTo, operator and value supplied
           }
           isActive={false}
           onClick={[Function]}
-          uppercase={true}
           value="123"
         />
       }
@@ -250,7 +246,6 @@ exports[`ConditionExpression renders with only value supplied 1`] = `
       anchorPosition="downLeft"
       button={
         <EuiExpression
-          color="secondary"
           description={
             <FormattedMessage
               defaultMessage="when"
@@ -260,7 +255,6 @@ exports[`ConditionExpression renders with only value supplied 1`] = `
           }
           isActive={false}
           onClick={[Function]}
-          uppercase={true}
           value=""
         />
       }
@@ -329,7 +323,6 @@ exports[`ConditionExpression renders with only value supplied 1`] = `
       anchorPosition="downLeft"
       button={
         <EuiExpression
-          color="secondary"
           description={
             <FormattedMessage
               defaultMessage="is {operator}"
@@ -343,7 +336,6 @@ exports[`ConditionExpression renders with only value supplied 1`] = `
           }
           isActive={false}
           onClick={[Function]}
-          uppercase={true}
           value="123"
         />
       }
diff --git a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
index fe592b0b0f7bc..e44fe01212da2 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
+++ b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
@@ -121,9 +121,7 @@ exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule
           />
         </p>
       </EuiText>
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiTitle
         size="m"
         textTransform="none"
@@ -414,9 +412,7 @@ exports[`RuleEditorFlyout renders the flyout after setting the rule to edit 1`]
           />
         </p>
       </EuiText>
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiTitle
         size="m"
         textTransform="none"
@@ -693,9 +689,7 @@ exports[`RuleEditorFlyout renders the flyout for creating a rule with conditions
           />
         </p>
       </EuiText>
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiTitle
         size="m"
         textTransform="none"
diff --git a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/scope_expression.test.js.snap b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/scope_expression.test.js.snap
index fbf8365bd62ec..be9d8b8f88b1b 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/scope_expression.test.js.snap
+++ b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/scope_expression.test.js.snap
@@ -30,7 +30,6 @@ exports[`ScopeExpression renders when empty list of filter IDs is supplied 1`] =
   >
     <EuiExpression
       className="scope-field-button"
-      color="secondary"
       description={
         <FormattedMessage
           defaultMessage="when"
@@ -40,7 +39,6 @@ exports[`ScopeExpression renders when empty list of filter IDs is supplied 1`] =
       }
       isActive={false}
       onClick={[Function]}
-      uppercase={true}
       value="domain"
     />
   </EuiFlexItem>
@@ -77,7 +75,6 @@ exports[`ScopeExpression renders when enabled set to false 1`] = `
   >
     <EuiExpression
       className="scope-field-button"
-      color="secondary"
       description={
         <FormattedMessage
           defaultMessage="when"
@@ -87,7 +84,6 @@ exports[`ScopeExpression renders when enabled set to false 1`] = `
       }
       isActive={false}
       onClick={[Function]}
-      uppercase={true}
       value="domain"
     />
   </EuiFlexItem>
@@ -99,7 +95,6 @@ exports[`ScopeExpression renders when enabled set to false 1`] = `
       anchorPosition="downLeft"
       button={
         <EuiExpression
-          color="secondary"
           description={
             <FormattedMessage
               defaultMessage="is {filterType}"
@@ -113,7 +108,6 @@ exports[`ScopeExpression renders when enabled set to false 1`] = `
           }
           isActive={false}
           onClick={[Function]}
-          uppercase={true}
           value="safe_domains"
         />
       }
@@ -258,7 +252,6 @@ exports[`ScopeExpression renders when filter ID and type supplied 1`] = `
   >
     <EuiExpression
       className="scope-field-button"
-      color="secondary"
       description={
         <FormattedMessage
           defaultMessage="when"
@@ -268,7 +261,6 @@ exports[`ScopeExpression renders when filter ID and type supplied 1`] = `
       }
       isActive={false}
       onClick={[Function]}
-      uppercase={true}
       value="domain"
     />
   </EuiFlexItem>
@@ -280,7 +272,6 @@ exports[`ScopeExpression renders when filter ID and type supplied 1`] = `
       anchorPosition="downLeft"
       button={
         <EuiExpression
-          color="secondary"
           description={
             <FormattedMessage
               defaultMessage="is {filterType}"
@@ -294,7 +285,6 @@ exports[`ScopeExpression renders when filter ID and type supplied 1`] = `
           }
           isActive={false}
           onClick={[Function]}
-          uppercase={true}
           value="safe_domains"
         />
       }
@@ -439,7 +429,6 @@ exports[`ScopeExpression renders when no filter ID or type supplied 1`] = `
   >
     <EuiExpression
       className="scope-field-button"
-      color="secondary"
       description={
         <FormattedMessage
           defaultMessage="when"
@@ -449,7 +438,6 @@ exports[`ScopeExpression renders when no filter ID or type supplied 1`] = `
       }
       isActive={false}
       onClick={[Function]}
-      uppercase={true}
       value="domain"
     />
   </EuiFlexItem>
@@ -461,7 +449,6 @@ exports[`ScopeExpression renders when no filter ID or type supplied 1`] = `
       anchorPosition="downLeft"
       button={
         <EuiExpression
-          color="secondary"
           description={
             <FormattedMessage
               defaultMessage="is {filterType}"
@@ -475,7 +462,6 @@ exports[`ScopeExpression renders when no filter ID or type supplied 1`] = `
           }
           isActive={false}
           onClick={[Function]}
-          uppercase={true}
           value=""
         />
       }
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/edit_flyout/__snapshots__/overrides.test.js.snap b/x-pack/plugins/ml/public/file_datavisualizer/components/edit_flyout/__snapshots__/overrides.test.js.snap
index 3006668ca8d38..37d0e0a6cba85 100644
--- a/x-pack/plugins/ml/public/file_datavisualizer/components/edit_flyout/__snapshots__/overrides.test.js.snap
+++ b/x-pack/plugins/ml/public/file_datavisualizer/components/edit_flyout/__snapshots__/overrides.test.js.snap
@@ -15,6 +15,7 @@ exports[`Overrides render overrides 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldNumber
       compressed={false}
@@ -35,6 +36,7 @@ exports[`Overrides render overrides 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiComboBox
       compressed={false}
@@ -79,6 +81,7 @@ exports[`Overrides render overrides 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiComboBox
       compressed={false}
@@ -393,6 +396,7 @@ exports[`Overrides render overrides 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiComboBox
       compressed={false}
diff --git a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap
index 91a671f095f55..90cd1cf448698 100644
--- a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap
+++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap
@@ -35,6 +35,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiFieldText
         compressed={true}
@@ -57,6 +58,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiRadioGroup
         className="url-link-to-radio"
@@ -92,6 +94,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiSelect
         compressed={true}
@@ -125,6 +128,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiComboBox
         compressed={false}
@@ -169,6 +173,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiSelect
             compressed={true}
@@ -232,6 +237,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiFieldText
         compressed={true}
@@ -254,6 +260,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiRadioGroup
         className="url-link-to-radio"
@@ -289,6 +296,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiSelect
         compressed={true}
@@ -322,6 +330,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiComboBox
         compressed={false}
@@ -372,6 +381,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiSelect
             compressed={true}
@@ -418,6 +428,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiFieldText
             compressed={true}
@@ -469,6 +480,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiFieldText
         compressed={true}
@@ -491,6 +503,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiRadioGroup
         className="url-link-to-radio"
@@ -526,6 +539,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiSelect
         compressed={true}
@@ -559,6 +573,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiComboBox
         compressed={false}
@@ -609,6 +624,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiSelect
             compressed={true}
@@ -651,6 +667,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiFieldText
             compressed={true}
@@ -706,6 +723,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiFieldText
         compressed={true}
@@ -728,6 +746,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiRadioGroup
         className="url-link-to-radio"
@@ -763,6 +782,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiSelect
         compressed={true}
@@ -796,6 +816,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiComboBox
         compressed={false}
@@ -840,6 +861,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiSelect
             compressed={true}
@@ -907,6 +929,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with duplicate
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiFieldText
         compressed={true}
@@ -929,6 +952,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with duplicate
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiRadioGroup
         className="url-link-to-radio"
@@ -964,6 +988,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with duplicate
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiTextArea
         compressed={true}
@@ -1013,6 +1038,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with unique la
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiFieldText
         compressed={true}
@@ -1035,6 +1061,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with unique la
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiRadioGroup
         className="url-link-to-radio"
@@ -1070,6 +1097,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with unique la
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <EuiTextArea
         compressed={true}
diff --git a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap
index a7cafe60fb63f..3864f4b04baad 100644
--- a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap
+++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap
@@ -29,6 +29,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -55,6 +56,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -82,6 +84,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -102,6 +105,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={true}
+        labelType="label"
       >
         <EuiToolTip
           content={
@@ -134,6 +138,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={true}
+        labelType="label"
       >
         <EuiToolTip
           content={
@@ -186,6 +191,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -212,6 +218,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -239,6 +246,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -259,6 +267,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={true}
+        labelType="label"
       >
         <EuiToolTip
           content={
@@ -291,6 +300,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={true}
+        labelType="label"
       >
         <EuiToolTip
           content={
@@ -343,6 +353,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -369,6 +380,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -396,6 +408,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           compressed={false}
@@ -416,6 +429,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={true}
+        labelType="label"
       >
         <EuiToolTip
           content={
@@ -448,6 +462,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={true}
+        labelType="label"
       >
         <EuiToolTip
           content={
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
index 2e0f8bca89a5a..cce72241dadca 100644
--- a/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
+++ b/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
@@ -42,6 +42,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -64,6 +65,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -86,6 +88,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiComboBox
       compressed={false}
@@ -109,6 +112,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiComboBox
       compressed={false}
@@ -136,6 +140,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <InjectIntl(EventsTable)
       canCreateCalendar={true}
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap b/x-pack/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap
index 57b91386d0963..72f323120c8eb 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap
+++ b/x-pack/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap
@@ -42,6 +42,7 @@ exports[`AddItemPopover calls addItems with multiple items on clicking Add butto
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiTextArea
           fullWidth={false}
@@ -139,6 +140,7 @@ exports[`AddItemPopover opens the popover onButtonClick 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiTextArea
           fullWidth={false}
@@ -236,6 +238,7 @@ exports[`AddItemPopover renders the popover 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiTextArea
           fullWidth={false}
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap b/x-pack/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap
index 659bd8c05c66a..3e1025530cc1a 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap
+++ b/x-pack/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap
@@ -42,6 +42,7 @@ exports[`FilterListUsagePopover opens the popover onButtonClick 1`] = `
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiFieldText
             compressed={false}
@@ -100,6 +101,7 @@ exports[`FilterListUsagePopover renders the popover with a description 1`] = `
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiFieldText
             compressed={false}
@@ -158,6 +160,7 @@ exports[`FilterListUsagePopover renders the popover with no description 1`] = `
               values={Object {}}
             />
           }
+          labelType="label"
         >
           <EuiFieldText
             compressed={false}
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap b/x-pack/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap
index 39e3fcf066362..206694ca411ac 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap
+++ b/x-pack/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap
@@ -81,6 +81,7 @@ exports[`EditFilterListHeader renders the header when creating a new filter list
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
@@ -216,6 +217,7 @@ exports[`EditFilterListHeader renders the header when creating a new filter list
         values={Object {}}
       />
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
index d4b789d4b79da..b38b8f48cf7da 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
@@ -152,10 +152,7 @@ exports[`CcrShard that it renders normally 1`] = `
         </EuiPanel>
       </EuiFlexItem>
     </EuiFlexGroup>
-    <EuiHorizontalRule
-      margin="l"
-      size="full"
-    />
+    <EuiHorizontalRule />
     <EuiAccordion
       buttonContent={
         <EuiTitle
@@ -183,10 +180,7 @@ exports[`CcrShard that it renders normally 1`] = `
           September 27, 2018 9:32:09 AM
         </h4>
       </EuiTitle>
-      <EuiHorizontalRule
-        margin="l"
-        size="full"
-      />
+      <EuiHorizontalRule />
       <EuiCodeBlock
         language="json"
       >
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap
index b4798048eb9d5..05663891dd75d 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap
@@ -9,9 +9,7 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if
   ownFocus={false}
   size="s"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiFlexGroup
       alignItems="baseline"
       component="div"
@@ -27,7 +25,6 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if
       >
         <EuiIcon
           className="lspvDetailDrawerIcon"
-          size="m"
         />
       </EuiFlexItem>
       <EuiFlexItem
@@ -63,9 +60,7 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if
   ...
 }
         </EuiCodeBlock>
-        <EuiSpacer
-          size="l"
-        />
+        <EuiSpacer />
       </div>
       <p>
         <FormattedMessage
@@ -88,9 +83,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
   ownFocus={false}
   size="s"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiFlexGroup
       alignItems="baseline"
       component="div"
@@ -106,7 +99,6 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
       >
         <EuiIcon
           className="lspvDetailDrawerIcon"
-          size="m"
         />
       </EuiFlexItem>
       <EuiFlexItem
@@ -147,9 +139,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
   id =&gt; "mySpecialId"
 }
         </EuiCodeBlock>
-        <EuiSpacer
-          size="l"
-        />
+        <EuiSpacer />
       </div>
       <EuiTable
         responsive={true}
@@ -160,6 +150,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -170,6 +165,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -208,6 +208,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               0.23 ms/e
@@ -218,6 +223,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -228,6 +238,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -266,6 +281,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               N/A
@@ -276,6 +296,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -286,6 +311,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -324,6 +354,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               203 events
@@ -334,6 +369,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -344,6 +384,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -382,6 +427,11 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               200 events
@@ -403,9 +453,7 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
   ownFocus={false}
   size="s"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiFlexGroup
       alignItems="baseline"
       component="div"
@@ -421,7 +469,6 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
       >
         <EuiIcon
           className="lspvDetailDrawerIcon"
-          size="m"
         />
       </EuiFlexItem>
       <EuiFlexItem
@@ -470,6 +517,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -480,6 +532,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -518,6 +575,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               0.23 ms/e
@@ -528,6 +590,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -538,6 +605,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -576,6 +648,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               N/A
@@ -586,6 +663,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -596,6 +678,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -634,6 +721,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               203 events
@@ -644,6 +736,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
           >
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <FormattedMessage
@@ -654,6 +751,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               <div
@@ -692,6 +794,11 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
             </EuiTableRowCell>
             <EuiTableRowCell
               align="left"
+              mobileOptions={
+                Object {
+                  "show": true,
+                }
+              }
               textOnly={true}
             >
               200 events
@@ -713,9 +820,7 @@ exports[`DetailDrawer component Queue vertices shows basic info and no stats for
   ownFocus={false}
   size="s"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiFlexGroup
       alignItems="baseline"
       component="div"
@@ -731,7 +836,6 @@ exports[`DetailDrawer component Queue vertices shows basic info and no stats for
       >
         <EuiIcon
           className="lspvDetailDrawerIcon"
-          size="m"
         />
       </EuiFlexItem>
       <EuiFlexItem
@@ -782,9 +886,7 @@ exports[`DetailDrawer component shows vertex title 1`] = `
   ownFocus={false}
   size="s"
 >
-  <EuiFlyoutHeader
-    hasBorder={false}
-  >
+  <EuiFlyoutHeader>
     <EuiFlexGroup
       alignItems="baseline"
       component="div"
@@ -800,7 +902,6 @@ exports[`DetailDrawer component shows vertex title 1`] = `
       >
         <EuiIcon
           className="lspvDetailDrawerIcon"
-          size="m"
         />
       </EuiFlexItem>
       <EuiFlexItem
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/pipeline_viewer.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/pipeline_viewer.test.js.snap
index 3abcdd9d15ed3..fb22a53cf25b0 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/pipeline_viewer.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/pipeline_viewer.test.js.snap
@@ -28,9 +28,7 @@ exports[`PipelineViewer component passes expected props 1`] = `
         iconType="logstashInput"
         onShowVertexDetails={[Function]}
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <Queue
         queue={
           Object {
@@ -41,9 +39,7 @@ exports[`PipelineViewer component passes expected props 1`] = `
           }
         }
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <StatementSection
         detailVertex={null}
         elements={
@@ -59,9 +55,7 @@ exports[`PipelineViewer component passes expected props 1`] = `
         iconType="logstashFilter"
         onShowVertexDetails={[Function]}
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <StatementSection
         detailVertex={null}
         elements={
@@ -114,9 +108,7 @@ exports[`PipelineViewer component renders DetailDrawer when selected vertex is n
         iconType="logstashInput"
         onShowVertexDetails={[Function]}
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <Queue
         queue={
           Object {
@@ -127,9 +119,7 @@ exports[`PipelineViewer component renders DetailDrawer when selected vertex is n
           }
         }
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <StatementSection
         detailVertex={
           Object {
@@ -149,9 +139,7 @@ exports[`PipelineViewer component renders DetailDrawer when selected vertex is n
         iconType="logstashFilter"
         onShowVertexDetails={[Function]}
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <StatementSection
         detailVertex={
           Object {
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list_heading.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list_heading.test.js.snap
index b7ee4298beac7..08d2644ee5247 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list_heading.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list_heading.test.js.snap
@@ -15,7 +15,6 @@ exports[`StatementListHeading component renders title and icon type 1`] = `
     grow={false}
   >
     <EuiIcon
-      size="m"
       type="logstashInput"
     />
   </EuiFlexItem>
diff --git a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
index 9d22bac8b99fd..7075e3281317e 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
@@ -159,7 +159,6 @@ exports[`ExplainCollectionEnabled should explain about xpack.monitoring.collecti
     </EuiTextColor>
   </Component>
   <EuiHorizontalRule
-    margin="l"
     size="half"
   >
     <hr
@@ -245,9 +244,7 @@ exports[`ExplainCollectionEnabled should explain about xpack.monitoring.collecti
       </p>
     </div>
   </EuiText>
-  <EuiSpacer
-    size="l"
-  >
+  <EuiSpacer>
     <div
       className="euiSpacer euiSpacer--l"
     />
diff --git a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
index b3f407e566b64..8476173e79304 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
@@ -132,7 +132,6 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
     </h2>
   </EuiTitle>
   <EuiHorizontalRule
-    margin="l"
     size="half"
   >
     <hr
@@ -157,9 +156,7 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
       </p>
     </div>
   </EuiText>
-  <EuiSpacer
-    size="l"
-  >
+  <EuiSpacer>
     <div
       className="euiSpacer euiSpacer--l"
     />
@@ -335,7 +332,6 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
     </EuiTextColor>
   </Component>
   <EuiHorizontalRule
-    margin="l"
     size="half"
   >
     <hr
@@ -430,9 +426,7 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
       </p>
     </div>
   </EuiText>
-  <EuiSpacer
-    size="l"
-  >
+  <EuiSpacer>
     <div
       className="euiSpacer euiSpacer--l"
     />
@@ -665,7 +659,6 @@ exports[`ExplainCollectionInterval should explain about xpack.monitoring.collect
     </EuiTextColor>
   </Component>
   <EuiHorizontalRule
-    margin="l"
     size="half"
   >
     <hr
@@ -760,9 +753,7 @@ exports[`ExplainCollectionInterval should explain about xpack.monitoring.collect
       </p>
     </div>
   </EuiText>
-  <EuiSpacer
-    size="l"
-  >
+  <EuiSpacer>
     <div
       className="euiSpacer euiSpacer--l"
     />
diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index b4b6eb2afc962..a618f8a9bfbce 100644
--- a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -42,13 +42,15 @@ Array [
             data-test-subj="remoteClusterFormNameFormRow"
             id="mockId-row"
           >
-            <label
-              aria-invalid="false"
-              class="euiFormLabel"
-              for="mockId"
-            >
-              Name
-            </label>
+            <div>
+              <label
+                aria-invalid="false"
+                class="euiFormLabel"
+                for="mockId"
+              >
+                Name
+              </label>
+            </div>
             <div
               class="euiFormControlLayout euiFormControlLayout--fullWidth"
             >
@@ -113,13 +115,15 @@ Array [
             data-test-subj="remoteClusterFormSeedNodesFormRow"
             id="mockId-row"
           >
-            <label
-              aria-invalid="false"
-              class="euiFormLabel"
-              for="mockId"
-            >
-              Seed nodes
-            </label>
+            <div>
+              <label
+                aria-invalid="false"
+                class="euiFormLabel"
+                for="mockId"
+              >
+                Seed nodes
+              </label>
+            </div>
             <div
               aria-describedby="mockId-help"
               aria-expanded="false"
@@ -338,13 +342,15 @@ Array [
     data-test-subj="remoteClusterFormNameFormRow"
     id="mockId-row"
   >
-    <label
-      aria-invalid="true"
-      class="euiFormLabel euiFormLabel-isInvalid"
-      for="mockId"
-    >
-      Name
-    </label>
+    <div>
+      <label
+        aria-invalid="true"
+        class="euiFormLabel euiFormLabel-isInvalid"
+        for="mockId"
+      >
+        Name
+      </label>
+    </div>
     <div
       class="euiFormControlLayout euiFormControlLayout--fullWidth"
     >
@@ -379,13 +385,15 @@ Array [
     data-test-subj="remoteClusterFormSeedNodesFormRow"
     id="mockId-row"
   >
-    <label
-      aria-invalid="true"
-      class="euiFormLabel euiFormLabel-isInvalid"
-      for="mockId"
-    >
-      Seed nodes
-    </label>
+    <div>
+      <label
+        aria-invalid="true"
+        class="euiFormLabel euiFormLabel-isInvalid"
+        for="mockId"
+      >
+        Seed nodes
+      </label>
+    </div>
     <div
       aria-describedby="mockId-help mockId-error-0"
       aria-expanded="false"
diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/detail_panel/__snapshots__/detail_panel.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/detail_panel/__snapshots__/detail_panel.test.js.snap
index aca7f851783a3..c1eef9c4a473d 100644
--- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/detail_panel/__snapshots__/detail_panel.test.js.snap
+++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/detail_panel/__snapshots__/detail_panel.test.js.snap
@@ -4,303 +4,322 @@ exports[` 1`] = `
 <span>
   <div>
     <div
-      aria-labelledby="remoteClusterDetailsFlyoutTitle"
-      class="euiFlyout euiFlyout--medium"
-      data-test-subj="remoteClusterDetailFlyout"
-      role="dialog"
-      style="max-width:400px"
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
       tabindex="0"
+    />
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="1"
+    />
+    <div
+      data-focus-lock-disabled="false"
     >
-      <button
-        aria-label="Closes this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-        data-test-subj="euiFlyoutCloseButton"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiButtonIcon__icon"
-          focusable="false"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-          />
-        </svg>
-      </button>
       <div
-        class="euiFlyoutHeader"
+        aria-labelledby="remoteClusterDetailsFlyoutTitle"
+        class="euiFlyout euiFlyout--medium"
+        data-test-subj="remoteClusterDetailFlyout"
+        role="dialog"
+        style="max-width:400px"
+        tabindex="0"
       >
-        <h2
-          class="euiTitle euiTitle--medium"
-          id="remoteClusterDetailsFlyoutTitle"
+        <button
+          aria-label="Closes this dialog"
+          class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+          data-test-subj="euiFlyoutCloseButton"
+          type="button"
         >
-          test-cluster
-        </h2>
-      </div>
-      <div
-        class="euiFlyoutBody"
-      >
-        <h3
-          class="euiTitle euiTitle--small"
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+            />
+          </svg>
+        </button>
+        <div
+          class="euiFlyoutHeader"
         >
-          Status
-        </h3>
+          <h2
+            class="euiTitle euiTitle--medium"
+            id="remoteClusterDetailsFlyoutTitle"
+          >
+            test-cluster
+          </h2>
+        </div>
         <div
-          class="euiSpacer euiSpacer--s"
-        />
-        <dl
-          class="euiDescriptionList euiDescriptionList--row"
+          class="euiFlyoutBody"
         >
+          <h3
+            class="euiTitle euiTitle--small"
+          >
+            Status
+          </h3>
           <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiSpacer euiSpacer--s"
+          />
+          <dl
+            class="euiDescriptionList euiDescriptionList--row"
           >
             <div
-              class="euiFlexItem"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <dt
-                class="euiDescriptionList__title"
-              >
-                Connection
-              </dt>
-              <dd
-                class="euiDescriptionList__description"
+              <div
+                class="euiFlexItem"
               >
-                <div
-                  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                <dt
+                  class="euiDescriptionList__title"
+                >
+                  Connection
+                </dt>
+                <dd
+                  class="euiDescriptionList__description"
                 >
                   <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                   >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      class="euiFlexItem euiFlexItem--flexGrowZero"
                     >
                       <div
-                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <svg
+                            class="euiIcon euiIcon--medium euiIcon--danger"
+                            focusable="false"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="euiFlexItem remoteClustersConnectionStatus__message"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            Not connected
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <span
+                        class="euiToolTipAnchor"
                       >
                         <svg
-                          class="euiIcon euiIcon--medium euiIcon--danger"
-                          focusable="false"
+                          aria-describedby="fakeId"
+                          aria-label="Info"
+                          class="euiIcon euiIcon--medium euiIcon--subdued"
+                          focusable="true"
                           height="16"
+                          tabindex="0"
                           viewBox="0 0 16 16"
                           width="16"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                            d="M8 14A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-1A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm-.186-1.065A.785.785 0 0 1 7 11.12c0-.48.34-.82.814-.82.475 0 .809.34.809.82 0 .475-.334.815-.809.815zM5.9 6.317C5.96 5.168 6.755 4.4 8.048 4.4c1.218 0 2.091.759 2.091 1.8 0 .736-.36 1.304-1.03 1.707-.56.33-.717.56-.717 1.022v.305l-.1.1H7.47l-.1-.1v-.431c-.005-.646.302-1.104.987-1.514.527-.322.708-.59.708-1.047 0-.536-.416-.91-1.05-.91-.652 0-1.064.374-1.112.998l-.1.092H6l-.1-.105z"
                           />
                         </svg>
-                      </div>
-                      <div
-                        class="euiFlexItem remoteClustersConnectionStatus__message"
-                      >
-                        <div
-                          class="euiText euiText--medium"
-                        >
-                          Not connected
-                        </div>
-                      </div>
+                      </span>
                     </div>
                   </div>
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <span
-                      class="euiToolTipAnchor"
-                    >
-                      <svg
-                        aria-describedby="fakeId"
-                        aria-label="Info"
-                        class="euiIcon euiIcon--medium euiIcon--subdued"
-                        focusable="true"
-                        height="16"
-                        tabindex="0"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 14A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-1A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm-.186-1.065A.785.785 0 0 1 7 11.12c0-.48.34-.82.814-.82.475 0 .809.34.809.82 0 .475-.334.815-.809.815zM5.9 6.317C5.96 5.168 6.755 4.4 8.048 4.4c1.218 0 2.091.759 2.091 1.8 0 .736-.36 1.304-1.03 1.707-.56.33-.717.56-.717 1.022v.305l-.1.1H7.47l-.1-.1v-.431c-.005-.646.302-1.104.987-1.514.527-.322.708-.59.708-1.047 0-.536-.416-.91-1.05-.91-.652 0-1.064.374-1.112.998l-.1.092H6l-.1-.105z"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </dd>
-            </div>
-            <div
-              class="euiFlexItem"
-            >
-              <dt
-                class="euiDescriptionList__title"
+                </dd>
+              </div>
+              <div
+                class="euiFlexItem"
               >
-                Connected nodes
-              </dt>
-              <dd
-                class="euiDescriptionList__description"
-              />
+                <dt
+                  class="euiDescriptionList__title"
+                >
+                  Connected nodes
+                </dt>
+                <dd
+                  class="euiDescriptionList__description"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="euiSpacer euiSpacer--s"
-          />
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
             <div
-              class="euiFlexItem"
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <dt
-                class="euiDescriptionList__title"
+              <div
+                class="euiFlexItem"
               >
-                Seeds
-              </dt>
-              <dd
-                class="euiDescriptionList__description"
+                <dt
+                  class="euiDescriptionList__title"
+                >
+                  Seeds
+                </dt>
+                <dd
+                  class="euiDescriptionList__description"
+                >
+                  <div
+                    class="euiText euiText--medium"
+                  >
+                    seed
+                  </div>
+                </dd>
+              </div>
+              <div
+                class="euiFlexItem"
               >
-                <div
-                  class="euiText euiText--medium"
+                <dt
+                  class="euiDescriptionList__title"
                 >
-                  seed
-                </div>
-              </dd>
+                  Skip unavailable
+                </dt>
+                <dd
+                  class="euiDescriptionList__description"
+                >
+                  Default
+                </dd>
+              </div>
             </div>
             <div
-              class="euiFlexItem"
-            >
-              <dt
-                class="euiDescriptionList__title"
-              >
-                Skip unavailable
-              </dt>
-              <dd
-                class="euiDescriptionList__description"
-              >
-                Default
-              </dd>
-            </div>
-          </div>
-          <div
-            class="euiSpacer euiSpacer--s"
-          />
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
+              class="euiSpacer euiSpacer--s"
+            />
             <div
-              class="euiFlexItem"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <dt
-                class="euiDescriptionList__title"
+              <div
+                class="euiFlexItem"
               >
-                Maximum number of connections
-              </dt>
-              <dd
-                class="euiDescriptionList__description"
-              />
-            </div>
-            <div
-              class="euiFlexItem"
-            >
-              <dt
-                class="euiDescriptionList__title"
+                <dt
+                  class="euiDescriptionList__title"
+                >
+                  Maximum number of connections
+                </dt>
+                <dd
+                  class="euiDescriptionList__description"
+                />
+              </div>
+              <div
+                class="euiFlexItem"
               >
-                Initial connect timeout
-              </dt>
-              <dd
-                class="euiDescriptionList__description"
-              />
+                <dt
+                  class="euiDescriptionList__title"
+                >
+                  Initial connect timeout
+                </dt>
+                <dd
+                  class="euiDescriptionList__description"
+                />
+              </div>
             </div>
-          </div>
-        </dl>
-      </div>
-      <div
-        class="euiFlyoutFooter"
-      >
+          </dl>
+        </div>
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlyoutFooter"
         >
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
-            <button
-              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
-              type="button"
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <span
-                class="euiButtonEmpty__content"
+              <button
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiButtonEmpty__icon"
-                  focusable="false"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                  />
-                </svg>
                 <span
-                  class="euiButtonEmpty__text"
+                  class="euiButtonEmpty__content"
                 >
-                  Close
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiButtonEmpty__icon"
+                    focusable="false"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                    />
+                  </svg>
+                  <span
+                    class="euiButtonEmpty__text"
+                  >
+                    Close
+                  </span>
                 </span>
-              </span>
-            </button>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-          >
+              </button>
+            </div>
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+              class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
-                <button
-                  class="euiButtonEmpty euiButtonEmpty--danger"
-                  data-test-subj="remoteClusterDetailPanelRemoveButton"
-                  type="button"
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <span
-                    class="euiButtonEmpty__content"
+                  <button
+                    class="euiButtonEmpty euiButtonEmpty--danger"
+                    data-test-subj="remoteClusterDetailPanelRemoveButton"
+                    type="button"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="euiButtonEmpty__content"
                     >
-                      Remove
+                      <span
+                        class="euiButtonEmpty__text"
+                      >
+                        Remove
+                      </span>
                     </span>
-                  </span>
-                </button>
-              </div>
-              <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <a
-                  class="euiButton euiButton--primary euiButton--fill"
-                  href="/management/elasticsearch/remote_clusters/edit/test-cluster"
+                  </button>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <span
-                    class="euiButton__content"
+                  <a
+                    class="euiButton euiButton--primary euiButton--fill"
+                    href="/management/elasticsearch/remote_clusters/edit/test-cluster"
                   >
                     <span
-                      class="euiButton__text"
+                      class="euiButton__content"
                     >
-                      Edit
+                      <span
+                        class="euiButton__text"
+                      >
+                        Edit
+                      </span>
                     </span>
-                  </span>
-                </a>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div
+      data-focus-guard="true"
+      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+      tabindex="0"
+    />
   </div>
 </span>
 `;
diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap
index bf21cd3e7de35..04dddcea2b40c 100644
--- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap
+++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap
@@ -28,8 +28,12 @@ exports[`RemoteClusterTable renders a row for an API-defined remote cluster 1`]
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Name"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Name
+    </div>
     <div
       class="euiTableCellContent euiTableCellContent--overflowingContent"
     >
@@ -44,8 +48,12 @@ exports[`RemoteClusterTable renders a row for an API-defined remote cluster 1`]
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Seeds"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Seeds
+    </div>
     <div
       class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
     >
@@ -54,9 +62,13 @@ exports[`RemoteClusterTable renders a row for an API-defined remote cluster 1`]
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Connection"
     width="160px"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Connection
+    </div>
     <div
       class="euiTableCellContent euiTableCellContent--overflowingContent"
     >
@@ -124,9 +136,13 @@ exports[`RemoteClusterTable renders a row for an API-defined remote cluster 1`]
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Connected nodes"
     width="160px"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Connected nodes
+    </div>
     <div
       class="euiTableCellContent"
     >
@@ -246,8 +262,12 @@ exports[`RemoteClusterTable renders a row with a tooltip for a remote cluster de
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Name"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Name
+    </div>
     <div
       class="euiTableCellContent euiTableCellContent--overflowingContent"
     >
@@ -294,8 +314,12 @@ exports[`RemoteClusterTable renders a row with a tooltip for a remote cluster de
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Seeds"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Seeds
+    </div>
     <div
       class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
     >
@@ -304,9 +328,13 @@ exports[`RemoteClusterTable renders a row with a tooltip for a remote cluster de
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Connection"
     width="160px"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Connection
+    </div>
     <div
       class="euiTableCellContent euiTableCellContent--overflowingContent"
     >
@@ -374,9 +402,13 @@ exports[`RemoteClusterTable renders a row with a tooltip for a remote cluster de
   </td>
   <td
     class="euiTableRowCell"
-    data-header="Connected nodes"
     width="160px"
   >
+    <div
+      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+    >
+      Connected nodes
+    </div>
     <div
       class="euiTableCellContent"
     >
diff --git a/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap b/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap
index 0c08e3e69f24a..39ea6409cf7ae 100644
--- a/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap
@@ -72,111 +72,306 @@ Array [
           }
         />
       </EuiOverlayMask>
-      <Component
-        focusTrapOptions={
-          Object {
-            "clickOutsideDeactivates": true,
-            "fallbackFocus": [Function],
-          }
-        }
+      <EuiFocusTrap
+        clickOutsideDisables={true}
+        disabled={false}
+        returnFocus={true}
       >
-        <div>
-          <div
-            aria-labelledby="flyoutTitle"
-            className="euiFlyout euiFlyout--small"
-            data-test-subj="reportInfoFlyout"
-            role="dialog"
-            tabIndex={0}
+        <EuiOutsideClickDetector
+          isDisabled={false}
+          onOutsideClick={[Function]}
+        >
+          <OutsideEventDetector
+            handleEvent={[Function]}
+            onClick={[Function]}
           >
-            <EuiButtonIcon
-              aria-label="Closes this dialog"
-              className="euiFlyout__closeButton"
-              color="text"
-              data-test-subj="euiFlyoutCloseButton"
-              iconSize="m"
-              iconType="cross"
+            <div
               onClick={[Function]}
-              type="button"
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
             >
-              <button
-                aria-label="Closes this dialog"
-                className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                data-test-subj="euiFlyoutCloseButton"
-                onClick={[Function]}
-                type="button"
+              <FocusLock
+                as="div"
+                autoFocus={true}
+                disabled={false}
+                lockProps={Object {}}
+                noFocusGuards={false}
+                persistentFocus={false}
+                returnFocus={true}
               >
-                <EuiIcon
-                  aria-hidden="true"
-                  className="euiButtonIcon__icon"
-                  size="m"
-                  type="cross"
+                <div
+                  data-focus-guard={true}
+                  key="guard-first"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+                <div
+                  data-focus-guard={true}
+                  key="guard-nearest"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={1}
+                />
+                <div
+                  data-focus-lock-disabled={false}
+                  onBlur={[Function]}
+                  onFocus={[Function]}
                 >
-                  <cross
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                    focusable="false"
-                    height="16"
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <SideEffect(FocusWatcher)
+                    autoFocus={true}
+                    disabled={false}
+                    observed={
+                      <div
+                        data-focus-lock-disabled="false"
+                      >
+                        <div
+                          aria-labelledby="flyoutTitle"
+                          class="euiFlyout euiFlyout--small"
+                          data-test-subj="reportInfoFlyout"
+                          role="dialog"
+                          tabindex="0"
+                        >
+                          <button
+                            aria-label="Closes this dialog"
+                            class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                            data-test-subj="euiFlyoutCloseButton"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                              focusable="false"
+                              height="16"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                              />
+                            </svg>
+                          </button>
+                          <div
+                            class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--small"
+                              id="flyoutTitle"
+                            >
+                              Unable to fetch report info
+                            </h2>
+                          </div>
+                          <div
+                            class="euiFlyoutBody"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Could not fetch the job info
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    }
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
                   >
-                    <svg
-                      aria-hidden="true"
-                      className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                      focusable="false"
-                      height="16"
-                      style={null}
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                      />
-                    </svg>
-                  </cross>
-                </EuiIcon>
-              </button>
-            </EuiButtonIcon>
-            <EuiFlyoutHeader
-              hasBorder={true}
-            >
-              <div
-                className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-              >
-                <EuiTitle
-                  size="s"
-                  textTransform="none"
-                >
-                  <h2
-                    className="euiTitle euiTitle--small"
-                    id="flyoutTitle"
-                  >
-                    Unable to fetch report info
-                  </h2>
-                </EuiTitle>
-              </div>
-            </EuiFlyoutHeader>
-            <EuiFlyoutBody>
-              <div
-                className="euiFlyoutBody"
-              >
-                <EuiText
-                  grow={true}
-                  size="m"
-                >
+                    <FocusWatcher
+                      autoFocus={true}
+                      disabled={false}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
+                          <div
+                            aria-labelledby="flyoutTitle"
+                            class="euiFlyout euiFlyout--small"
+                            data-test-subj="reportInfoFlyout"
+                            role="dialog"
+                            tabindex="0"
+                          >
+                            <button
+                              aria-label="Closes this dialog"
+                              class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                              data-test-subj="euiFlyoutCloseButton"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                                focusable="false"
+                                height="16"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                                />
+                              </svg>
+                            </button>
+                            <div
+                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--small"
+                                id="flyoutTitle"
+                              >
+                                Unable to fetch report info
+                              </h2>
+                            </div>
+                            <div
+                              class="euiFlyoutBody"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Could not fetch the job info
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                    />
+                  </SideEffect(FocusWatcher)>
                   <div
-                    className="euiText euiText--medium"
+                    aria-labelledby="flyoutTitle"
+                    className="euiFlyout euiFlyout--small"
+                    data-test-subj="reportInfoFlyout"
+                    role="dialog"
+                    tabIndex={0}
                   >
-                    Could not fetch the job info
+                    <EuiButtonIcon
+                      aria-label="Closes this dialog"
+                      className="euiFlyout__closeButton"
+                      color="text"
+                      data-test-subj="euiFlyoutCloseButton"
+                      iconSize="m"
+                      iconType="cross"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <button
+                        aria-label="Closes this dialog"
+                        className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                        data-test-subj="euiFlyoutCloseButton"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          size="m"
+                          type="cross"
+                        >
+                          <cross
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                            focusable="false"
+                            height="16"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                              focusable="false"
+                              height="16"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                              />
+                            </svg>
+                          </cross>
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
+                    <EuiFlyoutHeader
+                      hasBorder={true}
+                    >
+                      <div
+                        className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                      >
+                        <EuiTitle
+                          size="s"
+                          textTransform="none"
+                        >
+                          <h2
+                            className="euiTitle euiTitle--small"
+                            id="flyoutTitle"
+                          >
+                            Unable to fetch report info
+                          </h2>
+                        </EuiTitle>
+                      </div>
+                    </EuiFlyoutHeader>
+                    <EuiFlyoutBody>
+                      <div
+                        className="euiFlyoutBody"
+                      >
+                        <EuiText
+                          grow={true}
+                          size="m"
+                        >
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            Could not fetch the job info
+                          </div>
+                        </EuiText>
+                      </div>
+                    </EuiFlyoutBody>
                   </div>
-                </EuiText>
-              </div>
-            </EuiFlyoutBody>
-          </div>
-        </div>
-      </Component>
+                </div>
+                <div
+                  data-focus-guard={true}
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+              </FocusLock>
+            </div>
+          </OutsideEventDetector>
+        </EuiOutsideClickDetector>
+      </EuiFocusTrap>
     </span>
   </EuiFlyout>,
   <div
@@ -304,109 +499,300 @@ Array [
           }
         />
       </EuiOverlayMask>
-      <Component
-        focusTrapOptions={
-          Object {
-            "clickOutsideDeactivates": true,
-            "fallbackFocus": [Function],
-          }
-        }
+      <EuiFocusTrap
+        clickOutsideDisables={true}
+        disabled={false}
+        returnFocus={true}
       >
-        <div>
-          <div
-            aria-labelledby="flyoutTitle"
-            className="euiFlyout euiFlyout--small"
-            data-test-subj="reportInfoFlyout"
-            role="dialog"
-            tabIndex={0}
+        <EuiOutsideClickDetector
+          isDisabled={false}
+          onOutsideClick={[Function]}
+        >
+          <OutsideEventDetector
+            handleEvent={[Function]}
+            onClick={[Function]}
           >
-            <EuiButtonIcon
-              aria-label="Closes this dialog"
-              className="euiFlyout__closeButton"
-              color="text"
-              data-test-subj="euiFlyoutCloseButton"
-              iconSize="m"
-              iconType="cross"
+            <div
               onClick={[Function]}
-              type="button"
-            >
-              <button
-                aria-label="Closes this dialog"
-                className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                data-test-subj="euiFlyoutCloseButton"
-                onClick={[Function]}
-                type="button"
-              >
-                <EuiIcon
-                  aria-hidden="true"
-                  className="euiButtonIcon__icon"
-                  size="m"
-                  type="cross"
-                >
-                  <cross
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                    focusable="false"
-                    height="16"
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="euiIcon euiIcon--medium euiButtonIcon__icon"
-                      focusable="false"
-                      height="16"
-                      style={null}
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
-                      />
-                    </svg>
-                  </cross>
-                </EuiIcon>
-              </button>
-            </EuiButtonIcon>
-            <EuiFlyoutHeader
-              hasBorder={true}
+              onMouseDown={[Function]}
+              onTouchStart={[Function]}
             >
-              <div
-                className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+              <FocusLock
+                as="div"
+                autoFocus={true}
+                disabled={false}
+                lockProps={Object {}}
+                noFocusGuards={false}
+                persistentFocus={false}
+                returnFocus={true}
               >
-                <EuiTitle
-                  size="s"
-                  textTransform="none"
+                <div
+                  data-focus-guard={true}
+                  key="guard-first"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+                <div
+                  data-focus-guard={true}
+                  key="guard-nearest"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={1}
+                />
+                <div
+                  data-focus-lock-disabled={false}
+                  onBlur={[Function]}
+                  onFocus={[Function]}
                 >
-                  <h2
-                    className="euiTitle euiTitle--small"
-                    id="flyoutTitle"
+                  <SideEffect(FocusWatcher)
+                    autoFocus={true}
+                    disabled={false}
+                    observed={
+                      <div
+                        data-focus-lock-disabled="false"
+                      >
+                        <div
+                          aria-labelledby="flyoutTitle"
+                          class="euiFlyout euiFlyout--small"
+                          data-test-subj="reportInfoFlyout"
+                          role="dialog"
+                          tabindex="0"
+                        >
+                          <button
+                            aria-label="Closes this dialog"
+                            class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                            data-test-subj="euiFlyoutCloseButton"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                              focusable="false"
+                              height="16"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                              />
+                            </svg>
+                          </button>
+                          <div
+                            class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--small"
+                              id="flyoutTitle"
+                            >
+                              Job Info
+                            </h2>
+                          </div>
+                          <div
+                            class="euiFlyoutBody"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    }
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
                   >
-                    Job Info
-                  </h2>
-                </EuiTitle>
-              </div>
-            </EuiFlyoutHeader>
-            <EuiFlyoutBody>
-              <div
-                className="euiFlyoutBody"
-              >
-                <EuiText
-                  grow={true}
-                  size="m"
-                >
+                    <FocusWatcher
+                      autoFocus={true}
+                      disabled={false}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
+                          <div
+                            aria-labelledby="flyoutTitle"
+                            class="euiFlyout euiFlyout--small"
+                            data-test-subj="reportInfoFlyout"
+                            role="dialog"
+                            tabindex="0"
+                          >
+                            <button
+                              aria-label="Closes this dialog"
+                              class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                              data-test-subj="euiFlyoutCloseButton"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiButtonIcon__icon"
+                                focusable="false"
+                                height="16"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                                />
+                              </svg>
+                            </button>
+                            <div
+                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--small"
+                                id="flyoutTitle"
+                              >
+                                Job Info
+                              </h2>
+                            </div>
+                            <div
+                              class="euiFlyoutBody"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                    />
+                  </SideEffect(FocusWatcher)>
                   <div
-                    className="euiText euiText--medium"
-                  />
-                </EuiText>
-              </div>
-            </EuiFlyoutBody>
-          </div>
-        </div>
-      </Component>
+                    aria-labelledby="flyoutTitle"
+                    className="euiFlyout euiFlyout--small"
+                    data-test-subj="reportInfoFlyout"
+                    role="dialog"
+                    tabIndex={0}
+                  >
+                    <EuiButtonIcon
+                      aria-label="Closes this dialog"
+                      className="euiFlyout__closeButton"
+                      color="text"
+                      data-test-subj="euiFlyoutCloseButton"
+                      iconSize="m"
+                      iconType="cross"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <button
+                        aria-label="Closes this dialog"
+                        className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                        data-test-subj="euiFlyoutCloseButton"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          size="m"
+                          type="cross"
+                        >
+                          <cross
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                            focusable="false"
+                            height="16"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className="euiIcon euiIcon--medium euiButtonIcon__icon"
+                              focusable="false"
+                              height="16"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+                              />
+                            </svg>
+                          </cross>
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
+                    <EuiFlyoutHeader
+                      hasBorder={true}
+                    >
+                      <div
+                        className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                      >
+                        <EuiTitle
+                          size="s"
+                          textTransform="none"
+                        >
+                          <h2
+                            className="euiTitle euiTitle--small"
+                            id="flyoutTitle"
+                          >
+                            Job Info
+                          </h2>
+                        </EuiTitle>
+                      </div>
+                    </EuiFlyoutHeader>
+                    <EuiFlyoutBody>
+                      <div
+                        className="euiFlyoutBody"
+                      >
+                        <EuiText
+                          grow={true}
+                          size="m"
+                        >
+                          <div
+                            className="euiText euiText--medium"
+                          />
+                        </EuiText>
+                      </div>
+                    </EuiFlyoutBody>
+                  </div>
+                </div>
+                <div
+                  data-focus-guard={true}
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+              </FocusLock>
+            </div>
+          </OutsideEventDetector>
+        </EuiOutsideClickDetector>
+      </EuiFocusTrap>
     </span>
   </EuiFlyout>,
   <div
diff --git a/x-pack/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap b/x-pack/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap
index 51c69f0a78dcb..ddeaf5a657716 100644
--- a/x-pack/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`BasicLoginForm renders as expected 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           aria-required={true}
@@ -48,6 +49,7 @@ exports[`BasicLoginForm renders as expected 1`] = `
             values={Object {}}
           />
         }
+        labelType="label"
       >
         <EuiFieldText
           aria-required={true}
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/__snapshots__/collapsible_panel.test.tsx.snap b/x-pack/plugins/security/public/views/management/edit_role/components/__snapshots__/collapsible_panel.test.tsx.snap
index 52bde6ec75879..87e20ccd70ffa 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/__snapshots__/collapsible_panel.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/__snapshots__/collapsible_panel.test.tsx.snap
@@ -51,9 +51,7 @@ exports[`it renders without blowing up 1`] = `
       </EuiLink>
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <p>
     child
   </p>
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
index 3627ad8094b4f..c883a606a64aa 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
@@ -45,6 +45,7 @@ exports[`it renders without crashing 1`] = `
       describedByIds={Array []}
       fullWidth={true}
       hasEmptyLabelSpace={true}
+      labelType="label"
     >
       <ClusterPrivileges
         onChange={[Function]}
@@ -65,9 +66,7 @@ exports[`it renders without crashing 1`] = `
       />
     </EuiFormRow>
   </EuiDescribedFormGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiDescribedFormGroup
     description={
       <p>
@@ -108,6 +107,7 @@ exports[`it renders without crashing 1`] = `
       describedByIds={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={true}
+      labelType="label"
     >
       <EuiComboBox
         compressed={false}
@@ -122,9 +122,7 @@ exports[`it renders without crashing 1`] = `
       />
     </EuiFormRow>
   </EuiDescribedFormGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiTitle
     size="xs"
     textTransform="none"
@@ -193,10 +191,7 @@ exports[`it renders without crashing 1`] = `
       }
     }
   />
-  <EuiHorizontalRule
-    margin="l"
-    size="full"
-  />
+  <EuiHorizontalRule />
   <EuiButton
     color="primary"
     fill={false}
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap
index 15820ba7ddb94..fab1dbf9a736e 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`it renders without crashing 1`] = `
 <Fragment>
-  <EuiHorizontalRule
-    margin="l"
-    size="full"
-  />
+  <EuiHorizontalRule />
   <EuiFlexGroup
     alignItems="stretch"
     className="index-privilege-form"
@@ -45,6 +42,7 @@ exports[`it renders without crashing 1`] = `
                 values={Object {}}
               />
             }
+            labelType="label"
           >
             <EuiComboBox
               compressed={false}
@@ -75,6 +73,7 @@ exports[`it renders without crashing 1`] = `
                 values={Object {}}
               />
             }
+            labelType="label"
           >
             <EuiComboBox
               compressed={false}
@@ -171,6 +170,7 @@ exports[`it renders without crashing 1`] = `
                 values={Object {}}
               />
             }
+            labelType="label"
           >
             <EuiComboBox
               compressed={false}
@@ -187,9 +187,7 @@ exports[`it renders without crashing 1`] = `
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiFlexGroup
         alignItems="stretch"
         component="div"
@@ -227,6 +225,7 @@ exports[`it renders without crashing 1`] = `
         describedByIds={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={true}
+        labelType="label"
       >
         <EuiButtonIcon
           aria-label="Delete index privilege"
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/privilege_space_form.test.tsx.snap b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/privilege_space_form.test.tsx.snap
index a435e7c43ceb1..6145e96104494 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/privilege_space_form.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/privilege_space_form.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`<PrivilegeSpaceForm> renders without crashing 1`] = `
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <SpaceSelector
         onChange={[Function]}
@@ -64,6 +65,7 @@ exports[`<PrivilegeSpaceForm> renders without crashing 1`] = `
           values={Object {}}
         />
       }
+      labelType="label"
     >
       <PrivilegeSelector
         availablePrivileges={
@@ -86,6 +88,7 @@ exports[`<PrivilegeSpaceForm> renders without crashing 1`] = `
       describedByIds={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={true}
+      labelType="label"
     >
       <EuiButtonIcon
         aria-label="Delete space privilege"
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/simple_privilege_form.test.tsx.snap b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/simple_privilege_form.test.tsx.snap
index d74ee2370caf5..92445bd459eee 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/simple_privilege_form.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/simple_privilege_form.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`<SimplePrivilegeForm> renders without crashing 1`] = `
       describedByIds={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={true}
+      labelType="label"
     >
       <PrivilegeSelector
         allowNone={true}
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/space_aware_privilege_form.test.tsx.snap b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/space_aware_privilege_form.test.tsx.snap
index 819bcb4dcf4cd..b1ab079674cb6 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/space_aware_privilege_form.test.tsx.snap
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/space_aware_privilege_form.test.tsx.snap
@@ -214,6 +214,7 @@ exports[`<SpaceAwarePrivilegeForm> renders without crashing 1`] = `
       fullWidth={false}
       hasEmptyLabelSpace={true}
       helpText="No access to spaces"
+      labelType="label"
     >
       <PrivilegeSelector
         allowNone={true}
@@ -230,9 +231,7 @@ exports[`<SpaceAwarePrivilegeForm> renders without crashing 1`] = `
       />
     </EuiFormRow>
   </EuiDescribedFormGroup>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiTitle
     size="xs"
     textTransform="none"
diff --git a/x-pack/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap b/x-pack/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap
index e916272f8110e..f8e49b82bfeac 100644
--- a/x-pack/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap
@@ -52,6 +52,7 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
           hasEmptyLabelSpace={false}
           isInvalid={false}
           label="Confirm space name"
+          labelType="label"
         >
           <EuiFieldText
             compressed={false}
diff --git a/x-pack/plugins/spaces/public/views/management/components/secure_space_message/__snapshots__/secure_space_message.test.tsx.snap b/x-pack/plugins/spaces/public/views/management/components/secure_space_message/__snapshots__/secure_space_message.test.tsx.snap
index 7b46ee41053fd..19d4af4b95352 100644
--- a/x-pack/plugins/spaces/public/views/management/components/secure_space_message/__snapshots__/secure_space_message.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/views/management/components/secure_space_message/__snapshots__/secure_space_message.test.tsx.snap
@@ -4,9 +4,7 @@ exports[`SecureSpaceMessage doesn't render if user profile does not allow securi
 
 exports[`SecureSpaceMessage renders if user profile allows security to be managed 1`] = `
 <Fragment>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiText
     className="eui-textCenter"
     grow={true}
diff --git a/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/customize_space_avatar.test.tsx.snap b/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/customize_space_avatar.test.tsx.snap
index 14f1b31f4d194..218d879e13f83 100644
--- a/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/customize_space_avatar.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/customize_space_avatar.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`renders without crashing 1`] = `
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={true}
+    labelType="label"
   >
     <EuiLink
       color="primary"
diff --git a/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/space_identifier.test.tsx.snap b/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/space_identifier.test.tsx.snap
index cae15537921b3..486e911a06012 100644
--- a/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/space_identifier.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/space_identifier.test.tsx.snap
@@ -55,6 +55,7 @@ exports[`renders without crashing 1`] = `
         </EuiLink>
       </p>
     }
+    labelType="label"
   >
     <EuiFieldText
       compressed={false}
diff --git a/x-pack/plugins/spaces/public/views/space_selector/__snapshots__/space_selector.test.tsx.snap b/x-pack/plugins/spaces/public/views/space_selector/__snapshots__/space_selector.test.tsx.snap
index 3ed85e69d67a1..44b3c8a03b10a 100644
--- a/x-pack/plugins/spaces/public/views/space_selector/__snapshots__/space_selector.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/views/space_selector/__snapshots__/space_selector.test.tsx.snap
@@ -72,9 +72,7 @@ exports[`it renders without crashing 1`] = `
         onSpaceSelect={[Function]}
         spaces={Array []}
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <EuiText
         color="subdued"
         grow={true}
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
index 7b262d9c781d4..2bdd63fab716a 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
@@ -2,9 +2,7 @@
 
 exports[`CheckupTab render with deprecations 1`] = `
 <Fragment>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiText
     grow={false}
     size="m"
@@ -24,9 +22,7 @@ exports[`CheckupTab render with deprecations 1`] = `
       />
     </p>
   </EuiText>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiCallOut
     color="warning"
     iconType="help"
@@ -62,9 +58,7 @@ exports[`CheckupTab render with deprecations 1`] = `
       />
     </p>
   </EuiCallOut>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiPageContent
     panelPaddingSize="l"
   >
@@ -184,9 +178,7 @@ exports[`CheckupTab render with deprecations 1`] = `
         onSearchChange={[Function]}
         search=""
       />
-      <EuiSpacer
-        size="l"
-      />
+      <EuiSpacer />
       <GroupedDeprecations
         allDeprecations={
           Array [
@@ -298,9 +290,7 @@ exports[`CheckupTab render with deprecations 1`] = `
 
 exports[`CheckupTab render with error 1`] = `
 <Fragment>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiText
     grow={false}
     size="m"
@@ -320,9 +310,7 @@ exports[`CheckupTab render with error 1`] = `
       />
     </p>
   </EuiText>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiCallOut
     color="warning"
     iconType="help"
@@ -358,9 +346,7 @@ exports[`CheckupTab render with error 1`] = `
       />
     </p>
   </EuiCallOut>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiPageContent
     panelPaddingSize="l"
   >
@@ -375,9 +361,7 @@ exports[`CheckupTab render with error 1`] = `
 
 exports[`CheckupTab render without deprecations 1`] = `
 <Fragment>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiText
     grow={false}
     size="m"
@@ -397,9 +381,7 @@ exports[`CheckupTab render without deprecations 1`] = `
       />
     </p>
   </EuiText>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiCallOut
     color="warning"
     iconType="help"
@@ -435,9 +417,7 @@ exports[`CheckupTab render without deprecations 1`] = `
       />
     </p>
   </EuiCallOut>
-  <EuiSpacer
-    size="l"
-  />
+  <EuiSpacer />
   <EuiPageContent
     panelPaddingSize="l"
   >
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
index 6f87d85dead85..28dfa6b130b91 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
@@ -32,9 +32,7 @@ exports[`ChecklistFlyout renders 1`] = `
         />
       </p>
     </EuiCallOut>
-    <EuiSpacer
-      size="l"
-    />
+    <EuiSpacer />
     <EuiTitle
       size="xs"
       textTransform="none"
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
index c0e020e0f1e4f..6aba2feb36e11 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
@@ -23,9 +23,7 @@ exports[`WarningsFlyoutStep renders 1`] = `
         />
       </p>
     </EuiCallOut>
-    <EuiSpacer
-      size="l"
-    />
+    <EuiSpacer />
     <WarningCheckbox
       checkedIds={
         Object {
diff --git a/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
index e4bcbd5433070..3e77040fee895 100644
--- a/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
@@ -63,6 +63,7 @@ exports[`PingList component renders sorted list without errors 1`] = `
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label="Status"
+          labelType="label"
         >
           <EuiComboBox
             compressed={false}
diff --git a/x-pack/plugins/xpack_main/public/components/telemetry/__snapshots__/opt_in_details_component.test.js.snap b/x-pack/plugins/xpack_main/public/components/telemetry/__snapshots__/opt_in_details_component.test.js.snap
index ccd080b4d7b17..8d9c205ce950c 100644
--- a/x-pack/plugins/xpack_main/public/components/telemetry/__snapshots__/opt_in_details_component.test.js.snap
+++ b/x-pack/plugins/xpack_main/public/components/telemetry/__snapshots__/opt_in_details_component.test.js.snap
@@ -10,9 +10,7 @@ exports[`OptInDetailsComponent renders as expected 1`] = `
     ownFocus={true}
     size="m"
   >
-    <EuiFlyoutHeader
-      hasBorder={false}
-    >
+    <EuiFlyoutHeader>
       <EuiTitle
         size="m"
         textTransform="none"
diff --git a/yarn.lock b/yarn.lock
index 6192e9c381206..0ba754ea734d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -820,16 +820,15 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-7.1.0.tgz#0c5d26b5e43048de93bdde0878187442c3593fa6"
-  integrity sha512-B+ANn2zviDvdcgtZc+a8FbmAvfNTjgpkmEPHknRwVdZSnXIRHphdIWRYRKQTkBHsOKy5wmyMaBS06ENAKNBFFg==
+"@elastic/eui@9.0.1":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-9.0.1.tgz#d71380d17416b4bbec1e920285c0c2ca0453b3a1"
+  integrity sha512-XFKIFvW557VOz7WPr9si6gY1+Z599y3ELmQ+SYl6mKaNQkVYKJldG77kZ2xrzw+oyVne8QW6xoK67T3M6+hVzw==
   dependencies:
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"
     classnames "^2.2.5"
     core-js "^2.5.1"
-    focus-trap-react "^3.0.4"
     highlight.js "^9.12.0"
     html "^1.0.0"
     keymirror "^0.1.1"
@@ -838,6 +837,7 @@
     prop-types "^15.6.0"
     react-ace "^5.5.0"
     react-color "^2.13.8"
+    react-focus-lock "^1.17.7"
     react-input-autosize "^2.2.1"
     react-is "~16.3.0"
     react-virtualized "^9.18.5"
@@ -10371,6 +10371,11 @@ flush-write-stream@^1.0.2:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+focus-lock@^0.5.2:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.5.4.tgz#537644d61b9e90fd97075aa680b8add1de24e819"
+  integrity sha512-A9ngdb0NyI6UygBQ0eD+p8SpLWTkdEDn67I3EGUUcDUfxH694mLA/xBWwhWhoj/2YLtsv2EoQdAx9UOKs8d/ZQ==
+
 focus-trap-react@^3.0.4, focus-trap-react@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-3.1.2.tgz#4dd021ccd028bbd3321147d132cdf7585d6d1394"
@@ -18943,6 +18948,14 @@ react-beautiful-dnd@^8.0.7:
     redux "^4.0.0"
     tiny-invariant "^0.0.3"
 
+react-clientside-effect@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.0.tgz#db823695f75e9616a5e4dd6d908e5ea627fb2516"
+  integrity sha512-cVIsGG7SNHsQsCP4+fw7KFUB0HiYiU8hbvL640XaLCbZ31aK8/lj0qOKJ2K+xRjuQz/IM4Q4qclI0aEqTtcXtA==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    shallowequal "^1.1.0"
+
 react-clipboard.js@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/react-clipboard.js/-/react-clipboard.js-1.1.3.tgz#86feeb49364553ecd15aea91c75aa142532a60e0"
@@ -19088,6 +19101,16 @@ react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-focus-lock@^1.17.7:
+  version "1.17.7"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.17.7.tgz#ea7fd05d88d0e32833cad241f9333c124c35ba9a"
+  integrity sha512-zDCqkIhuuHCCmWzJghAz6EM6ROx8/sHhQJWjmO6oteQRHX+xTCE5FWIu3zLB5UiUa5eLd66tTh4Fs8YDp0G+6Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.5.2"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.0"
+
 react-fuzzy@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.5.2.tgz#fc13bf6f0b785e5fefe908724efebec4935eaefe"