diff --git a/docs/development/core/public/kibana-plugin-public.chromenavlink.disablesuburltracking.md b/docs/development/core/public/kibana-plugin-public.chromenavlink.disablesuburltracking.md
index 0054adc693dc3e..9182137e10c18f 100644
--- a/docs/development/core/public/kibana-plugin-public.chromenavlink.disablesuburltracking.md
+++ b/docs/development/core/public/kibana-plugin-public.chromenavlink.disablesuburltracking.md
@@ -1,17 +1,17 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [ChromeNavLink](./kibana-plugin-public.chromenavlink.md) &gt; [disableSubUrlTracking](./kibana-plugin-public.chromenavlink.disablesuburltracking.md)
-
-## ChromeNavLink.disableSubUrlTracking property
-
-> Warning: This API is now obsolete.
-> 
-> 
-
-A flag that tells legacy chrome to ignore the link when tracking sub-urls
-
-<b>Signature:</b>
-
-```typescript
-readonly disableSubUrlTracking?: boolean;
-```
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [ChromeNavLink](./kibana-plugin-public.chromenavlink.md) &gt; [disableSubUrlTracking](./kibana-plugin-public.chromenavlink.disablesuburltracking.md)
+
+## ChromeNavLink.disableSubUrlTracking property
+
+> Warning: This API is now obsolete.
+> 
+> 
+
+A flag that tells legacy chrome to ignore the link when tracking sub-urls
+
+<b>Signature:</b>
+
+```typescript
+readonly disableSubUrlTracking?: boolean;
+```
diff --git a/docs/development/core/public/kibana-plugin-public.chromenavlink.md b/docs/development/core/public/kibana-plugin-public.chromenavlink.md
index 810e520badf47e..b532c11ac08daf 100644
--- a/docs/development/core/public/kibana-plugin-public.chromenavlink.md
+++ b/docs/development/core/public/kibana-plugin-public.chromenavlink.md
@@ -1,33 +1,33 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [ChromeNavLink](./kibana-plugin-public.chromenavlink.md)
-
-## ChromeNavLink interface
-
-
-<b>Signature:</b>
-
-```typescript
-export interface ChromeNavLink 
-```
-
-## Properties
-
-|  Property | Type | Description |
-|  --- | --- | --- |
-|  [active](./kibana-plugin-public.chromenavlink.active.md) | <code>boolean</code> | Indicates whether or not this app is currently on the screen. |
-|  [baseUrl](./kibana-plugin-public.chromenavlink.baseurl.md) | <code>string</code> | The base route used to open the root of an application. |
-|  [category](./kibana-plugin-public.chromenavlink.category.md) | <code>AppCategory</code> | The category the app lives in |
-|  [disabled](./kibana-plugin-public.chromenavlink.disabled.md) | <code>boolean</code> | Disables a link from being clickable. |
-|  [disableSubUrlTracking](./kibana-plugin-public.chromenavlink.disablesuburltracking.md) | <code>boolean</code> | A flag that tells legacy chrome to ignore the link when tracking sub-urls |
-|  [euiIconType](./kibana-plugin-public.chromenavlink.euiicontype.md) | <code>string</code> | A EUI iconType that will be used for the app's icon. This icon takes precendence over the <code>icon</code> property. |
-|  [hidden](./kibana-plugin-public.chromenavlink.hidden.md) | <code>boolean</code> | Hides a link from the navigation. |
-|  [icon](./kibana-plugin-public.chromenavlink.icon.md) | <code>string</code> | A URL to an image file used as an icon. Used as a fallback if <code>euiIconType</code> is not provided. |
-|  [id](./kibana-plugin-public.chromenavlink.id.md) | <code>string</code> | A unique identifier for looking up links. |
-|  [linkToLastSubUrl](./kibana-plugin-public.chromenavlink.linktolastsuburl.md) | <code>boolean</code> | Whether or not the subUrl feature should be enabled. |
-|  [order](./kibana-plugin-public.chromenavlink.order.md) | <code>number</code> | An ordinal used to sort nav links relative to one another for display. |
-|  [subUrlBase](./kibana-plugin-public.chromenavlink.suburlbase.md) | <code>string</code> | A url base that legacy apps can set to match deep URLs to an application. |
-|  [title](./kibana-plugin-public.chromenavlink.title.md) | <code>string</code> | The title of the application. |
-|  [tooltip](./kibana-plugin-public.chromenavlink.tooltip.md) | <code>string</code> | A tooltip shown when hovering over an app link. |
-|  [url](./kibana-plugin-public.chromenavlink.url.md) | <code>string</code> | A url that legacy apps can set to deep link into their applications. |
-
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [ChromeNavLink](./kibana-plugin-public.chromenavlink.md)
+
+## ChromeNavLink interface
+
+
+<b>Signature:</b>
+
+```typescript
+export interface ChromeNavLink 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [active](./kibana-plugin-public.chromenavlink.active.md) | <code>boolean</code> | Indicates whether or not this app is currently on the screen. |
+|  [baseUrl](./kibana-plugin-public.chromenavlink.baseurl.md) | <code>string</code> | The base route used to open the root of an application. |
+|  [category](./kibana-plugin-public.chromenavlink.category.md) | <code>AppCategory</code> | The category the app lives in |
+|  [disabled](./kibana-plugin-public.chromenavlink.disabled.md) | <code>boolean</code> | Disables a link from being clickable. |
+|  [disableSubUrlTracking](./kibana-plugin-public.chromenavlink.disablesuburltracking.md) | <code>boolean</code> | A flag that tells legacy chrome to ignore the link when tracking sub-urls |
+|  [euiIconType](./kibana-plugin-public.chromenavlink.euiicontype.md) | <code>string</code> | A EUI iconType that will be used for the app's icon. This icon takes precendence over the <code>icon</code> property. |
+|  [hidden](./kibana-plugin-public.chromenavlink.hidden.md) | <code>boolean</code> | Hides a link from the navigation. |
+|  [icon](./kibana-plugin-public.chromenavlink.icon.md) | <code>string</code> | A URL to an image file used as an icon. Used as a fallback if <code>euiIconType</code> is not provided. |
+|  [id](./kibana-plugin-public.chromenavlink.id.md) | <code>string</code> | A unique identifier for looking up links. |
+|  [linkToLastSubUrl](./kibana-plugin-public.chromenavlink.linktolastsuburl.md) | <code>boolean</code> | Whether or not the subUrl feature should be enabled. |
+|  [order](./kibana-plugin-public.chromenavlink.order.md) | <code>number</code> | An ordinal used to sort nav links relative to one another for display. |
+|  [subUrlBase](./kibana-plugin-public.chromenavlink.suburlbase.md) | <code>string</code> | A url base that legacy apps can set to match deep URLs to an application. |
+|  [title](./kibana-plugin-public.chromenavlink.title.md) | <code>string</code> | The title of the application. |
+|  [tooltip](./kibana-plugin-public.chromenavlink.tooltip.md) | <code>string</code> | A tooltip shown when hovering over an app link. |
+|  [url](./kibana-plugin-public.chromenavlink.url.md) | <code>string</code> | A url that legacy apps can set to deep link into their applications. |
+
diff --git a/package.json b/package.json
index 26138ac4c539c7..48bd2a0caf4aa6 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
     "@elastic/charts": "^16.1.0",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index 47a47449927e49..ea15d2e34ea3a9 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --watch"
   },
   "devDependencies": {
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.3.0",
     "@elastic/charts": "^16.1.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",
diff --git a/src/core/public/chrome/ui/header/__snapshots__/nav_drawer.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/nav_drawer.test.tsx.snap
index 0ebc44ba67862a..cf3b48f237286b 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/nav_drawer.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/nav_drawer.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
       Object {
         "baseUrl": "http://localhost:5601/app/siem",
         "category": Object {
+          "euiIconType": "logoSecurity",
           "label": "Security",
           "order": 3000,
         },
@@ -36,6 +37,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
       Object {
         "baseUrl": "http://localhost:5601/app/metrics",
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -90,6 +92,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
       Object {
         "baseUrl": "http://localhost:5601/app/logs",
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -120,6 +123,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
       },
       Object {
         "category": Object {
+          "euiIconType": "logoSecurity",
           "label": "Security",
           "order": 3000,
         },
@@ -136,6 +140,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
       },
       Object {
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -215,6 +220,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
       },
       Object {
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -390,7 +396,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                             "listItems": Array [],
                             "title": "Recent items",
                           },
-                          "iconType": "clock",
+                          "iconType": "recentlyViewedApp",
                           "isDisabled": true,
                           "label": "Recently viewed",
                         },
@@ -408,7 +414,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                             "aria-label": "Recently viewed",
                             "className": "euiNavDrawerGroup__item",
                             "data-name": "Recently viewed",
-                            "iconType": "clock",
+                            "iconType": "recentlyViewedApp",
                             "isDisabled": true,
                             "label": "Recently viewed",
                             "onClick": [Function],
@@ -427,7 +433,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                           aria-label="Recently viewed"
                           className="euiNavDrawerGroup__item"
                           data-name="Recently viewed"
-                          iconType="clock"
+                          iconType="recentlyViewedApp"
                           isDisabled={true}
                           key="title-0"
                           label="Recently viewed"
@@ -463,18 +469,18 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                                 >
                                   <EuiIcon
                                     className="euiListGroupItem__icon"
-                                    type="clock"
+                                    type="recentlyViewedApp"
                                   >
                                     <EuiIconEmpty
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                      className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                       focusable="false"
                                       role="img"
                                       style={null}
                                     >
                                       <svg
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                        className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                         focusable="false"
                                         height={16}
                                         role="img"
@@ -577,6 +583,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                             "listItems": Array [
                               Object {
                                 "category": Object {
+                                  "euiIconType": "logoObservability",
                                   "label": "Observability",
                                   "order": 2000,
                                 },
@@ -593,6 +600,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                               },
                               Object {
                                 "category": Object {
+                                  "euiIconType": "logoObservability",
                                   "label": "Observability",
                                   "order": 2000,
                                 },
@@ -610,18 +618,19 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                             ],
                             "title": "Observability",
                           },
-                          "iconType": undefined,
+                          "iconType": "logoObservability",
                           "label": "Observability",
                         },
                         Object {
                           "category": Object {
+                            "euiIconType": "logoSecurity",
                             "label": "Security",
                             "order": 3000,
                           },
                           "data-test-subj": "navDrawerAppsMenuLink",
                           "href": "http://localhost:5601/app/siem",
                           "icon": undefined,
-                          "iconType": undefined,
+                          "iconType": "logoSecurity",
                           "isActive": false,
                           "isDisabled": undefined,
                           "key": "siem",
@@ -676,12 +685,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                             "className": "euiNavDrawerGroup__item",
                             "data-name": "Observability",
                             "data-test-subj": "navDrawerCategory",
-                            "icon": <span
-                              className="euiNavDrawerGroup__itemDefaultIcon"
-                            >
-                              O
-                            </span>,
-                            "iconType": undefined,
+                            "iconType": "logoObservability",
                             "label": "Observability",
                             "onClick": [Function],
                             "size": "s",
@@ -689,6 +693,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                           Object {
                             "aria-label": "Security",
                             "category": Object {
+                              "euiIconType": "logoSecurity",
                               "label": "Security",
                               "order": 3000,
                             },
@@ -696,12 +701,8 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                             "data-name": "Security",
                             "data-test-subj": "navDrawerAppsMenuLink",
                             "href": "http://localhost:5601/app/siem",
-                            "icon": <span
-                              className="euiNavDrawerGroup__itemDefaultIcon"
-                            >
-                              S
-                            </span>,
-                            "iconType": undefined,
+                            "icon": undefined,
+                            "iconType": "logoSecurity",
                             "isActive": false,
                             "isDisabled": undefined,
                             "key": "siem",
@@ -809,13 +810,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                           className="euiNavDrawerGroup__item"
                           data-name="Observability"
                           data-test-subj="navDrawerCategory"
-                          icon={
-                            <span
-                              className="euiNavDrawerGroup__itemDefaultIcon"
-                            >
-                              O
-                            </span>
-                          }
+                          iconType="logoObservability"
                           key="title-1"
                           label="Observability"
                           onClick={[Function]}
@@ -849,11 +844,30 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                                   onFocus={[Function]}
                                   type="button"
                                 >
-                                  <span
-                                    className="euiListGroupItem__icon euiNavDrawerGroup__itemDefaultIcon"
+                                  <EuiIcon
+                                    className="euiListGroupItem__icon"
+                                    type="logoObservability"
                                   >
-                                    O
-                                  </span>
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
                                   <span
                                     className="euiListGroupItem__label"
                                   >
@@ -868,6 +882,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                           aria-label="Security"
                           category={
                             Object {
+                              "euiIconType": "logoSecurity",
                               "label": "Security",
                               "order": 3000,
                             }
@@ -876,13 +891,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                           data-name="Security"
                           data-test-subj="navDrawerAppsMenuLink"
                           href="http://localhost:5601/app/siem"
-                          icon={
-                            <span
-                              className="euiNavDrawerGroup__itemDefaultIcon"
-                            >
-                              S
-                            </span>
-                          }
+                          iconType="logoSecurity"
                           isActive={false}
                           key="siem"
                           label="Security"
@@ -910,6 +919,7 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                                   aria-label="Security"
                                   category={
                                     Object {
+                                      "euiIconType": "logoSecurity",
                                       "label": "Security",
                                       "order": 3000,
                                     }
@@ -923,11 +933,30 @@ exports[`NavDrawer Advanced setting set to grouped renders grouped items 1`] = `
                                   onFocus={[Function]}
                                   order={500}
                                 >
-                                  <span
-                                    className="euiListGroupItem__icon euiNavDrawerGroup__itemDefaultIcon"
+                                  <EuiIcon
+                                    className="euiListGroupItem__icon"
+                                    type="logoSecurity"
                                   >
-                                    S
-                                  </span>
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
                                   <span
                                     className="euiListGroupItem__label"
                                   >
@@ -1222,6 +1251,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
       Object {
         "baseUrl": "http://localhost:5601/app/siem",
         "category": Object {
+          "euiIconType": "logoSecurity",
           "label": "Security",
           "order": 3000,
         },
@@ -1233,6 +1263,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
       Object {
         "baseUrl": "http://localhost:5601/app/metrics",
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -1285,6 +1316,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
       },
       Object {
         "category": Object {
+          "euiIconType": "logoSecurity",
           "label": "Security",
           "order": 3000,
         },
@@ -1301,6 +1333,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
       },
       Object {
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -1508,7 +1541,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                             "listItems": Array [],
                             "title": "Recent items",
                           },
-                          "iconType": "clock",
+                          "iconType": "recentlyViewedApp",
                           "isDisabled": true,
                           "label": "Recently viewed",
                         },
@@ -1526,7 +1559,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                             "aria-label": "Recently viewed",
                             "className": "euiNavDrawerGroup__item",
                             "data-name": "Recently viewed",
-                            "iconType": "clock",
+                            "iconType": "recentlyViewedApp",
                             "isDisabled": true,
                             "label": "Recently viewed",
                             "onClick": [Function],
@@ -1545,7 +1578,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                           aria-label="Recently viewed"
                           className="euiNavDrawerGroup__item"
                           data-name="Recently viewed"
-                          iconType="clock"
+                          iconType="recentlyViewedApp"
                           isDisabled={true}
                           key="title-0"
                           label="Recently viewed"
@@ -1581,18 +1614,18 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                                 >
                                   <EuiIcon
                                     className="euiListGroupItem__icon"
-                                    type="clock"
+                                    type="recentlyViewedApp"
                                   >
                                     <EuiIconEmpty
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                      className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                       focusable="false"
                                       role="img"
                                       style={null}
                                     >
                                       <svg
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                        className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                         focusable="false"
                                         height={16}
                                         role="img"
@@ -1649,6 +1682,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                         },
                         Object {
                           "category": Object {
+                            "euiIconType": "logoSecurity",
                             "label": "Security",
                             "order": 3000,
                           },
@@ -1665,6 +1699,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                         },
                         Object {
                           "category": Object {
+                            "euiIconType": "logoObservability",
                             "label": "Observability",
                             "order": 2000,
                           },
@@ -1748,6 +1783,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                           Object {
                             "aria-label": "siem",
                             "category": Object {
+                              "euiIconType": "logoSecurity",
                               "label": "Security",
                               "order": 3000,
                             },
@@ -1772,6 +1808,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                           Object {
                             "aria-label": "metrics",
                             "category": Object {
+                              "euiIconType": "logoObservability",
                               "label": "Observability",
                               "order": 2000,
                             },
@@ -1928,6 +1965,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                           aria-label="siem"
                           category={
                             Object {
+                              "euiIconType": "logoSecurity",
                               "label": "Security",
                               "order": 3000,
                             }
@@ -1970,6 +2008,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                                   aria-label="siem"
                                   category={
                                     Object {
+                                      "euiIconType": "logoSecurity",
                                       "label": "Security",
                                       "order": 3000,
                                     }
@@ -2002,6 +2041,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                           aria-label="metrics"
                           category={
                             Object {
+                              "euiIconType": "logoObservability",
                               "label": "Observability",
                               "order": 2000,
                             }
@@ -2044,6 +2084,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                                   aria-label="metrics"
                                   category={
                                     Object {
+                                      "euiIconType": "logoObservability",
                                       "label": "Observability",
                                       "order": 2000,
                                     }
@@ -2651,7 +2692,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                             "listItems": Array [],
                             "title": "Recent items",
                           },
-                          "iconType": "clock",
+                          "iconType": "recentlyViewedApp",
                           "isDisabled": true,
                           "label": "Recently viewed",
                         },
@@ -2669,7 +2710,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                             "aria-label": "Recently viewed",
                             "className": "euiNavDrawerGroup__item",
                             "data-name": "Recently viewed",
-                            "iconType": "clock",
+                            "iconType": "recentlyViewedApp",
                             "isDisabled": true,
                             "label": "Recently viewed",
                             "onClick": [Function],
@@ -2688,7 +2729,7 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                           aria-label="Recently viewed"
                           className="euiNavDrawerGroup__item"
                           data-name="Recently viewed"
-                          iconType="clock"
+                          iconType="recentlyViewedApp"
                           isDisabled={true}
                           key="title-0"
                           label="Recently viewed"
@@ -2724,18 +2765,18 @@ exports[`NavDrawer Advanced setting set to grouped renders individual items if t
                                 >
                                   <EuiIcon
                                     className="euiListGroupItem__icon"
-                                    type="clock"
+                                    type="recentlyViewedApp"
                                   >
                                     <EuiIconEmpty
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                      className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                       focusable="false"
                                       role="img"
                                       style={null}
                                     >
                                       <svg
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                        className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                         focusable="false"
                                         height={16}
                                         role="img"
@@ -3769,6 +3810,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
       Object {
         "baseUrl": "http://localhost:5601/app/siem",
         "category": Object {
+          "euiIconType": "logoSecurity",
           "label": "Security",
           "order": 3000,
         },
@@ -3780,6 +3822,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
       Object {
         "baseUrl": "http://localhost:5601/app/metrics",
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -3834,6 +3877,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
       Object {
         "baseUrl": "http://localhost:5601/app/logs",
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -3864,6 +3908,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
       },
       Object {
         "category": Object {
+          "euiIconType": "logoSecurity",
           "label": "Security",
           "order": 3000,
         },
@@ -3880,6 +3925,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
       },
       Object {
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -3959,6 +4005,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
       },
       Object {
         "category": Object {
+          "euiIconType": "logoObservability",
           "label": "Observability",
           "order": 2000,
         },
@@ -4134,7 +4181,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                             "listItems": Array [],
                             "title": "Recent items",
                           },
-                          "iconType": "clock",
+                          "iconType": "recentlyViewedApp",
                           "isDisabled": true,
                           "label": "Recently viewed",
                         },
@@ -4152,7 +4199,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                             "aria-label": "Recently viewed",
                             "className": "euiNavDrawerGroup__item",
                             "data-name": "Recently viewed",
-                            "iconType": "clock",
+                            "iconType": "recentlyViewedApp",
                             "isDisabled": true,
                             "label": "Recently viewed",
                             "onClick": [Function],
@@ -4171,7 +4218,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                           aria-label="Recently viewed"
                           className="euiNavDrawerGroup__item"
                           data-name="Recently viewed"
-                          iconType="clock"
+                          iconType="recentlyViewedApp"
                           isDisabled={true}
                           key="title-0"
                           label="Recently viewed"
@@ -4207,18 +4254,18 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                                 >
                                   <EuiIcon
                                     className="euiListGroupItem__icon"
-                                    type="clock"
+                                    type="recentlyViewedApp"
                                   >
                                     <EuiIconEmpty
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                      className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                       focusable="false"
                                       role="img"
                                       style={null}
                                     >
                                       <svg
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiListGroupItem__icon"
+                                        className="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoading euiListGroupItem__icon"
                                         focusable="false"
                                         height={16}
                                         role="img"
@@ -4275,6 +4322,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                         },
                         Object {
                           "category": Object {
+                            "euiIconType": "logoSecurity",
                             "label": "Security",
                             "order": 3000,
                           },
@@ -4291,6 +4339,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                         },
                         Object {
                           "category": Object {
+                            "euiIconType": "logoObservability",
                             "label": "Observability",
                             "order": 2000,
                           },
@@ -4370,6 +4419,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                         },
                         Object {
                           "category": Object {
+                            "euiIconType": "logoObservability",
                             "label": "Observability",
                             "order": 2000,
                           },
@@ -4421,6 +4471,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                           Object {
                             "aria-label": "siem",
                             "category": Object {
+                              "euiIconType": "logoSecurity",
                               "label": "Security",
                               "order": 3000,
                             },
@@ -4445,6 +4496,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                           Object {
                             "aria-label": "metrics",
                             "category": Object {
+                              "euiIconType": "logoObservability",
                               "label": "Observability",
                               "order": 2000,
                             },
@@ -4564,6 +4616,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                           Object {
                             "aria-label": "logs",
                             "category": Object {
+                              "euiIconType": "logoObservability",
                               "label": "Observability",
                               "order": 2000,
                             },
@@ -4672,6 +4725,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                           aria-label="siem"
                           category={
                             Object {
+                              "euiIconType": "logoSecurity",
                               "label": "Security",
                               "order": 3000,
                             }
@@ -4714,6 +4768,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                                   aria-label="siem"
                                   category={
                                     Object {
+                                      "euiIconType": "logoSecurity",
                                       "label": "Security",
                                       "order": 3000,
                                     }
@@ -4746,6 +4801,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                           aria-label="metrics"
                           category={
                             Object {
+                              "euiIconType": "logoObservability",
                               "label": "Observability",
                               "order": 2000,
                             }
@@ -4788,6 +4844,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                                   aria-label="metrics"
                                   category={
                                     Object {
+                                      "euiIconType": "logoObservability",
                                       "label": "Observability",
                                       "order": 2000,
                                     }
@@ -5114,6 +5171,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                           aria-label="logs"
                           category={
                             Object {
+                              "euiIconType": "logoObservability",
                               "label": "Observability",
                               "order": 2000,
                             }
@@ -5156,6 +5214,7 @@ exports[`NavDrawer Advanced setting set to individual renders individual items 1
                                   aria-label="logs"
                                   category={
                                     Object {
+                                      "euiIconType": "logoObservability",
                                       "label": "Observability",
                                       "order": 2000,
                                     }
diff --git a/src/core/public/chrome/ui/header/recent_links.tsx b/src/core/public/chrome/ui/header/recent_links.tsx
index a947ab1c450563..57cb1d9541bcd1 100644
--- a/src/core/public/chrome/ui/header/recent_links.tsx
+++ b/src/core/public/chrome/ui/header/recent_links.tsx
@@ -95,7 +95,7 @@ export function RecentLinks({ recentlyAccessedItems, navLinks, basePath }: Props
           label: i18n.translate('core.ui.chrome.sideGlobalNav.viewRecentItemsLabel', {
             defaultMessage: 'Recently viewed',
           }),
-          iconType: 'clock',
+          iconType: 'recentlyViewedApp',
           isDisabled: recentlyAccessedItems.length === 0,
           flyoutMenu: {
             title: i18n.translate('core.ui.chrome.sideGlobalNav.viewRecentItemsFlyoutTitle', {
diff --git a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
index 7eaa1c3af2079b..ca044aa5c111fa 100644
--- a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
+++ b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
@@ -14,7 +14,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiConfirmModal
-          buttonColor="primary"
           cancelButtonText="Cancel"
           confirmButtonText="Confirm"
           onCancel={[Function]}
@@ -40,7 +39,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiConfirmModal
-          buttonColor="primary"
           cancelButtonText="Cancel"
           confirmButtonText="Confirm"
           onCancel={[Function]}
@@ -63,7 +61,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiConfirmModal
-          buttonColor="primary"
           cancelButtonText="Cancel"
           confirmButtonText="Confirm"
           onCancel={[Function]}
@@ -79,7 +76,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiConfirmModal
-          buttonColor="primary"
           cancelButtonText="Cancel"
           confirmButtonText="Confirm"
           onCancel={[Function]}
@@ -100,7 +96,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiModal
-          maxWidth={true}
           onClose={[Function]}
         >
           <MountWrapper
@@ -116,7 +111,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiConfirmModal
-          buttonColor="primary"
           cancelButtonText="Cancel"
           confirmButtonText="Confirm"
           onCancel={[Function]}
@@ -137,7 +131,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiModal
-          maxWidth={true}
           onClose={[Function]}
         >
           <MountWrapper
@@ -160,7 +153,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiConfirmModal
-          buttonColor="primary"
           cancelButtonText="Cancel"
           confirmButtonText="Confirm"
           onCancel={[Function]}
@@ -176,7 +168,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiConfirmModal
-          buttonColor="primary"
           cancelButtonText="Cancel"
           confirmButtonText="Confirm"
           onCancel={[Function]}
@@ -197,7 +188,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiModal
-          maxWidth={true}
           onClose={[Function]}
         >
           <MountWrapper
@@ -213,7 +203,6 @@ Array [
     <EuiOverlayMask>
       <mockConstructor>
         <EuiModal
-          maxWidth={true}
           onClose={[Function]}
         >
           <MountWrapper
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index 8517166ee00e62..91b4e9be58973a 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -431,11 +431,13 @@ export const DEFAULT_APP_CATEGORIES: Readonly<{
     };
     observability: {
         label: string;
+        euiIconType: string;
         order: number;
     };
     security: {
         label: string;
         order: number;
+        euiIconType: string;
     };
     management: {
         label: string;
diff --git a/src/core/utils/default_app_categories.ts b/src/core/utils/default_app_categories.ts
index 3e3cc2fef2a229..2285bd6afd3651 100644
--- a/src/core/utils/default_app_categories.ts
+++ b/src/core/utils/default_app_categories.ts
@@ -31,6 +31,7 @@ export const DEFAULT_APP_CATEGORIES = Object.freeze({
     label: i18n.translate('core.ui.observabilityNavList.label', {
       defaultMessage: 'Observability',
     }),
+    euiIconType: 'logoObservability',
     order: 2000,
   },
   security: {
@@ -38,6 +39,7 @@ export const DEFAULT_APP_CATEGORIES = Object.freeze({
       defaultMessage: 'Security',
     }),
     order: 3000,
+    euiIconType: 'logoSecurity',
   },
   management: {
     label: i18n.translate('core.ui.managementNavList.label', {
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap
index e76f65c45e4286..f5a00e5435ed6c 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap
@@ -5,7 +5,6 @@ exports[`renders DashboardCloneModal 1`] = `
   <EuiModal
     className="dshCloneModal"
     data-test-subj="dashboardCloneModal"
-    maxWidth={true}
     onClose={[Function]}
   >
     <EuiModalHeader>
diff --git a/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/add_data.test.js.snap b/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/add_data.test.js.snap
index 35a7216df8bc6c..fcc7e75276154f 100644
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/add_data.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/add_data.test.js.snap
@@ -4,143 +4,190 @@ exports[`apmUiEnabled 1`] = `
 <EuiPanel
   paddingSize="l"
 >
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiTitle>
-        <h2>
-          <FormattedMessage
-            defaultMessage="Add Data to Kibana"
-            id="kbn.home.addData.addDataToKibanaTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
-      <EuiText
-        size="s"
-      >
-        <p>
-          <FormattedMessage
-            defaultMessage="Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems."
-            id="kbn.home.addData.addDataToKibanaDescription"
-            values={Object {}}
-          />
-        </p>
-      </EuiText>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer />
   <EuiFlexGroup
-    className="homeAddData__flexGroup"
+    className="homeAddData__flexGroup homAddData__flexTablet"
     gutterSize="l"
     justifyContent="spaceAround"
     responsive={false}
     wrap={true}
   >
     <EuiFlexItem
-      grow={false}
+      className="homAddData__cardDivider homAddData__flexItem"
+      grow={3}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addAmpButtonLabel"
-          >
-            APM automatically collects in-depth performance metrics and errors from inside your applications.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addAmpButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial/apm"
-          >
-            <FormattedMessage
-              defaultMessage="Add APM"
-              id="kbn.home.addData.apm.addApmButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiSpacer
+        size="m"
+      />
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoAPM"
+            className="homAddData__logo"
+            size="xl"
+            type="logoObservability"
           />
-        }
-        title="APM"
-      />
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addLogDataButtonLabel"
-          >
-            Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addLogDataButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/logging"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
           >
-            <FormattedMessage
-              defaultMessage="Add log data"
-              id="kbn.home.addData.logging.addLogDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
-          <EuiIcon
-            className="homAddData__icon"
-            type="logoLogging"
+            <h2>
+              <FormattedMessage
+                defaultMessage="Observability"
+                id="kbn.home.addData.title.observability"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiFlexGroup
+        className="homeAddData__flexGroup"
+        gutterSize="l"
+        justifyContent="spaceAround"
+        responsive={false}
+        wrap={true}
+      >
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addAmpButtonLabel"
+              >
+                APM automatically collects in-depth performance metrics and errors from inside your applications.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addAmpButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial/apm"
+              >
+                <FormattedMessage
+                  defaultMessage="Add APM"
+                  id="kbn.home.addData.apm.addApmButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="APM"
+            titleSize="xs"
           />
-        }
-        title="Logs"
-      />
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addLogDataButtonLabel"
+              >
+                Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addLogDataButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/logging"
+              >
+                <FormattedMessage
+                  defaultMessage="Add log data"
+                  id="kbn.home.addData.logging.addLogDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Logs"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addMetricsButtonLabel"
+              >
+                Collect metrics from the operating system and services running on your servers.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addMetricsButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/metrics"
+              >
+                <FormattedMessage
+                  defaultMessage="Add metric data"
+                  id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Metrics"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFlexItem>
     <EuiFlexItem
-      grow={false}
+      className="homAddData__flexItem"
+      grow={1}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addMetricsButtonLabel"
-          >
-            Collect metrics from the operating system and services running on your servers.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addMetricsButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/metrics"
-          >
-            <FormattedMessage
-              defaultMessage="Add metric data"
-              id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoMetrics"
+            className="homAddData__logo"
+            size="xl"
+            type="logoSecurity"
           />
-        }
-        title="Metrics"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
+          >
+            <h2>
+              <FormattedMessage
+                defaultMessage="Security"
+                id="kbn.home.addData.title.security"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
       />
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
       <EuiCard
         className="homAddData__card"
         description={
@@ -157,19 +204,15 @@ exports[`apmUiEnabled 1`] = `
             href="#/home/tutorial_directory/siem"
           >
             <FormattedMessage
-              defaultMessage="Add security events"
+              defaultMessage="Add events"
               id="kbn.home.addData.siem.addSiemEventsButtonLabel"
               values={Object {}}
             />
           </EuiButton>
         }
-        icon={
-          <EuiIcon
-            className="homAddData__icon"
-            type="logoSecurity"
-          />
-        }
+        textAlign="left"
         title="SIEM"
+        titleSize="xs"
       />
     </EuiFlexItem>
   </EuiFlexGroup>
@@ -257,109 +300,159 @@ exports[`isNewKibanaInstance 1`] = `
 <EuiPanel
   paddingSize="l"
 >
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiTitle>
-        <h2>
-          <FormattedMessage
-            defaultMessage="Add Data to Kibana"
-            id="kbn.home.addData.addDataToKibanaTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
-      <EuiText
-        size="s"
-      >
-        <p>
-          <FormattedMessage
-            defaultMessage="Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems."
-            id="kbn.home.addData.addDataToKibanaDescription"
-            values={Object {}}
-          />
-        </p>
-      </EuiText>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer />
   <EuiFlexGroup
-    className="homeAddData__flexGroup"
+    className="homeAddData__flexGroup homAddData__flexTablet"
     gutterSize="l"
     justifyContent="spaceAround"
     responsive={false}
     wrap={false}
   >
     <EuiFlexItem
-      grow={false}
+      className="homAddData__cardDivider homAddData__flexItem"
+      grow={3}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addLogDataButtonLabel"
-          >
-            Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addLogDataButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/logging"
-          >
-            <FormattedMessage
-              defaultMessage="Add log data"
-              id="kbn.home.addData.logging.addLogDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiSpacer
+        size="m"
+      />
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoLogging"
+            className="homAddData__logo"
+            size="xl"
+            type="logoObservability"
           />
-        }
-        title="Logs"
-      />
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
+          >
+            <h2>
+              <FormattedMessage
+                defaultMessage="Observability"
+                id="kbn.home.addData.title.observability"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiFlexGroup
+        className="homeAddData__flexGroup"
+        gutterSize="l"
+        justifyContent="spaceAround"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addLogDataButtonLabel"
+              >
+                Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addLogDataButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/logging"
+              >
+                <FormattedMessage
+                  defaultMessage="Add log data"
+                  id="kbn.home.addData.logging.addLogDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Logs"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addMetricsButtonLabel"
+              >
+                Collect metrics from the operating system and services running on your servers.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addMetricsButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/metrics"
+              >
+                <FormattedMessage
+                  defaultMessage="Add metric data"
+                  id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Metrics"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFlexItem>
     <EuiFlexItem
-      grow={false}
+      className="homAddData__flexItem"
+      grow={1}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addMetricsButtonLabel"
-          >
-            Collect metrics from the operating system and services running on your servers.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addMetricsButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/metrics"
-          >
-            <FormattedMessage
-              defaultMessage="Add metric data"
-              id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoMetrics"
+            className="homAddData__logo"
+            size="xl"
+            type="logoSecurity"
           />
-        }
-        title="Metrics"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
+          >
+            <h2>
+              <FormattedMessage
+                defaultMessage="Security"
+                id="kbn.home.addData.title.security"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
       />
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
       <EuiCard
         className="homAddData__card"
         description={
@@ -376,19 +469,15 @@ exports[`isNewKibanaInstance 1`] = `
             href="#/home/tutorial_directory/siem"
           >
             <FormattedMessage
-              defaultMessage="Add security events"
+              defaultMessage="Add events"
               id="kbn.home.addData.siem.addSiemEventsButtonLabel"
               values={Object {}}
             />
           </EuiButton>
         }
-        icon={
-          <EuiIcon
-            className="homAddData__icon"
-            type="logoSecurity"
-          />
-        }
+        textAlign="left"
         title="SIEM"
+        titleSize="xs"
       />
     </EuiFlexItem>
   </EuiFlexGroup>
@@ -476,143 +565,190 @@ exports[`mlEnabled 1`] = `
 <EuiPanel
   paddingSize="l"
 >
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiTitle>
-        <h2>
-          <FormattedMessage
-            defaultMessage="Add Data to Kibana"
-            id="kbn.home.addData.addDataToKibanaTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
-      <EuiText
-        size="s"
-      >
-        <p>
-          <FormattedMessage
-            defaultMessage="Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems."
-            id="kbn.home.addData.addDataToKibanaDescription"
-            values={Object {}}
-          />
-        </p>
-      </EuiText>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer />
   <EuiFlexGroup
-    className="homeAddData__flexGroup"
+    className="homeAddData__flexGroup homAddData__flexTablet"
     gutterSize="l"
     justifyContent="spaceAround"
     responsive={false}
     wrap={true}
   >
     <EuiFlexItem
-      grow={false}
+      className="homAddData__cardDivider homAddData__flexItem"
+      grow={3}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addAmpButtonLabel"
-          >
-            APM automatically collects in-depth performance metrics and errors from inside your applications.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addAmpButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial/apm"
-          >
-            <FormattedMessage
-              defaultMessage="Add APM"
-              id="kbn.home.addData.apm.addApmButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiSpacer
+        size="m"
+      />
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoAPM"
+            className="homAddData__logo"
+            size="xl"
+            type="logoObservability"
           />
-        }
-        title="APM"
-      />
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addLogDataButtonLabel"
-          >
-            Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addLogDataButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/logging"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
           >
-            <FormattedMessage
-              defaultMessage="Add log data"
-              id="kbn.home.addData.logging.addLogDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
-          <EuiIcon
-            className="homAddData__icon"
-            type="logoLogging"
+            <h2>
+              <FormattedMessage
+                defaultMessage="Observability"
+                id="kbn.home.addData.title.observability"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiFlexGroup
+        className="homeAddData__flexGroup"
+        gutterSize="l"
+        justifyContent="spaceAround"
+        responsive={false}
+        wrap={true}
+      >
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addAmpButtonLabel"
+              >
+                APM automatically collects in-depth performance metrics and errors from inside your applications.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addAmpButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial/apm"
+              >
+                <FormattedMessage
+                  defaultMessage="Add APM"
+                  id="kbn.home.addData.apm.addApmButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="APM"
+            titleSize="xs"
           />
-        }
-        title="Logs"
-      />
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addLogDataButtonLabel"
+              >
+                Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addLogDataButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/logging"
+              >
+                <FormattedMessage
+                  defaultMessage="Add log data"
+                  id="kbn.home.addData.logging.addLogDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Logs"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addMetricsButtonLabel"
+              >
+                Collect metrics from the operating system and services running on your servers.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addMetricsButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/metrics"
+              >
+                <FormattedMessage
+                  defaultMessage="Add metric data"
+                  id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Metrics"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFlexItem>
     <EuiFlexItem
-      grow={false}
+      className="homAddData__flexItem"
+      grow={1}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addMetricsButtonLabel"
-          >
-            Collect metrics from the operating system and services running on your servers.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addMetricsButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/metrics"
-          >
-            <FormattedMessage
-              defaultMessage="Add metric data"
-              id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoMetrics"
+            className="homAddData__logo"
+            size="xl"
+            type="logoSecurity"
           />
-        }
-        title="Metrics"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
+          >
+            <h2>
+              <FormattedMessage
+                defaultMessage="Security"
+                id="kbn.home.addData.title.security"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
       />
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
       <EuiCard
         className="homAddData__card"
         description={
@@ -629,19 +765,15 @@ exports[`mlEnabled 1`] = `
             href="#/home/tutorial_directory/siem"
           >
             <FormattedMessage
-              defaultMessage="Add security events"
+              defaultMessage="Add events"
               id="kbn.home.addData.siem.addSiemEventsButtonLabel"
               values={Object {}}
             />
           </EuiButton>
         }
-        icon={
-          <EuiIcon
-            className="homAddData__icon"
-            type="logoSecurity"
-          />
-        }
+        textAlign="left"
         title="SIEM"
+        titleSize="xs"
       />
     </EuiFlexItem>
   </EuiFlexGroup>
@@ -765,109 +897,159 @@ exports[`render 1`] = `
 <EuiPanel
   paddingSize="l"
 >
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiTitle>
-        <h2>
-          <FormattedMessage
-            defaultMessage="Add Data to Kibana"
-            id="kbn.home.addData.addDataToKibanaTitle"
-            values={Object {}}
-          />
-        </h2>
-      </EuiTitle>
-      <EuiText
-        size="s"
-      >
-        <p>
-          <FormattedMessage
-            defaultMessage="Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems."
-            id="kbn.home.addData.addDataToKibanaDescription"
-            values={Object {}}
-          />
-        </p>
-      </EuiText>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer />
   <EuiFlexGroup
-    className="homeAddData__flexGroup"
+    className="homeAddData__flexGroup homAddData__flexTablet"
     gutterSize="l"
     justifyContent="spaceAround"
     responsive={false}
     wrap={false}
   >
     <EuiFlexItem
-      grow={false}
+      className="homAddData__cardDivider homAddData__flexItem"
+      grow={3}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addLogDataButtonLabel"
-          >
-            Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addLogDataButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/logging"
-          >
-            <FormattedMessage
-              defaultMessage="Add log data"
-              id="kbn.home.addData.logging.addLogDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiSpacer
+        size="m"
+      />
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoLogging"
+            className="homAddData__logo"
+            size="xl"
+            type="logoObservability"
           />
-        }
-        title="Logs"
-      />
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
+          >
+            <h2>
+              <FormattedMessage
+                defaultMessage="Observability"
+                id="kbn.home.addData.title.observability"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiFlexGroup
+        className="homeAddData__flexGroup"
+        gutterSize="l"
+        justifyContent="spaceAround"
+        responsive={false}
+        wrap={false}
+      >
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addLogDataButtonLabel"
+              >
+                Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addLogDataButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/logging"
+              >
+                <FormattedMessage
+                  defaultMessage="Add log data"
+                  id="kbn.home.addData.logging.addLogDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Logs"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="homAddData__flexItem"
+          grow={1}
+        >
+          <EuiCard
+            className="homAddData__card"
+            description={
+              <span
+                id="aria-describedby.addMetricsButtonLabel"
+              >
+                Collect metrics from the operating system and services running on your servers.
+              </span>
+            }
+            footer={
+              <EuiButton
+                aria-describedby="aria-describedby.addMetricsButtonLabel"
+                className="homAddData__button"
+                href="#/home/tutorial_directory/metrics"
+              >
+                <FormattedMessage
+                  defaultMessage="Add metric data"
+                  id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
+                  values={Object {}}
+                />
+              </EuiButton>
+            }
+            textAlign="left"
+            title="Metrics"
+            titleSize="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFlexItem>
     <EuiFlexItem
-      grow={false}
+      className="homAddData__flexItem"
+      grow={1}
     >
-      <EuiCard
-        className="homAddData__card"
-        description={
-          <span
-            id="aria-describedby.addMetricsButtonLabel"
-          >
-            Collect metrics from the operating system and services running on your servers.
-          </span>
-        }
-        footer={
-          <EuiButton
-            aria-describedby="aria-describedby.addMetricsButtonLabel"
-            className="homAddData__button"
-            href="#/home/tutorial_directory/metrics"
-          >
-            <FormattedMessage
-              defaultMessage="Add metric data"
-              id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
-              values={Object {}}
-            />
-          </EuiButton>
-        }
-        icon={
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="m"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
           <EuiIcon
-            className="homAddData__icon"
-            type="logoMetrics"
+            className="homAddData__logo"
+            size="xl"
+            type="logoSecurity"
           />
-        }
-        title="Metrics"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTitle
+            size="s"
+          >
+            <h2>
+              <FormattedMessage
+                defaultMessage="Security"
+                id="kbn.home.addData.title.security"
+                values={Object {}}
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
       />
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
       <EuiCard
         className="homAddData__card"
         description={
@@ -884,19 +1066,15 @@ exports[`render 1`] = `
             href="#/home/tutorial_directory/siem"
           >
             <FormattedMessage
-              defaultMessage="Add security events"
+              defaultMessage="Add events"
               id="kbn.home.addData.siem.addSiemEventsButtonLabel"
               values={Object {}}
             />
           </EuiButton>
         }
-        icon={
-          <EuiIcon
-            className="homAddData__icon"
-            type="logoSecurity"
-          />
-        }
+        textAlign="left"
         title="SIEM"
+        titleSize="xs"
       />
     </EuiFlexItem>
   </EuiFlexGroup>
diff --git a/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/synopsis.test.js.snap b/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/synopsis.test.js.snap
index 34cc0eb9265ffa..525cc5bdda9d42 100644
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/synopsis.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/__snapshots__/synopsis.test.js.snap
@@ -15,6 +15,7 @@ exports[`props iconType 1`] = `
   }
   layout="horizontal"
   title="Great tutorial"
+  titleSize="xs"
 />
 `;
 
@@ -34,6 +35,7 @@ exports[`props iconUrl 1`] = `
   }
   layout="horizontal"
   title="Great tutorial"
+  titleSize="xs"
 />
 `;
 
@@ -46,6 +48,7 @@ exports[`props isBeta 1`] = `
   href="link_to_item"
   layout="horizontal"
   title="Great tutorial"
+  titleSize="xs"
 />
 `;
 
@@ -58,5 +61,6 @@ exports[`render 1`] = `
   href="link_to_item"
   layout="horizontal"
   title="Great tutorial"
+  titleSize="xs"
 />
 `;
diff --git a/src/legacy/core_plugins/kibana/public/home/np_ready/components/_add_data.scss b/src/legacy/core_plugins/kibana/public/home/np_ready/components/_add_data.scss
index 2b87ddbcf4673a..836b34227a37c2 100644
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/_add_data.scss
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/_add_data.scss
@@ -1,9 +1,22 @@
 .homAddData__card {
-  max-width: 250px;
   border: none;
   box-shadow: none;
 }
 
+.homAddData__cardDivider {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    content: '';
+    width: 1px;
+    right: -$euiSizeS;
+    top: 0;
+    bottom: 0;
+    background: $euiBorderColor;
+  }
+}
+
 .homAddData__icon {
   width: $euiSizeXL * 2;
   height: $euiSizeXL * 2;
@@ -18,10 +31,8 @@
   text-align: center;
 }
 
-@include euiBreakpoint('xs') {
-  .homAddData__card {
-    max-width: none;
-  }
+.homAddData__logo {
+  margin-left: $euiSize;
 }
 
 @include euiBreakpoint('xs', 's') {
@@ -30,6 +41,21 @@
   }
 }
 
+@include euiBreakpoint('xs', 's', 'm') {
+  .homAddDat__flexTablet {
+    flex-direction: column;
+  }
+
+  .homAddData__cardDivider:after {
+    display: none;
+  }
+
+  .homAddData__cardDivider {
+    flex-grow: 0 !important;
+    flex-basis: 100% !important;
+  }
+}
+
 @include euiBreakpoint('l', 'xl') {
   .homeAddData__flexGroup {
     flex-wrap: nowrap;
diff --git a/src/legacy/core_plugins/kibana/public/home/np_ready/components/add_data.js b/src/legacy/core_plugins/kibana/public/home/np_ready/components/add_data.js
index a49620be2d229e..6d980114f96475 100644
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/add_data.js
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/add_data.js
@@ -91,10 +91,11 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
     };
 
     const getApmCard = () => (
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem grow={1} className="homAddData__flexItem">
         <EuiCard
+          textAlign="left"
           className="homAddData__card"
-          icon={<EuiIcon className="homAddData__icon" type="logoAPM" />}
+          titleSize="xs"
           title={apmData.title}
           description={<span id={apmData.ariaDescribedby}>{apmData.description}</span>}
           footer={
@@ -115,60 +116,110 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
 
     return (
       <EuiFlexGroup
-        className="homeAddData__flexGroup"
+        className="homeAddData__flexGroup homAddData__flexTablet"
         wrap={apmUiEnabled}
         gutterSize="l"
         justifyContent="spaceAround"
         responsive={false}
       >
-        {apmUiEnabled !== false && getApmCard()}
+        <EuiFlexItem className="homAddData__cardDivider homAddData__flexItem" grow={3}>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiIcon size="xl" type="logoObservability" className="homAddData__logo" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="s">
+                <h2>
+                  <FormattedMessage
+                    id="kbn.home.addData.title.observability"
+                    defaultMessage="Observability"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer />
+          <EuiFlexGroup
+            className="homeAddData__flexGroup"
+            wrap={apmUiEnabled}
+            gutterSize="l"
+            justifyContent="spaceAround"
+            responsive={false}
+          >
+            {apmUiEnabled !== false && getApmCard()}
 
-        <EuiFlexItem grow={false}>
-          <EuiCard
-            className="homAddData__card"
-            icon={<EuiIcon className="homAddData__icon" type="logoLogging" />}
-            title={loggingData.title}
-            description={<span id={loggingData.ariaDescribedby}>{loggingData.description}</span>}
-            footer={
-              <EuiButton
-                className="homAddData__button"
-                href="#/home/tutorial_directory/logging"
-                aria-describedby={loggingData.ariaDescribedby}
-              >
-                <FormattedMessage
-                  id="kbn.home.addData.logging.addLogDataButtonLabel"
-                  defaultMessage="Add log data"
-                />
-              </EuiButton>
-            }
-          />
-        </EuiFlexItem>
+            <EuiFlexItem grow={1} className="homAddData__flexItem">
+              <EuiCard
+                textAlign="left"
+                className="homAddData__card"
+                title={loggingData.title}
+                titleSize="xs"
+                description={
+                  <span id={loggingData.ariaDescribedby}>{loggingData.description}</span>
+                }
+                footer={
+                  <EuiButton
+                    className="homAddData__button"
+                    href="#/home/tutorial_directory/logging"
+                    aria-describedby={loggingData.ariaDescribedby}
+                  >
+                    <FormattedMessage
+                      id="kbn.home.addData.logging.addLogDataButtonLabel"
+                      defaultMessage="Add log data"
+                    />
+                  </EuiButton>
+                }
+              />
+            </EuiFlexItem>
 
-        <EuiFlexItem grow={false}>
-          <EuiCard
-            className="homAddData__card"
-            icon={<EuiIcon className="homAddData__icon" type="logoMetrics" />}
-            title={metricsData.title}
-            description={<span id={metricsData.ariaDescribedby}>{metricsData.description}</span>}
-            footer={
-              <EuiButton
-                className="homAddData__button"
-                href="#/home/tutorial_directory/metrics"
-                aria-describedby={metricsData.ariaDescribedby}
-              >
-                <FormattedMessage
-                  id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
-                  defaultMessage="Add metric data"
-                />
-              </EuiButton>
-            }
-          />
+            <EuiFlexItem grow={1} className="homAddData__flexItem">
+              <EuiCard
+                textAlign="left"
+                className="homAddData__card"
+                title={metricsData.title}
+                titleSize="xs"
+                description={
+                  <span id={metricsData.ariaDescribedby}>{metricsData.description}</span>
+                }
+                footer={
+                  <EuiButton
+                    className="homAddData__button"
+                    href="#/home/tutorial_directory/metrics"
+                    aria-describedby={metricsData.ariaDescribedby}
+                  >
+                    <FormattedMessage
+                      id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
+                      defaultMessage="Add metric data"
+                    />
+                  </EuiButton>
+                }
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
 
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={1} className="homAddData__flexItem">
+          <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiIcon size="xl" type="logoSecurity" className="homAddData__logo" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="s">
+                <h2>
+                  <FormattedMessage
+                    id="kbn.home.addData.title.security"
+                    defaultMessage="Security"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
           <EuiCard
+            textAlign="left"
+            titleSize="xs"
             className="homAddData__card"
-            icon={<EuiIcon className="homAddData__icon" type="logoSecurity" />}
             title={siemData.title}
             description={<span id={siemData.ariaDescribedby}>{siemData.description}</span>}
             footer={
@@ -179,7 +230,7 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
               >
                 <FormattedMessage
                   id="kbn.home.addData.siem.addSiemEventsButtonLabel"
-                  defaultMessage="Add security events"
+                  defaultMessage="Add events"
                 />
               </EuiButton>
             }
@@ -195,29 +246,6 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
 
   return (
     <EuiPanel paddingSize="l">
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiTitle>
-            <h2>
-              <FormattedMessage
-                id="kbn.home.addData.addDataToKibanaTitle"
-                defaultMessage="Add Data to Kibana"
-              />
-            </h2>
-          </EuiTitle>
-          <EuiText size="s">
-            <p>
-              <FormattedMessage
-                id="kbn.home.addData.addDataToKibanaDescription"
-                defaultMessage="Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems."
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer />
-
       {renderCards()}
 
       <EuiHorizontalRule />
diff --git a/src/legacy/core_plugins/kibana/public/home/np_ready/components/synopsis.js b/src/legacy/core_plugins/kibana/public/home/np_ready/components/synopsis.js
index 38dff429f6d357..968b8eb64def5c 100644
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/synopsis.js
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/synopsis.js
@@ -55,6 +55,7 @@ export function Synopsis({
       className={classes}
       layout="horizontal"
       icon={optionalImg}
+      titleSize="xs"
       title={title}
       description={description}
       onClick={onClick}
diff --git a/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/instruction_set.test.js.snap b/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/instruction_set.test.js.snap
index 0d962ac514137f..9409963ff95aa7 100644
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/instruction_set.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/instruction_set.test.js.snap
@@ -22,11 +22,7 @@ exports[`render 1`] = `
       grow={false}
     />
   </EuiFlexGroup>
-  <EuiTabs
-    display="default"
-    expand={false}
-    size="m"
-  >
+  <EuiTabs>
     <EuiTab
       isSelected={true}
       key="0"
@@ -103,11 +99,7 @@ exports[`statusCheckState checking status 1`] = `
       grow={false}
     />
   </EuiFlexGroup>
-  <EuiTabs
-    display="default"
-    expand={false}
-    size="m"
-  >
+  <EuiTabs>
     <EuiTab
       isSelected={true}
       key="0"
@@ -214,11 +206,7 @@ exports[`statusCheckState failed status check - error 1`] = `
       grow={false}
     />
   </EuiFlexGroup>
-  <EuiTabs
-    display="default"
-    expand={false}
-    size="m"
-  >
+  <EuiTabs>
     <EuiTab
       isSelected={true}
       key="0"
@@ -329,11 +317,7 @@ exports[`statusCheckState failed status check - no data 1`] = `
       grow={false}
     />
   </EuiFlexGroup>
-  <EuiTabs
-    display="default"
-    expand={false}
-    size="m"
-  >
+  <EuiTabs>
     <EuiTab
       isSelected={true}
       key="0"
@@ -444,11 +428,7 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
       grow={false}
     />
   </EuiFlexGroup>
-  <EuiTabs
-    display="default"
-    expand={false}
-    size="m"
-  >
+  <EuiTabs>
     <EuiTab
       isSelected={true}
       key="0"
@@ -555,11 +535,7 @@ exports[`statusCheckState successful status check 1`] = `
       grow={false}
     />
   </EuiFlexGroup>
-  <EuiTabs
-    display="default"
-    expand={false}
-    size="m"
-  >
+  <EuiTabs>
     <EuiTab
       isSelected={true}
       key="0"
diff --git a/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
index 161061868dab2d..1ee108962f2987 100644
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
@@ -522,7 +522,6 @@ exports[`bulkCreate should display success message when bulkCreate is successful
                           width={16}
                           xmlns="http://www.w3.org/2000/svg"
                         >
-                          <title />
                           <path
                             d="M6.5 12a.502.502 0 01-.354-.146l-4-4a.502.502 0 01.708-.708L6.5 10.793l6.646-6.647a.502.502 0 01.708.708l-7 7A.502.502 0 016.5 12"
                             fillRule="evenodd"
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap
index 4ba0fe480ac423..2c0a5d8f6b8f19 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap
@@ -78,7 +78,6 @@ exports[`ObjectsTable delete should show a confirm modal 1`] = `
 
 exports[`ObjectsTable export should allow the user to choose when exporting all 1`] = `
 <EuiModal
-  maxWidth={true}
   onClose={[Function]}
 >
   <EuiModalHeader>
diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/legacy/core_plugins/kibana/public/visualize/np_ready/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index c75fd2096feab7..2dcf3ed0ea06f1 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -442,7 +442,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
       <EuiModal
         aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
         className="visNewVisDialog"
-        maxWidth={true}
         onClose={[Function]}
         role="menu"
       >
@@ -2179,7 +2178,6 @@ exports[`NewVisModal should render as expected 1`] = `
       <EuiModal
         aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
         className="visNewVisDialog"
-        maxWidth={true}
         onClose={[Function]}
         role="menu"
       >
@@ -2897,7 +2895,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                         value=""
                                       >
                                         <EuiFormControlLayout
-                                          clear={null}
                                           compressed={false}
                                           fullWidth={true}
                                           icon="search"
@@ -2922,7 +2919,6 @@ exports[`NewVisModal should render as expected 1`] = `
                                                 />
                                               </EuiValidatableControl>
                                               <EuiFormControlLayoutIcons
-                                                clear={null}
                                                 icon="search"
                                                 isLoading={false}
                                               >
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
index 9b2b633fd0e163..c2bac1c1e706a4 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"false\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon--text euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M2 4V3h2v1H2zm4 0V3h8v1H6zm0 3V6h8v1H6zm0 3V9h8v1H6zM2 7V6h2v1H2zm0 3V9h2v1H2zm4 3v-1h8v1H6zm-4 0v-1h2v1H2z\\"></path></svg></button></div>"`;
+exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"false\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon--text euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M2 4V3h2v1H2zm4 0V3h8v1H6zm0 3V6h8v1H6zm0 3V9h8v1H6zM2 7V6h2v1H2zm0 3V9h2v1H2zm4 3v-1h8v1H6zm-4 0v-1h2v1H2z\\"></path></svg></button></div>"`;
 
-exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon--text euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M2 4V3h2v1H2zm4 0V3h8v1H6zm0 3V6h8v1H6zm0 3V9h8v1H6zM2 7V6h2v1H2zm0 3V9h2v1H2zm4 3v-1h8v1H6zm-4 0v-1h2v1H2z\\"></path></svg></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" style=\\"fill: red;\\" focusable=\\"false\\" role=\\"img\\" data-test-subj=\\"legendSelectedColor-red\\" aria-hidden=\\"true\\"><title></title><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" style=\\"fill: red;\\" focusable=\\"false\\" role=\\"img\\" data-test-subj=\\"legendSelectedColor-red\\" aria-hidden=\\"true\\"><title></title><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></div></li></ul></div>"`;
+exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon--text euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M2 4V3h2v1H2zm4 0V3h8v1H6zm0 3V6h8v1H6zm0 3V9h8v1H6zM2 7V6h2v1H2zm0 3V9h2v1H2zm4 3v-1h8v1H6zm-4 0v-1h2v1H2z\\"></path></svg></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" style=\\"fill: red;\\" focusable=\\"false\\" role=\\"img\\" data-test-subj=\\"legendSelectedColor-red\\" aria-hidden=\\"true\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" style=\\"fill: red;\\" focusable=\\"false\\" role=\\"img\\" data-test-subj=\\"legendSelectedColor-red\\" aria-hidden=\\"true\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></div></li></ul></div>"`;
diff --git a/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap b/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap
index 18f84f41d5d998..307c0760de7ba4 100644
--- a/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap
+++ b/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
     <EuiModal
       className="kbnSavedObjectSaveModal"
       data-test-subj="savedObjectSaveModal"
-      maxWidth={true}
       onClose={[Function]}
     >
       <EuiModalHeader>
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 d96febee7b06d2..d320b57ee59e66 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": "18.2.1",
+    "@elastic/eui": "18.3.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 170cc77ca37cc1..27a8c1fab6c8e8 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": "18.2.1",
+    "@elastic/eui": "18.3.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 85c76071d1e944..51bb7240dd7c44 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": "18.2.1",
+    "@elastic/eui": "18.3.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 ade93c9f500990..9ee0e3de51d8b5 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": "18.2.1",
+    "@elastic/eui": "18.3.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__snapshots__/index.test.tsx.snap
index b2c503806c3854..260d7de3aefd4b 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__snapshots__/index.test.tsx.snap
@@ -62,11 +62,7 @@ exports[`DetailView should render TabContent 1`] = `
 `;
 
 exports[`DetailView should render tabs 1`] = `
-<EuiTabs
-  display="default"
-  expand={false}
-  size="m"
->
+<EuiTabs>
   <EuiTab
     isSelected={true}
     key="exception_stacktrace"
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
index 0ddf23cb932fb1..2fc00eeb9c0fef 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
@@ -116,7 +116,6 @@ NodeList [
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <title />
                     <path
                       d="M13.6 12.186l-1.357-1.358c-.025-.025-.058-.034-.084-.056.53-.794.84-1.746.84-2.773a4.977 4.977 0 00-.84-2.772c.026-.02.059-.03.084-.056L13.6 3.813a6.96 6.96 0 010 8.373zM8 15A6.956 6.956 0 013.814 13.6l1.358-1.358c.025-.025.034-.057.055-.084C6.02 12.688 6.974 13 8 13a4.978 4.978 0 002.773-.84c.02.026.03.058.056.083l1.357 1.358A6.956 6.956 0 018 15zm-5.601-2.813a6.963 6.963 0 010-8.373l1.359 1.358c.024.025.057.035.084.056A4.97 4.97 0 003 8c0 1.027.31 1.98.842 2.773-.027.022-.06.031-.084.056l-1.36 1.358zm5.6-.187A4 4 0 118 4a4 4 0 010 8zM8 1c1.573 0 3.019.525 4.187 1.4l-1.357 1.358c-.025.025-.035.057-.056.084A4.979 4.979 0 008 3a4.979 4.979 0 00-2.773.842c-.021-.027-.03-.059-.055-.084L3.814 2.4A6.957 6.957 0 018 1zm0-1a8.001 8.001 0 10.003 16.002A8.001 8.001 0 008 0z"
                       fill-rule="evenodd"
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
index 48e442ce734cf9..5f5f3a2d40f954 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
+++ b/x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
@@ -26,7 +26,6 @@ exports[`TransactionActionMenu component should match the snapshot 1`] = `
             width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <title />
             <path
               d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
               fill-rule="non-zero"
diff --git a/x-pack/legacy/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot b/x-pack/legacy/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot
index c1cb45123f04bc..b394fc30c8d60f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot
@@ -26,7 +26,8 @@ exports[`Storyshots components/FontPicker default 1`] = `
           className="euiScreenReaderOnly"
           id="generated-id"
         >
-          Select an option: , is selected
+          Select an option: 
+          , is selected
         </span>
         <button
           aria-haspopup="true"
@@ -37,9 +38,7 @@ exports[`Storyshots components/FontPicker default 1`] = `
           onKeyDown={[Function]}
           role="option"
           type="button"
-        >
-          
-        </button>
+        />
         <div
           className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
         >
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap b/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
index acd68622f1af0f..e5e13671057bd6 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -21,7 +21,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with page specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-page=\\"0\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -33,7 +33,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width and height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"350\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -45,7 +45,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"400\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -57,5 +57,5 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px;\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute;\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><svg width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon-isLoaded\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><g fill=\\"none\\"><path fill=\\"#FDD009\\" d=\\"M11.934 13.152l7.353 3.356 7.42-6.507c.107-.537.16-1.072.16-1.633 0-4.578-3.721-8.303-8.295-8.303a8.288 8.288 0 00-6.84 3.61l-1.234 6.409 1.436 3.068z\\"></path><path fill=\\"#23BAB1\\" d=\\"M4.322 20.947a8.461 8.461 0 00-.162 1.657c0 4.59 3.731 8.326 8.317 8.326a8.288 8.288 0 006.873-3.646l1.224-6.387-1.634-3.127-7.383-3.368-7.235 6.545z\\"></path><path fill=\\"#EE5097\\" d=\\"M4.276 8.208L9.315 9.4l1.104-5.736a3.976 3.976 0 00-2.413-.815 3.978 3.978 0 00-3.971 3.976c0 .484.08.948.24 1.383\\"></path><path fill=\\"#17A7E0\\" d=\\"M3.838 9.41c-2.251.747-3.817 2.907-3.817 5.284 0 2.314 1.43 4.38 3.576 5.198l7.07-6.398-1.298-2.776-5.53-1.308z\\"></path><path fill=\\"#92C73D\\" d=\\"M20.642 27.284a3.945 3.945 0 002.4.822 3.977 3.977 0 003.972-3.975c0-.484-.08-.948-.24-1.383l-5.036-1.18-1.096 5.716z\\"></path><path fill=\\"#0678A0\\" d=\\"M21.667 20.247l5.543 1.298c2.252-.745 3.818-2.907 3.818-5.284a5.553 5.553 0 00-3.583-5.19l-7.25 6.36 1.472 2.816z\\"></path></g></svg></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z\\"></path></svg></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z\\"></path></svg></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon-isLoaded euiButtonIcon__icon\\" focusable=\\"false\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 011.142-1.535l2.872.313L6.099.05a8.166 8.166 0 013.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 011.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 01-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 01-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 01-1.899-3.293zm4.663 1.986a1 1 0 011.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 011.023-.59l2.358.256a7.23 7.23 0 001.194-2.068l-1.401-1.913a1 1 0 010-1.182l1.4-1.912a7.165 7.165 0 00-1.192-2.069l-2.359.257a1 1 0 01-1.023-.591L9.193.924a7.165 7.165 0 00-2.387.001L5.85 3.094a1 1 0 01-1.023.59l-2.358-.256a7.23 7.23 0 00-1.194 2.068l1.401 1.913a1 1 0 010 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 110-6 3 3 0 010 6zm0-1a2 2 0 100-4 2 2 0 000 4z\\"></path></svg></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
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 8a8799207ace81..73d7599a603590 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
@@ -65,7 +65,6 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <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 000-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 010 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"
                         />
@@ -85,7 +84,6 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -110,7 +108,6 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M0 6h4v4H0V6zm1 1v2h2V7H1zm5-1h4v4H6V6zm1 1v2h2V7H7zm5-1h4v4h-4V6zm1 3h2V7h-2v2z"
                         />
@@ -130,7 +127,6 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -219,7 +215,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <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 000-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 010 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"
                         />
@@ -239,7 +234,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -264,7 +258,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M0 6h4v4H0V6zm1 1v2h2V7H1zm5-1h4v4H6V6zm1 1v2h2V7H7zm5-1h4v4h-4V6zm1 3h2V7h-2v2z"
                         />
@@ -284,7 +277,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -317,7 +309,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <title />
                     <path
                       d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
                       fill-rule="nonzero"
@@ -366,7 +357,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                               width="16"
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <title />
                               <path
                                 d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
                               />
@@ -381,7 +371,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                               width="16"
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <title />
                               <path
                                 d="M6.5 12a.502.502 0 01-.354-.146l-4-4a.502.502 0 01.708-.708L6.5 10.793l6.646-6.647a.502.502 0 01.708.708l-7 7A.502.502 0 016.5 12"
                                 fill-rule="evenodd"
@@ -561,7 +550,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <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 000-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 010 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"
                         />
@@ -581,7 +569,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -606,7 +593,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M0 6h4v4H0V6zm1 1v2h2V7H1zm5-1h4v4H6V6zm1 1v2h2V7H7zm5-1h4v4h-4V6zm1 3h2V7h-2v2z"
                         />
@@ -626,7 +612,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -715,7 +700,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <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 000-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 010 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"
                         />
@@ -735,7 +719,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -760,7 +743,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M0 6h4v4H0V6zm1 1v2h2V7H1zm5-1h4v4H6V6zm1 1v2h2V7H7zm5-1h4v4h-4V6zm1 3h2V7h-2v2z"
                         />
@@ -780,7 +762,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title />
                         <path
                           d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
                           fill-rule="nonzero"
@@ -813,7 +794,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                     width="16"
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <title />
                     <path
                       d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
                       fill-rule="nonzero"
@@ -871,7 +851,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                                   width="16"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <title />
                                   <path
                                     d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
                                   />
@@ -886,7 +865,6 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
                                   width="16"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <title />
                                   <path
                                     d="M6.5 12a.502.502 0 01-.354-.146l-4-4a.502.502 0 01.708-.708L6.5 10.793l6.646-6.647a.502.502 0 01.708.708l-7 7A.502.502 0 016.5 12"
                                     fill-rule="evenodd"
@@ -927,4 +905,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\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><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 000-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 010 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\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><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\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path fill-rule=\\"evenodd\\" d=\\"M6.5 12a.502.502 0 01-.354-.146l-4-4a.502.502 0 01.708-.708L6.5 10.793l6.646-6.647a.502.502 0 01.708.708l-7 7A.502.502 0 016.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>"`;
+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\\" role=\\"img\\" aria-hidden=\\"true\\"><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 000-.711l-7.2-4.583zm.538-.844l7.2 4.583a1.426 1.426 0 010 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\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><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\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"nonzero\\" d=\\"M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><path d=\\"M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.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\\" role=\\"img\\" aria-hidden=\\"true\\"><path fill-rule=\\"evenodd\\" d=\\"M6.5 12a.502.502 0 01-.354-.146l-4-4a.502.502 0 01.708-.708L6.5 10.793l6.646-6.647a.502.502 0 01.708.708l-7 7A.502.502 0 016.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/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/legacy/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
index 9256bee4e756b5..353dc58e6d4011 100644
--- a/x-pack/legacy/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
+++ b/x-pack/legacy/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
@@ -296,7 +296,6 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                     }
                   >
                     <EuiConfirmModal
-                      buttonColor="primary"
                       cancelButtonText={
                         <FormattedMessage
                           defaultMessage="Cancel"
@@ -323,7 +322,6 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                     >
                       <EuiModal
                         className="euiModal--confirmation"
-                        maxWidth={true}
                         onClose={[Function]}
                       >
                         <EuiFocusTrap>
@@ -1401,7 +1399,6 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                                                 width={16}
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <title />
                                                 <path
                                                   d="M9 10.114l1.85-1.943a.52.52 0 01.77 0c.214.228.214.6 0 .829l-1.95 2.05a1.552 1.552 0 01-2.31 0L5.41 9a.617.617 0 010-.829.52.52 0 01.77 0L8 10.082V1.556C8 1.249 8.224 1 8.5 1s.5.249.5.556v8.558zM4.18 6a.993.993 0 00-.972.804l-1.189 6A.995.995 0 002.991 14h11.018a1 1 0 00.972-1.196l-1.19-6a.993.993 0 00-.97-.804H4.18zM6 5v1h5V5h1.825c.946 0 1.76.673 1.946 1.608l1.19 6A2 2 0 0114.016 15H2.984a1.992 1.992 0 01-1.945-2.392l1.19-6C2.414 5.673 3.229 5 4.174 5H6z"
                                                 />
@@ -1871,7 +1868,6 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                                                 width={16}
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <title />
                                                 <path
                                                   d="M9 10.114l1.85-1.943a.52.52 0 01.77 0c.214.228.214.6 0 .829l-1.95 2.05a1.552 1.552 0 01-2.31 0L5.41 9a.617.617 0 010-.829.52.52 0 01.77 0L8 10.082V1.556C8 1.249 8.224 1 8.5 1s.5.249.5.556v8.558zM4.18 6a.993.993 0 00-.972.804l-1.189 6A.995.995 0 002.991 14h11.018a1 1 0 00.972-1.196l-1.19-6a.993.993 0 00-.97-.804H4.18zM6 5v1h5V5h1.825c.946 0 1.76.673 1.946 1.608l1.19 6A2 2 0 0114.016 15H2.984a1.992 1.992 0 01-1.945-2.392l1.19-6C2.414 5.673 3.229 5 4.174 5H6z"
                                                 />
@@ -2806,7 +2802,6 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                                                 width={16}
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <title />
                                                 <path
                                                   d="M9 10.114l1.85-1.943a.52.52 0 01.77 0c.214.228.214.6 0 .829l-1.95 2.05a1.552 1.552 0 01-2.31 0L5.41 9a.617.617 0 010-.829.52.52 0 01.77 0L8 10.082V1.556C8 1.249 8.224 1 8.5 1s.5.249.5.556v8.558zM4.18 6a.993.993 0 00-.972.804l-1.189 6A.995.995 0 002.991 14h11.018a1 1 0 00.972-1.196l-1.19-6a.993.993 0 00-.97-.804H4.18zM6 5v1h5V5h1.825c.946 0 1.76.673 1.946 1.608l1.19 6A2 2 0 0114.016 15H2.984a1.992 1.992 0 01-1.945-2.392l1.19-6C2.414 5.673 3.229 5 4.174 5H6z"
                                                 />
diff --git a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
index 2dc355513ece24..c62b07a89e7a3e 100644
--- a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
@@ -33,6 +33,7 @@ exports[`should not render relation select when geo field is geo_point 1`] = `
       fullWidth={true}
       hasDividers={true}
       isInvalid={false}
+      isLoading={false}
       itemClassName="mapGeometryFilter__geoFieldItem"
       onChange={[Function]}
       options={
@@ -110,6 +111,7 @@ exports[`should not show "within" relation when filter geometry is not closed 1`
       fullWidth={true}
       hasDividers={true}
       isInvalid={false}
+      isLoading={false}
       itemClassName="mapGeometryFilter__geoFieldItem"
       onChange={[Function]}
       options={
@@ -214,6 +216,7 @@ exports[`should render error message 1`] = `
       fullWidth={true}
       hasDividers={true}
       isInvalid={false}
+      isLoading={false}
       itemClassName="mapGeometryFilter__geoFieldItem"
       onChange={[Function]}
       options={
@@ -294,6 +297,7 @@ exports[`should render relation select when geo field is geo_shape 1`] = `
       fullWidth={true}
       hasDividers={true}
       isInvalid={false}
+      isLoading={false}
       itemClassName="mapGeometryFilter__geoFieldItem"
       onChange={[Function]}
       options={
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.js.snap
index 9a55e46b40aea3..9d07b9c641e0f9 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.js.snap
@@ -15,6 +15,7 @@ exports[`HeatmapStyleEditor is rendered 1`] = `
     fullWidth={false}
     hasDividers={true}
     isInvalid={false}
+    isLoading={false}
     onChange={[Function]}
     options={
       Array [
diff --git a/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
index ee76657c8d27a4..4dd77842894c65 100644
--- a/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
@@ -3,25 +3,17 @@
 exports[`Select Flow Direction rendering it renders the basic group button for uni-direction and bi-direction 1`] = `
 <EuiFilterGroup>
   <EuiFilterButton
-    color="text"
     data-test-subj="uniDirectional"
-    grow={true}
     hasActiveFilters={true}
-    iconSide="right"
     onClick={[Function]}
-    type="button"
     withNext={true}
   >
     Unidirectional
   </EuiFilterButton>
   <EuiFilterButton
-    color="text"
     data-test-subj="biDirectional"
-    grow={true}
     hasActiveFilters={false}
-    iconSide="right"
     onClick={[Function]}
-    type="button"
   >
     Bidirectional
   </EuiFilterButton>
diff --git a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
index 4c9a27b76060cb..8f40d0203afd43 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
@@ -5,16 +5,12 @@ exports[`GroupsFilterPopover renders correctly against snapshot 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       data-test-subj="groups-filter-popover-button"
-      grow={true}
       hasActiveFilters={false}
-      iconSide="right"
       iconType="arrowDown"
       isSelected={false}
       numActiveFilters={0}
       onClick={[Function]}
-      type="button"
     >
       Groups
     </EuiFilterButton>
diff --git a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap
index fac91f75978f09..747ac63551b55b 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap
@@ -110,25 +110,17 @@ exports[`JobsTableFilters renders correctly against snapshot 1`] = `
   >
     <EuiFilterGroup>
       <EuiFilterButton
-        color="text"
         data-test-subj="show-elastic-jobs-filter-button"
-        grow={true}
         hasActiveFilters={false}
-        iconSide="right"
         onClick={[Function]}
-        type="button"
         withNext={true}
       >
         Elastic jobs
       </EuiFilterButton>
       <EuiFilterButton
-        color="text"
         data-test-subj="show-custom-jobs-filter-button"
-        grow={true}
         hasActiveFilters={false}
-        iconSide="right"
         onClick={[Function]}
-        type="button"
       >
         Custom jobs
       </EuiFilterButton>
diff --git a/x-pack/legacy/plugins/siem/public/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
index 7e3e099bf0276e..28481e9970a5eb 100644
--- a/x-pack/legacy/plugins/siem/public/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Modal all errors rendering it renders the default all errors modal when isShowing is positive 1`] = `
 <EuiOverlayMask>
   <EuiModal
-    maxWidth={true}
     onClose={[Function]}
   >
     <EuiModalHeader>
diff --git a/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/__snapshots__/confirm_delete_modal.test.tsx.snap b/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/__snapshots__/confirm_delete_modal.test.tsx.snap
index 8930dedfa0035d..6e422bc13f06be 100644
--- a/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/__snapshots__/confirm_delete_modal.test.tsx.snap
+++ b/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/__snapshots__/confirm_delete_modal.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
   <EuiModal
     className="spcConfirmDeleteModal"
     initialFocus="input[name=\\"confirmDeleteSpaceInput\\"]"
-    maxWidth={true}
     onClose={[MockFunction]}
   >
     <EuiModalHeader>
diff --git a/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/confirm_delete_modal.tsx b/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/confirm_delete_modal.tsx
index 6eed58a7842124..3a4861f4fbc9ec 100644
--- a/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/confirm_delete_modal.tsx
+++ b/x-pack/legacy/plugins/spaces/public/management/components/confirm_delete_modal/confirm_delete_modal.tsx
@@ -9,8 +9,6 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiCallOut,
-  // @ts-ignore
-  EuiConfirmModal,
   EuiFieldText,
   EuiFormRow,
   EuiModal,
@@ -89,7 +87,7 @@ class ConfirmDeleteModalUI extends Component<Props, State> {
     // This is largely the same as the built-in EuiConfirmModal component, but we needed the ability
     // to disable the buttons since this could be a long-running operation
 
-    const modalProps: EuiModalProps & CommonProps = {
+    const modalProps: Omit<EuiModalProps, 'children'> & CommonProps = {
       onClose: onCancel,
       className: 'spcConfirmDeleteModal',
       initialFocus: 'input[name="confirmDeleteSpaceInput"]',
diff --git a/x-pack/legacy/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap b/x-pack/legacy/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap
index d7702e2f18d44b..750afcfc44e7e3 100644
--- a/x-pack/legacy/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap
+++ b/x-pack/legacy/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`ConfirmAlterActiveSpaceModal renders as expected 1`] = `
 <EuiOverlayMask>
   <EuiConfirmModal
-    buttonColor="primary"
     cancelButtonText="Cancel"
     confirmButtonText="Update space"
     defaultFocusedButton="confirm"
diff --git a/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/filter_bar.test.tsx.snap b/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/filter_bar.test.tsx.snap
index 2d3351ec1c0d20..da9153f4a6c8d6 100644
--- a/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/filter_bar.test.tsx.snap
+++ b/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/filter_bar.test.tsx.snap
@@ -6,26 +6,18 @@ exports[`FilterBar renders 1`] = `
 >
   <EuiFilterGroup>
     <EuiFilterButton
-      color="text"
-      grow={true}
       hasActiveFilters={false}
-      iconSide="right"
       key="all"
       numFilters={2}
       onClick={[Function]}
-      type="button"
     >
       all
     </EuiFilterButton>
     <EuiFilterButton
-      color="text"
-      grow={true}
       hasActiveFilters={true}
-      iconSide="right"
       key="critical"
       numFilters={2}
       onClick={[Function]}
-      type="button"
     >
       critical
     </EuiFilterButton>
diff --git a/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/group_by_bar.test.tsx.snap b/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/group_by_bar.test.tsx.snap
index b36e0c1a2bfdb0..dfc69c57cfff6b 100644
--- a/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/group_by_bar.test.tsx.snap
+++ b/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/__snapshots__/group_by_bar.test.tsx.snap
@@ -6,24 +6,16 @@ exports[`GroupByBar renders 1`] = `
 >
   <EuiFilterGroup>
     <EuiFilterButton
-      color="text"
-      grow={true}
       hasActiveFilters={true}
-      iconSide="right"
       key="message"
       onClick={[Function]}
-      type="button"
     >
       by issue
     </EuiFilterButton>
     <EuiFilterButton
-      color="text"
-      grow={true}
       hasActiveFilters={false}
-      iconSide="right"
       key="index"
       onClick={[Function]}
-      type="button"
     >
       by index
     </EuiFilterButton>
diff --git a/x-pack/package.json b/x-pack/package.json
index f65455524862b9..7d1a160f41d74f 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -175,7 +175,7 @@
     "@babel/runtime": "^7.5.5",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.1.0",
     "@elastic/node-crypto": "^1.0.0",
diff --git a/x-pack/plugins/apm/server/tutorial/index.ts b/x-pack/plugins/apm/server/tutorial/index.ts
index bb5d553b26b364..5399d139371790 100644
--- a/x-pack/plugins/apm/server/tutorial/index.ts
+++ b/x-pack/plugins/apm/server/tutorial/index.ts
@@ -84,7 +84,7 @@ It allows you to monitor the performance of thousands of applications in real ti
           '{config.docs.base_url}guide/en/apm/get-started/{config.docs.version}/index.html',
       },
     }),
-    euiIconType: 'logoAPM',
+    euiIconType: 'apmApp',
     artifacts,
     onPrem: onPremInstructions(indices),
     elasticCloud: createElasticCloudInstructions(cloud),
diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap
index 42fd4417e238b1..f8bbfbc8bb33de 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/__snapshots__/api_keys_grid_page.test.tsx.snap
@@ -49,7 +49,6 @@ exports[`APIKeysGridPage renders a callout when API keys are not enabled 1`] = `
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <title />
               <path
                 d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
                 fillRule="evenodd"
@@ -189,7 +188,6 @@ exports[`APIKeysGridPage renders permission denied if user does not have require
                       width={32}
                       xmlns="http://www.w3.org/2000/svg"
                     >
-                      <title />
                       <path
                         d="M14 32l-.36-.14A21.07 21.07 0 010 12.07V5.44L14 .06l14 5.38v6.63a21.07 21.07 0 01-13.64 19.78L14 32zM2 6.82v5.25a19.08 19.08 0 0012 17.77 19.08 19.08 0 0012-17.77V6.82L14 2.2 2 6.82z"
                       />
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
index 37db2e118861e8..a2741773f183bf 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
@@ -39,6 +39,7 @@ exports[`<SimplePrivilegeForm> renders without crashing 1`] = `
         fullWidth={false}
         hasDividers={true}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         options={
           Array [
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap
index e9f2f946e98859..8d10e27df9694e 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap
@@ -176,6 +176,7 @@ exports[`<PrivilegeSpaceForm> renders without crashing 1`] = `
             fullWidth={true}
             hasDividers={true}
             isInvalid={false}
+            isLoading={false}
             onChange={[Function]}
             options={
               Array [
diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap b/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap
index 970cbfd03954a4..4789314d9f780b 100644
--- a/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap
@@ -67,7 +67,6 @@ exports[`<RolesGridPage /> renders permission denied if required 1`] = `
                       width={32}
                       xmlns="http://www.w3.org/2000/svg"
                     >
-                      <title />
                       <path
                         d="M14 32l-.36-.14A21.07 21.07 0 010 12.07V5.44L14 .06l14 5.38v6.63a21.07 21.07 0 01-13.64 19.78L14 32zM2 6.82v5.25a19.08 19.08 0 0012 17.77 19.08 19.08 0 0012-17.77V6.82L14 2.2 2 6.82z"
                       />
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 0d0c455a218c17..a9762d3e2eb9b8 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -1499,8 +1499,6 @@
     "kbn.embeddable.inspectorRequestDataTitle": "データ",
     "kbn.embeddable.inspectorRequestDescription": "このリクエストは Elasticsearch にクエリをかけ、検索データを取得します。",
     "kbn.embeddable.search.displayName": "検索",
-    "kbn.home.addData.addDataToKibanaDescription": "これらのソリューションで、データを作成済みのダッシュボードと監視システムへとすぐに変えることができます。",
-    "kbn.home.addData.addDataToKibanaTitle": "Kibana にデータを追加",
     "kbn.home.addData.apm.addApmButtonLabel": "APM を追加",
     "kbn.home.addData.apm.nameDescription": "APM は、集約内から自動的に詳細なパフォーマンスメトリックやエラーを集めます。",
     "kbn.home.addData.apm.nameTitle": "APM",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index e12d90b87c0762..3a92ae1502cc5b 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -1499,8 +1499,6 @@
     "kbn.embeddable.inspectorRequestDataTitle": "数据",
     "kbn.embeddable.inspectorRequestDescription": "此请求将查询 Elasticsearch 以获取搜索的数据。",
     "kbn.embeddable.search.displayName": "搜索",
-    "kbn.home.addData.addDataToKibanaDescription": "使用这些解决方案可快速将您的数据转换成预建仪表板和监测系统。",
-    "kbn.home.addData.addDataToKibanaTitle": "将数据添加到 Kibana",
     "kbn.home.addData.apm.addApmButtonLabel": "添加 APM",
     "kbn.home.addData.apm.nameDescription": "APM 自动从您的应用程序内收集深入全面的性能指标和错误。",
     "kbn.home.addData.apm.nameTitle": "APM",
diff --git a/yarn.lock b/yarn.lock
index 3645fec7ce7a81..8e88b9609245ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2653,10 +2653,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@18.2.1":
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-18.2.1.tgz#6ce6d0bd1d0541052d21f2918305524d71e91678"
-  integrity sha512-6C5tnWJTlBB++475i0vRoCsnz4JaYznb4zMNFLc+z5GY3vA3/E3AXTjmmBwybEicCCi3h1SnpJxZsgMakiZwRA==
+"@elastic/eui@18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-18.3.0.tgz#e21c6246624f694e2ae1c7c1f1a11b612faf260a"
+  integrity sha512-Rkj1rTtDa6iZMUF7pxYRojku1sLXzTU0FK1D9i0XE3H//exy3VyTV6qUlbdkiKXjO7emrgQqfzKDeXT+ZYztgg==
   dependencies:
     "@types/chroma-js" "^1.4.3"
     "@types/lodash" "^4.14.116"