diff --git a/package.json b/package.json
index df35e5901159b..c79c2a2f3e33a 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.9.0-rc.2",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index ae14777e8b44a..a37281cb2263f 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "19.8.1",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 9ecbc055e3320..72d62730fa698 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -378,7 +378,9 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
       <Portal
         containerInfo={
           <div
+            aria-hidden="true"
             class="euiOverlayMask euiOverlayMask--belowHeader"
+            data-aria-hidden="true"
           />
         }
       />
@@ -404,260 +406,187 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             onTouchEnd={[Function]}
             onTouchStart={[Function]}
           >
-            <FocusLock
-              as="div"
-              autoFocus={true}
-              disabled={false}
-              lockProps={
-                Object {
-                  "style": undefined,
-                }
-              }
-              noFocusGuards={false}
-              persistentFocus={false}
+            <ForwardRef
+              enabled={true}
+              noIsolation={true}
               returnFocus={true}
+              scrollLock={false}
             >
-              <div
-                data-focus-guard={true}
-                key="guard-first"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={0}
-              />
-              <div
-                data-focus-guard={true}
-                key="guard-nearest"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={1}
-              />
-              <div
-                data-focus-lock-disabled={false}
-                onBlur={[Function]}
-                onFocus={[Function]}
+              <ForwardRef
+                enabled={true}
+                noIsolation={true}
+                returnFocus={true}
+                scrollLock={false}
+                sideCar={[Function]}
               >
-                <SideEffect(FocusWatcher)
+                <ForwardRef
+                  as={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "classNames": Object {
+                        "fullWidth": "width-before-scroll-bar",
+                        "zeroRight": "right-scroll-bar-position",
+                      },
+                      "defaultProps": Object {
+                        "enabled": true,
+                        "inert": false,
+                        "removeScrollBar": true,
+                      },
+                      "render": [Function],
+                    }
+                  }
                   autoFocus={true}
+                  crossFrame={true}
                   disabled={false}
-                  observed={
-                    <div
-                      data-focus-lock-disabled="false"
-                    >
-                      <nav
-                        aria-label="Primary"
-                        class="euiCollapsibleNav"
-                        data-test-subj="collapsibleNav"
-                        id="collapsibe-nav"
+                  lockProps={
+                    Object {
+                      "allowPinchZoom": undefined,
+                      "enabled": false,
+                      "inert": undefined,
+                      "onMouseDown": [Function],
+                      "onTouchStart": [Function],
+                      "shards": undefined,
+                      "sideCar": [Function],
+                    }
+                  }
+                  noFocusGuards={false}
+                  onActivation={[Function]}
+                  onDeactivation={[Function]}
+                  persistentFocus={false}
+                  returnFocus={true}
+                  sideCar={[Function]}
+                >
+                  <div
+                    data-focus-guard={true}
+                    key="guard-first"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                  <div
+                    data-focus-guard={true}
+                    key="guard-nearest"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={1}
+                  />
+                  <RequireSideCar
+                    autoFocus={true}
+                    crossFrame={true}
+                    disabled={false}
+                    id={Object {}}
+                    observed={
+                      <div
+                        data-focus-lock-disabled="false"
                       >
-                        <div
-                          class="euiFlexItem euiFlexItem--flexGrowZero"
-                          style="flex-shrink: 0;"
+                        <nav
+                          aria-label="Primary"
+                          class="euiCollapsibleNav"
+                          data-test-subj="collapsibleNav"
+                          id="collapsibe-nav"
                         >
                           <div
-                            class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                            id="mockId"
-                            style="max-height: 40vh;"
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                            style="flex-shrink: 0;"
                           >
                             <div
-                              class="euiCollapsibleNavGroup__children"
+                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                              id="mockId"
+                              style="max-height: 40vh;"
                             >
-                              <ul
-                                class="euiListGroup"
-                                style="max-width: none;"
+                              <div
+                                class="euiCollapsibleNavGroup__children"
                               >
-                                <li
-                                  class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                <ul
+                                  class="euiListGroup"
+                                  style="max-width: none;"
                                 >
-                                  <a
-                                    class="euiListGroupItem__button"
-                                    data-test-subj="collapsibleNavCustomNavLink"
-                                    href="Custom link"
-                                    rel="noreferrer"
+                                  <li
+                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                   >
-                                    <span
-                                      class="euiListGroupItem__label"
-                                      title="Custom link"
+                                    <a
+                                      class="euiListGroupItem__button"
+                                      data-test-subj="collapsibleNavCustomNavLink"
+                                      href="Custom link"
+                                      rel="noreferrer"
                                     >
-                                      Custom link
-                                    </span>
-                                  </a>
-                                </li>
-                              </ul>
+                                      <span
+                                        class="euiListGroupItem__label"
+                                        title="Custom link"
+                                      >
+                                        Custom link
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <hr
-                          class="euiHorizontalRule euiHorizontalRule--full"
-                        />
-                        <div
-                          class="euiFlexItem euiFlexItem--flexGrowZero"
-                          style="flex-shrink: 0;"
-                        >
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
                           <div
-                            class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                            id="mockId"
-                            style="max-height: 40vh;"
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                            style="flex-shrink: 0;"
                           >
                             <div
-                              class="euiCollapsibleNavGroup__children"
-                            >
-                              <ul
-                                aria-label="Pinned links"
-                                class="euiListGroup"
-                                style="max-width: none;"
-                              >
-                                <li
-                                  class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                >
-                                  <a
-                                    class="euiListGroupItem__button"
-                                    href="/"
-                                    rel="noreferrer"
-                                  >
-                                    <div
-                                      class="euiListGroupItem__icon"
-                                      data-euiicon-type="home"
-                                    />
-                                    <span
-                                      class="euiListGroupItem__label"
-                                      title="Home"
-                                    >
-                                      Home
-                                    </span>
-                                  </a>
-                                </li>
-                              </ul>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                          data-test-subj="collapsibleNavGroup-recentlyViewed"
-                        >
-                          <div
-                            class="euiAccordion__triggerWrapper"
-                          >
-                            <button
-                              aria-controls="mockId"
-                              aria-expanded="true"
-                              class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                              type="button"
+                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                              id="mockId"
+                              style="max-height: 40vh;"
                             >
-                              <span
-                                class="euiAccordion__iconWrapper"
-                              >
-                                <div
-                                  class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                  data-euiicon-type="arrowRight"
-                                />
-                              </span>
-                              <span
-                                class="euiIEFlexWrapFix"
-                              >
-                                <div
-                                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                >
-                                  <div
-                                    class="euiFlexItem"
-                                  >
-                                    <h3
-                                      class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                      id="mockId__title"
-                                    >
-                                      Recently viewed
-                                    </h3>
-                                  </div>
-                                </div>
-                              </span>
-                            </button>
-                          </div>
-                          <div
-                            class="euiAccordion__childWrapper"
-                            id="mockId"
-                          >
-                            <div>
                               <div
-                                class=""
+                                class="euiCollapsibleNavGroup__children"
                               >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
+                                <ul
+                                  aria-label="Pinned links"
+                                  class="euiListGroup"
+                                  style="max-width: none;"
                                 >
-                                  <ul
-                                    aria-label="Recently viewed links"
-                                    class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                    style="max-width: none;"
+                                  <li
+                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                   >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                    >
-                                      <a
-                                        aria-label="recent 1"
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsibleNavAppLink--recent"
-                                        href="http://localhost/recent%201"
-                                        rel="noreferrer"
-                                        title="recent 1"
-                                      >
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="recent 1"
-                                        >
-                                          recent 1
-                                        </span>
-                                      </a>
-                                    </li>
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                    <a
+                                      class="euiListGroupItem__button"
+                                      href="/"
+                                      rel="noreferrer"
                                     >
-                                      <a
-                                        aria-label="recent 2"
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsibleNavAppLink--recent"
-                                        href="http://localhost/recent%202"
-                                        rel="noreferrer"
-                                        title="recent 2"
+                                      <div
+                                        class="euiListGroupItem__icon"
+                                        data-euiicon-type="home"
+                                      />
+                                      <span
+                                        class="euiListGroupItem__label"
+                                        title="Home"
                                       >
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="recent 2"
-                                        >
-                                          recent 2
-                                        </span>
-                                      </a>
-                                    </li>
-                                  </ul>
-                                </div>
+                                        Home
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
                               </div>
                             </div>
                           </div>
-                        </div>
-                        <hr
-                          class="euiHorizontalRule euiHorizontalRule--full"
-                        />
-                        <div
-                          class="euiFlexItem eui-yScroll"
-                        >
                           <div
-                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-kibana"
+                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                            data-test-subj="collapsibleNavGroup-recentlyViewed"
                           >
                             <div
                               class="euiAccordion__triggerWrapper"
@@ -682,13 +611,6 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                   <div
                                     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                   >
-                                    <div
-                                      class="euiFlexItem euiFlexItem--flexGrowZero"
-                                    >
-                                      <div
-                                        data-euiicon-type="logoKibana"
-                                      />
-                                    </div>
                                     <div
                                       class="euiFlexItem"
                                     >
@@ -696,7 +618,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                         class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
                                         id="mockId__title"
                                       >
-                                        Kibana
+                                        Recently viewed
                                       </h3>
                                     </div>
                                   </div>
@@ -715,41 +637,26 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                     class="euiCollapsibleNavGroup__children"
                                   >
                                     <ul
-                                      aria-label="Primary navigation links, Kibana"
-                                      class="euiListGroup"
+                                      aria-label="Recently viewed links"
+                                      class="euiListGroup kbnCollapsibleNav__recentsListGroup"
                                       style="max-width: none;"
                                     >
                                       <li
                                         class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                       >
                                         <a
+                                          aria-label="recent 1"
                                           class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="discover"
-                                          rel="noreferrer"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="discover"
-                                          >
-                                            discover
-                                          </span>
-                                        </a>
-                                      </li>
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="visualize"
+                                          data-test-subj="collapsibleNavAppLink--recent"
+                                          href="http://localhost/recent%201"
                                           rel="noreferrer"
+                                          title="recent 1"
                                         >
                                           <span
                                             class="euiListGroupItem__label"
-                                            title="visualize"
+                                            title="recent 1"
                                           >
-                                            visualize
+                                            recent 1
                                           </span>
                                         </a>
                                       </li>
@@ -757,16 +664,18 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                         class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                       >
                                         <a
+                                          aria-label="recent 2"
                                           class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="dashboard"
+                                          data-test-subj="collapsibleNavAppLink--recent"
+                                          href="http://localhost/recent%202"
                                           rel="noreferrer"
+                                          title="recent 2"
                                         >
                                           <span
                                             class="euiListGroupItem__label"
-                                            title="dashboard"
+                                            title="recent 2"
                                           >
-                                            dashboard
+                                            recent 2
                                           </span>
                                         </a>
                                       </li>
@@ -776,665 +685,678 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                               </div>
                             </div>
                           </div>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
                           <div
-                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-observability"
+                            class="euiFlexItem eui-yScroll"
                           >
                             <div
-                              class="euiAccordion__triggerWrapper"
+                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-kibana"
                             >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded="true"
-                                class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                type="button"
+                              <div
+                                class="euiAccordion__triggerWrapper"
                               >
-                                <span
-                                  class="euiAccordion__iconWrapper"
-                                >
-                                  <div
-                                    class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    data-euiicon-type="arrowRight"
-                                  />
-                                </span>
-                                <span
-                                  class="euiIEFlexWrapFix"
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded="true"
+                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  type="button"
                                 >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                  <span
+                                    class="euiAccordion__iconWrapper"
                                   >
                                     <div
-                                      class="euiFlexItem euiFlexItem--flexGrowZero"
-                                    >
-                                      <div
-                                        data-euiicon-type="logoObservability"
-                                      />
-                                    </div>
+                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      data-euiicon-type="arrowRight"
+                                    />
+                                  </span>
+                                  <span
+                                    class="euiIEFlexWrapFix"
+                                  >
                                     <div
-                                      class="euiFlexItem"
+                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                     >
-                                      <h3
-                                        class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                        id="mockId__title"
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
-                                        Observability
-                                      </h3>
+                                        <div
+                                          data-euiicon-type="logoKibana"
+                                        />
+                                      </div>
+                                      <div
+                                        class="euiFlexItem"
+                                      >
+                                        <h3
+                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Kibana
+                                        </h3>
+                                      </div>
                                     </div>
-                                  </div>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              class="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <div>
-                                <div
-                                  class=""
-                                >
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <div>
                                   <div
-                                    class="euiCollapsibleNavGroup__children"
+                                    class=""
                                   >
-                                    <ul
-                                      aria-label="Primary navigation links, Observability"
-                                      class="euiListGroup"
-                                      style="max-width: none;"
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
                                     >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                      <ul
+                                        aria-label="Primary navigation links, Kibana"
+                                        class="euiListGroup"
+                                        style="max-width: none;"
                                       >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="metrics"
-                                          rel="noreferrer"
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                         >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="metrics"
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="discover"
+                                            rel="noreferrer"
                                           >
-                                            metrics
-                                          </span>
-                                        </a>
-                                      </li>
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="logs"
-                                          rel="noreferrer"
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="discover"
+                                            >
+                                              discover
+                                            </span>
+                                          </a>
+                                        </li>
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                         >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="logs"
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="visualize"
+                                            rel="noreferrer"
                                           >
-                                            logs
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="visualize"
+                                            >
+                                              visualize
+                                            </span>
+                                          </a>
+                                        </li>
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="dashboard"
+                                            rel="noreferrer"
+                                          >
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="dashboard"
+                                            >
+                                              dashboard
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </ul>
+                                    </div>
                                   </div>
                                 </div>
                               </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-security"
-                          >
                             <div
-                              class="euiAccordion__triggerWrapper"
+                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-observability"
                             >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded="true"
-                                class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                type="button"
+                              <div
+                                class="euiAccordion__triggerWrapper"
                               >
-                                <span
-                                  class="euiAccordion__iconWrapper"
-                                >
-                                  <div
-                                    class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    data-euiicon-type="arrowRight"
-                                  />
-                                </span>
-                                <span
-                                  class="euiIEFlexWrapFix"
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded="true"
+                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  type="button"
                                 >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                  <span
+                                    class="euiAccordion__iconWrapper"
+                                  >
+                                    <div
+                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      data-euiicon-type="arrowRight"
+                                    />
+                                  </span>
+                                  <span
+                                    class="euiIEFlexWrapFix"
                                   >
                                     <div
-                                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                     >
                                       <div
-                                        data-euiicon-type="logoSecurity"
-                                      />
+                                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <div
+                                          data-euiicon-type="logoObservability"
+                                        />
+                                      </div>
+                                      <div
+                                        class="euiFlexItem"
+                                      >
+                                        <h3
+                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Observability
+                                        </h3>
+                                      </div>
                                     </div>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <div>
+                                  <div
+                                    class=""
+                                  >
                                     <div
-                                      class="euiFlexItem"
+                                      class="euiCollapsibleNavGroup__children"
                                     >
-                                      <h3
-                                        class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                        id="mockId__title"
+                                      <ul
+                                        aria-label="Primary navigation links, Observability"
+                                        class="euiListGroup"
+                                        style="max-width: none;"
                                       >
-                                        Security
-                                      </h3>
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="metrics"
+                                            rel="noreferrer"
+                                          >
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="metrics"
+                                            >
+                                              metrics
+                                            </span>
+                                          </a>
+                                        </li>
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="logs"
+                                            rel="noreferrer"
+                                          >
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="logs"
+                                            >
+                                              logs
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </ul>
                                     </div>
                                   </div>
-                                </span>
-                              </button>
+                                </div>
+                              </div>
                             </div>
                             <div
-                              class="euiAccordion__childWrapper"
-                              id="mockId"
+                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-security"
                             >
-                              <div>
-                                <div
-                                  class=""
+                              <div
+                                class="euiAccordion__triggerWrapper"
+                              >
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded="true"
+                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  type="button"
                                 >
+                                  <span
+                                    class="euiAccordion__iconWrapper"
+                                  >
+                                    <div
+                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      data-euiicon-type="arrowRight"
+                                    />
+                                  </span>
+                                  <span
+                                    class="euiIEFlexWrapFix"
+                                  >
+                                    <div
+                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    >
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <div
+                                          data-euiicon-type="logoSecurity"
+                                        />
+                                      </div>
+                                      <div
+                                        class="euiFlexItem"
+                                      >
+                                        <h3
+                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Security
+                                        </h3>
+                                      </div>
+                                    </div>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <div>
                                   <div
-                                    class="euiCollapsibleNavGroup__children"
+                                    class=""
                                   >
-                                    <ul
-                                      aria-label="Primary navigation links, Security"
-                                      class="euiListGroup"
-                                      style="max-width: none;"
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
                                     >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                      <ul
+                                        aria-label="Primary navigation links, Security"
+                                        class="euiListGroup"
+                                        style="max-width: none;"
                                       >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="siem"
-                                          rel="noreferrer"
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                         >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="siem"
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="siem"
+                                            rel="noreferrer"
                                           >
-                                            siem
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="siem"
+                                            >
+                                              siem
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </ul>
+                                    </div>
                                   </div>
                                 </div>
                               </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-management"
-                          >
                             <div
-                              class="euiAccordion__triggerWrapper"
+                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-management"
                             >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded="true"
-                                class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                type="button"
+                              <div
+                                class="euiAccordion__triggerWrapper"
                               >
-                                <span
-                                  class="euiAccordion__iconWrapper"
-                                >
-                                  <div
-                                    class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    data-euiicon-type="arrowRight"
-                                  />
-                                </span>
-                                <span
-                                  class="euiIEFlexWrapFix"
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded="true"
+                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  type="button"
                                 >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                  <span
+                                    class="euiAccordion__iconWrapper"
                                   >
                                     <div
-                                      class="euiFlexItem"
+                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      data-euiicon-type="arrowRight"
+                                    />
+                                  </span>
+                                  <span
+                                    class="euiIEFlexWrapFix"
+                                  >
+                                    <div
+                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                     >
-                                      <h3
-                                        class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                        id="mockId__title"
+                                      <div
+                                        class="euiFlexItem"
                                       >
-                                        Management
-                                      </h3>
+                                        <h3
+                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Management
+                                        </h3>
+                                      </div>
                                     </div>
-                                  </div>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              class="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <div>
-                                <div
-                                  class=""
-                                >
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <div>
                                   <div
-                                    class="euiCollapsibleNavGroup__children"
+                                    class=""
                                   >
-                                    <ul
-                                      aria-label="Primary navigation links, Management"
-                                      class="euiListGroup"
-                                      style="max-width: none;"
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
                                     >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                      <ul
+                                        aria-label="Primary navigation links, Management"
+                                        class="euiListGroup"
+                                        style="max-width: none;"
                                       >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="monitoring"
-                                          rel="noreferrer"
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                         >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="monitoring"
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="monitoring"
+                                            rel="noreferrer"
                                           >
-                                            monitoring
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="monitoring"
+                                            >
+                                              monitoring
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </ul>
+                                    </div>
                                   </div>
                                 </div>
                               </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiCollapsibleNavGroup"
-                            data-test-subj="collapsibleNavGroup-noCategory"
-                            id="mockId"
-                          >
                             <div
-                              class="euiCollapsibleNavGroup__children"
+                              class="euiCollapsibleNavGroup"
+                              data-test-subj="collapsibleNavGroup-noCategory"
+                              id="mockId"
                             >
-                              <ul
-                                class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                              <div
+                                class="euiCollapsibleNavGroup__children"
                               >
-                                <li
-                                  class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                <ul
+                                  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                 >
-                                  <a
-                                    class="euiListGroupItem__button"
-                                    data-test-subj="collapsibleNavAppLink"
-                                    href="canvas"
-                                    rel="noreferrer"
+                                  <li
+                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                   >
-                                    <span
-                                      class="euiListGroupItem__label"
-                                      title="canvas"
+                                    <a
+                                      class="euiListGroupItem__button"
+                                      data-test-subj="collapsibleNavAppLink"
+                                      href="canvas"
+                                      rel="noreferrer"
                                     >
-                                      canvas
-                                    </span>
-                                  </a>
-                                </li>
-                              </ul>
+                                      <span
+                                        class="euiListGroupItem__label"
+                                        title="canvas"
+                                      >
+                                        canvas
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                            id="mockId"
-                          >
                             <div
-                              class="euiCollapsibleNavGroup__children"
+                              class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                              id="mockId"
                             >
-                              <ul
-                                class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                              <div
+                                class="euiCollapsibleNavGroup__children"
                               >
-                                <li
-                                  class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                <ul
+                                  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                 >
-                                  <button
-                                    aria-label="Dock primary navigation"
-                                    class="euiListGroupItem__button"
-                                    data-test-subj="collapsible-nav-lock"
-                                    type="button"
+                                  <li
+                                    class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
                                   >
-                                    <div
-                                      class="euiListGroupItem__icon"
-                                      data-euiicon-type="lockOpen"
-                                    />
-                                    <span
-                                      class="euiListGroupItem__label"
-                                      title="Dock navigation"
-                                    >
-                                      Dock navigation
-                                    </span>
-                                  </button>
-                                </li>
-                              </ul>
-                            </div>
+                                    <button
+                                      aria-label="Dock primary navigation"
+                                      class="euiListGroupItem__button"
+                                      data-test-subj="collapsible-nav-lock"
+                                      type="button"
+                                    >
+                                      <div
+                                        class="euiListGroupItem__icon"
+                                        data-euiicon-type="lockOpen"
+                                      />
+                                      <span
+                                        class="euiListGroupItem__label"
+                                        title="Dock navigation"
+                                      >
+                                        Dock navigation
+                                      </span>
+                                    </button>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
                           </div>
-                        </div>
-                        <button
-                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonEmpty__content"
+                          <button
+                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                            type="button"
                           >
-                            <div
-                              aria-hidden="true"
-                              class="euiButtonEmpty__icon"
-                              data-euiicon-type="cross"
-                            />
                             <span
-                              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                              class="euiButtonContent euiButtonEmpty__content"
                             >
-                              close
+                              <div
+                                class="euiButtonContent__icon"
+                                data-euiicon-type="cross"
+                              />
+                              <span
+                                class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                              >
+                                close
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </nav>
-                    </div>
-                  }
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                >
-                  <FocusWatcher
-                    autoFocus={true}
-                    disabled={false}
-                    observed={
-                      <div
-                        data-focus-lock-disabled="false"
-                      >
-                        <nav
-                          aria-label="Primary"
-                          class="euiCollapsibleNav"
-                          data-test-subj="collapsibleNav"
-                          id="collapsibe-nav"
+                          </button>
+                        </nav>
+                      </div>
+                    }
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
+                    returnFocus={[Function]}
+                    shards={Array []}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <SideCar
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
                         >
-                          <div
-                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                            style="flex-shrink: 0;"
+                          <nav
+                            aria-label="Primary"
+                            class="euiCollapsibleNav"
+                            data-test-subj="collapsibleNav"
+                            id="collapsibe-nav"
                           >
                             <div
-                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                              id="mockId"
-                              style="max-height: 40vh;"
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                              style="flex-shrink: 0;"
                             >
                               <div
-                                class="euiCollapsibleNavGroup__children"
+                                class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                id="mockId"
+                                style="max-height: 40vh;"
                               >
-                                <ul
-                                  class="euiListGroup"
-                                  style="max-width: none;"
+                                <div
+                                  class="euiCollapsibleNavGroup__children"
                                 >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  <ul
+                                    class="euiListGroup"
+                                    style="max-width: none;"
                                   >
-                                    <a
-                                      class="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavCustomNavLink"
-                                      href="Custom link"
-                                      rel="noreferrer"
+                                    <li
+                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                     >
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Custom link"
+                                      <a
+                                        class="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavCustomNavLink"
+                                        href="Custom link"
+                                        rel="noreferrer"
                                       >
-                                        Custom link
-                                      </span>
-                                    </a>
-                                  </li>
-                                </ul>
+                                        <span
+                                          class="euiListGroupItem__label"
+                                          title="Custom link"
+                                        >
+                                          Custom link
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <hr
-                            class="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                          <div
-                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                            style="flex-shrink: 0;"
-                          >
+                            <hr
+                              class="euiHorizontalRule euiHorizontalRule--full"
+                            />
                             <div
-                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                              id="mockId"
-                              style="max-height: 40vh;"
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                              style="flex-shrink: 0;"
                             >
                               <div
-                                class="euiCollapsibleNavGroup__children"
+                                class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                id="mockId"
+                                style="max-height: 40vh;"
                               >
-                                <ul
-                                  aria-label="Pinned links"
-                                  class="euiListGroup"
-                                  style="max-width: none;"
+                                <div
+                                  class="euiCollapsibleNavGroup__children"
                                 >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  <ul
+                                    aria-label="Pinned links"
+                                    class="euiListGroup"
+                                    style="max-width: none;"
                                   >
-                                    <a
-                                      class="euiListGroupItem__button"
-                                      href="/"
-                                      rel="noreferrer"
+                                    <li
+                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                     >
-                                      <div
-                                        class="euiListGroupItem__icon"
-                                        data-euiicon-type="home"
-                                      />
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Home"
+                                      <a
+                                        class="euiListGroupItem__button"
+                                        href="/"
+                                        rel="noreferrer"
                                       >
-                                        Home
-                                      </span>
-                                    </a>
-                                  </li>
-                                </ul>
+                                        <div
+                                          class="euiListGroupItem__icon"
+                                          data-euiicon-type="home"
+                                        />
+                                        <span
+                                          class="euiListGroupItem__label"
+                                          title="Home"
+                                        >
+                                          Home
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-recentlyViewed"
-                          >
                             <div
-                              class="euiAccordion__triggerWrapper"
+                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-recentlyViewed"
                             >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded="true"
-                                class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                type="button"
+                              <div
+                                class="euiAccordion__triggerWrapper"
                               >
-                                <span
-                                  class="euiAccordion__iconWrapper"
-                                >
-                                  <div
-                                    class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    data-euiicon-type="arrowRight"
-                                  />
-                                </span>
-                                <span
-                                  class="euiIEFlexWrapFix"
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded="true"
+                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  type="button"
                                 >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                  <span
+                                    class="euiAccordion__iconWrapper"
                                   >
                                     <div
-                                      class="euiFlexItem"
+                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      data-euiicon-type="arrowRight"
+                                    />
+                                  </span>
+                                  <span
+                                    class="euiIEFlexWrapFix"
+                                  >
+                                    <div
+                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                     >
-                                      <h3
-                                        class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                        id="mockId__title"
+                                      <div
+                                        class="euiFlexItem"
                                       >
-                                        Recently viewed
-                                      </h3>
+                                        <h3
+                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Recently viewed
+                                        </h3>
+                                      </div>
                                     </div>
-                                  </div>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              class="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <div>
-                                <div
-                                  class=""
-                                >
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <div>
                                   <div
-                                    class="euiCollapsibleNavGroup__children"
+                                    class=""
                                   >
-                                    <ul
-                                      aria-label="Recently viewed links"
-                                      class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                      style="max-width: none;"
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
                                     >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                      <ul
+                                        aria-label="Recently viewed links"
+                                        class="euiListGroup kbnCollapsibleNav__recentsListGroup"
+                                        style="max-width: none;"
                                       >
-                                        <a
-                                          aria-label="recent 1"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink--recent"
-                                          href="http://localhost/recent%201"
-                                          rel="noreferrer"
-                                          title="recent 1"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="recent 1"
-                                          >
-                                            recent 1
-                                          </span>
-                                        </a>
-                                      </li>
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          aria-label="recent 2"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink--recent"
-                                          href="http://localhost/recent%202"
-                                          rel="noreferrer"
-                                          title="recent 2"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="recent 2"
-                                          >
-                                            recent 2
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <hr
-                            class="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                          <div
-                            class="euiFlexItem eui-yScroll"
-                          >
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-kibana"
-                            >
-                              <div
-                                class="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                                      >
-                                        <div
-                                          data-euiicon-type="logoKibana"
-                                        />
-                                      </div>
-                                      <div
-                                        class="euiFlexItem"
-                                      >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Kibana
-                                        </h3>
-                                      </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Primary navigation links, Kibana"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="discover"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="discover"
-                                            >
-                                              discover
-                                            </span>
-                                          </a>
-                                        </li>
                                         <li
                                           class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                         >
                                           <a
+                                            aria-label="recent 1"
                                             class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="visualize"
+                                            data-test-subj="collapsibleNavAppLink--recent"
+                                            href="http://localhost/recent%201"
                                             rel="noreferrer"
+                                            title="recent 1"
                                           >
                                             <span
                                               class="euiListGroupItem__label"
-                                              title="visualize"
+                                              title="recent 1"
                                             >
-                                              visualize
+                                              recent 1
                                             </span>
                                           </a>
                                         </li>
@@ -1442,16 +1364,18 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                           class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                         >
                                           <a
+                                            aria-label="recent 2"
                                             class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="dashboard"
+                                            data-test-subj="collapsibleNavAppLink--recent"
+                                            href="http://localhost/recent%202"
                                             rel="noreferrer"
+                                            title="recent 2"
                                           >
                                             <span
                                               class="euiListGroupItem__label"
-                                              title="dashboard"
+                                              title="recent 2"
                                             >
-                                              dashboard
+                                              recent 2
                                             </span>
                                           </a>
                                         </li>
@@ -1461,2983 +1385,3573 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                 </div>
                               </div>
                             </div>
+                            <hr
+                              class="euiHorizontalRule euiHorizontalRule--full"
+                            />
                             <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-observability"
+                              class="euiFlexItem eui-yScroll"
                             >
                               <div
-                                class="euiAccordion__triggerWrapper"
+                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-kibana"
                               >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
+                                <div
+                                  class="euiAccordion__triggerWrapper"
                                 >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
+                                  <button
+                                    aria-controls="mockId"
+                                    aria-expanded="true"
+                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                    type="button"
                                   >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    <span
+                                      class="euiAccordion__iconWrapper"
                                     >
                                       <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                                      >
-                                        <div
-                                          data-euiicon-type="logoObservability"
-                                        />
-                                      </div>
+                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                      />
+                                    </span>
+                                    <span
+                                      class="euiIEFlexWrapFix"
+                                    >
                                       <div
-                                        class="euiFlexItem"
+                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                       >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
+                                        <div
+                                          class="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
-                                          Observability
-                                        </h3>
+                                          <div
+                                            data-euiicon-type="logoKibana"
+                                          />
+                                        </div>
+                                        <div
+                                          class="euiFlexItem"
+                                        >
+                                          <h3
+                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                            id="mockId__title"
+                                          >
+                                            Kibana
+                                          </h3>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiAccordion__childWrapper"
+                                  id="mockId"
+                                >
+                                  <div>
                                     <div
-                                      class="euiCollapsibleNavGroup__children"
+                                      class=""
                                     >
-                                      <ul
-                                        aria-label="Primary navigation links, Observability"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
+                                      <div
+                                        class="euiCollapsibleNavGroup__children"
                                       >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        <ul
+                                          aria-label="Primary navigation links, Kibana"
+                                          class="euiListGroup"
+                                          style="max-width: none;"
                                         >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="metrics"
-                                            rel="noreferrer"
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                           >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="metrics"
+                                            <a
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink"
+                                              href="discover"
+                                              rel="noreferrer"
                                             >
-                                              metrics
-                                            </span>
-                                          </a>
-                                        </li>
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="logs"
-                                            rel="noreferrer"
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="discover"
+                                              >
+                                                discover
+                                              </span>
+                                            </a>
+                                          </li>
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                           >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="logs"
+                                            <a
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink"
+                                              href="visualize"
+                                              rel="noreferrer"
                                             >
-                                              logs
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="visualize"
+                                              >
+                                                visualize
+                                              </span>
+                                            </a>
+                                          </li>
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                          >
+                                            <a
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink"
+                                              href="dashboard"
+                                              rel="noreferrer"
+                                            >
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="dashboard"
+                                              >
+                                                dashboard
+                                              </span>
+                                            </a>
+                                          </li>
+                                        </ul>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                            </div>
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-security"
-                            >
                               <div
-                                class="euiAccordion__triggerWrapper"
+                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-observability"
                               >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
+                                <div
+                                  class="euiAccordion__triggerWrapper"
                                 >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
+                                  <button
+                                    aria-controls="mockId"
+                                    aria-expanded="true"
+                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                    type="button"
                                   >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    <span
+                                      class="euiAccordion__iconWrapper"
                                     >
                                       <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                      />
+                                    </span>
+                                    <span
+                                      class="euiIEFlexWrapFix"
+                                    >
+                                      <div
+                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                       >
                                         <div
-                                          data-euiicon-type="logoSecurity"
-                                        />
+                                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                                        >
+                                          <div
+                                            data-euiicon-type="logoObservability"
+                                          />
+                                        </div>
+                                        <div
+                                          class="euiFlexItem"
+                                        >
+                                          <h3
+                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                            id="mockId__title"
+                                          >
+                                            Observability
+                                          </h3>
+                                        </div>
                                       </div>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiAccordion__childWrapper"
+                                  id="mockId"
+                                >
+                                  <div>
+                                    <div
+                                      class=""
+                                    >
                                       <div
-                                        class="euiFlexItem"
+                                        class="euiCollapsibleNavGroup__children"
                                       >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
+                                        <ul
+                                          aria-label="Primary navigation links, Observability"
+                                          class="euiListGroup"
+                                          style="max-width: none;"
                                         >
-                                          Security
-                                        </h3>
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                          >
+                                            <a
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink"
+                                              href="metrics"
+                                              rel="noreferrer"
+                                            >
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="metrics"
+                                              >
+                                                metrics
+                                              </span>
+                                            </a>
+                                          </li>
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                          >
+                                            <a
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink"
+                                              href="logs"
+                                              rel="noreferrer"
+                                            >
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="logs"
+                                              >
+                                                logs
+                                              </span>
+                                            </a>
+                                          </li>
+                                        </ul>
                                       </div>
                                     </div>
-                                  </span>
-                                </button>
+                                  </div>
+                                </div>
                               </div>
                               <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
+                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-security"
                               >
-                                <div>
-                                  <div
-                                    class=""
+                                <div
+                                  class="euiAccordion__triggerWrapper"
+                                >
+                                  <button
+                                    aria-controls="mockId"
+                                    aria-expanded="true"
+                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                    type="button"
                                   >
+                                    <span
+                                      class="euiAccordion__iconWrapper"
+                                    >
+                                      <div
+                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                      />
+                                    </span>
+                                    <span
+                                      class="euiIEFlexWrapFix"
+                                    >
+                                      <div
+                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                      >
+                                        <div
+                                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                                        >
+                                          <div
+                                            data-euiicon-type="logoSecurity"
+                                          />
+                                        </div>
+                                        <div
+                                          class="euiFlexItem"
+                                        >
+                                          <h3
+                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                            id="mockId__title"
+                                          >
+                                            Security
+                                          </h3>
+                                        </div>
+                                      </div>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiAccordion__childWrapper"
+                                  id="mockId"
+                                >
+                                  <div>
                                     <div
-                                      class="euiCollapsibleNavGroup__children"
+                                      class=""
                                     >
-                                      <ul
-                                        aria-label="Primary navigation links, Security"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
+                                      <div
+                                        class="euiCollapsibleNavGroup__children"
                                       >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        <ul
+                                          aria-label="Primary navigation links, Security"
+                                          class="euiListGroup"
+                                          style="max-width: none;"
                                         >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="siem"
-                                            rel="noreferrer"
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                           >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="siem"
+                                            <a
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink"
+                                              href="siem"
+                                              rel="noreferrer"
                                             >
-                                              siem
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="siem"
+                                              >
+                                                siem
+                                              </span>
+                                            </a>
+                                          </li>
+                                        </ul>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                            </div>
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-management"
-                            >
                               <div
-                                class="euiAccordion__triggerWrapper"
+                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-management"
                               >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
+                                <div
+                                  class="euiAccordion__triggerWrapper"
                                 >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
+                                  <button
+                                    aria-controls="mockId"
+                                    aria-expanded="true"
+                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                    type="button"
                                   >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    <span
+                                      class="euiAccordion__iconWrapper"
                                     >
                                       <div
-                                        class="euiFlexItem"
+                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                      />
+                                    </span>
+                                    <span
+                                      class="euiIEFlexWrapFix"
+                                    >
+                                      <div
+                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                       >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
+                                        <div
+                                          class="euiFlexItem"
                                         >
-                                          Management
-                                        </h3>
+                                          <h3
+                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                            id="mockId__title"
+                                          >
+                                            Management
+                                          </h3>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiAccordion__childWrapper"
+                                  id="mockId"
+                                >
+                                  <div>
                                     <div
-                                      class="euiCollapsibleNavGroup__children"
+                                      class=""
                                     >
-                                      <ul
-                                        aria-label="Primary navigation links, Management"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
+                                      <div
+                                        class="euiCollapsibleNavGroup__children"
                                       >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        <ul
+                                          aria-label="Primary navigation links, Management"
+                                          class="euiListGroup"
+                                          style="max-width: none;"
                                         >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="monitoring"
-                                            rel="noreferrer"
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                           >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="monitoring"
+                                            <a
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink"
+                                              href="monitoring"
+                                              rel="noreferrer"
                                             >
-                                              monitoring
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="monitoring"
+                                              >
+                                                monitoring
+                                              </span>
+                                            </a>
+                                          </li>
+                                        </ul>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                            </div>
-                            <div
-                              class="euiCollapsibleNavGroup"
-                              data-test-subj="collapsibleNavGroup-noCategory"
-                              id="mockId"
-                            >
                               <div
-                                class="euiCollapsibleNavGroup__children"
+                                class="euiCollapsibleNavGroup"
+                                data-test-subj="collapsibleNavGroup-noCategory"
+                                id="mockId"
                               >
-                                <ul
-                                  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                <div
+                                  class="euiCollapsibleNavGroup__children"
                                 >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  <ul
+                                    class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                   >
-                                    <a
-                                      class="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      href="canvas"
-                                      rel="noreferrer"
+                                    <li
+                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                     >
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="canvas"
+                                      <a
+                                        class="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="canvas"
+                                        rel="noreferrer"
                                       >
-                                        canvas
-                                      </span>
-                                    </a>
-                                  </li>
-                                </ul>
+                                        <span
+                                          class="euiListGroupItem__label"
+                                          title="canvas"
+                                        >
+                                          canvas
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </div>
                               </div>
-                            </div>
-                            <div
-                              class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                              id="mockId"
-                            >
                               <div
-                                class="euiCollapsibleNavGroup__children"
+                                class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                id="mockId"
                               >
-                                <ul
-                                  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                <div
+                                  class="euiCollapsibleNavGroup__children"
                                 >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                  <ul
+                                    class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                   >
-                                    <button
-                                      aria-label="Dock primary navigation"
-                                      class="euiListGroupItem__button"
-                                      data-test-subj="collapsible-nav-lock"
-                                      type="button"
+                                    <li
+                                      class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <div
-                                        class="euiListGroupItem__icon"
-                                        data-euiicon-type="lockOpen"
-                                      />
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Dock navigation"
+                                      <button
+                                        aria-label="Dock primary navigation"
+                                        class="euiListGroupItem__button"
+                                        data-test-subj="collapsible-nav-lock"
+                                        type="button"
                                       >
-                                        Dock navigation
-                                      </span>
-                                    </button>
-                                  </li>
-                                </ul>
+                                        <div
+                                          class="euiListGroupItem__icon"
+                                          data-euiicon-type="lockOpen"
+                                        />
+                                        <span
+                                          class="euiListGroupItem__label"
+                                          title="Dock navigation"
+                                        >
+                                          Dock navigation
+                                        </span>
+                                      </button>
+                                    </li>
+                                  </ul>
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <button
-                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                            type="button"
-                          >
-                            <span
-                              class="euiButtonEmpty__content"
+                            <button
+                              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                              type="button"
                             >
-                              <div
-                                aria-hidden="true"
-                                class="euiButtonEmpty__icon"
-                                data-euiicon-type="cross"
-                              />
                               <span
-                                class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                              >
-                                close
-                              </span>
-                            </span>
-                          </button>
-                        </nav>
-                      </div>
-                    }
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
-                  />
-                </SideEffect(FocusWatcher)>
-                <nav
-                  aria-label="Primary"
-                  className="euiCollapsibleNav"
-                  data-test-subj="collapsibleNav"
-                  id="collapsibe-nav"
-                >
-                  <EuiFlexItem
-                    grow={false}
-                    style={
-                      Object {
-                        "flexShrink": 0,
-                      }
-                    }
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "flexShrink": 0,
-                        }
-                      }
-                    >
-                      <EuiCollapsibleNavGroup
-                        background="light"
-                        className="eui-yScroll"
-                        style={
-                          Object {
-                            "maxHeight": "40vh",
-                          }
-                        }
-                      >
-                        <div
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                          id="mockId"
-                          style={
-                            Object {
-                              "maxHeight": "40vh",
-                            }
-                          }
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              color="text"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "data-test-subj": "collapsibleNavCustomNavLink",
-                                    "href": "Custom link",
-                                    "icon": undefined,
-                                    "iconType": undefined,
-                                    "isActive": false,
-                                    "isDisabled": undefined,
-                                    "label": "Custom link",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
-                            >
-                              <ul
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
+                                class="euiButtonContent euiButtonEmpty__content"
                               >
-                                <EuiListGroupItem
-                                  color="text"
-                                  data-test-subj="collapsibleNavCustomNavLink"
-                                  href="Custom link"
-                                  isActive={false}
-                                  key="title-0"
-                                  label="Custom link"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
+                                <div
+                                  class="euiButtonContent__icon"
+                                  data-euiicon-type="cross"
+                                />
+                                <span
+                                  class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                                 >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavCustomNavLink"
-                                      href="Custom link"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
-                                    >
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="Custom link"
-                                      >
-                                        Custom link
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
+                                  close
+                                </span>
+                              </span>
+                            </button>
+                          </nav>
                         </div>
-                      </EuiCollapsibleNavGroup>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiHorizontalRule
-                    margin="none"
-                  >
-                    <hr
-                      className="euiHorizontalRule euiHorizontalRule--full"
-                    />
-                  </EuiHorizontalRule>
-                  <EuiFlexItem
-                    grow={false}
-                    style={
-                      Object {
-                        "flexShrink": 0,
                       }
-                    }
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                      sideCar={
                         Object {
-                          "flexShrink": 0,
+                          "assignMedium": [Function],
+                          "assignSyncMedium": [Function],
+                          "options": Object {
+                            "async": true,
+                            "ssr": false,
+                          },
+                          "read": [Function],
+                          "useMedium": [Function],
                         }
                       }
                     >
-                      <EuiCollapsibleNavGroup
-                        background="light"
-                        className="eui-yScroll"
-                        style={
-                          Object {
-                            "maxHeight": "40vh",
-                          }
-                        }
-                      >
-                        <div
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                          id="mockId"
-                          style={
-                            Object {
-                              "maxHeight": "40vh",
-                            }
-                          }
-                        >
+                      <SideEffect(FocusWatcher)
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
                           <div
-                            className="euiCollapsibleNavGroup__children"
+                            data-focus-lock-disabled="false"
                           >
-                            <EuiListGroup
-                              aria-label="Pinned links"
-                              color="text"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "href": "/",
-                                    "iconType": "home",
-                                    "label": "Home",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
+                            <nav
+                              aria-label="Primary"
+                              class="euiCollapsibleNav"
+                              data-test-subj="collapsibleNav"
+                              id="collapsibe-nav"
                             >
-                              <ul
-                                aria-label="Pinned links"
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
+                              <div
+                                class="euiFlexItem euiFlexItem--flexGrowZero"
+                                style="flex-shrink: 0;"
                               >
-                                <EuiListGroupItem
-                                  color="text"
-                                  href="/"
-                                  iconType="home"
-                                  key="title-0"
-                                  label="Home"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
+                                <div
+                                  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                  id="mockId"
+                                  style="max-height: 40vh;"
                                 >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  <div
+                                    class="euiCollapsibleNavGroup__children"
                                   >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      href="/"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
+                                    <ul
+                                      class="euiListGroup"
+                                      style="max-width: none;"
                                     >
-                                      <EuiIcon
-                                        className="euiListGroupItem__icon"
-                                        type="home"
-                                      >
-                                        <div
-                                          className="euiListGroupItem__icon"
-                                          data-euiicon-type="home"
-                                        />
-                                      </EuiIcon>
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="Home"
+                                      <li
+                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                       >
-                                        Home
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </EuiCollapsibleNavGroup>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiCollapsibleNavGroup
-                    background="light"
-                    data-test-subj="collapsibleNavGroup-recentlyViewed"
-                    initialIsOpen={true}
-                    isCollapsible={true}
-                    key="recentlyViewed"
-                    onToggle={[Function]}
-                    title="Recently viewed"
-                  >
-                    <EuiAccordion
-                      arrowDisplay="right"
-                      buttonClassName="euiCollapsibleNavGroup__heading"
-                      buttonContent={
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <EuiFlexItem>
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <h3
-                                className="euiCollapsibleNavGroup__title"
-                                id="mockId__title"
-                              >
-                                Recently viewed
-                              </h3>
-                            </EuiTitle>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      }
-                      className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                      data-test-subj="collapsibleNavGroup-recentlyViewed"
-                      id="mockId"
-                      initialIsOpen={true}
-                      onToggle={[Function]}
-                      paddingSize="none"
-                    >
-                      <div
-                        className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                        data-test-subj="collapsibleNavGroup-recentlyViewed"
-                        onToggle={[Function]}
-                      >
-                        <div
-                          className="euiAccordion__triggerWrapper"
-                        >
-                          <button
-                            aria-controls="mockId"
-                            aria-expanded={true}
-                            className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <span
-                              className="euiAccordion__iconWrapper"
-                            >
-                              <EuiIcon
-                                className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                size="m"
-                                type="arrowRight"
-                              >
-                                <div
-                                  className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                  data-euiicon-type="arrowRight"
-                                  size="m"
-                                />
-                              </EuiIcon>
-                            </span>
-                            <span
-                              className="euiIEFlexWrapFix"
-                            >
-                              <EuiFlexGroup
-                                alignItems="center"
-                                gutterSize="m"
-                                responsive={false}
+                                        <a
+                                          class="euiListGroupItem__button"
+                                          data-test-subj="collapsibleNavCustomNavLink"
+                                          href="Custom link"
+                                          rel="noreferrer"
+                                        >
+                                          <span
+                                            class="euiListGroupItem__label"
+                                            title="Custom link"
+                                          >
+                                            Custom link
+                                          </span>
+                                        </a>
+                                      </li>
+                                    </ul>
+                                  </div>
+                                </div>
+                              </div>
+                              <hr
+                                class="euiHorizontalRule euiHorizontalRule--full"
+                              />
+                              <div
+                                class="euiFlexItem euiFlexItem--flexGrowZero"
+                                style="flex-shrink: 0;"
                               >
                                 <div
-                                  className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                  id="mockId"
+                                  style="max-height: 40vh;"
                                 >
-                                  <EuiFlexItem>
-                                    <div
-                                      className="euiFlexItem"
+                                  <div
+                                    class="euiCollapsibleNavGroup__children"
+                                  >
+                                    <ul
+                                      aria-label="Pinned links"
+                                      class="euiListGroup"
+                                      style="max-width: none;"
                                     >
-                                      <EuiTitle
-                                        size="xxs"
+                                      <li
+                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                       >
-                                        <h3
-                                          className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
+                                        <a
+                                          class="euiListGroupItem__button"
+                                          href="/"
+                                          rel="noreferrer"
                                         >
-                                          Recently viewed
-                                        </h3>
-                                      </EuiTitle>
-                                    </div>
-                                  </EuiFlexItem>
+                                          <div
+                                            class="euiListGroupItem__icon"
+                                            data-euiicon-type="home"
+                                          />
+                                          <span
+                                            class="euiListGroupItem__label"
+                                            title="Home"
+                                          >
+                                            Home
+                                          </span>
+                                        </a>
+                                      </li>
+                                    </ul>
+                                  </div>
                                 </div>
-                              </EuiFlexGroup>
-                            </span>
-                          </button>
-                        </div>
-                        <div
-                          className="euiAccordion__childWrapper"
-                          id="mockId"
-                        >
-                          <EuiResizeObserver
-                            onResize={[Function]}
-                          >
-                            <div>
+                              </div>
                               <div
-                                className=""
+                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-recentlyViewed"
                               >
                                 <div
-                                  className="euiCollapsibleNavGroup__children"
+                                  class="euiAccordion__triggerWrapper"
                                 >
-                                  <EuiListGroup
-                                    aria-label="Recently viewed links"
-                                    className="kbnCollapsibleNav__recentsListGroup"
-                                    color="subdued"
-                                    gutterSize="none"
-                                    listItems={
-                                      Array [
-                                        Object {
-                                          "aria-label": "recent 1",
-                                          "data-test-subj": "collapsibleNavAppLink--recent",
-                                          "href": "http://localhost/recent%201",
-                                          "label": "recent 1",
-                                          "onClick": [Function],
-                                          "title": "recent 1",
-                                        },
-                                        Object {
-                                          "aria-label": "recent 2",
-                                          "data-test-subj": "collapsibleNavAppLink--recent",
-                                          "href": "http://localhost/recent%202",
-                                          "label": "recent 2",
-                                          "onClick": [Function],
-                                          "title": "recent 2",
-                                        },
-                                      ]
-                                    }
-                                    maxWidth="none"
-                                    size="s"
+                                  <button
+                                    aria-controls="mockId"
+                                    aria-expanded="true"
+                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                    type="button"
                                   >
-                                    <ul
-                                      aria-label="Recently viewed links"
-                                      className="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                      style={
-                                        Object {
-                                          "maxWidth": "none",
-                                        }
-                                      }
+                                    <span
+                                      class="euiAccordion__iconWrapper"
                                     >
-                                      <EuiListGroupItem
-                                        aria-label="recent 1"
-                                        color="subdued"
-                                        data-test-subj="collapsibleNavAppLink--recent"
-                                        href="http://localhost/recent%201"
-                                        key="title-0"
-                                        label="recent 1"
-                                        onClick={[Function]}
-                                        showToolTip={false}
-                                        size="s"
-                                        title="recent 1"
-                                        wrapText={false}
+                                      <div
+                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                      />
+                                    </span>
+                                    <span
+                                      class="euiIEFlexWrapFix"
+                                    >
+                                      <div
+                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                       >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        <div
+                                          class="euiFlexItem"
                                         >
-                                          <a
-                                            aria-label="recent 1"
-                                            className="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink--recent"
-                                            href="http://localhost/recent%201"
-                                            onClick={[Function]}
-                                            rel="noreferrer"
-                                            title="recent 1"
+                                          <h3
+                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                            id="mockId__title"
                                           >
-                                            <span
-                                              className="euiListGroupItem__label"
-                                              title="recent 1"
-                                            >
-                                              recent 1
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </EuiListGroupItem>
-                                      <EuiListGroupItem
-                                        aria-label="recent 2"
-                                        color="subdued"
-                                        data-test-subj="collapsibleNavAppLink--recent"
-                                        href="http://localhost/recent%202"
-                                        key="title-1"
-                                        label="recent 2"
-                                        onClick={[Function]}
-                                        showToolTip={false}
-                                        size="s"
-                                        title="recent 2"
-                                        wrapText={false}
+                                            Recently viewed
+                                          </h3>
+                                        </div>
+                                      </div>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiAccordion__childWrapper"
+                                  id="mockId"
+                                >
+                                  <div>
+                                    <div
+                                      class=""
+                                    >
+                                      <div
+                                        class="euiCollapsibleNavGroup__children"
                                       >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        <ul
+                                          aria-label="Recently viewed links"
+                                          class="euiListGroup kbnCollapsibleNav__recentsListGroup"
+                                          style="max-width: none;"
                                         >
-                                          <a
-                                            aria-label="recent 2"
-                                            className="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink--recent"
-                                            href="http://localhost/recent%202"
-                                            onClick={[Function]}
-                                            rel="noreferrer"
-                                            title="recent 2"
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                           >
-                                            <span
-                                              className="euiListGroupItem__label"
+                                            <a
+                                              aria-label="recent 1"
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink--recent"
+                                              href="http://localhost/recent%201"
+                                              rel="noreferrer"
+                                              title="recent 1"
+                                            >
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="recent 1"
+                                              >
+                                                recent 1
+                                              </span>
+                                            </a>
+                                          </li>
+                                          <li
+                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                          >
+                                            <a
+                                              aria-label="recent 2"
+                                              class="euiListGroupItem__button"
+                                              data-test-subj="collapsibleNavAppLink--recent"
+                                              href="http://localhost/recent%202"
+                                              rel="noreferrer"
                                               title="recent 2"
                                             >
-                                              recent 2
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </EuiListGroupItem>
-                                    </ul>
-                                  </EuiListGroup>
+                                              <span
+                                                class="euiListGroupItem__label"
+                                                title="recent 2"
+                                              >
+                                                recent 2
+                                              </span>
+                                            </a>
+                                          </li>
+                                        </ul>
+                                      </div>
+                                    </div>
+                                  </div>
                                 </div>
                               </div>
-                            </div>
-                          </EuiResizeObserver>
-                        </div>
-                      </div>
-                    </EuiAccordion>
-                  </EuiCollapsibleNavGroup>
-                  <EuiHorizontalRule
-                    margin="none"
-                  >
-                    <hr
-                      className="euiHorizontalRule euiHorizontalRule--full"
-                    />
-                  </EuiHorizontalRule>
-                  <EuiFlexItem
-                    className="eui-yScroll"
-                  >
-                    <div
-                      className="euiFlexItem eui-yScroll"
-                    >
-                      <EuiCollapsibleNavGroup
-                        data-test-subj="collapsibleNavGroup-kibana"
-                        iconType="logoKibana"
-                        initialIsOpen={true}
-                        isCollapsible={true}
-                        key="kibana"
-                        onToggle={[Function]}
-                        title="Kibana"
-                      >
-                        <EuiAccordion
-                          arrowDisplay="right"
-                          buttonClassName="euiCollapsibleNavGroup__heading"
-                          buttonContent={
-                            <EuiFlexGroup
-                              alignItems="center"
-                              gutterSize="m"
-                              responsive={false}
-                            >
-                              <EuiFlexItem
-                                grow={false}
-                              >
-                                <EuiIcon
-                                  size="l"
-                                  type="logoKibana"
-                                />
-                              </EuiFlexItem>
-                              <EuiFlexItem>
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Kibana
-                                  </h3>
-                                </EuiTitle>
-                              </EuiFlexItem>
-                            </EuiFlexGroup>
-                          }
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                          data-test-subj="collapsibleNavGroup-kibana"
-                          id="mockId"
-                          initialIsOpen={true}
-                          onToggle={[Function]}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-kibana"
-                            onToggle={[Function]}
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded={true}
-                                className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                onClick={[Function]}
-                                type="button"
+                              <hr
+                                class="euiHorizontalRule euiHorizontalRule--full"
+                              />
+                              <div
+                                class="euiFlexItem eui-yScroll"
                               >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
+                                <div
+                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-kibana"
                                 >
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
+                                  <div
+                                    class="euiAccordion__triggerWrapper"
                                   >
-                                    <div
-                                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded="true"
+                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      type="button"
                                     >
-                                      <EuiFlexItem
-                                        grow={false}
+                                      <span
+                                        class="euiAccordion__iconWrapper"
+                                      >
+                                        <div
+                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          data-euiicon-type="arrowRight"
+                                        />
+                                      </span>
+                                      <span
+                                        class="euiIEFlexWrapFix"
                                       >
                                         <div
-                                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                         >
-                                          <EuiIcon
-                                            size="l"
-                                            type="logoKibana"
+                                          <div
+                                            class="euiFlexItem euiFlexItem--flexGrowZero"
                                           >
                                             <div
                                               data-euiicon-type="logoKibana"
-                                              size="l"
                                             />
-                                          </EuiIcon>
-                                        </div>
-                                      </EuiFlexItem>
-                                      <EuiFlexItem>
-                                        <div
-                                          className="euiFlexItem"
-                                        >
-                                          <EuiTitle
-                                            size="xxs"
+                                          </div>
+                                          <div
+                                            class="euiFlexItem"
                                           >
                                             <h3
-                                              className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
                                               id="mockId__title"
                                             >
                                               Kibana
                                             </h3>
-                                          </EuiTitle>
+                                          </div>
                                         </div>
-                                      </EuiFlexItem>
-                                    </div>
-                                  </EuiFlexGroup>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
+                                      </span>
+                                    </button>
+                                  </div>
                                   <div
-                                    className=""
+                                    class="euiAccordion__childWrapper"
+                                    id="mockId"
                                   >
-                                    <div
-                                      className="euiCollapsibleNavGroup__children"
-                                    >
-                                      <EuiListGroup
-                                        aria-label="Primary navigation links, Kibana"
-                                        color="subdued"
-                                        gutterSize="none"
-                                        listItems={
-                                          Array [
-                                            Object {
-                                              "data-test-subj": "collapsibleNavAppLink",
-                                              "href": "discover",
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "discover",
-                                              "onClick": [Function],
-                                            },
-                                            Object {
-                                              "data-test-subj": "collapsibleNavAppLink",
-                                              "href": "visualize",
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "visualize",
-                                              "onClick": [Function],
-                                            },
-                                            Object {
-                                              "data-test-subj": "collapsibleNavAppLink",
-                                              "href": "dashboard",
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "dashboard",
-                                              "onClick": [Function],
-                                            },
-                                          ]
-                                        }
-                                        maxWidth="none"
-                                        size="s"
+                                    <div>
+                                      <div
+                                        class=""
                                       >
-                                        <ul
-                                          aria-label="Primary navigation links, Kibana"
-                                          className="euiListGroup"
-                                          style={
-                                            Object {
-                                              "maxWidth": "none",
-                                            }
-                                          }
+                                        <div
+                                          class="euiCollapsibleNavGroup__children"
                                         >
-                                          <EuiListGroupItem
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="discover"
-                                            isActive={false}
-                                            key="title-0"
-                                            label="discover"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
+                                          <ul
+                                            aria-label="Primary navigation links, Kibana"
+                                            class="euiListGroup"
+                                            style="max-width: none;"
                                           >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                className="euiListGroupItem__button"
+                                                class="euiListGroupItem__button"
                                                 data-test-subj="collapsibleNavAppLink"
                                                 href="discover"
-                                                onClick={[Function]}
                                                 rel="noreferrer"
                                               >
                                                 <span
-                                                  className="euiListGroupItem__label"
+                                                  class="euiListGroupItem__label"
                                                   title="discover"
                                                 >
                                                   discover
                                                 </span>
                                               </a>
                                             </li>
-                                          </EuiListGroupItem>
-                                          <EuiListGroupItem
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="visualize"
-                                            isActive={false}
-                                            key="title-1"
-                                            label="visualize"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
-                                          >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                className="euiListGroupItem__button"
+                                                class="euiListGroupItem__button"
                                                 data-test-subj="collapsibleNavAppLink"
                                                 href="visualize"
-                                                onClick={[Function]}
                                                 rel="noreferrer"
                                               >
                                                 <span
-                                                  className="euiListGroupItem__label"
+                                                  class="euiListGroupItem__label"
                                                   title="visualize"
                                                 >
                                                   visualize
                                                 </span>
                                               </a>
                                             </li>
-                                          </EuiListGroupItem>
-                                          <EuiListGroupItem
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="dashboard"
-                                            isActive={false}
-                                            key="title-2"
-                                            label="dashboard"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
-                                          >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                className="euiListGroupItem__button"
+                                                class="euiListGroupItem__button"
                                                 data-test-subj="collapsibleNavAppLink"
                                                 href="dashboard"
-                                                onClick={[Function]}
                                                 rel="noreferrer"
                                               >
                                                 <span
-                                                  className="euiListGroupItem__label"
+                                                  class="euiListGroupItem__label"
                                                   title="dashboard"
                                                 >
                                                   dashboard
                                                 </span>
                                               </a>
                                             </li>
-                                          </EuiListGroupItem>
-                                        </ul>
-                                      </EuiListGroup>
+                                          </ul>
+                                        </div>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </EuiCollapsibleNavGroup>
-                      <EuiCollapsibleNavGroup
-                        data-test-subj="collapsibleNavGroup-observability"
-                        iconType="logoObservability"
-                        initialIsOpen={true}
-                        isCollapsible={true}
-                        key="observability"
-                        onToggle={[Function]}
-                        title="Observability"
-                      >
-                        <EuiAccordion
-                          arrowDisplay="right"
-                          buttonClassName="euiCollapsibleNavGroup__heading"
-                          buttonContent={
-                            <EuiFlexGroup
-                              alignItems="center"
-                              gutterSize="m"
-                              responsive={false}
-                            >
-                              <EuiFlexItem
-                                grow={false}
-                              >
-                                <EuiIcon
-                                  size="l"
-                                  type="logoObservability"
-                                />
-                              </EuiFlexItem>
-                              <EuiFlexItem>
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Observability
-                                  </h3>
-                                </EuiTitle>
-                              </EuiFlexItem>
-                            </EuiFlexGroup>
-                          }
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                          data-test-subj="collapsibleNavGroup-observability"
-                          id="mockId"
-                          initialIsOpen={true}
-                          onToggle={[Function]}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-observability"
-                            onToggle={[Function]}
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded={true}
-                                className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
+                                <div
+                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-observability"
                                 >
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
+                                  <div
+                                    class="euiAccordion__triggerWrapper"
                                   >
-                                    <div
-                                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded="true"
+                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      type="button"
                                     >
-                                      <EuiFlexItem
-                                        grow={false}
+                                      <span
+                                        class="euiAccordion__iconWrapper"
+                                      >
+                                        <div
+                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          data-euiicon-type="arrowRight"
+                                        />
+                                      </span>
+                                      <span
+                                        class="euiIEFlexWrapFix"
                                       >
                                         <div
-                                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                         >
-                                          <EuiIcon
-                                            size="l"
-                                            type="logoObservability"
+                                          <div
+                                            class="euiFlexItem euiFlexItem--flexGrowZero"
                                           >
                                             <div
                                               data-euiicon-type="logoObservability"
-                                              size="l"
                                             />
-                                          </EuiIcon>
-                                        </div>
-                                      </EuiFlexItem>
-                                      <EuiFlexItem>
-                                        <div
-                                          className="euiFlexItem"
-                                        >
-                                          <EuiTitle
-                                            size="xxs"
+                                          </div>
+                                          <div
+                                            class="euiFlexItem"
                                           >
                                             <h3
-                                              className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
                                               id="mockId__title"
                                             >
                                               Observability
                                             </h3>
-                                          </EuiTitle>
+                                          </div>
                                         </div>
-                                      </EuiFlexItem>
-                                    </div>
-                                  </EuiFlexGroup>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
+                                      </span>
+                                    </button>
+                                  </div>
                                   <div
-                                    className=""
+                                    class="euiAccordion__childWrapper"
+                                    id="mockId"
                                   >
-                                    <div
-                                      className="euiCollapsibleNavGroup__children"
-                                    >
-                                      <EuiListGroup
-                                        aria-label="Primary navigation links, Observability"
-                                        color="subdued"
-                                        gutterSize="none"
-                                        listItems={
-                                          Array [
-                                            Object {
-                                              "data-test-subj": "collapsibleNavAppLink",
-                                              "href": "metrics",
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "metrics",
-                                              "onClick": [Function],
-                                            },
-                                            Object {
-                                              "data-test-subj": "collapsibleNavAppLink",
-                                              "href": "logs",
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "logs",
-                                              "onClick": [Function],
-                                            },
-                                          ]
-                                        }
-                                        maxWidth="none"
-                                        size="s"
+                                    <div>
+                                      <div
+                                        class=""
                                       >
-                                        <ul
-                                          aria-label="Primary navigation links, Observability"
-                                          className="euiListGroup"
-                                          style={
-                                            Object {
-                                              "maxWidth": "none",
-                                            }
-                                          }
+                                        <div
+                                          class="euiCollapsibleNavGroup__children"
                                         >
-                                          <EuiListGroupItem
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="metrics"
-                                            isActive={false}
-                                            key="title-0"
-                                            label="metrics"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
+                                          <ul
+                                            aria-label="Primary navigation links, Observability"
+                                            class="euiListGroup"
+                                            style="max-width: none;"
                                           >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                className="euiListGroupItem__button"
+                                                class="euiListGroupItem__button"
                                                 data-test-subj="collapsibleNavAppLink"
                                                 href="metrics"
-                                                onClick={[Function]}
                                                 rel="noreferrer"
                                               >
                                                 <span
-                                                  className="euiListGroupItem__label"
+                                                  class="euiListGroupItem__label"
                                                   title="metrics"
                                                 >
                                                   metrics
                                                 </span>
                                               </a>
                                             </li>
-                                          </EuiListGroupItem>
-                                          <EuiListGroupItem
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="logs"
-                                            isActive={false}
-                                            key="title-1"
-                                            label="logs"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
-                                          >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                className="euiListGroupItem__button"
+                                                class="euiListGroupItem__button"
                                                 data-test-subj="collapsibleNavAppLink"
                                                 href="logs"
-                                                onClick={[Function]}
                                                 rel="noreferrer"
                                               >
                                                 <span
-                                                  className="euiListGroupItem__label"
+                                                  class="euiListGroupItem__label"
                                                   title="logs"
                                                 >
                                                   logs
                                                 </span>
                                               </a>
                                             </li>
-                                          </EuiListGroupItem>
-                                        </ul>
-                                      </EuiListGroup>
+                                          </ul>
+                                        </div>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </EuiCollapsibleNavGroup>
-                      <EuiCollapsibleNavGroup
-                        data-test-subj="collapsibleNavGroup-security"
-                        iconType="logoSecurity"
-                        initialIsOpen={true}
-                        isCollapsible={true}
-                        key="security"
-                        onToggle={[Function]}
-                        title="Security"
-                      >
-                        <EuiAccordion
-                          arrowDisplay="right"
-                          buttonClassName="euiCollapsibleNavGroup__heading"
-                          buttonContent={
-                            <EuiFlexGroup
-                              alignItems="center"
-                              gutterSize="m"
-                              responsive={false}
-                            >
-                              <EuiFlexItem
-                                grow={false}
-                              >
-                                <EuiIcon
-                                  size="l"
-                                  type="logoSecurity"
-                                />
-                              </EuiFlexItem>
-                              <EuiFlexItem>
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Security
-                                  </h3>
-                                </EuiTitle>
-                              </EuiFlexItem>
-                            </EuiFlexGroup>
-                          }
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                          data-test-subj="collapsibleNavGroup-security"
-                          id="mockId"
-                          initialIsOpen={true}
-                          onToggle={[Function]}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-security"
-                            onToggle={[Function]}
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded={true}
-                                className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
+                                <div
+                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-security"
                                 >
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
+                                  <div
+                                    class="euiAccordion__triggerWrapper"
                                   >
-                                    <div
-                                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded="true"
+                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      type="button"
                                     >
-                                      <EuiFlexItem
-                                        grow={false}
+                                      <span
+                                        class="euiAccordion__iconWrapper"
+                                      >
+                                        <div
+                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          data-euiicon-type="arrowRight"
+                                        />
+                                      </span>
+                                      <span
+                                        class="euiIEFlexWrapFix"
                                       >
                                         <div
-                                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                         >
-                                          <EuiIcon
-                                            size="l"
-                                            type="logoSecurity"
+                                          <div
+                                            class="euiFlexItem euiFlexItem--flexGrowZero"
                                           >
                                             <div
                                               data-euiicon-type="logoSecurity"
-                                              size="l"
                                             />
-                                          </EuiIcon>
-                                        </div>
-                                      </EuiFlexItem>
-                                      <EuiFlexItem>
-                                        <div
-                                          className="euiFlexItem"
-                                        >
-                                          <EuiTitle
-                                            size="xxs"
+                                          </div>
+                                          <div
+                                            class="euiFlexItem"
                                           >
                                             <h3
-                                              className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
                                               id="mockId__title"
                                             >
                                               Security
                                             </h3>
-                                          </EuiTitle>
+                                          </div>
                                         </div>
-                                      </EuiFlexItem>
-                                    </div>
-                                  </EuiFlexGroup>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
+                                      </span>
+                                    </button>
+                                  </div>
                                   <div
-                                    className=""
+                                    class="euiAccordion__childWrapper"
+                                    id="mockId"
                                   >
-                                    <div
-                                      className="euiCollapsibleNavGroup__children"
-                                    >
-                                      <EuiListGroup
-                                        aria-label="Primary navigation links, Security"
-                                        color="subdued"
-                                        gutterSize="none"
-                                        listItems={
-                                          Array [
-                                            Object {
-                                              "data-test-subj": "collapsibleNavAppLink",
-                                              "href": "siem",
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "siem",
-                                              "onClick": [Function],
-                                            },
-                                          ]
-                                        }
-                                        maxWidth="none"
-                                        size="s"
+                                    <div>
+                                      <div
+                                        class=""
                                       >
-                                        <ul
-                                          aria-label="Primary navigation links, Security"
-                                          className="euiListGroup"
-                                          style={
-                                            Object {
-                                              "maxWidth": "none",
-                                            }
-                                          }
+                                        <div
+                                          class="euiCollapsibleNavGroup__children"
                                         >
-                                          <EuiListGroupItem
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="siem"
-                                            isActive={false}
-                                            key="title-0"
-                                            label="siem"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
+                                          <ul
+                                            aria-label="Primary navigation links, Security"
+                                            class="euiListGroup"
+                                            style="max-width: none;"
                                           >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                className="euiListGroupItem__button"
+                                                class="euiListGroupItem__button"
                                                 data-test-subj="collapsibleNavAppLink"
                                                 href="siem"
-                                                onClick={[Function]}
                                                 rel="noreferrer"
                                               >
                                                 <span
-                                                  className="euiListGroupItem__label"
+                                                  class="euiListGroupItem__label"
                                                   title="siem"
                                                 >
                                                   siem
                                                 </span>
                                               </a>
                                             </li>
-                                          </EuiListGroupItem>
-                                        </ul>
-                                      </EuiListGroup>
+                                          </ul>
+                                        </div>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </EuiCollapsibleNavGroup>
-                      <EuiCollapsibleNavGroup
-                        data-test-subj="collapsibleNavGroup-management"
-                        initialIsOpen={true}
-                        isCollapsible={true}
-                        key="management"
-                        onToggle={[Function]}
-                        title="Management"
-                      >
-                        <EuiAccordion
-                          arrowDisplay="right"
-                          buttonClassName="euiCollapsibleNavGroup__heading"
-                          buttonContent={
-                            <EuiFlexGroup
-                              alignItems="center"
-                              gutterSize="m"
-                              responsive={false}
-                            >
-                              <EuiFlexItem>
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Management
-                                  </h3>
-                                </EuiTitle>
-                              </EuiFlexItem>
-                            </EuiFlexGroup>
-                          }
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                          data-test-subj="collapsibleNavGroup-management"
-                          id="mockId"
-                          initialIsOpen={true}
-                          onToggle={[Function]}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-management"
-                            onToggle={[Function]}
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded={true}
-                                className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
+                                <div
+                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-management"
                                 >
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
+                                  <div
+                                    class="euiAccordion__triggerWrapper"
                                   >
-                                    <div
-                                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded="true"
+                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      type="button"
                                     >
-                                      <EuiFlexItem>
+                                      <span
+                                        class="euiAccordion__iconWrapper"
+                                      >
+                                        <div
+                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          data-euiicon-type="arrowRight"
+                                        />
+                                      </span>
+                                      <span
+                                        class="euiIEFlexWrapFix"
+                                      >
                                         <div
-                                          className="euiFlexItem"
+                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                         >
-                                          <EuiTitle
-                                            size="xxs"
+                                          <div
+                                            class="euiFlexItem"
                                           >
                                             <h3
-                                              className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
                                               id="mockId__title"
                                             >
                                               Management
                                             </h3>
-                                          </EuiTitle>
+                                          </div>
                                         </div>
-                                      </EuiFlexItem>
-                                    </div>
-                                  </EuiFlexGroup>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
+                                      </span>
+                                    </button>
+                                  </div>
                                   <div
-                                    className=""
+                                    class="euiAccordion__childWrapper"
+                                    id="mockId"
                                   >
-                                    <div
-                                      className="euiCollapsibleNavGroup__children"
-                                    >
-                                      <EuiListGroup
-                                        aria-label="Primary navigation links, Management"
-                                        color="subdued"
-                                        gutterSize="none"
-                                        listItems={
-                                          Array [
-                                            Object {
-                                              "data-test-subj": "collapsibleNavAppLink",
-                                              "href": "monitoring",
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "monitoring",
-                                              "onClick": [Function],
-                                            },
-                                          ]
-                                        }
-                                        maxWidth="none"
-                                        size="s"
+                                    <div>
+                                      <div
+                                        class=""
                                       >
-                                        <ul
-                                          aria-label="Primary navigation links, Management"
-                                          className="euiListGroup"
-                                          style={
-                                            Object {
-                                              "maxWidth": "none",
-                                            }
-                                          }
+                                        <div
+                                          class="euiCollapsibleNavGroup__children"
                                         >
-                                          <EuiListGroupItem
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="monitoring"
-                                            isActive={false}
-                                            key="title-0"
-                                            label="monitoring"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
+                                          <ul
+                                            aria-label="Primary navigation links, Management"
+                                            class="euiListGroup"
+                                            style="max-width: none;"
                                           >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                className="euiListGroupItem__button"
+                                                class="euiListGroupItem__button"
                                                 data-test-subj="collapsibleNavAppLink"
                                                 href="monitoring"
-                                                onClick={[Function]}
                                                 rel="noreferrer"
                                               >
                                                 <span
-                                                  className="euiListGroupItem__label"
+                                                  class="euiListGroupItem__label"
                                                   title="monitoring"
                                                 >
                                                   monitoring
                                                 </span>
                                               </a>
                                             </li>
-                                          </EuiListGroupItem>
-                                        </ul>
-                                      </EuiListGroup>
+                                          </ul>
+                                        </div>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </EuiCollapsibleNavGroup>
-                      <EuiCollapsibleNavGroup
-                        data-test-subj="collapsibleNavGroup-noCategory"
-                        key="0"
-                      >
-                        <div
-                          className="euiCollapsibleNavGroup"
-                          data-test-subj="collapsibleNavGroup-noCategory"
-                          id="mockId"
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              flush={true}
-                            >
-                              <ul
-                                className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                              >
-                                <EuiListGroupItem
-                                  color="text"
-                                  data-test-subj="collapsibleNavAppLink"
-                                  href="canvas"
-                                  isActive={false}
-                                  label="canvas"
-                                  onClick={[Function]}
-                                  size="s"
+                                <div
+                                  class="euiCollapsibleNavGroup"
+                                  data-test-subj="collapsibleNavGroup-noCategory"
+                                  id="mockId"
                                 >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  <div
+                                    class="euiCollapsibleNavGroup__children"
                                   >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      href="canvas"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
+                                    <ul
+                                      class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                     >
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="canvas"
+                                      <li
+                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                       >
-                                        canvas
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </EuiCollapsibleNavGroup>
-                      <EuiShowFor
-                        sizes={
-                          Array [
-                            "l",
-                            "xl",
-                          ]
-                        }
-                      >
-                        <EuiCollapsibleNavGroup
-                          className="eui-showFor--l eui-showFor--xl"
-                          key=".0"
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                            id="mockId"
-                          >
-                            <div
-                              className="euiCollapsibleNavGroup__children"
-                            >
-                              <EuiListGroup
-                                flush={true}
-                              >
-                                <ul
-                                  className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                >
-                                  <EuiListGroupItem
-                                    aria-label="Dock primary navigation"
-                                    buttonRef={
-                                      Object {
-                                        "current": <button
-                                          aria-label="Dock primary navigation"
+                                        <a
                                           class="euiListGroupItem__button"
-                                          data-test-subj="collapsible-nav-lock"
-                                          type="button"
+                                          data-test-subj="collapsibleNavAppLink"
+                                          href="canvas"
+                                          rel="noreferrer"
                                         >
-                                          <div
-                                            class="euiListGroupItem__icon"
-                                            data-euiicon-type="lockOpen"
-                                          />
                                           <span
                                             class="euiListGroupItem__label"
-                                            title="Dock navigation"
+                                            title="canvas"
+                                          >
+                                            canvas
+                                          </span>
+                                        </a>
+                                      </li>
+                                    </ul>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                  id="mockId"
+                                >
+                                  <div
+                                    class="euiCollapsibleNavGroup__children"
+                                  >
+                                    <ul
+                                      class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                    >
+                                      <li
+                                        class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                      >
+                                        <button
+                                          aria-label="Dock primary navigation"
+                                          class="euiListGroupItem__button"
+                                          data-test-subj="collapsible-nav-lock"
+                                          type="button"
+                                        >
+                                          <div
+                                            class="euiListGroupItem__icon"
+                                            data-euiicon-type="lockOpen"
+                                          />
+                                          <span
+                                            class="euiListGroupItem__label"
+                                            title="Dock navigation"
                                           >
                                             Dock navigation
                                           </span>
-                                        </button>,
-                                      }
-                                    }
-                                    color="subdued"
-                                    data-test-subj="collapsible-nav-lock"
-                                    iconType="lockOpen"
-                                    label="Dock navigation"
-                                    onClick={[Function]}
-                                    size="xs"
+                                        </button>
+                                      </li>
+                                    </ul>
+                                  </div>
+                                </div>
+                              </div>
+                              <button
+                                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiButtonContent euiButtonEmpty__content"
+                                >
+                                  <div
+                                    class="euiButtonContent__icon"
+                                    data-euiicon-type="cross"
+                                  />
+                                  <span
+                                    class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                                   >
-                                    <li
-                                      className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                    close
+                                  </span>
+                                </span>
+                              </button>
+                            </nav>
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
+                      >
+                        <FocusWatcher
+                          autoFocus={true}
+                          crossFrame={true}
+                          disabled={false}
+                          id={Object {}}
+                          observed={
+                            <div
+                              data-focus-lock-disabled="false"
+                            >
+                              <nav
+                                aria-label="Primary"
+                                class="euiCollapsibleNav"
+                                data-test-subj="collapsibleNav"
+                                id="collapsibe-nav"
+                              >
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                                  style="flex-shrink: 0;"
+                                >
+                                  <div
+                                    class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                    id="mockId"
+                                    style="max-height: 40vh;"
+                                  >
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
+                                    >
+                                      <ul
+                                        class="euiListGroup"
+                                        style="max-width: none;"
+                                      >
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavCustomNavLink"
+                                            href="Custom link"
+                                            rel="noreferrer"
+                                          >
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="Custom link"
+                                            >
+                                              Custom link
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </div>
+                                <hr
+                                  class="euiHorizontalRule euiHorizontalRule--full"
+                                />
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                                  style="flex-shrink: 0;"
+                                >
+                                  <div
+                                    class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                    id="mockId"
+                                    style="max-height: 40vh;"
+                                  >
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
+                                    >
+                                      <ul
+                                        aria-label="Pinned links"
+                                        class="euiListGroup"
+                                        style="max-width: none;"
+                                      >
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            href="/"
+                                            rel="noreferrer"
+                                          >
+                                            <div
+                                              class="euiListGroupItem__icon"
+                                              data-euiicon-type="home"
+                                            />
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="Home"
+                                            >
+                                              Home
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-recentlyViewed"
+                                >
+                                  <div
+                                    class="euiAccordion__triggerWrapper"
+                                  >
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded="true"
+                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      type="button"
+                                    >
+                                      <span
+                                        class="euiAccordion__iconWrapper"
+                                      >
+                                        <div
+                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          data-euiicon-type="arrowRight"
+                                        />
+                                      </span>
+                                      <span
+                                        class="euiIEFlexWrapFix"
+                                      >
+                                        <div
+                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                        >
+                                          <div
+                                            class="euiFlexItem"
+                                          >
+                                            <h3
+                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                              id="mockId__title"
+                                            >
+                                              Recently viewed
+                                            </h3>
+                                          </div>
+                                        </div>
+                                      </span>
+                                    </button>
+                                  </div>
+                                  <div
+                                    class="euiAccordion__childWrapper"
+                                    id="mockId"
+                                  >
+                                    <div>
+                                      <div
+                                        class=""
+                                      >
+                                        <div
+                                          class="euiCollapsibleNavGroup__children"
+                                        >
+                                          <ul
+                                            aria-label="Recently viewed links"
+                                            class="euiListGroup kbnCollapsibleNav__recentsListGroup"
+                                            style="max-width: none;"
+                                          >
+                                            <li
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                            >
+                                              <a
+                                                aria-label="recent 1"
+                                                class="euiListGroupItem__button"
+                                                data-test-subj="collapsibleNavAppLink--recent"
+                                                href="http://localhost/recent%201"
+                                                rel="noreferrer"
+                                                title="recent 1"
+                                              >
+                                                <span
+                                                  class="euiListGroupItem__label"
+                                                  title="recent 1"
+                                                >
+                                                  recent 1
+                                                </span>
+                                              </a>
+                                            </li>
+                                            <li
+                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                            >
+                                              <a
+                                                aria-label="recent 2"
+                                                class="euiListGroupItem__button"
+                                                data-test-subj="collapsibleNavAppLink--recent"
+                                                href="http://localhost/recent%202"
+                                                rel="noreferrer"
+                                                title="recent 2"
+                                              >
+                                                <span
+                                                  class="euiListGroupItem__label"
+                                                  title="recent 2"
+                                                >
+                                                  recent 2
+                                                </span>
+                                              </a>
+                                            </li>
+                                          </ul>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <hr
+                                  class="euiHorizontalRule euiHorizontalRule--full"
+                                />
+                                <div
+                                  class="euiFlexItem eui-yScroll"
+                                >
+                                  <div
+                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                    data-test-subj="collapsibleNavGroup-kibana"
+                                  >
+                                    <div
+                                      class="euiAccordion__triggerWrapper"
                                     >
                                       <button
-                                        aria-label="Dock primary navigation"
-                                        className="euiListGroupItem__button"
-                                        data-test-subj="collapsible-nav-lock"
-                                        disabled={false}
-                                        onClick={[Function]}
+                                        aria-controls="mockId"
+                                        aria-expanded="true"
+                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
                                         type="button"
                                       >
-                                        <EuiIcon
-                                          className="euiListGroupItem__icon"
-                                          type="lockOpen"
+                                        <span
+                                          class="euiAccordion__iconWrapper"
                                         >
                                           <div
-                                            className="euiListGroupItem__icon"
-                                            data-euiicon-type="lockOpen"
+                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
                                           />
-                                        </EuiIcon>
+                                        </span>
                                         <span
-                                          className="euiListGroupItem__label"
-                                          title="Dock navigation"
+                                          class="euiIEFlexWrapFix"
                                         >
-                                          Dock navigation
+                                          <div
+                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <div
+                                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                                            >
+                                              <div
+                                                data-euiicon-type="logoKibana"
+                                              />
+                                            </div>
+                                            <div
+                                              class="euiFlexItem"
+                                            >
+                                              <h3
+                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                id="mockId__title"
+                                              >
+                                                Kibana
+                                              </h3>
+                                            </div>
+                                          </div>
                                         </span>
                                       </button>
-                                    </li>
-                                  </EuiListGroupItem>
-                                </ul>
-                              </EuiListGroup>
-                            </div>
-                          </div>
-                        </EuiCollapsibleNavGroup>
-                      </EuiShowFor>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiScreenReaderOnly
-                    showOnFocus={true}
-                  >
-                    <EuiButtonEmpty
-                      className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                      iconType="cross"
-                      onClick={[Function]}
-                      size="xs"
-                      textProps={
-                        Object {
-                          "className": "euiCollapsibleNav__closeButtonText",
-                        }
-                      }
-                    >
-                      <button
-                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <span
-                          className="euiButtonEmpty__content"
-                        >
-                          <EuiIcon
-                            aria-hidden="true"
-                            className="euiButtonEmpty__icon"
-                            size="m"
-                            type="cross"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonEmpty__icon"
-                              data-euiicon-type="cross"
-                              size="m"
-                            />
-                          </EuiIcon>
-                          <span
-                            className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                          >
-                            <EuiI18n
-                              default="close"
-                              token="euiCollapsibleNav.closeButtonLabel"
-                            >
-                              close
-                            </EuiI18n>
-                          </span>
-                        </span>
-                      </button>
-                    </EuiButtonEmpty>
-                  </EuiScreenReaderOnly>
-                </nav>
-              </div>
-              <div
-                data-focus-guard={true}
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={0}
-              />
-            </FocusLock>
-          </div>
-        </OutsideEventDetector>
-      </EuiOutsideClickDetector>
-    </EuiFocusTrap>
-  </EuiCollapsibleNav>
-</CollapsibleNav>
-`;
-
-exports[`CollapsibleNav renders the default nav 1`] = `
-<CollapsibleNav
-  appId$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": "test",
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  basePath={
-    BasePath {
-      "basePath": "/test",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/test",
-    }
-  }
-  closeNav={[Function]}
-  customNavLink$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": undefined,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  homeHref="/"
-  id="collapsibe-nav"
-  isLocked={false}
-  isOpen={false}
-  legacyMode={false}
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[Function]}
-  onIsLockedUpdate={[Function]}
-  recentlyAccessed$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  storage={
-    StubBrowserStorage {
-      "keys": Array [],
-      "size": 0,
-      "sizeLimit": 5000000,
-      "values": Array [],
-    }
-  }
->
-  <EuiCollapsibleNav
-    aria-label="Primary"
-    data-test-subj="collapsibleNav"
-    id="collapsibe-nav"
-    isDocked={false}
-    isOpen={false}
-    onClose={[Function]}
-  />
-</CollapsibleNav>
-`;
-
-exports[`CollapsibleNav renders the default nav 2`] = `
-<CollapsibleNav
-  appId$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": "test",
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  basePath={
-    BasePath {
-      "basePath": "/test",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/test",
-    }
-  }
-  closeNav={[Function]}
-  customNavLink$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": undefined,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  homeHref="/"
-  id="collapsibe-nav"
-  isLocked={false}
-  isOpen={true}
-  legacyMode={false}
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[Function]}
-  onIsLockedUpdate={[Function]}
-  recentlyAccessed$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  storage={
-    StubBrowserStorage {
-      "keys": Array [],
-      "size": 0,
-      "sizeLimit": 5000000,
-      "values": Array [],
-    }
-  }
->
-  <EuiCollapsibleNav
-    aria-label="Primary"
-    data-test-subj="collapsibleNav"
-    id="collapsibe-nav"
-    isDocked={false}
-    isOpen={true}
-    onClose={[Function]}
-  >
-    <EuiWindowEvent
-      event="keydown"
-      handler={[Function]}
-    />
-    <EuiOverlayMask
-      headerZindexLocation="below"
-      onClick={[Function]}
-    />
-    <EuiFocusTrap
-      clickOutsideDisables={true}
-      disabled={false}
-    >
-      <EuiOutsideClickDetector
-        isDisabled={false}
-        onOutsideClick={[Function]}
-      >
-        <OutsideEventDetector
-          handleEvent={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
-        >
-          <div
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
-          >
-            <FocusLock
-              as="div"
-              autoFocus={true}
-              disabled={false}
-              lockProps={
-                Object {
-                  "style": undefined,
-                }
-              }
-              noFocusGuards={false}
-              persistentFocus={false}
-              returnFocus={true}
-            >
-              <div
-                data-focus-guard={true}
-                key="guard-first"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={0}
-              />
-              <div
-                data-focus-guard={true}
-                key="guard-nearest"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={1}
-              />
-              <div
-                data-focus-lock-disabled={false}
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <SideEffect(FocusWatcher)
-                  autoFocus={true}
-                  disabled={false}
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                >
-                  <FocusWatcher
-                    autoFocus={true}
-                    disabled={false}
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
-                  />
-                </SideEffect(FocusWatcher)>
-                <nav
-                  aria-label="Primary"
-                  className="euiCollapsibleNav"
-                  data-test-subj="collapsibleNav"
-                  id="collapsibe-nav"
-                >
-                  <EuiFlexItem
-                    grow={false}
-                    style={
-                      Object {
-                        "flexShrink": 0,
-                      }
-                    }
+                                    </div>
+                                    <div
+                                      class="euiAccordion__childWrapper"
+                                      id="mockId"
+                                    >
+                                      <div>
+                                        <div
+                                          class=""
+                                        >
+                                          <div
+                                            class="euiCollapsibleNavGroup__children"
+                                          >
+                                            <ul
+                                              aria-label="Primary navigation links, Kibana"
+                                              class="euiListGroup"
+                                              style="max-width: none;"
+                                            >
+                                              <li
+                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  class="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="discover"
+                                                  rel="noreferrer"
+                                                >
+                                                  <span
+                                                    class="euiListGroupItem__label"
+                                                    title="discover"
+                                                  >
+                                                    discover
+                                                  </span>
+                                                </a>
+                                              </li>
+                                              <li
+                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  class="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="visualize"
+                                                  rel="noreferrer"
+                                                >
+                                                  <span
+                                                    class="euiListGroupItem__label"
+                                                    title="visualize"
+                                                  >
+                                                    visualize
+                                                  </span>
+                                                </a>
+                                              </li>
+                                              <li
+                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  class="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="dashboard"
+                                                  rel="noreferrer"
+                                                >
+                                                  <span
+                                                    class="euiListGroupItem__label"
+                                                    title="dashboard"
+                                                  >
+                                                    dashboard
+                                                  </span>
+                                                </a>
+                                              </li>
+                                            </ul>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                    data-test-subj="collapsibleNavGroup-observability"
+                                  >
+                                    <div
+                                      class="euiAccordion__triggerWrapper"
+                                    >
+                                      <button
+                                        aria-controls="mockId"
+                                        aria-expanded="true"
+                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiAccordion__iconWrapper"
+                                        >
+                                          <div
+                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                          />
+                                        </span>
+                                        <span
+                                          class="euiIEFlexWrapFix"
+                                        >
+                                          <div
+                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <div
+                                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                                            >
+                                              <div
+                                                data-euiicon-type="logoObservability"
+                                              />
+                                            </div>
+                                            <div
+                                              class="euiFlexItem"
+                                            >
+                                              <h3
+                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                id="mockId__title"
+                                              >
+                                                Observability
+                                              </h3>
+                                            </div>
+                                          </div>
+                                        </span>
+                                      </button>
+                                    </div>
+                                    <div
+                                      class="euiAccordion__childWrapper"
+                                      id="mockId"
+                                    >
+                                      <div>
+                                        <div
+                                          class=""
+                                        >
+                                          <div
+                                            class="euiCollapsibleNavGroup__children"
+                                          >
+                                            <ul
+                                              aria-label="Primary navigation links, Observability"
+                                              class="euiListGroup"
+                                              style="max-width: none;"
+                                            >
+                                              <li
+                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  class="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="metrics"
+                                                  rel="noreferrer"
+                                                >
+                                                  <span
+                                                    class="euiListGroupItem__label"
+                                                    title="metrics"
+                                                  >
+                                                    metrics
+                                                  </span>
+                                                </a>
+                                              </li>
+                                              <li
+                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  class="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="logs"
+                                                  rel="noreferrer"
+                                                >
+                                                  <span
+                                                    class="euiListGroupItem__label"
+                                                    title="logs"
+                                                  >
+                                                    logs
+                                                  </span>
+                                                </a>
+                                              </li>
+                                            </ul>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                    data-test-subj="collapsibleNavGroup-security"
+                                  >
+                                    <div
+                                      class="euiAccordion__triggerWrapper"
+                                    >
+                                      <button
+                                        aria-controls="mockId"
+                                        aria-expanded="true"
+                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiAccordion__iconWrapper"
+                                        >
+                                          <div
+                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                          />
+                                        </span>
+                                        <span
+                                          class="euiIEFlexWrapFix"
+                                        >
+                                          <div
+                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <div
+                                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                                            >
+                                              <div
+                                                data-euiicon-type="logoSecurity"
+                                              />
+                                            </div>
+                                            <div
+                                              class="euiFlexItem"
+                                            >
+                                              <h3
+                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                id="mockId__title"
+                                              >
+                                                Security
+                                              </h3>
+                                            </div>
+                                          </div>
+                                        </span>
+                                      </button>
+                                    </div>
+                                    <div
+                                      class="euiAccordion__childWrapper"
+                                      id="mockId"
+                                    >
+                                      <div>
+                                        <div
+                                          class=""
+                                        >
+                                          <div
+                                            class="euiCollapsibleNavGroup__children"
+                                          >
+                                            <ul
+                                              aria-label="Primary navigation links, Security"
+                                              class="euiListGroup"
+                                              style="max-width: none;"
+                                            >
+                                              <li
+                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  class="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="siem"
+                                                  rel="noreferrer"
+                                                >
+                                                  <span
+                                                    class="euiListGroupItem__label"
+                                                    title="siem"
+                                                  >
+                                                    siem
+                                                  </span>
+                                                </a>
+                                              </li>
+                                            </ul>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                    data-test-subj="collapsibleNavGroup-management"
+                                  >
+                                    <div
+                                      class="euiAccordion__triggerWrapper"
+                                    >
+                                      <button
+                                        aria-controls="mockId"
+                                        aria-expanded="true"
+                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiAccordion__iconWrapper"
+                                        >
+                                          <div
+                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                          />
+                                        </span>
+                                        <span
+                                          class="euiIEFlexWrapFix"
+                                        >
+                                          <div
+                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <div
+                                              class="euiFlexItem"
+                                            >
+                                              <h3
+                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                id="mockId__title"
+                                              >
+                                                Management
+                                              </h3>
+                                            </div>
+                                          </div>
+                                        </span>
+                                      </button>
+                                    </div>
+                                    <div
+                                      class="euiAccordion__childWrapper"
+                                      id="mockId"
+                                    >
+                                      <div>
+                                        <div
+                                          class=""
+                                        >
+                                          <div
+                                            class="euiCollapsibleNavGroup__children"
+                                          >
+                                            <ul
+                                              aria-label="Primary navigation links, Management"
+                                              class="euiListGroup"
+                                              style="max-width: none;"
+                                            >
+                                              <li
+                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  class="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="monitoring"
+                                                  rel="noreferrer"
+                                                >
+                                                  <span
+                                                    class="euiListGroupItem__label"
+                                                    title="monitoring"
+                                                  >
+                                                    monitoring
+                                                  </span>
+                                                </a>
+                                              </li>
+                                            </ul>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiCollapsibleNavGroup"
+                                    data-test-subj="collapsibleNavGroup-noCategory"
+                                    id="mockId"
+                                  >
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
+                                    >
+                                      <ul
+                                        class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                      >
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="canvas"
+                                            rel="noreferrer"
+                                          >
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="canvas"
+                                            >
+                                              canvas
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                    id="mockId"
+                                  >
+                                    <div
+                                      class="euiCollapsibleNavGroup__children"
+                                    >
+                                      <ul
+                                        class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                      >
+                                        <li
+                                          class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        >
+                                          <button
+                                            aria-label="Dock primary navigation"
+                                            class="euiListGroupItem__button"
+                                            data-test-subj="collapsible-nav-lock"
+                                            type="button"
+                                          >
+                                            <div
+                                              class="euiListGroupItem__icon"
+                                              data-euiicon-type="lockOpen"
+                                            />
+                                            <span
+                                              class="euiListGroupItem__label"
+                                              title="Dock navigation"
+                                            >
+                                              Dock navigation
+                                            </span>
+                                          </button>
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </div>
+                                <button
+                                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                                  type="button"
+                                >
+                                  <span
+                                    class="euiButtonContent euiButtonEmpty__content"
+                                  >
+                                    <div
+                                      class="euiButtonContent__icon"
+                                      data-euiicon-type="cross"
+                                    />
+                                    <span
+                                      class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                                    >
+                                      close
+                                    </span>
+                                  </span>
+                                </button>
+                              </nav>
+                            </div>
+                          }
+                          onActivation={[Function]}
+                          onDeactivation={[Function]}
+                          persistentFocus={false}
+                          returnFocus={[Function]}
+                          shards={Array []}
+                        />
+                      </SideEffect(FocusWatcher)>
+                    </SideCar>
+                  </RequireSideCar>
+                  <ForwardRef
+                    data-focus-lock-disabled={false}
+                    enabled={false}
+                    inert={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onTouchStart={[Function]}
+                    removeScrollBar={true}
+                    sideCar={[Function]}
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "flexShrink": 0,
-                        }
-                      }
+                      data-focus-lock-disabled={false}
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onScrollCapture={[Function]}
+                      onTouchMoveCapture={[Function]}
+                      onTouchStart={[Function]}
+                      onWheelCapture={[Function]}
                     >
-                      <EuiCollapsibleNavGroup
-                        background="light"
-                        className="eui-yScroll"
-                        style={
-                          Object {
-                            "maxHeight": "40vh",
-                          }
-                        }
+                      <nav
+                        aria-label="Primary"
+                        className="euiCollapsibleNav"
+                        data-test-subj="collapsibleNav"
+                        id="collapsibe-nav"
                       >
-                        <div
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                          id="mockId"
+                        <EuiFlexItem
+                          grow={false}
+                          style={
+                            Object {
+                              "flexShrink": 0,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                            style={
+                              Object {
+                                "flexShrink": 0,
+                              }
+                            }
+                          >
+                            <EuiCollapsibleNavGroup
+                              background="light"
+                              className="eui-yScroll"
+                              style={
+                                Object {
+                                  "maxHeight": "40vh",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                id="mockId"
+                                style={
+                                  Object {
+                                    "maxHeight": "40vh",
+                                  }
+                                }
+                              >
+                                <div
+                                  className="euiCollapsibleNavGroup__children"
+                                >
+                                  <EuiListGroup
+                                    color="text"
+                                    gutterSize="none"
+                                    listItems={
+                                      Array [
+                                        Object {
+                                          "data-test-subj": "collapsibleNavCustomNavLink",
+                                          "href": "Custom link",
+                                          "icon": undefined,
+                                          "iconType": undefined,
+                                          "isActive": false,
+                                          "isDisabled": undefined,
+                                          "label": "Custom link",
+                                          "onClick": [Function],
+                                        },
+                                      ]
+                                    }
+                                    maxWidth="none"
+                                    size="s"
+                                  >
+                                    <ul
+                                      className="euiListGroup"
+                                      style={
+                                        Object {
+                                          "maxWidth": "none",
+                                        }
+                                      }
+                                    >
+                                      <EuiListGroupItem
+                                        color="text"
+                                        data-test-subj="collapsibleNavCustomNavLink"
+                                        href="Custom link"
+                                        isActive={false}
+                                        key="title-0"
+                                        label="Custom link"
+                                        onClick={[Function]}
+                                        showToolTip={false}
+                                        size="s"
+                                        wrapText={false}
+                                      >
+                                        <li
+                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            className="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavCustomNavLink"
+                                            href="Custom link"
+                                            onClick={[Function]}
+                                            rel="noreferrer"
+                                          >
+                                            <span
+                                              className="euiListGroupItem__label"
+                                              title="Custom link"
+                                            >
+                                              Custom link
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </EuiListGroupItem>
+                                    </ul>
+                                  </EuiListGroup>
+                                </div>
+                              </div>
+                            </EuiCollapsibleNavGroup>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiHorizontalRule
+                          margin="none"
+                        >
+                          <hr
+                            className="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                        </EuiHorizontalRule>
+                        <EuiFlexItem
+                          grow={false}
                           style={
                             Object {
-                              "maxHeight": "40vh",
+                              "flexShrink": 0,
                             }
                           }
                         >
                           <div
-                            className="euiCollapsibleNavGroup__children"
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                            style={
+                              Object {
+                                "flexShrink": 0,
+                              }
+                            }
+                          >
+                            <EuiCollapsibleNavGroup
+                              background="light"
+                              className="eui-yScroll"
+                              style={
+                                Object {
+                                  "maxHeight": "40vh",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                id="mockId"
+                                style={
+                                  Object {
+                                    "maxHeight": "40vh",
+                                  }
+                                }
+                              >
+                                <div
+                                  className="euiCollapsibleNavGroup__children"
+                                >
+                                  <EuiListGroup
+                                    aria-label="Pinned links"
+                                    color="text"
+                                    gutterSize="none"
+                                    listItems={
+                                      Array [
+                                        Object {
+                                          "href": "/",
+                                          "iconType": "home",
+                                          "label": "Home",
+                                          "onClick": [Function],
+                                        },
+                                      ]
+                                    }
+                                    maxWidth="none"
+                                    size="s"
+                                  >
+                                    <ul
+                                      aria-label="Pinned links"
+                                      className="euiListGroup"
+                                      style={
+                                        Object {
+                                          "maxWidth": "none",
+                                        }
+                                      }
+                                    >
+                                      <EuiListGroupItem
+                                        color="text"
+                                        href="/"
+                                        iconType="home"
+                                        key="title-0"
+                                        label="Home"
+                                        onClick={[Function]}
+                                        showToolTip={false}
+                                        size="s"
+                                        wrapText={false}
+                                      >
+                                        <li
+                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            className="euiListGroupItem__button"
+                                            href="/"
+                                            onClick={[Function]}
+                                            rel="noreferrer"
+                                          >
+                                            <EuiIcon
+                                              className="euiListGroupItem__icon"
+                                              type="home"
+                                            >
+                                              <div
+                                                className="euiListGroupItem__icon"
+                                                data-euiicon-type="home"
+                                              />
+                                            </EuiIcon>
+                                            <span
+                                              className="euiListGroupItem__label"
+                                              title="Home"
+                                            >
+                                              Home
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </EuiListGroupItem>
+                                    </ul>
+                                  </EuiListGroup>
+                                </div>
+                              </div>
+                            </EuiCollapsibleNavGroup>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiCollapsibleNavGroup
+                          background="light"
+                          data-test-subj="collapsibleNavGroup-recentlyViewed"
+                          initialIsOpen={true}
+                          isCollapsible={true}
+                          key="recentlyViewed"
+                          onToggle={[Function]}
+                          title="Recently viewed"
+                        >
+                          <EuiAccordion
+                            arrowDisplay="right"
+                            buttonClassName="euiCollapsibleNavGroup__heading"
+                            buttonContent={
+                              <EuiFlexGroup
+                                alignItems="center"
+                                gutterSize="m"
+                                responsive={false}
+                              >
+                                <EuiFlexItem>
+                                  <EuiTitle
+                                    size="xxs"
+                                  >
+                                    <h3
+                                      className="euiCollapsibleNavGroup__title"
+                                      id="mockId__title"
+                                    >
+                                      Recently viewed
+                                    </h3>
+                                  </EuiTitle>
+                                </EuiFlexItem>
+                              </EuiFlexGroup>
+                            }
+                            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                            data-test-subj="collapsibleNavGroup-recentlyViewed"
+                            id="mockId"
+                            initialIsOpen={true}
+                            onToggle={[Function]}
+                            paddingSize="none"
+                          >
+                            <div
+                              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-recentlyViewed"
+                              onToggle={[Function]}
+                            >
+                              <div
+                                className="euiAccordion__triggerWrapper"
+                              >
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded={true}
+                                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <span
+                                    className="euiAccordion__iconWrapper"
+                                  >
+                                    <EuiIcon
+                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      size="m"
+                                      type="arrowRight"
+                                    >
+                                      <div
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                        size="m"
+                                      />
+                                    </EuiIcon>
+                                  </span>
+                                  <span
+                                    className="euiIEFlexWrapFix"
+                                  >
+                                    <EuiFlexGroup
+                                      alignItems="center"
+                                      gutterSize="m"
+                                      responsive={false}
+                                    >
+                                      <div
+                                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                      >
+                                        <EuiFlexItem>
+                                          <div
+                                            className="euiFlexItem"
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                id="mockId__title"
+                                              >
+                                                Recently viewed
+                                              </h3>
+                                            </EuiTitle>
+                                          </div>
+                                        </EuiFlexItem>
+                                      </div>
+                                    </EuiFlexGroup>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                className="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <EuiResizeObserver
+                                  onResize={[Function]}
+                                >
+                                  <div>
+                                    <div
+                                      className=""
+                                    >
+                                      <div
+                                        className="euiCollapsibleNavGroup__children"
+                                      >
+                                        <EuiListGroup
+                                          aria-label="Recently viewed links"
+                                          className="kbnCollapsibleNav__recentsListGroup"
+                                          color="subdued"
+                                          gutterSize="none"
+                                          listItems={
+                                            Array [
+                                              Object {
+                                                "aria-label": "recent 1",
+                                                "data-test-subj": "collapsibleNavAppLink--recent",
+                                                "href": "http://localhost/recent%201",
+                                                "label": "recent 1",
+                                                "onClick": [Function],
+                                                "title": "recent 1",
+                                              },
+                                              Object {
+                                                "aria-label": "recent 2",
+                                                "data-test-subj": "collapsibleNavAppLink--recent",
+                                                "href": "http://localhost/recent%202",
+                                                "label": "recent 2",
+                                                "onClick": [Function],
+                                                "title": "recent 2",
+                                              },
+                                            ]
+                                          }
+                                          maxWidth="none"
+                                          size="s"
+                                        >
+                                          <ul
+                                            aria-label="Recently viewed links"
+                                            className="euiListGroup kbnCollapsibleNav__recentsListGroup"
+                                            style={
+                                              Object {
+                                                "maxWidth": "none",
+                                              }
+                                            }
+                                          >
+                                            <EuiListGroupItem
+                                              aria-label="recent 1"
+                                              color="subdued"
+                                              data-test-subj="collapsibleNavAppLink--recent"
+                                              href="http://localhost/recent%201"
+                                              key="title-0"
+                                              label="recent 1"
+                                              onClick={[Function]}
+                                              showToolTip={false}
+                                              size="s"
+                                              title="recent 1"
+                                              wrapText={false}
+                                            >
+                                              <li
+                                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  aria-label="recent 1"
+                                                  className="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink--recent"
+                                                  href="http://localhost/recent%201"
+                                                  onClick={[Function]}
+                                                  rel="noreferrer"
+                                                  title="recent 1"
+                                                >
+                                                  <span
+                                                    className="euiListGroupItem__label"
+                                                    title="recent 1"
+                                                  >
+                                                    recent 1
+                                                  </span>
+                                                </a>
+                                              </li>
+                                            </EuiListGroupItem>
+                                            <EuiListGroupItem
+                                              aria-label="recent 2"
+                                              color="subdued"
+                                              data-test-subj="collapsibleNavAppLink--recent"
+                                              href="http://localhost/recent%202"
+                                              key="title-1"
+                                              label="recent 2"
+                                              onClick={[Function]}
+                                              showToolTip={false}
+                                              size="s"
+                                              title="recent 2"
+                                              wrapText={false}
+                                            >
+                                              <li
+                                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <a
+                                                  aria-label="recent 2"
+                                                  className="euiListGroupItem__button"
+                                                  data-test-subj="collapsibleNavAppLink--recent"
+                                                  href="http://localhost/recent%202"
+                                                  onClick={[Function]}
+                                                  rel="noreferrer"
+                                                  title="recent 2"
+                                                >
+                                                  <span
+                                                    className="euiListGroupItem__label"
+                                                    title="recent 2"
+                                                  >
+                                                    recent 2
+                                                  </span>
+                                                </a>
+                                              </li>
+                                            </EuiListGroupItem>
+                                          </ul>
+                                        </EuiListGroup>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </EuiResizeObserver>
+                              </div>
+                            </div>
+                          </EuiAccordion>
+                        </EuiCollapsibleNavGroup>
+                        <EuiHorizontalRule
+                          margin="none"
+                        >
+                          <hr
+                            className="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                        </EuiHorizontalRule>
+                        <EuiFlexItem
+                          className="eui-yScroll"
+                        >
+                          <div
+                            className="euiFlexItem eui-yScroll"
                           >
-                            <EuiListGroup
-                              aria-label="Pinned links"
-                              color="text"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "href": "/",
-                                    "iconType": "home",
-                                    "label": "Home",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
+                            <EuiCollapsibleNavGroup
+                              data-test-subj="collapsibleNavGroup-kibana"
+                              iconType="logoKibana"
+                              initialIsOpen={true}
+                              isCollapsible={true}
+                              key="kibana"
+                              onToggle={[Function]}
+                              title="Kibana"
                             >
-                              <ul
-                                aria-label="Pinned links"
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
+                              <EuiAccordion
+                                arrowDisplay="right"
+                                buttonClassName="euiCollapsibleNavGroup__heading"
+                                buttonContent={
+                                  <EuiFlexGroup
+                                    alignItems="center"
+                                    gutterSize="m"
+                                    responsive={false}
+                                  >
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <EuiIcon
+                                        size="l"
+                                        type="logoKibana"
+                                      />
+                                    </EuiFlexItem>
+                                    <EuiFlexItem>
+                                      <EuiTitle
+                                        size="xxs"
+                                      >
+                                        <h3
+                                          className="euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Kibana
+                                        </h3>
+                                      </EuiTitle>
+                                    </EuiFlexItem>
+                                  </EuiFlexGroup>
                                 }
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-kibana"
+                                id="mockId"
+                                initialIsOpen={true}
+                                onToggle={[Function]}
+                                paddingSize="none"
                               >
-                                <EuiListGroupItem
-                                  color="text"
-                                  href="/"
-                                  iconType="home"
-                                  key="title-0"
-                                  label="Home"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
+                                <div
+                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-kibana"
+                                  onToggle={[Function]}
                                 >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  <div
+                                    className="euiAccordion__triggerWrapper"
                                   >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      href="/"
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded={true}
+                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
                                       onClick={[Function]}
-                                      rel="noreferrer"
+                                      type="button"
                                     >
-                                      <EuiIcon
-                                        className="euiListGroupItem__icon"
-                                        type="home"
+                                      <span
+                                        className="euiAccordion__iconWrapper"
                                       >
-                                        <div
-                                          className="euiListGroupItem__icon"
-                                          data-euiicon-type="home"
-                                        />
-                                      </EuiIcon>
+                                        <EuiIcon
+                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          size="m"
+                                          type="arrowRight"
+                                        >
+                                          <div
+                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                            size="m"
+                                          />
+                                        </EuiIcon>
+                                      </span>
                                       <span
-                                        className="euiListGroupItem__label"
-                                        title="Home"
+                                        className="euiIEFlexWrapFix"
                                       >
-                                        Home
+                                        <EuiFlexGroup
+                                          alignItems="center"
+                                          gutterSize="m"
+                                          responsive={false}
+                                        >
+                                          <div
+                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <EuiFlexItem
+                                              grow={false}
+                                            >
+                                              <div
+                                                className="euiFlexItem euiFlexItem--flexGrowZero"
+                                              >
+                                                <EuiIcon
+                                                  size="l"
+                                                  type="logoKibana"
+                                                >
+                                                  <div
+                                                    data-euiicon-type="logoKibana"
+                                                    size="l"
+                                                  />
+                                                </EuiIcon>
+                                              </div>
+                                            </EuiFlexItem>
+                                            <EuiFlexItem>
+                                              <div
+                                                className="euiFlexItem"
+                                              >
+                                                <EuiTitle
+                                                  size="xxs"
+                                                >
+                                                  <h3
+                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                    id="mockId__title"
+                                                  >
+                                                    Kibana
+                                                  </h3>
+                                                </EuiTitle>
+                                              </div>
+                                            </EuiFlexItem>
+                                          </div>
+                                        </EuiFlexGroup>
                                       </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </EuiCollapsibleNavGroup>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiCollapsibleNavGroup
-                    background="light"
-                    data-test-subj="collapsibleNavGroup-recentlyViewed"
-                    initialIsOpen={true}
-                    isCollapsible={true}
-                    key="recentlyViewed"
-                    onToggle={[Function]}
-                    title="Recently viewed"
-                  >
-                    <EuiAccordion
-                      arrowDisplay="right"
-                      buttonClassName="euiCollapsibleNavGroup__heading"
-                      buttonContent={
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <EuiFlexItem>
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <h3
-                                className="euiCollapsibleNavGroup__title"
-                                id="mockId__title"
-                              >
-                                Recently viewed
-                              </h3>
-                            </EuiTitle>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      }
-                      className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                      data-test-subj="collapsibleNavGroup-recentlyViewed"
-                      id="mockId"
-                      initialIsOpen={true}
-                      onToggle={[Function]}
-                      paddingSize="none"
-                    >
-                      <div
-                        className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                        data-test-subj="collapsibleNavGroup-recentlyViewed"
-                        onToggle={[Function]}
-                      >
-                        <div
-                          className="euiAccordion__triggerWrapper"
-                        >
-                          <button
-                            aria-controls="mockId"
-                            aria-expanded={true}
-                            className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <span
-                              className="euiAccordion__iconWrapper"
+                                    </button>
+                                  </div>
+                                  <div
+                                    className="euiAccordion__childWrapper"
+                                    id="mockId"
+                                  >
+                                    <EuiResizeObserver
+                                      onResize={[Function]}
+                                    >
+                                      <div>
+                                        <div
+                                          className=""
+                                        >
+                                          <div
+                                            className="euiCollapsibleNavGroup__children"
+                                          >
+                                            <EuiListGroup
+                                              aria-label="Primary navigation links, Kibana"
+                                              color="subdued"
+                                              gutterSize="none"
+                                              listItems={
+                                                Array [
+                                                  Object {
+                                                    "data-test-subj": "collapsibleNavAppLink",
+                                                    "href": "discover",
+                                                    "isActive": false,
+                                                    "isDisabled": undefined,
+                                                    "label": "discover",
+                                                    "onClick": [Function],
+                                                  },
+                                                  Object {
+                                                    "data-test-subj": "collapsibleNavAppLink",
+                                                    "href": "visualize",
+                                                    "isActive": false,
+                                                    "isDisabled": undefined,
+                                                    "label": "visualize",
+                                                    "onClick": [Function],
+                                                  },
+                                                  Object {
+                                                    "data-test-subj": "collapsibleNavAppLink",
+                                                    "href": "dashboard",
+                                                    "isActive": false,
+                                                    "isDisabled": undefined,
+                                                    "label": "dashboard",
+                                                    "onClick": [Function],
+                                                  },
+                                                ]
+                                              }
+                                              maxWidth="none"
+                                              size="s"
+                                            >
+                                              <ul
+                                                aria-label="Primary navigation links, Kibana"
+                                                className="euiListGroup"
+                                                style={
+                                                  Object {
+                                                    "maxWidth": "none",
+                                                  }
+                                                }
+                                              >
+                                                <EuiListGroupItem
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="discover"
+                                                  isActive={false}
+                                                  key="title-0"
+                                                  label="discover"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink"
+                                                      href="discover"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="discover"
+                                                      >
+                                                        discover
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                                <EuiListGroupItem
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="visualize"
+                                                  isActive={false}
+                                                  key="title-1"
+                                                  label="visualize"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink"
+                                                      href="visualize"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="visualize"
+                                                      >
+                                                        visualize
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                                <EuiListGroupItem
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="dashboard"
+                                                  isActive={false}
+                                                  key="title-2"
+                                                  label="dashboard"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink"
+                                                      href="dashboard"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="dashboard"
+                                                      >
+                                                        dashboard
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                              </ul>
+                                            </EuiListGroup>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </EuiResizeObserver>
+                                  </div>
+                                </div>
+                              </EuiAccordion>
+                            </EuiCollapsibleNavGroup>
+                            <EuiCollapsibleNavGroup
+                              data-test-subj="collapsibleNavGroup-observability"
+                              iconType="logoObservability"
+                              initialIsOpen={true}
+                              isCollapsible={true}
+                              key="observability"
+                              onToggle={[Function]}
+                              title="Observability"
                             >
-                              <EuiIcon
-                                className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                size="m"
-                                type="arrowRight"
+                              <EuiAccordion
+                                arrowDisplay="right"
+                                buttonClassName="euiCollapsibleNavGroup__heading"
+                                buttonContent={
+                                  <EuiFlexGroup
+                                    alignItems="center"
+                                    gutterSize="m"
+                                    responsive={false}
+                                  >
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <EuiIcon
+                                        size="l"
+                                        type="logoObservability"
+                                      />
+                                    </EuiFlexItem>
+                                    <EuiFlexItem>
+                                      <EuiTitle
+                                        size="xxs"
+                                      >
+                                        <h3
+                                          className="euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Observability
+                                        </h3>
+                                      </EuiTitle>
+                                    </EuiFlexItem>
+                                  </EuiFlexGroup>
+                                }
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-observability"
+                                id="mockId"
+                                initialIsOpen={true}
+                                onToggle={[Function]}
+                                paddingSize="none"
                               >
                                 <div
-                                  className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                  data-euiicon-type="arrowRight"
-                                  size="m"
-                                />
-                              </EuiIcon>
-                            </span>
-                            <span
-                              className="euiIEFlexWrapFix"
+                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-observability"
+                                  onToggle={[Function]}
+                                >
+                                  <div
+                                    className="euiAccordion__triggerWrapper"
+                                  >
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded={true}
+                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <span
+                                        className="euiAccordion__iconWrapper"
+                                      >
+                                        <EuiIcon
+                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          size="m"
+                                          type="arrowRight"
+                                        >
+                                          <div
+                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                            size="m"
+                                          />
+                                        </EuiIcon>
+                                      </span>
+                                      <span
+                                        className="euiIEFlexWrapFix"
+                                      >
+                                        <EuiFlexGroup
+                                          alignItems="center"
+                                          gutterSize="m"
+                                          responsive={false}
+                                        >
+                                          <div
+                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <EuiFlexItem
+                                              grow={false}
+                                            >
+                                              <div
+                                                className="euiFlexItem euiFlexItem--flexGrowZero"
+                                              >
+                                                <EuiIcon
+                                                  size="l"
+                                                  type="logoObservability"
+                                                >
+                                                  <div
+                                                    data-euiicon-type="logoObservability"
+                                                    size="l"
+                                                  />
+                                                </EuiIcon>
+                                              </div>
+                                            </EuiFlexItem>
+                                            <EuiFlexItem>
+                                              <div
+                                                className="euiFlexItem"
+                                              >
+                                                <EuiTitle
+                                                  size="xxs"
+                                                >
+                                                  <h3
+                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                    id="mockId__title"
+                                                  >
+                                                    Observability
+                                                  </h3>
+                                                </EuiTitle>
+                                              </div>
+                                            </EuiFlexItem>
+                                          </div>
+                                        </EuiFlexGroup>
+                                      </span>
+                                    </button>
+                                  </div>
+                                  <div
+                                    className="euiAccordion__childWrapper"
+                                    id="mockId"
+                                  >
+                                    <EuiResizeObserver
+                                      onResize={[Function]}
+                                    >
+                                      <div>
+                                        <div
+                                          className=""
+                                        >
+                                          <div
+                                            className="euiCollapsibleNavGroup__children"
+                                          >
+                                            <EuiListGroup
+                                              aria-label="Primary navigation links, Observability"
+                                              color="subdued"
+                                              gutterSize="none"
+                                              listItems={
+                                                Array [
+                                                  Object {
+                                                    "data-test-subj": "collapsibleNavAppLink",
+                                                    "href": "metrics",
+                                                    "isActive": false,
+                                                    "isDisabled": undefined,
+                                                    "label": "metrics",
+                                                    "onClick": [Function],
+                                                  },
+                                                  Object {
+                                                    "data-test-subj": "collapsibleNavAppLink",
+                                                    "href": "logs",
+                                                    "isActive": false,
+                                                    "isDisabled": undefined,
+                                                    "label": "logs",
+                                                    "onClick": [Function],
+                                                  },
+                                                ]
+                                              }
+                                              maxWidth="none"
+                                              size="s"
+                                            >
+                                              <ul
+                                                aria-label="Primary navigation links, Observability"
+                                                className="euiListGroup"
+                                                style={
+                                                  Object {
+                                                    "maxWidth": "none",
+                                                  }
+                                                }
+                                              >
+                                                <EuiListGroupItem
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="metrics"
+                                                  isActive={false}
+                                                  key="title-0"
+                                                  label="metrics"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink"
+                                                      href="metrics"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="metrics"
+                                                      >
+                                                        metrics
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                                <EuiListGroupItem
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="logs"
+                                                  isActive={false}
+                                                  key="title-1"
+                                                  label="logs"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink"
+                                                      href="logs"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="logs"
+                                                      >
+                                                        logs
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                              </ul>
+                                            </EuiListGroup>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </EuiResizeObserver>
+                                  </div>
+                                </div>
+                              </EuiAccordion>
+                            </EuiCollapsibleNavGroup>
+                            <EuiCollapsibleNavGroup
+                              data-test-subj="collapsibleNavGroup-security"
+                              iconType="logoSecurity"
+                              initialIsOpen={true}
+                              isCollapsible={true}
+                              key="security"
+                              onToggle={[Function]}
+                              title="Security"
                             >
-                              <EuiFlexGroup
-                                alignItems="center"
-                                gutterSize="m"
-                                responsive={false}
+                              <EuiAccordion
+                                arrowDisplay="right"
+                                buttonClassName="euiCollapsibleNavGroup__heading"
+                                buttonContent={
+                                  <EuiFlexGroup
+                                    alignItems="center"
+                                    gutterSize="m"
+                                    responsive={false}
+                                  >
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <EuiIcon
+                                        size="l"
+                                        type="logoSecurity"
+                                      />
+                                    </EuiFlexItem>
+                                    <EuiFlexItem>
+                                      <EuiTitle
+                                        size="xxs"
+                                      >
+                                        <h3
+                                          className="euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Security
+                                        </h3>
+                                      </EuiTitle>
+                                    </EuiFlexItem>
+                                  </EuiFlexGroup>
+                                }
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-security"
+                                id="mockId"
+                                initialIsOpen={true}
+                                onToggle={[Function]}
+                                paddingSize="none"
                               >
                                 <div
-                                  className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-security"
+                                  onToggle={[Function]}
                                 >
-                                  <EuiFlexItem>
-                                    <div
-                                      className="euiFlexItem"
+                                  <div
+                                    className="euiAccordion__triggerWrapper"
+                                  >
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded={true}
+                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <span
+                                        className="euiAccordion__iconWrapper"
+                                      >
+                                        <EuiIcon
+                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          size="m"
+                                          type="arrowRight"
+                                        >
+                                          <div
+                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                            size="m"
+                                          />
+                                        </EuiIcon>
+                                      </span>
+                                      <span
+                                        className="euiIEFlexWrapFix"
+                                      >
+                                        <EuiFlexGroup
+                                          alignItems="center"
+                                          gutterSize="m"
+                                          responsive={false}
+                                        >
+                                          <div
+                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <EuiFlexItem
+                                              grow={false}
+                                            >
+                                              <div
+                                                className="euiFlexItem euiFlexItem--flexGrowZero"
+                                              >
+                                                <EuiIcon
+                                                  size="l"
+                                                  type="logoSecurity"
+                                                >
+                                                  <div
+                                                    data-euiicon-type="logoSecurity"
+                                                    size="l"
+                                                  />
+                                                </EuiIcon>
+                                              </div>
+                                            </EuiFlexItem>
+                                            <EuiFlexItem>
+                                              <div
+                                                className="euiFlexItem"
+                                              >
+                                                <EuiTitle
+                                                  size="xxs"
+                                                >
+                                                  <h3
+                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                    id="mockId__title"
+                                                  >
+                                                    Security
+                                                  </h3>
+                                                </EuiTitle>
+                                              </div>
+                                            </EuiFlexItem>
+                                          </div>
+                                        </EuiFlexGroup>
+                                      </span>
+                                    </button>
+                                  </div>
+                                  <div
+                                    className="euiAccordion__childWrapper"
+                                    id="mockId"
+                                  >
+                                    <EuiResizeObserver
+                                      onResize={[Function]}
                                     >
+                                      <div>
+                                        <div
+                                          className=""
+                                        >
+                                          <div
+                                            className="euiCollapsibleNavGroup__children"
+                                          >
+                                            <EuiListGroup
+                                              aria-label="Primary navigation links, Security"
+                                              color="subdued"
+                                              gutterSize="none"
+                                              listItems={
+                                                Array [
+                                                  Object {
+                                                    "data-test-subj": "collapsibleNavAppLink",
+                                                    "href": "siem",
+                                                    "isActive": false,
+                                                    "isDisabled": undefined,
+                                                    "label": "siem",
+                                                    "onClick": [Function],
+                                                  },
+                                                ]
+                                              }
+                                              maxWidth="none"
+                                              size="s"
+                                            >
+                                              <ul
+                                                aria-label="Primary navigation links, Security"
+                                                className="euiListGroup"
+                                                style={
+                                                  Object {
+                                                    "maxWidth": "none",
+                                                  }
+                                                }
+                                              >
+                                                <EuiListGroupItem
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="siem"
+                                                  isActive={false}
+                                                  key="title-0"
+                                                  label="siem"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink"
+                                                      href="siem"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="siem"
+                                                      >
+                                                        siem
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                              </ul>
+                                            </EuiListGroup>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </EuiResizeObserver>
+                                  </div>
+                                </div>
+                              </EuiAccordion>
+                            </EuiCollapsibleNavGroup>
+                            <EuiCollapsibleNavGroup
+                              data-test-subj="collapsibleNavGroup-management"
+                              initialIsOpen={true}
+                              isCollapsible={true}
+                              key="management"
+                              onToggle={[Function]}
+                              title="Management"
+                            >
+                              <EuiAccordion
+                                arrowDisplay="right"
+                                buttonClassName="euiCollapsibleNavGroup__heading"
+                                buttonContent={
+                                  <EuiFlexGroup
+                                    alignItems="center"
+                                    gutterSize="m"
+                                    responsive={false}
+                                  >
+                                    <EuiFlexItem>
                                       <EuiTitle
                                         size="xxs"
                                       >
                                         <h3
-                                          className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                          className="euiCollapsibleNavGroup__title"
                                           id="mockId__title"
                                         >
-                                          Recently viewed
+                                          Management
                                         </h3>
                                       </EuiTitle>
-                                    </div>
-                                  </EuiFlexItem>
-                                </div>
-                              </EuiFlexGroup>
-                            </span>
-                          </button>
-                        </div>
-                        <div
-                          className="euiAccordion__childWrapper"
-                          id="mockId"
-                        >
-                          <EuiResizeObserver
-                            onResize={[Function]}
-                          >
-                            <div>
-                              <div
-                                className=""
+                                    </EuiFlexItem>
+                                  </EuiFlexGroup>
+                                }
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-management"
+                                id="mockId"
+                                initialIsOpen={true}
+                                onToggle={[Function]}
+                                paddingSize="none"
                               >
                                 <div
-                                  className="euiCollapsibleNavGroup__children"
+                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-management"
+                                  onToggle={[Function]}
                                 >
-                                  <EuiText
-                                    color="subdued"
-                                    size="s"
-                                    style={
-                                      Object {
-                                        "padding": "0 8px 8px",
-                                      }
-                                    }
+                                  <div
+                                    className="euiAccordion__triggerWrapper"
                                   >
-                                    <div
-                                      className="euiText euiText--small"
-                                      style={
-                                        Object {
-                                          "padding": "0 8px 8px",
-                                        }
-                                      }
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded={true}
+                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                      onClick={[Function]}
+                                      type="button"
                                     >
-                                      <EuiTextColor
-                                        color="subdued"
-                                        component="div"
+                                      <span
+                                        className="euiAccordion__iconWrapper"
+                                      >
+                                        <EuiIcon
+                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          size="m"
+                                          type="arrowRight"
+                                        >
+                                          <div
+                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                            size="m"
+                                          />
+                                        </EuiIcon>
+                                      </span>
+                                      <span
+                                        className="euiIEFlexWrapFix"
                                       >
+                                        <EuiFlexGroup
+                                          alignItems="center"
+                                          gutterSize="m"
+                                          responsive={false}
+                                        >
+                                          <div
+                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                          >
+                                            <EuiFlexItem>
+                                              <div
+                                                className="euiFlexItem"
+                                              >
+                                                <EuiTitle
+                                                  size="xxs"
+                                                >
+                                                  <h3
+                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                    id="mockId__title"
+                                                  >
+                                                    Management
+                                                  </h3>
+                                                </EuiTitle>
+                                              </div>
+                                            </EuiFlexItem>
+                                          </div>
+                                        </EuiFlexGroup>
+                                      </span>
+                                    </button>
+                                  </div>
+                                  <div
+                                    className="euiAccordion__childWrapper"
+                                    id="mockId"
+                                  >
+                                    <EuiResizeObserver
+                                      onResize={[Function]}
+                                    >
+                                      <div>
                                         <div
-                                          className="euiTextColor euiTextColor--subdued"
+                                          className=""
                                         >
-                                          <p>
-                                            No recently viewed items
-                                          </p>
+                                          <div
+                                            className="euiCollapsibleNavGroup__children"
+                                          >
+                                            <EuiListGroup
+                                              aria-label="Primary navigation links, Management"
+                                              color="subdued"
+                                              gutterSize="none"
+                                              listItems={
+                                                Array [
+                                                  Object {
+                                                    "data-test-subj": "collapsibleNavAppLink",
+                                                    "href": "monitoring",
+                                                    "isActive": false,
+                                                    "isDisabled": undefined,
+                                                    "label": "monitoring",
+                                                    "onClick": [Function],
+                                                  },
+                                                ]
+                                              }
+                                              maxWidth="none"
+                                              size="s"
+                                            >
+                                              <ul
+                                                aria-label="Primary navigation links, Management"
+                                                className="euiListGroup"
+                                                style={
+                                                  Object {
+                                                    "maxWidth": "none",
+                                                  }
+                                                }
+                                              >
+                                                <EuiListGroupItem
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink"
+                                                  href="monitoring"
+                                                  isActive={false}
+                                                  key="title-0"
+                                                  label="monitoring"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink"
+                                                      href="monitoring"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="monitoring"
+                                                      >
+                                                        monitoring
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                              </ul>
+                                            </EuiListGroup>
+                                          </div>
                                         </div>
-                                      </EuiTextColor>
-                                    </div>
-                                  </EuiText>
+                                      </div>
+                                    </EuiResizeObserver>
+                                  </div>
                                 </div>
-                              </div>
-                            </div>
-                          </EuiResizeObserver>
-                        </div>
-                      </div>
-                    </EuiAccordion>
-                  </EuiCollapsibleNavGroup>
-                  <EuiHorizontalRule
-                    margin="none"
-                  >
-                    <hr
-                      className="euiHorizontalRule euiHorizontalRule--full"
-                    />
-                  </EuiHorizontalRule>
-                  <EuiFlexItem
-                    className="eui-yScroll"
-                  >
-                    <div
-                      className="euiFlexItem eui-yScroll"
-                    >
-                      <EuiShowFor
-                        sizes={
-                          Array [
-                            "l",
-                            "xl",
-                          ]
-                        }
-                      >
-                        <EuiCollapsibleNavGroup
-                          className="eui-showFor--l eui-showFor--xl"
-                          key=".0"
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                            id="mockId"
-                          >
-                            <div
-                              className="euiCollapsibleNavGroup__children"
+                              </EuiAccordion>
+                            </EuiCollapsibleNavGroup>
+                            <EuiCollapsibleNavGroup
+                              data-test-subj="collapsibleNavGroup-noCategory"
+                              key="0"
                             >
-                              <EuiListGroup
-                                flush={true}
+                              <div
+                                className="euiCollapsibleNavGroup"
+                                data-test-subj="collapsibleNavGroup-noCategory"
+                                id="mockId"
                               >
-                                <ul
-                                  className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                <div
+                                  className="euiCollapsibleNavGroup__children"
                                 >
-                                  <EuiListGroupItem
-                                    aria-label="Dock primary navigation"
-                                    buttonRef={
-                                      Object {
-                                        "current": <button
-                                          aria-label="Dock primary navigation"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsible-nav-lock"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiListGroupItem__icon"
-                                            data-euiicon-type="lockOpen"
-                                          />
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Dock navigation"
-                                          >
-                                            Dock navigation
-                                          </span>
-                                        </button>,
-                                      }
-                                    }
-                                    color="subdued"
-                                    data-test-subj="collapsible-nav-lock"
-                                    iconType="lockOpen"
-                                    label="Dock navigation"
-                                    onClick={[Function]}
-                                    size="xs"
+                                  <EuiListGroup
+                                    flush={true}
                                   >
-                                    <li
-                                      className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                    <ul
+                                      className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                     >
-                                      <button
-                                        aria-label="Dock primary navigation"
-                                        className="euiListGroupItem__button"
-                                        data-test-subj="collapsible-nav-lock"
-                                        disabled={false}
+                                      <EuiListGroupItem
+                                        color="text"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="canvas"
+                                        isActive={false}
+                                        label="canvas"
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <EuiIcon
-                                          className="euiListGroupItem__icon"
-                                          type="lockOpen"
+                                        <li
+                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                         >
-                                          <div
-                                            className="euiListGroupItem__icon"
-                                            data-euiicon-type="lockOpen"
-                                          />
-                                        </EuiIcon>
-                                        <span
-                                          className="euiListGroupItem__label"
-                                          title="Dock navigation"
+                                          <a
+                                            className="euiListGroupItem__button"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            href="canvas"
+                                            onClick={[Function]}
+                                            rel="noreferrer"
+                                          >
+                                            <span
+                                              className="euiListGroupItem__label"
+                                              title="canvas"
+                                            >
+                                              canvas
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </EuiListGroupItem>
+                                    </ul>
+                                  </EuiListGroup>
+                                </div>
+                              </div>
+                            </EuiCollapsibleNavGroup>
+                            <EuiShowFor
+                              sizes={
+                                Array [
+                                  "l",
+                                  "xl",
+                                ]
+                              }
+                            >
+                              <EuiCollapsibleNavGroup
+                                className="eui-showFor--l eui-showFor--xl"
+                                key=".0"
+                              >
+                                <div
+                                  className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                  id="mockId"
+                                >
+                                  <div
+                                    className="euiCollapsibleNavGroup__children"
+                                  >
+                                    <EuiListGroup
+                                      flush={true}
+                                    >
+                                      <ul
+                                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                      >
+                                        <EuiListGroupItem
+                                          aria-label="Dock primary navigation"
+                                          buttonRef={
+                                            Object {
+                                              "current": <button
+                                                aria-label="Dock primary navigation"
+                                                class="euiListGroupItem__button"
+                                                data-test-subj="collapsible-nav-lock"
+                                                type="button"
+                                              >
+                                                <div
+                                                  class="euiListGroupItem__icon"
+                                                  data-euiicon-type="lockOpen"
+                                                />
+                                                <span
+                                                  class="euiListGroupItem__label"
+                                                  title="Dock navigation"
+                                                >
+                                                  Dock navigation
+                                                </span>
+                                              </button>,
+                                            }
+                                          }
+                                          color="subdued"
+                                          data-test-subj="collapsible-nav-lock"
+                                          iconType="lockOpen"
+                                          label="Dock navigation"
+                                          onClick={[Function]}
+                                          size="xs"
                                         >
-                                          Dock navigation
-                                        </span>
-                                      </button>
-                                    </li>
-                                  </EuiListGroupItem>
-                                </ul>
-                              </EuiListGroup>
-                            </div>
+                                          <li
+                                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                          >
+                                            <button
+                                              aria-label="Dock primary navigation"
+                                              className="euiListGroupItem__button"
+                                              data-test-subj="collapsible-nav-lock"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiIcon
+                                                className="euiListGroupItem__icon"
+                                                type="lockOpen"
+                                              >
+                                                <div
+                                                  className="euiListGroupItem__icon"
+                                                  data-euiicon-type="lockOpen"
+                                                />
+                                              </EuiIcon>
+                                              <span
+                                                className="euiListGroupItem__label"
+                                                title="Dock navigation"
+                                              >
+                                                Dock navigation
+                                              </span>
+                                            </button>
+                                          </li>
+                                        </EuiListGroupItem>
+                                      </ul>
+                                    </EuiListGroup>
+                                  </div>
+                                </div>
+                              </EuiCollapsibleNavGroup>
+                            </EuiShowFor>
                           </div>
-                        </EuiCollapsibleNavGroup>
-                      </EuiShowFor>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiScreenReaderOnly
-                    showOnFocus={true}
-                  >
-                    <EuiButtonEmpty
-                      className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                      iconType="cross"
-                      onClick={[Function]}
-                      size="xs"
-                      textProps={
-                        Object {
-                          "className": "euiCollapsibleNav__closeButtonText",
-                        }
-                      }
-                    >
-                      <button
-                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <span
-                          className="euiButtonEmpty__content"
+                        </EuiFlexItem>
+                        <EuiScreenReaderOnly
+                          showOnFocus={true}
                         >
-                          <EuiIcon
-                            aria-hidden="true"
-                            className="euiButtonEmpty__icon"
-                            size="m"
-                            type="cross"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonEmpty__icon"
-                              data-euiicon-type="cross"
-                              size="m"
-                            />
-                          </EuiIcon>
-                          <span
-                            className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                          <EuiButtonEmpty
+                            className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                            iconType="cross"
+                            onClick={[Function]}
+                            size="xs"
+                            textProps={
+                              Object {
+                                "className": "euiCollapsibleNav__closeButtonText",
+                              }
+                            }
                           >
-                            <EuiI18n
-                              default="close"
-                              token="euiCollapsibleNav.closeButtonLabel"
+                            <button
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                              onClick={[Function]}
+                              type="button"
                             >
-                              close
-                            </EuiI18n>
-                          </span>
-                        </span>
-                      </button>
-                    </EuiButtonEmpty>
-                  </EuiScreenReaderOnly>
-                </nav>
-              </div>
-              <div
-                data-focus-guard={true}
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
+                              <EuiButtonContent
+                                className="euiButtonEmpty__content"
+                                iconSide="left"
+                                iconType="cross"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButtonEmpty__content"
+                                >
+                                  <EuiIcon
+                                    className="euiButtonContent__icon"
+                                    size="m"
+                                    type="cross"
+                                  >
+                                    <div
+                                      className="euiButtonContent__icon"
+                                      data-euiicon-type="cross"
+                                      size="m"
+                                    />
+                                  </EuiIcon>
+                                  <span
+                                    className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                                  >
+                                    <EuiI18n
+                                      default="close"
+                                      token="euiCollapsibleNav.closeButtonLabel"
+                                    >
+                                      close
+                                    </EuiI18n>
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonEmpty>
+                        </EuiScreenReaderOnly>
+                      </nav>
+                    </div>
+                  </ForwardRef>
+                  <div
+                    data-focus-guard={true}
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                </ForwardRef>
+                <RequireSideCar
+                  noIsolation={true}
+                  setLockProps={[Function]}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
                   }
-                }
-                tabIndex={0}
-              />
-            </FocusLock>
+                >
+                  <SideCar
+                    noIsolation={true}
+                    setLockProps={[Function]}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <Effect
+                      noIsolation={true}
+                      setLockProps={[Function]}
+                    >
+                      <Component>
+                        <Sheet
+                          styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                        />
+                      </Component>
+                    </Effect>
+                  </SideCar>
+                </RequireSideCar>
+              </ForwardRef>
+            </ForwardRef>
           </div>
         </OutsideEventDetector>
       </EuiOutsideClickDetector>
@@ -4446,7 +4960,242 @@ exports[`CollapsibleNav renders the default nav 2`] = `
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the default nav 3`] = `
+exports[`CollapsibleNav renders the default nav 1`] = `
+<CollapsibleNav
+  appId$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": "test",
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  basePath={
+    BasePath {
+      "basePath": "/test",
+      "get": [Function],
+      "prepend": [Function],
+      "remove": [Function],
+      "serverBasePath": "/test",
+    }
+  }
+  closeNav={[Function]}
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": undefined,
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  homeHref="/"
+  id="collapsibe-nav"
+  isLocked={false}
+  isOpen={false}
+  legacyMode={false}
+  navLinks$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Array [],
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  navigateToApp={[Function]}
+  onIsLockedUpdate={[Function]}
+  recentlyAccessed$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Array [],
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  storage={
+    StubBrowserStorage {
+      "keys": Array [],
+      "size": 0,
+      "sizeLimit": 5000000,
+      "values": Array [],
+    }
+  }
+>
+  <EuiCollapsibleNav
+    aria-label="Primary"
+    data-test-subj="collapsibleNav"
+    id="collapsibe-nav"
+    isDocked={false}
+    isOpen={false}
+    onClose={[Function]}
+  />
+</CollapsibleNav>
+`;
+
+exports[`CollapsibleNav renders the default nav 2`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -4558,7 +5307,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
   }
   homeHref="/"
   id="collapsibe-nav"
-  isLocked={true}
+  isLocked={false}
   isOpen={true}
   legacyMode={false}
   navLinks$={
@@ -4674,7 +5423,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
     aria-label="Primary"
     data-test-subj="collapsibleNav"
     id="collapsibe-nav"
-    isDocked={true}
+    isDocked={false}
     isOpen={true}
     onClose={[Function]}
   >
@@ -4682,12 +5431,16 @@ exports[`CollapsibleNav renders the default nav 3`] = `
       event="keydown"
       handler={[Function]}
     />
+    <EuiOverlayMask
+      headerZindexLocation="below"
+      onClick={[Function]}
+    />
     <EuiFocusTrap
       clickOutsideDisables={true}
-      disabled={true}
+      disabled={false}
     >
       <EuiOutsideClickDetector
-        isDisabled={true}
+        isDisabled={false}
         onOutsideClick={[Function]}
       >
         <OutsideEventDetector
@@ -4703,877 +5456,1421 @@ exports[`CollapsibleNav renders the default nav 3`] = `
             onTouchEnd={[Function]}
             onTouchStart={[Function]}
           >
-            <FocusLock
-              as="div"
-              autoFocus={true}
-              disabled={true}
-              lockProps={
-                Object {
-                  "style": undefined,
-                }
-              }
-              noFocusGuards={false}
-              persistentFocus={false}
+            <ForwardRef
+              enabled={true}
+              noIsolation={true}
               returnFocus={true}
+              scrollLock={false}
             >
-              <div
-                data-focus-guard={true}
-                key="guard-first"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={-1}
-              />
-              <div
-                data-focus-guard={true}
-                key="guard-nearest"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={-1}
-              />
-              <div
-                data-focus-lock-disabled="disabled"
-                onBlur={[Function]}
-                onFocus={[Function]}
+              <ForwardRef
+                enabled={true}
+                noIsolation={true}
+                returnFocus={true}
+                scrollLock={false}
+                sideCar={[Function]}
               >
-                <SideEffect(FocusWatcher)
+                <ForwardRef
+                  as={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "classNames": Object {
+                        "fullWidth": "width-before-scroll-bar",
+                        "zeroRight": "right-scroll-bar-position",
+                      },
+                      "defaultProps": Object {
+                        "enabled": true,
+                        "inert": false,
+                        "removeScrollBar": true,
+                      },
+                      "render": [Function],
+                    }
+                  }
                   autoFocus={true}
+                  crossFrame={true}
                   disabled={true}
-                  observed={
+                  lockProps={
+                    Object {
+                      "allowPinchZoom": undefined,
+                      "enabled": false,
+                      "inert": undefined,
+                      "shards": undefined,
+                      "sideCar": [Function],
+                    }
+                  }
+                  noFocusGuards={false}
+                  persistentFocus={false}
+                  returnFocus={true}
+                  sideCar={[Function]}
+                >
+                  <div
+                    data-focus-guard={true}
+                    key="guard-first"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                  <div
+                    data-focus-guard={true}
+                    key="guard-nearest"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                  <ForwardRef
+                    data-focus-lock-disabled="disabled"
+                    enabled={false}
+                    inert={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    removeScrollBar={true}
+                    sideCar={[Function]}
+                  >
                     <div
                       data-focus-lock-disabled="disabled"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onScrollCapture={[Function]}
+                      onTouchMoveCapture={[Function]}
+                      onWheelCapture={[Function]}
                     >
                       <nav
                         aria-label="Primary"
-                        class="euiCollapsibleNav euiCollapsibleNav--isDocked"
+                        className="euiCollapsibleNav"
                         data-test-subj="collapsibleNav"
                         id="collapsibe-nav"
                       >
-                        <div
-                          class="euiFlexItem euiFlexItem--flexGrowZero"
-                          style="flex-shrink: 0;"
+                        <EuiFlexItem
+                          grow={false}
+                          style={
+                            Object {
+                              "flexShrink": 0,
+                            }
+                          }
                         >
                           <div
-                            class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                            id="mockId"
-                            style="max-height: 40vh;"
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                            style={
+                              Object {
+                                "flexShrink": 0,
+                              }
+                            }
                           >
-                            <div
-                              class="euiCollapsibleNavGroup__children"
+                            <EuiCollapsibleNavGroup
+                              background="light"
+                              className="eui-yScroll"
+                              style={
+                                Object {
+                                  "maxHeight": "40vh",
+                                }
+                              }
                             >
-                              <ul
-                                aria-label="Pinned links"
-                                class="euiListGroup"
-                                style="max-width: none;"
+                              <div
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                id="mockId"
+                                style={
+                                  Object {
+                                    "maxHeight": "40vh",
+                                  }
+                                }
                               >
-                                <li
-                                  class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                <div
+                                  className="euiCollapsibleNavGroup__children"
                                 >
-                                  <a
-                                    class="euiListGroupItem__button"
-                                    href="/"
-                                    rel="noreferrer"
+                                  <EuiListGroup
+                                    aria-label="Pinned links"
+                                    color="text"
+                                    gutterSize="none"
+                                    listItems={
+                                      Array [
+                                        Object {
+                                          "href": "/",
+                                          "iconType": "home",
+                                          "label": "Home",
+                                          "onClick": [Function],
+                                        },
+                                      ]
+                                    }
+                                    maxWidth="none"
+                                    size="s"
                                   >
-                                    <div
-                                      class="euiListGroupItem__icon"
-                                      data-euiicon-type="home"
-                                    />
-                                    <span
-                                      class="euiListGroupItem__label"
-                                      title="Home"
+                                    <ul
+                                      aria-label="Pinned links"
+                                      className="euiListGroup"
+                                      style={
+                                        Object {
+                                          "maxWidth": "none",
+                                        }
+                                      }
                                     >
-                                      Home
-                                    </span>
-                                  </a>
-                                </li>
-                              </ul>
-                            </div>
+                                      <EuiListGroupItem
+                                        color="text"
+                                        href="/"
+                                        iconType="home"
+                                        key="title-0"
+                                        label="Home"
+                                        onClick={[Function]}
+                                        showToolTip={false}
+                                        size="s"
+                                        wrapText={false}
+                                      >
+                                        <li
+                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                        >
+                                          <a
+                                            className="euiListGroupItem__button"
+                                            href="/"
+                                            onClick={[Function]}
+                                            rel="noreferrer"
+                                          >
+                                            <EuiIcon
+                                              className="euiListGroupItem__icon"
+                                              type="home"
+                                            >
+                                              <div
+                                                className="euiListGroupItem__icon"
+                                                data-euiicon-type="home"
+                                              />
+                                            </EuiIcon>
+                                            <span
+                                              className="euiListGroupItem__label"
+                                              title="Home"
+                                            >
+                                              Home
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </EuiListGroupItem>
+                                    </ul>
+                                  </EuiListGroup>
+                                </div>
+                              </div>
+                            </EuiCollapsibleNavGroup>
                           </div>
-                        </div>
-                        <div
-                          class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                        </EuiFlexItem>
+                        <EuiCollapsibleNavGroup
+                          background="light"
                           data-test-subj="collapsibleNavGroup-recentlyViewed"
+                          initialIsOpen={true}
+                          isCollapsible={true}
+                          key="recentlyViewed"
+                          onToggle={[Function]}
+                          title="Recently viewed"
                         >
-                          <div
-                            class="euiAccordion__triggerWrapper"
-                          >
-                            <button
-                              aria-controls="mockId"
-                              aria-expanded="true"
-                              class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                              type="button"
-                            >
-                              <span
-                                class="euiAccordion__iconWrapper"
-                              >
-                                <div
-                                  class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                  data-euiicon-type="arrowRight"
-                                />
-                              </span>
-                              <span
-                                class="euiIEFlexWrapFix"
+                          <EuiAccordion
+                            arrowDisplay="right"
+                            buttonClassName="euiCollapsibleNavGroup__heading"
+                            buttonContent={
+                              <EuiFlexGroup
+                                alignItems="center"
+                                gutterSize="m"
+                                responsive={false}
                               >
-                                <div
-                                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                >
-                                  <div
-                                    class="euiFlexItem"
+                                <EuiFlexItem>
+                                  <EuiTitle
+                                    size="xxs"
                                   >
                                     <h3
-                                      class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                      className="euiCollapsibleNavGroup__title"
                                       id="mockId__title"
                                     >
                                       Recently viewed
                                     </h3>
-                                  </div>
-                                </div>
-                              </span>
-                            </button>
-                          </div>
-                          <div
-                            class="euiAccordion__childWrapper"
-                            id="mockId"
-                          >
-                            <div>
-                              <div
-                                class=""
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <div
-                                    class="euiText euiText--small"
-                                    style="padding: 0px 8px 8px;"
-                                  >
-                                    <div
-                                      class="euiTextColor euiTextColor--subdued"
-                                    >
-                                      <p>
-                                        No recently viewed items
-                                      </p>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <hr
-                          class="euiHorizontalRule euiHorizontalRule--full"
-                        />
-                        <div
-                          class="euiFlexItem eui-yScroll"
-                        >
-                          <div
-                            class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                  </EuiTitle>
+                                </EuiFlexItem>
+                              </EuiFlexGroup>
+                            }
+                            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                            data-test-subj="collapsibleNavGroup-recentlyViewed"
                             id="mockId"
+                            initialIsOpen={true}
+                            onToggle={[Function]}
+                            paddingSize="none"
                           >
                             <div
-                              class="euiCollapsibleNavGroup__children"
-                            >
-                              <ul
-                                class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                              >
-                                <li
-                                  class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                >
-                                  <button
-                                    aria-label="Undock primary navigation"
-                                    class="euiListGroupItem__button"
-                                    data-test-subj="collapsible-nav-lock"
-                                    type="button"
-                                  >
-                                    <div
-                                      class="euiListGroupItem__icon"
-                                      data-euiicon-type="lock"
-                                    />
-                                    <span
-                                      class="euiListGroupItem__label"
-                                      title="Undock navigation"
-                                    >
-                                      Undock navigation
-                                    </span>
-                                  </button>
-                                </li>
-                              </ul>
-                            </div>
-                          </div>
-                        </div>
-                        <button
-                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonEmpty__content"
-                          >
-                            <div
-                              aria-hidden="true"
-                              class="euiButtonEmpty__icon"
-                              data-euiicon-type="cross"
-                            />
-                            <span
-                              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                            >
-                              close
-                            </span>
-                          </span>
-                        </button>
-                      </nav>
-                    </div>
-                  }
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                >
-                  <FocusWatcher
-                    autoFocus={true}
-                    disabled={true}
-                    observed={
-                      <div
-                        data-focus-lock-disabled="disabled"
-                      >
-                        <nav
-                          aria-label="Primary"
-                          class="euiCollapsibleNav euiCollapsibleNav--isDocked"
-                          data-test-subj="collapsibleNav"
-                          id="collapsibe-nav"
-                        >
-                          <div
-                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                            style="flex-shrink: 0;"
-                          >
-                            <div
-                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                              id="mockId"
-                              style="max-height: 40vh;"
+                              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-recentlyViewed"
+                              onToggle={[Function]}
                             >
                               <div
-                                class="euiCollapsibleNavGroup__children"
-                              >
-                                <ul
-                                  aria-label="Pinned links"
-                                  class="euiListGroup"
-                                  style="max-width: none;"
-                                >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      class="euiListGroupItem__button"
-                                      href="/"
-                                      rel="noreferrer"
-                                    >
-                                      <div
-                                        class="euiListGroupItem__icon"
-                                        data-euiicon-type="home"
-                                      />
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Home"
-                                      >
-                                        Home
-                                      </span>
-                                    </a>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-recentlyViewed"
-                          >
-                            <div
-                              class="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded="true"
-                                class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                type="button"
+                                className="euiAccordion__triggerWrapper"
                               >
-                                <span
-                                  class="euiAccordion__iconWrapper"
-                                >
-                                  <div
-                                    class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    data-euiicon-type="arrowRight"
-                                  />
-                                </span>
-                                <span
-                                  class="euiIEFlexWrapFix"
-                                >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                  >
-                                    <div
-                                      class="euiFlexItem"
-                                    >
-                                      <h3
-                                        class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                        id="mockId__title"
-                                      >
-                                        Recently viewed
-                                      </h3>
-                                    </div>
-                                  </div>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              class="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <div>
-                                <div
-                                  class=""
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded={true}
+                                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <span
+                                    className="euiAccordion__iconWrapper"
+                                  >
+                                    <EuiIcon
+                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      size="m"
+                                      type="arrowRight"
+                                    >
+                                      <div
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                        size="m"
+                                      />
+                                    </EuiIcon>
+                                  </span>
+                                  <span
+                                    className="euiIEFlexWrapFix"
                                   >
+                                    <EuiFlexGroup
+                                      alignItems="center"
+                                      gutterSize="m"
+                                      responsive={false}
+                                    >
+                                      <div
+                                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                      >
+                                        <EuiFlexItem>
+                                          <div
+                                            className="euiFlexItem"
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                id="mockId__title"
+                                              >
+                                                Recently viewed
+                                              </h3>
+                                            </EuiTitle>
+                                          </div>
+                                        </EuiFlexItem>
+                                      </div>
+                                    </EuiFlexGroup>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                className="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <EuiResizeObserver
+                                  onResize={[Function]}
+                                >
+                                  <div>
                                     <div
-                                      class="euiText euiText--small"
-                                      style="padding: 0px 8px 8px;"
+                                      className=""
                                     >
                                       <div
-                                        class="euiTextColor euiTextColor--subdued"
+                                        className="euiCollapsibleNavGroup__children"
                                       >
-                                        <p>
-                                          No recently viewed items
-                                        </p>
+                                        <EuiText
+                                          color="subdued"
+                                          size="s"
+                                          style={
+                                            Object {
+                                              "padding": "0 8px 8px",
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiText euiText--small"
+                                            style={
+                                              Object {
+                                                "padding": "0 8px 8px",
+                                              }
+                                            }
+                                          >
+                                            <EuiTextColor
+                                              color="subdued"
+                                              component="div"
+                                            >
+                                              <div
+                                                className="euiTextColor euiTextColor--subdued"
+                                              >
+                                                <p>
+                                                  No recently viewed items
+                                                </p>
+                                              </div>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiText>
                                       </div>
                                     </div>
                                   </div>
-                                </div>
+                                </EuiResizeObserver>
                               </div>
                             </div>
-                          </div>
+                          </EuiAccordion>
+                        </EuiCollapsibleNavGroup>
+                        <EuiHorizontalRule
+                          margin="none"
+                        >
                           <hr
-                            class="euiHorizontalRule euiHorizontalRule--full"
+                            className="euiHorizontalRule euiHorizontalRule--full"
                           />
+                        </EuiHorizontalRule>
+                        <EuiFlexItem
+                          className="eui-yScroll"
+                        >
                           <div
-                            class="euiFlexItem eui-yScroll"
+                            className="euiFlexItem eui-yScroll"
                           >
-                            <div
-                              class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                              id="mockId"
+                            <EuiShowFor
+                              sizes={
+                                Array [
+                                  "l",
+                                  "xl",
+                                ]
+                              }
                             >
-                              <div
-                                class="euiCollapsibleNavGroup__children"
+                              <EuiCollapsibleNavGroup
+                                className="eui-showFor--l eui-showFor--xl"
+                                key=".0"
                               >
-                                <ul
-                                  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                <div
+                                  className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                  id="mockId"
                                 >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                  <div
+                                    className="euiCollapsibleNavGroup__children"
                                   >
-                                    <button
-                                      aria-label="Undock primary navigation"
-                                      class="euiListGroupItem__button"
-                                      data-test-subj="collapsible-nav-lock"
-                                      type="button"
+                                    <EuiListGroup
+                                      flush={true}
                                     >
-                                      <div
-                                        class="euiListGroupItem__icon"
-                                        data-euiicon-type="lock"
-                                      />
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Undock navigation"
+                                      <ul
+                                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                       >
-                                        Undock navigation
-                                      </span>
-                                    </button>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
+                                        <EuiListGroupItem
+                                          aria-label="Dock primary navigation"
+                                          buttonRef={
+                                            Object {
+                                              "current": <button
+                                                aria-label="Dock primary navigation"
+                                                class="euiListGroupItem__button"
+                                                data-test-subj="collapsible-nav-lock"
+                                                type="button"
+                                              >
+                                                <div
+                                                  class="euiListGroupItem__icon"
+                                                  data-euiicon-type="lockOpen"
+                                                />
+                                                <span
+                                                  class="euiListGroupItem__label"
+                                                  title="Dock navigation"
+                                                >
+                                                  Dock navigation
+                                                </span>
+                                              </button>,
+                                            }
+                                          }
+                                          color="subdued"
+                                          data-test-subj="collapsible-nav-lock"
+                                          iconType="lockOpen"
+                                          label="Dock navigation"
+                                          onClick={[Function]}
+                                          size="xs"
+                                        >
+                                          <li
+                                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                          >
+                                            <button
+                                              aria-label="Dock primary navigation"
+                                              className="euiListGroupItem__button"
+                                              data-test-subj="collapsible-nav-lock"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiIcon
+                                                className="euiListGroupItem__icon"
+                                                type="lockOpen"
+                                              >
+                                                <div
+                                                  className="euiListGroupItem__icon"
+                                                  data-euiicon-type="lockOpen"
+                                                />
+                                              </EuiIcon>
+                                              <span
+                                                className="euiListGroupItem__label"
+                                                title="Dock navigation"
+                                              >
+                                                Dock navigation
+                                              </span>
+                                            </button>
+                                          </li>
+                                        </EuiListGroupItem>
+                                      </ul>
+                                    </EuiListGroup>
+                                  </div>
+                                </div>
+                              </EuiCollapsibleNavGroup>
+                            </EuiShowFor>
                           </div>
-                          <button
-                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                            type="button"
+                        </EuiFlexItem>
+                        <EuiScreenReaderOnly
+                          showOnFocus={true}
+                        >
+                          <EuiButtonEmpty
+                            className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                            iconType="cross"
+                            onClick={[Function]}
+                            size="xs"
+                            textProps={
+                              Object {
+                                "className": "euiCollapsibleNav__closeButtonText",
+                              }
+                            }
                           >
-                            <span
-                              class="euiButtonEmpty__content"
+                            <button
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                              onClick={[Function]}
+                              type="button"
                             >
-                              <div
-                                aria-hidden="true"
-                                class="euiButtonEmpty__icon"
-                                data-euiicon-type="cross"
-                              />
-                              <span
-                                class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                              <EuiButtonContent
+                                className="euiButtonEmpty__content"
+                                iconSide="left"
+                                iconType="cross"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
+                                  }
+                                }
                               >
-                                close
-                              </span>
-                            </span>
-                          </button>
-                        </nav>
-                      </div>
+                                <span
+                                  className="euiButtonContent euiButtonEmpty__content"
+                                >
+                                  <EuiIcon
+                                    className="euiButtonContent__icon"
+                                    size="m"
+                                    type="cross"
+                                  >
+                                    <div
+                                      className="euiButtonContent__icon"
+                                      data-euiicon-type="cross"
+                                      size="m"
+                                    />
+                                  </EuiIcon>
+                                  <span
+                                    className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                                  >
+                                    <EuiI18n
+                                      default="close"
+                                      token="euiCollapsibleNav.closeButtonLabel"
+                                    >
+                                      close
+                                    </EuiI18n>
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonEmpty>
+                        </EuiScreenReaderOnly>
+                      </nav>
+                    </div>
+                  </ForwardRef>
+                  <div
+                    data-focus-guard={true}
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
                     }
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
+                    tabIndex={-1}
                   />
-                </SideEffect(FocusWatcher)>
-                <nav
-                  aria-label="Primary"
-                  className="euiCollapsibleNav euiCollapsibleNav--isDocked"
-                  data-test-subj="collapsibleNav"
-                  id="collapsibe-nav"
+                </ForwardRef>
+                <RequireSideCar
+                  noIsolation={true}
+                  setLockProps={[Function]}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
+                  }
                 >
-                  <EuiFlexItem
-                    grow={false}
-                    style={
+                  <SideCar
+                    noIsolation={true}
+                    setLockProps={[Function]}
+                    sideCar={
                       Object {
-                        "flexShrink": 0,
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
                       }
                     }
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "flexShrink": 0,
-                        }
-                      }
-                    >
-                      <EuiCollapsibleNavGroup
-                        background="light"
-                        className="eui-yScroll"
-                        style={
-                          Object {
-                            "maxHeight": "40vh",
-                          }
-                        }
-                      >
-                        <div
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                          id="mockId"
-                          style={
-                            Object {
-                              "maxHeight": "40vh",
-                            }
-                          }
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              aria-label="Pinned links"
-                              color="text"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "href": "/",
-                                    "iconType": "home",
-                                    "label": "Home",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
-                            >
-                              <ul
-                                aria-label="Pinned links"
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
-                              >
-                                <EuiListGroupItem
-                                  color="text"
-                                  href="/"
-                                  iconType="home"
-                                  key="title-0"
-                                  label="Home"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
-                                >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      href="/"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
-                                    >
-                                      <EuiIcon
-                                        className="euiListGroupItem__icon"
-                                        type="home"
-                                      >
-                                        <div
-                                          className="euiListGroupItem__icon"
-                                          data-euiicon-type="home"
-                                        />
-                                      </EuiIcon>
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="Home"
-                                      >
-                                        Home
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </EuiCollapsibleNavGroup>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiCollapsibleNavGroup
-                    background="light"
-                    data-test-subj="collapsibleNavGroup-recentlyViewed"
-                    initialIsOpen={true}
-                    isCollapsible={true}
-                    key="recentlyViewed"
-                    onToggle={[Function]}
-                    title="Recently viewed"
-                  >
-                    <EuiAccordion
-                      arrowDisplay="right"
-                      buttonClassName="euiCollapsibleNavGroup__heading"
-                      buttonContent={
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <EuiFlexItem>
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <h3
-                                className="euiCollapsibleNavGroup__title"
-                                id="mockId__title"
-                              >
-                                Recently viewed
-                              </h3>
-                            </EuiTitle>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      }
-                      className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                      data-test-subj="collapsibleNavGroup-recentlyViewed"
-                      id="mockId"
-                      initialIsOpen={true}
-                      onToggle={[Function]}
-                      paddingSize="none"
-                    >
-                      <div
-                        className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                        data-test-subj="collapsibleNavGroup-recentlyViewed"
-                        onToggle={[Function]}
-                      >
-                        <div
-                          className="euiAccordion__triggerWrapper"
-                        >
-                          <button
-                            aria-controls="mockId"
-                            aria-expanded={true}
-                            className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <span
-                              className="euiAccordion__iconWrapper"
-                            >
-                              <EuiIcon
-                                className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                size="m"
-                                type="arrowRight"
-                              >
-                                <div
-                                  className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                  data-euiicon-type="arrowRight"
-                                  size="m"
-                                />
-                              </EuiIcon>
-                            </span>
-                            <span
-                              className="euiIEFlexWrapFix"
-                            >
-                              <EuiFlexGroup
-                                alignItems="center"
-                                gutterSize="m"
-                                responsive={false}
-                              >
-                                <div
-                                  className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                >
-                                  <EuiFlexItem>
-                                    <div
-                                      className="euiFlexItem"
-                                    >
-                                      <EuiTitle
-                                        size="xxs"
-                                      >
-                                        <h3
-                                          className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Recently viewed
-                                        </h3>
-                                      </EuiTitle>
-                                    </div>
-                                  </EuiFlexItem>
-                                </div>
-                              </EuiFlexGroup>
-                            </span>
-                          </button>
-                        </div>
-                        <div
-                          className="euiAccordion__childWrapper"
-                          id="mockId"
+                  >
+                    <Effect
+                      noIsolation={true}
+                      setLockProps={[Function]}
+                    >
+                      <Component>
+                        <Sheet
+                          styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                        />
+                      </Component>
+                    </Effect>
+                  </SideCar>
+                </RequireSideCar>
+              </ForwardRef>
+            </ForwardRef>
+          </div>
+        </OutsideEventDetector>
+      </EuiOutsideClickDetector>
+    </EuiFocusTrap>
+  </EuiCollapsibleNav>
+</CollapsibleNav>
+`;
+
+exports[`CollapsibleNav renders the default nav 3`] = `
+<CollapsibleNav
+  appId$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": "test",
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  basePath={
+    BasePath {
+      "basePath": "/test",
+      "get": [Function],
+      "prepend": [Function],
+      "remove": [Function],
+      "serverBasePath": "/test",
+    }
+  }
+  closeNav={[Function]}
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": undefined,
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  homeHref="/"
+  id="collapsibe-nav"
+  isLocked={true}
+  isOpen={true}
+  legacyMode={false}
+  navLinks$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Array [],
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  navigateToApp={[Function]}
+  onIsLockedUpdate={[Function]}
+  recentlyAccessed$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Array [],
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+  storage={
+    StubBrowserStorage {
+      "keys": Array [],
+      "size": 0,
+      "sizeLimit": 5000000,
+      "values": Array [],
+    }
+  }
+>
+  <EuiCollapsibleNav
+    aria-label="Primary"
+    data-test-subj="collapsibleNav"
+    id="collapsibe-nav"
+    isDocked={true}
+    isOpen={true}
+    onClose={[Function]}
+  >
+    <EuiWindowEvent
+      event="keydown"
+      handler={[Function]}
+    />
+    <EuiFocusTrap
+      clickOutsideDisables={true}
+      disabled={true}
+    >
+      <EuiOutsideClickDetector
+        isDisabled={true}
+        onOutsideClick={[Function]}
+      >
+        <OutsideEventDetector
+          handleEvent={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+          >
+            <ForwardRef
+              enabled={false}
+              noIsolation={true}
+              returnFocus={true}
+              scrollLock={false}
+            >
+              <ForwardRef
+                enabled={false}
+                noIsolation={true}
+                returnFocus={true}
+                scrollLock={false}
+                sideCar={[Function]}
+              >
+                <ForwardRef
+                  as={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "classNames": Object {
+                        "fullWidth": "width-before-scroll-bar",
+                        "zeroRight": "right-scroll-bar-position",
+                      },
+                      "defaultProps": Object {
+                        "enabled": true,
+                        "inert": false,
+                        "removeScrollBar": true,
+                      },
+                      "render": [Function],
+                    }
+                  }
+                  autoFocus={true}
+                  crossFrame={true}
+                  disabled={true}
+                  lockProps={
+                    Object {
+                      "allowPinchZoom": undefined,
+                      "enabled": false,
+                      "inert": undefined,
+                      "onMouseDown": [Function],
+                      "onTouchStart": [Function],
+                      "shards": undefined,
+                      "sideCar": [Function],
+                    }
+                  }
+                  noFocusGuards={false}
+                  onActivation={[Function]}
+                  onDeactivation={[Function]}
+                  persistentFocus={false}
+                  returnFocus={true}
+                  sideCar={[Function]}
+                >
+                  <div
+                    data-focus-guard={true}
+                    key="guard-first"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                  <div
+                    data-focus-guard={true}
+                    key="guard-nearest"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                  <ForwardRef
+                    data-focus-lock-disabled="disabled"
+                    enabled={false}
+                    inert={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onTouchStart={[Function]}
+                    removeScrollBar={true}
+                    sideCar={[Function]}
+                  >
+                    <div
+                      data-focus-lock-disabled="disabled"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onScrollCapture={[Function]}
+                      onTouchMoveCapture={[Function]}
+                      onTouchStart={[Function]}
+                      onWheelCapture={[Function]}
+                    >
+                      <nav
+                        aria-label="Primary"
+                        className="euiCollapsibleNav euiCollapsibleNav--isDocked"
+                        data-test-subj="collapsibleNav"
+                        id="collapsibe-nav"
+                      >
+                        <EuiFlexItem
+                          grow={false}
+                          style={
+                            Object {
+                              "flexShrink": 0,
+                            }
+                          }
                         >
-                          <EuiResizeObserver
-                            onResize={[Function]}
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                            style={
+                              Object {
+                                "flexShrink": 0,
+                              }
+                            }
                           >
-                            <div>
+                            <EuiCollapsibleNavGroup
+                              background="light"
+                              className="eui-yScroll"
+                              style={
+                                Object {
+                                  "maxHeight": "40vh",
+                                }
+                              }
+                            >
                               <div
-                                className=""
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                id="mockId"
+                                style={
+                                  Object {
+                                    "maxHeight": "40vh",
+                                  }
+                                }
                               >
                                 <div
                                   className="euiCollapsibleNavGroup__children"
                                 >
-                                  <EuiText
-                                    color="subdued"
-                                    size="s"
-                                    style={
-                                      Object {
-                                        "padding": "0 8px 8px",
-                                      }
+                                  <EuiListGroup
+                                    aria-label="Pinned links"
+                                    color="text"
+                                    gutterSize="none"
+                                    listItems={
+                                      Array [
+                                        Object {
+                                          "href": "/",
+                                          "iconType": "home",
+                                          "label": "Home",
+                                          "onClick": [Function],
+                                        },
+                                      ]
                                     }
+                                    maxWidth="none"
+                                    size="s"
                                   >
-                                    <div
-                                      className="euiText euiText--small"
+                                    <ul
+                                      aria-label="Pinned links"
+                                      className="euiListGroup"
                                       style={
                                         Object {
-                                          "padding": "0 8px 8px",
+                                          "maxWidth": "none",
                                         }
                                       }
                                     >
-                                      <EuiTextColor
-                                        color="subdued"
-                                        component="div"
+                                      <EuiListGroupItem
+                                        color="text"
+                                        href="/"
+                                        iconType="home"
+                                        key="title-0"
+                                        label="Home"
+                                        onClick={[Function]}
+                                        showToolTip={false}
+                                        size="s"
+                                        wrapText={false}
                                       >
-                                        <div
-                                          className="euiTextColor euiTextColor--subdued"
+                                        <li
+                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                         >
-                                          <p>
-                                            No recently viewed items
-                                          </p>
-                                        </div>
-                                      </EuiTextColor>
-                                    </div>
-                                  </EuiText>
+                                          <a
+                                            className="euiListGroupItem__button"
+                                            href="/"
+                                            onClick={[Function]}
+                                            rel="noreferrer"
+                                          >
+                                            <EuiIcon
+                                              className="euiListGroupItem__icon"
+                                              type="home"
+                                            >
+                                              <div
+                                                className="euiListGroupItem__icon"
+                                                data-euiicon-type="home"
+                                              />
+                                            </EuiIcon>
+                                            <span
+                                              className="euiListGroupItem__label"
+                                              title="Home"
+                                            >
+                                              Home
+                                            </span>
+                                          </a>
+                                        </li>
+                                      </EuiListGroupItem>
+                                    </ul>
+                                  </EuiListGroup>
                                 </div>
                               </div>
-                            </div>
-                          </EuiResizeObserver>
-                        </div>
-                      </div>
-                    </EuiAccordion>
-                  </EuiCollapsibleNavGroup>
-                  <EuiHorizontalRule
-                    margin="none"
-                  >
-                    <hr
-                      className="euiHorizontalRule euiHorizontalRule--full"
-                    />
-                  </EuiHorizontalRule>
-                  <EuiFlexItem
-                    className="eui-yScroll"
-                  >
-                    <div
-                      className="euiFlexItem eui-yScroll"
-                    >
-                      <EuiShowFor
-                        sizes={
-                          Array [
-                            "l",
-                            "xl",
-                          ]
-                        }
-                      >
+                            </EuiCollapsibleNavGroup>
+                          </div>
+                        </EuiFlexItem>
                         <EuiCollapsibleNavGroup
-                          className="eui-showFor--l eui-showFor--xl"
-                          key=".0"
+                          background="light"
+                          data-test-subj="collapsibleNavGroup-recentlyViewed"
+                          initialIsOpen={true}
+                          isCollapsible={true}
+                          key="recentlyViewed"
+                          onToggle={[Function]}
+                          title="Recently viewed"
                         >
-                          <div
-                            className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                          <EuiAccordion
+                            arrowDisplay="right"
+                            buttonClassName="euiCollapsibleNavGroup__heading"
+                            buttonContent={
+                              <EuiFlexGroup
+                                alignItems="center"
+                                gutterSize="m"
+                                responsive={false}
+                              >
+                                <EuiFlexItem>
+                                  <EuiTitle
+                                    size="xxs"
+                                  >
+                                    <h3
+                                      className="euiCollapsibleNavGroup__title"
+                                      id="mockId__title"
+                                    >
+                                      Recently viewed
+                                    </h3>
+                                  </EuiTitle>
+                                </EuiFlexItem>
+                              </EuiFlexGroup>
+                            }
+                            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                            data-test-subj="collapsibleNavGroup-recentlyViewed"
                             id="mockId"
+                            initialIsOpen={true}
+                            onToggle={[Function]}
+                            paddingSize="none"
                           >
                             <div
-                              className="euiCollapsibleNavGroup__children"
+                              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                              data-test-subj="collapsibleNavGroup-recentlyViewed"
+                              onToggle={[Function]}
                             >
-                              <EuiListGroup
-                                flush={true}
+                              <div
+                                className="euiAccordion__triggerWrapper"
                               >
-                                <ul
-                                  className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                <button
+                                  aria-controls="mockId"
+                                  aria-expanded={true}
+                                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <EuiListGroupItem
-                                    aria-label="Undock primary navigation"
-                                    buttonRef={
-                                      Object {
-                                        "current": <button
-                                          aria-label="Undock primary navigation"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsible-nav-lock"
-                                          type="button"
-                                        >
+                                  <span
+                                    className="euiAccordion__iconWrapper"
+                                  >
+                                    <EuiIcon
+                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                      size="m"
+                                      type="arrowRight"
+                                    >
+                                      <div
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        data-euiicon-type="arrowRight"
+                                        size="m"
+                                      />
+                                    </EuiIcon>
+                                  </span>
+                                  <span
+                                    className="euiIEFlexWrapFix"
+                                  >
+                                    <EuiFlexGroup
+                                      alignItems="center"
+                                      gutterSize="m"
+                                      responsive={false}
+                                    >
+                                      <div
+                                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                      >
+                                        <EuiFlexItem>
                                           <div
-                                            class="euiListGroupItem__icon"
-                                            data-euiicon-type="lock"
-                                          />
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Undock navigation"
+                                            className="euiFlexItem"
                                           >
-                                            Undock navigation
-                                          </span>
-                                        </button>,
-                                      }
-                                    }
-                                    color="subdued"
-                                    data-test-subj="collapsible-nav-lock"
-                                    iconType="lock"
-                                    label="Undock navigation"
-                                    onClick={[Function]}
-                                    size="xs"
-                                  >
-                                    <li
-                                      className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                id="mockId__title"
+                                              >
+                                                Recently viewed
+                                              </h3>
+                                            </EuiTitle>
+                                          </div>
+                                        </EuiFlexItem>
+                                      </div>
+                                    </EuiFlexGroup>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                className="euiAccordion__childWrapper"
+                                id="mockId"
+                              >
+                                <EuiResizeObserver
+                                  onResize={[Function]}
+                                >
+                                  <div>
+                                    <div
+                                      className=""
                                     >
-                                      <button
-                                        aria-label="Undock primary navigation"
-                                        className="euiListGroupItem__button"
-                                        data-test-subj="collapsible-nav-lock"
-                                        disabled={false}
-                                        onClick={[Function]}
-                                        type="button"
+                                      <div
+                                        className="euiCollapsibleNavGroup__children"
                                       >
-                                        <EuiIcon
-                                          className="euiListGroupItem__icon"
-                                          type="lock"
+                                        <EuiText
+                                          color="subdued"
+                                          size="s"
+                                          style={
+                                            Object {
+                                              "padding": "0 8px 8px",
+                                            }
+                                          }
                                         >
                                           <div
-                                            className="euiListGroupItem__icon"
-                                            data-euiicon-type="lock"
-                                          />
-                                        </EuiIcon>
-                                        <span
-                                          className="euiListGroupItem__label"
-                                          title="Undock navigation"
-                                        >
-                                          Undock navigation
-                                        </span>
-                                      </button>
-                                    </li>
-                                  </EuiListGroupItem>
-                                </ul>
-                              </EuiListGroup>
+                                            className="euiText euiText--small"
+                                            style={
+                                              Object {
+                                                "padding": "0 8px 8px",
+                                              }
+                                            }
+                                          >
+                                            <EuiTextColor
+                                              color="subdued"
+                                              component="div"
+                                            >
+                                              <div
+                                                className="euiTextColor euiTextColor--subdued"
+                                              >
+                                                <p>
+                                                  No recently viewed items
+                                                </p>
+                                              </div>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiText>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </EuiResizeObserver>
+                              </div>
                             </div>
-                          </div>
+                          </EuiAccordion>
                         </EuiCollapsibleNavGroup>
-                      </EuiShowFor>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiScreenReaderOnly
-                    showOnFocus={true}
-                  >
-                    <EuiButtonEmpty
-                      className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                      iconType="cross"
-                      onClick={[Function]}
-                      size="xs"
-                      textProps={
-                        Object {
-                          "className": "euiCollapsibleNav__closeButtonText",
-                        }
-                      }
-                    >
-                      <button
-                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <span
-                          className="euiButtonEmpty__content"
+                        <EuiHorizontalRule
+                          margin="none"
+                        >
+                          <hr
+                            className="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                        </EuiHorizontalRule>
+                        <EuiFlexItem
+                          className="eui-yScroll"
                         >
-                          <EuiIcon
-                            aria-hidden="true"
-                            className="euiButtonEmpty__icon"
-                            size="m"
-                            type="cross"
+                          <div
+                            className="euiFlexItem eui-yScroll"
                           >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonEmpty__icon"
-                              data-euiicon-type="cross"
-                              size="m"
-                            />
-                          </EuiIcon>
-                          <span
-                            className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                            <EuiShowFor
+                              sizes={
+                                Array [
+                                  "l",
+                                  "xl",
+                                ]
+                              }
+                            >
+                              <EuiCollapsibleNavGroup
+                                className="eui-showFor--l eui-showFor--xl"
+                                key=".0"
+                              >
+                                <div
+                                  className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                  id="mockId"
+                                >
+                                  <div
+                                    className="euiCollapsibleNavGroup__children"
+                                  >
+                                    <EuiListGroup
+                                      flush={true}
+                                    >
+                                      <ul
+                                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                      >
+                                        <EuiListGroupItem
+                                          aria-label="Undock primary navigation"
+                                          buttonRef={
+                                            Object {
+                                              "current": <button
+                                                aria-label="Undock primary navigation"
+                                                class="euiListGroupItem__button"
+                                                data-test-subj="collapsible-nav-lock"
+                                                type="button"
+                                              >
+                                                <div
+                                                  class="euiListGroupItem__icon"
+                                                  data-euiicon-type="lock"
+                                                />
+                                                <span
+                                                  class="euiListGroupItem__label"
+                                                  title="Undock navigation"
+                                                >
+                                                  Undock navigation
+                                                </span>
+                                              </button>,
+                                            }
+                                          }
+                                          color="subdued"
+                                          data-test-subj="collapsible-nav-lock"
+                                          iconType="lock"
+                                          label="Undock navigation"
+                                          onClick={[Function]}
+                                          size="xs"
+                                        >
+                                          <li
+                                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                          >
+                                            <button
+                                              aria-label="Undock primary navigation"
+                                              className="euiListGroupItem__button"
+                                              data-test-subj="collapsible-nav-lock"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiIcon
+                                                className="euiListGroupItem__icon"
+                                                type="lock"
+                                              >
+                                                <div
+                                                  className="euiListGroupItem__icon"
+                                                  data-euiicon-type="lock"
+                                                />
+                                              </EuiIcon>
+                                              <span
+                                                className="euiListGroupItem__label"
+                                                title="Undock navigation"
+                                              >
+                                                Undock navigation
+                                              </span>
+                                            </button>
+                                          </li>
+                                        </EuiListGroupItem>
+                                      </ul>
+                                    </EuiListGroup>
+                                  </div>
+                                </div>
+                              </EuiCollapsibleNavGroup>
+                            </EuiShowFor>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiScreenReaderOnly
+                          showOnFocus={true}
+                        >
+                          <EuiButtonEmpty
+                            className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                            iconType="cross"
+                            onClick={[Function]}
+                            size="xs"
+                            textProps={
+                              Object {
+                                "className": "euiCollapsibleNav__closeButtonText",
+                              }
+                            }
                           >
-                            <EuiI18n
-                              default="close"
-                              token="euiCollapsibleNav.closeButtonLabel"
+                            <button
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                              onClick={[Function]}
+                              type="button"
                             >
-                              close
-                            </EuiI18n>
-                          </span>
-                        </span>
-                      </button>
-                    </EuiButtonEmpty>
-                  </EuiScreenReaderOnly>
-                </nav>
-              </div>
-              <div
-                data-focus-guard={true}
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={-1}
-              />
-            </FocusLock>
+                              <EuiButtonContent
+                                className="euiButtonEmpty__content"
+                                iconSide="left"
+                                iconType="cross"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButtonEmpty__content"
+                                >
+                                  <EuiIcon
+                                    className="euiButtonContent__icon"
+                                    size="m"
+                                    type="cross"
+                                  >
+                                    <div
+                                      className="euiButtonContent__icon"
+                                      data-euiicon-type="cross"
+                                      size="m"
+                                    />
+                                  </EuiIcon>
+                                  <span
+                                    className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                                  >
+                                    <EuiI18n
+                                      default="close"
+                                      token="euiCollapsibleNav.closeButtonLabel"
+                                    >
+                                      close
+                                    </EuiI18n>
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonEmpty>
+                        </EuiScreenReaderOnly>
+                      </nav>
+                    </div>
+                  </ForwardRef>
+                  <div
+                    data-focus-guard={true}
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                </ForwardRef>
+              </ForwardRef>
+            </ForwardRef>
           </div>
         </OutsideEventDetector>
       </EuiOutsideClickDetector>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index ce56b19f82cd0..a1920154d9f71 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -9016,953 +9016,264 @@ exports[`Header renders 3`] = `
                 onTouchEnd={[Function]}
                 onTouchStart={[Function]}
               >
-                <FocusLock
-                  as="div"
-                  autoFocus={true}
-                  disabled={true}
-                  lockProps={
-                    Object {
-                      "style": undefined,
-                    }
-                  }
-                  noFocusGuards={false}
-                  persistentFocus={false}
+                <ForwardRef
+                  enabled={false}
+                  noIsolation={true}
                   returnFocus={true}
+                  scrollLock={false}
                 >
-                  <div
-                    data-focus-guard={true}
-                    key="guard-first"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                  <div
-                    data-focus-guard={true}
-                    key="guard-nearest"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                  <div
-                    data-focus-lock-disabled="disabled"
-                    onBlur={[Function]}
-                    onFocus={[Function]}
+                  <ForwardRef
+                    enabled={false}
+                    noIsolation={true}
+                    returnFocus={true}
+                    scrollLock={false}
+                    sideCar={[Function]}
                   >
-                    <SideEffect(FocusWatcher)
+                    <ForwardRef
+                      as={
+                        Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "classNames": Object {
+                            "fullWidth": "width-before-scroll-bar",
+                            "zeroRight": "right-scroll-bar-position",
+                          },
+                          "defaultProps": Object {
+                            "enabled": true,
+                            "inert": false,
+                            "removeScrollBar": true,
+                          },
+                          "render": [Function],
+                        }
+                      }
                       autoFocus={true}
+                      crossFrame={true}
                       disabled={true}
-                      observed={
-                        <div
-                          data-focus-lock-disabled="disabled"
-                        >
-                          <nav
-                            aria-label="Primary"
-                            class="euiCollapsibleNav euiCollapsibleNav--isDocked"
-                            data-test-subj="collapsibleNav"
-                            id="mockId"
-                          >
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero"
-                              style="flex-shrink: 0;"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style="max-height: 40vh;"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    class="euiListGroup"
-                                    style="max-width: none;"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                    >
-                                      <button
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsibleNavCustomNavLink"
-                                        type="button"
-                                      >
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="Manage cloud deployment"
-                                        >
-                                          Manage cloud deployment
-                                        </span>
-                                      </button>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <hr
-                              class="euiHorizontalRule euiHorizontalRule--full"
-                            />
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero"
-                              style="flex-shrink: 0;"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style="max-height: 40vh;"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    aria-label="Pinned links"
-                                    class="euiListGroup"
-                                    style="max-width: none;"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                    >
-                                      <a
-                                        class="euiListGroupItem__button"
-                                        href="/"
-                                        rel="noreferrer"
-                                      >
-                                        <div
-                                          class="euiListGroupItem__icon"
-                                          data-euiicon-type="home"
-                                        />
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="Home"
-                                        >
-                                          Home
-                                        </span>
-                                      </a>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-recentlyViewed"
-                            >
-                              <div
-                                class="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <div
-                                        class="euiFlexItem"
-                                      >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Recently viewed
-                                        </h3>
-                                      </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Recently viewed links"
-                                        class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            aria-label="dashboard, type: kibana"
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink--recent"
-                                            href="http://localhost/"
-                                            rel="noreferrer"
-                                            title="dashboard, type: kibana"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="dashboard"
-                                            >
-                                              dashboard
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <hr
-                              class="euiHorizontalRule euiHorizontalRule--full"
-                            />
-                            <div
-                              class="euiFlexItem eui-yScroll"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup"
-                                data-test-subj="collapsibleNavGroup-noCategory"
-                                id="mockId"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                    >
-                                      <button
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsibleNavAppLink"
-                                        type="button"
-                                      >
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="kibana"
-                                        >
-                                          kibana
-                                        </span>
-                                      </button>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                              <div
-                                class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                id="mockId"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                    >
-                                      <button
-                                        aria-label="Undock primary navigation"
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsible-nav-lock"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiListGroupItem__icon"
-                                          data-euiicon-type="lock"
-                                        />
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="Undock navigation"
-                                        >
-                                          Undock navigation
-                                        </span>
-                                      </button>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <button
-                              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                              type="button"
-                            >
-                              <span
-                                class="euiButtonEmpty__content"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  class="euiButtonEmpty__icon"
-                                  data-euiicon-type="cross"
-                                />
-                                <span
-                                  class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                >
-                                  close
-                                </span>
-                              </span>
-                            </button>
-                          </nav>
-                        </div>
+                      lockProps={
+                        Object {
+                          "allowPinchZoom": undefined,
+                          "enabled": false,
+                          "inert": undefined,
+                          "shards": undefined,
+                          "sideCar": [Function],
+                        }
                       }
-                      onActivation={[Function]}
-                      onDeactivation={[Function]}
+                      noFocusGuards={false}
                       persistentFocus={false}
+                      returnFocus={true}
+                      sideCar={[Function]}
                     >
-                      <FocusWatcher
-                        autoFocus={true}
-                        disabled={true}
-                        observed={
-                          <div
-                            data-focus-lock-disabled="disabled"
-                          >
-                            <nav
-                              aria-label="Primary"
-                              class="euiCollapsibleNav euiCollapsibleNav--isDocked"
-                              data-test-subj="collapsibleNav"
-                              id="mockId"
-                            >
-                              <div
-                                class="euiFlexItem euiFlexItem--flexGrowZero"
-                                style="flex-shrink: 0;"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                  id="mockId"
-                                  style="max-height: 40vh;"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      class="euiListGroup"
-                                      style="max-width: none;"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                      >
-                                        <button
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavCustomNavLink"
-                                          type="button"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Manage cloud deployment"
-                                          >
-                                            Manage cloud deployment
-                                          </span>
-                                        </button>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                              <hr
-                                class="euiHorizontalRule euiHorizontalRule--full"
-                              />
-                              <div
-                                class="euiFlexItem euiFlexItem--flexGrowZero"
-                                style="flex-shrink: 0;"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                  id="mockId"
-                                  style="max-height: 40vh;"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      aria-label="Pinned links"
-                                      class="euiListGroup"
-                                      style="max-width: none;"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          href="/"
-                                          rel="noreferrer"
-                                        >
-                                          <div
-                                            class="euiListGroupItem__icon"
-                                            data-euiicon-type="home"
-                                          />
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Home"
-                                          >
-                                            Home
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-recentlyViewed"
-                              >
-                                <div
-                                  class="euiAccordion__triggerWrapper"
-                                >
-                                  <button
-                                    aria-controls="mockId"
-                                    aria-expanded="true"
-                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiAccordion__iconWrapper"
-                                    >
-                                      <div
-                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                      />
-                                    </span>
-                                    <span
-                                      class="euiIEFlexWrapFix"
-                                    >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <div
-                                          class="euiFlexItem"
-                                        >
-                                          <h3
-                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                            id="mockId__title"
-                                          >
-                                            Recently viewed
-                                          </h3>
-                                        </div>
-                                      </div>
-                                    </span>
-                                  </button>
-                                </div>
-                                <div
-                                  class="euiAccordion__childWrapper"
-                                  id="mockId"
-                                >
-                                  <div>
-                                    <div
-                                      class=""
-                                    >
-                                      <div
-                                        class="euiCollapsibleNavGroup__children"
-                                      >
-                                        <ul
-                                          aria-label="Recently viewed links"
-                                          class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                          style="max-width: none;"
-                                        >
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              aria-label="dashboard, type: kibana"
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink--recent"
-                                              href="http://localhost/"
-                                              rel="noreferrer"
-                                              title="dashboard, type: kibana"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="dashboard"
-                                              >
-                                                dashboard
-                                              </span>
-                                            </a>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <hr
-                                class="euiHorizontalRule euiHorizontalRule--full"
-                              />
-                              <div
-                                class="euiFlexItem eui-yScroll"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup"
-                                  data-test-subj="collapsibleNavGroup-noCategory"
-                                  id="mockId"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                      >
-                                        <button
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          type="button"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="kibana"
-                                          >
-                                            kibana
-                                          </span>
-                                        </button>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                  id="mockId"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                      >
-                                        <button
-                                          aria-label="Undock primary navigation"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsible-nav-lock"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiListGroupItem__icon"
-                                            data-euiicon-type="lock"
-                                          />
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Undock navigation"
-                                          >
-                                            Undock navigation
-                                          </span>
-                                        </button>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                                type="button"
-                              >
-                                <span
-                                  class="euiButtonEmpty__content"
-                                >
-                                  <div
-                                    aria-hidden="true"
-                                    class="euiButtonEmpty__icon"
-                                    data-euiicon-type="cross"
-                                  />
-                                  <span
-                                    class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                  >
-                                    close
-                                  </span>
-                                </span>
-                              </button>
-                            </nav>
-                          </div>
+                      <div
+                        data-focus-guard={true}
+                        key="guard-first"
+                        style={
+                          Object {
+                            "height": "0px",
+                            "left": "1px",
+                            "overflow": "hidden",
+                            "padding": 0,
+                            "position": "fixed",
+                            "top": "1px",
+                            "width": "1px",
+                          }
                         }
-                        onActivation={[Function]}
-                        onDeactivation={[Function]}
-                        persistentFocus={false}
+                        tabIndex={-1}
                       />
-                    </SideEffect(FocusWatcher)>
-                    <nav
-                      aria-label="Primary"
-                      className="euiCollapsibleNav euiCollapsibleNav--isDocked"
-                      data-test-subj="collapsibleNav"
-                      id="mockId"
-                    >
-                      <EuiFlexItem
-                        grow={false}
+                      <div
+                        data-focus-guard={true}
+                        key="guard-nearest"
                         style={
                           Object {
-                            "flexShrink": 0,
+                            "height": "0px",
+                            "left": "1px",
+                            "overflow": "hidden",
+                            "padding": 0,
+                            "position": "fixed",
+                            "top": "1px",
+                            "width": "1px",
                           }
                         }
+                        tabIndex={-1}
+                      />
+                      <ForwardRef
+                        data-focus-lock-disabled="disabled"
+                        enabled={false}
+                        inert={false}
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        removeScrollBar={true}
+                        sideCar={[Function]}
                       >
                         <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
-                          style={
-                            Object {
-                              "flexShrink": 0,
-                            }
-                          }
+                          data-focus-lock-disabled="disabled"
+                          onBlur={[Function]}
+                          onFocus={[Function]}
+                          onScrollCapture={[Function]}
+                          onTouchMoveCapture={[Function]}
+                          onWheelCapture={[Function]}
                         >
-                          <EuiCollapsibleNavGroup
-                            background="light"
-                            className="eui-yScroll"
-                            style={
-                              Object {
-                                "maxHeight": "40vh",
-                              }
-                            }
+                          <nav
+                            aria-label="Primary"
+                            className="euiCollapsibleNav euiCollapsibleNav--isDocked"
+                            data-test-subj="collapsibleNav"
+                            id="mockId"
                           >
-                            <div
-                              className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                              id="mockId"
+                            <EuiFlexItem
+                              grow={false}
                               style={
                                 Object {
-                                  "maxHeight": "40vh",
+                                  "flexShrink": 0,
                                 }
                               }
                             >
                               <div
-                                className="euiCollapsibleNavGroup__children"
+                                className="euiFlexItem euiFlexItem--flexGrowZero"
+                                style={
+                                  Object {
+                                    "flexShrink": 0,
+                                  }
+                                }
                               >
-                                <EuiListGroup
-                                  color="text"
-                                  gutterSize="none"
-                                  listItems={
-                                    Array [
-                                      Object {
-                                        "data-test-subj": "collapsibleNavCustomNavLink",
-                                        "href": undefined,
-                                        "icon": undefined,
-                                        "iconType": undefined,
-                                        "isActive": false,
-                                        "isDisabled": undefined,
-                                        "label": "Manage cloud deployment",
-                                        "onClick": [Function],
-                                      },
-                                    ]
+                                <EuiCollapsibleNavGroup
+                                  background="light"
+                                  className="eui-yScroll"
+                                  style={
+                                    Object {
+                                      "maxHeight": "40vh",
+                                    }
                                   }
-                                  maxWidth="none"
-                                  size="s"
                                 >
-                                  <ul
-                                    className="euiListGroup"
+                                  <div
+                                    className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                    id="mockId"
                                     style={
                                       Object {
-                                        "maxWidth": "none",
+                                        "maxHeight": "40vh",
                                       }
                                     }
                                   >
-                                    <EuiListGroupItem
-                                      color="text"
-                                      data-test-subj="collapsibleNavCustomNavLink"
-                                      isActive={false}
-                                      key="title-0"
-                                      label="Manage cloud deployment"
-                                      onClick={[Function]}
-                                      showToolTip={false}
-                                      size="s"
-                                      wrapText={false}
+                                    <div
+                                      className="euiCollapsibleNavGroup__children"
                                     >
-                                      <li
-                                        className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                      <EuiListGroup
+                                        color="text"
+                                        gutterSize="none"
+                                        listItems={
+                                          Array [
+                                            Object {
+                                              "data-test-subj": "collapsibleNavCustomNavLink",
+                                              "href": undefined,
+                                              "icon": undefined,
+                                              "iconType": undefined,
+                                              "isActive": false,
+                                              "isDisabled": undefined,
+                                              "label": "Manage cloud deployment",
+                                              "onClick": [Function],
+                                            },
+                                          ]
+                                        }
+                                        maxWidth="none"
+                                        size="s"
                                       >
-                                        <button
-                                          className="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavCustomNavLink"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
+                                        <ul
+                                          className="euiListGroup"
+                                          style={
+                                            Object {
+                                              "maxWidth": "none",
+                                            }
+                                          }
                                         >
-                                          <span
-                                            className="euiListGroupItem__label"
-                                            title="Manage cloud deployment"
+                                          <EuiListGroupItem
+                                            color="text"
+                                            data-test-subj="collapsibleNavCustomNavLink"
+                                            isActive={false}
+                                            key="title-0"
+                                            label="Manage cloud deployment"
+                                            onClick={[Function]}
+                                            showToolTip={false}
+                                            size="s"
+                                            wrapText={false}
                                           >
-                                            Manage cloud deployment
-                                          </span>
-                                        </button>
-                                      </li>
-                                    </EuiListGroupItem>
-                                  </ul>
-                                </EuiListGroup>
-                              </div>
-                            </div>
-                          </EuiCollapsibleNavGroup>
-                        </div>
-                      </EuiFlexItem>
-                      <EuiHorizontalRule
-                        margin="none"
-                      >
-                        <hr
-                          className="euiHorizontalRule euiHorizontalRule--full"
-                        />
-                      </EuiHorizontalRule>
-                      <EuiFlexItem
-                        grow={false}
-                        style={
-                          Object {
-                            "flexShrink": 0,
-                          }
-                        }
-                      >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
-                          style={
-                            Object {
-                              "flexShrink": 0,
-                            }
-                          }
-                        >
-                          <EuiCollapsibleNavGroup
-                            background="light"
-                            className="eui-yScroll"
-                            style={
-                              Object {
-                                "maxHeight": "40vh",
-                              }
-                            }
-                          >
-                            <div
-                              className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                              id="mockId"
+                                            <li
+                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                            >
+                                              <button
+                                                className="euiListGroupItem__button"
+                                                data-test-subj="collapsibleNavCustomNavLink"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                type="button"
+                                              >
+                                                <span
+                                                  className="euiListGroupItem__label"
+                                                  title="Manage cloud deployment"
+                                                >
+                                                  Manage cloud deployment
+                                                </span>
+                                              </button>
+                                            </li>
+                                          </EuiListGroupItem>
+                                        </ul>
+                                      </EuiListGroup>
+                                    </div>
+                                  </div>
+                                </EuiCollapsibleNavGroup>
+                              </div>
+                            </EuiFlexItem>
+                            <EuiHorizontalRule
+                              margin="none"
+                            >
+                              <hr
+                                className="euiHorizontalRule euiHorizontalRule--full"
+                              />
+                            </EuiHorizontalRule>
+                            <EuiFlexItem
+                              grow={false}
                               style={
                                 Object {
-                                  "maxHeight": "40vh",
+                                  "flexShrink": 0,
                                 }
                               }
                             >
                               <div
-                                className="euiCollapsibleNavGroup__children"
+                                className="euiFlexItem euiFlexItem--flexGrowZero"
+                                style={
+                                  Object {
+                                    "flexShrink": 0,
+                                  }
+                                }
                               >
-                                <EuiListGroup
-                                  aria-label="Pinned links"
-                                  color="text"
-                                  gutterSize="none"
-                                  listItems={
-                                    Array [
-                                      Object {
-                                        "href": "/",
-                                        "iconType": "home",
-                                        "label": "Home",
-                                        "onClick": [Function],
-                                      },
-                                    ]
+                                <EuiCollapsibleNavGroup
+                                  background="light"
+                                  className="eui-yScroll"
+                                  style={
+                                    Object {
+                                      "maxHeight": "40vh",
+                                    }
                                   }
-                                  maxWidth="none"
-                                  size="s"
                                 >
-                                  <ul
-                                    aria-label="Pinned links"
-                                    className="euiListGroup"
+                                  <div
+                                    className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                    id="mockId"
                                     style={
                                       Object {
-                                        "maxWidth": "none",
+                                        "maxHeight": "40vh",
                                       }
                                     }
-                                  >
-                                    <EuiListGroupItem
-                                      color="text"
-                                      href="/"
-                                      iconType="home"
-                                      key="title-0"
-                                      label="Home"
-                                      onClick={[Function]}
-                                      showToolTip={false}
-                                      size="s"
-                                      wrapText={false}
-                                    >
-                                      <li
-                                        className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          className="euiListGroupItem__button"
-                                          href="/"
-                                          onClick={[Function]}
-                                          rel="noreferrer"
-                                        >
-                                          <EuiIcon
-                                            className="euiListGroupItem__icon"
-                                            type="home"
-                                          >
-                                            <div
-                                              className="euiListGroupItem__icon"
-                                              data-euiicon-type="home"
-                                            />
-                                          </EuiIcon>
-                                          <span
-                                            className="euiListGroupItem__label"
-                                            title="Home"
-                                          >
-                                            Home
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </EuiListGroupItem>
-                                  </ul>
-                                </EuiListGroup>
-                              </div>
-                            </div>
-                          </EuiCollapsibleNavGroup>
-                        </div>
-                      </EuiFlexItem>
-                      <EuiCollapsibleNavGroup
-                        background="light"
-                        data-test-subj="collapsibleNavGroup-recentlyViewed"
-                        initialIsOpen={true}
-                        isCollapsible={true}
-                        key="recentlyViewed"
-                        onToggle={[Function]}
-                        title="Recently viewed"
-                      >
-                        <EuiAccordion
-                          arrowDisplay="right"
-                          buttonClassName="euiCollapsibleNavGroup__heading"
-                          buttonContent={
-                            <EuiFlexGroup
-                              alignItems="center"
-                              gutterSize="m"
-                              responsive={false}
-                            >
-                              <EuiFlexItem>
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Recently viewed
-                                  </h3>
-                                </EuiTitle>
-                              </EuiFlexItem>
-                            </EuiFlexGroup>
-                          }
-                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                          data-test-subj="collapsibleNavGroup-recentlyViewed"
-                          id="mockId"
-                          initialIsOpen={true}
-                          onToggle={[Function]}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-recentlyViewed"
-                            onToggle={[Function]}
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded={true}
-                                className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <div
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
-                                >
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
-                                  >
-                                    <div
-                                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <EuiFlexItem>
-                                        <div
-                                          className="euiFlexItem"
-                                        >
-                                          <EuiTitle
-                                            size="xxs"
-                                          >
-                                            <h3
-                                              className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                              id="mockId__title"
-                                            >
-                                              Recently viewed
-                                            </h3>
-                                          </EuiTitle>
-                                        </div>
-                                      </EuiFlexItem>
-                                    </div>
-                                  </EuiFlexGroup>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className=""
                                   >
                                     <div
                                       className="euiCollapsibleNavGroup__children"
                                     >
                                       <EuiListGroup
-                                        aria-label="Recently viewed links"
-                                        className="kbnCollapsibleNav__recentsListGroup"
-                                        color="subdued"
+                                        aria-label="Pinned links"
+                                        color="text"
                                         gutterSize="none"
                                         listItems={
                                           Array [
                                             Object {
-                                              "aria-label": "dashboard, type: kibana",
-                                              "data-test-subj": "collapsibleNavAppLink--recent",
-                                              "href": "http://localhost/",
-                                              "label": "dashboard",
+                                              "href": "/",
+                                              "iconType": "home",
+                                              "label": "Home",
                                               "onClick": [Function],
-                                              "title": "dashboard, type: kibana",
                                             },
                                           ]
                                         }
@@ -9970,8 +9281,8 @@ exports[`Header renders 3`] = `
                                         size="s"
                                       >
                                         <ul
-                                          aria-label="Recently viewed links"
-                                          className="euiListGroup kbnCollapsibleNav__recentsListGroup"
+                                          aria-label="Pinned links"
+                                          className="euiListGroup"
                                           style={
                                             Object {
                                               "maxWidth": "none",
@@ -9979,35 +9290,39 @@ exports[`Header renders 3`] = `
                                           }
                                         >
                                           <EuiListGroupItem
-                                            aria-label="dashboard, type: kibana"
-                                            color="subdued"
-                                            data-test-subj="collapsibleNavAppLink--recent"
-                                            href="http://localhost/"
+                                            color="text"
+                                            href="/"
+                                            iconType="home"
                                             key="title-0"
-                                            label="dashboard"
+                                            label="Home"
                                             onClick={[Function]}
                                             showToolTip={false}
                                             size="s"
-                                            title="dashboard, type: kibana"
                                             wrapText={false}
                                           >
                                             <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                             >
                                               <a
-                                                aria-label="dashboard, type: kibana"
                                                 className="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink--recent"
-                                                href="http://localhost/"
+                                                href="/"
                                                 onClick={[Function]}
                                                 rel="noreferrer"
-                                                title="dashboard, type: kibana"
                                               >
+                                                <EuiIcon
+                                                  className="euiListGroupItem__icon"
+                                                  type="home"
+                                                >
+                                                  <div
+                                                    className="euiListGroupItem__icon"
+                                                    data-euiicon-type="home"
+                                                  />
+                                                </EuiIcon>
                                                 <span
                                                   className="euiListGroupItem__label"
-                                                  title="dashboard"
+                                                  title="Home"
                                                 >
-                                                  dashboard
+                                                  Home
                                                 </span>
                                               </a>
                                             </li>
@@ -10016,234 +9331,431 @@ exports[`Header renders 3`] = `
                                       </EuiListGroup>
                                     </div>
                                   </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </EuiCollapsibleNavGroup>
-                      <EuiHorizontalRule
-                        margin="none"
-                      >
-                        <hr
-                          className="euiHorizontalRule euiHorizontalRule--full"
-                        />
-                      </EuiHorizontalRule>
-                      <EuiFlexItem
-                        className="eui-yScroll"
-                      >
-                        <div
-                          className="euiFlexItem eui-yScroll"
-                        >
-                          <EuiCollapsibleNavGroup
-                            data-test-subj="collapsibleNavGroup-noCategory"
-                            key="0"
-                          >
-                            <div
-                              className="euiCollapsibleNavGroup"
-                              data-test-subj="collapsibleNavGroup-noCategory"
-                              id="mockId"
+                                </EuiCollapsibleNavGroup>
+                              </div>
+                            </EuiFlexItem>
+                            <EuiCollapsibleNavGroup
+                              background="light"
+                              data-test-subj="collapsibleNavGroup-recentlyViewed"
+                              initialIsOpen={true}
+                              isCollapsible={true}
+                              key="recentlyViewed"
+                              onToggle={[Function]}
+                              title="Recently viewed"
                             >
-                              <div
-                                className="euiCollapsibleNavGroup__children"
+                              <EuiAccordion
+                                arrowDisplay="right"
+                                buttonClassName="euiCollapsibleNavGroup__heading"
+                                buttonContent={
+                                  <EuiFlexGroup
+                                    alignItems="center"
+                                    gutterSize="m"
+                                    responsive={false}
+                                  >
+                                    <EuiFlexItem>
+                                      <EuiTitle
+                                        size="xxs"
+                                      >
+                                        <h3
+                                          className="euiCollapsibleNavGroup__title"
+                                          id="mockId__title"
+                                        >
+                                          Recently viewed
+                                        </h3>
+                                      </EuiTitle>
+                                    </EuiFlexItem>
+                                  </EuiFlexGroup>
+                                }
+                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                                data-test-subj="collapsibleNavGroup-recentlyViewed"
+                                id="mockId"
+                                initialIsOpen={true}
+                                onToggle={[Function]}
+                                paddingSize="none"
                               >
-                                <EuiListGroup
-                                  flush={true}
+                                <div
+                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                                  data-test-subj="collapsibleNavGroup-recentlyViewed"
+                                  onToggle={[Function]}
                                 >
-                                  <ul
-                                    className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                  <div
+                                    className="euiAccordion__triggerWrapper"
                                   >
-                                    <EuiListGroupItem
-                                      color="text"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      isActive={false}
-                                      label="kibana"
+                                    <button
+                                      aria-controls="mockId"
+                                      aria-expanded={true}
+                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
                                       onClick={[Function]}
-                                      size="s"
+                                      type="button"
                                     >
-                                      <li
-                                        className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                      <span
+                                        className="euiAccordion__iconWrapper"
+                                      >
+                                        <EuiIcon
+                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                          size="m"
+                                          type="arrowRight"
+                                        >
+                                          <div
+                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                            data-euiicon-type="arrowRight"
+                                            size="m"
+                                          />
+                                        </EuiIcon>
+                                      </span>
+                                      <span
+                                        className="euiIEFlexWrapFix"
                                       >
-                                        <button
-                                          className="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
+                                        <EuiFlexGroup
+                                          alignItems="center"
+                                          gutterSize="m"
+                                          responsive={false}
                                         >
-                                          <span
-                                            className="euiListGroupItem__label"
-                                            title="kibana"
+                                          <div
+                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                                           >
-                                            kibana
-                                          </span>
-                                        </button>
-                                      </li>
-                                    </EuiListGroupItem>
-                                  </ul>
-                                </EuiListGroup>
-                              </div>
-                            </div>
-                          </EuiCollapsibleNavGroup>
-                          <EuiShowFor
-                            sizes={
-                              Array [
-                                "l",
-                                "xl",
-                              ]
-                            }
-                          >
-                            <EuiCollapsibleNavGroup
-                              className="eui-showFor--l eui-showFor--xl"
-                              key=".0"
+                                            <EuiFlexItem>
+                                              <div
+                                                className="euiFlexItem"
+                                              >
+                                                <EuiTitle
+                                                  size="xxs"
+                                                >
+                                                  <h3
+                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                                    id="mockId__title"
+                                                  >
+                                                    Recently viewed
+                                                  </h3>
+                                                </EuiTitle>
+                                              </div>
+                                            </EuiFlexItem>
+                                          </div>
+                                        </EuiFlexGroup>
+                                      </span>
+                                    </button>
+                                  </div>
+                                  <div
+                                    className="euiAccordion__childWrapper"
+                                    id="mockId"
+                                  >
+                                    <EuiResizeObserver
+                                      onResize={[Function]}
+                                    >
+                                      <div>
+                                        <div
+                                          className=""
+                                        >
+                                          <div
+                                            className="euiCollapsibleNavGroup__children"
+                                          >
+                                            <EuiListGroup
+                                              aria-label="Recently viewed links"
+                                              className="kbnCollapsibleNav__recentsListGroup"
+                                              color="subdued"
+                                              gutterSize="none"
+                                              listItems={
+                                                Array [
+                                                  Object {
+                                                    "aria-label": "dashboard, type: kibana",
+                                                    "data-test-subj": "collapsibleNavAppLink--recent",
+                                                    "href": "http://localhost/",
+                                                    "label": "dashboard",
+                                                    "onClick": [Function],
+                                                    "title": "dashboard, type: kibana",
+                                                  },
+                                                ]
+                                              }
+                                              maxWidth="none"
+                                              size="s"
+                                            >
+                                              <ul
+                                                aria-label="Recently viewed links"
+                                                className="euiListGroup kbnCollapsibleNav__recentsListGroup"
+                                                style={
+                                                  Object {
+                                                    "maxWidth": "none",
+                                                  }
+                                                }
+                                              >
+                                                <EuiListGroupItem
+                                                  aria-label="dashboard, type: kibana"
+                                                  color="subdued"
+                                                  data-test-subj="collapsibleNavAppLink--recent"
+                                                  href="http://localhost/"
+                                                  key="title-0"
+                                                  label="dashboard"
+                                                  onClick={[Function]}
+                                                  showToolTip={false}
+                                                  size="s"
+                                                  title="dashboard, type: kibana"
+                                                  wrapText={false}
+                                                >
+                                                  <li
+                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                                  >
+                                                    <a
+                                                      aria-label="dashboard, type: kibana"
+                                                      className="euiListGroupItem__button"
+                                                      data-test-subj="collapsibleNavAppLink--recent"
+                                                      href="http://localhost/"
+                                                      onClick={[Function]}
+                                                      rel="noreferrer"
+                                                      title="dashboard, type: kibana"
+                                                    >
+                                                      <span
+                                                        className="euiListGroupItem__label"
+                                                        title="dashboard"
+                                                      >
+                                                        dashboard
+                                                      </span>
+                                                    </a>
+                                                  </li>
+                                                </EuiListGroupItem>
+                                              </ul>
+                                            </EuiListGroup>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </EuiResizeObserver>
+                                  </div>
+                                </div>
+                              </EuiAccordion>
+                            </EuiCollapsibleNavGroup>
+                            <EuiHorizontalRule
+                              margin="none"
+                            >
+                              <hr
+                                className="euiHorizontalRule euiHorizontalRule--full"
+                              />
+                            </EuiHorizontalRule>
+                            <EuiFlexItem
+                              className="eui-yScroll"
                             >
                               <div
-                                className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                id="mockId"
+                                className="euiFlexItem eui-yScroll"
                               >
-                                <div
-                                  className="euiCollapsibleNavGroup__children"
+                                <EuiCollapsibleNavGroup
+                                  data-test-subj="collapsibleNavGroup-noCategory"
+                                  key="0"
                                 >
-                                  <EuiListGroup
-                                    flush={true}
+                                  <div
+                                    className="euiCollapsibleNavGroup"
+                                    data-test-subj="collapsibleNavGroup-noCategory"
+                                    id="mockId"
                                   >
-                                    <ul
-                                      className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                    <div
+                                      className="euiCollapsibleNavGroup__children"
                                     >
-                                      <EuiListGroupItem
-                                        aria-label="Undock primary navigation"
-                                        buttonRef={
-                                          Object {
-                                            "current": <button
-                                              aria-label="Undock primary navigation"
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsible-nav-lock"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiListGroupItem__icon"
-                                                data-euiicon-type="lock"
-                                              />
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="Undock navigation"
-                                              >
-                                                Undock navigation
-                                              </span>
-                                            </button>,
-                                          }
-                                        }
-                                        color="subdued"
-                                        data-test-subj="collapsible-nav-lock"
-                                        iconType="lock"
-                                        label="Undock navigation"
-                                        onClick={[Function]}
-                                        size="xs"
+                                      <EuiListGroup
+                                        flush={true}
                                       >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                        <ul
+                                          className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                                         >
-                                          <button
-                                            aria-label="Undock primary navigation"
-                                            className="euiListGroupItem__button"
-                                            data-test-subj="collapsible-nav-lock"
-                                            disabled={false}
+                                          <EuiListGroupItem
+                                            color="text"
+                                            data-test-subj="collapsibleNavAppLink"
+                                            isActive={false}
+                                            label="kibana"
                                             onClick={[Function]}
-                                            type="button"
+                                            size="s"
                                           >
-                                            <EuiIcon
-                                              className="euiListGroupItem__icon"
-                                              type="lock"
+                                            <li
+                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                                             >
-                                              <div
-                                                className="euiListGroupItem__icon"
-                                                data-euiicon-type="lock"
-                                              />
-                                            </EuiIcon>
-                                            <span
-                                              className="euiListGroupItem__label"
-                                              title="Undock navigation"
+                                              <button
+                                                className="euiListGroupItem__button"
+                                                data-test-subj="collapsibleNavAppLink"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                type="button"
+                                              >
+                                                <span
+                                                  className="euiListGroupItem__label"
+                                                  title="kibana"
+                                                >
+                                                  kibana
+                                                </span>
+                                              </button>
+                                            </li>
+                                          </EuiListGroupItem>
+                                        </ul>
+                                      </EuiListGroup>
+                                    </div>
+                                  </div>
+                                </EuiCollapsibleNavGroup>
+                                <EuiShowFor
+                                  sizes={
+                                    Array [
+                                      "l",
+                                      "xl",
+                                    ]
+                                  }
+                                >
+                                  <EuiCollapsibleNavGroup
+                                    className="eui-showFor--l eui-showFor--xl"
+                                    key=".0"
+                                  >
+                                    <div
+                                      className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                                      id="mockId"
+                                    >
+                                      <div
+                                        className="euiCollapsibleNavGroup__children"
+                                      >
+                                        <EuiListGroup
+                                          flush={true}
+                                        >
+                                          <ul
+                                            className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                          >
+                                            <EuiListGroupItem
+                                              aria-label="Undock primary navigation"
+                                              buttonRef={
+                                                Object {
+                                                  "current": <button
+                                                    aria-label="Undock primary navigation"
+                                                    class="euiListGroupItem__button"
+                                                    data-test-subj="collapsible-nav-lock"
+                                                    type="button"
+                                                  >
+                                                    <div
+                                                      class="euiListGroupItem__icon"
+                                                      data-euiicon-type="lock"
+                                                    />
+                                                    <span
+                                                      class="euiListGroupItem__label"
+                                                      title="Undock navigation"
+                                                    >
+                                                      Undock navigation
+                                                    </span>
+                                                  </button>,
+                                                }
+                                              }
+                                              color="subdued"
+                                              data-test-subj="collapsible-nav-lock"
+                                              iconType="lock"
+                                              label="Undock navigation"
+                                              onClick={[Function]}
+                                              size="xs"
                                             >
-                                              Undock navigation
-                                            </span>
-                                          </button>
-                                        </li>
-                                      </EuiListGroupItem>
-                                    </ul>
-                                  </EuiListGroup>
-                                </div>
+                                              <li
+                                                className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                              >
+                                                <button
+                                                  aria-label="Undock primary navigation"
+                                                  className="euiListGroupItem__button"
+                                                  data-test-subj="collapsible-nav-lock"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiListGroupItem__icon"
+                                                    type="lock"
+                                                  >
+                                                    <div
+                                                      className="euiListGroupItem__icon"
+                                                      data-euiicon-type="lock"
+                                                    />
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiListGroupItem__label"
+                                                    title="Undock navigation"
+                                                  >
+                                                    Undock navigation
+                                                  </span>
+                                                </button>
+                                              </li>
+                                            </EuiListGroupItem>
+                                          </ul>
+                                        </EuiListGroup>
+                                      </div>
+                                    </div>
+                                  </EuiCollapsibleNavGroup>
+                                </EuiShowFor>
                               </div>
-                            </EuiCollapsibleNavGroup>
-                          </EuiShowFor>
-                        </div>
-                      </EuiFlexItem>
-                      <EuiScreenReaderOnly
-                        showOnFocus={true}
-                      >
-                        <EuiButtonEmpty
-                          className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                          iconType="cross"
-                          onClick={[Function]}
-                          size="xs"
-                          textProps={
-                            Object {
-                              "className": "euiCollapsibleNav__closeButtonText",
-                            }
-                          }
-                        >
-                          <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <span
-                              className="euiButtonEmpty__content"
+                            </EuiFlexItem>
+                            <EuiScreenReaderOnly
+                              showOnFocus={true}
                             >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiButtonEmpty__icon"
-                                size="m"
-                                type="cross"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  className="euiButtonEmpty__icon"
-                                  data-euiicon-type="cross"
-                                  size="m"
-                                />
-                              </EuiIcon>
-                              <span
-                                className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                              <EuiButtonEmpty
+                                className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                                iconType="cross"
+                                onClick={[Function]}
+                                size="xs"
+                                textProps={
+                                  Object {
+                                    "className": "euiCollapsibleNav__closeButtonText",
+                                  }
+                                }
                               >
-                                <EuiI18n
-                                  default="close"
-                                  token="euiCollapsibleNav.closeButtonLabel"
+                                <button
+                                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  close
-                                </EuiI18n>
-                              </span>
-                            </span>
-                          </button>
-                        </EuiButtonEmpty>
-                      </EuiScreenReaderOnly>
-                    </nav>
-                  </div>
-                  <div
-                    data-focus-guard={true}
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </FocusLock>
+                                  <EuiButtonContent
+                                    className="euiButtonEmpty__content"
+                                    iconSide="left"
+                                    iconType="cross"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButtonEmpty__content"
+                                    >
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        size="m"
+                                        type="cross"
+                                      >
+                                        <div
+                                          className="euiButtonContent__icon"
+                                          data-euiicon-type="cross"
+                                          size="m"
+                                        />
+                                      </EuiIcon>
+                                      <span
+                                        className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                                      >
+                                        <EuiI18n
+                                          default="close"
+                                          token="euiCollapsibleNav.closeButtonLabel"
+                                        >
+                                          close
+                                        </EuiI18n>
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonEmpty>
+                            </EuiScreenReaderOnly>
+                          </nav>
+                        </div>
+                      </ForwardRef>
+                      <div
+                        data-focus-guard={true}
+                        style={
+                          Object {
+                            "height": "0px",
+                            "left": "1px",
+                            "overflow": "hidden",
+                            "padding": 0,
+                            "position": "fixed",
+                            "top": "1px",
+                            "width": "1px",
+                          }
+                        }
+                        tabIndex={-1}
+                      />
+                    </ForwardRef>
+                  </ForwardRef>
+                </ForwardRef>
               </div>
             </OutsideEventDetector>
           </EuiOutsideClickDetector>
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 b17e7d0fec773..fb00ddc38c6dc 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
@@ -31,7 +31,7 @@ Array [
 ]
 `;
 
-exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" 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=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
+exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" 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=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
 
 exports[`ModalService openConfirm() renders a string confirm message 1`] = `
 Array [
@@ -53,7 +53,7 @@ Array [
 ]
 `;
 
-exports[`ModalService openConfirm() renders a string confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" 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=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><p>Some message</p></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
+exports[`ModalService openConfirm() renders a string confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" 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=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><p>Some message</p></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
 
 exports[`ModalService openConfirm() with a currently active confirm replaces the current confirm with the new one 1`] = `
 Array [
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
index 72992c190e8ae..5b33b0e0ea120 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
@@ -25,7 +25,6 @@ import { FieldSetting } from '../../types';
 import { UiSettingsType, StringValidation } from '../../../../../../core/public';
 import { notificationServiceMock, docLinksServiceMock } from '../../../../../../core/public/mocks';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Field, getEditableValue } from './field';
 
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx
index 0e942665b23a9..e42432d0bc319 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx
@@ -21,7 +21,6 @@ import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
 import { UiSettingsType } from '../../../../../../core/public';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { notificationServiceMock } from '../../../../../../core/public/mocks';
diff --git a/src/plugins/advanced_settings/public/management_app/components/search/search.test.tsx b/src/plugins/advanced_settings/public/management_app/components/search/search.test.tsx
index 0e3fbb3cf97fa..01f54cce60319 100644
--- a/src/plugins/advanced_settings/public/management_app/components/search/search.test.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/search/search.test.tsx
@@ -20,7 +20,6 @@
 import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { Query } from '@elastic/eui';
diff --git a/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
index 698c124d2d805..201c6e83a4a44 100644
--- a/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
@@ -671,35 +671,54 @@ exports[`DashboardEmptyScreen renders correctly with visualize paragraph 1`] = `
               iconType="plusInCircle"
               size="s"
             >
-              <button
+              <EuiButtonDisplay
                 aria-label="Create new visualization button"
-                className="euiButton euiButton--primary euiButton--small"
                 data-test-subj="addVisualizationButton"
+                element="button"
+                iconSide="left"
+                iconType="plusInCircle"
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  aria-label="Create new visualization button"
+                  className="euiButton euiButton--primary euiButton--small"
+                  data-test-subj="addVisualizationButton"
+                  type="button"
                 >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButton__icon"
-                    size="m"
-                    type="plusInCircle"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    iconType="plusInCircle"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    <div
-                      aria-hidden="true"
-                      className="euiButton__icon"
-                      data-euiicon-type="plusInCircle"
-                      size="m"
-                    />
-                  </EuiIcon>
-                  <span
-                    className="euiButton__text"
-                  >
-                    Create new
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        size="m"
+                        type="plusInCircle"
+                      >
+                        <div
+                          className="euiButtonContent__icon"
+                          data-euiicon-type="plusInCircle"
+                          size="m"
+                        />
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Create new
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
           </p>
         </div>
diff --git a/src/plugins/dashboard/public/application/dashboard_empty_screen.test.tsx b/src/plugins/dashboard/public/application/dashboard_empty_screen.test.tsx
index 933475d354cfa..0a49e524d3350 100644
--- a/src/plugins/dashboard/public/application/dashboard_empty_screen.test.tsx
+++ b/src/plugins/dashboard/public/application/dashboard_empty_screen.test.tsx
@@ -19,7 +19,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { coreMock } from '../../../../core/public/mocks';
 
diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
index 1e07c610b0ef2..60395bce678c2 100644
--- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import React from 'react';
 import { skip } from 'rxjs/operators';
diff --git a/src/plugins/dashboard/public/application/tests/dashboard_container.test.tsx b/src/plugins/dashboard/public/application/tests/dashboard_container.test.tsx
index 6eb85faeea014..24075e0a634ba 100644
--- a/src/plugins/dashboard/public/application/tests/dashboard_container.test.tsx
+++ b/src/plugins/dashboard/public/application/tests/dashboard_container.test.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import React from 'react';
 import { mount } from 'enzyme';
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.test.tsx b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.test.tsx
index 18b1237895f79..aee8d1f4eac4d 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.test.tsx
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.test.tsx
@@ -22,7 +22,6 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ShardFailureOpenModalButton } from './shard_failure_open_modal_button';
 import { shardFailureRequest } from './__mocks__/shard_failure_request';
 import { shardFailureResponse } from './__mocks__/shard_failure_response';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('ShardFailureOpenModalButton', () => {
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx b/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx
index 8976f8ea3c107..ab7adba193d87 100644
--- a/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx
+++ b/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx
@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ActionBar, ActionBarProps } from './action_bar';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';
 
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx b/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
index 524161c77cbf8..2cd829d89f78e 100644
--- a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
+++ b/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 test('it renders ToolBarPagerButtons', () => {
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx b/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx
index b201bea26503e..224e249a274cd 100644
--- a/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx
+++ b/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx
@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { TableHeader } from './table_header';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { SortOrder } from './helpers';
 import { IndexPattern, IFieldType } from '../../../../../kibana_services';
diff --git a/src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx b/src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx
index 1c9439bc34e58..1cc8247957512 100644
--- a/src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx
+++ b/src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx
@@ -22,7 +22,6 @@ import { ReactWrapper } from 'enzyme';
 import { ContextErrorMessage } from './context_error_message';
 // @ts-ignore
 import { FAILURE_REASONS, LOADING_STATUS } from '../../angular/context/query';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('loading spinner', function () {
diff --git a/src/plugins/discover/public/application/components/doc/doc.test.tsx b/src/plugins/discover/public/application/components/doc/doc.test.tsx
index 0bc621714c70f..c9fa551f61aca 100644
--- a/src/plugins/discover/public/application/components/doc/doc.test.tsx
+++ b/src/plugins/discover/public/application/components/doc/doc.test.tsx
@@ -20,7 +20,6 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Doc, DocProps } from './doc';
 
diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx
index 3710ce72533db..9115915690324 100644
--- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx
+++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx
@@ -19,7 +19,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { DocViewer } from './doc_viewer';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { getDocViewsRegistry } from '../../../kibana_services';
 import { DocViewRenderProps } from '../../doc_views/doc_views_types';
diff --git a/src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx b/src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx
index 84ad19dbddcbf..c2eb4f08cf549 100644
--- a/src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx
+++ b/src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx
@@ -20,7 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { HitsCounter, HitsCounterProps } from './hits_counter';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('hits counter', function () {
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx
index 3321ac764a05b..e996da5fe0e3c 100644
--- a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx
@@ -20,7 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { LoadingSpinner } from './loading_spinner';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('loading spinner', function () {
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx
index 3f12a8c0fa769..e1abbfd7657d0 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx
@@ -18,7 +18,6 @@
  */
 
 import React from 'react';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 // @ts-ignore
 import StubIndexPattern from 'test_utils/stub_index_pattern';
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
index 654df5bfa9ee9..625d6833406eb 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
@@ -19,7 +19,6 @@
 import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { DiscoverFieldSearch, Props } from './discover_field_search';
 import { EuiButtonGroupProps, EuiPopover } from '@elastic/eui';
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx
index 24e6f5993a0a5..a1b231c2d4479 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx
@@ -24,7 +24,7 @@ import { ShallowWrapper } from 'enzyme';
 import { ChangeIndexPattern } from './change_indexpattern';
 import { SavedObject } from 'kibana/server';
 import { DiscoverIndexPattern } from './discover_index_pattern';
-import { EuiSelectable, EuiSelectableList } from '@elastic/eui';
+import { EuiSelectable } from '@elastic/eui';
 import { IIndexPattern } from 'src/plugins/data/public';
 
 const indexPattern = {
@@ -57,7 +57,7 @@ function getIndexPatternPickerList(instance: ShallowWrapper) {
 }
 
 function getIndexPatternPickerOptions(instance: ShallowWrapper) {
-  return getIndexPatternPickerList(instance).dive().find(EuiSelectableList).prop('options');
+  return getIndexPatternPickerList(instance).prop('options');
 }
 
 function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) {
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx
index 90ade60d2073d..9572f35641d69 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx
@@ -19,7 +19,6 @@
 
 import _ from 'lodash';
 import { ReactWrapper } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 // @ts-ignore
 import StubIndexPattern from 'test_utils/stub_index_pattern';
diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx
index bf417f9f1890b..fdb0ff973dcf0 100644
--- a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx
+++ b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx
@@ -20,8 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { SkipBottomButton, SkipBottomButtonProps } from './skip_bottom_button';
-// @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('Skip to Bottom Button', function () {
   let props: SkipBottomButtonProps;
diff --git a/src/plugins/discover/public/application/components/table/table.test.tsx b/src/plugins/discover/public/application/components/table/table.test.tsx
index 29659b3969365..5b840a25d8beb 100644
--- a/src/plugins/discover/public/application/components/table/table.test.tsx
+++ b/src/plugins/discover/public/application/components/table/table.test.tsx
@@ -18,7 +18,6 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { DocViewTable } from './table';
 import { indexPatterns, IndexPattern } from '../../../../../data/public';
diff --git a/src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx b/src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx
index 964f94ca9d9b2..a4c10e749d868 100644
--- a/src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx
+++ b/src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx
@@ -21,7 +21,6 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { TimechartHeader, TimechartHeaderProps } from './timechart_header';
 import { EuiIconTip } from '@elastic/eui';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('timechart header', function () {
diff --git a/src/plugins/embeddable/public/lib/embeddables/embeddable_root.test.tsx b/src/plugins/embeddable/public/lib/embeddables/embeddable_root.test.tsx
index 131069909dd2a..cb900884fde97 100644
--- a/src/plugins/embeddable/public/lib/embeddables/embeddable_root.test.tsx
+++ b/src/plugins/embeddable/public/lib/embeddables/embeddable_root.test.tsx
@@ -20,7 +20,6 @@ import React from 'react';
 import { HelloWorldEmbeddable } from '../../../../../../examples/embeddable_examples/public';
 import { EmbeddableRoot } from './embeddable_root';
 import { mount } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 test('EmbeddableRoot renders an embeddable', async () => {
diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx
index 341a51d7348b2..fcf79c1d6b211 100644
--- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx
+++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx
@@ -21,7 +21,6 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { nextTick } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { I18nProvider } from '@kbn/i18n/react';
 import { CONTEXT_MENU_TRIGGER } from '../triggers';
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx
index 34a176400dbb9..95aee3d9cb335 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx
@@ -30,7 +30,6 @@ import { ContainerInput } from '../../../../containers';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { coreMock } from '../../../../../../../../core/public/mocks';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { embeddablePluginMock } from '../../../../../mocks';
 
@@ -125,7 +124,7 @@ test('selecting embeddable in "Create new ..." list calls createNewEmbeddable()'
       notifications={core.notifications}
       SavedObjectFinder={(props) => <DummySavedObjectFinder {...props} />}
     />
-  ) as ReactWrapper<unknown, unknown, AddPanelFlyout>;
+  ) as ReactWrapper<any, {}, AddPanelFlyout>;
 
   const spy = jest.fn();
   component.instance().createNewEmbeddable = spy;
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.test.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.test.ts
index 6fddcbc84faf7..dbfa55a4e0f13 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.test.ts
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.test.ts
@@ -18,8 +18,6 @@
  */
 
 import { Container, isErrorEmbeddable } from '../../../..';
-// @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
 import { nextTick } from 'test_utils/enzyme_helpers';
 import { CustomizePanelTitleAction } from './customize_panel_action';
 import {
diff --git a/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx b/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx
index e094afe528498..d12a55dd827e6 100644
--- a/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx
+++ b/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import * as React from 'react';
 import { Container, isErrorEmbeddable } from '../lib';
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
index 1e7b3d5c6284c..9a9e055d54d2f 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
@@ -245,22 +245,41 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
                       isLoading={false}
                       onClick={[Function]}
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
                         data-test-subj="loadSavedObjects"
+                        element="button"
+                        isLoading={false}
                         onClick={[Function]}
                         type="button"
                       >
-                        <span
-                          className="euiButton__content"
+                        <button
+                          className="euiButton euiButton--primary"
+                          data-test-subj="loadSavedObjects"
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <span
-                            className="euiButton__text"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            isLoading={false}
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
-                            Load Kibana objects
-                          </span>
-                        </span>
-                      </button>
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text"
+                              >
+                                Load Kibana objects
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
                     </EuiButton>
                   </div>
                 </EuiFlexItem>
@@ -565,22 +584,41 @@ exports[`bulkCreate should display success message when bulkCreate is successful
                       isLoading={false}
                       onClick={[Function]}
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
                         data-test-subj="loadSavedObjects"
+                        element="button"
+                        isLoading={false}
                         onClick={[Function]}
                         type="button"
                       >
-                        <span
-                          className="euiButton__content"
+                        <button
+                          className="euiButton euiButton--primary"
+                          data-test-subj="loadSavedObjects"
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <span
-                            className="euiButton__text"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            isLoading={false}
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
-                            Load Kibana objects
-                          </span>
-                        </span>
-                      </button>
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text"
+                              >
+                                Load Kibana objects
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
                     </EuiButton>
                   </div>
                 </EuiFlexItem>
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap
index 6261ea2c90793..5218ebd1b4ad4 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`Header should render normally 1`] = `
       type="button"
     >
       <span
-        class="euiButton__content"
+        class="euiButtonContent euiButton__content"
       >
         <span
           class="euiButton__text"
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.test.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.test.tsx
index 7b2cc0f4c3c60..9a4a04af0354e 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.test.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.test.tsx
@@ -21,7 +21,6 @@ import React from 'react';
 import { EmptyState } from '../empty_state';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
-// @ts-expect-error
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { docLinksServiceMock } from '../../../../../../core/public/mocks';
diff --git a/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx b/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
index c66dbf968cac1..0a7f6fc244a91 100644
--- a/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
+++ b/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
@@ -19,7 +19,6 @@
 
 import React from 'react';
 import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { getDepsMock, getIndexPatternMock } from '../../test_utils';
 import { ControlsTab, ControlsTabUiProps } from './controls_tab';
diff --git a/src/plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx b/src/plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx
index 942517e24514e..0c0d94f0cf631 100644
--- a/src/plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx
+++ b/src/plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx
@@ -21,7 +21,6 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
diff --git a/src/plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx b/src/plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx
index a17796961c006..1ff03d555739e 100644
--- a/src/plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx
+++ b/src/plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx
@@ -22,7 +22,6 @@ import { shallow } from 'enzyme';
 import { SinonSpy, spy, assert } from 'sinon';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { RangeControlEditor } from './range_control_editor';
diff --git a/src/plugins/input_control_vis/public/components/vis/input_control_vis.test.tsx b/src/plugins/input_control_vis/public/components/vis/input_control_vis.test.tsx
index e0938f700428e..0b5f36acd2fc3 100644
--- a/src/plugins/input_control_vis/public/components/vis/input_control_vis.test.tsx
+++ b/src/plugins/input_control_vis/public/components/vis/input_control_vis.test.tsx
@@ -21,7 +21,6 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { InputControlVis } from './input_control_vis';
diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
index 9ed4e60cac519..eaf0e5538f362 100644
--- a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
+++ b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
@@ -256,43 +256,52 @@ exports[`InspectorPanel should render as expected 1`] = `
                           size="s"
                         >
                           <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--iconRight"
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
                             data-test-subj="inspectorViewChooser"
                             onClick={[Function]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiButtonEmpty__icon"
-                                size="m"
-                                type="arrowDown"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  className="euiButtonEmpty__icon"
-                                  data-euiicon-type="arrowDown"
-                                  size="m"
-                                />
-                              </EuiIcon>
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="View: {viewName}"
-                                  id="inspector.view"
-                                  values={
-                                    Object {
-                                      "viewName": "View 1",
-                                    }
-                                  }
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  size="m"
+                                  type="arrowDown"
+                                >
+                                  <div
+                                    className="euiButtonContent__icon"
+                                    data-euiicon-type="arrowDown"
+                                    size="m"
+                                  />
+                                </EuiIcon>
+                                <span
+                                  className="euiButtonEmpty__text"
                                 >
-                                  View: View 1
-                                </FormattedMessage>
+                                  <FormattedMessage
+                                    defaultMessage="View: {viewName}"
+                                    id="inspector.view"
+                                    values={
+                                      Object {
+                                        "viewName": "View 1",
+                                      }
+                                    }
+                                  >
+                                    View: View 1
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
index a1653c5289255..992a2fcf0c89d 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ButtonIconSide } from '@elastic/eui';
+import { EuiButtonProps } from '@elastic/eui';
 
 export type TopNavMenuAction = (anchorElement: HTMLElement) => void;
 
@@ -32,7 +32,7 @@ export interface TopNavMenuData {
   tooltip?: string | (() => string | undefined);
   emphasize?: boolean;
   iconType?: string;
-  iconSide?: ButtonIconSide;
+  iconSide?: EuiButtonProps['iconSide'];
 }
 
 export interface RegisteredTopNavMenuData extends TopNavMenuData {
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
index d56776c2be9d7..f5c2d3efd56f7 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
@@ -58,45 +58,63 @@ exports[`Intro component renders correctly 1`] = `
                     iconType="eye"
                     size="s"
                   >
-                    <a
-                      className="euiButton euiButton--primary euiButton--small"
+                    <EuiButtonDisplay
                       data-test-subj="savedObjectEditViewInApp"
+                      element="a"
                       href="/some-url"
+                      iconType="eye"
                       rel="noreferrer"
+                      size="s"
                     >
-                      <span
-                        className="euiButton__content"
+                      <a
+                        className="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="savedObjectEditViewInApp"
+                        href="/some-url"
+                        rel="noreferrer"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButton__icon"
-                          size="m"
-                          type="eye"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButton__icon"
-                            data-euiicon-type="eye"
-                            size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          <FormattedMessage
-                            defaultMessage="View {title}"
-                            id="savedObjectsManagement.view.viewItemButtonLabel"
-                            values={
-                              Object {
-                                "title": "search",
-                              }
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          iconType="eye"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
                             }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButton__content"
                           >
-                            View search
-                          </FormattedMessage>
-                        </span>
-                      </span>
-                    </a>
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              size="m"
+                              type="eye"
+                            >
+                              <div
+                                className="euiButtonContent__icon"
+                                data-euiicon-type="eye"
+                                size="m"
+                              />
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              <FormattedMessage
+                                defaultMessage="View {title}"
+                                id="savedObjectsManagement.view.viewItemButtonLabel"
+                                values={
+                                  Object {
+                                    "title": "search",
+                                  }
+                                }
+                              >
+                                View search
+                              </FormattedMessage>
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </a>
+                    </EuiButtonDisplay>
                   </EuiButton>
                 </div>
               </EuiFlexItem>
@@ -113,45 +131,64 @@ exports[`Intro component renders correctly 1`] = `
                     onClick={[Function]}
                     size="s"
                   >
-                    <button
-                      className="euiButton euiButton--danger euiButton--small"
+                    <EuiButtonDisplay
+                      color="danger"
                       data-test-subj="savedObjectEditDelete"
+                      element="button"
+                      iconType="trash"
                       onClick={[Function]}
+                      size="s"
                       type="button"
                     >
-                      <span
-                        className="euiButton__content"
+                      <button
+                        className="euiButton euiButton--danger euiButton--small"
+                        data-test-subj="savedObjectEditDelete"
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButton__icon"
-                          size="m"
-                          type="trash"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButton__icon"
-                            data-euiicon-type="trash"
-                            size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          <FormattedMessage
-                            defaultMessage="Delete {title}"
-                            id="savedObjectsManagement.view.deleteItemButtonLabel"
-                            values={
-                              Object {
-                                "title": "search",
-                              }
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          iconType="trash"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
                             }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButton__content"
                           >
-                            Delete search
-                          </FormattedMessage>
-                        </span>
-                      </span>
-                    </button>
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              size="m"
+                              type="trash"
+                            >
+                              <div
+                                className="euiButtonContent__icon"
+                                data-euiicon-type="trash"
+                                size="m"
+                              />
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              <FormattedMessage
+                                defaultMessage="Delete {title}"
+                                id="savedObjectsManagement.view.deleteItemButtonLabel"
+                                values={
+                                  Object {
+                                    "title": "search",
+                                  }
+                                }
+                              >
+                                Delete search
+                              </FormattedMessage>
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
                   </EuiButton>
                 </div>
               </EuiFlexItem>
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx
index 6256e5fcd49c5..0c7bf64ca011d 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx
@@ -19,7 +19,6 @@
 
 import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
-// @ts-expect-error
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { keys } from '@elastic/eui';
 import { httpServiceMock } from '../../../../../../core/public/mocks';
diff --git a/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx b/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
index 7c930fa2e2960..ee13408511ab5 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
@@ -22,7 +22,6 @@ import { ColorPicker, ColorPickerProps } from './color_picker';
 import { mount } from 'enzyme';
 import { ReactWrapper } from 'enzyme';
 import { EuiColorPicker, EuiIconTip } from '@elastic/eui';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('ColorPicker', () => {
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
index 8a90ff8982732..6e8d018bd8f0e 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap
@@ -2,4 +2,4 @@
 
 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\\"><div data-euiicon-type=\\"list\\" color=\\"text\\"></div></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\\"><div data-euiicon-type=\\"list\\" color=\\"text\\"></div></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\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><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\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><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\\"><div data-euiicon-type=\\"list\\" color=\\"text\\"></div></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=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><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=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></div></li></ul></div>"`;
diff --git a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index 5458c88974572..a27dfa13e743e 100644
--- a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -142,11 +142,15 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
           class="euiOverlayMask euiOverlayMask--aboveHeader"
         >
           <div
+            aria-hidden="true"
+            data-aria-hidden="true"
             data-focus-guard="true"
             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
             tabindex="0"
           />
           <div
+            aria-hidden="true"
+            data-aria-hidden="true"
             data-focus-guard="true"
             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
             tabindex="1"
@@ -399,6 +403,8 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
             </div>
           </div>
           <div
+            aria-hidden="true"
+            data-aria-hidden="true"
             data-focus-guard="true"
             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
             tabindex="0"
@@ -413,315 +419,93 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
         role="menu"
       >
         <EuiFocusTrap>
-          <FocusLock
-            as="div"
-            autoFocus={true}
-            disabled={false}
-            lockProps={
-              Object {
-                "style": undefined,
-              }
-            }
-            noFocusGuards={false}
-            persistentFocus={false}
+          <ForwardRef
+            enabled={true}
+            noIsolation={true}
             returnFocus={true}
+            scrollLock={false}
           >
-            <div
-              data-focus-guard={true}
-              key="guard-first"
-              style={
-                Object {
-                  "height": "0px",
-                  "left": "1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "fixed",
-                  "top": "1px",
-                  "width": "1px",
-                }
-              }
-              tabIndex={0}
-            />
-            <div
-              data-focus-guard={true}
-              key="guard-nearest"
-              style={
-                Object {
-                  "height": "0px",
-                  "left": "1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "fixed",
-                  "top": "1px",
-                  "width": "1px",
-                }
-              }
-              tabIndex={1}
-            />
-            <div
-              data-focus-lock-disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
+            <ForwardRef
+              enabled={true}
+              noIsolation={true}
+              returnFocus={true}
+              scrollLock={false}
+              sideCar={[Function]}
             >
-              <SideEffect(FocusWatcher)
+              <ForwardRef
+                as={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "classNames": Object {
+                      "fullWidth": "width-before-scroll-bar",
+                      "zeroRight": "right-scroll-bar-position",
+                    },
+                    "defaultProps": Object {
+                      "enabled": true,
+                      "inert": false,
+                      "removeScrollBar": true,
+                    },
+                    "render": [Function],
+                  }
+                }
                 autoFocus={true}
+                crossFrame={true}
                 disabled={false}
-                observed={
-                  <div
-                    data-focus-lock-disabled="false"
-                  >
-                    <div
-                      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."
-                      class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                      role="menu"
-                      tabindex="0"
-                    >
-                      <button
-                        aria-label="Closes this modal window"
-                        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          class="euiButtonIcon__icon"
-                          data-euiicon-type="cross"
-                        />
-                      </button>
-                      <div
-                        class="euiModal__flex"
-                      >
-                        <div
-                          class="euiModalHeader"
-                        >
-                          <div
-                            class="euiModalHeader__title"
-                          >
-                            New Visualization
-                          </div>
-                        </div>
-                        <div
-                          class="visNewVisDialog__body"
-                        >
-                          <div
-                            class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                          >
-                            <div
-                              class="euiFlexItem"
-                            >
-                              <div
-                                class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                              >
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                >
-                                  <div
-                                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                  >
-                                    <div
-                                      class="euiFormControlLayout__childrenWrapper"
-                                    >
-                                      <input
-                                        aria-label="Filter for a visualization type"
-                                        class="euiFieldSearch euiFieldSearch--fullWidth"
-                                        data-test-subj="filterVisType"
-                                        placeholder="Filter"
-                                        type="search"
-                                        value="with"
-                                      />
-                                      <div
-                                        class="euiFormControlLayoutIcons"
-                                      >
-                                        <span
-                                          class="euiFormControlLayoutCustomIcon"
-                                        >
-                                          <div
-                                            aria-hidden="true"
-                                            class="euiFormControlLayoutCustomIcon__icon"
-                                            data-euiicon-type="search"
-                                          />
-                                        </span>
-                                      </div>
-                                      <div
-                                        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <button
-                                          aria-label="Clear input"
-                                          class="euiFormControlLayoutClearButton"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiFormControlLayoutClearButton__icon"
-                                            data-euiicon-type="cross"
-                                          />
-                                        </button>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                >
-                                  <span
-                                    aria-live="polite"
-                                    class="euiScreenReaderOnly"
-                                  >
-                                    2 types found
-                                  </span>
-                                  <ul
-                                    class="euiKeyPadMenu visNewVisDialog__types"
-                                    data-test-subj="visNewDialogTypes"
-                                  >
-                                    <li>
-                                      <button
-                                        aria-describedby="visTypeDescription-visWithAliasUrl"
-                                        class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                        data-test-subj="visType-visWithAliasUrl"
-                                        data-vis-stage="alias"
-                                        role="menuitem"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiKeyPadMenuItem__inner"
-                                        >
-                                          <span
-                                            class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                          >
-                                            <span
-                                              class="euiToolTipAnchor"
-                                            >
-                                              <span
-                                                class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                tabindex="0"
-                                              >
-                                                <div
-                                                  aria-hidden="true"
-                                                  class="euiBetaBadge__icon"
-                                                  data-euiicon-type="popout"
-                                                />
-                                              </span>
-                                            </span>
-                                          </span>
-                                          <div
-                                            class="euiKeyPadMenuItem__icon"
-                                          >
-                                            <div
-                                              color="secondary"
-                                              data-euiicon-type="empty"
-                                            />
-                                          </div>
-                                          <p
-                                            class="euiKeyPadMenuItem__label"
-                                          >
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis with alias Url
-                                            </span>
-                                          </p>
-                                        </div>
-                                      </button>
-                                    </li>
-                                    <li>
-                                      <button
-                                        aria-describedby="visTypeDescription-visWithSearch"
-                                        class="euiKeyPadMenuItem visNewVisDialog__type"
-                                        data-test-subj="visType-visWithSearch"
-                                        data-vis-stage="production"
-                                        role="menuitem"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiKeyPadMenuItem__inner"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__icon"
-                                          >
-                                            <div
-                                              color="secondary"
-                                              data-euiicon-type="empty"
-                                            />
-                                          </div>
-                                          <p
-                                            class="euiKeyPadMenuItem__label"
-                                          >
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis with search
-                                            </span>
-                                          </p>
-                                        </div>
-                                      </button>
-                                    </li>
-                                    <li>
-                                      <button
-                                        aria-describedby="visTypeDescription-vis"
-                                        class="euiKeyPadMenuItem visNewVisDialog__type"
-                                        data-test-subj="visType-vis"
-                                        data-vis-stage="production"
-                                        disabled=""
-                                        role="menuitem"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiKeyPadMenuItem__inner"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__icon"
-                                          >
-                                            <div
-                                              color="secondary"
-                                              data-euiicon-type="empty"
-                                            />
-                                          </div>
-                                          <p
-                                            class="euiKeyPadMenuItem__label"
-                                          >
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis Type 1
-                                            </span>
-                                          </p>
-                                        </div>
-                                      </button>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                            >
-                              <h2
-                                class="euiTitle euiTitle--small"
-                              >
-                                Select a visualization type
-                              </h2>
-                              <div
-                                class="euiSpacer euiSpacer--m"
-                              />
-                              <div
-                                class="euiText euiText--medium"
-                              >
-                                <p>
-                                  Start creating your visualization by selecting a type for that visualization.
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                lockProps={
+                  Object {
+                    "allowPinchZoom": undefined,
+                    "enabled": false,
+                    "inert": undefined,
+                    "onMouseDown": [Function],
+                    "onTouchStart": [Function],
+                    "shards": undefined,
+                    "sideCar": [Function],
+                  }
                 }
+                noFocusGuards={false}
                 onActivation={[Function]}
                 onDeactivation={[Function]}
                 persistentFocus={false}
+                returnFocus={true}
+                sideCar={[Function]}
               >
-                <FocusWatcher
+                <div
+                  data-focus-guard={true}
+                  key="guard-first"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+                <div
+                  data-focus-guard={true}
+                  key="guard-nearest"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={1}
+                />
+                <RequireSideCar
                   autoFocus={true}
+                  crossFrame={true}
                   disabled={false}
+                  id={Object {}}
                   observed={
                     <div
                       data-focus-lock-disabled="false"
@@ -974,360 +758,703 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                   onActivation={[Function]}
                   onDeactivation={[Function]}
                   persistentFocus={false}
-                />
-              </SideEffect(FocusWatcher)>
-              <div
-                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="euiModal euiModal--maxWidth-default visNewVisDialog"
-                onKeyDown={[Function]}
-                role="menu"
-                tabIndex={0}
-              >
-                <EuiI18n
-                  default="Closes this modal window"
-                  token="euiModal.closeModal"
-                >
-                  <EuiButtonIcon
-                    aria-label="Closes this modal window"
-                    className="euiModal__closeIcon"
-                    color="text"
-                    iconType="cross"
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="Closes this modal window"
-                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        size="m"
-                        type="cross"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="cross"
-                          size="m"
-                        />
-                      </EuiIcon>
-                    </button>
-                  </EuiButtonIcon>
-                </EuiI18n>
-                <div
-                  className="euiModal__flex"
-                >
-                  <TypeSelection
-                    addBasePath={[Function]}
-                    onVisTypeSelected={[Function]}
-                    visTypesRegistry={
-                      Object {
-                        "all": [Function],
-                        "get": [Function],
-                        "getAliases": [Function],
-                      }
+                  returnFocus={[Function]}
+                  shards={Array []}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
                     }
-                  >
-                    <EuiModalHeader>
+                  }
+                >
+                  <SideCar
+                    autoFocus={true}
+                    crossFrame={true}
+                    disabled={false}
+                    id={Object {}}
+                    observed={
                       <div
-                        className="euiModalHeader"
+                        data-focus-lock-disabled="false"
                       >
-                        <EuiModalHeaderTitle>
+                        <div
+                          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."
+                          class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                          role="menu"
+                          tabindex="0"
+                        >
+                          <button
+                            aria-label="Closes this modal window"
+                            class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                            type="button"
+                          >
+                            <div
+                              aria-hidden="true"
+                              class="euiButtonIcon__icon"
+                              data-euiicon-type="cross"
+                            />
+                          </button>
                           <div
-                            className="euiModalHeader__title"
+                            class="euiModal__flex"
                           >
-                            <FormattedMessage
-                              defaultMessage="New Visualization"
-                              id="visualizations.newVisWizard.title"
-                              values={Object {}}
+                            <div
+                              class="euiModalHeader"
                             >
-                              New Visualization
-                            </FormattedMessage>
-                          </div>
-                        </EuiModalHeaderTitle>
-                      </div>
-                    </EuiModalHeader>
-                    <div
-                      className="visNewVisDialog__body"
-                    >
-                      <EuiFlexGroup
-                        gutterSize="xl"
-                      >
-                        <div
-                          className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                        >
-                          <EuiFlexItem>
+                              <div
+                                class="euiModalHeader__title"
+                              >
+                                New Visualization
+                              </div>
+                            </div>
                             <div
-                              className="euiFlexItem"
+                              class="visNewVisDialog__body"
                             >
-                              <EuiFlexGroup
-                                className="visNewVisDialog__list"
-                                direction="column"
-                                gutterSize="none"
-                                responsive={false}
+                              <div
+                                class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                               >
                                 <div
-                                  className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                  class="euiFlexItem"
                                 >
-                                  <EuiFlexItem
-                                    className="visNewVisDialog__searchWrapper"
-                                    grow={false}
+                                  <div
+                                    class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                                   >
                                     <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                     >
-                                      <EuiFieldSearch
-                                        aria-label="Filter for a visualization type"
-                                        compressed={false}
-                                        data-test-subj="filterVisType"
-                                        fullWidth={true}
-                                        incremental={false}
-                                        isClearable={true}
-                                        isLoading={false}
-                                        onChange={[Function]}
-                                        placeholder="Filter"
-                                        value="with"
+                                      <div
+                                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
                                       >
-                                        <EuiFormControlLayout
-                                          clear={
-                                            Object {
-                                              "onClick": [Function],
-                                            }
-                                          }
-                                          compressed={false}
-                                          fullWidth={true}
-                                          icon="search"
-                                          isLoading={false}
+                                        <div
+                                          class="euiFormControlLayout__childrenWrapper"
                                         >
+                                          <input
+                                            aria-label="Filter for a visualization type"
+                                            class="euiFieldSearch euiFieldSearch--fullWidth"
+                                            data-test-subj="filterVisType"
+                                            placeholder="Filter"
+                                            type="search"
+                                            value="with"
+                                          />
                                           <div
-                                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                            class="euiFormControlLayoutIcons"
                                           >
-                                            <div
-                                              className="euiFormControlLayout__childrenWrapper"
+                                            <span
+                                              class="euiFormControlLayoutCustomIcon"
                                             >
-                                              <EuiValidatableControl>
-                                                <input
-                                                  aria-label="Filter for a visualization type"
-                                                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                  data-test-subj="filterVisType"
-                                                  onChange={[Function]}
-                                                  onKeyUp={[Function]}
-                                                  placeholder="Filter"
-                                                  type="search"
-                                                  value="with"
-                                                />
-                                              </EuiValidatableControl>
-                                              <EuiFormControlLayoutIcons
-                                                clear={
-                                                  Object {
-                                                    "onClick": [Function],
-                                                  }
-                                                }
-                                                icon="search"
-                                                isLoading={false}
-                                              >
-                                                <div
-                                                  className="euiFormControlLayoutIcons"
-                                                >
-                                                  <EuiFormControlLayoutCustomIcon
-                                                    type="search"
-                                                  >
-                                                    <span
-                                                      className="euiFormControlLayoutCustomIcon"
-                                                    >
-                                                      <EuiIcon
-                                                        aria-hidden="true"
-                                                        className="euiFormControlLayoutCustomIcon__icon"
-                                                        type="search"
-                                                      >
-                                                        <div
-                                                          aria-hidden="true"
-                                                          className="euiFormControlLayoutCustomIcon__icon"
-                                                          data-euiicon-type="search"
-                                                        />
-                                                      </EuiIcon>
-                                                    </span>
-                                                  </EuiFormControlLayoutCustomIcon>
-                                                </div>
-                                                <div
-                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                                >
-                                                  <EuiFormControlLayoutClearButton
-                                                    onClick={[Function]}
-                                                  >
-                                                    <EuiI18n
-                                                      default="Clear input"
-                                                      token="euiFormControlLayoutClearButton.label"
-                                                    >
-                                                      <button
-                                                        aria-label="Clear input"
-                                                        className="euiFormControlLayoutClearButton"
-                                                        onClick={[Function]}
-                                                        type="button"
-                                                      >
-                                                        <EuiIcon
-                                                          className="euiFormControlLayoutClearButton__icon"
-                                                          type="cross"
-                                                        >
-                                                          <div
-                                                            className="euiFormControlLayoutClearButton__icon"
-                                                            data-euiicon-type="cross"
-                                                          />
-                                                        </EuiIcon>
-                                                      </button>
-                                                    </EuiI18n>
-                                                  </EuiFormControlLayoutClearButton>
-                                                </div>
-                                              </EuiFormControlLayoutIcons>
-                                            </div>
+                                              <div
+                                                aria-hidden="true"
+                                                class="euiFormControlLayoutCustomIcon__icon"
+                                                data-euiicon-type="search"
+                                              />
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                          >
+                                            <button
+                                              aria-label="Clear input"
+                                              class="euiFormControlLayoutClearButton"
+                                              type="button"
+                                            >
+                                              <div
+                                                class="euiFormControlLayoutClearButton__icon"
+                                                data-euiicon-type="cross"
+                                              />
+                                            </button>
                                           </div>
-                                        </EuiFormControlLayout>
-                                      </EuiFieldSearch>
+                                        </div>
+                                      </div>
                                     </div>
-                                  </EuiFlexItem>
-                                  <EuiFlexItem
-                                    className="visNewVisDialog__typesWrapper"
-                                    grow={1}
-                                  >
                                     <div
-                                      className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                      class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
                                     >
-                                      <EuiScreenReaderOnly>
-                                        <span
-                                          aria-live="polite"
-                                          className="euiScreenReaderOnly"
-                                        >
-                                          <FormattedMessage
-                                            defaultMessage="{resultCount} {resultCount, plural, one {type} other {types} } found"
-                                            id="visualizations.newVisWizard.resultsFound"
-                                            values={
-                                              Object {
-                                                "resultCount": 2,
-                                              }
-                                            }
-                                          >
-                                            2 types found
-                                          </FormattedMessage>
-                                        </span>
-                                      </EuiScreenReaderOnly>
-                                      <EuiKeyPadMenu
-                                        className="visNewVisDialog__types"
+                                      <span
+                                        aria-live="polite"
+                                        class="euiScreenReaderOnly"
+                                      >
+                                        2 types found
+                                      </span>
+                                      <ul
+                                        class="euiKeyPadMenu visNewVisDialog__types"
                                         data-test-subj="visNewDialogTypes"
                                       >
-                                        <ul
-                                          className="euiKeyPadMenu visNewVisDialog__types"
-                                          data-test-subj="visNewDialogTypes"
-                                        >
-                                          <li
-                                            key=".$visWithAliasUrl"
+                                        <li>
+                                          <button
+                                            aria-describedby="visTypeDescription-visWithAliasUrl"
+                                            class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                            data-test-subj="visType-visWithAliasUrl"
+                                            data-vis-stage="alias"
+                                            role="menuitem"
+                                            type="button"
                                           >
-                                            <EuiKeyPadMenuItem
-                                              aria-describedby="visTypeDescription-visWithAliasUrl"
-                                              betaBadgeIconType="popout"
-                                              betaBadgeLabel="Kibana application"
-                                              betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-visWithAliasUrl"
-                                              data-vis-stage="alias"
-                                              disabled={false}
-                                              key="visWithAliasUrl"
-                                              label={
+                                            <div
+                                              class="euiKeyPadMenuItem__inner"
+                                            >
+                                              <span
+                                                class="euiKeyPadMenuItem__betaBadgeWrapper"
+                                              >
                                                 <span
-                                                  data-test-subj="visTypeTitle"
+                                                  class="euiToolTipAnchor"
                                                 >
-                                                  Vis with alias Url
+                                                  <span
+                                                    class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                    tabindex="0"
+                                                  >
+                                                    <div
+                                                      aria-hidden="true"
+                                                      class="euiBetaBadge__icon"
+                                                      data-euiicon-type="popout"
+                                                    />
+                                                  </span>
                                                 </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                              role="menuitem"
-                                            >
-                                              <button
-                                                aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                              </span>
+                                              <div
+                                                class="euiKeyPadMenuItem__icon"
+                                              >
+                                                <div
+                                                  color="secondary"
+                                                  data-euiicon-type="empty"
+                                                />
+                                              </div>
+                                              <p
+                                                class="euiKeyPadMenuItem__label"
+                                              >
+                                                <span
+                                                  data-test-subj="visTypeTitle"
+                                                >
+                                                  Vis with alias Url
+                                                </span>
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </li>
+                                        <li>
+                                          <button
+                                            aria-describedby="visTypeDescription-visWithSearch"
+                                            class="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-visWithSearch"
+                                            data-vis-stage="production"
+                                            role="menuitem"
+                                            type="button"
+                                          >
+                                            <div
+                                              class="euiKeyPadMenuItem__inner"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__icon"
+                                              >
+                                                <div
+                                                  color="secondary"
+                                                  data-euiicon-type="empty"
+                                                />
+                                              </div>
+                                              <p
+                                                class="euiKeyPadMenuItem__label"
+                                              >
+                                                <span
+                                                  data-test-subj="visTypeTitle"
+                                                >
+                                                  Vis with search
+                                                </span>
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </li>
+                                        <li>
+                                          <button
+                                            aria-describedby="visTypeDescription-vis"
+                                            class="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-vis"
+                                            data-vis-stage="production"
+                                            disabled=""
+                                            role="menuitem"
+                                            type="button"
+                                          >
+                                            <div
+                                              class="euiKeyPadMenuItem__inner"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__icon"
+                                              >
+                                                <div
+                                                  color="secondary"
+                                                  data-euiicon-type="empty"
+                                                />
+                                              </div>
+                                              <p
+                                                class="euiKeyPadMenuItem__label"
+                                              >
+                                                <span
+                                                  data-test-subj="visTypeTitle"
+                                                >
+                                                  Vis Type 1
+                                                </span>
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                >
+                                  <h2
+                                    class="euiTitle euiTitle--small"
+                                  >
+                                    Select a visualization type
+                                  </h2>
+                                  <div
+                                    class="euiSpacer euiSpacer--m"
+                                  />
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    <p>
+                                      Start creating your visualization by selecting a type for that visualization.
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    }
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
+                    returnFocus={[Function]}
+                    shards={Array []}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <SideEffect(FocusWatcher)
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
+                          <div
+                            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."
+                            class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                            role="menu"
+                            tabindex="0"
+                          >
+                            <button
+                              aria-label="Closes this modal window"
+                              class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                              type="button"
+                            >
+                              <div
+                                aria-hidden="true"
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="cross"
+                              />
+                            </button>
+                            <div
+                              class="euiModal__flex"
+                            >
+                              <div
+                                class="euiModalHeader"
+                              >
+                                <div
+                                  class="euiModalHeader__title"
+                                >
+                                  New Visualization
+                                </div>
+                              </div>
+                              <div
+                                class="visNewVisDialog__body"
+                              >
+                                <div
+                                  class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                >
+                                  <div
+                                    class="euiFlexItem"
+                                  >
+                                    <div
+                                      class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                    >
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                      >
+                                        <div
+                                          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        >
+                                          <div
+                                            class="euiFormControlLayout__childrenWrapper"
+                                          >
+                                            <input
+                                              aria-label="Filter for a visualization type"
+                                              class="euiFieldSearch euiFieldSearch--fullWidth"
+                                              data-test-subj="filterVisType"
+                                              placeholder="Filter"
+                                              type="search"
+                                              value="with"
+                                            />
+                                            <div
+                                              class="euiFormControlLayoutIcons"
+                                            >
+                                              <span
+                                                class="euiFormControlLayoutCustomIcon"
+                                              >
+                                                <div
+                                                  aria-hidden="true"
+                                                  class="euiFormControlLayoutCustomIcon__icon"
+                                                  data-euiicon-type="search"
+                                                />
+                                              </span>
+                                            </div>
+                                            <div
+                                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                            >
+                                              <button
+                                                aria-label="Clear input"
+                                                class="euiFormControlLayoutClearButton"
+                                                type="button"
+                                              >
+                                                <div
+                                                  class="euiFormControlLayoutClearButton__icon"
+                                                  data-euiicon-type="cross"
+                                                />
+                                              </button>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                      >
+                                        <span
+                                          aria-live="polite"
+                                          class="euiScreenReaderOnly"
+                                        >
+                                          2 types found
+                                        </span>
+                                        <ul
+                                          class="euiKeyPadMenu visNewVisDialog__types"
+                                          data-test-subj="visNewDialogTypes"
+                                        >
+                                          <li>
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithAliasUrl"
+                                              class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                              data-test-subj="visType-visWithAliasUrl"
+                                              data-vis-stage="alias"
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__inner"
+                                              >
+                                                <span
+                                                  class="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                >
+                                                  <span
+                                                    class="euiToolTipAnchor"
+                                                  >
+                                                    <span
+                                                      class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                      tabindex="0"
+                                                    >
+                                                      <div
+                                                        aria-hidden="true"
+                                                        class="euiBetaBadge__icon"
+                                                        data-euiicon-type="popout"
+                                                      />
+                                                    </span>
+                                                  </span>
+                                                </span>
+                                                <div
+                                                  class="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <div
+                                                    color="secondary"
+                                                    data-euiicon-type="empty"
+                                                  />
+                                                </div>
+                                                <p
+                                                  class="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with alias Url
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </li>
+                                          <li>
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithSearch"
+                                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-visWithSearch"
+                                              data-vis-stage="production"
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__inner"
+                                              >
+                                                <div
+                                                  class="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <div
+                                                    color="secondary"
+                                                    data-euiicon-type="empty"
+                                                  />
+                                                </div>
+                                                <p
+                                                  class="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with search
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </li>
+                                          <li>
+                                            <button
+                                              aria-describedby="visTypeDescription-vis"
+                                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-vis"
+                                              data-vis-stage="production"
+                                              disabled=""
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__inner"
+                                              >
+                                                <div
+                                                  class="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <div
+                                                    color="secondary"
+                                                    data-euiicon-type="empty"
+                                                  />
+                                                </div>
+                                                <p
+                                                  class="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis Type 1
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </li>
+                                        </ul>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                  >
+                                    <h2
+                                      class="euiTitle euiTitle--small"
+                                    >
+                                      Select a visualization type
+                                    </h2>
+                                    <div
+                                      class="euiSpacer euiSpacer--m"
+                                    />
+                                    <div
+                                      class="euiText euiText--medium"
+                                    >
+                                      <p>
+                                        Start creating your visualization by selecting a type for that visualization.
+                                      </p>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                    >
+                      <FocusWatcher
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
+                          <div
+                            data-focus-lock-disabled="false"
+                          >
+                            <div
+                              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."
+                              class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                              role="menu"
+                              tabindex="0"
+                            >
+                              <button
+                                aria-label="Closes this modal window"
+                                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                type="button"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="cross"
+                                />
+                              </button>
+                              <div
+                                class="euiModal__flex"
+                              >
+                                <div
+                                  class="euiModalHeader"
+                                >
+                                  <div
+                                    class="euiModalHeader__title"
+                                  >
+                                    New Visualization
+                                  </div>
+                                </div>
+                                <div
+                                  class="visNewVisDialog__body"
+                                >
+                                  <div
+                                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <div
+                                      class="euiFlexItem"
+                                    >
+                                      <div
+                                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                      >
+                                        <div
+                                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                        >
+                                          <div
+                                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                          >
+                                            <div
+                                              class="euiFormControlLayout__childrenWrapper"
+                                            >
+                                              <input
+                                                aria-label="Filter for a visualization type"
+                                                class="euiFieldSearch euiFieldSearch--fullWidth"
+                                                data-test-subj="filterVisType"
+                                                placeholder="Filter"
+                                                type="search"
+                                                value="with"
+                                              />
+                                              <div
+                                                class="euiFormControlLayoutIcons"
+                                              >
+                                                <span
+                                                  class="euiFormControlLayoutCustomIcon"
+                                                >
+                                                  <div
+                                                    aria-hidden="true"
+                                                    class="euiFormControlLayoutCustomIcon__icon"
+                                                    data-euiicon-type="search"
+                                                  />
+                                                </span>
+                                              </div>
+                                              <div
+                                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                              >
+                                                <button
+                                                  aria-label="Clear input"
+                                                  class="euiFormControlLayoutClearButton"
+                                                  type="button"
+                                                >
+                                                  <div
+                                                    class="euiFormControlLayoutClearButton__icon"
+                                                    data-euiicon-type="cross"
+                                                  />
+                                                </button>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                        <div
+                                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                        >
+                                          <span
+                                            aria-live="polite"
+                                            class="euiScreenReaderOnly"
+                                          >
+                                            2 types found
+                                          </span>
+                                          <ul
+                                            class="euiKeyPadMenu visNewVisDialog__types"
+                                            data-test-subj="visNewDialogTypes"
+                                          >
+                                            <li>
+                                              <button
+                                                aria-describedby="visTypeDescription-visWithAliasUrl"
+                                                class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
                                                 data-test-subj="visType-visWithAliasUrl"
                                                 data-vis-stage="alias"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
                                                 role="menuitem"
                                                 type="button"
                                               >
                                                 <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                  class="euiKeyPadMenuItem__inner"
                                                 >
                                                   <span
-                                                    className="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                    class="euiKeyPadMenuItem__betaBadgeWrapper"
                                                   >
-                                                    <EuiBetaBadge
-                                                      className="euiKeyPadMenuItem__betaBadge"
-                                                      iconType="popout"
-                                                      label="Kibana application"
-                                                      tooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                    <span
+                                                      class="euiToolTipAnchor"
                                                     >
-                                                      <EuiToolTip
-                                                        content="Opens a Kibana application that is outside of Visualize."
-                                                        delay="regular"
-                                                        position="top"
-                                                        title="Kibana application"
+                                                      <span
+                                                        class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                        tabindex="0"
                                                       >
-                                                        <span
-                                                          className="euiToolTipAnchor"
-                                                          onKeyUp={[Function]}
-                                                          onMouseOut={[Function]}
-                                                          onMouseOver={[Function]}
-                                                        >
-                                                          <span
-                                                            className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                            onBlur={[Function]}
-                                                            onFocus={[Function]}
-                                                            tabIndex={0}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-hidden="true"
-                                                              className="euiBetaBadge__icon"
-                                                              size="m"
-                                                              type="popout"
-                                                            >
-                                                              <div
-                                                                aria-hidden="true"
-                                                                className="euiBetaBadge__icon"
-                                                                data-euiicon-type="popout"
-                                                                size="m"
-                                                              />
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </span>
-                                                      </EuiToolTip>
-                                                    </EuiBetaBadge>
+                                                        <div
+                                                          aria-hidden="true"
+                                                          class="euiBetaBadge__icon"
+                                                          data-euiicon-type="popout"
+                                                        />
+                                                      </span>
+                                                    </span>
                                                   </span>
                                                   <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                    class="euiKeyPadMenuItem__icon"
                                                   >
-                                                    <VisTypeIcon>
-                                                      <EuiIcon
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <div
-                                                          color="secondary"
-                                                          data-euiicon-type="empty"
-                                                          size="l"
-                                                        />
-                                                      </EuiIcon>
-                                                    </VisTypeIcon>
+                                                    <div
+                                                      color="secondary"
+                                                      data-euiicon-type="empty"
+                                                    />
                                                   </div>
                                                   <p
-                                                    className="euiKeyPadMenuItem__label"
+                                                    class="euiKeyPadMenuItem__label"
                                                   >
                                                     <span
                                                       data-test-subj="visTypeTitle"
@@ -1337,68 +1464,29 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                                   </p>
                                                 </div>
                                               </button>
-                                            </EuiKeyPadMenuItem>
-                                          </li>
-                                          <li
-                                            key=".$visWithSearch"
-                                          >
-                                            <EuiKeyPadMenuItem
-                                              aria-describedby="visTypeDescription-visWithSearch"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-visWithSearch"
-                                              data-vis-stage="production"
-                                              disabled={false}
-                                              key="visWithSearch"
-                                              label={
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis with search
-                                                </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                              role="menuitem"
-                                            >
+                                            </li>
+                                            <li>
                                               <button
                                                 aria-describedby="visTypeDescription-visWithSearch"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                class="euiKeyPadMenuItem visNewVisDialog__type"
                                                 data-test-subj="visType-visWithSearch"
                                                 data-vis-stage="production"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
                                                 role="menuitem"
                                                 type="button"
                                               >
                                                 <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                  class="euiKeyPadMenuItem__inner"
                                                 >
                                                   <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                    class="euiKeyPadMenuItem__icon"
                                                   >
-                                                    <VisTypeIcon>
-                                                      <EuiIcon
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <div
-                                                          color="secondary"
-                                                          data-euiicon-type="empty"
-                                                          size="l"
-                                                        />
-                                                      </EuiIcon>
-                                                    </VisTypeIcon>
+                                                    <div
+                                                      color="secondary"
+                                                      data-euiicon-type="empty"
+                                                    />
                                                   </div>
                                                   <p
-                                                    className="euiKeyPadMenuItem__label"
+                                                    class="euiKeyPadMenuItem__label"
                                                   >
                                                     <span
                                                       data-test-subj="visTypeTitle"
@@ -1408,68 +1496,30 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                                   </p>
                                                 </div>
                                               </button>
-                                            </EuiKeyPadMenuItem>
-                                          </li>
-                                          <li
-                                            key=".$vis"
-                                          >
-                                            <EuiKeyPadMenuItem
-                                              aria-describedby="visTypeDescription-vis"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-vis"
-                                              data-vis-stage="production"
-                                              disabled={true}
-                                              key="vis"
-                                              label={
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis Type 1
-                                                </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                              role="menuitem"
-                                            >
+                                            </li>
+                                            <li>
                                               <button
                                                 aria-describedby="visTypeDescription-vis"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                class="euiKeyPadMenuItem visNewVisDialog__type"
                                                 data-test-subj="visType-vis"
                                                 data-vis-stage="production"
-                                                disabled={true}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
+                                                disabled=""
                                                 role="menuitem"
                                                 type="button"
                                               >
                                                 <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                  class="euiKeyPadMenuItem__inner"
                                                 >
                                                   <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                    class="euiKeyPadMenuItem__icon"
                                                   >
-                                                    <VisTypeIcon>
-                                                      <EuiIcon
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <div
-                                                          color="secondary"
-                                                          data-euiicon-type="empty"
-                                                          size="l"
-                                                        />
-                                                      </EuiIcon>
-                                                    </VisTypeIcon>
+                                                    <div
+                                                      color="secondary"
+                                                      data-euiicon-type="empty"
+                                                    />
                                                   </div>
                                                   <p
-                                                    className="euiKeyPadMenuItem__label"
+                                                    class="euiKeyPadMenuItem__label"
                                                   >
                                                     <span
                                                       data-test-subj="visTypeTitle"
@@ -1479,90 +1529,704 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                                   </p>
                                                 </div>
                                               </button>
-                                            </EuiKeyPadMenuItem>
-                                          </li>
-                                        </ul>
-                                      </EuiKeyPadMenu>
+                                            </li>
+                                          </ul>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                    >
+                                      <h2
+                                        class="euiTitle euiTitle--small"
+                                      >
+                                        Select a visualization type
+                                      </h2>
+                                      <div
+                                        class="euiSpacer euiSpacer--m"
+                                      />
+                                      <div
+                                        class="euiText euiText--medium"
+                                      >
+                                        <p>
+                                          Start creating your visualization by selecting a type for that visualization.
+                                        </p>
+                                      </div>
                                     </div>
-                                  </EuiFlexItem>
+                                  </div>
                                 </div>
-                              </EuiFlexGroup>
+                              </div>
                             </div>
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            className="visNewVisDialog__description"
-                            grow={false}
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
+                      />
+                    </SideEffect(FocusWatcher)>
+                  </SideCar>
+                </RequireSideCar>
+                <ForwardRef
+                  data-focus-lock-disabled={false}
+                  enabled={false}
+                  inert={false}
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onTouchStart={[Function]}
+                  removeScrollBar={true}
+                  sideCar={[Function]}
+                >
+                  <div
+                    data-focus-lock-disabled={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onScrollCapture={[Function]}
+                    onTouchMoveCapture={[Function]}
+                    onTouchStart={[Function]}
+                    onWheelCapture={[Function]}
+                  >
+                    <div
+                      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="euiModal euiModal--maxWidth-default visNewVisDialog"
+                      onKeyDown={[Function]}
+                      role="menu"
+                      tabIndex={0}
+                    >
+                      <EuiI18n
+                        default="Closes this modal window"
+                        token="euiModal.closeModal"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Closes this modal window"
+                          className="euiModal__closeIcon"
+                          color="text"
+                          iconType="cross"
+                          onClick={[Function]}
+                        >
+                          <button
+                            aria-label="Closes this modal window"
+                            className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                            onClick={[Function]}
+                            type="button"
                           >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              size="m"
+                              type="cross"
+                            >
+                              <div
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                data-euiicon-type="cross"
+                                size="m"
+                              />
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </EuiI18n>
+                      <div
+                        className="euiModal__flex"
+                      >
+                        <TypeSelection
+                          addBasePath={[Function]}
+                          onVisTypeSelected={[Function]}
+                          visTypesRegistry={
+                            Object {
+                              "all": [Function],
+                              "get": [Function],
+                              "getAliases": [Function],
+                            }
+                          }
+                        >
+                          <EuiModalHeader>
                             <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                              className="euiModalHeader"
                             >
-                              <EuiTitle
-                                size="s"
-                              >
-                                <h2
-                                  className="euiTitle euiTitle--small"
+                              <EuiModalHeaderTitle>
+                                <div
+                                  className="euiModalHeader__title"
                                 >
                                   <FormattedMessage
-                                    defaultMessage="Select a visualization type"
-                                    id="visualizations.newVisWizard.selectVisType"
+                                    defaultMessage="New Visualization"
+                                    id="visualizations.newVisWizard.title"
                                     values={Object {}}
                                   >
-                                    Select a visualization type
+                                    New Visualization
                                   </FormattedMessage>
-                                </h2>
-                              </EuiTitle>
-                              <EuiSpacer
-                                size="m"
-                              >
-                                <div
-                                  className="euiSpacer euiSpacer--m"
-                                />
-                              </EuiSpacer>
-                              <NewVisHelp
-                                onPromotionClicked={[Function]}
-                                promotedTypes={Array []}
+                                </div>
+                              </EuiModalHeaderTitle>
+                            </div>
+                          </EuiModalHeader>
+                          <div
+                            className="visNewVisDialog__body"
+                          >
+                            <EuiFlexGroup
+                              gutterSize="xl"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                               >
-                                <EuiText>
+                                <EuiFlexItem>
                                   <div
-                                    className="euiText euiText--medium"
+                                    className="euiFlexItem"
                                   >
-                                    <p>
-                                      <FormattedMessage
-                                        defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                        id="visualizations.newVisWizard.helpText"
-                                        values={Object {}}
+                                    <EuiFlexGroup
+                                      className="visNewVisDialog__list"
+                                      direction="column"
+                                      gutterSize="none"
+                                      responsive={false}
+                                    >
+                                      <div
+                                        className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                                       >
-                                        Start creating your visualization by selecting a type for that visualization.
-                                      </FormattedMessage>
-                                    </p>
+                                        <EuiFlexItem
+                                          className="visNewVisDialog__searchWrapper"
+                                          grow={false}
+                                        >
+                                          <div
+                                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                          >
+                                            <EuiFieldSearch
+                                              aria-label="Filter for a visualization type"
+                                              compressed={false}
+                                              data-test-subj="filterVisType"
+                                              fullWidth={true}
+                                              incremental={false}
+                                              isClearable={true}
+                                              isLoading={false}
+                                              onChange={[Function]}
+                                              placeholder="Filter"
+                                              value="with"
+                                            >
+                                              <EuiFormControlLayout
+                                                clear={
+                                                  Object {
+                                                    "onClick": [Function],
+                                                  }
+                                                }
+                                                compressed={false}
+                                                fullWidth={true}
+                                                icon="search"
+                                                isLoading={false}
+                                              >
+                                                <div
+                                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                                >
+                                                  <div
+                                                    className="euiFormControlLayout__childrenWrapper"
+                                                  >
+                                                    <EuiValidatableControl>
+                                                      <input
+                                                        aria-label="Filter for a visualization type"
+                                                        className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                        data-test-subj="filterVisType"
+                                                        onChange={[Function]}
+                                                        onKeyUp={[Function]}
+                                                        placeholder="Filter"
+                                                        type="search"
+                                                        value="with"
+                                                      />
+                                                    </EuiValidatableControl>
+                                                    <EuiFormControlLayoutIcons
+                                                      clear={
+                                                        Object {
+                                                          "onClick": [Function],
+                                                        }
+                                                      }
+                                                      icon="search"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayoutIcons"
+                                                      >
+                                                        <EuiFormControlLayoutCustomIcon
+                                                          type="search"
+                                                        >
+                                                          <span
+                                                            className="euiFormControlLayoutCustomIcon"
+                                                          >
+                                                            <EuiIcon
+                                                              aria-hidden="true"
+                                                              className="euiFormControlLayoutCustomIcon__icon"
+                                                              type="search"
+                                                            >
+                                                              <div
+                                                                aria-hidden="true"
+                                                                className="euiFormControlLayoutCustomIcon__icon"
+                                                                data-euiicon-type="search"
+                                                              />
+                                                            </EuiIcon>
+                                                          </span>
+                                                        </EuiFormControlLayoutCustomIcon>
+                                                      </div>
+                                                      <div
+                                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                                      >
+                                                        <EuiFormControlLayoutClearButton
+                                                          onClick={[Function]}
+                                                        >
+                                                          <EuiI18n
+                                                            default="Clear input"
+                                                            token="euiFormControlLayoutClearButton.label"
+                                                          >
+                                                            <button
+                                                              aria-label="Clear input"
+                                                              className="euiFormControlLayoutClearButton"
+                                                              onClick={[Function]}
+                                                              type="button"
+                                                            >
+                                                              <EuiIcon
+                                                                className="euiFormControlLayoutClearButton__icon"
+                                                                type="cross"
+                                                              >
+                                                                <div
+                                                                  className="euiFormControlLayoutClearButton__icon"
+                                                                  data-euiicon-type="cross"
+                                                                />
+                                                              </EuiIcon>
+                                                            </button>
+                                                          </EuiI18n>
+                                                        </EuiFormControlLayoutClearButton>
+                                                      </div>
+                                                    </EuiFormControlLayoutIcons>
+                                                  </div>
+                                                </div>
+                                              </EuiFormControlLayout>
+                                            </EuiFieldSearch>
+                                          </div>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem
+                                          className="visNewVisDialog__typesWrapper"
+                                          grow={1}
+                                        >
+                                          <div
+                                            className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                          >
+                                            <EuiScreenReaderOnly>
+                                              <span
+                                                aria-live="polite"
+                                                className="euiScreenReaderOnly"
+                                              >
+                                                <FormattedMessage
+                                                  defaultMessage="{resultCount} {resultCount, plural, one {type} other {types} } found"
+                                                  id="visualizations.newVisWizard.resultsFound"
+                                                  values={
+                                                    Object {
+                                                      "resultCount": 2,
+                                                    }
+                                                  }
+                                                >
+                                                  2 types found
+                                                </FormattedMessage>
+                                              </span>
+                                            </EuiScreenReaderOnly>
+                                            <EuiKeyPadMenu
+                                              className="visNewVisDialog__types"
+                                              data-test-subj="visNewDialogTypes"
+                                            >
+                                              <ul
+                                                className="euiKeyPadMenu visNewVisDialog__types"
+                                                data-test-subj="visNewDialogTypes"
+                                              >
+                                                <li
+                                                  key=".$visWithAliasUrl"
+                                                >
+                                                  <EuiKeyPadMenuItem
+                                                    aria-describedby="visTypeDescription-visWithAliasUrl"
+                                                    betaBadgeIconType="popout"
+                                                    betaBadgeLabel="Kibana application"
+                                                    betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                    className="visNewVisDialog__type"
+                                                    data-test-subj="visType-visWithAliasUrl"
+                                                    data-vis-stage="alias"
+                                                    disabled={false}
+                                                    key="visWithAliasUrl"
+                                                    label={
+                                                      <span
+                                                        data-test-subj="visTypeTitle"
+                                                      >
+                                                        Vis with alias Url
+                                                      </span>
+                                                    }
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    onMouseEnter={[Function]}
+                                                    onMouseLeave={[Function]}
+                                                    role="menuitem"
+                                                  >
+                                                    <button
+                                                      aria-describedby="visTypeDescription-visWithAliasUrl"
+                                                      className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                                      data-test-subj="visType-visWithAliasUrl"
+                                                      data-vis-stage="alias"
+                                                      disabled={false}
+                                                      onBlur={[Function]}
+                                                      onClick={[Function]}
+                                                      onFocus={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                      role="menuitem"
+                                                      type="button"
+                                                    >
+                                                      <div
+                                                        className="euiKeyPadMenuItem__inner"
+                                                      >
+                                                        <span
+                                                          className="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                        >
+                                                          <EuiBetaBadge
+                                                            className="euiKeyPadMenuItem__betaBadge"
+                                                            iconType="popout"
+                                                            label="Kibana application"
+                                                            tooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                          >
+                                                            <EuiToolTip
+                                                              content="Opens a Kibana application that is outside of Visualize."
+                                                              delay="regular"
+                                                              position="top"
+                                                              title="Kibana application"
+                                                            >
+                                                              <span
+                                                                className="euiToolTipAnchor"
+                                                                onKeyUp={[Function]}
+                                                                onMouseOut={[Function]}
+                                                                onMouseOver={[Function]}
+                                                              >
+                                                                <span
+                                                                  className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                                  onBlur={[Function]}
+                                                                  onFocus={[Function]}
+                                                                  tabIndex={0}
+                                                                >
+                                                                  <EuiIcon
+                                                                    aria-hidden="true"
+                                                                    className="euiBetaBadge__icon"
+                                                                    size="m"
+                                                                    type="popout"
+                                                                  >
+                                                                    <div
+                                                                      aria-hidden="true"
+                                                                      className="euiBetaBadge__icon"
+                                                                      data-euiicon-type="popout"
+                                                                      size="m"
+                                                                    />
+                                                                  </EuiIcon>
+                                                                </span>
+                                                              </span>
+                                                            </EuiToolTip>
+                                                          </EuiBetaBadge>
+                                                        </span>
+                                                        <div
+                                                          className="euiKeyPadMenuItem__icon"
+                                                        >
+                                                          <VisTypeIcon>
+                                                            <EuiIcon
+                                                              color="secondary"
+                                                              size="l"
+                                                              type="empty"
+                                                            >
+                                                              <div
+                                                                color="secondary"
+                                                                data-euiicon-type="empty"
+                                                                size="l"
+                                                              />
+                                                            </EuiIcon>
+                                                          </VisTypeIcon>
+                                                        </div>
+                                                        <p
+                                                          className="euiKeyPadMenuItem__label"
+                                                        >
+                                                          <span
+                                                            data-test-subj="visTypeTitle"
+                                                          >
+                                                            Vis with alias Url
+                                                          </span>
+                                                        </p>
+                                                      </div>
+                                                    </button>
+                                                  </EuiKeyPadMenuItem>
+                                                </li>
+                                                <li
+                                                  key=".$visWithSearch"
+                                                >
+                                                  <EuiKeyPadMenuItem
+                                                    aria-describedby="visTypeDescription-visWithSearch"
+                                                    className="visNewVisDialog__type"
+                                                    data-test-subj="visType-visWithSearch"
+                                                    data-vis-stage="production"
+                                                    disabled={false}
+                                                    key="visWithSearch"
+                                                    label={
+                                                      <span
+                                                        data-test-subj="visTypeTitle"
+                                                      >
+                                                        Vis with search
+                                                      </span>
+                                                    }
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    onMouseEnter={[Function]}
+                                                    onMouseLeave={[Function]}
+                                                    role="menuitem"
+                                                  >
+                                                    <button
+                                                      aria-describedby="visTypeDescription-visWithSearch"
+                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                      data-test-subj="visType-visWithSearch"
+                                                      data-vis-stage="production"
+                                                      disabled={false}
+                                                      onBlur={[Function]}
+                                                      onClick={[Function]}
+                                                      onFocus={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                      role="menuitem"
+                                                      type="button"
+                                                    >
+                                                      <div
+                                                        className="euiKeyPadMenuItem__inner"
+                                                      >
+                                                        <div
+                                                          className="euiKeyPadMenuItem__icon"
+                                                        >
+                                                          <VisTypeIcon>
+                                                            <EuiIcon
+                                                              color="secondary"
+                                                              size="l"
+                                                              type="empty"
+                                                            >
+                                                              <div
+                                                                color="secondary"
+                                                                data-euiicon-type="empty"
+                                                                size="l"
+                                                              />
+                                                            </EuiIcon>
+                                                          </VisTypeIcon>
+                                                        </div>
+                                                        <p
+                                                          className="euiKeyPadMenuItem__label"
+                                                        >
+                                                          <span
+                                                            data-test-subj="visTypeTitle"
+                                                          >
+                                                            Vis with search
+                                                          </span>
+                                                        </p>
+                                                      </div>
+                                                    </button>
+                                                  </EuiKeyPadMenuItem>
+                                                </li>
+                                                <li
+                                                  key=".$vis"
+                                                >
+                                                  <EuiKeyPadMenuItem
+                                                    aria-describedby="visTypeDescription-vis"
+                                                    className="visNewVisDialog__type"
+                                                    data-test-subj="visType-vis"
+                                                    data-vis-stage="production"
+                                                    disabled={true}
+                                                    key="vis"
+                                                    label={
+                                                      <span
+                                                        data-test-subj="visTypeTitle"
+                                                      >
+                                                        Vis Type 1
+                                                      </span>
+                                                    }
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    onMouseEnter={[Function]}
+                                                    onMouseLeave={[Function]}
+                                                    role="menuitem"
+                                                  >
+                                                    <button
+                                                      aria-describedby="visTypeDescription-vis"
+                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                      data-test-subj="visType-vis"
+                                                      data-vis-stage="production"
+                                                      disabled={true}
+                                                      onBlur={[Function]}
+                                                      onClick={[Function]}
+                                                      onFocus={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                      role="menuitem"
+                                                      type="button"
+                                                    >
+                                                      <div
+                                                        className="euiKeyPadMenuItem__inner"
+                                                      >
+                                                        <div
+                                                          className="euiKeyPadMenuItem__icon"
+                                                        >
+                                                          <VisTypeIcon>
+                                                            <EuiIcon
+                                                              color="secondary"
+                                                              size="l"
+                                                              type="empty"
+                                                            >
+                                                              <div
+                                                                color="secondary"
+                                                                data-euiicon-type="empty"
+                                                                size="l"
+                                                              />
+                                                            </EuiIcon>
+                                                          </VisTypeIcon>
+                                                        </div>
+                                                        <p
+                                                          className="euiKeyPadMenuItem__label"
+                                                        >
+                                                          <span
+                                                            data-test-subj="visTypeTitle"
+                                                          >
+                                                            Vis Type 1
+                                                          </span>
+                                                        </p>
+                                                      </div>
+                                                    </button>
+                                                  </EuiKeyPadMenuItem>
+                                                </li>
+                                              </ul>
+                                            </EuiKeyPadMenu>
+                                          </div>
+                                        </EuiFlexItem>
+                                      </div>
+                                    </EuiFlexGroup>
                                   </div>
-                                </EuiText>
-                              </NewVisHelp>
-                            </div>
-                          </EuiFlexItem>
-                        </div>
-                      </EuiFlexGroup>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  className="visNewVisDialog__description"
+                                  grow={false}
+                                >
+                                  <div
+                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                  >
+                                    <EuiTitle
+                                      size="s"
+                                    >
+                                      <h2
+                                        className="euiTitle euiTitle--small"
+                                      >
+                                        <FormattedMessage
+                                          defaultMessage="Select a visualization type"
+                                          id="visualizations.newVisWizard.selectVisType"
+                                          values={Object {}}
+                                        >
+                                          Select a visualization type
+                                        </FormattedMessage>
+                                      </h2>
+                                    </EuiTitle>
+                                    <EuiSpacer
+                                      size="m"
+                                    >
+                                      <div
+                                        className="euiSpacer euiSpacer--m"
+                                      />
+                                    </EuiSpacer>
+                                    <NewVisHelp
+                                      onPromotionClicked={[Function]}
+                                      promotedTypes={Array []}
+                                    >
+                                      <EuiText>
+                                        <div
+                                          className="euiText euiText--medium"
+                                        >
+                                          <p>
+                                            <FormattedMessage
+                                              defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                              id="visualizations.newVisWizard.helpText"
+                                              values={Object {}}
+                                            >
+                                              Start creating your visualization by selecting a type for that visualization.
+                                            </FormattedMessage>
+                                          </p>
+                                        </div>
+                                      </EuiText>
+                                    </NewVisHelp>
+                                  </div>
+                                </EuiFlexItem>
+                              </div>
+                            </EuiFlexGroup>
+                          </div>
+                        </TypeSelection>
+                      </div>
                     </div>
-                  </TypeSelection>
-                </div>
-              </div>
-            </div>
-            <div
-              data-focus-guard={true}
-              style={
-                Object {
-                  "height": "0px",
-                  "left": "1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "fixed",
-                  "top": "1px",
-                  "width": "1px",
+                  </div>
+                </ForwardRef>
+                <div
+                  data-focus-guard={true}
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+              </ForwardRef>
+              <RequireSideCar
+                noIsolation={true}
+                setLockProps={[Function]}
+                sideCar={
+                  Object {
+                    "assignMedium": [Function],
+                    "assignSyncMedium": [Function],
+                    "options": Object {
+                      "async": true,
+                      "ssr": false,
+                    },
+                    "read": [Function],
+                    "useMedium": [Function],
+                  }
                 }
-              }
-              tabIndex={0}
-            />
-          </FocusLock>
+              >
+                <SideCar
+                  noIsolation={true}
+                  setLockProps={[Function]}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
+                  }
+                >
+                  <Effect
+                    noIsolation={true}
+                    setLockProps={[Function]}
+                  >
+                    <Component>
+                      <Sheet
+                        styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                      />
+                    </Component>
+                  </Effect>
+                </SideCar>
+              </RequireSideCar>
+            </ForwardRef>
+          </ForwardRef>
         </EuiFocusTrap>
       </EuiModal>
     </Portal>
@@ -1712,11 +2376,15 @@ exports[`NewVisModal should render as expected 1`] = `
           class="euiOverlayMask euiOverlayMask--aboveHeader"
         >
           <div
+            aria-hidden="true"
+            data-aria-hidden="true"
             data-focus-guard="true"
             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
             tabindex="0"
           />
           <div
+            aria-hidden="true"
+            data-aria-hidden="true"
             data-focus-guard="true"
             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
             tabindex="1"
@@ -1952,6 +2620,8 @@ exports[`NewVisModal should render as expected 1`] = `
             </div>
           </div>
           <div
+            aria-hidden="true"
+            data-aria-hidden="true"
             data-focus-guard="true"
             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
             tabindex="0"
@@ -1966,298 +2636,93 @@ exports[`NewVisModal should render as expected 1`] = `
         role="menu"
       >
         <EuiFocusTrap>
-          <FocusLock
-            as="div"
-            autoFocus={true}
-            disabled={false}
-            lockProps={
-              Object {
-                "style": undefined,
-              }
-            }
-            noFocusGuards={false}
-            persistentFocus={false}
+          <ForwardRef
+            enabled={true}
+            noIsolation={true}
             returnFocus={true}
+            scrollLock={false}
           >
-            <div
-              data-focus-guard={true}
-              key="guard-first"
-              style={
-                Object {
-                  "height": "0px",
-                  "left": "1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "fixed",
-                  "top": "1px",
-                  "width": "1px",
-                }
-              }
-              tabIndex={0}
-            />
-            <div
-              data-focus-guard={true}
-              key="guard-nearest"
-              style={
-                Object {
-                  "height": "0px",
-                  "left": "1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "fixed",
-                  "top": "1px",
-                  "width": "1px",
-                }
-              }
-              tabIndex={1}
-            />
-            <div
-              data-focus-lock-disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
+            <ForwardRef
+              enabled={true}
+              noIsolation={true}
+              returnFocus={true}
+              scrollLock={false}
+              sideCar={[Function]}
             >
-              <SideEffect(FocusWatcher)
+              <ForwardRef
+                as={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "classNames": Object {
+                      "fullWidth": "width-before-scroll-bar",
+                      "zeroRight": "right-scroll-bar-position",
+                    },
+                    "defaultProps": Object {
+                      "enabled": true,
+                      "inert": false,
+                      "removeScrollBar": true,
+                    },
+                    "render": [Function],
+                  }
+                }
                 autoFocus={true}
+                crossFrame={true}
                 disabled={false}
-                observed={
-                  <div
-                    data-focus-lock-disabled="false"
-                  >
-                    <div
-                      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."
-                      class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                      role="menu"
-                      tabindex="0"
-                    >
-                      <button
-                        aria-label="Closes this modal window"
-                        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          class="euiButtonIcon__icon"
-                          data-euiicon-type="cross"
-                        />
-                      </button>
-                      <div
-                        class="euiModal__flex"
-                      >
-                        <div
-                          class="euiModalHeader"
-                        >
-                          <div
-                            class="euiModalHeader__title"
-                          >
-                            New Visualization
-                          </div>
-                        </div>
-                        <div
-                          class="visNewVisDialog__body"
-                        >
-                          <div
-                            class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                          >
-                            <div
-                              class="euiFlexItem"
-                            >
-                              <div
-                                class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                              >
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                >
-                                  <div
-                                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                  >
-                                    <div
-                                      class="euiFormControlLayout__childrenWrapper"
-                                    >
-                                      <input
-                                        aria-label="Filter for a visualization type"
-                                        class="euiFieldSearch euiFieldSearch--fullWidth"
-                                        data-test-subj="filterVisType"
-                                        placeholder="Filter"
-                                        type="search"
-                                        value=""
-                                      />
-                                      <div
-                                        class="euiFormControlLayoutIcons"
-                                      >
-                                        <span
-                                          class="euiFormControlLayoutCustomIcon"
-                                        >
-                                          <div
-                                            aria-hidden="true"
-                                            class="euiFormControlLayoutCustomIcon__icon"
-                                            data-euiicon-type="search"
-                                          />
-                                        </span>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                >
-                                  <span
-                                    aria-live="polite"
-                                    class="euiScreenReaderOnly"
-                                  />
-                                  <ul
-                                    class="euiKeyPadMenu visNewVisDialog__types"
-                                    data-test-subj="visNewDialogTypes"
-                                  >
-                                    <li>
-                                      <button
-                                        aria-describedby="visTypeDescription-vis"
-                                        class="euiKeyPadMenuItem visNewVisDialog__type"
-                                        data-test-subj="visType-vis"
-                                        data-vis-stage="production"
-                                        role="menuitem"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiKeyPadMenuItem__inner"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__icon"
-                                          >
-                                            <div
-                                              color="secondary"
-                                              data-euiicon-type="empty"
-                                            />
-                                          </div>
-                                          <p
-                                            class="euiKeyPadMenuItem__label"
-                                          >
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis Type 1
-                                            </span>
-                                          </p>
-                                        </div>
-                                      </button>
-                                    </li>
-                                    <li>
-                                      <button
-                                        aria-describedby="visTypeDescription-visWithAliasUrl"
-                                        class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                        data-test-subj="visType-visWithAliasUrl"
-                                        data-vis-stage="alias"
-                                        role="menuitem"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiKeyPadMenuItem__inner"
-                                        >
-                                          <span
-                                            class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                          >
-                                            <span
-                                              class="euiToolTipAnchor"
-                                            >
-                                              <span
-                                                class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                tabindex="0"
-                                              >
-                                                <div
-                                                  aria-hidden="true"
-                                                  class="euiBetaBadge__icon"
-                                                  data-euiicon-type="popout"
-                                                />
-                                              </span>
-                                            </span>
-                                          </span>
-                                          <div
-                                            class="euiKeyPadMenuItem__icon"
-                                          >
-                                            <div
-                                              color="secondary"
-                                              data-euiicon-type="empty"
-                                            />
-                                          </div>
-                                          <p
-                                            class="euiKeyPadMenuItem__label"
-                                          >
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis with alias Url
-                                            </span>
-                                          </p>
-                                        </div>
-                                      </button>
-                                    </li>
-                                    <li>
-                                      <button
-                                        aria-describedby="visTypeDescription-visWithSearch"
-                                        class="euiKeyPadMenuItem visNewVisDialog__type"
-                                        data-test-subj="visType-visWithSearch"
-                                        data-vis-stage="production"
-                                        role="menuitem"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiKeyPadMenuItem__inner"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__icon"
-                                          >
-                                            <div
-                                              color="secondary"
-                                              data-euiicon-type="empty"
-                                            />
-                                          </div>
-                                          <p
-                                            class="euiKeyPadMenuItem__label"
-                                          >
-                                            <span
-                                              data-test-subj="visTypeTitle"
-                                            >
-                                              Vis with search
-                                            </span>
-                                          </p>
-                                        </div>
-                                      </button>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                            >
-                              <h2
-                                class="euiTitle euiTitle--small"
-                              >
-                                Select a visualization type
-                              </h2>
-                              <div
-                                class="euiSpacer euiSpacer--m"
-                              />
-                              <div
-                                class="euiText euiText--medium"
-                              >
-                                <p>
-                                  Start creating your visualization by selecting a type for that visualization.
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                lockProps={
+                  Object {
+                    "allowPinchZoom": undefined,
+                    "enabled": false,
+                    "inert": undefined,
+                    "onMouseDown": [Function],
+                    "onTouchStart": [Function],
+                    "shards": undefined,
+                    "sideCar": [Function],
+                  }
                 }
+                noFocusGuards={false}
                 onActivation={[Function]}
                 onDeactivation={[Function]}
                 persistentFocus={false}
+                returnFocus={true}
+                sideCar={[Function]}
               >
-                <FocusWatcher
+                <div
+                  data-focus-guard={true}
+                  key="guard-first"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+                <div
+                  data-focus-guard={true}
+                  key="guard-nearest"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={1}
+                />
+                <RequireSideCar
                   autoFocus={true}
+                  crossFrame={true}
                   disabled={false}
+                  id={Object {}}
                   observed={
                     <div
                       data-focus-lock-disabled="false"
@@ -2442,312 +2907,686 @@ exports[`NewVisModal should render as expected 1`] = `
                                             class="euiKeyPadMenuItem__inner"
                                           >
                                             <div
-                                              class="euiKeyPadMenuItem__icon"
+                                              class="euiKeyPadMenuItem__icon"
+                                            >
+                                              <div
+                                                color="secondary"
+                                                data-euiicon-type="empty"
+                                              />
+                                            </div>
+                                            <p
+                                              class="euiKeyPadMenuItem__label"
+                                            >
+                                              <span
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis with search
+                                              </span>
+                                            </p>
+                                          </div>
+                                        </button>
+                                      </li>
+                                    </ul>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                              >
+                                <h2
+                                  class="euiTitle euiTitle--small"
+                                >
+                                  Select a visualization type
+                                </h2>
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <p>
+                                    Start creating your visualization by selecting a type for that visualization.
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                  onActivation={[Function]}
+                  onDeactivation={[Function]}
+                  persistentFocus={false}
+                  returnFocus={[Function]}
+                  shards={Array []}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
+                  }
+                >
+                  <SideCar
+                    autoFocus={true}
+                    crossFrame={true}
+                    disabled={false}
+                    id={Object {}}
+                    observed={
+                      <div
+                        data-focus-lock-disabled="false"
+                      >
+                        <div
+                          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."
+                          class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                          role="menu"
+                          tabindex="0"
+                        >
+                          <button
+                            aria-label="Closes this modal window"
+                            class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                            type="button"
+                          >
+                            <div
+                              aria-hidden="true"
+                              class="euiButtonIcon__icon"
+                              data-euiicon-type="cross"
+                            />
+                          </button>
+                          <div
+                            class="euiModal__flex"
+                          >
+                            <div
+                              class="euiModalHeader"
+                            >
+                              <div
+                                class="euiModalHeader__title"
+                              >
+                                New Visualization
+                              </div>
+                            </div>
+                            <div
+                              class="visNewVisDialog__body"
+                            >
+                              <div
+                                class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <div
+                                  class="euiFlexItem"
+                                >
+                                  <div
+                                    class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                  >
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                    >
+                                      <div
+                                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                      >
+                                        <div
+                                          class="euiFormControlLayout__childrenWrapper"
+                                        >
+                                          <input
+                                            aria-label="Filter for a visualization type"
+                                            class="euiFieldSearch euiFieldSearch--fullWidth"
+                                            data-test-subj="filterVisType"
+                                            placeholder="Filter"
+                                            type="search"
+                                            value=""
+                                          />
+                                          <div
+                                            class="euiFormControlLayoutIcons"
+                                          >
+                                            <span
+                                              class="euiFormControlLayoutCustomIcon"
+                                            >
+                                              <div
+                                                aria-hidden="true"
+                                                class="euiFormControlLayoutCustomIcon__icon"
+                                                data-euiicon-type="search"
+                                              />
+                                            </span>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                    >
+                                      <span
+                                        aria-live="polite"
+                                        class="euiScreenReaderOnly"
+                                      />
+                                      <ul
+                                        class="euiKeyPadMenu visNewVisDialog__types"
+                                        data-test-subj="visNewDialogTypes"
+                                      >
+                                        <li>
+                                          <button
+                                            aria-describedby="visTypeDescription-vis"
+                                            class="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-vis"
+                                            data-vis-stage="production"
+                                            role="menuitem"
+                                            type="button"
+                                          >
+                                            <div
+                                              class="euiKeyPadMenuItem__inner"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__icon"
+                                              >
+                                                <div
+                                                  color="secondary"
+                                                  data-euiicon-type="empty"
+                                                />
+                                              </div>
+                                              <p
+                                                class="euiKeyPadMenuItem__label"
+                                              >
+                                                <span
+                                                  data-test-subj="visTypeTitle"
+                                                >
+                                                  Vis Type 1
+                                                </span>
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </li>
+                                        <li>
+                                          <button
+                                            aria-describedby="visTypeDescription-visWithAliasUrl"
+                                            class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                            data-test-subj="visType-visWithAliasUrl"
+                                            data-vis-stage="alias"
+                                            role="menuitem"
+                                            type="button"
+                                          >
+                                            <div
+                                              class="euiKeyPadMenuItem__inner"
                                             >
+                                              <span
+                                                class="euiKeyPadMenuItem__betaBadgeWrapper"
+                                              >
+                                                <span
+                                                  class="euiToolTipAnchor"
+                                                >
+                                                  <span
+                                                    class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                    tabindex="0"
+                                                  >
+                                                    <div
+                                                      aria-hidden="true"
+                                                      class="euiBetaBadge__icon"
+                                                      data-euiicon-type="popout"
+                                                    />
+                                                  </span>
+                                                </span>
+                                              </span>
                                               <div
-                                                color="secondary"
-                                                data-euiicon-type="empty"
-                                              />
+                                                class="euiKeyPadMenuItem__icon"
+                                              >
+                                                <div
+                                                  color="secondary"
+                                                  data-euiicon-type="empty"
+                                                />
+                                              </div>
+                                              <p
+                                                class="euiKeyPadMenuItem__label"
+                                              >
+                                                <span
+                                                  data-test-subj="visTypeTitle"
+                                                >
+                                                  Vis with alias Url
+                                                </span>
+                                              </p>
                                             </div>
-                                            <p
-                                              class="euiKeyPadMenuItem__label"
+                                          </button>
+                                        </li>
+                                        <li>
+                                          <button
+                                            aria-describedby="visTypeDescription-visWithSearch"
+                                            class="euiKeyPadMenuItem visNewVisDialog__type"
+                                            data-test-subj="visType-visWithSearch"
+                                            data-vis-stage="production"
+                                            role="menuitem"
+                                            type="button"
+                                          >
+                                            <div
+                                              class="euiKeyPadMenuItem__inner"
                                             >
-                                              <span
-                                                data-test-subj="visTypeTitle"
+                                              <div
+                                                class="euiKeyPadMenuItem__icon"
                                               >
-                                                Vis with search
-                                              </span>
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </li>
-                                    </ul>
+                                                <div
+                                                  color="secondary"
+                                                  data-euiicon-type="empty"
+                                                />
+                                              </div>
+                                              <p
+                                                class="euiKeyPadMenuItem__label"
+                                              >
+                                                <span
+                                                  data-test-subj="visTypeTitle"
+                                                >
+                                                  Vis with search
+                                                </span>
+                                              </p>
+                                            </div>
+                                          </button>
+                                        </li>
+                                      </ul>
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                              <div
-                                class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                              >
-                                <h2
-                                  class="euiTitle euiTitle--small"
-                                >
-                                  Select a visualization type
-                                </h2>
-                                <div
-                                  class="euiSpacer euiSpacer--m"
-                                />
                                 <div
-                                  class="euiText euiText--medium"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                                 >
-                                  <p>
-                                    Start creating your visualization by selecting a type for that visualization.
-                                  </p>
+                                  <h2
+                                    class="euiTitle euiTitle--small"
+                                  >
+                                    Select a visualization type
+                                  </h2>
+                                  <div
+                                    class="euiSpacer euiSpacer--m"
+                                  />
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    <p>
+                                      Start creating your visualization by selecting a type for that visualization.
+                                    </p>
+                                  </div>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
-                    </div>
-                  }
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                />
-              </SideEffect(FocusWatcher)>
-              <div
-                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="euiModal euiModal--maxWidth-default visNewVisDialog"
-                onKeyDown={[Function]}
-                role="menu"
-                tabIndex={0}
-              >
-                <EuiI18n
-                  default="Closes this modal window"
-                  token="euiModal.closeModal"
-                >
-                  <EuiButtonIcon
-                    aria-label="Closes this modal window"
-                    className="euiModal__closeIcon"
-                    color="text"
-                    iconType="cross"
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="Closes this modal window"
-                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        size="m"
-                        type="cross"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="cross"
-                          size="m"
-                        />
-                      </EuiIcon>
-                    </button>
-                  </EuiButtonIcon>
-                </EuiI18n>
-                <div
-                  className="euiModal__flex"
-                >
-                  <TypeSelection
-                    addBasePath={[Function]}
-                    onVisTypeSelected={[Function]}
-                    visTypesRegistry={
+                    }
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
+                    returnFocus={[Function]}
+                    shards={Array []}
+                    sideCar={
                       Object {
-                        "all": [Function],
-                        "get": [Function],
-                        "getAliases": [Function],
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
                       }
                     }
                   >
-                    <EuiModalHeader>
-                      <div
-                        className="euiModalHeader"
-                      >
-                        <EuiModalHeaderTitle>
+                    <SideEffect(FocusWatcher)
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
                           <div
-                            className="euiModalHeader__title"
+                            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."
+                            class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                            role="menu"
+                            tabindex="0"
                           >
-                            <FormattedMessage
-                              defaultMessage="New Visualization"
-                              id="visualizations.newVisWizard.title"
-                              values={Object {}}
+                            <button
+                              aria-label="Closes this modal window"
+                              class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                              type="button"
                             >
-                              New Visualization
-                            </FormattedMessage>
-                          </div>
-                        </EuiModalHeaderTitle>
-                      </div>
-                    </EuiModalHeader>
-                    <div
-                      className="visNewVisDialog__body"
-                    >
-                      <EuiFlexGroup
-                        gutterSize="xl"
-                      >
-                        <div
-                          className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                        >
-                          <EuiFlexItem>
+                              <div
+                                aria-hidden="true"
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="cross"
+                              />
+                            </button>
                             <div
-                              className="euiFlexItem"
+                              class="euiModal__flex"
                             >
-                              <EuiFlexGroup
-                                className="visNewVisDialog__list"
-                                direction="column"
-                                gutterSize="none"
-                                responsive={false}
+                              <div
+                                class="euiModalHeader"
+                              >
+                                <div
+                                  class="euiModalHeader__title"
+                                >
+                                  New Visualization
+                                </div>
+                              </div>
+                              <div
+                                class="visNewVisDialog__body"
                               >
                                 <div
-                                  className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                  class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                                 >
-                                  <EuiFlexItem
-                                    className="visNewVisDialog__searchWrapper"
-                                    grow={false}
+                                  <div
+                                    class="euiFlexItem"
                                   >
                                     <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                      class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                                     >
-                                      <EuiFieldSearch
-                                        aria-label="Filter for a visualization type"
-                                        compressed={false}
-                                        data-test-subj="filterVisType"
-                                        fullWidth={true}
-                                        incremental={false}
-                                        isClearable={true}
-                                        isLoading={false}
-                                        onChange={[Function]}
-                                        placeholder="Filter"
-                                        value=""
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                       >
-                                        <EuiFormControlLayout
-                                          compressed={false}
-                                          fullWidth={true}
-                                          icon="search"
-                                          isLoading={false}
+                                        <div
+                                          class="euiFormControlLayout euiFormControlLayout--fullWidth"
                                         >
                                           <div
-                                            className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                            class="euiFormControlLayout__childrenWrapper"
                                           >
+                                            <input
+                                              aria-label="Filter for a visualization type"
+                                              class="euiFieldSearch euiFieldSearch--fullWidth"
+                                              data-test-subj="filterVisType"
+                                              placeholder="Filter"
+                                              type="search"
+                                              value=""
+                                            />
                                             <div
-                                              className="euiFormControlLayout__childrenWrapper"
+                                              class="euiFormControlLayoutIcons"
                                             >
-                                              <EuiValidatableControl>
-                                                <input
-                                                  aria-label="Filter for a visualization type"
-                                                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                  data-test-subj="filterVisType"
-                                                  onChange={[Function]}
-                                                  onKeyUp={[Function]}
-                                                  placeholder="Filter"
-                                                  type="search"
-                                                  value=""
+                                              <span
+                                                class="euiFormControlLayoutCustomIcon"
+                                              >
+                                                <div
+                                                  aria-hidden="true"
+                                                  class="euiFormControlLayoutCustomIcon__icon"
+                                                  data-euiicon-type="search"
                                                 />
-                                              </EuiValidatableControl>
-                                              <EuiFormControlLayoutIcons
-                                                icon="search"
-                                                isLoading={false}
+                                              </span>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                      >
+                                        <span
+                                          aria-live="polite"
+                                          class="euiScreenReaderOnly"
+                                        />
+                                        <ul
+                                          class="euiKeyPadMenu visNewVisDialog__types"
+                                          data-test-subj="visNewDialogTypes"
+                                        >
+                                          <li>
+                                            <button
+                                              aria-describedby="visTypeDescription-vis"
+                                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-vis"
+                                              data-vis-stage="production"
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__inner"
                                               >
                                                 <div
-                                                  className="euiFormControlLayoutIcons"
+                                                  class="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <div
+                                                    color="secondary"
+                                                    data-euiicon-type="empty"
+                                                  />
+                                                </div>
+                                                <p
+                                                  class="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis Type 1
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </li>
+                                          <li>
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithAliasUrl"
+                                              class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                              data-test-subj="visType-visWithAliasUrl"
+                                              data-vis-stage="alias"
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__inner"
+                                              >
+                                                <span
+                                                  class="euiKeyPadMenuItem__betaBadgeWrapper"
                                                 >
-                                                  <EuiFormControlLayoutCustomIcon
-                                                    type="search"
+                                                  <span
+                                                    class="euiToolTipAnchor"
                                                   >
                                                     <span
-                                                      className="euiFormControlLayoutCustomIcon"
+                                                      class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                      tabindex="0"
                                                     >
-                                                      <EuiIcon
+                                                      <div
                                                         aria-hidden="true"
-                                                        className="euiFormControlLayoutCustomIcon__icon"
-                                                        type="search"
-                                                      >
-                                                        <div
-                                                          aria-hidden="true"
-                                                          className="euiFormControlLayoutCustomIcon__icon"
-                                                          data-euiicon-type="search"
-                                                        />
-                                                      </EuiIcon>
+                                                        class="euiBetaBadge__icon"
+                                                        data-euiicon-type="popout"
+                                                      />
                                                     </span>
-                                                  </EuiFormControlLayoutCustomIcon>
+                                                  </span>
+                                                </span>
+                                                <div
+                                                  class="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <div
+                                                    color="secondary"
+                                                    data-euiicon-type="empty"
+                                                  />
                                                 </div>
-                                              </EuiFormControlLayoutIcons>
-                                            </div>
-                                          </div>
-                                        </EuiFormControlLayout>
-                                      </EuiFieldSearch>
+                                                <p
+                                                  class="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with alias Url
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </li>
+                                          <li>
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithSearch"
+                                              class="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-visWithSearch"
+                                              data-vis-stage="production"
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                class="euiKeyPadMenuItem__inner"
+                                              >
+                                                <div
+                                                  class="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <div
+                                                    color="secondary"
+                                                    data-euiicon-type="empty"
+                                                  />
+                                                </div>
+                                                <p
+                                                  class="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with search
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </li>
+                                        </ul>
+                                      </div>
                                     </div>
-                                  </EuiFlexItem>
-                                  <EuiFlexItem
-                                    className="visNewVisDialog__typesWrapper"
-                                    grow={1}
+                                  </div>
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
                                   >
+                                    <h2
+                                      class="euiTitle euiTitle--small"
+                                    >
+                                      Select a visualization type
+                                    </h2>
+                                    <div
+                                      class="euiSpacer euiSpacer--m"
+                                    />
                                     <div
-                                      className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                      class="euiText euiText--medium"
                                     >
-                                      <EuiScreenReaderOnly>
-                                        <span
-                                          aria-live="polite"
-                                          className="euiScreenReaderOnly"
-                                        />
-                                      </EuiScreenReaderOnly>
-                                      <EuiKeyPadMenu
-                                        className="visNewVisDialog__types"
-                                        data-test-subj="visNewDialogTypes"
+                                      <p>
+                                        Start creating your visualization by selecting a type for that visualization.
+                                      </p>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                    >
+                      <FocusWatcher
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
+                          <div
+                            data-focus-lock-disabled="false"
+                          >
+                            <div
+                              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."
+                              class="euiModal euiModal--maxWidth-default visNewVisDialog"
+                              role="menu"
+                              tabindex="0"
+                            >
+                              <button
+                                aria-label="Closes this modal window"
+                                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                type="button"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="cross"
+                                />
+                              </button>
+                              <div
+                                class="euiModal__flex"
+                              >
+                                <div
+                                  class="euiModalHeader"
+                                >
+                                  <div
+                                    class="euiModalHeader__title"
+                                  >
+                                    New Visualization
+                                  </div>
+                                </div>
+                                <div
+                                  class="visNewVisDialog__body"
+                                >
+                                  <div
+                                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <div
+                                      class="euiFlexItem"
+                                    >
+                                      <div
+                                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                                       >
-                                        <ul
-                                          className="euiKeyPadMenu visNewVisDialog__types"
-                                          data-test-subj="visNewDialogTypes"
+                                        <div
+                                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                         >
-                                          <li
-                                            key=".$vis"
-                                          >
-                                            <EuiKeyPadMenuItem
-                                              aria-describedby="visTypeDescription-vis"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-vis"
-                                              data-vis-stage="production"
-                                              disabled={false}
-                                              key="vis"
-                                              label={
+                                          <div
+                                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                          >
+                                            <div
+                                              class="euiFormControlLayout__childrenWrapper"
+                                            >
+                                              <input
+                                                aria-label="Filter for a visualization type"
+                                                class="euiFieldSearch euiFieldSearch--fullWidth"
+                                                data-test-subj="filterVisType"
+                                                placeholder="Filter"
+                                                type="search"
+                                                value=""
+                                              />
+                                              <div
+                                                class="euiFormControlLayoutIcons"
+                                              >
                                                 <span
-                                                  data-test-subj="visTypeTitle"
+                                                  class="euiFormControlLayoutCustomIcon"
                                                 >
-                                                  Vis Type 1
+                                                  <div
+                                                    aria-hidden="true"
+                                                    class="euiFormControlLayoutCustomIcon__icon"
+                                                    data-euiicon-type="search"
+                                                  />
                                                 </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                              role="menuitem"
-                                            >
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                        <div
+                                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                        >
+                                          <span
+                                            aria-live="polite"
+                                            class="euiScreenReaderOnly"
+                                          />
+                                          <ul
+                                            class="euiKeyPadMenu visNewVisDialog__types"
+                                            data-test-subj="visNewDialogTypes"
+                                          >
+                                            <li>
                                               <button
                                                 aria-describedby="visTypeDescription-vis"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                class="euiKeyPadMenuItem visNewVisDialog__type"
                                                 data-test-subj="visType-vis"
                                                 data-vis-stage="production"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
                                                 role="menuitem"
                                                 type="button"
                                               >
                                                 <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                  class="euiKeyPadMenuItem__inner"
                                                 >
                                                   <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                    class="euiKeyPadMenuItem__icon"
                                                   >
-                                                    <VisTypeIcon>
-                                                      <EuiIcon
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <div
-                                                          color="secondary"
-                                                          data-euiicon-type="empty"
-                                                          size="l"
-                                                        />
-                                                      </EuiIcon>
-                                                    </VisTypeIcon>
+                                                    <div
+                                                      color="secondary"
+                                                      data-euiicon-type="empty"
+                                                    />
                                                   </div>
                                                   <p
-                                                    className="euiKeyPadMenuItem__label"
+                                                    class="euiKeyPadMenuItem__label"
                                                   >
                                                     <span
                                                       data-test-subj="visTypeTitle"
@@ -2757,116 +3596,47 @@ exports[`NewVisModal should render as expected 1`] = `
                                                   </p>
                                                 </div>
                                               </button>
-                                            </EuiKeyPadMenuItem>
-                                          </li>
-                                          <li
-                                            key=".$visWithAliasUrl"
-                                          >
-                                            <EuiKeyPadMenuItem
-                                              aria-describedby="visTypeDescription-visWithAliasUrl"
-                                              betaBadgeIconType="popout"
-                                              betaBadgeLabel="Kibana application"
-                                              betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-visWithAliasUrl"
-                                              data-vis-stage="alias"
-                                              disabled={false}
-                                              key="visWithAliasUrl"
-                                              label={
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis with alias Url
-                                                </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                              role="menuitem"
-                                            >
+                                            </li>
+                                            <li>
                                               <button
                                                 aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                                class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
                                                 data-test-subj="visType-visWithAliasUrl"
                                                 data-vis-stage="alias"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
                                                 role="menuitem"
                                                 type="button"
                                               >
                                                 <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                  class="euiKeyPadMenuItem__inner"
                                                 >
                                                   <span
-                                                    className="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                    class="euiKeyPadMenuItem__betaBadgeWrapper"
                                                   >
-                                                    <EuiBetaBadge
-                                                      className="euiKeyPadMenuItem__betaBadge"
-                                                      iconType="popout"
-                                                      label="Kibana application"
-                                                      tooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                    <span
+                                                      class="euiToolTipAnchor"
                                                     >
-                                                      <EuiToolTip
-                                                        content="Opens a Kibana application that is outside of Visualize."
-                                                        delay="regular"
-                                                        position="top"
-                                                        title="Kibana application"
+                                                      <span
+                                                        class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                        tabindex="0"
                                                       >
-                                                        <span
-                                                          className="euiToolTipAnchor"
-                                                          onKeyUp={[Function]}
-                                                          onMouseOut={[Function]}
-                                                          onMouseOver={[Function]}
-                                                        >
-                                                          <span
-                                                            className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                            onBlur={[Function]}
-                                                            onFocus={[Function]}
-                                                            tabIndex={0}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-hidden="true"
-                                                              className="euiBetaBadge__icon"
-                                                              size="m"
-                                                              type="popout"
-                                                            >
-                                                              <div
-                                                                aria-hidden="true"
-                                                                className="euiBetaBadge__icon"
-                                                                data-euiicon-type="popout"
-                                                                size="m"
-                                                              />
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </span>
-                                                      </EuiToolTip>
-                                                    </EuiBetaBadge>
+                                                        <div
+                                                          aria-hidden="true"
+                                                          class="euiBetaBadge__icon"
+                                                          data-euiicon-type="popout"
+                                                        />
+                                                      </span>
+                                                    </span>
                                                   </span>
                                                   <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                    class="euiKeyPadMenuItem__icon"
                                                   >
-                                                    <VisTypeIcon>
-                                                      <EuiIcon
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <div
-                                                          color="secondary"
-                                                          data-euiicon-type="empty"
-                                                          size="l"
-                                                        />
-                                                      </EuiIcon>
-                                                    </VisTypeIcon>
+                                                    <div
+                                                      color="secondary"
+                                                      data-euiicon-type="empty"
+                                                    />
                                                   </div>
                                                   <p
-                                                    className="euiKeyPadMenuItem__label"
+                                                    class="euiKeyPadMenuItem__label"
                                                   >
                                                     <span
                                                       data-test-subj="visTypeTitle"
@@ -2876,68 +3646,29 @@ exports[`NewVisModal should render as expected 1`] = `
                                                   </p>
                                                 </div>
                                               </button>
-                                            </EuiKeyPadMenuItem>
-                                          </li>
-                                          <li
-                                            key=".$visWithSearch"
-                                          >
-                                            <EuiKeyPadMenuItem
-                                              aria-describedby="visTypeDescription-visWithSearch"
-                                              className="visNewVisDialog__type"
-                                              data-test-subj="visType-visWithSearch"
-                                              data-vis-stage="production"
-                                              disabled={false}
-                                              key="visWithSearch"
-                                              label={
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis with search
-                                                </span>
-                                              }
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
-                                              role="menuitem"
-                                            >
+                                            </li>
+                                            <li>
                                               <button
                                                 aria-describedby="visTypeDescription-visWithSearch"
-                                                className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                class="euiKeyPadMenuItem visNewVisDialog__type"
                                                 data-test-subj="visType-visWithSearch"
                                                 data-vis-stage="production"
-                                                disabled={false}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseEnter={[Function]}
-                                                onMouseLeave={[Function]}
                                                 role="menuitem"
                                                 type="button"
                                               >
                                                 <div
-                                                  className="euiKeyPadMenuItem__inner"
+                                                  class="euiKeyPadMenuItem__inner"
                                                 >
                                                   <div
-                                                    className="euiKeyPadMenuItem__icon"
+                                                    class="euiKeyPadMenuItem__icon"
                                                   >
-                                                    <VisTypeIcon>
-                                                      <EuiIcon
-                                                        color="secondary"
-                                                        size="l"
-                                                        type="empty"
-                                                      >
-                                                        <div
-                                                          color="secondary"
-                                                          data-euiicon-type="empty"
-                                                          size="l"
-                                                        />
-                                                      </EuiIcon>
-                                                    </VisTypeIcon>
+                                                    <div
+                                                      color="secondary"
+                                                      data-euiicon-type="empty"
+                                                    />
                                                   </div>
                                                   <p
-                                                    className="euiKeyPadMenuItem__label"
+                                                    class="euiKeyPadMenuItem__label"
                                                   >
                                                     <span
                                                       data-test-subj="visTypeTitle"
@@ -2947,90 +3678,653 @@ exports[`NewVisModal should render as expected 1`] = `
                                                   </p>
                                                 </div>
                                               </button>
-                                            </EuiKeyPadMenuItem>
-                                          </li>
-                                        </ul>
-                                      </EuiKeyPadMenu>
+                                            </li>
+                                          </ul>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                    >
+                                      <h2
+                                        class="euiTitle euiTitle--small"
+                                      >
+                                        Select a visualization type
+                                      </h2>
+                                      <div
+                                        class="euiSpacer euiSpacer--m"
+                                      />
+                                      <div
+                                        class="euiText euiText--medium"
+                                      >
+                                        <p>
+                                          Start creating your visualization by selecting a type for that visualization.
+                                        </p>
+                                      </div>
                                     </div>
-                                  </EuiFlexItem>
+                                  </div>
                                 </div>
-                              </EuiFlexGroup>
+                              </div>
                             </div>
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            className="visNewVisDialog__description"
-                            grow={false}
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
+                      />
+                    </SideEffect(FocusWatcher)>
+                  </SideCar>
+                </RequireSideCar>
+                <ForwardRef
+                  data-focus-lock-disabled={false}
+                  enabled={false}
+                  inert={false}
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onTouchStart={[Function]}
+                  removeScrollBar={true}
+                  sideCar={[Function]}
+                >
+                  <div
+                    data-focus-lock-disabled={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onScrollCapture={[Function]}
+                    onTouchMoveCapture={[Function]}
+                    onTouchStart={[Function]}
+                    onWheelCapture={[Function]}
+                  >
+                    <div
+                      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="euiModal euiModal--maxWidth-default visNewVisDialog"
+                      onKeyDown={[Function]}
+                      role="menu"
+                      tabIndex={0}
+                    >
+                      <EuiI18n
+                        default="Closes this modal window"
+                        token="euiModal.closeModal"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Closes this modal window"
+                          className="euiModal__closeIcon"
+                          color="text"
+                          iconType="cross"
+                          onClick={[Function]}
+                        >
+                          <button
+                            aria-label="Closes this modal window"
+                            className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                            onClick={[Function]}
+                            type="button"
                           >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              size="m"
+                              type="cross"
+                            >
+                              <div
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                data-euiicon-type="cross"
+                                size="m"
+                              />
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </EuiI18n>
+                      <div
+                        className="euiModal__flex"
+                      >
+                        <TypeSelection
+                          addBasePath={[Function]}
+                          onVisTypeSelected={[Function]}
+                          visTypesRegistry={
+                            Object {
+                              "all": [Function],
+                              "get": [Function],
+                              "getAliases": [Function],
+                            }
+                          }
+                        >
+                          <EuiModalHeader>
                             <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                              className="euiModalHeader"
                             >
-                              <EuiTitle
-                                size="s"
-                              >
-                                <h2
-                                  className="euiTitle euiTitle--small"
+                              <EuiModalHeaderTitle>
+                                <div
+                                  className="euiModalHeader__title"
                                 >
                                   <FormattedMessage
-                                    defaultMessage="Select a visualization type"
-                                    id="visualizations.newVisWizard.selectVisType"
+                                    defaultMessage="New Visualization"
+                                    id="visualizations.newVisWizard.title"
                                     values={Object {}}
                                   >
-                                    Select a visualization type
+                                    New Visualization
                                   </FormattedMessage>
-                                </h2>
-                              </EuiTitle>
-                              <EuiSpacer
-                                size="m"
-                              >
-                                <div
-                                  className="euiSpacer euiSpacer--m"
-                                />
-                              </EuiSpacer>
-                              <NewVisHelp
-                                onPromotionClicked={[Function]}
-                                promotedTypes={Array []}
+                                </div>
+                              </EuiModalHeaderTitle>
+                            </div>
+                          </EuiModalHeader>
+                          <div
+                            className="visNewVisDialog__body"
+                          >
+                            <EuiFlexGroup
+                              gutterSize="xl"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                               >
-                                <EuiText>
+                                <EuiFlexItem>
                                   <div
-                                    className="euiText euiText--medium"
+                                    className="euiFlexItem"
                                   >
-                                    <p>
-                                      <FormattedMessage
-                                        defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                        id="visualizations.newVisWizard.helpText"
-                                        values={Object {}}
+                                    <EuiFlexGroup
+                                      className="visNewVisDialog__list"
+                                      direction="column"
+                                      gutterSize="none"
+                                      responsive={false}
+                                    >
+                                      <div
+                                        className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                                       >
-                                        Start creating your visualization by selecting a type for that visualization.
-                                      </FormattedMessage>
-                                    </p>
+                                        <EuiFlexItem
+                                          className="visNewVisDialog__searchWrapper"
+                                          grow={false}
+                                        >
+                                          <div
+                                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                          >
+                                            <EuiFieldSearch
+                                              aria-label="Filter for a visualization type"
+                                              compressed={false}
+                                              data-test-subj="filterVisType"
+                                              fullWidth={true}
+                                              incremental={false}
+                                              isClearable={true}
+                                              isLoading={false}
+                                              onChange={[Function]}
+                                              placeholder="Filter"
+                                              value=""
+                                            >
+                                              <EuiFormControlLayout
+                                                compressed={false}
+                                                fullWidth={true}
+                                                icon="search"
+                                                isLoading={false}
+                                              >
+                                                <div
+                                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                                >
+                                                  <div
+                                                    className="euiFormControlLayout__childrenWrapper"
+                                                  >
+                                                    <EuiValidatableControl>
+                                                      <input
+                                                        aria-label="Filter for a visualization type"
+                                                        className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                        data-test-subj="filterVisType"
+                                                        onChange={[Function]}
+                                                        onKeyUp={[Function]}
+                                                        placeholder="Filter"
+                                                        type="search"
+                                                        value=""
+                                                      />
+                                                    </EuiValidatableControl>
+                                                    <EuiFormControlLayoutIcons
+                                                      icon="search"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayoutIcons"
+                                                      >
+                                                        <EuiFormControlLayoutCustomIcon
+                                                          type="search"
+                                                        >
+                                                          <span
+                                                            className="euiFormControlLayoutCustomIcon"
+                                                          >
+                                                            <EuiIcon
+                                                              aria-hidden="true"
+                                                              className="euiFormControlLayoutCustomIcon__icon"
+                                                              type="search"
+                                                            >
+                                                              <div
+                                                                aria-hidden="true"
+                                                                className="euiFormControlLayoutCustomIcon__icon"
+                                                                data-euiicon-type="search"
+                                                              />
+                                                            </EuiIcon>
+                                                          </span>
+                                                        </EuiFormControlLayoutCustomIcon>
+                                                      </div>
+                                                    </EuiFormControlLayoutIcons>
+                                                  </div>
+                                                </div>
+                                              </EuiFormControlLayout>
+                                            </EuiFieldSearch>
+                                          </div>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem
+                                          className="visNewVisDialog__typesWrapper"
+                                          grow={1}
+                                        >
+                                          <div
+                                            className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                          >
+                                            <EuiScreenReaderOnly>
+                                              <span
+                                                aria-live="polite"
+                                                className="euiScreenReaderOnly"
+                                              />
+                                            </EuiScreenReaderOnly>
+                                            <EuiKeyPadMenu
+                                              className="visNewVisDialog__types"
+                                              data-test-subj="visNewDialogTypes"
+                                            >
+                                              <ul
+                                                className="euiKeyPadMenu visNewVisDialog__types"
+                                                data-test-subj="visNewDialogTypes"
+                                              >
+                                                <li
+                                                  key=".$vis"
+                                                >
+                                                  <EuiKeyPadMenuItem
+                                                    aria-describedby="visTypeDescription-vis"
+                                                    className="visNewVisDialog__type"
+                                                    data-test-subj="visType-vis"
+                                                    data-vis-stage="production"
+                                                    disabled={false}
+                                                    key="vis"
+                                                    label={
+                                                      <span
+                                                        data-test-subj="visTypeTitle"
+                                                      >
+                                                        Vis Type 1
+                                                      </span>
+                                                    }
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    onMouseEnter={[Function]}
+                                                    onMouseLeave={[Function]}
+                                                    role="menuitem"
+                                                  >
+                                                    <button
+                                                      aria-describedby="visTypeDescription-vis"
+                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                      data-test-subj="visType-vis"
+                                                      data-vis-stage="production"
+                                                      disabled={false}
+                                                      onBlur={[Function]}
+                                                      onClick={[Function]}
+                                                      onFocus={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                      role="menuitem"
+                                                      type="button"
+                                                    >
+                                                      <div
+                                                        className="euiKeyPadMenuItem__inner"
+                                                      >
+                                                        <div
+                                                          className="euiKeyPadMenuItem__icon"
+                                                        >
+                                                          <VisTypeIcon>
+                                                            <EuiIcon
+                                                              color="secondary"
+                                                              size="l"
+                                                              type="empty"
+                                                            >
+                                                              <div
+                                                                color="secondary"
+                                                                data-euiicon-type="empty"
+                                                                size="l"
+                                                              />
+                                                            </EuiIcon>
+                                                          </VisTypeIcon>
+                                                        </div>
+                                                        <p
+                                                          className="euiKeyPadMenuItem__label"
+                                                        >
+                                                          <span
+                                                            data-test-subj="visTypeTitle"
+                                                          >
+                                                            Vis Type 1
+                                                          </span>
+                                                        </p>
+                                                      </div>
+                                                    </button>
+                                                  </EuiKeyPadMenuItem>
+                                                </li>
+                                                <li
+                                                  key=".$visWithAliasUrl"
+                                                >
+                                                  <EuiKeyPadMenuItem
+                                                    aria-describedby="visTypeDescription-visWithAliasUrl"
+                                                    betaBadgeIconType="popout"
+                                                    betaBadgeLabel="Kibana application"
+                                                    betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                    className="visNewVisDialog__type"
+                                                    data-test-subj="visType-visWithAliasUrl"
+                                                    data-vis-stage="alias"
+                                                    disabled={false}
+                                                    key="visWithAliasUrl"
+                                                    label={
+                                                      <span
+                                                        data-test-subj="visTypeTitle"
+                                                      >
+                                                        Vis with alias Url
+                                                      </span>
+                                                    }
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    onMouseEnter={[Function]}
+                                                    onMouseLeave={[Function]}
+                                                    role="menuitem"
+                                                  >
+                                                    <button
+                                                      aria-describedby="visTypeDescription-visWithAliasUrl"
+                                                      className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                                      data-test-subj="visType-visWithAliasUrl"
+                                                      data-vis-stage="alias"
+                                                      disabled={false}
+                                                      onBlur={[Function]}
+                                                      onClick={[Function]}
+                                                      onFocus={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                      role="menuitem"
+                                                      type="button"
+                                                    >
+                                                      <div
+                                                        className="euiKeyPadMenuItem__inner"
+                                                      >
+                                                        <span
+                                                          className="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                        >
+                                                          <EuiBetaBadge
+                                                            className="euiKeyPadMenuItem__betaBadge"
+                                                            iconType="popout"
+                                                            label="Kibana application"
+                                                            tooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                          >
+                                                            <EuiToolTip
+                                                              content="Opens a Kibana application that is outside of Visualize."
+                                                              delay="regular"
+                                                              position="top"
+                                                              title="Kibana application"
+                                                            >
+                                                              <span
+                                                                className="euiToolTipAnchor"
+                                                                onKeyUp={[Function]}
+                                                                onMouseOut={[Function]}
+                                                                onMouseOver={[Function]}
+                                                              >
+                                                                <span
+                                                                  className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                                  onBlur={[Function]}
+                                                                  onFocus={[Function]}
+                                                                  tabIndex={0}
+                                                                >
+                                                                  <EuiIcon
+                                                                    aria-hidden="true"
+                                                                    className="euiBetaBadge__icon"
+                                                                    size="m"
+                                                                    type="popout"
+                                                                  >
+                                                                    <div
+                                                                      aria-hidden="true"
+                                                                      className="euiBetaBadge__icon"
+                                                                      data-euiicon-type="popout"
+                                                                      size="m"
+                                                                    />
+                                                                  </EuiIcon>
+                                                                </span>
+                                                              </span>
+                                                            </EuiToolTip>
+                                                          </EuiBetaBadge>
+                                                        </span>
+                                                        <div
+                                                          className="euiKeyPadMenuItem__icon"
+                                                        >
+                                                          <VisTypeIcon>
+                                                            <EuiIcon
+                                                              color="secondary"
+                                                              size="l"
+                                                              type="empty"
+                                                            >
+                                                              <div
+                                                                color="secondary"
+                                                                data-euiicon-type="empty"
+                                                                size="l"
+                                                              />
+                                                            </EuiIcon>
+                                                          </VisTypeIcon>
+                                                        </div>
+                                                        <p
+                                                          className="euiKeyPadMenuItem__label"
+                                                        >
+                                                          <span
+                                                            data-test-subj="visTypeTitle"
+                                                          >
+                                                            Vis with alias Url
+                                                          </span>
+                                                        </p>
+                                                      </div>
+                                                    </button>
+                                                  </EuiKeyPadMenuItem>
+                                                </li>
+                                                <li
+                                                  key=".$visWithSearch"
+                                                >
+                                                  <EuiKeyPadMenuItem
+                                                    aria-describedby="visTypeDescription-visWithSearch"
+                                                    className="visNewVisDialog__type"
+                                                    data-test-subj="visType-visWithSearch"
+                                                    data-vis-stage="production"
+                                                    disabled={false}
+                                                    key="visWithSearch"
+                                                    label={
+                                                      <span
+                                                        data-test-subj="visTypeTitle"
+                                                      >
+                                                        Vis with search
+                                                      </span>
+                                                    }
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    onMouseEnter={[Function]}
+                                                    onMouseLeave={[Function]}
+                                                    role="menuitem"
+                                                  >
+                                                    <button
+                                                      aria-describedby="visTypeDescription-visWithSearch"
+                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
+                                                      data-test-subj="visType-visWithSearch"
+                                                      data-vis-stage="production"
+                                                      disabled={false}
+                                                      onBlur={[Function]}
+                                                      onClick={[Function]}
+                                                      onFocus={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                      role="menuitem"
+                                                      type="button"
+                                                    >
+                                                      <div
+                                                        className="euiKeyPadMenuItem__inner"
+                                                      >
+                                                        <div
+                                                          className="euiKeyPadMenuItem__icon"
+                                                        >
+                                                          <VisTypeIcon>
+                                                            <EuiIcon
+                                                              color="secondary"
+                                                              size="l"
+                                                              type="empty"
+                                                            >
+                                                              <div
+                                                                color="secondary"
+                                                                data-euiicon-type="empty"
+                                                                size="l"
+                                                              />
+                                                            </EuiIcon>
+                                                          </VisTypeIcon>
+                                                        </div>
+                                                        <p
+                                                          className="euiKeyPadMenuItem__label"
+                                                        >
+                                                          <span
+                                                            data-test-subj="visTypeTitle"
+                                                          >
+                                                            Vis with search
+                                                          </span>
+                                                        </p>
+                                                      </div>
+                                                    </button>
+                                                  </EuiKeyPadMenuItem>
+                                                </li>
+                                              </ul>
+                                            </EuiKeyPadMenu>
+                                          </div>
+                                        </EuiFlexItem>
+                                      </div>
+                                    </EuiFlexGroup>
                                   </div>
-                                </EuiText>
-                              </NewVisHelp>
-                            </div>
-                          </EuiFlexItem>
-                        </div>
-                      </EuiFlexGroup>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  className="visNewVisDialog__description"
+                                  grow={false}
+                                >
+                                  <div
+                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                  >
+                                    <EuiTitle
+                                      size="s"
+                                    >
+                                      <h2
+                                        className="euiTitle euiTitle--small"
+                                      >
+                                        <FormattedMessage
+                                          defaultMessage="Select a visualization type"
+                                          id="visualizations.newVisWizard.selectVisType"
+                                          values={Object {}}
+                                        >
+                                          Select a visualization type
+                                        </FormattedMessage>
+                                      </h2>
+                                    </EuiTitle>
+                                    <EuiSpacer
+                                      size="m"
+                                    >
+                                      <div
+                                        className="euiSpacer euiSpacer--m"
+                                      />
+                                    </EuiSpacer>
+                                    <NewVisHelp
+                                      onPromotionClicked={[Function]}
+                                      promotedTypes={Array []}
+                                    >
+                                      <EuiText>
+                                        <div
+                                          className="euiText euiText--medium"
+                                        >
+                                          <p>
+                                            <FormattedMessage
+                                              defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                              id="visualizations.newVisWizard.helpText"
+                                              values={Object {}}
+                                            >
+                                              Start creating your visualization by selecting a type for that visualization.
+                                            </FormattedMessage>
+                                          </p>
+                                        </div>
+                                      </EuiText>
+                                    </NewVisHelp>
+                                  </div>
+                                </EuiFlexItem>
+                              </div>
+                            </EuiFlexGroup>
+                          </div>
+                        </TypeSelection>
+                      </div>
                     </div>
-                  </TypeSelection>
-                </div>
-              </div>
-            </div>
-            <div
-              data-focus-guard={true}
-              style={
-                Object {
-                  "height": "0px",
-                  "left": "1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "fixed",
-                  "top": "1px",
-                  "width": "1px",
+                  </div>
+                </ForwardRef>
+                <div
+                  data-focus-guard={true}
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+              </ForwardRef>
+              <RequireSideCar
+                noIsolation={true}
+                setLockProps={[Function]}
+                sideCar={
+                  Object {
+                    "assignMedium": [Function],
+                    "assignSyncMedium": [Function],
+                    "options": Object {
+                      "async": true,
+                      "ssr": false,
+                    },
+                    "read": [Function],
+                    "useMedium": [Function],
+                  }
                 }
-              }
-              tabIndex={0}
-            />
-          </FocusLock>
+              >
+                <SideCar
+                  noIsolation={true}
+                  setLockProps={[Function]}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
+                  }
+                >
+                  <Effect
+                    noIsolation={true}
+                    setLockProps={[Function]}
+                  >
+                    <Component>
+                      <Sheet
+                        styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                      />
+                    </Component>
+                  </Effect>
+                </SideCar>
+              </RequireSideCar>
+            </ForwardRef>
+          </ForwardRef>
         </EuiFocusTrap>
       </EuiModal>
     </Portal>
diff --git a/test/functional/apps/dashboard/dashboard_filter_bar.js b/test/functional/apps/dashboard/dashboard_filter_bar.js
index 273779a42d3f9..cbef274b78e93 100644
--- a/test/functional/apps/dashboard/dashboard_filter_bar.js
+++ b/test/functional/apps/dashboard/dashboard_filter_bar.js
@@ -67,7 +67,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('uses default index pattern on an empty dashboard', async () => {
         await testSubjects.click('addFilter');
-        await dashboardExpect.fieldSuggestions(['bytes']);
+        await dashboardExpect.fieldSuggestions(['agent']);
         await filterBar.ensureFieldEditorModalIsClosed();
       });
 
diff --git a/test/functional/apps/visualize/input_control_vis/chained_controls.js b/test/functional/apps/visualize/input_control_vis/chained_controls.js
index 89cca7dc7827e..e1a58e1da34f3 100644
--- a/test/functional/apps/visualize/input_control_vis/chained_controls.js
+++ b/test/functional/apps/visualize/input_control_vis/chained_controls.js
@@ -39,7 +39,7 @@ export default function ({ getService, getPageObjects }) {
 
     it('should disable child control when parent control is not set', async () => {
       const parentControlMenu = await comboBox.getOptionsList('listControlSelect0');
-      expect(parentControlMenu.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU,US');
+      expect(parentControlMenu.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU');
 
       const childControlInput = await find.byCssSelector('[data-test-subj="inputControl1"] input');
       const isDisabled = await childControlInput.getAttribute('disabled');
diff --git a/test/functional/apps/visualize/input_control_vis/dynamic_options.js b/test/functional/apps/visualize/input_control_vis/dynamic_options.js
index b19f64511a23b..400be471be4b6 100644
--- a/test/functional/apps/visualize/input_control_vis/dynamic_options.js
+++ b/test/functional/apps/visualize/input_control_vis/dynamic_options.js
@@ -34,13 +34,13 @@ export default function ({ getService, getPageObjects }) {
 
       it('should fetch new options when string field is filtered', async () => {
         const initialOptions = await comboBox.getOptionsList('listControlSelect0');
-        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU,US');
+        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU');
 
         await comboBox.filterOptionsList('listControlSelect0', 'R');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const updatedOptions = await comboBox.getOptionsList('listControlSelect0');
-        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RU,RW,TR');
+        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RU,RW');
       });
 
       it('should not fetch new options when non-string is filtered', async () => {
@@ -74,13 +74,13 @@ export default function ({ getService, getPageObjects }) {
 
       it('should fetch new options when string field is filtered', async () => {
         const initialOptions = await comboBox.getOptionsList('listControlSelect1');
-        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,MX,NG,PK,US');
+        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,MX,NG,PK');
 
         await comboBox.filterOptionsList('listControlSelect1', 'R');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const updatedOptions = await comboBox.getOptionsList('listControlSelect1');
-        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RS,RU,TR');
+        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RS,RU');
       });
     });
   });
diff --git a/test/functional/page_objects/discover_page.ts b/test/functional/page_objects/discover_page.ts
index c558d9e2d8a31..5a224d930ee42 100644
--- a/test/functional/page_objects/discover_page.ts
+++ b/test/functional/page_objects/discover_page.ts
@@ -332,6 +332,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider
 
     public async selectIndexPattern(indexPattern: string) {
       await testSubjects.click('indexPattern-switch-link');
+      await find.setValue('[data-test-subj="indexPattern-switcher"] input', indexPattern);
       await find.clickByCssSelector(
         `[data-test-subj="indexPattern-switcher"] [title="${indexPattern}"]`
       );
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 f3e5520a14fe2..b04fbc2bb2136 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
index b9c5b3bc5b836..e4a66fe47d8f2 100644
--- a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "react": "^16.12.0"
   },
   "scripts": {
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 95fafdf221c64..0e560dd7be7c3 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/x-pack/package.json b/x-pack/package.json
index 2b52646e0f748..42fa74a3bc84e 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -205,7 +205,7 @@
     "@elastic/apm-rum-react": "^1.2.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.3.0",
     "@elastic/node-crypto": "1.2.1",
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index 0589fce727115..40522edc21b52 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -104,16 +104,15 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
                     className="euiPopover__anchor"
                   >
                     <button
-                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiButtonEmpty__content"
+                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                       >
                         <div
-                          aria-hidden="true"
-                          className="euiButtonEmpty__icon"
+                          className="euiButtonContent__icon"
                           data-euiicon-type="arrowDown"
                           size="m"
                         />
@@ -521,16 +520,15 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     className="euiPopover__anchor"
                   >
                     <button
-                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiButtonEmpty__content"
+                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                       >
                         <div
-                          aria-hidden="true"
-                          className="euiButtonEmpty__icon"
+                          className="euiButtonContent__icon"
                           data-euiicon-type="arrowDown"
                           size="m"
                         />
@@ -1727,14 +1725,14 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     aria-controls="generated-id"
                     aria-current={true}
                     aria-label="Page 1 of 1"
-                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-0"
                     disabled={true}
                     onClick={[Function]}
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
index e46da26f7dcb0..281acf824b5c3 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
@@ -104,11 +104,10 @@ NodeList [
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    class="euiButton__icon"
+                    class="euiButtonContent__icon"
                     data-euiicon-type="help"
                   />
                   <span
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
index 42c863e0accda..1fa440ebb794c 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionActionMenu component should match the snapshot 1`] = `
-<div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
   <div
     class="euiPopover euiPopover--anchorDownRight"
     id="transactionActionMenu"
@@ -10,15 +13,14 @@ exports[`TransactionActionMenu component should match the snapshot 1`] = `
       class="euiPopover__anchor"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--iconRight"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
         >
           <div
-            aria-hidden="true"
-            class="euiButtonEmpty__icon"
+            class="euiButtonContent__icon"
             data-euiicon-type="arrowDown"
           />
           <span
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
index 2973103d421a9..9cc6643b75ac1 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
@@ -34,18 +34,16 @@ exports[`Storyshots renderers/TimeFilter default 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -122,18 +120,16 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -250,18 +246,16 @@ exports[`Storyshots renderers/TimeFilter with commonlyUsedRanges 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -338,18 +332,16 @@ exports[`Storyshots renderers/TimeFilter with dateFormat 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -426,18 +418,16 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
index 1b8f1480759f6..4f44c0cf85f17 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
@@ -36,6 +36,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasAssetManager canvasModal--fixedSize"
@@ -175,6 +180,7 @@ Array [
               className="euiFlexItem"
             >
               <progress
+                aria-hidden={false}
                 aria-labelledby="CanvasAssetManagerLabel"
                 className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
                 max={25000}
@@ -198,7 +204,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
@@ -265,6 +271,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasAssetManager canvasModal--fixedSize"
@@ -714,6 +725,7 @@ Array [
               className="euiFlexItem"
             >
               <progress
+                aria-hidden={false}
                 aria-labelledby="CanvasAssetManagerLabel"
                 className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
                 max={25000}
@@ -737,7 +749,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
index 7fc5413938d1b..0467161c58c34 100644
--- a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
@@ -36,6 +36,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -244,7 +249,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
                   onClick={[Function]}
                 >
                   <div
@@ -297,7 +302,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -317,7 +322,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -386,6 +391,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -594,7 +604,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -650,7 +660,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -670,7 +680,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -739,6 +749,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -948,7 +963,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
                   onClick={[Function]}
                 >
                   <div
@@ -1001,7 +1016,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -1021,7 +1036,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -1090,6 +1105,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -1297,7 +1317,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
                   onClick={[Function]}
                 >
                   <div
@@ -1350,7 +1370,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -1370,7 +1390,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
diff --git a/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot b/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot
index 0b0e0cb28953c..fb9b465cea813 100644
--- a/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots components/Elements/ElementCard with click handler 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div
@@ -61,7 +61,7 @@ exports[`Storyshots components/Elements/ElementCard with image 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--leftAligned canvasElementCard"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
     onClick={[Function]}
   >
     <div
@@ -110,7 +110,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div
@@ -277,7 +277,7 @@ exports[`Storyshots components/Elements/ElementCard with title and description 1
   }
 >
   <div
-    className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div
diff --git a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
index d59d03578a363..a40265f0353e7 100644
--- a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
@@ -41,6 +41,11 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiFlyout euiFlyout--small"
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot
index 1c506819df1fb..f85fb7f18ce62 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot
@@ -15,7 +15,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
@@ -121,7 +121,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
@@ -227,7 +227,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
index 04b2184f27462..fcc22cbe78134 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
@@ -36,6 +36,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasModal--fixedSize"
@@ -158,7 +163,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
@@ -225,6 +230,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasModal--fixedSize"
@@ -311,7 +321,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -417,7 +427,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -523,7 +533,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -638,7 +648,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
@@ -705,6 +715,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasModal--fixedSize"
@@ -806,7 +821,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -921,7 +936,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
index ad236e701ceb0..3d688acbf7d76 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
@@ -281,11 +281,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorBold"
                     size="m"
                   />
@@ -315,11 +314,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorItalic"
                     size="m"
                   />
@@ -349,11 +347,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorUnderline"
                     size="m"
                   />
@@ -395,11 +392,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignLeft"
                     size="m"
                   />
@@ -429,11 +425,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignCenter"
                     size="m"
                   />
@@ -463,11 +458,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignRight"
                     size="m"
                   />
@@ -768,11 +762,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorBold"
                     size="m"
                   />
@@ -802,11 +795,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorItalic"
                     size="m"
                   />
@@ -836,11 +828,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorUnderline"
                     size="m"
                   />
@@ -882,11 +873,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignLeft"
                     size="m"
                   />
@@ -916,11 +906,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignCenter"
                     size="m"
                   />
@@ -950,11 +939,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignRight"
                     size="m"
                   />
diff --git a/x-pack/plugins/canvas/public/components/toolbar/__stories__/__snapshots__/toolbar.stories.storyshot b/x-pack/plugins/canvas/public/components/toolbar/__stories__/__snapshots__/toolbar.stories.storyshot
index eec0de3c784f1..96f9a9ae183c8 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/__stories__/__snapshots__/toolbar.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/toolbar/__stories__/__snapshots__/toolbar.stories.storyshot
@@ -19,11 +19,10 @@ exports[`Storyshots components/Toolbar element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              className="euiButtonEmpty__icon"
+              className="euiButtonContent__icon"
               data-euiicon-type="grid"
               size="m"
             />
@@ -65,7 +64,7 @@ exports[`Storyshots components/Toolbar element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <span
               className="euiButtonEmpty__text"
@@ -106,11 +105,10 @@ exports[`Storyshots components/Toolbar element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              className="euiButtonEmpty__icon"
+              className="euiButtonContent__icon"
               data-euiicon-type="editorCodeBlock"
               size="m"
             />
@@ -146,11 +144,10 @@ exports[`Storyshots components/Toolbar no element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              className="euiButtonEmpty__icon"
+              className="euiButtonContent__icon"
               data-euiicon-type="grid"
               size="m"
             />
@@ -192,7 +189,7 @@ exports[`Storyshots components/Toolbar no element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <span
               className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/delete_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/delete_var.stories.storyshot
index 64f8cba665c15..aed7979fe7237 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/delete_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/delete_var.stories.storyshot
@@ -67,11 +67,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="trash"
                 size="m"
               />
@@ -92,7 +91,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
index 65043e13e5143..ce3084ea4fbb4 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
@@ -253,7 +253,7 @@ Array [
                   type="button"
                 >
                   <span
-                    className="euiButton__content"
+                    className="euiButtonContent euiButton__content"
                   >
                     <span
                       className="euiButton__text"
@@ -282,7 +282,7 @@ Array [
                   type="button"
                 >
                   <span
-                    className="euiButton__content"
+                    className="euiButtonContent euiButton__content"
                   >
                     <span
                       className="euiButton__text"
@@ -312,11 +312,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -337,7 +336,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
@@ -614,11 +613,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -639,7 +637,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
@@ -916,11 +914,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -941,7 +938,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
@@ -1188,17 +1185,16 @@ Array [
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            className="euiButton euiButton--secondary euiButton--small euiButton--fill"
+            className="euiButton euiButton--secondary euiButton--small euiButton--fill euiButton-isDisabled"
             disabled={true}
             onClick={[Function]}
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -1219,7 +1215,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
index 42c59d41dca62..032553d015909 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
@@ -21,7 +21,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] =
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -55,7 +55,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 3+ elements selected 1`] =
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -89,7 +89,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu clipboard data exists 1`]
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -123,7 +123,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu default 1`] = `
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -157,7 +157,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single element selected 1`
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -191,7 +191,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single grouped element sel
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
index 82ed28acced7d..a5eec8e074e76 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
@@ -21,11 +21,10 @@ exports[`Storyshots components/WorkpadHeader/ElementMenu default 1`] = `
       type="button"
     >
       <span
-        className="euiButton__content"
+        className="euiButtonContent euiButton__content"
       >
         <div
-          aria-hidden="true"
-          className="euiButton__icon"
+          className="euiButtonContent__icon"
           data-euiicon-type="plusInCircle"
           size="m"
         />
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot
index 9ad2714a78ec9..517a93f4e6db3 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot
@@ -28,7 +28,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
       type="button"
     >
       <span
-        className="euiButton__content"
+        className="euiButtonContent euiButton__content"
       >
         <span
           className="euiButton__text"
@@ -68,11 +68,10 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
         type="button"
       >
         <span
-          className="euiButton__content"
+          className="euiButtonContent euiButton__content"
         >
           <div
-            aria-hidden="true"
-            className="euiButton__icon"
+            className="euiButtonContent__icon"
             data-euiicon-type="copy"
             size="m"
           />
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
index 1610ef5fd1fac..bd0bb7159d147 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
@@ -21,7 +21,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu default 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
index eb45f97452ae1..fb85e73757b70 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
@@ -20,7 +20,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu edit mode 1`] = `
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -53,7 +53,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -86,7 +86,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`]
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -119,7 +119,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with refresh enabled 1`] =
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
index 97d13dcd69830..4941215def43b 100644
--- a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
@@ -63,16 +63,15 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
             className="euiPopover__anchor"
           >
             <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--hasIcon"
+              className="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
               onClick={[Function]}
               type="button"
             >
               <span
-                className="euiButtonEmpty__content"
+                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  className="euiButtonEmpty__icon"
+                  className="euiButtonContent__icon"
                   data-euiicon-type="arrowDown"
                   size="m"
                 />
@@ -128,16 +127,15 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   className="euiPopover__anchor"
                 >
                   <button
-                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
                     onClick={[Function]}
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                     >
                       <div
-                        aria-hidden="true"
-                        className="euiButtonEmpty__icon"
+                        className="euiButtonContent__icon"
                         data-euiicon-type="arrowDown"
                         size="m"
                       />
@@ -281,7 +279,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"
@@ -402,7 +400,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"
@@ -537,14 +535,14 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
             <button
               aria-current={true}
               aria-label="Page 1 of 1"
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
               data-test-subj="pagination-button-0"
               disabled={true}
               onClick={[Function]}
               type="button"
             >
               <span
-                className="euiButtonEmpty__content"
+                className="euiButtonContent euiButtonEmpty__content"
               >
                 <span
                   className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
index 9de76f984e453..1f53fbce6537f 100644
--- a/x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap
+++ b/x-pack/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; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><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; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent 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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><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; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent 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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><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; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent 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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><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; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent 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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><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; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent 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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
index 81e75ff5ee0d9..e0970b57ed971 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
@@ -1398,7 +1398,7 @@ exports[`Storyshots shareables/Canvas component 1`] = `
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"
@@ -2880,7 +2880,7 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"
@@ -3178,7 +3178,7 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
index 991d5d6ce42f0..6d906abebdb52 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap
@@ -7,5 +7,5 @@ exports[`<App /> App renders properly 1`] = `
 </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; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><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; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></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\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></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\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent 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\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></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\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div>"
 `;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
index 6ff39b723a49a..2d3a9c460272c 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
@@ -1351,7 +1351,7 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"
@@ -1603,7 +1603,7 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/page_controls.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/page_controls.stories.storyshot
index 18eedea470c38..e58d4cccf3959 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/page_controls.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/page_controls.stories.storyshot
@@ -46,7 +46,7 @@ exports[`Storyshots shareables/Footer/PageControls component 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"
@@ -140,7 +140,7 @@ exports[`Storyshots shareables/Footer/PageControls contextual: austin 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"
@@ -234,7 +234,7 @@ exports[`Storyshots shareables/Footer/PageControls contextual: hello 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/autoplay_settings.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/autoplay_settings.stories.storyshot
index 201592df65a20..0940cd2d2693c 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/autoplay_settings.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/autoplay_settings.stories.storyshot
@@ -145,7 +145,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
                 type="submit"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -308,7 +308,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
                 type="submit"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -471,7 +471,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
                 type="submit"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
index b8bbdc5f0a6dc..04cc3e0f383b0 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
@@ -338,7 +338,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                                 type="submit"
                               >
                                 <span
-                                  class="euiButton__content"
+                                  class="euiButtonContent euiButton__content"
                                 >
                                   <span
                                     class="euiButton__text"
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/components/__snapshots__/policy_table.test.js.snap b/x-pack/plugins/index_lifecycle_management/__jest__/components/__snapshots__/policy_table.test.js.snap
index 5edc5a9343fc3..ad3e0956fcf25 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/components/__snapshots__/policy_table.test.js.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/components/__snapshots__/policy_table.test.js.snap
@@ -97,11 +97,10 @@ exports[`policy table should show empty state when there are not any policies 1`
           type="button"
         >
           <span
-            class="euiButton__content"
+            class="euiButtonContent euiButton__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="plusInCircle"
             />
             <span
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx
index f9a74ee477d57..560c48b2155ee 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx
@@ -9,11 +9,16 @@ import { IndexPatternPrivateState } from './types';
 import { IndexPatternLayerPanelProps, LayerPanel } from './layerpanel';
 import { shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
 import { ShallowWrapper } from 'enzyme';
-import { EuiSelectable, EuiSelectableList } from '@elastic/eui';
+import { EuiSelectable } from '@elastic/eui';
 import { ChangeIndexPattern } from './change_indexpattern';
 
 jest.mock('./state_helpers');
 
+interface IndexPatternPickerOption {
+  label: string;
+  checked?: 'on' | 'off';
+}
+
 const initialState: IndexPatternPrivateState = {
   indexPatternRefs: [
     { id: '1', title: 'my-fake-index-pattern' },
@@ -187,9 +192,9 @@ describe('Layer Data Panel', () => {
   }
 
   function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) {
-    const options: Array<{ label: string; checked?: 'on' | 'off' }> = getIndexPatternPickerOptions(
+    const options: IndexPatternPickerOption[] = getIndexPatternPickerOptions(
       instance
-    ).map((option) =>
+    ).map((option: IndexPatternPickerOption) =>
       option.label === selectedLabel
         ? { ...option, checked: 'on' }
         : { ...option, checked: undefined }
@@ -198,17 +203,17 @@ describe('Layer Data Panel', () => {
   }
 
   function getIndexPatternPickerOptions(instance: ShallowWrapper) {
-    return getIndexPatternPickerList(instance).dive().find(EuiSelectableList).prop('options');
+    return getIndexPatternPickerList(instance).prop('options');
   }
 
   it('should list all index patterns', () => {
     const instance = shallow(<LayerPanel {...defaultProps} />);
 
-    expect(getIndexPatternPickerOptions(instance)!.map((option) => option.label)).toEqual([
-      'my-fake-index-pattern',
-      'my-fake-restricted-pattern',
-      'my-compatible-pattern',
-    ]);
+    expect(
+      getIndexPatternPickerOptions(instance)!.map(
+        (option: IndexPatternPickerOption) => option.label
+      )
+    ).toEqual(['my-fake-index-pattern', 'my-fake-restricted-pattern', 'my-compatible-pattern']);
   });
 
   it('should switch data panel to target index pattern', () => {
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap
index 28ce3c6c07501..768c7175e6edc 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
+exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
 
-exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
+exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap
index 096f26eb22fe3..db37bc6cb98c4 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RequestTrialExtension component should display when enterprise license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when enterprise license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap
index 0a5656aa266bc..24598635b28e3 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RevertToBasic component should display when license is about to expire 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when license is about to expire 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
 
-exports[`RevertToBasic component should display when license is expired 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when license is expired 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
 
-exports[`RevertToBasic component should display when trial is active 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when trial is active 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap
index 9da8bb958941b..24872a888b090 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StartTrial component when trial is allowed display for basic license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed display for basic license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for expired enterprise license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for expired enterprise license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for expired platinum license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for expired platinum license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for gold license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for gold license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
index f0feb826f956d..32e4d116f0a06 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
@@ -297,11 +297,15 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                           class="euiOverlayMask euiOverlayMask--aboveHeader"
                         >
                           <div
+                            aria-hidden="true"
+                            data-aria-hidden="true"
                             data-focus-guard="true"
                             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                             tabindex="0"
                           />
                           <div
+                            aria-hidden="true"
+                            data-aria-hidden="true"
                             data-focus-guard="true"
                             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                             tabindex="1"
@@ -375,7 +379,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                     type="button"
                                   >
                                     <span
-                                      class="euiButtonEmpty__content"
+                                      class="euiButtonContent euiButtonEmpty__content"
                                     >
                                       <span
                                         class="euiButtonEmpty__text"
@@ -390,7 +394,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                     type="button"
                                   >
                                     <span
-                                      class="euiButton__content"
+                                      class="euiButtonContent euiButton__content"
                                     >
                                       <span
                                         class="euiButton__text"
@@ -404,6 +408,8 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                             </div>
                           </div>
                           <div
+                            aria-hidden="true"
+                            data-aria-hidden="true"
                             data-focus-guard="true"
                             style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                             tabindex="0"
@@ -441,165 +447,93 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                           onClose={[Function]}
                         >
                           <EuiFocusTrap>
-                            <FocusLock
-                              as="div"
-                              autoFocus={true}
-                              disabled={false}
-                              lockProps={
-                                Object {
-                                  "style": undefined,
-                                }
-                              }
-                              noFocusGuards={false}
-                              persistentFocus={false}
+                            <ForwardRef
+                              enabled={true}
+                              noIsolation={true}
                               returnFocus={true}
+                              scrollLock={false}
                             >
-                              <div
-                                data-focus-guard={true}
-                                key="guard-first"
-                                style={
-                                  Object {
-                                    "height": "0px",
-                                    "left": "1px",
-                                    "overflow": "hidden",
-                                    "padding": 0,
-                                    "position": "fixed",
-                                    "top": "1px",
-                                    "width": "1px",
-                                  }
-                                }
-                                tabIndex={0}
-                              />
-                              <div
-                                data-focus-guard={true}
-                                key="guard-nearest"
-                                style={
-                                  Object {
-                                    "height": "0px",
-                                    "left": "1px",
-                                    "overflow": "hidden",
-                                    "padding": 0,
-                                    "position": "fixed",
-                                    "top": "1px",
-                                    "width": "1px",
-                                  }
-                                }
-                                tabIndex={1}
-                              />
-                              <div
-                                data-focus-lock-disabled={false}
-                                onBlur={[Function]}
-                                onFocus={[Function]}
+                              <ForwardRef
+                                enabled={true}
+                                noIsolation={true}
+                                returnFocus={true}
+                                scrollLock={false}
+                                sideCar={[Function]}
                               >
-                                <SideEffect(FocusWatcher)
+                                <ForwardRef
+                                  as={
+                                    Object {
+                                      "$$typeof": Symbol(react.forward_ref),
+                                      "classNames": Object {
+                                        "fullWidth": "width-before-scroll-bar",
+                                        "zeroRight": "right-scroll-bar-position",
+                                      },
+                                      "defaultProps": Object {
+                                        "enabled": true,
+                                        "inert": false,
+                                        "removeScrollBar": true,
+                                      },
+                                      "render": [Function],
+                                    }
+                                  }
                                   autoFocus={true}
+                                  crossFrame={true}
                                   disabled={false}
-                                  observed={
-                                    <div
-                                      data-focus-lock-disabled="false"
-                                    >
-                                      <div
-                                        class="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                                        tabindex="0"
-                                      >
-                                        <button
-                                          aria-label="Closes this modal window"
-                                          class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                          type="button"
-                                        >
-                                          <div
-                                            aria-hidden="true"
-                                            class="euiButtonIcon__icon"
-                                            data-euiicon-type="cross"
-                                          />
-                                        </button>
-                                        <div
-                                          class="euiModal__flex"
-                                        >
-                                          <div
-                                            class="euiModalHeader"
-                                          >
-                                            <div
-                                              class="euiModalHeader__title"
-                                              data-test-subj="confirmModalTitleText"
-                                            >
-                                              Confirm License Upload
-                                            </div>
-                                          </div>
-                                          <div
-                                            class="euiModalBody"
-                                          >
-                                            <div
-                                              class="euiModalBody__overflow"
-                                            >
-                                              <div
-                                                class="euiText euiText--medium"
-                                                data-test-subj="confirmModalBodyText"
-                                              >
-                                                <div>
-                                                  <div
-                                                    class="euiText euiText--medium"
-                                                  >
-                                                    Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
-                                                  </div>
-                                                  <div
-                                                    class="euiText euiText--medium"
-                                                  >
-                                                    <ul>
-                                                      <li>
-                                                        Watcher will be disabled
-                                                      </li>
-                                                    </ul>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <div
-                                            class="euiModalFooter"
-                                          >
-                                            <button
-                                              class="euiButtonEmpty euiButtonEmpty--primary"
-                                              data-test-subj="confirmModalCancelButton"
-                                              type="button"
-                                            >
-                                              <span
-                                                class="euiButtonEmpty__content"
-                                              >
-                                                <span
-                                                  class="euiButtonEmpty__text"
-                                                >
-                                                  Cancel
-                                                </span>
-                                              </span>
-                                            </button>
-                                            <button
-                                              class="euiButton euiButton--primary euiButton--fill"
-                                              data-test-subj="confirmModalConfirmButton"
-                                              type="button"
-                                            >
-                                              <span
-                                                class="euiButton__content"
-                                              >
-                                                <span
-                                                  class="euiButton__text"
-                                                >
-                                                  Confirm
-                                                </span>
-                                              </span>
-                                            </button>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
+                                  lockProps={
+                                    Object {
+                                      "allowPinchZoom": undefined,
+                                      "enabled": false,
+                                      "inert": undefined,
+                                      "onMouseDown": [Function],
+                                      "onTouchStart": [Function],
+                                      "shards": undefined,
+                                      "sideCar": [Function],
+                                    }
                                   }
+                                  noFocusGuards={false}
                                   onActivation={[Function]}
                                   onDeactivation={[Function]}
                                   persistentFocus={false}
+                                  returnFocus={true}
+                                  sideCar={[Function]}
                                 >
-                                  <FocusWatcher
+                                  <div
+                                    data-focus-guard={true}
+                                    key="guard-first"
+                                    style={
+                                      Object {
+                                        "height": "0px",
+                                        "left": "1px",
+                                        "overflow": "hidden",
+                                        "padding": 0,
+                                        "position": "fixed",
+                                        "top": "1px",
+                                        "width": "1px",
+                                      }
+                                    }
+                                    tabIndex={0}
+                                  />
+                                  <div
+                                    data-focus-guard={true}
+                                    key="guard-nearest"
+                                    style={
+                                      Object {
+                                        "height": "0px",
+                                        "left": "1px",
+                                        "overflow": "hidden",
+                                        "padding": 0,
+                                        "position": "fixed",
+                                        "top": "1px",
+                                        "width": "1px",
+                                      }
+                                    }
+                                    tabIndex={1}
+                                  />
+                                  <RequireSideCar
                                     autoFocus={true}
+                                    crossFrame={true}
                                     disabled={false}
+                                    id={Object {}}
                                     observed={
                                       <div
                                         data-focus-lock-disabled="false"
@@ -670,7 +604,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                                 type="button"
                                               >
                                                 <span
-                                                  class="euiButtonEmpty__content"
+                                                  class="euiButtonContent euiButtonEmpty__content"
                                                 >
                                                   <span
                                                     class="euiButtonEmpty__text"
@@ -685,7 +619,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                                 type="button"
                                               >
                                                 <span
-                                                  class="euiButton__content"
+                                                  class="euiButtonContent euiButton__content"
                                                 >
                                                   <span
                                                     class="euiButton__text"
@@ -702,195 +636,654 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                     onActivation={[Function]}
                                     onDeactivation={[Function]}
                                     persistentFocus={false}
-                                  />
-                                </SideEffect(FocusWatcher)>
-                                <div
-                                  className="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                                  onKeyDown={[Function]}
-                                  tabIndex={0}
-                                >
-                                  <EuiI18n
-                                    default="Closes this modal window"
-                                    token="euiModal.closeModal"
+                                    returnFocus={[Function]}
+                                    shards={Array []}
+                                    sideCar={
+                                      Object {
+                                        "assignMedium": [Function],
+                                        "assignSyncMedium": [Function],
+                                        "options": Object {
+                                          "async": true,
+                                          "ssr": false,
+                                        },
+                                        "read": [Function],
+                                        "useMedium": [Function],
+                                      }
+                                    }
                                   >
-                                    <EuiButtonIcon
-                                      aria-label="Closes this modal window"
-                                      className="euiModal__closeIcon"
-                                      color="text"
-                                      iconType="cross"
-                                      onClick={[Function]}
-                                    >
-                                      <button
-                                        aria-label="Closes this modal window"
-                                        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <EuiIcon
-                                          aria-hidden="true"
-                                          className="euiButtonIcon__icon"
-                                          size="m"
-                                          type="cross"
+                                    <SideCar
+                                      autoFocus={true}
+                                      crossFrame={true}
+                                      disabled={false}
+                                      id={Object {}}
+                                      observed={
+                                        <div
+                                          data-focus-lock-disabled="false"
                                         >
                                           <div
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            data-euiicon-type="cross"
-                                            size="m"
-                                          />
-                                        </EuiIcon>
-                                      </button>
-                                    </EuiButtonIcon>
-                                  </EuiI18n>
-                                  <div
-                                    className="euiModal__flex"
-                                  >
-                                    <EuiModalHeader>
-                                      <div
-                                        className="euiModalHeader"
-                                      >
-                                        <EuiModalHeaderTitle
-                                          data-test-subj="confirmModalTitleText"
-                                        >
+                                            class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                            tabindex="0"
+                                          >
+                                            <button
+                                              aria-label="Closes this modal window"
+                                              class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                              type="button"
+                                            >
+                                              <div
+                                                aria-hidden="true"
+                                                class="euiButtonIcon__icon"
+                                                data-euiicon-type="cross"
+                                              />
+                                            </button>
+                                            <div
+                                              class="euiModal__flex"
+                                            >
+                                              <div
+                                                class="euiModalHeader"
+                                              >
+                                                <div
+                                                  class="euiModalHeader__title"
+                                                  data-test-subj="confirmModalTitleText"
+                                                >
+                                                  Confirm License Upload
+                                                </div>
+                                              </div>
+                                              <div
+                                                class="euiModalBody"
+                                              >
+                                                <div
+                                                  class="euiModalBody__overflow"
+                                                >
+                                                  <div
+                                                    class="euiText euiText--medium"
+                                                    data-test-subj="confirmModalBodyText"
+                                                  >
+                                                    <div>
+                                                      <div
+                                                        class="euiText euiText--medium"
+                                                      >
+                                                        Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                                      </div>
+                                                      <div
+                                                        class="euiText euiText--medium"
+                                                      >
+                                                        <ul>
+                                                          <li>
+                                                            Watcher will be disabled
+                                                          </li>
+                                                        </ul>
+                                                      </div>
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                              </div>
+                                              <div
+                                                class="euiModalFooter"
+                                              >
+                                                <button
+                                                  class="euiButtonEmpty euiButtonEmpty--primary"
+                                                  data-test-subj="confirmModalCancelButton"
+                                                  type="button"
+                                                >
+                                                  <span
+                                                    class="euiButtonContent euiButtonEmpty__content"
+                                                  >
+                                                    <span
+                                                      class="euiButtonEmpty__text"
+                                                    >
+                                                      Cancel
+                                                    </span>
+                                                  </span>
+                                                </button>
+                                                <button
+                                                  class="euiButton euiButton--primary euiButton--fill"
+                                                  data-test-subj="confirmModalConfirmButton"
+                                                  type="button"
+                                                >
+                                                  <span
+                                                    class="euiButtonContent euiButton__content"
+                                                  >
+                                                    <span
+                                                      class="euiButton__text"
+                                                    >
+                                                      Confirm
+                                                    </span>
+                                                  </span>
+                                                </button>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      }
+                                      onActivation={[Function]}
+                                      onDeactivation={[Function]}
+                                      persistentFocus={false}
+                                      returnFocus={[Function]}
+                                      shards={Array []}
+                                      sideCar={
+                                        Object {
+                                          "assignMedium": [Function],
+                                          "assignSyncMedium": [Function],
+                                          "options": Object {
+                                            "async": true,
+                                            "ssr": false,
+                                          },
+                                          "read": [Function],
+                                          "useMedium": [Function],
+                                        }
+                                      }
+                                    >
+                                      <SideEffect(FocusWatcher)
+                                        autoFocus={true}
+                                        crossFrame={true}
+                                        disabled={false}
+                                        id={Object {}}
+                                        observed={
                                           <div
-                                            className="euiModalHeader__title"
-                                            data-test-subj="confirmModalTitleText"
+                                            data-focus-lock-disabled="false"
                                           >
-                                            <FormattedMessage
-                                              defaultMessage="Confirm License Upload"
-                                              id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
-                                              values={Object {}}
+                                            <div
+                                              class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                              tabindex="0"
                                             >
-                                              Confirm License Upload
-                                            </FormattedMessage>
+                                              <button
+                                                aria-label="Closes this modal window"
+                                                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                                type="button"
+                                              >
+                                                <div
+                                                  aria-hidden="true"
+                                                  class="euiButtonIcon__icon"
+                                                  data-euiicon-type="cross"
+                                                />
+                                              </button>
+                                              <div
+                                                class="euiModal__flex"
+                                              >
+                                                <div
+                                                  class="euiModalHeader"
+                                                >
+                                                  <div
+                                                    class="euiModalHeader__title"
+                                                    data-test-subj="confirmModalTitleText"
+                                                  >
+                                                    Confirm License Upload
+                                                  </div>
+                                                </div>
+                                                <div
+                                                  class="euiModalBody"
+                                                >
+                                                  <div
+                                                    class="euiModalBody__overflow"
+                                                  >
+                                                    <div
+                                                      class="euiText euiText--medium"
+                                                      data-test-subj="confirmModalBodyText"
+                                                    >
+                                                      <div>
+                                                        <div
+                                                          class="euiText euiText--medium"
+                                                        >
+                                                          Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                                        </div>
+                                                        <div
+                                                          class="euiText euiText--medium"
+                                                        >
+                                                          <ul>
+                                                            <li>
+                                                              Watcher will be disabled
+                                                            </li>
+                                                          </ul>
+                                                        </div>
+                                                      </div>
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                                <div
+                                                  class="euiModalFooter"
+                                                >
+                                                  <button
+                                                    class="euiButtonEmpty euiButtonEmpty--primary"
+                                                    data-test-subj="confirmModalCancelButton"
+                                                    type="button"
+                                                  >
+                                                    <span
+                                                      class="euiButtonContent euiButtonEmpty__content"
+                                                    >
+                                                      <span
+                                                        class="euiButtonEmpty__text"
+                                                      >
+                                                        Cancel
+                                                      </span>
+                                                    </span>
+                                                  </button>
+                                                  <button
+                                                    class="euiButton euiButton--primary euiButton--fill"
+                                                    data-test-subj="confirmModalConfirmButton"
+                                                    type="button"
+                                                  >
+                                                    <span
+                                                      class="euiButtonContent euiButton__content"
+                                                    >
+                                                      <span
+                                                        class="euiButton__text"
+                                                      >
+                                                        Confirm
+                                                      </span>
+                                                    </span>
+                                                  </button>
+                                                </div>
+                                              </div>
+                                            </div>
                                           </div>
-                                        </EuiModalHeaderTitle>
-                                      </div>
-                                    </EuiModalHeader>
-                                    <EuiModalBody>
-                                      <div
-                                        className="euiModalBody"
+                                        }
+                                        onActivation={[Function]}
+                                        onDeactivation={[Function]}
+                                        persistentFocus={false}
+                                        returnFocus={[Function]}
+                                        shards={Array []}
                                       >
-                                        <div
-                                          className="euiModalBody__overflow"
-                                        >
-                                          <EuiText
-                                            data-test-subj="confirmModalBodyText"
-                                          >
+                                        <FocusWatcher
+                                          autoFocus={true}
+                                          crossFrame={true}
+                                          disabled={false}
+                                          id={Object {}}
+                                          observed={
                                             <div
-                                              className="euiText euiText--medium"
-                                              data-test-subj="confirmModalBodyText"
+                                              data-focus-lock-disabled="false"
                                             >
-                                              <div>
-                                                <EuiText>
+                                              <div
+                                                class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                                tabindex="0"
+                                              >
+                                                <button
+                                                  aria-label="Closes this modal window"
+                                                  class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                                  type="button"
+                                                >
                                                   <div
-                                                    className="euiText euiText--medium"
+                                                    aria-hidden="true"
+                                                    class="euiButtonIcon__icon"
+                                                    data-euiicon-type="cross"
+                                                  />
+                                                </button>
+                                                <div
+                                                  class="euiModal__flex"
+                                                >
+                                                  <div
+                                                    class="euiModalHeader"
                                                   >
-                                                    Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                                    <div
+                                                      class="euiModalHeader__title"
+                                                      data-test-subj="confirmModalTitleText"
+                                                    >
+                                                      Confirm License Upload
+                                                    </div>
                                                   </div>
-                                                </EuiText>
-                                                <EuiText>
                                                   <div
-                                                    className="euiText euiText--medium"
+                                                    class="euiModalBody"
                                                   >
-                                                    <ul>
-                                                      <li
-                                                        key="Watcher will be disabled"
+                                                    <div
+                                                      class="euiModalBody__overflow"
+                                                    >
+                                                      <div
+                                                        class="euiText euiText--medium"
+                                                        data-test-subj="confirmModalBodyText"
                                                       >
-                                                        Watcher will be disabled
-                                                      </li>
-                                                    </ul>
+                                                        <div>
+                                                          <div
+                                                            class="euiText euiText--medium"
+                                                          >
+                                                            Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                                          </div>
+                                                          <div
+                                                            class="euiText euiText--medium"
+                                                          >
+                                                            <ul>
+                                                              <li>
+                                                                Watcher will be disabled
+                                                              </li>
+                                                            </ul>
+                                                          </div>
+                                                        </div>
+                                                      </div>
+                                                    </div>
                                                   </div>
-                                                </EuiText>
+                                                  <div
+                                                    class="euiModalFooter"
+                                                  >
+                                                    <button
+                                                      class="euiButtonEmpty euiButtonEmpty--primary"
+                                                      data-test-subj="confirmModalCancelButton"
+                                                      type="button"
+                                                    >
+                                                      <span
+                                                        class="euiButtonContent euiButtonEmpty__content"
+                                                      >
+                                                        <span
+                                                          class="euiButtonEmpty__text"
+                                                        >
+                                                          Cancel
+                                                        </span>
+                                                      </span>
+                                                    </button>
+                                                    <button
+                                                      class="euiButton euiButton--primary euiButton--fill"
+                                                      data-test-subj="confirmModalConfirmButton"
+                                                      type="button"
+                                                    >
+                                                      <span
+                                                        class="euiButtonContent euiButton__content"
+                                                      >
+                                                        <span
+                                                          class="euiButton__text"
+                                                        >
+                                                          Confirm
+                                                        </span>
+                                                      </span>
+                                                    </button>
+                                                  </div>
+                                                </div>
                                               </div>
                                             </div>
-                                          </EuiText>
-                                        </div>
-                                      </div>
-                                    </EuiModalBody>
-                                    <EuiModalFooter>
+                                          }
+                                          onActivation={[Function]}
+                                          onDeactivation={[Function]}
+                                          persistentFocus={false}
+                                          returnFocus={[Function]}
+                                          shards={Array []}
+                                        />
+                                      </SideEffect(FocusWatcher)>
+                                    </SideCar>
+                                  </RequireSideCar>
+                                  <ForwardRef
+                                    data-focus-lock-disabled={false}
+                                    enabled={false}
+                                    inert={false}
+                                    onBlur={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseDown={[Function]}
+                                    onTouchStart={[Function]}
+                                    removeScrollBar={true}
+                                    sideCar={[Function]}
+                                  >
+                                    <div
+                                      data-focus-lock-disabled={false}
+                                      onBlur={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseDown={[Function]}
+                                      onScrollCapture={[Function]}
+                                      onTouchMoveCapture={[Function]}
+                                      onTouchStart={[Function]}
+                                      onWheelCapture={[Function]}
+                                    >
                                       <div
-                                        className="euiModalFooter"
+                                        className="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                        onKeyDown={[Function]}
+                                        tabIndex={0}
                                       >
-                                        <EuiButtonEmpty
-                                          buttonRef={[Function]}
-                                          data-test-subj="confirmModalCancelButton"
-                                          onClick={[Function]}
+                                        <EuiI18n
+                                          default="Closes this modal window"
+                                          token="euiModal.closeModal"
                                         >
-                                          <button
-                                            className="euiButtonEmpty euiButtonEmpty--primary"
-                                            data-test-subj="confirmModalCancelButton"
+                                          <EuiButtonIcon
+                                            aria-label="Closes this modal window"
+                                            className="euiModal__closeIcon"
+                                            color="text"
+                                            iconType="cross"
                                             onClick={[Function]}
-                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonEmpty__content"
+                                            <button
+                                              aria-label="Closes this modal window"
+                                              className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                              onClick={[Function]}
+                                              type="button"
                                             >
-                                              <span
-                                                className="euiButtonEmpty__text"
+                                              <EuiIcon
+                                                aria-hidden="true"
+                                                className="euiButtonIcon__icon"
+                                                size="m"
+                                                type="cross"
                                               >
-                                                <FormattedMessage
-                                                  defaultMessage="Cancel"
-                                                  id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
-                                                  values={Object {}}
-                                                >
-                                                  Cancel
-                                                </FormattedMessage>
-                                              </span>
-                                            </span>
-                                          </button>
-                                        </EuiButtonEmpty>
-                                        <EuiButton
-                                          buttonRef={[Function]}
-                                          color="primary"
-                                          data-test-subj="confirmModalConfirmButton"
-                                          fill={true}
-                                          onClick={[Function]}
+                                                <div
+                                                  aria-hidden="true"
+                                                  className="euiButtonIcon__icon"
+                                                  data-euiicon-type="cross"
+                                                  size="m"
+                                                />
+                                              </EuiIcon>
+                                            </button>
+                                          </EuiButtonIcon>
+                                        </EuiI18n>
+                                        <div
+                                          className="euiModal__flex"
                                         >
-                                          <button
-                                            className="euiButton euiButton--primary euiButton--fill"
-                                            data-test-subj="confirmModalConfirmButton"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <span
-                                              className="euiButton__content"
+                                          <EuiModalHeader>
+                                            <div
+                                              className="euiModalHeader"
                                             >
-                                              <span
-                                                className="euiButton__text"
+                                              <EuiModalHeaderTitle
+                                                data-test-subj="confirmModalTitleText"
                                               >
-                                                <FormattedMessage
-                                                  defaultMessage="Confirm"
-                                                  id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
-                                                  values={Object {}}
+                                                <div
+                                                  className="euiModalHeader__title"
+                                                  data-test-subj="confirmModalTitleText"
                                                 >
-                                                  Confirm
-                                                </FormattedMessage>
-                                              </span>
-                                            </span>
-                                          </button>
-                                        </EuiButton>
+                                                  <FormattedMessage
+                                                    defaultMessage="Confirm License Upload"
+                                                    id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
+                                                    values={Object {}}
+                                                  >
+                                                    Confirm License Upload
+                                                  </FormattedMessage>
+                                                </div>
+                                              </EuiModalHeaderTitle>
+                                            </div>
+                                          </EuiModalHeader>
+                                          <EuiModalBody>
+                                            <div
+                                              className="euiModalBody"
+                                            >
+                                              <div
+                                                className="euiModalBody__overflow"
+                                              >
+                                                <EuiText
+                                                  data-test-subj="confirmModalBodyText"
+                                                >
+                                                  <div
+                                                    className="euiText euiText--medium"
+                                                    data-test-subj="confirmModalBodyText"
+                                                  >
+                                                    <div>
+                                                      <EuiText>
+                                                        <div
+                                                          className="euiText euiText--medium"
+                                                        >
+                                                          Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
+                                                        </div>
+                                                      </EuiText>
+                                                      <EuiText>
+                                                        <div
+                                                          className="euiText euiText--medium"
+                                                        >
+                                                          <ul>
+                                                            <li
+                                                              key="Watcher will be disabled"
+                                                            >
+                                                              Watcher will be disabled
+                                                            </li>
+                                                          </ul>
+                                                        </div>
+                                                      </EuiText>
+                                                    </div>
+                                                  </div>
+                                                </EuiText>
+                                              </div>
+                                            </div>
+                                          </EuiModalBody>
+                                          <EuiModalFooter>
+                                            <div
+                                              className="euiModalFooter"
+                                            >
+                                              <EuiButtonEmpty
+                                                buttonRef={[Function]}
+                                                data-test-subj="confirmModalCancelButton"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  className="euiButtonEmpty euiButtonEmpty--primary"
+                                                  data-test-subj="confirmModalCancelButton"
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiButtonContent
+                                                    className="euiButtonEmpty__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButtonEmpty__text",
+                                                      }
+                                                    }
+                                                  >
+                                                    <span
+                                                      className="euiButtonContent euiButtonEmpty__content"
+                                                    >
+                                                      <span
+                                                        className="euiButtonEmpty__text"
+                                                      >
+                                                        <FormattedMessage
+                                                          defaultMessage="Cancel"
+                                                          id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
+                                                          values={Object {}}
+                                                        >
+                                                          Cancel
+                                                        </FormattedMessage>
+                                                      </span>
+                                                    </span>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonEmpty>
+                                              <EuiButton
+                                                buttonRef={[Function]}
+                                                color="primary"
+                                                data-test-subj="confirmModalConfirmButton"
+                                                fill={true}
+                                                onClick={[Function]}
+                                              >
+                                                <EuiButtonDisplay
+                                                  color="primary"
+                                                  data-test-subj="confirmModalConfirmButton"
+                                                  element="button"
+                                                  fill={true}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <button
+                                                    className="euiButton euiButton--primary euiButton--fill"
+                                                    data-test-subj="confirmModalConfirmButton"
+                                                    onClick={[Function]}
+                                                    type="button"
+                                                  >
+                                                    <EuiButtonContent
+                                                      className="euiButton__content"
+                                                      iconSide="left"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButton__text",
+                                                        }
+                                                      }
+                                                    >
+                                                      <span
+                                                        className="euiButtonContent euiButton__content"
+                                                      >
+                                                        <span
+                                                          className="euiButton__text"
+                                                        >
+                                                          <FormattedMessage
+                                                            defaultMessage="Confirm"
+                                                            id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
+                                                            values={Object {}}
+                                                          >
+                                                            Confirm
+                                                          </FormattedMessage>
+                                                        </span>
+                                                      </span>
+                                                    </EuiButtonContent>
+                                                  </button>
+                                                </EuiButtonDisplay>
+                                              </EuiButton>
+                                            </div>
+                                          </EuiModalFooter>
+                                        </div>
                                       </div>
-                                    </EuiModalFooter>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                data-focus-guard={true}
-                                style={
-                                  Object {
-                                    "height": "0px",
-                                    "left": "1px",
-                                    "overflow": "hidden",
-                                    "padding": 0,
-                                    "position": "fixed",
-                                    "top": "1px",
-                                    "width": "1px",
+                                    </div>
+                                  </ForwardRef>
+                                  <div
+                                    data-focus-guard={true}
+                                    style={
+                                      Object {
+                                        "height": "0px",
+                                        "left": "1px",
+                                        "overflow": "hidden",
+                                        "padding": 0,
+                                        "position": "fixed",
+                                        "top": "1px",
+                                        "width": "1px",
+                                      }
+                                    }
+                                    tabIndex={0}
+                                  />
+                                </ForwardRef>
+                                <RequireSideCar
+                                  noIsolation={true}
+                                  setLockProps={[Function]}
+                                  sideCar={
+                                    Object {
+                                      "assignMedium": [Function],
+                                      "assignSyncMedium": [Function],
+                                      "options": Object {
+                                        "async": true,
+                                        "ssr": false,
+                                      },
+                                      "read": [Function],
+                                      "useMedium": [Function],
+                                    }
                                   }
-                                }
-                                tabIndex={0}
-                              />
-                            </FocusLock>
+                                >
+                                  <SideCar
+                                    noIsolation={true}
+                                    setLockProps={[Function]}
+                                    sideCar={
+                                      Object {
+                                        "assignMedium": [Function],
+                                        "assignSyncMedium": [Function],
+                                        "options": Object {
+                                          "async": true,
+                                          "ssr": false,
+                                        },
+                                        "read": [Function],
+                                        "useMedium": [Function],
+                                      }
+                                    }
+                                  >
+                                    <Effect
+                                      noIsolation={true}
+                                      setLockProps={[Function]}
+                                    >
+                                      <Component>
+                                        <Sheet
+                                          styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                                        />
+                                      </Component>
+                                    </Effect>
+                                  </SideCar>
+                                </RequireSideCar>
+                              </ForwardRef>
+                            </ForwardRef>
                           </EuiFocusTrap>
                         </EuiModal>
                       </EuiConfirmModal>
@@ -1076,21 +1469,31 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                   onClick={[Function]}
                                   rel="noreferrer"
                                 >
-                                  <span
+                                  <EuiButtonContent
                                     className="euiButtonEmpty__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButtonEmpty__text",
+                                      }
+                                    }
                                   >
                                     <span
-                                      className="euiButtonEmpty__text"
+                                      className="euiButtonContent euiButtonEmpty__content"
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Cancel"
-                                        id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonEmpty__text"
                                       >
-                                        Cancel
-                                      </FormattedMessage>
+                                        <FormattedMessage
+                                          defaultMessage="Cancel"
+                                          id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
+                                          values={Object {}}
+                                        >
+                                          Cancel
+                                        </FormattedMessage>
+                                      </span>
                                     </span>
-                                  </span>
+                                  </EuiButtonContent>
                                 </a>
                               </EuiButtonEmpty>
                             </div>
@@ -1107,28 +1510,48 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                                 isLoading={false}
                                 onClick={[Function]}
                               >
-                                <button
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
                                   data-test-subj="uploadLicenseButton"
+                                  element="button"
+                                  fill={true}
+                                  isLoading={false}
                                   onClick={[Function]}
                                   type="button"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <button
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    data-test-subj="uploadLicenseButton"
+                                    onClick={[Function]}
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      isLoading={false}
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Upload"
-                                        id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Upload
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </button>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Upload"
+                                            id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
+                                            values={Object {}}
+                                          >
+                                            Upload
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -1734,21 +2157,31 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                                   onClick={[Function]}
                                   rel="noreferrer"
                                 >
-                                  <span
+                                  <EuiButtonContent
                                     className="euiButtonEmpty__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButtonEmpty__text",
+                                      }
+                                    }
                                   >
                                     <span
-                                      className="euiButtonEmpty__text"
+                                      className="euiButtonContent euiButtonEmpty__content"
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Cancel"
-                                        id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonEmpty__text"
                                       >
-                                        Cancel
-                                      </FormattedMessage>
+                                        <FormattedMessage
+                                          defaultMessage="Cancel"
+                                          id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
+                                          values={Object {}}
+                                        >
+                                          Cancel
+                                        </FormattedMessage>
+                                      </span>
                                     </span>
-                                  </span>
+                                  </EuiButtonContent>
                                 </a>
                               </EuiButtonEmpty>
                             </div>
@@ -1765,28 +2198,48 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                                 isLoading={false}
                                 onClick={[Function]}
                               >
-                                <button
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
                                   data-test-subj="uploadLicenseButton"
+                                  element="button"
+                                  fill={true}
+                                  isLoading={false}
                                   onClick={[Function]}
                                   type="button"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <button
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    data-test-subj="uploadLicenseButton"
+                                    onClick={[Function]}
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      isLoading={false}
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Upload"
-                                        id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Upload
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </button>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Upload"
+                                            id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
+                                            values={Object {}}
+                                          >
+                                            Upload
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -2392,21 +2845,31 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                                   onClick={[Function]}
                                   rel="noreferrer"
                                 >
-                                  <span
+                                  <EuiButtonContent
                                     className="euiButtonEmpty__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButtonEmpty__text",
+                                      }
+                                    }
                                   >
                                     <span
-                                      className="euiButtonEmpty__text"
+                                      className="euiButtonContent euiButtonEmpty__content"
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Cancel"
-                                        id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonEmpty__text"
                                       >
-                                        Cancel
-                                      </FormattedMessage>
+                                        <FormattedMessage
+                                          defaultMessage="Cancel"
+                                          id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
+                                          values={Object {}}
+                                        >
+                                          Cancel
+                                        </FormattedMessage>
+                                      </span>
                                     </span>
-                                  </span>
+                                  </EuiButtonContent>
                                 </a>
                               </EuiButtonEmpty>
                             </div>
@@ -2423,28 +2886,48 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                                 isLoading={false}
                                 onClick={[Function]}
                               >
-                                <button
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
                                   data-test-subj="uploadLicenseButton"
+                                  element="button"
+                                  fill={true}
+                                  isLoading={false}
                                   onClick={[Function]}
                                   type="button"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <button
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    data-test-subj="uploadLicenseButton"
+                                    onClick={[Function]}
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      isLoading={false}
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Upload"
-                                        id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Upload
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </button>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Upload"
+                                            id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
+                                            values={Object {}}
+                                          >
+                                            Upload
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -3050,21 +3533,31 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
                                   onClick={[Function]}
                                   rel="noreferrer"
                                 >
-                                  <span
+                                  <EuiButtonContent
                                     className="euiButtonEmpty__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButtonEmpty__text",
+                                      }
+                                    }
                                   >
                                     <span
-                                      className="euiButtonEmpty__text"
+                                      className="euiButtonContent euiButtonEmpty__content"
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Cancel"
-                                        id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonEmpty__text"
                                       >
-                                        Cancel
-                                      </FormattedMessage>
+                                        <FormattedMessage
+                                          defaultMessage="Cancel"
+                                          id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
+                                          values={Object {}}
+                                        >
+                                          Cancel
+                                        </FormattedMessage>
+                                      </span>
                                     </span>
-                                  </span>
+                                  </EuiButtonContent>
                                 </a>
                               </EuiButtonEmpty>
                             </div>
@@ -3081,28 +3574,48 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
                                 isLoading={false}
                                 onClick={[Function]}
                               >
-                                <button
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
                                   data-test-subj="uploadLicenseButton"
+                                  element="button"
+                                  fill={true}
+                                  isLoading={false}
                                   onClick={[Function]}
                                   type="button"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <button
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    data-test-subj="uploadLicenseButton"
+                                    onClick={[Function]}
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      isLoading={false}
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Upload"
-                                        id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Upload
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </button>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Upload"
+                                            id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
+                                            values={Object {}}
+                                          >
+                                            Upload
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -3708,21 +4221,31 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                                   onClick={[Function]}
                                   rel="noreferrer"
                                 >
-                                  <span
+                                  <EuiButtonContent
                                     className="euiButtonEmpty__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButtonEmpty__text",
+                                      }
+                                    }
                                   >
                                     <span
-                                      className="euiButtonEmpty__text"
+                                      className="euiButtonContent euiButtonEmpty__content"
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Cancel"
-                                        id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonEmpty__text"
                                       >
-                                        Cancel
-                                      </FormattedMessage>
+                                        <FormattedMessage
+                                          defaultMessage="Cancel"
+                                          id="xpack.licenseMgmt.uploadLicense.cancelButtonLabel"
+                                          values={Object {}}
+                                        >
+                                          Cancel
+                                        </FormattedMessage>
+                                      </span>
                                     </span>
-                                  </span>
+                                  </EuiButtonContent>
                                 </a>
                               </EuiButtonEmpty>
                             </div>
@@ -3739,28 +4262,48 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                                 isLoading={false}
                                 onClick={[Function]}
                               >
-                                <button
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
                                   data-test-subj="uploadLicenseButton"
+                                  element="button"
+                                  fill={true}
+                                  isLoading={false}
                                   onClick={[Function]}
                                   type="button"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <button
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    data-test-subj="uploadLicenseButton"
+                                    onClick={[Function]}
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      isLoading={false}
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Upload"
-                                        id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Upload
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </button>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Upload"
+                                            id="xpack.licenseMgmt.uploadLicense.uploadButtonLabel"
+                                            values={Object {}}
+                                          >
+                                            Upload
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
diff --git a/x-pack/plugins/logstash/public/application/components/pipeline_list/pipelines_table.test.js b/x-pack/plugins/logstash/public/application/components/pipeline_list/pipelines_table.test.js
index 2c25ae69ae722..6c2f0d02801c4 100644
--- a/x-pack/plugins/logstash/public/application/components/pipeline_list/pipelines_table.test.js
+++ b/x-pack/plugins/logstash/public/application/components/pipeline_list/pipelines_table.test.js
@@ -45,7 +45,7 @@ describe('PipelinesTable component', () => {
   it('calls clone when cloned button clicked', () => {
     props.pipelines = [{ id: 'testPipeline', isCentrallyManaged: true }];
     const wrapper = mountWithIntl(<PipelinesTable.WrappedComponent {...props} />);
-    wrapper.find('[iconType="copy"]').simulate('click');
+    wrapper.find('[iconType="copy"]').first().simulate('click');
     expect(clonePipeline).toHaveBeenCalled();
   });
 
diff --git a/x-pack/plugins/logstash/public/application/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap b/x-pack/plugins/logstash/public/application/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap
index 5f54513c427dd..d0f1bed8e8e9e 100644
--- a/x-pack/plugins/logstash/public/application/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap
+++ b/x-pack/plugins/logstash/public/application/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap
@@ -265,21 +265,38 @@ exports[`UpgradeFailure component passes expected text for new pipeline 1`] = `
                           fill={true}
                           onClick={[MockFunction]}
                         >
-                          <button
-                            className="euiButton euiButton--primary euiButton--fill"
+                          <EuiButtonDisplay
+                            element="button"
+                            fill={true}
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
-                              className="euiButton__content"
+                            <button
+                              className="euiButton euiButton--primary euiButton--fill"
+                              onClick={[MockFunction]}
+                              type="button"
                             >
-                              <span
-                                className="euiButton__text"
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
                               >
-                                Try again
-                              </span>
-                            </span>
-                          </button>
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Try again
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
                         </EuiButton>
                       </div>
                     </EuiFlexItem>
@@ -298,21 +315,31 @@ exports[`UpgradeFailure component passes expected text for new pipeline 1`] = `
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="left"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Go back"
-                                  id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
-                                  values={Object {}}
+                                <span
+                                  className="euiButtonEmpty__text"
                                 >
-                                  Go back
-                                </FormattedMessage>
+                                  <FormattedMessage
+                                    defaultMessage="Go back"
+                                    id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
+                                    values={Object {}}
+                                  >
+                                    Go back
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>
@@ -594,21 +621,38 @@ exports[`UpgradeFailure component passes expected text for not manual upgrade 1`
                           fill={true}
                           onClick={[MockFunction]}
                         >
-                          <button
-                            className="euiButton euiButton--primary euiButton--fill"
+                          <EuiButtonDisplay
+                            element="button"
+                            fill={true}
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
-                              className="euiButton__content"
+                            <button
+                              className="euiButton euiButton--primary euiButton--fill"
+                              onClick={[MockFunction]}
+                              type="button"
                             >
-                              <span
-                                className="euiButton__text"
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
                               >
-                                Upgrade
-                              </span>
-                            </span>
-                          </button>
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Upgrade
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
                         </EuiButton>
                       </div>
                     </EuiFlexItem>
@@ -627,21 +671,31 @@ exports[`UpgradeFailure component passes expected text for not manual upgrade 1`
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="left"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Go back"
-                                  id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
-                                  values={Object {}}
+                                <span
+                                  className="euiButtonEmpty__text"
                                 >
-                                  Go back
-                                </FormattedMessage>
+                                  <FormattedMessage
+                                    defaultMessage="Go back"
+                                    id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
+                                    values={Object {}}
+                                  >
+                                    Go back
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>
@@ -923,21 +977,38 @@ exports[`UpgradeFailure component passes expected text for not new pipeline 1`]
                           fill={true}
                           onClick={[MockFunction]}
                         >
-                          <button
-                            className="euiButton euiButton--primary euiButton--fill"
+                          <EuiButtonDisplay
+                            element="button"
+                            fill={true}
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
-                              className="euiButton__content"
+                            <button
+                              className="euiButton euiButton--primary euiButton--fill"
+                              onClick={[MockFunction]}
+                              type="button"
                             >
-                              <span
-                                className="euiButton__text"
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
                               >
-                                Try again
-                              </span>
-                            </span>
-                          </button>
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Try again
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
                         </EuiButton>
                       </div>
                     </EuiFlexItem>
@@ -956,21 +1027,31 @@ exports[`UpgradeFailure component passes expected text for not new pipeline 1`]
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="left"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Go back"
-                                  id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
-                                  values={Object {}}
+                                <span
+                                  className="euiButtonEmpty__text"
                                 >
-                                  Go back
-                                </FormattedMessage>
+                                  <FormattedMessage
+                                    defaultMessage="Go back"
+                                    id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
+                                    values={Object {}}
+                                  >
+                                    Go back
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
index c144525699d81..93bb62fa1fc58 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
@@ -16,7 +16,6 @@ import {
   EuiFormRow,
   EuiToolTip,
 } from '@elastic/eui';
-import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 
 export interface Entity {
   fieldName: string;
@@ -113,7 +112,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
     this.props.onSearchChange(this.props.entity, searchValue);
   };
 
-  renderOption = (option: EuiSelectableOption) => {
+  renderOption = (option: EuiComboBoxOptionOption) => {
     const { label } = option;
     return label === EMPTY_FIELD_VALUE_LABEL ? <i>{label}</i> : label;
   };
diff --git a/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
index 72f6e2b01c129..c06f71e79e766 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
@@ -52,7 +52,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <span
                 class="euiButton__text"
@@ -72,7 +72,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"
@@ -142,7 +142,7 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <span
                 class="euiButton__text"
@@ -162,7 +162,7 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
index f891aab34c4a1..deed4687e74f6 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
@@ -247,28 +247,46 @@ exports[`ExplainCollectionEnabled should explain about xpack.monitoring.collecti
             onClick={[Function]}
             type="button"
           >
-            <button
-              className="euiButton euiButton--primary euiButton--fill"
+            <EuiButtonDisplay
               data-test-subj="enableCollectionEnabled"
+              element="button"
+              fill={true}
               onClick={[Function]}
               type="button"
             >
-              <span
-                className="euiButton__content"
+              <button
+                className="euiButton euiButton--primary euiButton--fill"
+                data-test-subj="enableCollectionEnabled"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButton__text"
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
-                  <FormattedMessage
-                    defaultMessage="Turn on monitoring"
-                    id="xpack.monitoring.noData.explanations.collectionEnabled.turnOnMonitoringButtonLabel"
-                    values={Object {}}
+                  <span
+                    className="euiButtonContent euiButton__content"
                   >
-                    Turn on monitoring
-                  </FormattedMessage>
-                </span>
-              </span>
-            </button>
+                    <span
+                      className="euiButton__text"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Turn on monitoring"
+                        id="xpack.monitoring.noData.explanations.collectionEnabled.turnOnMonitoringButtonLabel"
+                        values={Object {}}
+                      >
+                        Turn on monitoring
+                      </FormattedMessage>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
           </EuiButton>
         </div>
       </EuiFlexItem>
diff --git a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
index 49cbe092e0e20..782be3a073016 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
@@ -430,37 +430,59 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
             onClick={[Function]}
             type="button"
           >
-            <button
-              className="euiButton euiButton--primary euiButton--fill"
+            <EuiButtonDisplay
               data-test-subj="enableCollectionInterval"
               disabled={true}
+              element="button"
+              fill={true}
+              isDisabled={true}
+              isLoading={true}
               onClick={[Function]}
               type="button"
             >
-              <span
-                className="euiButton__content"
+              <button
+                className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                data-test-subj="enableCollectionInterval"
+                disabled={true}
+                onClick={[Function]}
+                type="button"
               >
-                <EuiLoadingSpinner
-                  className="euiButton__spinner"
-                  size="m"
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  isLoading={true}
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
-                    className="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
-                  />
-                </EuiLoadingSpinner>
-                <span
-                  className="euiButton__text"
-                >
-                  <FormattedMessage
-                    defaultMessage="Turn on monitoring"
-                    id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
-                    values={Object {}}
+                    className="euiButtonContent euiButton__content"
                   >
-                    Turn on monitoring
-                  </FormattedMessage>
-                </span>
-              </span>
-            </button>
+                    <EuiLoadingSpinner
+                      className="euiButtonContent__spinner"
+                      size="m"
+                    >
+                      <span
+                        className="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
+                      />
+                    </EuiLoadingSpinner>
+                    <span
+                      className="euiButton__text"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Turn on monitoring"
+                        id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
+                        values={Object {}}
+                      >
+                        Turn on monitoring
+                      </FormattedMessage>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
           </EuiButton>
         </div>
       </EuiFlexItem>
@@ -728,28 +750,48 @@ exports[`ExplainCollectionInterval should explain about xpack.monitoring.collect
             onClick={[Function]}
             type="button"
           >
-            <button
-              className="euiButton euiButton--primary euiButton--fill"
+            <EuiButtonDisplay
               data-test-subj="enableCollectionInterval"
+              element="button"
+              fill={true}
+              isLoading={false}
               onClick={[Function]}
               type="button"
             >
-              <span
-                className="euiButton__content"
+              <button
+                className="euiButton euiButton--primary euiButton--fill"
+                data-test-subj="enableCollectionInterval"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButton__text"
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  isLoading={false}
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
-                  <FormattedMessage
-                    defaultMessage="Turn on monitoring"
-                    id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
-                    values={Object {}}
+                  <span
+                    className="euiButtonContent euiButton__content"
                   >
-                    Turn on monitoring
-                  </FormattedMessage>
-                </span>
-              </span>
-            </button>
+                    <span
+                      className="euiButton__text"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Turn on monitoring"
+                        id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
+                        values={Object {}}
+                      >
+                        Turn on monitoring
+                      </FormattedMessage>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
           </EuiButton>
         </div>
       </EuiFlexItem>
diff --git a/x-pack/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap
index 898be82b139d1..e7b88e23c5f68 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap
@@ -61,7 +61,7 @@ Array [
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
diff --git a/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap b/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
index 5a0ee905f92e4..63ff157eb0d6d 100644
--- a/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
@@ -38,11 +38,6 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
         />
          Yellow
         <p />
-        <p
-          class="euiScreenReaderOnly"
-        >
-          Status [object Object]
-        </p>
       </div>
     </div>
     <div
@@ -217,11 +212,6 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
         />
          Green
         <p />
-        <p
-          class="euiScreenReaderOnly"
-        >
-          Status [object Object]
-        </p>
       </div>
     </div>
     <div
diff --git a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index e4c8159f59828..a05da1a65d4c8 100644
--- a/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -1268,43 +1268,65 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                     iconType="check"
                     onClick={[Function]}
                   >
-                    <button
+                    <EuiButtonDisplay
                       aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
-                      className="euiButton euiButton--secondary euiButton--fill"
+                      color="secondary"
                       data-test-subj="remoteClusterFormSaveButton"
                       disabled={false}
+                      element="button"
+                      fill={true}
+                      iconType="check"
+                      isDisabled={false}
                       onClick={[Function]}
                       type="button"
                     >
-                      <span
-                        className="euiButton__content"
+                      <button
+                        aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
+                        className="euiButton euiButton--secondary euiButton--fill"
+                        data-test-subj="remoteClusterFormSaveButton"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButton__icon"
-                          size="m"
-                          type="check"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButton__icon"
-                            data-euiicon-type="check"
-                            size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          iconType="check"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
                         >
-                          <FormattedMessage
-                            defaultMessage="Save"
-                            id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
-                            values={Object {}}
+                          <span
+                            className="euiButtonContent euiButton__content"
                           >
-                            Save
-                          </FormattedMessage>
-                        </span>
-                      </span>
-                    </button>
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              size="m"
+                              type="check"
+                            >
+                              <div
+                                className="euiButtonContent__icon"
+                                data-euiicon-type="check"
+                                size="m"
+                              />
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              <FormattedMessage
+                                defaultMessage="Save"
+                                id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
+                                values={Object {}}
+                              >
+                                Save
+                              </FormattedMessage>
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
                   </EuiButton>
                 </div>
               </EuiFlexItem>
@@ -1326,21 +1348,31 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
               onClick={[Function]}
               type="button"
             >
-              <span
+              <EuiButtonContent
                 className="euiButtonEmpty__content"
+                iconSide="left"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
               >
                 <span
-                  className="euiButtonEmpty__text"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
-                  <FormattedMessage
-                    defaultMessage="Show request"
-                    id="xpack.remoteClusters.remoteClusterForm.showRequestButtonLabel"
-                    values={Object {}}
+                  <span
+                    className="euiButtonEmpty__text"
                   >
-                    Show request
-                  </FormattedMessage>
+                    <FormattedMessage
+                      defaultMessage="Show request"
+                      id="xpack.remoteClusters.remoteClusterForm.showRequestButtonLabel"
+                      values={Object {}}
+                    >
+                      Show request
+                    </FormattedMessage>
+                  </span>
                 </span>
-              </span>
+              </EuiButtonContent>
             </button>
           </EuiButtonEmpty>
         </div>
@@ -1743,11 +1775,10 @@ Array [
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                class="euiButton__icon"
+                class="euiButtonContent__icon"
                 data-euiicon-type="check"
               />
               <span
@@ -1768,7 +1799,7 @@ Array [
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
index 097b97252b25b..a8982a9683d03 100644
--- a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
@@ -44,7 +44,9 @@ Array [
       <Portal
         containerInfo={
           <div
+            aria-hidden="true"
             class="euiOverlayMask euiOverlayMask--belowHeader"
+            data-aria-hidden="true"
           />
         }
       />
@@ -69,119 +71,93 @@ Array [
             onTouchEnd={[Function]}
             onTouchStart={[Function]}
           >
-            <FocusLock
-              as="div"
-              autoFocus={true}
-              disabled={false}
-              lockProps={
-                Object {
-                  "style": undefined,
-                }
-              }
-              noFocusGuards={false}
-              persistentFocus={false}
+            <ForwardRef
+              enabled={true}
+              noIsolation={true}
               returnFocus={true}
+              scrollLock={false}
             >
-              <div
-                data-focus-guard={true}
-                key="guard-first"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={0}
-              />
-              <div
-                data-focus-guard={true}
-                key="guard-nearest"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={1}
-              />
-              <div
-                data-focus-lock-disabled={false}
-                onBlur={[Function]}
-                onFocus={[Function]}
+              <ForwardRef
+                enabled={true}
+                noIsolation={true}
+                returnFocus={true}
+                scrollLock={false}
+                sideCar={[Function]}
               >
-                <SideEffect(FocusWatcher)
+                <ForwardRef
+                  as={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "classNames": Object {
+                        "fullWidth": "width-before-scroll-bar",
+                        "zeroRight": "right-scroll-bar-position",
+                      },
+                      "defaultProps": Object {
+                        "enabled": true,
+                        "inert": false,
+                        "removeScrollBar": true,
+                      },
+                      "render": [Function],
+                    }
+                  }
                   autoFocus={true}
+                  crossFrame={true}
                   disabled={false}
-                  observed={
-                    <div
-                      data-focus-lock-disabled="false"
-                    >
-                      <div
-                        aria-labelledby="flyoutTitle"
-                        class="euiFlyout euiFlyout--small"
-                        data-test-subj="reportInfoFlyout"
-                        role="dialog"
-                        tabindex="0"
-                      >
-                        <button
-                          aria-label="Close this dialog"
-                          class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                          data-test-subj="euiFlyoutCloseButton"
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            class="euiButtonIcon__icon"
-                            data-euiicon-type="cross"
-                          />
-                        </button>
-                        <div
-                          class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                        >
-                          <h2
-                            class="euiTitle euiTitle--medium"
-                            id="flyoutTitle"
-                          >
-                            Unable to fetch report info
-                          </h2>
-                        </div>
-                        <div
-                          class="euiFlyoutBody"
-                        >
-                          <div
-                            class="euiFlyoutBody__overflow"
-                          >
-                            <div
-                              class="euiFlyoutBody__overflowContent"
-                            >
-                              <div
-                                class="euiText euiText--medium"
-                              >
-                                Could not fetch the job info
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                  lockProps={
+                    Object {
+                      "allowPinchZoom": undefined,
+                      "enabled": false,
+                      "inert": undefined,
+                      "onMouseDown": [Function],
+                      "onTouchStart": [Function],
+                      "shards": undefined,
+                      "sideCar": [Function],
+                    }
                   }
+                  noFocusGuards={false}
                   onActivation={[Function]}
                   onDeactivation={[Function]}
                   persistentFocus={false}
+                  returnFocus={true}
+                  sideCar={[Function]}
                 >
-                  <FocusWatcher
+                  <div
+                    data-focus-guard={true}
+                    key="guard-first"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                  <div
+                    data-focus-guard={true}
+                    key="guard-nearest"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={1}
+                  />
+                  <RequireSideCar
                     autoFocus={true}
+                    crossFrame={true}
                     disabled={false}
+                    id={Object {}}
                     observed={
                       <div
                         data-focus-lock-disabled="false"
@@ -238,107 +214,399 @@ Array [
                     onActivation={[Function]}
                     onDeactivation={[Function]}
                     persistentFocus={false}
-                  />
-                </SideEffect(FocusWatcher)>
-                <div
-                  aria-labelledby="flyoutTitle"
-                  className="euiFlyout euiFlyout--small"
-                  data-test-subj="reportInfoFlyout"
-                  role="dialog"
-                  tabIndex={0}
-                >
-                  <EuiI18n
-                    default="Close this dialog"
-                    token="euiFlyout.closeAriaLabel"
+                    returnFocus={[Function]}
+                    shards={Array []}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
                   >
-                    <EuiButtonIcon
-                      aria-label="Close this dialog"
-                      className="euiFlyout__closeButton"
-                      color="text"
-                      data-test-subj="euiFlyoutCloseButton"
-                      iconType="cross"
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Close this dialog"
-                        className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                        data-test-subj="euiFlyoutCloseButton"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          size="m"
-                          type="cross"
+                    <SideCar
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
                         >
                           <div
-                            aria-hidden="true"
-                            className="euiButtonIcon__icon"
-                            data-euiicon-type="cross"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
-                  </EuiI18n>
-                  <EuiFlyoutHeader
-                    hasBorder={true}
-                  >
-                    <div
-                      className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            aria-labelledby="flyoutTitle"
+                            class="euiFlyout euiFlyout--small"
+                            data-test-subj="reportInfoFlyout"
+                            role="dialog"
+                            tabindex="0"
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                              data-test-subj="euiFlyoutCloseButton"
+                              type="button"
+                            >
+                              <div
+                                aria-hidden="true"
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="cross"
+                              />
+                            </button>
+                            <div
+                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                                id="flyoutTitle"
+                              >
+                                Unable to fetch report info
+                              </h2>
+                            </div>
+                            <div
+                              class="euiFlyoutBody"
+                            >
+                              <div
+                                class="euiFlyoutBody__overflow"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflowContent"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    Could not fetch the job info
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                      sideCar={
+                        Object {
+                          "assignMedium": [Function],
+                          "assignSyncMedium": [Function],
+                          "options": Object {
+                            "async": true,
+                            "ssr": false,
+                          },
+                          "read": [Function],
+                          "useMedium": [Function],
+                        }
+                      }
                     >
-                      <EuiTitle
-                        size="m"
+                      <SideEffect(FocusWatcher)
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
+                          <div
+                            data-focus-lock-disabled="false"
+                          >
+                            <div
+                              aria-labelledby="flyoutTitle"
+                              class="euiFlyout euiFlyout--small"
+                              data-test-subj="reportInfoFlyout"
+                              role="dialog"
+                              tabindex="0"
+                            >
+                              <button
+                                aria-label="Close this dialog"
+                                class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                                data-test-subj="euiFlyoutCloseButton"
+                                type="button"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="cross"
+                                />
+                              </button>
+                              <div
+                                class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                              >
+                                <h2
+                                  class="euiTitle euiTitle--medium"
+                                  id="flyoutTitle"
+                                >
+                                  Unable to fetch report info
+                                </h2>
+                              </div>
+                              <div
+                                class="euiFlyoutBody"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflow"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__overflowContent"
+                                  >
+                                    <div
+                                      class="euiText euiText--medium"
+                                    >
+                                      Could not fetch the job info
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
                       >
-                        <h2
-                          className="euiTitle euiTitle--medium"
-                          id="flyoutTitle"
-                        >
-                          Unable to fetch report info
-                        </h2>
-                      </EuiTitle>
-                    </div>
-                  </EuiFlyoutHeader>
-                  <EuiFlyoutBody>
+                        <FocusWatcher
+                          autoFocus={true}
+                          crossFrame={true}
+                          disabled={false}
+                          id={Object {}}
+                          observed={
+                            <div
+                              data-focus-lock-disabled="false"
+                            >
+                              <div
+                                aria-labelledby="flyoutTitle"
+                                class="euiFlyout euiFlyout--small"
+                                data-test-subj="reportInfoFlyout"
+                                role="dialog"
+                                tabindex="0"
+                              >
+                                <button
+                                  aria-label="Close this dialog"
+                                  class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                                  data-test-subj="euiFlyoutCloseButton"
+                                  type="button"
+                                >
+                                  <div
+                                    aria-hidden="true"
+                                    class="euiButtonIcon__icon"
+                                    data-euiicon-type="cross"
+                                  />
+                                </button>
+                                <div
+                                  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                                >
+                                  <h2
+                                    class="euiTitle euiTitle--medium"
+                                    id="flyoutTitle"
+                                  >
+                                    Unable to fetch report info
+                                  </h2>
+                                </div>
+                                <div
+                                  class="euiFlyoutBody"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__overflow"
+                                  >
+                                    <div
+                                      class="euiFlyoutBody__overflowContent"
+                                    >
+                                      <div
+                                        class="euiText euiText--medium"
+                                      >
+                                        Could not fetch the job info
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          }
+                          onActivation={[Function]}
+                          onDeactivation={[Function]}
+                          persistentFocus={false}
+                          returnFocus={[Function]}
+                          shards={Array []}
+                        />
+                      </SideEffect(FocusWatcher)>
+                    </SideCar>
+                  </RequireSideCar>
+                  <ForwardRef
+                    data-focus-lock-disabled={false}
+                    enabled={false}
+                    inert={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onTouchStart={[Function]}
+                    removeScrollBar={true}
+                    sideCar={[Function]}
+                  >
                     <div
-                      className="euiFlyoutBody"
+                      data-focus-lock-disabled={false}
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onScrollCapture={[Function]}
+                      onTouchMoveCapture={[Function]}
+                      onTouchStart={[Function]}
+                      onWheelCapture={[Function]}
                     >
                       <div
-                        className="euiFlyoutBody__overflow"
+                        aria-labelledby="flyoutTitle"
+                        className="euiFlyout euiFlyout--small"
+                        data-test-subj="reportInfoFlyout"
+                        role="dialog"
+                        tabIndex={0}
                       >
-                        <div
-                          className="euiFlyoutBody__overflowContent"
+                        <EuiI18n
+                          default="Close this dialog"
+                          token="euiFlyout.closeAriaLabel"
                         >
-                          <EuiText>
+                          <EuiButtonIcon
+                            aria-label="Close this dialog"
+                            className="euiFlyout__closeButton"
+                            color="text"
+                            data-test-subj="euiFlyoutCloseButton"
+                            iconType="cross"
+                            onClick={[Function]}
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                              data-test-subj="euiFlyoutCloseButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                size="m"
+                                type="cross"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  className="euiButtonIcon__icon"
+                                  data-euiicon-type="cross"
+                                  size="m"
+                                />
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiI18n>
+                        <EuiFlyoutHeader
+                          hasBorder={true}
+                        >
+                          <div
+                            className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                          >
+                            <EuiTitle
+                              size="m"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                                id="flyoutTitle"
+                              >
+                                Unable to fetch report info
+                              </h2>
+                            </EuiTitle>
+                          </div>
+                        </EuiFlyoutHeader>
+                        <EuiFlyoutBody>
+                          <div
+                            className="euiFlyoutBody"
+                          >
                             <div
-                              className="euiText euiText--medium"
+                              className="euiFlyoutBody__overflow"
                             >
-                              Could not fetch the job info
+                              <div
+                                className="euiFlyoutBody__overflowContent"
+                              >
+                                <EuiText>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    Could not fetch the job info
+                                  </div>
+                                </EuiText>
+                              </div>
                             </div>
-                          </EuiText>
-                        </div>
+                          </div>
+                        </EuiFlyoutBody>
                       </div>
                     </div>
-                  </EuiFlyoutBody>
-                </div>
-              </div>
-              <div
-                data-focus-guard={true}
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
+                  </ForwardRef>
+                  <div
+                    data-focus-guard={true}
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                </ForwardRef>
+                <RequireSideCar
+                  noIsolation={true}
+                  setLockProps={[Function]}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
                   }
-                }
-                tabIndex={0}
-              />
-            </FocusLock>
+                >
+                  <SideCar
+                    noIsolation={true}
+                    setLockProps={[Function]}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <Effect
+                      noIsolation={true}
+                      setLockProps={[Function]}
+                    >
+                      <Component>
+                        <Sheet
+                          styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                        />
+                      </Component>
+                    </Effect>
+                  </SideCar>
+                </RequireSideCar>
+              </ForwardRef>
+            </ForwardRef>
           </div>
         </OutsideEventDetector>
       </EuiOutsideClickDetector>
@@ -449,7 +717,9 @@ Array [
       <Portal
         containerInfo={
           <div
+            aria-hidden="true"
             class="euiOverlayMask euiOverlayMask--belowHeader"
+            data-aria-hidden="true"
           />
         }
       />
@@ -474,117 +744,93 @@ Array [
             onTouchEnd={[Function]}
             onTouchStart={[Function]}
           >
-            <FocusLock
-              as="div"
-              autoFocus={true}
-              disabled={false}
-              lockProps={
-                Object {
-                  "style": undefined,
-                }
-              }
-              noFocusGuards={false}
-              persistentFocus={false}
+            <ForwardRef
+              enabled={true}
+              noIsolation={true}
               returnFocus={true}
+              scrollLock={false}
             >
-              <div
-                data-focus-guard={true}
-                key="guard-first"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={0}
-              />
-              <div
-                data-focus-guard={true}
-                key="guard-nearest"
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
-                  }
-                }
-                tabIndex={1}
-              />
-              <div
-                data-focus-lock-disabled={false}
-                onBlur={[Function]}
-                onFocus={[Function]}
+              <ForwardRef
+                enabled={true}
+                noIsolation={true}
+                returnFocus={true}
+                scrollLock={false}
+                sideCar={[Function]}
               >
-                <SideEffect(FocusWatcher)
+                <ForwardRef
+                  as={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "classNames": Object {
+                        "fullWidth": "width-before-scroll-bar",
+                        "zeroRight": "right-scroll-bar-position",
+                      },
+                      "defaultProps": Object {
+                        "enabled": true,
+                        "inert": false,
+                        "removeScrollBar": true,
+                      },
+                      "render": [Function],
+                    }
+                  }
                   autoFocus={true}
+                  crossFrame={true}
                   disabled={false}
-                  observed={
-                    <div
-                      data-focus-lock-disabled="false"
-                    >
-                      <div
-                        aria-labelledby="flyoutTitle"
-                        class="euiFlyout euiFlyout--small"
-                        data-test-subj="reportInfoFlyout"
-                        role="dialog"
-                        tabindex="0"
-                      >
-                        <button
-                          aria-label="Close this dialog"
-                          class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                          data-test-subj="euiFlyoutCloseButton"
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            class="euiButtonIcon__icon"
-                            data-euiicon-type="cross"
-                          />
-                        </button>
-                        <div
-                          class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                        >
-                          <h2
-                            class="euiTitle euiTitle--medium"
-                            id="flyoutTitle"
-                          >
-                            Job Info
-                          </h2>
-                        </div>
-                        <div
-                          class="euiFlyoutBody"
-                        >
-                          <div
-                            class="euiFlyoutBody__overflow"
-                          >
-                            <div
-                              class="euiFlyoutBody__overflowContent"
-                            >
-                              <div
-                                class="euiText euiText--medium"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                  lockProps={
+                    Object {
+                      "allowPinchZoom": undefined,
+                      "enabled": false,
+                      "inert": undefined,
+                      "onMouseDown": [Function],
+                      "onTouchStart": [Function],
+                      "shards": undefined,
+                      "sideCar": [Function],
+                    }
                   }
+                  noFocusGuards={false}
                   onActivation={[Function]}
                   onDeactivation={[Function]}
                   persistentFocus={false}
+                  returnFocus={true}
+                  sideCar={[Function]}
                 >
-                  <FocusWatcher
+                  <div
+                    data-focus-guard={true}
+                    key="guard-first"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                  <div
+                    data-focus-guard={true}
+                    key="guard-nearest"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={1}
+                  />
+                  <RequireSideCar
                     autoFocus={true}
+                    crossFrame={true}
                     disabled={false}
+                    id={Object {}}
                     observed={
                       <div
                         data-focus-lock-disabled="false"
@@ -639,105 +885,391 @@ Array [
                     onActivation={[Function]}
                     onDeactivation={[Function]}
                     persistentFocus={false}
-                  />
-                </SideEffect(FocusWatcher)>
-                <div
-                  aria-labelledby="flyoutTitle"
-                  className="euiFlyout euiFlyout--small"
-                  data-test-subj="reportInfoFlyout"
-                  role="dialog"
-                  tabIndex={0}
-                >
-                  <EuiI18n
-                    default="Close this dialog"
-                    token="euiFlyout.closeAriaLabel"
+                    returnFocus={[Function]}
+                    shards={Array []}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
                   >
-                    <EuiButtonIcon
-                      aria-label="Close this dialog"
-                      className="euiFlyout__closeButton"
-                      color="text"
-                      data-test-subj="euiFlyoutCloseButton"
-                      iconType="cross"
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Close this dialog"
-                        className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                        data-test-subj="euiFlyoutCloseButton"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          size="m"
-                          type="cross"
+                    <SideCar
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
                         >
                           <div
-                            aria-hidden="true"
-                            className="euiButtonIcon__icon"
-                            data-euiicon-type="cross"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
-                  </EuiI18n>
-                  <EuiFlyoutHeader
-                    hasBorder={true}
-                  >
-                    <div
-                      className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            aria-labelledby="flyoutTitle"
+                            class="euiFlyout euiFlyout--small"
+                            data-test-subj="reportInfoFlyout"
+                            role="dialog"
+                            tabindex="0"
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                              data-test-subj="euiFlyoutCloseButton"
+                              type="button"
+                            >
+                              <div
+                                aria-hidden="true"
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="cross"
+                              />
+                            </button>
+                            <div
+                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                                id="flyoutTitle"
+                              >
+                                Job Info
+                              </h2>
+                            </div>
+                            <div
+                              class="euiFlyoutBody"
+                            >
+                              <div
+                                class="euiFlyoutBody__overflow"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflowContent"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                      sideCar={
+                        Object {
+                          "assignMedium": [Function],
+                          "assignSyncMedium": [Function],
+                          "options": Object {
+                            "async": true,
+                            "ssr": false,
+                          },
+                          "read": [Function],
+                          "useMedium": [Function],
+                        }
+                      }
                     >
-                      <EuiTitle
-                        size="m"
+                      <SideEffect(FocusWatcher)
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
+                          <div
+                            data-focus-lock-disabled="false"
+                          >
+                            <div
+                              aria-labelledby="flyoutTitle"
+                              class="euiFlyout euiFlyout--small"
+                              data-test-subj="reportInfoFlyout"
+                              role="dialog"
+                              tabindex="0"
+                            >
+                              <button
+                                aria-label="Close this dialog"
+                                class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                                data-test-subj="euiFlyoutCloseButton"
+                                type="button"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="cross"
+                                />
+                              </button>
+                              <div
+                                class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                              >
+                                <h2
+                                  class="euiTitle euiTitle--medium"
+                                  id="flyoutTitle"
+                                >
+                                  Job Info
+                                </h2>
+                              </div>
+                              <div
+                                class="euiFlyoutBody"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflow"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__overflowContent"
+                                  >
+                                    <div
+                                      class="euiText euiText--medium"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
                       >
-                        <h2
-                          className="euiTitle euiTitle--medium"
-                          id="flyoutTitle"
-                        >
-                          Job Info
-                        </h2>
-                      </EuiTitle>
-                    </div>
-                  </EuiFlyoutHeader>
-                  <EuiFlyoutBody>
+                        <FocusWatcher
+                          autoFocus={true}
+                          crossFrame={true}
+                          disabled={false}
+                          id={Object {}}
+                          observed={
+                            <div
+                              data-focus-lock-disabled="false"
+                            >
+                              <div
+                                aria-labelledby="flyoutTitle"
+                                class="euiFlyout euiFlyout--small"
+                                data-test-subj="reportInfoFlyout"
+                                role="dialog"
+                                tabindex="0"
+                              >
+                                <button
+                                  aria-label="Close this dialog"
+                                  class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                                  data-test-subj="euiFlyoutCloseButton"
+                                  type="button"
+                                >
+                                  <div
+                                    aria-hidden="true"
+                                    class="euiButtonIcon__icon"
+                                    data-euiicon-type="cross"
+                                  />
+                                </button>
+                                <div
+                                  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                                >
+                                  <h2
+                                    class="euiTitle euiTitle--medium"
+                                    id="flyoutTitle"
+                                  >
+                                    Job Info
+                                  </h2>
+                                </div>
+                                <div
+                                  class="euiFlyoutBody"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__overflow"
+                                  >
+                                    <div
+                                      class="euiFlyoutBody__overflowContent"
+                                    >
+                                      <div
+                                        class="euiText euiText--medium"
+                                      />
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          }
+                          onActivation={[Function]}
+                          onDeactivation={[Function]}
+                          persistentFocus={false}
+                          returnFocus={[Function]}
+                          shards={Array []}
+                        />
+                      </SideEffect(FocusWatcher)>
+                    </SideCar>
+                  </RequireSideCar>
+                  <ForwardRef
+                    data-focus-lock-disabled={false}
+                    enabled={false}
+                    inert={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onTouchStart={[Function]}
+                    removeScrollBar={true}
+                    sideCar={[Function]}
+                  >
                     <div
-                      className="euiFlyoutBody"
+                      data-focus-lock-disabled={false}
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onScrollCapture={[Function]}
+                      onTouchMoveCapture={[Function]}
+                      onTouchStart={[Function]}
+                      onWheelCapture={[Function]}
                     >
                       <div
-                        className="euiFlyoutBody__overflow"
+                        aria-labelledby="flyoutTitle"
+                        className="euiFlyout euiFlyout--small"
+                        data-test-subj="reportInfoFlyout"
+                        role="dialog"
+                        tabIndex={0}
                       >
-                        <div
-                          className="euiFlyoutBody__overflowContent"
+                        <EuiI18n
+                          default="Close this dialog"
+                          token="euiFlyout.closeAriaLabel"
+                        >
+                          <EuiButtonIcon
+                            aria-label="Close this dialog"
+                            className="euiFlyout__closeButton"
+                            color="text"
+                            data-test-subj="euiFlyoutCloseButton"
+                            iconType="cross"
+                            onClick={[Function]}
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                              data-test-subj="euiFlyoutCloseButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                size="m"
+                                type="cross"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  className="euiButtonIcon__icon"
+                                  data-euiicon-type="cross"
+                                  size="m"
+                                />
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiI18n>
+                        <EuiFlyoutHeader
+                          hasBorder={true}
                         >
-                          <EuiText>
+                          <div
+                            className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                          >
+                            <EuiTitle
+                              size="m"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                                id="flyoutTitle"
+                              >
+                                Job Info
+                              </h2>
+                            </EuiTitle>
+                          </div>
+                        </EuiFlyoutHeader>
+                        <EuiFlyoutBody>
+                          <div
+                            className="euiFlyoutBody"
+                          >
                             <div
-                              className="euiText euiText--medium"
-                            />
-                          </EuiText>
-                        </div>
+                              className="euiFlyoutBody__overflow"
+                            >
+                              <div
+                                className="euiFlyoutBody__overflowContent"
+                              >
+                                <EuiText>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  />
+                                </EuiText>
+                              </div>
+                            </div>
+                          </div>
+                        </EuiFlyoutBody>
                       </div>
                     </div>
-                  </EuiFlyoutBody>
-                </div>
-              </div>
-              <div
-                data-focus-guard={true}
-                style={
-                  Object {
-                    "height": "0px",
-                    "left": "1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "fixed",
-                    "top": "1px",
-                    "width": "1px",
+                  </ForwardRef>
+                  <div
+                    data-focus-guard={true}
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={0}
+                  />
+                </ForwardRef>
+                <RequireSideCar
+                  noIsolation={true}
+                  setLockProps={[Function]}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
                   }
-                }
-                tabIndex={0}
-              />
-            </FocusLock>
+                >
+                  <SideCar
+                    noIsolation={true}
+                    setLockProps={[Function]}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <Effect
+                      noIsolation={true}
+                      setLockProps={[Function]}
+                    >
+                      <Component>
+                        <Sheet
+                          styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                        />
+                      </Component>
+                    </Effect>
+                  </SideCar>
+                </RequireSideCar>
+              </ForwardRef>
+            </ForwardRef>
           </div>
         </OutsideEventDetector>
       </EuiOutsideClickDetector>
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/navigation/navigation.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/navigation/navigation.js
index bb0718370270a..70b8cacce6c6a 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/navigation/navigation.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/navigation/navigation.js
@@ -66,7 +66,7 @@ export const Navigation = ({
         iconType="arrowRight"
         iconSide="right"
         onClick={goToNextStep}
-        isDisabled={!canGoToNextStep}
+        disabled={!canGoToNextStep}
         fill
         data-test-subj="rollupJobNextButton"
       >
diff --git a/x-pack/plugins/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap b/x-pack/plugins/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap
index 02b1a7d0d3fa0..065afa0b3ffb9 100644
--- a/x-pack/plugins/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap
+++ b/x-pack/plugins/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap
@@ -70,31 +70,47 @@ exports[`OverwrittenSessionPage renders as expected 1`] = `
       <EuiButton
         href="/mock-base-path/"
       >
-        <a
-          className="euiButton euiButton--primary"
+        <EuiButtonDisplay
+          element="a"
           href="/mock-base-path/"
           rel="noreferrer"
         >
-          <span
-            className="euiButton__content"
+          <a
+            className="euiButton euiButton--primary"
+            href="/mock-base-path/"
+            rel="noreferrer"
           >
-            <span
-              className="euiButton__text"
-            >
-              <FormattedMessage
-                defaultMessage="Continue as {username}"
-                id="xpack.security.overwrittenSession.continueAsUserText"
-                values={
-                  Object {
-                    "username": "mock-user",
-                  }
+            <EuiButtonContent
+              className="euiButton__content"
+              iconSide="left"
+              textProps={
+                Object {
+                  "className": "euiButton__text",
                 }
+              }
+            >
+              <span
+                className="euiButtonContent euiButton__content"
               >
-                Continue as mock-user
-              </FormattedMessage>
-            </span>
-          </span>
-        </a>
+                <span
+                  className="euiButton__text"
+                >
+                  <FormattedMessage
+                    defaultMessage="Continue as {username}"
+                    id="xpack.security.overwrittenSession.continueAsUserText"
+                    values={
+                      Object {
+                        "username": "mock-user",
+                      }
+                    }
+                  >
+                    Continue as mock-user
+                  </FormattedMessage>
+                </span>
+              </span>
+            </EuiButtonContent>
+          </a>
+        </EuiButtonDisplay>
       </EuiButton>
     </div>
   </div>
diff --git a/x-pack/plugins/security/public/management/role_combo_box/role_combo_box.test.tsx b/x-pack/plugins/security/public/management/role_combo_box/role_combo_box.test.tsx
index 6a041144d0b6a..72fc3a1213521 100644
--- a/x-pack/plugins/security/public/management/role_combo_box/role_combo_box.test.tsx
+++ b/x-pack/plugins/security/public/management/role_combo_box/role_combo_box.test.tsx
@@ -105,6 +105,41 @@ describe('RoleComboBox', () => {
 
     wrapper.find(EuiComboBox).setState({ isListOpen: true });
 
-    expect(findTestSubject(wrapper, 'rolesDropdown-renderOption')).toMatchInlineSnapshot(`null`);
+    expect(findTestSubject(wrapper, 'rolesDropdown-renderOption')).toMatchInlineSnapshot(`
+      Array [
+        <div
+          className="euiText euiText--medium"
+          data-test-subj="rolesDropdown-renderOption"
+        >
+          <EuiTextColor
+            color="default"
+            component="div"
+          >
+            <div
+              className="euiTextColor euiTextColor--default"
+            >
+              role-1
+               
+            </div>
+          </EuiTextColor>
+        </div>,
+        <div
+          className="euiText euiText--medium"
+          data-test-subj="rolesDropdown-renderOption"
+        >
+          <EuiTextColor
+            color="default"
+            component="div"
+          >
+            <div
+              className="euiTextColor euiTextColor--default"
+            >
+              role-2
+               
+            </div>
+          </EuiTextColor>
+        </div>,
+      ]
+    `);
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/tasks/create_new_case.ts b/x-pack/plugins/security_solution/cypress/tasks/create_new_case.ts
index 2dac1065e23eb..b2cde23a8dce2 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/create_new_case.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/create_new_case.ts
@@ -33,7 +33,7 @@ export const createNewCase = (newCase: TestCase) => {
   cy.get(TIMELINE_SEARCHBOX).type(`${newCase.timeline.title}{enter}`);
   cy.get(TIMELINE).should('be.visible');
   cy.wait(300);
-  cy.get(TIMELINE).eq(1).click({ force: true });
+  cy.get(TIMELINE).eq(0).click({ force: true });
 
   cy.get(SUBMIT_BTN).click({ force: true });
   cy.get(LOADING_SPINNER).should('exist');
diff --git a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
index 0f93e954ab853..3b8ef69892cc0 100644
--- a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -99,6 +99,12 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "warning": "#ffce7a",
         },
         "euiCardBottomNodeHeight": "40px",
+        "euiCardPaddingModifiers": Object {
+          "paddingLarge": "24px",
+          "paddingMedium": "16px",
+          "paddingNone": 0,
+          "paddingSmall": "8px",
+        },
         "euiCardSelectButtonBackgrounds": Object {
           "danger": "#4d1f1f",
           "ghost": "#98a2b3",
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index eeb789c14a8f8..6d2f35750d8b1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -99,6 +99,12 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "warning": "#ffce7a",
         },
         "euiCardBottomNodeHeight": "40px",
+        "euiCardPaddingModifiers": Object {
+          "paddingLarge": "24px",
+          "paddingMedium": "16px",
+          "paddingNone": 0,
+          "paddingSmall": "8px",
+        },
         "euiCardSelectButtonBackgrounds": Object {
           "danger": "#4d1f1f",
           "ghost": "#98a2b3",
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
index 5ce53607817eb..d3139601bfa17 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
@@ -6,7 +6,7 @@
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { mount } from 'enzyme';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { ThemeProvider } from 'styled-components';
 
@@ -46,6 +46,15 @@ jest.mock('../use_timeline_status', () => {
   };
 });
 
+// mock for EuiSelectable's virtualization
+jest.mock('react-virtualized-auto-sizer', () => {
+  return ({
+    children,
+  }: {
+    children: (dimensions: { width: number; height: number }) => ReactElement;
+  }) => children({ width: 100, height: 500 });
+});
+
 describe('OpenTimelineModal', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
   const mockInstallPrepackagedTimelines = jest.fn();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 456c1ee541471..4eac5360321c1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { ReactWrapper } from '@elastic/eui/node_modules/@types/enzyme';
+import { ReactWrapper } from 'enzyme';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
index ff103aa7d2c5a..641a4105e1af1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
@@ -17,8 +17,7 @@ import {
   EuiFilterButton,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
-import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
-import { ListProps } from 'react-virtualized';
+import React, { memo, useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -102,7 +101,7 @@ export interface SearchProps {
   placeholder: string;
   onSearch: (arg: string) => void;
   incremental: boolean;
-  inputRef: (arg: HTMLElement) => void;
+  inputRef: (arg: HTMLInputElement | null) => void;
 }
 
 const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
@@ -116,8 +115,10 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
   const [heightTrigger, setHeightTrigger] = useState(0);
   const [searchTimelineValue, setSearchTimelineValue] = useState<string>('');
   const [onlyFavorites, setOnlyFavorites] = useState(false);
-  const [searchRef, setSearchRef] = useState<HTMLElement | null>(null);
+  const [searchRef, setSearchRef] = useState<HTMLInputElement | null>(null);
   const { fetchAllTimeline, timelines, loading, totalCount: timelineCount } = useGetAllTimeline();
+  const selectableListOuterRef = useRef<HTMLDivElement | null>(null);
+  const selectableListInnerRef = useRef<HTMLDivElement | null>(null);
 
   const onSearchTimeline = useCallback((val) => {
     setSearchTimelineValue(val);
@@ -128,24 +129,18 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
   }, [onlyFavorites]);
 
   const handleOnScroll = useCallback(
-    (
-      totalTimelines: number,
-      totalCount: number,
-      {
-        clientHeight,
-        scrollHeight,
-        scrollTop,
-      }: {
-        clientHeight: number;
-        scrollHeight: number;
-        scrollTop: number;
-      }
-    ) => {
-      if (totalTimelines < totalCount) {
+    (totalTimelines: number, totalCount: number, scrollOffset: number) => {
+      if (
+        totalTimelines < totalCount &&
+        selectableListOuterRef.current &&
+        selectableListInnerRef.current
+      ) {
+        const clientHeight = selectableListOuterRef.current!.clientHeight;
+        const scrollHeight = selectableListInnerRef.current!.clientHeight;
         const clientHeightTrigger = clientHeight * 1.2;
         if (
-          scrollTop > 10 &&
-          scrollHeight - scrollTop < clientHeightTrigger &&
+          scrollOffset > 10 &&
+          scrollHeight - scrollOffset < clientHeightTrigger &&
           scrollHeight > heightTrigger
         ) {
           setHeightTrigger(scrollHeight);
@@ -244,8 +239,8 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
     placeholder: useMemo(() => i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), [timelineType]),
     onSearch: onSearchTimeline,
     incremental: false,
-    inputRef: (ref: HTMLElement) => {
-      setSearchRef(ref);
+    inputRef: (node: HTMLInputElement | null) => {
+      setSearchRef(node);
     },
   };
 
@@ -275,13 +270,16 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
         listProps={{
           rowHeight: TIMELINE_ITEM_HEIGHT,
           showIcons: false,
-          virtualizedProps: ({
-            onScroll: handleOnScroll.bind(
-              null,
-              timelines.filter((t) => !hideUntitled || t.title !== '').length,
-              timelineCount
-            ),
-          } as unknown) as ListProps,
+          windowProps: {
+            onScroll: ({ scrollOffset }) =>
+              handleOnScroll(
+                timelines.filter((t) => !hideUntitled || t.title !== '').length,
+                timelineCount,
+                scrollOffset
+              ),
+            outerRef: selectableListOuterRef,
+            innerRef: selectableListInnerRef,
+          },
         }}
         renderOption={renderTimelineOption}
         onChange={handleTimelineChange}
diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/policy_add.test.ts b/x-pack/plugins/snapshot_restore/__jest__/client_integration/policy_add.test.ts
index 17a745fafcc26..f480e937f162a 100644
--- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/policy_add.test.ts
+++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/policy_add.test.ts
@@ -7,6 +7,7 @@
 // import helpers first, this also sets up the mocks
 import { setupEnvironment, pageHelpers, nextTick, getRandomString } from './helpers';
 
+import { ReactElement } from 'react';
 import { act } from 'react-dom/test-utils';
 
 import * as fixtures from '../../test/fixtures';
@@ -21,6 +22,15 @@ jest.mock('ui/i18n', () => {
   return { I18nContext };
 });
 
+// mock for EuiSelectable's virtualization
+jest.mock('react-virtualized-auto-sizer', () => {
+  return ({
+    children,
+  }: {
+    children: (dimensions: { width: number; height: number }) => ReactElement;
+  }) => children({ width: 100, height: 500 });
+});
+
 const POLICY_NAME = 'my_policy';
 const SNAPSHOT_NAME = 'my_snapshot';
 const MIN_COUNT = '5';
diff --git a/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_action.test.ts b/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_action.test.ts
index 440bbd4242fa5..7919d2d2482ae 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_action.test.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_action.test.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { skip } from 'rxjs/operators';
 import * as Rx from 'rxjs';
diff --git a/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_badge.test.ts b/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_badge.test.ts
index 49fe305e3602b..03fb80c3ce75b 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_badge.test.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/custom_time_range_badge.test.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { skip } from 'rxjs/operators';
 import * as Rx from 'rxjs';
diff --git a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/fingerprint_col.test.tsx.snap b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/fingerprint_col.test.tsx.snap
index 9a39394013294..b1da4aa929207 100644
--- a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/fingerprint_col.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/fingerprint_col.test.tsx.snap
@@ -22,7 +22,7 @@ Array [
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"
@@ -69,7 +69,7 @@ Array [
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/uptime_date_picker.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/uptime_date_picker.test.tsx.snap
index 4d23cebf7d5ca..883312110e5ee 100644
--- a/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/uptime_date_picker.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/common/__tests__/__snapshots__/uptime_date_picker.test.tsx.snap
@@ -19,16 +19,15 @@ exports[`UptimeDatePicker component renders properly with mock data 1`] = `
         >
           <button
             aria-label="Date quick select"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
             data-test-subj="superDatePickerToggleQuickMenuButton"
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
             >
               <div
-                aria-hidden="true"
-                class="euiButtonEmpty__icon"
+                class="euiButtonContent__icon"
                 data-euiicon-type="arrowDown"
               />
               <span
@@ -75,11 +74,10 @@ exports[`UptimeDatePicker component renders properly with mock data 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <div
-            aria-hidden="true"
-            class="euiButton__icon"
+            class="euiButtonContent__icon"
             data-euiicon-type="refresh"
           />
           <span
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/license_info.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/license_info.test.tsx.snap
index 09c58b6336871..0327b5b6d6f69 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/license_info.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/license_info.test.tsx.snap
@@ -34,7 +34,7 @@ Array [
           target="_blank"
         >
           <span
-            class="euiButton__content"
+            class="euiButtonContent euiButton__content"
           >
             <span
               class="euiButton__text"
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
index 5c7215edcbce7..97927a71118d5 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
@@ -84,15 +84,15 @@ exports[`ML Flyout component shows license info if no ml available 1`] = `
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="0"
+    tabindex="-1"
   />
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="1"
+    tabindex="-1"
   />
   <div
-    data-focus-lock-disabled="false"
+    data-focus-lock-disabled="disabled"
   >
     <div
       class="euiFlyout euiFlyout--small"
@@ -165,7 +165,7 @@ exports[`ML Flyout component shows license info if no ml available 1`] = `
                     target="_blank"
                   >
                     <span
-                      class="euiButton__content"
+                      class="euiButtonContent euiButton__content"
                     >
                       <span
                         class="euiButton__text"
@@ -226,7 +226,7 @@ exports[`ML Flyout component shows license info if no ml available 1`] = `
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <span
                   class="euiButtonEmpty__text"
@@ -240,13 +240,13 @@ exports[`ML Flyout component shows license info if no ml available 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
               data-test-subj="uptimeMLCreateJobBtn"
               disabled=""
               type="button"
             >
               <span
-                class="euiButton__content"
+                class="euiButtonContent euiButton__content"
               >
                 <span
                   class="euiButton__text"
@@ -263,7 +263,7 @@ exports[`ML Flyout component shows license info if no ml available 1`] = `
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="0"
+    tabindex="-1"
   />
 </div>
 `;
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap
index e7ad86f72dab6..4096d9cdee392 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_integerations.test.tsx.snap
@@ -9,15 +9,16 @@ exports[`ML Integrations renders without errors 1`] = `
   >
     <button
       aria-label="You can enable anomaly detection job or if job is already there you can manage the job or alert."
-      class="euiButton euiButton--primary euiButton--small"
+      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
       data-test-subj="uptimeEnableAnomalyBtn"
+      disabled=""
       type="button"
     >
       <span
-        class="euiButton__content"
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
+          class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
         />
         <span
           class="euiButton__text"
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_job_link.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_job_link.test.tsx.snap
index 1fe7a4cdd3ee5..aaabf0551cff6 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_job_link.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_job_link.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`ML JobLink renders without errors 1`] = `
   target="_blank"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap
index cc3417e09987e..bb4b51894bf82 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_manage_job.test.tsx.snap
@@ -9,15 +9,16 @@ exports[`Manage ML Job renders without errors 1`] = `
   >
     <button
       aria-label="You can enable anomaly detection job or if job is already there you can manage the job or alert."
-      class="euiButton euiButton--primary euiButton--small"
+      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
       data-test-subj="uptimeManageMLJobBtn"
+      disabled=""
       type="button"
     >
       <span
-        class="euiButton__content"
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
+          class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
         />
         <span
           class="euiButton__text"
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
index 5b1e5b935a819..6123773b48a05 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap
@@ -1050,13 +1050,13 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                   aria-controls="generated-id"
                   aria-current="true"
                   aria-label="Page 1 of 2"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-0"
                   disabled=""
                   type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       class="euiButtonEmpty__text"
@@ -1078,7 +1078,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                   rel="noreferrer"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
index cd282f916f46c..3ac75b7e5efa3 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
@@ -26,11 +26,10 @@ exports[`LocationMissingWarning component renders correctly against snapshot 1`]
           type="button"
         >
           <span
-            class="euiButton__content"
+            class="euiButtonContent euiButton__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="alert"
             />
             <span
diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
index b711b464418a2..5fc9a1537cdc7 100644
--- a/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
@@ -373,27 +373,45 @@ exports[`EmptyState component does not render empty state with appropriate base
                                 fill={true}
                                 href="/app/home#/tutorial/uptimeMonitors"
                               >
-                                <a
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
+                                  color="primary"
+                                  element="a"
+                                  fill={true}
                                   href="/app/home#/tutorial/uptimeMonitors"
                                   rel="noreferrer"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <a
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    href="/app/home#/tutorial/uptimeMonitors"
+                                    rel="noreferrer"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="View setup instructions"
-                                        id="xpack.uptime.emptyState.viewSetupInstructions"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        View setup instructions
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </a>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="View setup instructions"
+                                            id="xpack.uptime.emptyState.viewSetupInstructions"
+                                            values={Object {}}
+                                          >
+                                            View setup instructions
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </a>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -405,27 +423,44 @@ exports[`EmptyState component does not render empty state with appropriate base
                                 color="primary"
                                 href="/app/uptime#/settings"
                               >
-                                <a
-                                  className="euiButton euiButton--primary"
+                                <EuiButtonDisplay
+                                  color="primary"
+                                  element="a"
                                   href="/app/uptime#/settings"
                                   rel="noreferrer"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <a
+                                    className="euiButton euiButton--primary"
+                                    href="/app/uptime#/settings"
+                                    rel="noreferrer"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Update index pattern settings"
-                                        id="xpack.uptime.emptyState.updateIndexPattern"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Update index pattern settings
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </a>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Update index pattern settings"
+                                            id="xpack.uptime.emptyState.updateIndexPattern"
+                                            values={Object {}}
+                                          >
+                                            Update index pattern settings
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </a>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -812,27 +847,45 @@ exports[`EmptyState component doesn't render child components when count is fals
                                 fill={true}
                                 href="/app/home#/tutorial/uptimeMonitors"
                               >
-                                <a
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
+                                  color="primary"
+                                  element="a"
+                                  fill={true}
                                   href="/app/home#/tutorial/uptimeMonitors"
                                   rel="noreferrer"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <a
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    href="/app/home#/tutorial/uptimeMonitors"
+                                    rel="noreferrer"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="View setup instructions"
-                                        id="xpack.uptime.emptyState.viewSetupInstructions"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        View setup instructions
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </a>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="View setup instructions"
+                                            id="xpack.uptime.emptyState.viewSetupInstructions"
+                                            values={Object {}}
+                                          >
+                                            View setup instructions
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </a>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -844,27 +897,44 @@ exports[`EmptyState component doesn't render child components when count is fals
                                 color="primary"
                                 href="/app/uptime#/settings"
                               >
-                                <a
-                                  className="euiButton euiButton--primary"
+                                <EuiButtonDisplay
+                                  color="primary"
+                                  element="a"
                                   href="/app/uptime#/settings"
                                   rel="noreferrer"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <a
+                                    className="euiButton euiButton--primary"
+                                    href="/app/uptime#/settings"
+                                    rel="noreferrer"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Update index pattern settings"
-                                        id="xpack.uptime.emptyState.updateIndexPattern"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Update index pattern settings
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </a>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Update index pattern settings"
+                                            id="xpack.uptime.emptyState.updateIndexPattern"
+                                            values={Object {}}
+                                          >
+                                            Update index pattern settings
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </a>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -1256,27 +1326,45 @@ exports[`EmptyState component notifies when index does not exist 1`] = `
                                 fill={true}
                                 href="/app/home#/tutorial/uptimeMonitors"
                               >
-                                <a
-                                  className="euiButton euiButton--primary euiButton--fill"
+                                <EuiButtonDisplay
+                                  color="primary"
+                                  element="a"
+                                  fill={true}
                                   href="/app/home#/tutorial/uptimeMonitors"
                                   rel="noreferrer"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <a
+                                    className="euiButton euiButton--primary euiButton--fill"
+                                    href="/app/home#/tutorial/uptimeMonitors"
+                                    rel="noreferrer"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="View setup instructions"
-                                        id="xpack.uptime.emptyState.viewSetupInstructions"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        View setup instructions
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </a>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="View setup instructions"
+                                            id="xpack.uptime.emptyState.viewSetupInstructions"
+                                            values={Object {}}
+                                          >
+                                            View setup instructions
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </a>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
@@ -1288,27 +1376,44 @@ exports[`EmptyState component notifies when index does not exist 1`] = `
                                 color="primary"
                                 href="/app/uptime#/settings"
                               >
-                                <a
-                                  className="euiButton euiButton--primary"
+                                <EuiButtonDisplay
+                                  color="primary"
+                                  element="a"
                                   href="/app/uptime#/settings"
                                   rel="noreferrer"
                                 >
-                                  <span
-                                    className="euiButton__content"
+                                  <a
+                                    className="euiButton euiButton--primary"
+                                    href="/app/uptime#/settings"
+                                    rel="noreferrer"
                                   >
-                                    <span
-                                      className="euiButton__text"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="left"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <FormattedMessage
-                                        defaultMessage="Update index pattern settings"
-                                        id="xpack.uptime.emptyState.updateIndexPattern"
-                                        values={Object {}}
+                                      <span
+                                        className="euiButtonContent euiButton__content"
                                       >
-                                        Update index pattern settings
-                                      </FormattedMessage>
-                                    </span>
-                                  </span>
-                                </a>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          <FormattedMessage
+                                            defaultMessage="Update index pattern settings"
+                                            id="xpack.uptime.emptyState.updateIndexPattern"
+                                            values={Object {}}
+                                          >
+                                            Update index pattern settings
+                                          </FormattedMessage>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </a>
+                                </EuiButtonDisplay>
                               </EuiButton>
                             </div>
                           </EuiFlexItem>
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap
index 2677fd828c957..63ba8bcf9d26a 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap
@@ -94,15 +94,14 @@ exports[`FilterPopover component returns selected items on popover close 1`] = `
       class="euiPopover__anchor"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
+        class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
         >
           <div
-            aria-hidden="true"
-            class="euiButtonEmpty__icon"
+            class="euiButtonContent__icon"
             data-euiicon-type="arrowDown"
           />
           <span
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx
index a64c7ce698cfe..7fbc9ad733b0e 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_popover.test.tsx
@@ -12,8 +12,6 @@ import { EuiFilterSelectItem } from '@elastic/eui';
 
 describe('FilterPopover component', () => {
   let props: FilterPopoverProps;
-  let setState: jest.Mock<any, any>;
-  let useStateSpy: jest.SpyInstance;
 
   beforeEach(() => {
     props = {
@@ -25,9 +23,6 @@ describe('FilterPopover component', () => {
       selectedItems: ['first', 'third'],
       title: 'bar',
     };
-    setState = jest.fn();
-    useStateSpy = jest.spyOn(React, 'useState');
-    useStateSpy.mockImplementation((initialValue) => [initialValue, setState]);
   });
 
   afterEach(() => {
@@ -41,9 +36,15 @@ describe('FilterPopover component', () => {
 
   it('expands on button click', () => {
     const wrapper = mountWithIntl(<FilterPopover {...props} />);
+
+    // ensure the popover isn't open
+    expect(wrapper.find('EuiPopoverTitle')).toHaveLength(0);
+
     expect(wrapper.find(UptimeFilterButton)).toHaveLength(1);
     wrapper.find(UptimeFilterButton).simulate('click');
-    expect(setState).toHaveBeenCalledTimes(1);
+
+    // check that the popover is now open
+    expect(wrapper.find('EuiPopoverTitle')).toHaveLength(1);
   });
 
   it('does not show item list when loading', () => {
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/filter_status_button.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/filter_status_button.test.tsx.snap
index 0c7dfd8f92453..a7e1400b3d7da 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/filter_status_button.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/filter_status_button.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`FilterStatusButton renders without errors for valid props 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
   data-test-subj="foo"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
index 2ae8454b99893..bfe32acf29e39 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
@@ -871,12 +871,12 @@ exports[`MonitorList component renders the monitor list 1`] = `
         class="euiFilterGroup"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
+          class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
           data-test-subj="xpack.uptime.filterBar.filterStatusAll"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
           >
             <span
               class="euiButtonEmpty__text"
@@ -892,12 +892,12 @@ exports[`MonitorList component renders the monitor list 1`] = `
           </span>
         </button>
         <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--withNext"
+          class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--withNext"
           data-test-subj="xpack.uptime.filterBar.filterStatusUp"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
           >
             <span
               class="euiButtonEmpty__text"
@@ -915,12 +915,12 @@ exports[`MonitorList component renders the monitor list 1`] = `
           </span>
         </button>
         <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton"
+          class="euiButtonEmpty euiButtonEmpty--text euiFilterButton"
           data-test-subj="xpack.uptime.filterBar.filterStatusDown"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
           >
             <span
               class="euiButtonEmpty__text"
@@ -1449,16 +1449,15 @@ exports[`MonitorList component renders the monitor list 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight"
+            class="euiButtonEmpty euiButtonEmpty--text"
             data-test-subj="xpack.uptime.monitorList.pageSizeSelect.popoverOpen"
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
             >
               <div
-                aria-hidden="true"
-                class="euiButtonEmpty__icon"
+                class="euiButtonContent__icon"
                 data-euiicon-type="arrowDown"
               />
               <span
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap
index 12f8cdf1dcddd..2aa6e0ea8b312 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap
@@ -5,12 +5,12 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
   class="euiFilterGroup"
 >
   <button
-    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
+    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
     data-test-subj="xpack.uptime.filterBar.filterStatusAll"
     type="button"
   >
     <span
-      class="euiButtonEmpty__content"
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
       <span
         class="euiButtonEmpty__text"
@@ -26,12 +26,12 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
     </span>
   </button>
   <button
-    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--withNext"
+    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--withNext"
     data-test-subj="xpack.uptime.filterBar.filterStatusUp"
     type="button"
   >
     <span
-      class="euiButtonEmpty__content"
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
       <span
         class="euiButtonEmpty__text"
@@ -49,12 +49,12 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
     </span>
   </button>
   <button
-    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton"
+    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton"
     data-test-subj="xpack.uptime.filterBar.filterStatusDown"
     type="button"
   >
     <span
-      class="euiButtonEmpty__content"
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
       <span
         class="euiButtonEmpty__text"
diff --git a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
index 1b5856bf1f9e2..d7c56a1b8db8d 100644
--- a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap
@@ -54,16 +54,15 @@ Array [
             >
               <button
                 aria-label="Open alert context menu"
-                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--iconRight"
+                class="euiButtonEmpty euiButtonEmpty--primary"
                 data-test-subj="xpack.uptime.alertsPopover.toggleButton"
                 type="button"
               >
                 <span
-                  class="euiButtonEmpty__content"
+                  class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    class="euiButtonEmpty__icon"
+                    class="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                   />
                   <span
@@ -86,11 +85,10 @@ Array [
             rel="noreferrer"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <div
-                aria-hidden="true"
-                class="euiButtonEmpty__icon"
+                class="euiButtonContent__icon"
                 data-euiicon-type="gear"
               />
               <span
@@ -109,11 +107,10 @@ Array [
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <div
-                aria-hidden="true"
-                class="euiButtonEmpty__icon"
+                class="euiButtonContent__icon"
                 data-euiicon-type="plusInCircle"
               />
               <span
@@ -148,16 +145,15 @@ Array [
               >
                 <button
                   aria-label="Date quick select"
-                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                   data-test-subj="superDatePickerToggleQuickMenuButton"
                   type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
                     <div
-                      aria-hidden="true"
-                      class="euiButtonEmpty__icon"
+                      class="euiButtonContent__icon"
                       data-euiicon-type="arrowDown"
                     />
                     <span
@@ -204,11 +200,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButton__content"
+                class="euiButtonContent euiButton__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="refresh"
                 />
                 <span
@@ -299,16 +294,15 @@ Array [
               >
                 <button
                   aria-label="Date quick select"
-                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                   data-test-subj="superDatePickerToggleQuickMenuButton"
                   type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
                     <div
-                      aria-hidden="true"
-                      class="euiButtonEmpty__icon"
+                      class="euiButtonContent__icon"
                       data-euiicon-type="arrowDown"
                     />
                     <span
@@ -355,11 +349,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButton__content"
+                class="euiButtonContent euiButton__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="refresh"
                 />
                 <span
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
index 01702a033d585..853c2c38c939d 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
@@ -900,7 +900,7 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
                   data-test-subj="saveWatchButton"
                   type="submit"
                   iconType="check"
-                  isDisabled={hasErrors || hasActionErrors}
+                  disabled={hasErrors || hasActionErrors}
                   isLoading={isSaving}
                   onClick={async () => {
                     setIsSaving(true);
diff --git a/x-pack/test/functional/apps/maps/add_layer_panel.js b/x-pack/test/functional/apps/maps/add_layer_panel.js
index a17772987ab8e..3902b616cf1ee 100644
--- a/x-pack/test/functional/apps/maps/add_layer_panel.js
+++ b/x-pack/test/functional/apps/maps/add_layer_panel.js
@@ -26,8 +26,9 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('should disable Map application save button', async () => {
-      // saving map should be a no-op because its diabled
-      await testSubjects.click('mapSaveButton');
+      const mapSaveButton = await testSubjects.find('mapSaveButton');
+      const isDisabled = await mapSaveButton.getAttribute('disabled');
+      expect(isDisabled).to.be('true');
 
       const panelOpen = await PageObjects.maps.isLayerAddPanelOpen();
       expect(panelOpen).to.be(true);
diff --git a/x-pack/test/functional/page_objects/graph_page.ts b/x-pack/test/functional/page_objects/graph_page.ts
index fe049327fe38b..88f7e42e65254 100644
--- a/x-pack/test/functional/page_objects/graph_page.ts
+++ b/x-pack/test/functional/page_objects/graph_page.ts
@@ -36,6 +36,9 @@ export function GraphPageProvider({ getService, getPageObjects }: FtrProviderCon
         'aria-disabled',
         'false'
       );
+      // Need document focus to not be on `graphDatasourceButton` so its tooltip does not
+      // obscure the next intended click area. Focus the adjaecnt input instead.
+      await testSubjects.click('queryInput');
     }
 
     async clickAddField() {
diff --git a/yarn.lock b/yarn.lock
index 3a6f59fa8ef3f..41323c5bb2761 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1229,18 +1229,18 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@26.3.1":
-  version "26.3.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-26.3.1.tgz#c05cac2d0b246adb2aab7df54f34ecc6ad4f48e1"
-  integrity sha512-bNCMJIqdx7TrhXtbnYN6nxR4fjfTmdpB1ptVDThpt8+1rMSL7ZvxcVL4xg9Fjf6sKLcEQyXfDhr3u4+N3Sa4FA==
+"@elastic/eui@27.4.0":
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-27.4.0.tgz#4a96a6ac827f53c879451a3eeec093287fcc7255"
+  integrity sha512-wMr52SAWu5MwKUAIMb5Vfz2mw7VwKWuNxBaMlnmBKTo0WK7Trlp8cUyVTVZYy96p1MKyqDvKH6FxVDJ8JZVb6w==
   dependencies:
     "@types/chroma-js" "^2.0.0"
-    "@types/enzyme" "^3.1.13"
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"
     "@types/react-beautiful-dnd" "^12.1.2"
     "@types/react-input-autosize" "^2.0.2"
-    "@types/react-virtualized" "^9.18.7"
+    "@types/react-virtualized-auto-sizer" "^1.0.0"
+    "@types/react-window" "^1.8.1"
     chroma-js "^2.0.4"
     classnames "^2.2.5"
     highlight.js "^9.12.0"
@@ -1251,10 +1251,11 @@
     prop-types "^15.6.0"
     react-ace "^7.0.5"
     react-beautiful-dnd "^13.0.0"
-    react-focus-lock "^1.17.7"
+    react-focus-on "^3.4.1"
     react-input-autosize "^2.2.2"
     react-is "~16.3.0"
-    react-virtualized "^9.21.2"
+    react-virtualized-auto-sizer "^1.0.2"
+    react-window "^1.8.5"
     resize-observer-polyfill "^1.5.0"
     tabbable "^3.0.0"
     text-diff "^1.0.1"
@@ -3667,7 +3668,7 @@
   resolved "https://registry.yarnpkg.com/@types/elasticsearch/-/elasticsearch-5.0.33.tgz#b0fd37dc674f498223b6d68c313bdfd71f4d812b"
   integrity sha512-n/g9pqJEpE4fyUE8VvHNGtl7E2Wv8TCroNwfgAeJKRV4ghDENahtrAo1KMsFNIejBD2gDAlEUa4CM4oEEd8p9Q==
 
-"@types/enzyme@^3.1.13", "@types/enzyme@^3.10.5":
+"@types/enzyme@^3.10.5":
   version "3.10.5"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.5.tgz#fe7eeba3550369eed20e7fb565bfb74eec44f1f0"
   integrity sha512-R+phe509UuUYy9Tk0YlSbipRpfVtIzb/9BHn5pTEtjJTF5LXvUjrIQcZvNyANNEyFrd2YGs196PniNT1fgvOQA==
@@ -4502,6 +4503,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-virtualized-auto-sizer@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272"
+  integrity sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-virtualized@^9.18.7":
   version "9.18.7"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.18.7.tgz#8703d8904236819facff90b8b320f29233160c90"
@@ -4510,6 +4518,13 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
+"@types/react-window@^1.8.1":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
+  integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.23", "@types/react@^16.9.36":
   version "16.9.36"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.36.tgz#ade589ff51e2a903e34ee4669e05dbfa0c1ce849"
@@ -6140,6 +6155,13 @@ argv-split@^2.0.1:
   resolved "https://registry.yarnpkg.com/argv-split/-/argv-split-2.0.1.tgz#be264117790dbd5ccd63ec3f449a1804814ac4c5"
   integrity sha1-viZBF3kNvVzNY+w/RJoYBIFKxMU=
 
+aria-hidden@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.1.tgz#0c356026d3f65e2bd487a3adb73f0c586be2c37e"
+  integrity sha512-M7zYxCcOQPOaxGHoMTKUFD2UNcVFTp9ycrdStLcTPLf8zgTXC3+YcGe+UuzSh5X1BX/0/PtS8xTNy4xyH/6xtw==
+  dependencies:
+    tslib "^1.0.0"
+
 aria-query@3.0.0, aria-query@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
@@ -13424,11 +13446,6 @@ fn.name@1.x.x:
   resolved "https://registry.yarnpkg.com/fn.name/-/fn.name-1.1.0.tgz#26cad8017967aea8731bc42961d04a3d5988accc"
   integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==
 
-focus-lock@^0.5.2:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.5.4.tgz#537644d61b9e90fd97075aa680b8add1de24e819"
-  integrity sha512-A9ngdb0NyI6UygBQ0eD+p8SpLWTkdEDn67I3EGUUcDUfxH694mLA/xBWwhWhoj/2YLtsv2EoQdAx9UOKs8d/ZQ==
-
 focus-lock@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.7.0.tgz#b2bfb0ca7beacc8710a1ff74275fe0dc60a1d88a"
@@ -13940,6 +13957,11 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-own-enumerable-property-symbols@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-2.0.1.tgz#5c4ad87f2834c4b9b4e84549dc1e0650fb38c24b"
@@ -19848,16 +19870,16 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^1.1.0"
 
+"memoize-one@>=3.1.1 <6", memoize-one@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memoize-one@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.1.tgz#35a709ffb6e5f0cb79f9679a96f09ec3a35addfa"
   integrity sha512-S3plzyksLOSF4pkf1Xlb7mA8ZRKZlgp3ebg7rULbfwPT8Ww7uZz5CbLgRKaR92GeXpsNiFbfCRWf/uOrCYIbRg==
 
-memoize-one@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
-  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
-
 memoizee@0.4.X:
   version "0.4.14"
   resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.14.tgz#07a00f204699f9a95c2d9e77218271c7cd610d57"
@@ -23652,14 +23674,6 @@ react-beautiful-dnd@^13.0.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-react-clientside-effect@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.0.tgz#db823695f75e9616a5e4dd6d908e5ea627fb2516"
-  integrity sha512-cVIsGG7SNHsQsCP4+fw7KFUB0HiYiU8hbvL640XaLCbZ31aK8/lj0qOKJ2K+xRjuQz/IM4Q4qclI0aEqTtcXtA==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    shallowequal "^1.1.0"
-
 react-clientside-effect@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
@@ -23830,17 +23844,7 @@ react-fast-compare@2.0.4, react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-focus-lock@^1.17.7:
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.17.7.tgz#ea7fd05d88d0e32833cad241f9333c124c35ba9a"
-  integrity sha512-zDCqkIhuuHCCmWzJghAz6EM6ROx8/sHhQJWjmO6oteQRHX+xTCE5FWIu3zLB5UiUa5eLd66tTh4Fs8YDp0G+6Q==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    focus-lock "^0.5.2"
-    prop-types "^15.6.2"
-    react-clientside-effect "^1.2.0"
-
-react-focus-lock@^2.1.0:
+react-focus-lock@^2.1.0, react-focus-lock@^2.3.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.4.1.tgz#e842cc93da736b5c5d331799012544295cbcee4f"
   integrity sha512-c5ZP56KSpj9EAxzScTqQO7bQQNPltf/W1ZEBDqNDOV1XOIwvAyHX0O7db9ekiAtxyKgnqZjQlLppVg94fUeL9w==
@@ -23852,6 +23856,18 @@ react-focus-lock@^2.1.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-focus-on@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.4.1.tgz#e184f3c44185e341598c5d9d44b2987ad459b240"
+  integrity sha512-KGRIl0iAu+1k1dcX7eQCXF5ZR/nl+XyXN5Ukw/OY80vLaK2b6vDzNqnX0HdYbY5xSUhIRUvMWEzSsdEyPjvk/Q==
+  dependencies:
+    aria-hidden "^1.1.1"
+    react-focus-lock "^2.3.1"
+    react-remove-scroll "^2.3.0"
+    react-style-singleton "^2.1.0"
+    use-callback-ref "^1.2.3"
+    use-sidecar "^1.0.1"
+
 react-grid-layout@^0.16.2:
   version "0.16.6"
   resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.16.6.tgz#9b2407a2b946c2260ebaf66f13b556e1da4efeb2"
@@ -24052,6 +24068,25 @@ react-redux@^7.1.0, react-redux@^7.1.1, react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-remove-scroll-bar@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.0.tgz#edafe9b42a42c0dad9bdd10712772a1f9a39d7b9"
+  integrity sha512-5X5Y5YIPjIPrAoMJxf6Pfa7RLNGCgwZ95TdnVPgPuMftRfO8DaC7F4KP1b5eiO8hHbe7u+wZNDbYN5WUTpv7+g==
+  dependencies:
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+
+react-remove-scroll@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.3.0.tgz#3af06fe2f7130500704b676cdef94452c08fe593"
+  integrity sha512-UqVimLeAe+5EHXKfsca081hAkzg3WuDmoT9cayjBegd6UZVhlTEchleNp9J4TMGkb/ftLve7ARB5Wph+HJ7A5g==
+  dependencies:
+    react-remove-scroll-bar "^2.1.0"
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+    use-callback-ref "^1.2.3"
+    use-sidecar "^1.0.1"
+
 react-resizable@1.x:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.7.5.tgz#83eb75bb3684da6989bbbf4f826e1470f0af902e"
@@ -24176,6 +24211,15 @@ react-sticky@^6.0.3:
     prop-types "^15.5.8"
     raf "^3.3.0"
 
+react-style-singleton@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4"
+  integrity sha512-DH4ED+YABC1dhvSDYGGreAHmfuTXj6+ezT3CmHoqIEfxNgEYfIMoOtmbRp42JsUst3IPqBTDL+8r4TF7EWhIHw==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^1.0.0"
+
 react-syntax-highlighter@^11.0.2:
   version "11.0.2"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
@@ -24250,6 +24294,11 @@ react-use@^13.27.0:
     ts-easing "^0.2.0"
     tslib "^1.10.0"
 
+react-virtualized-auto-sizer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
+  integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
+
 react-virtualized@^9.18.5:
   version "9.20.1"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.20.1.tgz#02dc08fe9070386b8c48e2ac56bce7af0208d22d"
@@ -24303,6 +24352,14 @@ react-visibility-sensor@^5.1.1:
   dependencies:
     prop-types "^15.7.2"
 
+react-window@^1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
+  integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^16.12.0, react@^16.8.3, react@^16.8.5:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
@@ -28656,7 +28713,7 @@ tsd@^0.7.4:
     typescript "^3.0.1"
     update-notifier "^2.5.0"
 
-tslib@^1, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1, tslib@^1.0.0, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
@@ -29376,7 +29433,7 @@ url@0.11.0, url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-callback-ref@^1.2.1:
+use-callback-ref@^1.2.1, use-callback-ref@^1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c"
   integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ==