diff --git a/package.json b/package.json
index 51a41cbbab9ff..58f13612c513e 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,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.2.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 8398d1c081da6..eb84ff192d4fc 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.2.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/dashboard_container.test.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
index 3cebe2b847155..196143dcd96ab 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
@@ -17,8 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
 import { nextTick } from 'test_utils/enzyme_helpers';
 import { isErrorEmbeddable, ViewMode } from '../../embeddable_plugin';
 import { DashboardContainer, DashboardContainerOptions } from './dashboard_container';
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 733ea11c1eb64..785bfc35a5068 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 099ec2e5b1ffc..0d2b93c7e3728 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 0793072fd0cf4..d39c5d64aa23c 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 ff9f466a8d553..dfad2ce169511 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 311efae49f735..a926e566b1c93 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/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 8f564e09bf4b2..182bf9dcc6bd3 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 b0b674ad7b6ee..ae3419061225f 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/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index f3e5520a14fe2..0ea4b51b0bee3 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.2.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..a0e45a09d2e76 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.2.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..9cb22d3c227a8 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.2.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/x-pack/package.json b/x-pack/package.json
index 3a9b3ca606de6..00ee9f32d39b4 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -196,7 +196,7 @@
     "@elastic/apm-rum-react": "^1.1.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.2.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/__examples__/__snapshots__/time_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__examples__/__snapshots__/time_filter.stories.storyshot
index 2973103d421a9..9cc6643b75ac1 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__examples__/__snapshots__/time_filter.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__examples__/__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/__examples__/__snapshots__/asset_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
index 1b8f1480759f6..4f44c0cf85f17 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__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/__examples__/__snapshots__/custom_element_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.stories.storyshot
index 7fc5413938d1b..0467161c58c34 100644
--- a/x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/custom_element_modal/__examples__/__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/__examples__/__snapshots__/element_card.stories.storyshot b/x-pack/plugins/canvas/public/components/element_card/__examples__/__snapshots__/element_card.stories.storyshot
index 0b0e0cb28953c..fb9b465cea813 100644
--- a/x-pack/plugins/canvas/public/components/element_card/__examples__/__snapshots__/element_card.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/element_card/__examples__/__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/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
index d59d03578a363..a40265f0353e7 100644
--- a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__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/__examples__/__snapshots__/element_grid.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_grid.stories.storyshot
index 1c506819df1fb..f85fb7f18ce62 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_grid.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__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/__examples__/__snapshots__/saved_elements_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/saved_elements_modal.stories.storyshot
index 04b2184f27462..fcc22cbe78134 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/saved_elements_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__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/var_config/__examples__/__snapshots__/delete_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__examples__/__snapshots__/delete_var.stories.storyshot
index 64f8cba665c15..aed7979fe7237 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__examples__/__snapshots__/delete_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__examples__/__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/__examples__/__snapshots__/edit_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__examples__/__snapshots__/edit_var.stories.storyshot
index 65043e13e5143..ce3084ea4fbb4 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__examples__/__snapshots__/edit_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__examples__/__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/__examples__/__snapshots__/edit_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/__snapshots__/edit_menu.stories.storyshot
index 42c59d41dca62..032553d015909 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/__snapshots__/edit_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/__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/__examples__/__snapshots__/element_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/__snapshots__/element_menu.stories.storyshot
index 82ed28acced7d..a5eec8e074e76 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/__snapshots__/element_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__examples__/__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/__examples__/__snapshots__/pdf_panel.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/pdf_panel.stories.storyshot
index 9ad2714a78ec9..517a93f4e6db3 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/pdf_panel.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__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/__examples__/__snapshots__/share_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/share_menu.stories.storyshot
index 1610ef5fd1fac..bd0bb7159d147 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__snapshots__/share_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__examples__/__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/__examples__/__snapshots__/view_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot
index eb45f97452ae1..fb85e73757b70 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__examples__/__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/__examples__/__snapshots__/canvas.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.stories.storyshot
index 81e75ff5ee0d9..e0970b57ed971 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__snapshots__/canvas.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/__examples__/__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/__examples__/__snapshots__/footer.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.stories.storyshot
index 6ff39b723a49a..2d3a9c460272c 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/footer.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__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/__examples__/__snapshots__/page_controls.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/page_controls.stories.storyshot
index 18eedea470c38..e58d4cccf3959 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__snapshots__/page_controls.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/__examples__/__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/__examples__/__snapshots__/autoplay_settings.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.stories.storyshot
index 201592df65a20..0940cd2d2693c 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__snapshots__/autoplay_settings.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__examples__/__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/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/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
index 7ecbc9a53cb21..080f9fbfb43cc 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);
     },
   };
 
@@ -276,13 +271,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/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 0d6e9743f0f4b..c867bf1929398 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 15f5c03512bf1..c14e1763ca004 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
@@ -8,15 +8,16 @@ exports[`ML Integrations renders without errors 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      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 fabe94763e07d..a87374ccb4d0a 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
@@ -8,15 +8,16 @@ exports[`Manage ML Job renders without errors 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      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/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 42ac821c10c7a..7404939d7a600 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
@@ -856,12 +856,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"
@@ -877,12 +877,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"
@@ -900,12 +900,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"
@@ -1434,16 +1434,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 60d073330b35d..6dd15913bf486 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39,6 +39,13 @@
   dependencies:
     "@babel/highlight" "^7.10.1"
 
+"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/compat-data@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.10.1.tgz#b1085ffe72cd17bf2c0ee790fc09f9626011b2db"
@@ -101,6 +108,28 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.7.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.5.tgz#1f15e2cca8ad9a1d78a38ddba612f5e7cdbbd330"
+  integrity sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.10.5"
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helpers" "^7.10.4"
+    "@babel/parser" "^7.10.5"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.5"
+    "@babel/types" "^7.10.5"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.0.0", "@babel/generator@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.4.tgz#12441e90c3b3c4159cdecf312075bf1a8ce2dbce"
@@ -121,6 +150,15 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.10.5", "@babel/generator@^7.7.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.5.tgz#1b903554bc8c583ee8d25f1e8969732e6b829a69"
+  integrity sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==
+  dependencies:
+    "@babel/types" "^7.10.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.5.tgz#27f0917741acc41e6eaaced6d68f96c3fa9afaf9"
@@ -145,6 +183,13 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-annotate-as-pure@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.1.tgz#0ec7d9be8174934532661f87783eb18d72290059"
@@ -170,6 +215,15 @@
     "@babel/helper-module-imports" "^7.10.1"
     "@babel/types" "^7.10.1"
 
+"@babel/helper-builder-react-jsx-experimental@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.5.tgz#f35e956a19955ff08c1258e44a515a6d6248646b"
+  integrity sha512-Buewnx6M4ttG+NLkKyt7baQn7ScC/Td+e99G914fRU8fGIUivDDgVIQeDHFa5e4CRSJQt58WpNHhsAZgtzVhsg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.10.5"
+
 "@babel/helper-builder-react-jsx-experimental@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.0.tgz#066d80262ade488f9c1b1823ce5db88a4cedaa43"
@@ -187,6 +241,14 @@
     "@babel/helper-annotate-as-pure" "^7.10.1"
     "@babel/types" "^7.10.1"
 
+"@babel/helper-builder-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
+  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-builder-react-jsx@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz#16bf391990b57732700a3278d4d9a81231ea8d32"
@@ -302,6 +364,15 @@
     "@babel/template" "^7.10.1"
     "@babel/types" "^7.10.1"
 
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-function-name@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
@@ -327,6 +398,13 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-get-function-arity@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
@@ -355,6 +433,13 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-member-expression-to-functions@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz#172f56e7a63e78112f3a04055f24365af702e7ee"
+  integrity sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==
+  dependencies:
+    "@babel/types" "^7.10.5"
+
 "@babel/helper-member-expression-to-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
@@ -376,6 +461,13 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-module-transforms@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz#24e2f08ee6832c60b157bb0936c86bef7210c622"
@@ -389,6 +481,19 @@
     "@babel/types" "^7.10.1"
     lodash "^4.17.13"
 
+"@babel/helper-module-transforms@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.5.tgz#120c271c0b3353673fcdfd8c053db3c544a260d6"
+  integrity sha512-4P+CWMJ6/j1W915ITJaUkadLObmCRRSC234uctJfn/vHrsLNxsR8dwlcXv9ZhJWzl77awf+mWXSZEKt5t0OnlA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.5"
+    lodash "^4.17.19"
+
 "@babel/helper-module-transforms@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
@@ -409,6 +514,13 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-optimise-call-expression@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
@@ -426,6 +538,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz#ec5a5cf0eec925b66c60580328b122c01230a127"
   integrity sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==
 
+"@babel/helper-plugin-utils@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-regex@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.1.tgz#021cf1a7ba99822f993222a001cc3fec83255b96"
@@ -472,6 +589,16 @@
     "@babel/traverse" "^7.10.1"
     "@babel/types" "^7.10.1"
 
+"@babel/helper-replace-supers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-replace-supers@^7.8.3", "@babel/helper-replace-supers@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz#5ada744fd5ad73203bf1d67459a27dcba67effc8"
@@ -490,6 +617,14 @@
     "@babel/template" "^7.10.1"
     "@babel/types" "^7.10.1"
 
+"@babel/helper-simple-access@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
+  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
@@ -505,6 +640,13 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-split-export-declaration@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz#2c70576eaa3b5609b24cb99db2888cc3fc4251d1"
+  integrity sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-split-export-declaration@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
@@ -517,6 +659,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz#5770b0c1a826c4f53f5ede5e153163e0318e94b5"
   integrity sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==
 
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
 "@babel/helper-validator-identifier@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.0.tgz#ad53562a7fc29b3b9a91bbf7d10397fd146346ed"
@@ -556,6 +703,15 @@
     "@babel/traverse" "^7.10.1"
     "@babel/types" "^7.10.1"
 
+"@babel/helpers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044"
+  integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helpers@^7.9.0":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.2.tgz#b42a81a811f1e7313b88cba8adc66b3d9ae6c09f"
@@ -583,6 +739,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.2.0", "@babel/parser@^7.7.5", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
@@ -593,6 +758,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.2.tgz#871807f10442b92ff97e4783b9b54f6a0ca812d0"
   integrity sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==
 
+"@babel/parser@^7.10.4", "@babel/parser@^7.10.5", "@babel/parser@^7.6.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
+  integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
+
 "@babel/plugin-proposal-async-generator-functions@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.1.tgz#6911af5ba2e615c4ff3c497fe2f47b35bf6d7e55"
@@ -835,6 +1005,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-jsx@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
@@ -1297,6 +1474,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
+"@babel/plugin-transform-react-display-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
+  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-react-display-name@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
@@ -1313,6 +1497,15 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-syntax-jsx" "^7.10.1"
 
+"@babel/plugin-transform-react-jsx-development@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.4.tgz#6ec90f244394604623880e15ebc3c34c356258ba"
+  integrity sha512-RM3ZAd1sU1iQ7rI2dhrZRZGv0aqzNQMbkIUCS1txYpi9wHQ2ZHNjo5TwX+UD6pvFW4AbWqLVYvKy5qJSAyRGjQ==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx-development@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz#3c2a130727caf00c2a293f0aed24520825dbf754"
@@ -1330,6 +1523,14 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-syntax-jsx" "^7.10.1"
 
+"@babel/plugin-transform-react-jsx-self@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
+  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx-self@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz#f4f26a325820205239bb915bad8e06fcadabb49b"
@@ -1346,6 +1547,14 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-syntax-jsx" "^7.10.1"
 
+"@babel/plugin-transform-react-jsx-source@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
+  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx-source@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz#89ef93025240dd5d17d3122294a093e5e0183de0"
@@ -1364,6 +1573,16 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-syntax-jsx" "^7.10.1"
 
+"@babel/plugin-transform-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
+  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx@^7.9.4":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f"
@@ -1382,6 +1601,14 @@
     "@babel/helper-annotate-as-pure" "^7.10.1"
     "@babel/helper-plugin-utils" "^7.10.1"
 
+"@babel/plugin-transform-react-pure-annotations@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
+  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-regenerator@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.1.tgz#10e175cbe7bdb63cc9b39f9b3f823c5c7c5c5490"
@@ -1706,6 +1933,19 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.1"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.1"
 
+"@babel/preset-react@^7.7.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
+  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
+    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
+
 "@babel/preset-typescript@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.10.1.tgz#a8d8d9035f55b7d99a2461a0bdc506582914d07e"
@@ -1725,6 +1965,14 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
+"@babel/runtime-corejs2@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.6.0.tgz#6fcd37c2580070817d62f219db97f67e26f50f9c"
+  integrity sha512-zbPQzlbyJab2xCYb6VaESn8Tk/XiVpQJU7WvIKiQCwlFyc2NSCzKjqtBXCvpZBbiTOHCx10s2656REVnySwb+A==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime-corejs2@^7.2.0", "@babel/runtime-corejs2@^7.6.3":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.9.2.tgz#f11d074ff99b9b4319b5ecf0501f12202bf2bf4d"
@@ -1784,6 +2032,15 @@
     "@babel/parser" "^7.10.1"
     "@babel/types" "^7.10.1"
 
+"@babel/template@^7.10.4", "@babel/template@^7.7.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.0.tgz#d3882c2830e513f4fe4cec9fe76ea1cc78747892"
@@ -1814,6 +2071,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.10.4", "@babel/traverse@^7.10.5", "@babel/traverse@^7.7.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.5.tgz#77ce464f5b258be265af618d8fddf0536f20b564"
+  integrity sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.10.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/parser" "^7.10.5"
+    "@babel/types" "^7.10.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
 "@babel/traverse@^7.7.4":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
@@ -1847,6 +2119,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.7.1":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15"
+  integrity sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.3.3":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.6.tgz#2c5502b427251e9de1bd2dff95add646d95cc9f7"
@@ -2052,32 +2333,35 @@
     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.2.0":
+  version "27.2.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-27.2.0.tgz#75f986f4ed786b238c37050ced7c903f4b1a174f"
+  integrity sha512-oa6DKwLPzKFs/tHAae83zooJ78FSzyWhn6vYAgGz/ywhQbheiztVWXVIs+OCpiqekilklr4dENxotYuTBzrwyw==
   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"
     html "^1.0.0"
+    html-format "^1.0.1"
     keymirror "^0.1.1"
     lodash "^4.17.11"
     numeral "^2.0.6"
     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-view "^2.3.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"
@@ -2390,6 +2674,11 @@
     "@hapi/bourne" "1.x.x"
     "@hapi/hoek" "8.x.x"
 
+"@iarna/toml@2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
+  integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
+
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@@ -3123,6 +3412,68 @@
   resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.12.14.tgz#0e0810a0a174e50e22dfe8edb30599840712f22d"
   integrity sha512-518yewjSga1jLdiLrcmpMFlaba5P+50b0TWNFUpC+SL9Yzf0kMi57qw+bMl+rQ08cGqH1vLx4eg9YFUbZXgZ0Q==
 
+"@miksu/prettier@^1.18.3":
+  version "1.18.5"
+  resolved "https://registry.yarnpkg.com/@miksu/prettier/-/prettier-1.18.5.tgz#b17fc11246a2ad9cb29088c0b44deccef1ecf1bf"
+  integrity sha512-iK/TXWpsC4WMslhnlbs5A9imUa2pGTsvaBCsf6tq5AuTId2svlv9nqQf03evIh5RA+cppkydtYDx3UOCwfACeg==
+  dependencies:
+    "@babel/code-frame" "7.5.5"
+    "@babel/parser" "^7.6.0"
+    "@babel/runtime-corejs2" "7.6.0"
+    "@iarna/toml" "2.2.3"
+    "@typescript-eslint/typescript-estree" "1.11.0"
+    angular-estree-parser "1.1.5"
+    camelcase "4.1.0"
+    chalk "2.1.0"
+    dashify "0.2.2"
+    dedent "0.7.0"
+    diff "3.5.0"
+    editorconfig-to-prettier "0.1.1"
+    escape-string-regexp "1.0.5"
+    esutils "2.0.2"
+    find-cache-dir "1.0.0"
+    find-parent-dir "0.3.0"
+    find-project-root "1.1.1"
+    get-stream "4.1.0"
+    globby "6.1.0"
+    html-element-attributes "2.0.0"
+    html-styles "1.0.0"
+    html-tag-names "1.1.2"
+    ignore "4.0.6"
+    is-ci "2.0.0"
+    jest-docblock "23.2.0"
+    json-stable-stringify "1.0.1"
+    leven "2.1.0"
+    lines-and-columns "1.1.6"
+    linguist-languages "7.5.1"
+    lodash.uniqby "4.7.0"
+    mem "4.0.0"
+    minimatch "3.0.4"
+    minimist "1.2.0"
+    n-readlines "1.0.0"
+    normalize-path "3.0.0"
+    parse-srcset ikatyang/parse-srcset#54eb9c1cb21db5c62b4d0e275d7249516df6f0ee
+    postcss-media-query-parser "0.2.3"
+    postcss-selector-parser "2.2.3"
+    postcss-values-parser "1.5.0"
+    regexp-util "1.2.2"
+    remark-math "1.0.4"
+    resolve "1.5.0"
+    semver "5.4.1"
+    string-width "3.0.0"
+    unified "6.1.6"
+    vnopts "1.0.2"
+    write-file-atomic "2.3.0"
+    yaml-unist-parser "1.0.0"
+
+"@miksu/react-tiny-popover@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@miksu/react-tiny-popover/-/react-tiny-popover-3.5.1.tgz#2113ac34b7b287ffb2d22b363788a8121cb8f243"
+  integrity sha512-YSpc7wznyAzQdkQhrLwRNTvLX96swskKvWTNGkilFB2MyC6E0xMem4EtX93DYXHK0vslhpYMtqbjcAWQcLhZeQ==
+  dependencies:
+    "@types/underscore" "^1.8.13"
+    underscore "^1.9.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -4481,7 +4832,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==
@@ -5328,6 +5679,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"
@@ -5336,6 +5694,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"
@@ -5620,6 +5985,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/underscore@^1.8.13":
+  version "1.10.9"
+  resolved "https://registry.yarnpkg.com/@types/underscore/-/underscore-1.10.9.tgz#ba7a9cfc15873e67821611503a34a7c26bf7264f"
+  integrity sha512-mKzbGzZ02nXKSV2VJdY92KNzwV7x4Zq626/4qR+7nJEceyKGk5gJXCi0mQqp3tEUa3GTc8uiuxqm4QyIaP0I1Q==
+
 "@types/undertaker-registry@*":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/undertaker-registry/-/undertaker-registry-1.0.1.tgz#4306d4a03d7acedb974b66530832b90729e1d1da"
@@ -5822,6 +6192,14 @@
     "@typescript-eslint/typescript-estree" "2.34.0"
     eslint-visitor-keys "^1.1.0"
 
+"@typescript-eslint/typescript-estree@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.11.0.tgz#b7b5782aab22e4b3b6d84633652c9f41e62d37d5"
+  integrity sha512-fquUHF5tAx1sM2OeRCC7wVxFd1iMELWMGCzOSmJ3pLzArj9+kRixdlC4d5MncuzXpjEqc6045p3KwM0o/3FuUA==
+  dependencies:
+    lodash.unescape "4.0.1"
+    semver "5.5.0"
+
 "@typescript-eslint/typescript-estree@2.15.0":
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.15.0.tgz#79ae52eed8701b164d91e968a65d85a9105e76d3"
@@ -6425,6 +6803,14 @@ angular-elastic@^2.5.1:
   dependencies:
     angular ">=1.0.6"
 
+angular-estree-parser@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.5.tgz#f278e03e648a2bfb6c5dcdf17ba3273f3251b74a"
+  integrity sha512-M82O7HGwgS6mBfQq9ijCwuP4uYgSgycmNWQOHomToWRAdfX/c2pAwpCYdbVG9lc6Go8mr5+A2bRQnykdCVdpuA==
+  dependencies:
+    lines-and-columns "^1.1.6"
+    tslib "^1.9.3"
+
 angular-mocks@^1.7.9:
   version "1.7.9"
   resolved "https://registry.yarnpkg.com/angular-mocks/-/angular-mocks-1.7.9.tgz#0a3b7e28b9a493b4e3010ed2b0f69a68e9b4f79b"
@@ -6582,7 +6968,7 @@ ansi-styles@^2.2.1:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
   integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
-ansi-styles@^3.0.0, ansi-styles@^3.2.1:
+ansi-styles@^3.0.0, ansi-styles@^3.1.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
@@ -6979,6 +7365,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"
@@ -9009,6 +9402,11 @@ camelcase-keys@^6.2.2:
     map-obj "^4.0.0"
     quick-lru "^4.0.1"
 
+camelcase@4.1.0, camelcase@^4.0.0, camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
+
 camelcase@5.0.0, camelcase@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
@@ -9034,11 +9432,6 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
   integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
 
-camelcase@^4.0.0, camelcase@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
-  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
-
 camelcase@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
@@ -9161,6 +9554,15 @@ chai@3.5.0:
     deep-eql "^0.1.3"
     type-detect "^1.0.0"
 
+chalk@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  integrity sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
 chalk@2.4.2, chalk@^2.3.2, chalk@^2.4.2, chalk@~2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -11279,6 +11681,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dashify@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dashify/-/dashify-0.2.2.tgz#6a07415a01c91faf4a32e38d9dfba71f61cb20fe"
+  integrity sha1-agdBWgHJH69KMuONnfunH2HLIP4=
+
 dashify@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dashify/-/dashify-0.1.0.tgz#107daf9cca5e326e30a8b39ffa5048b6684922ea"
@@ -11462,7 +11869,7 @@ decompress@^4.0.0:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
-dedent@^0.7.0:
+dedent@0.7.0, dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
@@ -11791,7 +12198,7 @@ detect-libc@^1.0.2:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-detect-newline@2.X:
+detect-newline@2.X, detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
@@ -12345,6 +12752,11 @@ editions@^2.1.3:
     errlop "^1.1.2"
     semver "^6.3.0"
 
+editorconfig-to-prettier@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/editorconfig-to-prettier/-/editorconfig-to-prettier-0.1.1.tgz#7391c7067dfd68ffee65afc2c4fbe4fba8d4219a"
+  integrity sha512-MMadSSVRDb4uKdxV6bCXXN4cTsxIsXYtV4XdPu6FOCSAw6zsCIDA+QEktEU+u6h+c/mTrul5NR+pwFpPxwetiQ==
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -13372,7 +13784,7 @@ estree-is-function@^1.0.0:
   resolved "https://registry.yarnpkg.com/estree-is-function/-/estree-is-function-1.0.0.tgz#c0adc29806d7f18a74db7df0f3b2666702e37ad2"
   integrity sha512-nSCWn1jkSq2QAtkaVLJZY2ezwcFO161HVc174zL1KPW3RJ+O6C3eJb8Nx7OXzvhoEv+nLgSR1g71oWUHUDTrJA==
 
-esutils@^2.0.2:
+esutils@2.0.2, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
   integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
@@ -14231,6 +14643,15 @@ finalhandler@1.1.2, finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-cache-dir@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  integrity sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -14249,6 +14670,16 @@ find-cache-dir@^3.0.0, find-cache-dir@^3.2.0, find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-parent-dir@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
+  integrity sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=
+
+find-project-root@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/find-project-root/-/find-project-root-1.1.1.tgz#d242727a2d904725df5714f23dfdcdedda0b6ef8"
+  integrity sha1-0kJyei2QRyXfVxTyPf3N7doLbvg=
+
 find-root@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
@@ -14417,11 +14848,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"
@@ -14950,6 +15376,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"
@@ -14987,6 +15418,13 @@ get-stream@3.0.0, get-stream@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
   integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
 
+get-stream@4.1.0, get-stream@^4.0.0, get-stream@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
 get-stream@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
@@ -14995,13 +15433,6 @@ get-stream@^2.2.0:
     object-assign "^4.0.1"
     pinkie-promise "^2.0.0"
 
-get-stream@^4.0.0, get-stream@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
-  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
-  dependencies:
-    pump "^3.0.0"
-
 get-stream@^5.0.0, get-stream@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
@@ -15363,6 +15794,17 @@ globalthis@^1.0.0:
   dependencies:
     define-properties "^1.1.3"
 
+globby@6.1.0, globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 globby@8.0.2, globby@^8.0.1:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
@@ -15426,17 +15868,6 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
-  dependencies:
-    array-union "^1.0.1"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
 globby@^9.1.0, globby@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
@@ -16563,6 +16994,11 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+html-element-attributes@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-element-attributes/-/html-element-attributes-2.0.0.tgz#2c9fcbd4738c560b357d0232aa3449676b10ab77"
+  integrity sha512-eZgT5wMPRqOCG9pIJ//IdX43i940XACFhKfgKUdspWUGsS/MXq+3ilrK5v6Esl/qxQpMnPt5+uVK443konZkNg==
+
 html-element-map@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.2.0.tgz#dfbb09efe882806af63d990cf6db37993f099f22"
@@ -16587,6 +17023,11 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-format@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/html-format/-/html-format-1.0.1.tgz#3f518be1a1123e2d378716aef662c07ed2a0e008"
+  integrity sha512-ePp+h+akaQiLeCGPefWQ4QJXVXhWx4sU4ZxJVFlaY0AeVgh/tnHGTL27ao09JrdEEelXYMAWi4ynKKheck4tdw==
+
 html-loader@^0.5.5:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.5.tgz#6356dbeb0c49756d8ebd5ca327f16ff06ab5faea"
@@ -16611,6 +17052,16 @@ html-minifier@^3.5.20, html-minifier@^3.5.8:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
+html-styles@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/html-styles/-/html-styles-1.0.0.tgz#a18061fd651f99c6b75c45c8e0549a3bc3e01a75"
+  integrity sha1-oYBh/WUfmca3XEXI4FSaO8PgGnU=
+
+html-tag-names@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/html-tag-names/-/html-tag-names-1.1.2.tgz#f65168964c5a9c82675efda882875dcb2a875c22"
+  integrity sha1-9lFolkxanIJnXv2ogoddyyqHXCI=
+
 html-to-react@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.3.4.tgz#647b3a54fdec73a6461864b129fb0d1eec7d4589"
@@ -16959,16 +17410,16 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+ignore@4.0.6, ignore@^4.0.3, ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
 ignore@^3.1.2, ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-ignore@^4.0.3, ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
 ignore@^5.1.1, ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
@@ -18574,6 +19025,13 @@ jest-diff@^25.1.0, jest-diff@^25.2.1, jest-diff@^25.5.0:
     jest-get-type "^25.2.6"
     pretty-format "^25.5.0"
 
+jest-docblock@23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-23.2.0.tgz#f085e1f18548d99fdd69b20207e6fd55d91383a7"
+  integrity sha1-8IXh8YVI2Z/dabICB+b9VdkTg6c=
+  dependencies:
+    detect-newline "^2.1.0"
+
 jest-docblock@^25.3.0:
   version "25.3.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.3.0.tgz#8b777a27e3477cd77a168c05290c471a575623ef"
@@ -19235,7 +19693,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+json-stable-stringify@1.0.1, json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
   integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
@@ -19772,6 +20230,11 @@ less-loader@5.0.0:
     request "2.81.0"
     source-map "^0.5.3"
 
+leven@2.1.0, leven@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+  integrity sha1-wuep93IJTe6dNCAq6KzORoeHVYA=
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -19838,11 +20301,16 @@ linebreak@^1.0.2:
     brfs "^2.0.2"
     unicode-trie "^1.0.0"
 
-lines-and-columns@^1.1.6:
+lines-and-columns@1.1.6, lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linguist-languages@7.5.1:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/linguist-languages/-/linguist-languages-7.5.1.tgz#458f34ac40b90b64963569de29caaa0dc9621c7b"
+  integrity sha512-kZBOK2+xcub7UIVxzpWZoWQhfJ6zrpimo+/FXn3XuLCbvdwNJ3A/GVz5AFVFVSbYRoRCGD9f9qIf7cUHDklLkA==
+
 linkify-it@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
@@ -20347,7 +20815,12 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.11, lodash@4.17.19, lodash@>4.17.4, lodash@^4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.10.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.16, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@~4.17.10, lodash@~4.17.15, lodash@~4.17.5:
+lodash.uniqby@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
+  integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
+
+lodash@4.17.11, lodash@4.17.19, lodash@>4.17.4, lodash@^4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.10.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.16, lodash@^4.17.19, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@~4.17.10, lodash@~4.17.15, lodash@~4.17.5:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@@ -20886,14 +21359,7 @@ mem-fs@^1.1.0:
     vinyl "^1.1.0"
     vinyl-file "^2.0.0"
 
-mem@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
-  integrity sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=
-  dependencies:
-    mimic-fn "^1.0.0"
-
-mem@^4.0.0:
+mem@4.0.0, mem@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
   integrity sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==
@@ -20902,16 +21368,23 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^1.1.0"
 
-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==
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  integrity sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=
+  dependencies:
+    mimic-fn "^1.0.0"
 
-memoize-one@^5.1.1:
+"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==
+
 memoizee@0.4.X:
   version "0.4.14"
   resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.14.tgz#07a00f204699f9a95c2d9e77218271c7cd610d57"
@@ -21707,6 +22180,11 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+n-readlines@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/n-readlines/-/n-readlines-1.0.0.tgz#c353797f216c253fdfef7e91da4e8b17c29a91a6"
+  integrity sha512-ISDqGcspVu6U3VKqtJZG1uR55SmNNF9uK0EMq1IvNVVZOui6MW6VR0+pIZhqz85ORAGp+4zW+5fJ/SE7bwEibA==
+
 nan@^2.12.1, nan@^2.13.2:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
@@ -23370,6 +23848,10 @@ parse-path@^4.0.0:
     is-ssh "^1.3.0"
     protocols "^1.4.0"
 
+parse-srcset@ikatyang/parse-srcset#54eb9c1cb21db5c62b4d0e275d7249516df6f0ee:
+  version "1.0.2"
+  resolved "https://codeload.github.com/ikatyang/parse-srcset/tar.gz/54eb9c1cb21db5c62b4d0e275d7249516df6f0ee"
+
 parse-url@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-5.0.1.tgz#99c4084fc11be14141efa41b3d117a96fcb9527f"
@@ -23885,6 +24367,11 @@ postcss-loader@^3.0.0:
     postcss-load-config "^2.0.0"
     schema-utils "^1.0.0"
 
+postcss-media-query-parser@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=
+
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
@@ -23925,6 +24412,15 @@ postcss-prefix-selector@^1.7.2:
   dependencies:
     postcss "^7.0.0"
 
+postcss-selector-parser@2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+  integrity sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
@@ -23960,7 +24456,7 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss-values-parser@^1.5.0:
+postcss-values-parser@1.5.0, postcss-values-parser@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz#5d9fa63e2bcb0179ce48f3235303765eb89f3047"
   integrity sha512-3M3p+2gMp0AH3da530TlX8kiO1nxdTnc3C6vr8dMxRLIlh8UYkz0/wcwptSXjhtx2Fr0TySI7a+BHDQ8NL7LaQ==
@@ -24109,6 +24605,11 @@ pretty-ms@^4.0.0:
   dependencies:
     parse-ms "^2.0.0"
 
+prism-react-renderer@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
+  integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==
+
 prismjs@^1.8.4, prismjs@~1.16.0:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.16.0.tgz#406eb2c8aacb0f5f0f1167930cb83835d10a4308"
@@ -24874,14 +25375,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"
@@ -25052,17 +25545,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==
@@ -25074,6 +25557,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"
@@ -25274,6 +25769,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"
@@ -25371,6 +25885,11 @@ react-shortcuts@^2.0.0:
     platform "^1.3.0"
     prop-types "^15.5.8"
 
+react-simple-code-editor@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
+  integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
+
 react-sizeme@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.3.6.tgz#d60ea2634acc3fd827a3c7738d41eea0992fa678"
@@ -25398,6 +25917,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"
@@ -25472,6 +26000,30 @@ react-use@^13.27.0:
     ts-easing "^0.2.0"
     tslib "^1.10.0"
 
+react-view@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/react-view/-/react-view-2.3.2.tgz#ef6850aa5ee18d9f8a9c8ffe79da00c93db0f9fe"
+  integrity sha512-Ty5PUtPZTlDeYJKxsrh6FcMdAXde7n+rQLyrBybKi9gy6ViQKMHTiomy6lB6Vf+B6VkAcSWYL1Q0iv07ILuBWw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/core" "^7.7.0"
+    "@babel/generator" "^7.7.0"
+    "@babel/preset-react" "^7.7.0"
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.1"
+    "@miksu/prettier" "^1.18.3"
+    "@miksu/react-tiny-popover" "^3.5.1"
+    copy-to-clipboard "^3.2.0"
+    lodash "^4.17.15"
+    prism-react-renderer "^1.0.2"
+    react-simple-code-editor "^0.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"
@@ -25525,6 +26077,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"
@@ -26096,6 +26656,13 @@ regex-parser@2.2.10:
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
   integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==
 
+regexp-util@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/regexp-util/-/regexp-util-1.2.2.tgz#5cf599134921eb0d776e41d41e9c0da33f0fa2fc"
+  integrity sha512-5/rl2UD18oAlLQEIuKBeiSIOp1hb5wCXcakl5yvHxlY1wyWI4D5cUKKzCibBeu741PA9JKvZhMqbkDQqPusX3w==
+  dependencies:
+    tslib "^1.9.0"
+
 regexp.prototype.flags@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
@@ -26207,6 +26774,13 @@ release-zalgo@^1.0.0:
   dependencies:
     es6-error "^4.0.1"
 
+remark-math@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/remark-math/-/remark-math-1.0.4.tgz#ced46473075ff99e4678a154a1a3d0dde403a9f2"
+  integrity sha512-aVyne6nKnlZPmCg+dmalKcUS1y+s3diWhKduV7l7sPqSeGHsncJatu/1P1U73zsNNjQZFyEJ2T4ArpjqOaEpFw==
+  dependencies:
+    trim-trailing-lines "^1.1.0"
+
 remark-parse@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
@@ -26689,6 +27263,13 @@ resolve@1.1.7, resolve@~1.1.0, resolve@~1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
+resolve@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  integrity sha512-hgoSGrc3pjzAPHNBg+KnFcK2HwlHTs/YrAGUr6qgTVUZmXv1UEXXl0bZNBKMA9fud6lRYFdPGz0xXxycPzmmiw==
+  dependencies:
+    path-parse "^1.0.5"
+
 resolve@1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
@@ -27356,6 +27937,11 @@ semver-truncate@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
+semver@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+  integrity sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==
+
 semver@5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
@@ -28467,6 +29053,15 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=
 
+string-width@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.0.0.tgz#5a1690a57cc78211fffd9bf24bbe24d090604eb1"
+  integrity sha512-rr8CUxBbvOZDUvc5lNIJ+OC1nPVpz+Siw9VBtUjB9b6jZehZLFt0JMCZzShFHIsI8cbhm0EsNIfWJMFV3cu3Ew==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.0.0"
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -28925,6 +29520,13 @@ supports-color@^3.1.2:
   dependencies:
     has-flag "^1.0.0"
 
+supports-color@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  integrity sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=
+  dependencies:
+    has-flag "^2.0.0"
+
 supports-color@^5.0.0, supports-color@^5.4.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -29889,6 +30491,11 @@ trim-trailing-lines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.0.tgz#7aefbb7808df9d669f6da2e438cac8c46ada7684"
   integrity sha1-eu+7eAjfnWafbaLkOMrIxGradoQ=
 
+trim-trailing-lines@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
+  integrity sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA==
+
 trim@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
@@ -29993,7 +30600,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.1, 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==
@@ -30706,6 +31313,11 @@ underscore@^1.8.3:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
   integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==
 
+underscore@^1.9.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.10.2.tgz#73d6aa3668f3188e4adb0f1943bd12cfd7efaaaf"
+  integrity sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg==
+
 underscore@~1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
@@ -30812,7 +31424,7 @@ unicode-trie@^2.0.0:
     pako "^0.2.5"
     tiny-inflate "^1.0.0"
 
-unified@^6.1.5:
+unified@6.1.6, unified@^6.1.5:
   version "6.1.6"
   resolved "https://registry.yarnpkg.com/unified/-/unified-6.1.6.tgz#5ea7f807a0898f1f8acdeefe5f25faa010cc42b1"
   integrity sha512-pW2f82bCIo2ifuIGYcV12fL96kMMYgw7JKVEgh7ODlrM9rj6vXSY3BV+H6lCcv1ksxynFf582hwWLnA1qRFy4w==
@@ -31170,7 +31782,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==
@@ -31912,6 +32524,15 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
   integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
 
+vnopts@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vnopts/-/vnopts-1.0.2.tgz#f6a331473de0179d1679112cc090572b695202f7"
+  integrity sha512-d2rr2EFhAGHnTlURu49G7GWmiJV80HbAnkYdD9IFAtfhmxC+kSWEaZ6ZF064DJFTv9lQZQV1vuLTntyQpoanGQ==
+  dependencies:
+    chalk "^2.4.1"
+    leven "^2.1.0"
+    tslib "^1.9.3"
+
 void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
@@ -32582,6 +33203,15 @@ wreck@14.x.x:
     boom "7.x.x"
     hoek "5.x.x"
 
+write-file-atomic@2.3.0, write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
+  integrity sha512-xuPeK4OdjWqtfi59ylvVL0Yn35SF3zgcAcv7rBPFHVaEapaDr4GdGgm3j7ckTwH9wHL7fGmgfAnb0+THrHb8tA==
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
 write-file-atomic@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
@@ -32600,15 +33230,6 @@ write-file-atomic@^1.1.2:
     imurmurhash "^0.1.4"
     slide "^1.1.5"
 
-write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
-  integrity sha512-xuPeK4OdjWqtfi59ylvVL0Yn35SF3zgcAcv7rBPFHVaEapaDr4GdGgm3j7ckTwH9wHL7fGmgfAnb0+THrHb8tA==
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.2"
-
 write-file-atomic@^2.4.2:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
@@ -32850,6 +33471,14 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml-unist-parser@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/yaml-unist-parser/-/yaml-unist-parser-1.0.0.tgz#060def481d2319a8def3b6a06cb8ae3848b0aed3"
+  integrity sha512-DwXEmBpyopgf8YT8uOB7ry+7kuv4ECXDw2+1DipfHK29zwuUUskW+rFO7sgKULK0ddCi6TY09tFFxBc6Vftg5w==
+  dependencies:
+    lines-and-columns "^1.1.6"
+    tslib "^1.9.1"
+
 yaml@^1.7.2:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"