diff --git a/package.json b/package.json
index 847f09b4ab4cf..cf36d4ce884ac 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "@elastic/charts": "^14.0.0",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "1.0.5",
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",
diff --git a/packages/kbn-ui-framework/dist/kui_dark.css b/packages/kbn-ui-framework/dist/kui_dark.css
index dcbd65fbca520..aa16bcdb34d36 100644
--- a/packages/kbn-ui-framework/dist/kui_dark.css
+++ b/packages/kbn-ui-framework/dist/kui_dark.css
@@ -1,10 +1,24 @@
+/* 1 */
+/* 1 */
+/**
+ * 1. Extend beta badges to at least 40% of the container's width
+ * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+ */
+/**
+ * 1. Apply margin to all but last item in the flex.
+ * 2. Margin gets flipped because of the row-reverse.
+ */
 /**
- * 2. Account for inner box-shadow style border when in group
  * 3. Must supply both values to background-size or some browsers apply the single value to both directions
  */
 /**
  * 4. Override invalid state with focus state.
  */
+/**
+ *  Mixin for use in:
+ *  - EuiCard
+ *  - EuiPageContent
+*/
 /**
  * 1. Enforce pointer when there's no href.
  * 2. Allow these styles to be applied to a button element.
@@ -1595,7 +1609,6 @@ main {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 100%;
   padding: 12px 8px;
   font-size: 16px;
   font-weight: bold;
diff --git a/packages/kbn-ui-framework/dist/kui_light.css b/packages/kbn-ui-framework/dist/kui_light.css
index 3e82873d53aa7..9b42bbb517f46 100644
--- a/packages/kbn-ui-framework/dist/kui_light.css
+++ b/packages/kbn-ui-framework/dist/kui_light.css
@@ -1,10 +1,24 @@
+/* 1 */
+/* 1 */
+/**
+ * 1. Extend beta badges to at least 40% of the container's width
+ * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+ */
+/**
+ * 1. Apply margin to all but last item in the flex.
+ * 2. Margin gets flipped because of the row-reverse.
+ */
 /**
- * 2. Account for inner box-shadow style border when in group
  * 3. Must supply both values to background-size or some browsers apply the single value to both directions
  */
 /**
  * 4. Override invalid state with focus state.
  */
+/**
+ *  Mixin for use in:
+ *  - EuiCard
+ *  - EuiPageContent
+*/
 /**
  * 1. Enforce pointer when there's no href.
  * 2. Allow these styles to be applied to a button element.
@@ -522,7 +536,7 @@ main {
   -webkit-appearance: none;
   /* 1 */
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
@@ -623,7 +637,7 @@ main {
   line-height: 1.5;
   color: #343741;
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
@@ -662,7 +676,7 @@ main {
   line-height: 1.5;
   color: #343741;
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
@@ -734,7 +748,7 @@ main {
   line-height: 1.5;
   color: #343741;
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
@@ -777,7 +791,7 @@ main {
   line-height: 1.5;
   color: #343741;
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
@@ -1252,7 +1266,7 @@ main {
   font-size: 14px;
   color: #343741;
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px; }
   .kuiLocalDropdownInput:focus {
     border-color: #006BB4; }
@@ -1410,7 +1424,7 @@ main {
   line-height: 1.5;
   color: #343741;
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
@@ -1491,7 +1505,7 @@ main {
   line-height: 1.5;
   color: #343741;
   background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
@@ -1595,7 +1609,6 @@ main {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 100%;
   padding: 12px 8px;
   font-size: 16px;
   font-weight: bold;
diff --git a/packages/kbn-ui-framework/src/kui_dark.scss b/packages/kbn-ui-framework/src/kui_dark.scss
index 2bfbdbb4147ce..aa9ba0f1bee70 100644
--- a/packages/kbn-ui-framework/src/kui_dark.scss
+++ b/packages/kbn-ui-framework/src/kui_dark.scss
@@ -3,8 +3,6 @@
 @import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';
 @import '../../../node_modules/@elastic/eui/src/global_styling/variables/index';
 @import '../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
-@import '../../../node_modules/@elastic/eui/src/components/form/variables';
-@import '../../../node_modules/@elastic/eui/src/components/form/mixins';
 
 // Configuration
 @import 'global_styling/variables/index';
diff --git a/packages/kbn-ui-framework/src/kui_light.scss b/packages/kbn-ui-framework/src/kui_light.scss
index d4288be27ef75..b912b6e217882 100644
--- a/packages/kbn-ui-framework/src/kui_light.scss
+++ b/packages/kbn-ui-framework/src/kui_light.scss
@@ -3,8 +3,6 @@
 @import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';
 @import '../../../node_modules/@elastic/eui/src/global_styling/variables/index';
 @import '../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
-@import '../../../node_modules/@elastic/eui/src/components/form/variables';
-@import '../../../node_modules/@elastic/eui/src/components/form/mixins';
 
 // Configuration
 @import 'global_styling/variables/index';
diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
index 12cac1c89275b..0da28e41579ae 100644
--- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss
+++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
@@ -1,5 +1,3 @@
-@import 'node_modules/@elastic/eui/src/components/panel/mixins';
-
 discover-app {
   flex-grow: 1;
 
@@ -37,7 +35,7 @@ discover-app {
   z-index: 1;
 }
 
-@include euiPanel('dscWrapper__content');
+@include euiPanel('.dscWrapper__content');
 
 .dscWrapper__content {
   padding-top: $euiSizeXS;
@@ -213,7 +211,6 @@ discover-app {
 }
 
 .dscResults {
-
   h3 {
     margin: -20px 0 10px 0;
     text-align: center;
diff --git a/src/legacy/core_plugins/kibana/public/index.scss b/src/legacy/core_plugins/kibana/public/index.scss
index 7a6a3ca1d01d0..611fe613ad99c 100644
--- a/src/legacy/core_plugins/kibana/public/index.scss
+++ b/src/legacy/core_plugins/kibana/public/index.scss
@@ -1,8 +1,6 @@
 @import 'src/legacy/ui/public/styles/styling_constants';
 
 // Elastic charts
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
 @import '@elastic/charts/dist/theme';
 @import '@elastic/eui/src/themes/charts/theme';
 
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/_mixins.scss b/src/legacy/core_plugins/vis_type_timeseries/public/_mixins.scss
index aefebe8117bbf..8d3aea2a3ae54 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/_mixins.scss
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/_mixins.scss
@@ -1,6 +1,3 @@
-@import 'node_modules/@elastic/eui/src/components/form/variables';
-@import 'node_modules/@elastic/eui/src/components/form/mixins';
-
 @mixin tvbEditorRepeatingRow {
   background-color: $euiColorLightestShade;
   padding: $euiSizeS;
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/_annotations_editor.scss b/src/legacy/core_plugins/vis_type_timeseries/public/components/_annotations_editor.scss
index 3372367be273d..99e024c9c5193 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/_annotations_editor.scss
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/_annotations_editor.scss
@@ -1,11 +1,9 @@
-@import 'node_modules/@elastic/eui/src/components/panel/mixins';
-
 .tvbAnnotationsEditor__container {
   padding: $euiSize;
   background-color: $euiColorLightestShade;
 }
 
-@include euiPanel('tvbAnnotationsEditor');
+@include euiPanel('.tvbAnnotationsEditor');
 
 .tvbAnnotationsEditor {
   margin-bottom: $euiSize;
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/_series_editor.scss b/src/legacy/core_plugins/vis_type_timeseries/public/components/_series_editor.scss
index 0cfe5fef010d3..82d1f4ea62676 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/_series_editor.scss
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/_series_editor.scss
@@ -1,10 +1,8 @@
-@import 'node_modules/@elastic/eui/src/components/panel/mixins';
-
 .tvbSeriesEditor__container {
   padding: $euiSize;
 }
 
-@include euiPanel('tvbSeriesEditor');
+@include euiPanel('.tvbSeriesEditor');
 
 .tvbSeriesEditor {
   margin-bottom: $euiSize;
diff --git a/src/legacy/server/sass/build.test.js b/src/legacy/server/sass/build.test.js
index 810b7cb44b917..bde552e9df00f 100644
--- a/src/legacy/server/sass/build.test.js
+++ b/src/legacy/server/sass/build.test.js
@@ -47,14 +47,35 @@ it('builds light themed SASS', async () => {
 
   expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
     .toMatchInlineSnapshot(`
-"foo bar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #e6f0f8 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
-/*# sourceMappingURL=... */"
-`);
+    "/* 1 */
+    /* 1 */
+    /**
+     * 1. Extend beta badges to at least 40% of the container's width
+     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+     */
+    /**
+     * 1. Apply margin to all but last item in the flex.
+     * 2. Margin gets flipped because of the row-reverse.
+     */
+    /**
+     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
+     */
+    /**
+     * 4. Override invalid state with focus state.
+     */
+    /**
+     *  Mixin for use in:
+     *  - EuiCard
+     *  - EuiPageContent
+    */
+    foo bar {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      background: #e6f0f8 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
+    /*# sourceMappingURL=... */"
+  `);
 });
 
 it('builds dark themed SASS', async () => {
@@ -72,14 +93,35 @@ it('builds dark themed SASS', async () => {
 
   expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
     .toMatchInlineSnapshot(`
-"foo bar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #232635 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
-/*# sourceMappingURL=... */"
-`);
+    "/* 1 */
+    /* 1 */
+    /**
+     * 1. Extend beta badges to at least 40% of the container's width
+     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+     */
+    /**
+     * 1. Apply margin to all but last item in the flex.
+     * 2. Margin gets flipped because of the row-reverse.
+     */
+    /**
+     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
+     */
+    /**
+     * 4. Override invalid state with focus state.
+     */
+    /**
+     *  Mixin for use in:
+     *  - EuiCard
+     *  - EuiPageContent
+    */
+    foo bar {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      background: #232635 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
+    /*# sourceMappingURL=... */"
+  `);
 });
 
 it('rewrites url imports', async () => {
@@ -99,16 +141,38 @@ it('rewrites url imports', async () => {
     },
   }).build();
 
+  /* eslint-disable max-len */
   expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
     .toMatchInlineSnapshot(`
-"foo bar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #232635 url(__REPLACE_WITH_PUBLIC_PATH__foo/bar/images/img.png) url(__REPLACE_WITH_PUBLIC_PATH__ui/favicons/favicon.ico); }
-/*# sourceMappingURL=... */"
-`);
+    "/* 1 */
+    /* 1 */
+    /**
+     * 1. Extend beta badges to at least 40% of the container's width
+     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+     */
+    /**
+     * 1. Apply margin to all but last item in the flex.
+     * 2. Margin gets flipped because of the row-reverse.
+     */
+    /**
+     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
+     */
+    /**
+     * 4. Override invalid state with focus state.
+     */
+    /**
+     *  Mixin for use in:
+     *  - EuiCard
+     *  - EuiPageContent
+    */
+    foo bar {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      background: #232635 url(__REPLACE_WITH_PUBLIC_PATH__foo/bar/images/img.png) url(__REPLACE_WITH_PUBLIC_PATH__ui/favicons/favicon.ico); }
+    /*# sourceMappingURL=... */"
+  `);
 
   expect(
     Buffer.compare(
@@ -118,9 +182,9 @@ it('rewrites url imports', async () => {
   ).toBe(0);
 
   expect(await globby('**/*', { cwd: TMP })).toMatchInlineSnapshot(`
-Array [
-  "style.css",
-  "images/img.png",
-]
-`);
+    Array [
+      "style.css",
+      "images/img.png",
+    ]
+  `);
 });
diff --git a/src/legacy/ui/public/styles/_legacy/_mixins.scss b/src/legacy/ui/public/styles/_legacy/_mixins.scss
index b063aa763838b..2834f60555070 100644
--- a/src/legacy/ui/public/styles/_legacy/_mixins.scss
+++ b/src/legacy/ui/public/styles/_legacy/_mixins.scss
@@ -3,8 +3,6 @@
 
 // DO NOT CONTINUE TO USE THESE MIXINS
 
-@import '@elastic/eui/src/components/form/variables';
-
 @mixin __legacyInputStyles__bad {
   &:not([type='range']) {
     appearance: none;
diff --git a/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss b/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss
index 50ec20f016194..691ec17b5b967 100644
--- a/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss
+++ b/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss
@@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/button/variables';
-@import '@elastic/eui/src/components/form/variables';
-
 /*!
  * ui-select
  * http://github.com/angular-ui/ui-select
@@ -8,7 +5,6 @@
  * License: MIT
  */
 
-
 /* Style when highlighting a search. */
 .ui-select-highlight {
   font-weight: bold;
@@ -43,12 +39,12 @@
   padding-left: 0;
 }
 
-.select2-locked > .select2-search-choice-close{
-  display:none;
+.select2-locked > .select2-search-choice-close {
+  display: none;
 }
 
-.select-locked > .ui-select-match-close{
-  display:none;
+.select-locked > .ui-select-match-close {
+  display: none;
 }
 
 body > .select2-container.open {
@@ -56,42 +52,42 @@ body > .select2-container.open {
 }
 
 /* Handle up direction Select2 */
-.ui-select-container[theme="select2"].direction-up .ui-select-match,
+.ui-select-container[theme='select2'].direction-up .ui-select-match,
 .ui-select-container.select2.direction-up .ui-select-match {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  border-radius: 4px; /* FIXME hardcoded value :-/ */
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
-.ui-select-container[theme="select2"].direction-up .ui-select-dropdown,
+.ui-select-container[theme='select2'].direction-up .ui-select-dropdown,
 .ui-select-container.select2.direction-up .ui-select-dropdown {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  border-radius: 4px; /* FIXME hardcoded value :-/ */
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 
-    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
-    border-top-style: solid;
+  border-top-width: 1px; /* FIXME hardcoded value :-/ */
+  border-top-style: solid;
 
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
 
-    margin-top: -4px; /* FIXME hardcoded value :-/ */
+  margin-top: -4px; /* FIXME hardcoded value :-/ */
 }
-.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search,
+.ui-select-container[theme='select2'].direction-up .ui-select-dropdown .select2-search,
 .ui-select-container.select2.direction-up .ui-select-dropdown .select2-search {
-    margin-top: 4px; /* FIXME hardcoded value :-/ */
+  margin-top: 4px; /* FIXME hardcoded value :-/ */
 }
-.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match,
+.ui-select-container[theme='select2'].direction-up.select2-dropdown-open .ui-select-match,
 .ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
-    border-bottom-color: $euiColorPrimary;
+  border-bottom-color: $euiColorPrimary;
 }
 
-.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
-.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
-    opacity: 0;
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin: 0;
-    border:0;
+.ui-select-container[theme='select2'] .ui-select-dropdown .ui-select-search-hidden,
+.ui-select-container[theme='select2'] .ui-select-dropdown .ui-select-search-hidden input {
+  opacity: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 /* Bootstrap theme */
@@ -133,12 +129,12 @@ body > .select2-container.open {
 }
 
 .ui-select-bootstrap .ui-select-search-hidden {
-    opacity: 0;
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin: 0;
-    border:0;
+  opacity: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 .ui-select-bootstrap > .ui-select-match > .btn {
@@ -213,7 +209,7 @@ body > .ui-select-bootstrap.open {
 }
 
 .ui-select-multiple:hover .ui-select-match-item.dropping-before:before {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   right: 100%;
@@ -223,7 +219,7 @@ body > .ui-select-bootstrap.open {
 }
 
 .ui-select-multiple:hover .ui-select-match-item.dropping-after:after {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 100%;
@@ -232,7 +228,7 @@ body > .ui-select-bootstrap.open {
   border-right: 1px solid $euiColorPrimary;
 }
 
-.ui-select-bootstrap .ui-select-choices-row>span {
+.ui-select-bootstrap .ui-select-choices-row > span {
   @include euiFontSizeS;
   @include euiTextTruncate;
   font-weight: inherit;
@@ -251,45 +247,44 @@ body > .ui-select-bootstrap.open {
   }
 }
 
-
-.ui-select-bootstrap .ui-select-choices-row.active>span {
-    color: $euiTextColor;
-    text-decoration: none;
-    outline: 0;
-    background-color: $euiFocusBackgroundColor;
+.ui-select-bootstrap .ui-select-choices-row.active > span {
+  color: $euiTextColor;
+  text-decoration: none;
+  outline: 0;
+  background-color: $euiFocusBackgroundColor;
 }
 
-.ui-select-bootstrap .ui-select-choices-row.disabled>span,
-.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
-    color: $euiButtonColorDisabled;
-    cursor: not-allowed;
-    background-color: transparent;
+.ui-select-bootstrap .ui-select-choices-row.disabled > span,
+.ui-select-bootstrap .ui-select-choices-row.active.disabled > span {
+  color: $euiButtonColorDisabled;
+  cursor: not-allowed;
+  background-color: transparent;
 }
 
 /* fix hide/show angular animation */
 .ui-select-match.ng-hide-add,
 .ui-select-search.ng-hide-add {
-    display: none !important;
+  display: none !important;
 }
 
 /* Mark invalid Bootstrap */
 .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
-    border-color: $euiColorDanger;
+  border-color: $euiColorDanger;
 }
 
 /* Handle up direction Bootstrap */
-.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
+.ui-select-container[theme='bootstrap'].direction-up .ui-select-dropdown {
   @include euiBottomShadowMedium;
 }
 
 .ui-select-bootstrap .ui-select-match-text {
-    width: 100%;
-    padding-right: 1em;
+  width: 100%;
+  padding-right: 1em;
 }
 .ui-select-bootstrap .ui-select-match-text span {
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
 }
 .ui-select-bootstrap .ui-select-toggle > a.btn {
   position: absolute;
@@ -300,17 +295,17 @@ body > .ui-select-bootstrap.open {
 
 /* Spinner */
 .ui-select-refreshing {
-    position: absolute;
-    right: 0;
-    padding: 8px 27px;
-    top: 1px;
-    display: inline-block;
-    font-family: 'Glyphicons Halflings';
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    -webkit-font-smoothing:antialiased;
- }
+  position: absolute;
+  right: 0;
+  padding: 8px 27px;
+  top: 1px;
+  display: inline-block;
+  font-family: 'Glyphicons Halflings';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
 
 @-webkit-keyframes ui-select-spin {
   0% {
@@ -342,7 +337,6 @@ body > .ui-select-bootstrap.open {
   -webkit-animation: none 0s;
 }
 
-
 // Other Custom
 
 /**
diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
index 451ecc80844dd..5a30ded7c2e5b 100644
--- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
+++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
@@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
-
 .visTooltip,
 .visTooltip__sizingClone {
   @include euiToolTipStyle('s');
diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
index 5a8a0aabad565..e6b75b1a1f783 100644
--- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss
+++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 //
 // LAYOUT
 //
@@ -44,7 +42,6 @@
   }
 }
 
-
 /**
  * 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
  */
@@ -97,7 +94,7 @@
     margin-top: $euiSizeS;
   }
 
-  label:not([class^="eui"]) {
+  label:not([class^='eui']) {
     @include __legacyLabelStyles__bad;
     display: block;
   }
@@ -169,7 +166,7 @@
 .visEditorSidebar__aggGroupAccordionButtonContent {
   font-size: $euiFontSizeS;
 
-   span {
+  span {
     color: $euiColorDarkShade;
   }
 }
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
index 84538a62ca005..51204e2a61168 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
@@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-@import '@elastic/eui/src/components/form/mixins';
-
 /**
  * 1.  Allow wrapping of long filter items
  */
diff --git a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
index d43d14945699e..928cb5a34d6de 100644
--- a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
+++ b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 .kbnSavedQueryManagement__popover {
   max-width: $euiFormMaxWidth;
 }
diff --git a/src/plugins/inspector/public/views/requests/_requests.scss b/src/plugins/inspector/public/views/requests/_requests.scss
index feaef21fc4810..273c9d0ccba2b 100644
--- a/src/plugins/inspector/public/views/requests/_requests.scss
+++ b/src/plugins/inspector/public/views/requests/_requests.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/button/variables';
-
 .insRequestDetailsStats__icon {
   margin-right: $euiSizeS;
 }
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index 69f958fb91f60..ae4fa1578fb2b 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   }
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index 96a5e26a74109..32da6eade2b42 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
     "react": "^16.12.0"
   }
 }
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
index e95aa04ddd6b1..0ab65667d6f82 100644
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
index f874cecd5d812..6f661ab2a79e1 100644
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
index ef301c08cdfe8..6c9d4ce4459b3 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -12,6 +12,7 @@ exports[`Storyshots arguments/AxisConfig extended 1`] = `
 >
   <div
     className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+    id="generated-id-row"
   >
     <div
       className="euiFormRow__labelWrapper"
@@ -92,6 +93,7 @@ exports[`Storyshots arguments/AxisConfig/components extended 1`] = `
 >
   <div
     className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+    id="generated-id-row"
   >
     <div
       className="euiFormRow__labelWrapper"
diff --git a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
index a42360d815176..ec282e9a44fde 100644
--- a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
@@ -93,6 +93,7 @@ Array [
               >
                 <div
                   className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -136,6 +137,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -170,6 +172,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -447,6 +450,7 @@ Array [
               >
                 <div
                   className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -490,6 +494,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -524,6 +529,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -798,6 +804,7 @@ Array [
               >
                 <div
                   className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -841,6 +848,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -875,6 +883,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -1151,6 +1160,7 @@ Array [
               >
                 <div
                   className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -1194,6 +1204,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
@@ -1228,6 +1239,7 @@ Array [
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                 >
                   <div
                     className="euiFormRow__labelWrapper"
diff --git a/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot
index 9096fecabf8b1..99d5dc3c115be 100644
--- a/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot
@@ -6,6 +6,7 @@ exports[`Storyshots components/ExpressionInput default 1`] = `
 >
   <div
     className="euiFormRow euiFormRow--fullWidth canvasExpressionInput__inner"
+    id="generated-id-row"
   >
     <div
       className="euiFormRow__fieldWrapper"
diff --git a/x-pack/legacy/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss b/x-pack/legacy/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
index 978c0f3fc7492..d91e49c0c628f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
@@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
-
 .tooltipAnnotation {
   @include euiToolTipStyle($size: 's');
   position: absolute;
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
index a271c2863ed0a..9e3bebbd71273 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -31,6 +31,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -70,6 +71,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -158,6 +160,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -244,6 +247,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -283,6 +287,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -385,6 +390,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -424,6 +430,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
           style={
             Object {
               "fontSize": 0,
@@ -511,6 +518,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
     >
       <div
         className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
       >
         <div
           className="euiFormRow__labelWrapper"
@@ -550,6 +558,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
     >
       <div
         className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
       >
         <div
           className="euiFormRow__labelWrapper"
@@ -638,6 +647,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
     >
       <div
         className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
       >
         <div
           className="euiFormRow__labelWrapper"
@@ -723,6 +733,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
     >
       <div
         className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
       >
         <div
           className="euiFormRow__labelWrapper"
@@ -762,6 +773,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
     >
       <div
         className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
       >
         <div
           className="euiFormRow__labelWrapper"
@@ -864,6 +876,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
     >
       <div
         className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
       >
         <div
           className="euiFormRow__labelWrapper"
@@ -903,6 +916,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
     >
       <div
         className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
         style={
           Object {
             "fontSize": 0,
@@ -1001,6 +1015,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -1040,6 +1055,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -1128,6 +1144,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -1214,6 +1231,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -1253,6 +1271,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -1355,6 +1374,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -1394,6 +1414,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
           style={
             Object {
               "fontSize": 0,
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
index ffe87129c76fa..3b41da4cd3d54 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -13,6 +13,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
   <div>
     <div
       className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+      id="generated-id-row"
     >
       <div
         className="euiFormRow__labelWrapper"
@@ -94,6 +95,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -182,6 +184,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
@@ -270,6 +273,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
       >
         <div
           className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
         >
           <div
             className="euiFormRow__labelWrapper"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot
index 27d82a664ff2a..57641882f2d84 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.examples.storyshot
@@ -65,13 +65,13 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
           </span>
         </span>
       </button>
-      <p
+      <span
         className="euiSwitch__label"
         id="generated-id"
         onClick={[Function]}
       >
         Cycle Slides
-      </p>
+      </span>
     </div>
     <hr
       className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@@ -87,6 +87,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
         >
           <div
             className="euiFormRow euiFormRow--compressed"
+            id="generated-id-row"
           >
             <div
               className="euiFormRow__labelWrapper"
@@ -133,6 +134,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
         >
           <div
             className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+            id="generated-id-row"
           >
             <div
               className="euiFormRow__fieldWrapper"
@@ -234,13 +236,13 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
           </span>
         </span>
       </button>
-      <p
+      <span
         className="euiSwitch__label"
         id="generated-id"
         onClick={[Function]}
       >
         Cycle Slides
-      </p>
+      </span>
     </div>
     <hr
       className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@@ -256,6 +258,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
         >
           <div
             className="euiFormRow euiFormRow--compressed"
+            id="generated-id-row"
           >
             <div
               className="euiFormRow__labelWrapper"
@@ -302,6 +305,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
         >
           <div
             className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+            id="generated-id-row"
           >
             <div
               className="euiFormRow__fieldWrapper"
@@ -403,13 +407,13 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
           </span>
         </span>
       </button>
-      <p
+      <span
         className="euiSwitch__label"
         id="generated-id"
         onClick={[Function]}
       >
         Cycle Slides
-      </p>
+      </span>
     </div>
     <hr
       className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@@ -425,6 +429,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
         >
           <div
             className="euiFormRow euiFormRow--compressed"
+            id="generated-id-row"
           >
             <div
               className="euiFormRow__labelWrapper"
@@ -471,6 +476,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
         >
           <div
             className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+            id="generated-id-row"
           >
             <div
               className="euiFormRow__fieldWrapper"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.examples.storyshot b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.examples.storyshot
index a550c7ec47c92..845a48f363790 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/toolbar_settings.examples.storyshot
@@ -24,6 +24,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
   >
     <div
       className="euiFormRow"
+      id="generated-id-row"
     >
       <div
         className="euiFormRow__fieldWrapper"
@@ -75,13 +76,13 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
               </span>
             </span>
           </button>
-          <p
+          <span
             className="euiSwitch__label"
             id="generated-id"
             onClick={[Function]}
           >
             Hide Toolbar
-          </p>
+          </span>
         </div>
         <div
           className="euiFormHelpText euiFormRow__text"
@@ -119,6 +120,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
   >
     <div
       className="euiFormRow"
+      id="generated-id-row"
     >
       <div
         className="euiFormRow__fieldWrapper"
@@ -170,13 +172,13 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
               </span>
             </span>
           </button>
-          <p
+          <span
             className="euiSwitch__label"
             id="generated-id"
             onClick={[Function]}
           >
             Hide Toolbar
-          </p>
+          </span>
         </div>
         <div
           className="euiFormHelpText euiFormRow__text"
@@ -214,6 +216,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
   >
     <div
       className="euiFormRow"
+      id="generated-id-row"
     >
       <div
         className="euiFormRow__fieldWrapper"
@@ -265,13 +268,13 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
               </span>
             </span>
           </button>
-          <p
+          <span
             className="euiSwitch__label"
             id="generated-id"
             onClick={[Function]}
           >
             Hide Toolbar
-          </p>
+          </span>
         </div>
         <div
           className="euiFormHelpText euiFormRow__text"
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
index 9d7590e977011..67056c5ad716f 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
@@ -357,12 +357,12 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                           </span>
                         </span>
                       </button>
-                      <p
+                      <span
                         class="euiSwitch__label"
                         id="generated-id"
                       >
                         Cycle Slides
-                      </p>
+                      </span>
                     </div>
                     <hr
                       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@@ -376,6 +376,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                         >
                           <div
                             class="euiFormRow euiFormRow--compressed"
+                            id="generated-id-row"
                           >
                             <div
                               class="euiFormRow__labelWrapper"
@@ -419,6 +420,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                         >
                           <div
                             class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+                            id="generated-id-row"
                           >
                             <div
                               class="euiFormRow__fieldWrapper"
@@ -771,6 +773,7 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                   >
                     <div
                       class="euiFormRow"
+                      id="generated-id-row"
                     >
                       <div
                         class="euiFormRow__fieldWrapper"
@@ -826,12 +829,12 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                               </span>
                             </span>
                           </button>
-                          <p
+                          <span
                             class="euiSwitch__label"
                             id="generated-id"
                           >
                             Hide Toolbar
-                          </p>
+                          </span>
                         </div>
                         <div
                           class="euiFormHelpText euiFormRow__text"
@@ -858,4 +861,4 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
 </div>
 `;
 
-exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"disabled\\"><div class=\\"euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiPopoverTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon\\" focusable=\\"false\\"><path d=\\"M4.608 3.063C4.345 2.895 4 3.089 4 3.418v9.167c0 .329.345.523.608.356l7.2-4.584a.426.426 0 0 0 0-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 0 1 0 2.399l-7.2 4.583C4.21 14.38 3 13.696 3 12.585V3.418C3 2.307 4.21 1.624 5.146 2.22z\\"></path></svg><span class=\\"euiContextMenuItem__text\\">Auto Play</span><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow\\" focusable=\\"false\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon\\" focusable=\\"false\\"><path d=\\"M0 6h4v4H0V6zm1 1v2h2V7H1zm5-1h4v4H6V6zm1 1v2h2V7H7zm5-1h4v4h-4V6zm1 3h2V7h-2v2z\\"></path></svg><span class=\\"euiContextMenuItem__text\\">Toolbar</span><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow\\" focusable=\\"false\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon\\" focusable=\\"false\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z\\"></path></svg><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiSwitch__icon\\" focusable=\\"false\\"><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\\"></path></svg><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiSwitch__icon euiSwitch__icon--checked\\" focusable=\\"false\\"><path fill-rule=\\"evenodd\\" d=\\"M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12\\"></path></svg></span></span></button><p class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</p></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div></div></div>"`;
+exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"disabled\\"><div class=\\"euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiPopoverTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon\\" focusable=\\"false\\"><path d=\\"M4.608 3.063C4.345 2.895 4 3.089 4 3.418v9.167c0 .329.345.523.608.356l7.2-4.584a.426.426 0 0 0 0-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 0 1 0 2.399l-7.2 4.583C4.21 14.38 3 13.696 3 12.585V3.418C3 2.307 4.21 1.624 5.146 2.22z\\"></path></svg><span class=\\"euiContextMenuItem__text\\">Auto Play</span><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow\\" focusable=\\"false\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon\\" focusable=\\"false\\"><path d=\\"M0 6h4v4H0V6zm1 1v2h2V7H1zm5-1h4v4H6V6zm1 1v2h2V7H7zm5-1h4v4h-4V6zm1 3h2V7h-2v2z\\"></path></svg><span class=\\"euiContextMenuItem__text\\">Toolbar</span><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow\\" focusable=\\"false\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z\\"></path></svg></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon\\" focusable=\\"false\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z\\"></path></svg><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiSwitch__icon\\" focusable=\\"false\\"><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\\"></path></svg><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiSwitch__icon euiSwitch__icon--checked\\" focusable=\\"false\\"><path fill-rule=\\"evenodd\\" d=\\"M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12\\"></path></svg></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div></div></div>"`;
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
index a496cccc42a58..ed39beeb7d088 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/form_control_layout/mixins';
-
 .lnsInnerIndexPatternDataPanel {
   width: 100%;
   height: 100%;
@@ -54,4 +52,3 @@
   @include euiFormControlLayoutPadding(1, 'right');
   @include euiFormControlLayoutPadding(1, 'left');
 }
-
diff --git a/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss b/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
index ea5c245d9e39f..25bf3597c3466 100644
--- a/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
+++ b/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
@@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
-
 .mlChartTooltip {
   @include euiToolTipStyle('s');
   @include euiFontSizeXS;
@@ -50,5 +47,4 @@
   &--hidden {
     opacity: 0;
   }
-
 }
diff --git a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
index b85591d13998a..49381e3b1c031 100644
--- a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
@@ -56,6 +56,6 @@ describe('Data Frame Analytics: <CreateAnalyticsForm />', () => {
     expect(options.at(2).props().value).toBe('regression');
 
     const row2 = euiFormRows.at(1);
-    expect(row2.find('p').text()).toBe('Enable advanced editor');
+    expect(row2.find('EuiSwitch').text()).toBe('Enable advanced editor');
   });
 });
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss
index 6137a21d0bd8d..39a87ece68ac9 100644
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss
@@ -41,12 +41,13 @@
     background-color: #920000;
   }
 
-  .type-other, .unknown {
+  .type-other,
+  .unknown {
     background-color: #bfa180;
   }
 
   // Use euiPanel styling
-  @include euiPanel($selector: 'card-contents');
+  @include euiPanel($selector: '.card-contents');
 
   .card-contents {
     height: 378px;
@@ -68,12 +69,16 @@
     padding-bottom: 0px;
   }
 
-  .stat.min, .stat.max, .stat.median {
+  .stat.min,
+  .stat.max,
+  .stat.median {
     width: 30%;
     display: inline-block;
   }
 
-  .stat.min.value, .stat.max.value, .stat.median.value {
+  .stat.min.value,
+  .stat.max.value,
+  .stat.median.value {
     font-size: $euiFontSizeS;
     @include euiTextTruncate;
   }
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
index ca7d8e3f31c58..b4fd521f21bec 100644
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
@@ -2,7 +2,6 @@
   height: 420px;
   width: 360px;
 
-
   // Note the names of these styles need to match the type of the field they are displaying.
   .boolean {
     background-color: $euiColorVis5;
@@ -36,13 +35,13 @@
     background-color: $euiColorVis9;
   }
 
-  .type-other, .unknown {
+  .type-other,
+  .unknown {
     background-color: $euiColorVis6;
   }
 
-
   // Use euiPanel styling
-  @include euiPanel($selector: 'mlFieldDataCard__content');
+  @include euiPanel($selector: '.mlFieldDataCard__content');
 
   .mlFieldDataCard__content {
     @include euiFontSizeS;
diff --git a/x-pack/legacy/plugins/ml/public/index.scss b/x-pack/legacy/plugins/ml/public/index.scss
index c3216773c1a32..ac3f3fef97c70 100644
--- a/x-pack/legacy/plugins/ml/public/index.scss
+++ b/x-pack/legacy/plugins/ml/public/index.scss
@@ -1,10 +1,6 @@
 // Should import both the EUI constants and any Kibana ones that are considered global
 @import 'src/legacy/ui/public/styles/styling_constants';
 
-// ML needs EUI card styling till it fully adopts React components
-@import '@elastic/eui/src/components/panel/variables';
-@import '@elastic/eui/src/components/panel/mixins';
-
 // ML has it's own variables for coloring
 @import 'application/variables';
 
@@ -16,7 +12,6 @@
 // Protect the rest of Kibana from ML generic namespacing
 // SASSTODO: Prefix ml selectors instead
 #ml-app {
-
   // App level
   @import 'application/app';
 
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index bf309c65556a8..6ebc43bb92737 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -40,6 +40,7 @@ Array [
           <div
             class="euiFormRow euiFormRow--fullWidth"
             data-test-subj="remoteClusterFormNameFormRow"
+            id="mockId-row"
           >
             <div
               class="euiFormRow__labelWrapper"
@@ -117,6 +118,7 @@ Array [
           <div
             class="euiFormRow euiFormRow--fullWidth"
             data-test-subj="remoteClusterFormSeedNodesFormRow"
+            id="mockId-row"
           >
             <div
               class="euiFormRow__labelWrapper"
@@ -240,6 +242,7 @@ Array [
           <div
             class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--fullWidth remoteClusterSkipIfUnavailableSwitch"
             data-test-subj="remoteClusterFormSkipUnavailableFormRow"
+            id="mockId-row"
           >
             <div
               class="euiFormRow__fieldWrapper"
@@ -284,12 +287,12 @@ Array [
                     </span>
                   </span>
                 </button>
-                <p
+                <span
                   class="euiSwitch__label"
                   id="mockId"
                 >
                   Skip if unavailable
-                </p>
+                </span>
               </div>
             </div>
           </div>
@@ -367,6 +370,7 @@ Array [
   <div
     class="euiFormRow euiFormRow--fullWidth"
     data-test-subj="remoteClusterFormNameFormRow"
+    id="mockId-row"
   >
     <div
       class="euiFormRow__labelWrapper"
@@ -416,6 +420,7 @@ Array [
   <div
     class="euiFormRow euiFormRow--fullWidth"
     data-test-subj="remoteClusterFormSeedNodesFormRow"
+    id="mockId-row"
   >
     <div
       class="euiFormRow__labelWrapper"
@@ -499,6 +504,7 @@ Array [
   <div
     class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--fullWidth remoteClusterSkipIfUnavailableSwitch"
     data-test-subj="remoteClusterFormSkipUnavailableFormRow"
+    id="mockId-row"
   >
     <div
       class="euiFormRow__fieldWrapper"
@@ -543,12 +549,12 @@ Array [
             </span>
           </span>
         </button>
-        <p
+        <span
           class="euiSwitch__label"
           id="mockId"
         >
           Skip if unavailable
-        </p>
+        </span>
       </div>
     </div>
   </div>,
diff --git a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/_index.scss b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/_index.scss
index d36a587b9257f..5c35e9a23b8a1 100644
--- a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/_index.scss
+++ b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/_index.scss
@@ -1,5 +1,4 @@
 @import '@elastic/eui/src/components/header/variables';
-@import '@elastic/eui/src/components/panel/mixins';
 
 @import 'mixins';
 
@@ -16,7 +15,6 @@
   }
 }
 
-
 .prfDevTool__page {
   height: 100%;
   display: flex;
diff --git a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/containers/_main.scss b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/containers/_main.scss
index 09bcddef02cc3..6e2ef4a129397 100644
--- a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/containers/_main.scss
+++ b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/containers/_main.scss
@@ -1,4 +1,3 @@
-
 @include euiBreakpoint('xs', 's') {
   .prfDevTool__shardDetailsWrapper {
     flex-direction: column;
@@ -34,7 +33,8 @@
       font-size: $euiSize;
       color: $euiColorMediumShade;
     }
-    h1, p {
+    h1,
+    p {
       cursor: default;
       user-select: none;
     }
@@ -44,7 +44,7 @@
   }
 }
 
-@include euiPanel('prfDevTool__main');
+@include euiPanel('.prfDevTool__main');
 
 @include euiBreakpoint('xs', 's') {
   .prfDevTool__container {
@@ -59,4 +59,3 @@
     margin: $euiSize 0;
   }
 }
-
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index 526bb52c61afa..d149a33d3b20d 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "success": "#7de2d1",
           "warning": "#ffce7a",
         },
-        "euiCardGraphicHeight": "40px",
+        "euiCardBottomNodeHeight": "40px",
         "euiCardSelectButtonBackgrounds": Object {
           "danger": "#4d1f1f",
           "ghost": "#98a2b3",
@@ -116,7 +116,6 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "text": "#7de2d1",
         },
         "euiCardSpacing": "16px",
-        "euiCardTitleSize": "18px",
         "euiCheckBoxSize": "16px",
         "euiCodeBlockAdditionBackgroundColor": "#144212",
         "euiCodeBlockAdditionColor": "#e6e1dc",
@@ -290,7 +289,6 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiNavDrawerWidthCollapsed": "48px",
         "euiNavDrawerWidthExpanded": "240px",
         "euiPageBackgroundColor": "#1a1b20",
-        "euiPanelBorderColor": "#000000",
         "euiPanelPaddingModifiers": Object {
           "paddingLarge": "24px",
           "paddingMedium": "16px",
@@ -334,6 +332,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiScrollBar": "16px",
         "euiScrollBarCorner": "6px",
         "euiSelectableListItemBorder": "1px solid #202128",
+        "euiSelectableListItemPadding": "4px 12px",
         "euiShadowColor": "#000000",
         "euiShadowColorLarge": "#000000",
         "euiSize": "16px",
diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
index ddeb701c3ee31..f637c15553823 100644
--- a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "success": "#7de2d1",
           "warning": "#ffce7a",
         },
-        "euiCardGraphicHeight": "40px",
+        "euiCardBottomNodeHeight": "40px",
         "euiCardSelectButtonBackgrounds": Object {
           "danger": "#4d1f1f",
           "ghost": "#98a2b3",
@@ -116,7 +116,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "text": "#7de2d1",
         },
         "euiCardSpacing": "16px",
-        "euiCardTitleSize": "18px",
         "euiCheckBoxSize": "16px",
         "euiCodeBlockAdditionBackgroundColor": "#144212",
         "euiCodeBlockAdditionColor": "#e6e1dc",
@@ -290,7 +289,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiNavDrawerWidthCollapsed": "48px",
         "euiNavDrawerWidthExpanded": "240px",
         "euiPageBackgroundColor": "#1a1b20",
-        "euiPanelBorderColor": "#000000",
         "euiPanelPaddingModifiers": Object {
           "paddingLarge": "24px",
           "paddingMedium": "16px",
@@ -334,6 +332,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiScrollBar": "16px",
         "euiScrollBarCorner": "6px",
         "euiSelectableListItemBorder": "1px solid #202128",
+        "euiSelectableListItemPadding": "4px 12px",
         "euiShadowColor": "#000000",
         "euiShadowColorLarge": "#000000",
         "euiSize": "16px",
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/components/_confirm_delete_modal.scss b/x-pack/legacy/plugins/spaces/public/views/management/components/_confirm_delete_modal.scss
index 04bc51067d9df..887495a231485 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/components/_confirm_delete_modal.scss
+++ b/x-pack/legacy/plugins/spaces/public/views/management/components/_confirm_delete_modal.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 .spcConfirmDeleteModal {
-  max-width: $euiFormMaxWidth + ($euiSizeL*2);
+  max-width: $euiFormMaxWidth + ($euiSizeL * 2);
 }
diff --git a/x-pack/legacy/plugins/spaces/public/views/space_selector/_space_selector.scss b/x-pack/legacy/plugins/spaces/public/views/space_selector/_space_selector.scss
index 3fd2f91b25f4a..cfa2fd650e83b 100644
--- a/x-pack/legacy/plugins/spaces/public/views/space_selector/_space_selector.scss
+++ b/x-pack/legacy/plugins/spaces/public/views/space_selector/_space_selector.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 .spcSpaceSelector {
   @include kibanaFullScreenGraphics;
 }
@@ -27,7 +25,6 @@
   @include euiBottomShadowMedium;
 }
 
-
 .spcSpaceSelector__searchHolder {
   width: $euiFormMaxWidth; // make sure it's as wide as our default form element width
   max-width: 100%;
diff --git a/x-pack/package.json b/x-pack/package.json
index 075a7867b4720..74e6341acc675 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -176,7 +176,7 @@
     "@babel/runtime": "^7.5.5",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "1.0.5",
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.1.0",
     "@elastic/node-crypto": "^1.0.0",
diff --git a/x-pack/test/functional/page_objects/upgrade_assistant.js b/x-pack/test/functional/page_objects/upgrade_assistant.js
index c6977b2150840..fc6faed170c9f 100644
--- a/x-pack/test/functional/page_objects/upgrade_assistant.js
+++ b/x-pack/test/functional/page_objects/upgrade_assistant.js
@@ -45,7 +45,7 @@ export function UpgradeAssistantProvider({ getService, getPageObjects }) {
     async expectDeprecationLoggingLabel(labelText) {
       return await retry.try(async () => {
         log.debug('expectDeprecationLoggingLabel()');
-        const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ p');
+        const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ span');
         const value = await label.getVisibleText();
         expect(value).to.equal(labelText);
       });
diff --git a/yarn.lock b/yarn.lock
index 57249563f4566..6df7ab3d4243d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1226,10 +1226,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@16.1.0":
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-16.1.0.tgz#b8311a4dd3146da2fcd8cec6ae1ed46e26f90746"
-  integrity sha512-WbfIc2RGojrUeYyEIjiQ0Cy4xbk6YJ6eQ+ymFHSDGqwkKy5IidSBZIDNLM13LzAhxBFTAMmfVsk4lB2qiFlolQ==
+"@elastic/eui@17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-17.0.0.tgz#2b53500b9f4849fdf58f88ea89e10a0b58836acc"
+  integrity sha512-bWTVKbChPGh7AHLxW1o9yp7O3hL9lTVj69DVaaLBOz9K0JnDrWZ5VDvWL9AAguFWq9OEMY9oWjyBhQZr1ZeZbA==
   dependencies:
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"