diff --git a/package.json b/package.json
index a237655ff78..ea520259136 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,7 @@
     "@cypress/code-coverage": "^3.9.12",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^45.1.1",
+    "@elastic/charts": "^46.0.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
diff --git a/scripts/release.js b/scripts/release.js
index 9594a292098..1131afe9668 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -66,7 +66,7 @@ if (args.dry_run) {
     updateChangelog(changelog, versionTarget);
 
     // Clear any local tags
-    execSync('git fetch upstream --tags --prune --prune-tags');
+    execSync('git fetch upstream --tags --prune --prune-tags --force');
 
     // update package.json & package-lock.json version, git commit, git tag
     execSync(`npm version ${versionTarget}`, execOptions);
diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.js b/src-docs/src/views/elastic_charts/accessibility_bullet.js
index 4f7fb3041a4..5339fb50c66 100644
--- a/src-docs/src/views/elastic_charts/accessibility_bullet.js
+++ b/src-docs/src/views/elastic_charts/accessibility_bullet.js
@@ -63,6 +63,7 @@ export const AccessibilityBullet = () => {
           actual={280}
           bands={bands}
           ticks={[0, 50, 100, 150, 200, 250, 300]}
+          domain={{ min: 0, max: 300 }}
           tickValueFormatter={({ value }) => String(value)}
           bandFillColor={({ value }) => bandFillColor(value)}
           labelMajor="Revenue 2020 YTD  "
diff --git a/src-docs/src/views/elastic_charts/accessibility_example.js b/src-docs/src/views/elastic_charts/accessibility_example.js
index 8ef88979634..16b988acb72 100644
--- a/src-docs/src/views/elastic_charts/accessibility_example.js
+++ b/src-docs/src/views/elastic_charts/accessibility_example.js
@@ -334,6 +334,7 @@ export const ElasticChartsAccessibilityExample = {
       snippet: `<Chart>
   <Settings aria-label="Chart title" {...props} />
   <Goal
+    domain={{ min: 0, max: 300 }}
     bands=[0, 100, 125, 150, 250]
     bandLabels=['freezing', 'cold', 'brisk', 'warm', 'hot']
     {...otherProps}
diff --git a/src-docs/src/views/elastic_charts/goal.js b/src-docs/src/views/elastic_charts/goal.js
index 568a14798fb..b834d2308e4 100644
--- a/src-docs/src/views/elastic_charts/goal.js
+++ b/src-docs/src/views/elastic_charts/goal.js
@@ -63,6 +63,7 @@ export const GoalChart = () => {
             actual={12}
             bands={bands}
             ticks={[-10, 0, 10, 20, 30, 40]}
+            domain={{ min: -10, max: 40 }}
             tickValueFormatter={({ value }) => String(value)}
             bandFillColor={({ value }) => bandFillColor(value)}
             labelMajor="Temperature"
diff --git a/src-docs/src/views/spacer/_spacer.scss b/src-docs/src/views/spacer/_spacer.scss
index 5e05f9ce448..3489f651ac5 100644
--- a/src-docs/src/views/spacer/_spacer.scss
+++ b/src-docs/src/views/spacer/_spacer.scss
@@ -3,7 +3,7 @@
     background: $guideDemoHighlightColor;
   }
 
-  .euiCodeBlock {
+  .euiCode {
     align-self: flex-start;
     margin-bottom: $euiSize;
   }
diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx
index 8a9f46ed7b5..5d18813c0c0 100644
--- a/src-docs/src/views/timeline/timeline.tsx
+++ b/src-docs/src/views/timeline/timeline.tsx
@@ -39,4 +39,6 @@ const items: EuiTimelineProps['items'] = [
   },
 ];
 
-export default () => <EuiTimeline items={items} />;
+export default () => (
+  <EuiTimeline items={items} aria-label="Project beta timeline" />
+);
diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js
index ca86fa87de9..9674d3018b7 100644
--- a/src-docs/src/views/timeline/timeline_example.js
+++ b/src-docs/src/views/timeline/timeline_example.js
@@ -6,6 +6,7 @@ import {
   EuiCode,
   EuiTimeline,
   EuiTimelineItem,
+  EuiCallOut,
 } from '../../../../src/components';
 import timelineItemConfig from './playground';
 
@@ -82,6 +83,19 @@ export const TimelineExample = {
               actions that either a user or a system has performed.
             </li>
           </ul>
+
+          <EuiCallOut
+            color="warning"
+            iconType="accessibility"
+            title={
+              <>
+                For accessibility, it is highly recommended to provide a
+                descriptive <EuiCode>aria-label</EuiCode>, or a text node ID of
+                an external label to the <EuiCode>aria-labelledby</EuiCode> prop
+                of the <strong>EuiTimeline</strong>.
+              </>
+            }
+          />
         </>
       ),
       props: { EuiTimeline, EuiTimelineItem },
@@ -136,11 +150,10 @@ export const TimelineExample = {
         <>
           <p>
             You can create a timeline thread by rendering multiple{' '}
-            <strong>EuiTimelineItem</strong> components. Wrapping these with an{' '}
-            <strong>EuiTimeline</strong> is not required, but we recommend
-            having all the <strong>EuiTimelineItem</strong>s nested in the same
-            container. This way, we ensure that timeline styles are applied
-            correctly.
+            <strong>EuiTimelineItem</strong> components in a{' '}
+            <strong>EuiTimeline</strong>. Following this structure ensures that
+            timeline styles are applied correctly and appropriate semantic
+            elements are used to assist with screen readers.
           </p>
           <p>
             When passing an <EuiCode>icon</EuiCode> and{' '}
diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx
index e4c9162dcfe..ba9870c6a27 100644
--- a/src-docs/src/views/timeline/timeline_item.tsx
+++ b/src-docs/src/views/timeline/timeline_item.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components';
 
 export default () => (
-  <EuiTimelineItem icon="dot" iconAriaLabel="Main icon">
+  <EuiTimelineItem icon="dot" iconAriaLabel="Main icon" component="div">
     <EuiText size="s">
       <p>
         I&apos;m the <EuiCode>children</EuiCode> and you can find the{' '}
diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx
index e5274e98216..1be20e290e7 100644
--- a/src-docs/src/views/timeline/timeline_item_event.tsx
+++ b/src-docs/src/views/timeline/timeline_item_event.tsx
@@ -14,6 +14,7 @@ import {
   EuiSplitPanel,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTimeline,
 } from '../../../../src/components';
 
 import {
@@ -107,7 +108,7 @@ export default () => {
   );
 
   return (
-    <div>
+    <EuiTimeline aria-label="Life cycle of data">
       <EuiTimelineItem
         verticalAlign="top"
         icon={
@@ -144,6 +145,6 @@ export default () => {
       {phase('Cold phase', checked2, onChange2, colorBlindBehindText[2])}
 
       {phase('Frozen phase', checked3, onChange3, colorBlindBehindText[3])}
-    </div>
+    </EuiTimeline>
   );
 };
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index aad27ccd02b..ff01baff1e4 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -40,11 +40,11 @@
 }
 
 .euiAccordion__childWrapper {
+  will-change: opacity, visibility, height;
   visibility: hidden;
   height: 0;
   opacity: 0;
   overflow: hidden;
-  transform: translatez(0);
   // sass-lint:disable-block indentation
   transition:
     height $euiAnimSpeedNormal $euiAnimSlightResistance,
diff --git a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
index d392f34e5bb..beaad26b6d6 100644
--- a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
+++ b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
@@ -1,43 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiAspectRatio is rendered 1`] = `
-<div
+<iframe
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen=""
   aria-label="aria-label"
   class="euiAspectRatio testClass1 testClass2"
   data-test-subj="test subject string"
-  style="padding-bottom:44.44444444444444%;max-width:auto"
+  frameborder="0"
+  height="315"
+  src="https://www.youtube.com/embed/yJarWSLRM24"
+  style="aspect-ratio:9 / 4;height:100%;width:100%"
+  title="Elastic is a search company"
+  width="560"
+/>
+`;
+
+exports[`EuiAspectRatio props maxWidth is rendered 1`] = `
+<div
+  style="max-width:500px"
 >
   <iframe
     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen=""
+    aria-label="aria-label"
+    class="euiAspectRatio testClass1 testClass2"
+    data-test-subj="test subject string"
     frameborder="0"
     height="315"
     src="https://www.youtube.com/embed/yJarWSLRM24"
+    style="aspect-ratio:9 / 16;height:100%;width:100%"
     title="Elastic is a search company"
     width="560"
   />
 </div>
 `;
-
-exports[`EuiAspectRatio props maxWidth is rendered 1`] = `
-<div
-  style="max-width:500px"
->
-  <div
-    aria-label="aria-label"
-    class="euiAspectRatio testClass1 testClass2"
-    data-test-subj="test subject string"
-    style="padding-bottom:177.77777777777777%;max-width:500px"
-  >
-    <iframe
-      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-      allowfullscreen=""
-      frameborder="0"
-      height="315"
-      src="https://www.youtube.com/embed/yJarWSLRM24"
-      title="Elastic is a search company"
-      width="560"
-    />
-  </div>
-</div>
-`;
diff --git a/src/components/aspect_ratio/_aspect_ratio.scss b/src/components/aspect_ratio/_aspect_ratio.scss
deleted file mode 100644
index bb7fae76d8e..00000000000
--- a/src/components/aspect_ratio/_aspect_ratio.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.euiAspectRatio {
-  position: relative;
-
-  > * {
-    // sass-lint:disable-block no-important
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-  }
-}
diff --git a/src/components/aspect_ratio/_index.scss b/src/components/aspect_ratio/_index.scss
deleted file mode 100644
index 75582bd6f29..00000000000
--- a/src/components/aspect_ratio/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'aspect_ratio';
diff --git a/src/components/aspect_ratio/aspect_ratio.tsx b/src/components/aspect_ratio/aspect_ratio.tsx
index cceeb62c71a..b8ae24579fe 100644
--- a/src/components/aspect_ratio/aspect_ratio.tsx
+++ b/src/components/aspect_ratio/aspect_ratio.tsx
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  ReactElement,
+  CSSProperties,
+} from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
@@ -23,7 +28,8 @@ export type EuiAspectRatioProps = HTMLAttributes<HTMLDivElement> &
     /**
      * The maximum width you want the child to stretch to.
      */
-    maxWidth?: number;
+    maxWidth?: CSSProperties['width'];
+    children: ReactElement<any>;
   };
 
 export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
@@ -36,21 +42,19 @@ export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
 }) => {
   const classes = classNames('euiAspectRatio', className);
 
-  const paddingBottom = `${(height / width) * 100}%`;
+  const euiAspectRatioStyle = {
+    aspectRatio: `${width} / ${height}`,
+    height: '100%',
+    width: '100%',
+  };
 
-  const content = (
-    <div
-      className={classes}
-      {...rest}
-      style={{
-        paddingBottom: paddingBottom,
-        maxWidth: maxWidth ? maxWidth : 'auto',
-      }}
-    >
-      {children}
-    </div>
-  );
+  const props = {
+    className: classes,
+    style: euiAspectRatioStyle,
+    ...rest,
+  };
 
+  const content = React.cloneElement(children, props);
   let contentwithoptionalwrap = content;
   if (maxWidth) {
     contentwithoptionalwrap = (
diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
index ea4fd305758..2f50f31e36e 100644
--- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap
+++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -304,48 +304,3 @@ exports[`EuiAvatar props type is rendered 1`] = `
 `;
 
 exports[`EuiAvatar should throw error if color is not a hex 1`] = `"EuiAvatar needs to pass a valid color. This can either be a three or six character hex value"`;
-
-exports[`EuiAvatar should throw error if color is not a hex: renders with emotion styles 1`] = `
-.css-11owldj-euiAvatar-m-user {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-background-size: cover;
-  background-size: cover;
-  text-align: center;
-  vertical-align: middle;
-  overflow-x: hidden;
-  font-weight: 500;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  font-size: calc(16px * 0.9);
-  border-radius: 50%;
-}
-
-<div
-  aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user css-11owldj-euiAvatar-m-user"
-  role="img"
-  style="background-color:#e4a6c7;color:#000000"
-  title="name"
->
-  <span
-    aria-hidden="true"
-  >
-    n
-  </span>
-</div>
-`;
diff --git a/src/components/avatar/avatar.test.tsx b/src/components/avatar/avatar.test.tsx
index 9df17ea272c..5364820e629 100644
--- a/src/components/avatar/avatar.test.tsx
+++ b/src/components/avatar/avatar.test.tsx
@@ -9,15 +9,11 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
-import {
-  renderWithStyles,
-  shouldRenderCustomStyles,
-} from '../../test/internal';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiAvatar, SIZES } from './avatar';
 
 describe('EuiAvatar', () => {
-  renderWithStyles(<EuiAvatar name="name" />);
   shouldRenderCustomStyles(<EuiAvatar name="name" />);
 
   test('is rendered', () => {
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 9e6781fe72e..2b268c5f3c5 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -1,780 +1,247 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiInMemoryTable behavior pagination 1`] = `
-<EuiInMemoryTable
+<div
   aria-label="aria-label"
-  className="testClass1 testClass2"
-  columns={
-    Array [
-      Object {
-        "description": "description",
-        "field": "name",
-        "name": "Name",
-      },
-    ]
-  }
+  class="euiBasicTable testClass1 testClass2"
   data-test-subj="test subject string"
-  items={
-    Array [
-      Object {
-        "id": "1",
-        "name": "name1",
-      },
-      Object {
-        "id": "2",
-        "name": "name2",
-      },
-      Object {
-        "id": "3",
-        "name": "name3",
-      },
-      Object {
-        "id": "4",
-        "name": "name4",
-      },
-    ]
-  }
-  pagination={
-    Object {
-      "pageSizeOptions": Array [
-        2,
-        4,
-        6,
-      ],
-    }
-  }
-  responsive={true}
-  tableLayout="fixed"
 >
-  <EuiBasicTable
-    aria-label="aria-label"
-    className="testClass1 testClass2"
-    columns={
-      Array [
-        Object {
-          "description": "description",
-          "field": "name",
-          "name": "Name",
-        },
-      ]
-    }
-    data-test-subj="test subject string"
-    items={
-      Array [
-        Object {
-          "id": "3",
-          "name": "name3",
-        },
-        Object {
-          "id": "4",
-          "name": "name4",
-        },
-      ]
-    }
-    noItemsMessage={
-      <EuiI18n
-        default="No items found"
-        token="euiBasicTable.noItemsMessage"
-      />
-    }
-    onChange={[Function]}
-    pagination={
-      Object {
-        "pageIndex": 1,
-        "pageSize": 2,
-        "pageSizeOptions": Array [
-          2,
-          4,
-          6,
-        ],
-        "showPerPageOptions": undefined,
-        "totalItemCount": 4,
-      }
-    }
-    responsive={true}
-    tableLayout="fixed"
-  >
+  <div>
     <div
-      aria-label="aria-label"
-      className="euiBasicTable testClass1 testClass2"
-      data-test-subj="test subject string"
+      class="euiTableHeaderMobile"
     >
-      <div>
-        <EuiTableHeaderMobile>
-          <div
-            className="euiTableHeaderMobile"
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+      >
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+      </div>
+    </div>
+    <table
+      class="euiTable euiTable--responsive"
+      id="__table_generated-id"
+      tabindex="-1"
+    >
+      <caption
+        class="euiScreenReaderOnly euiTableCaption"
+      />
+      <thead>
+        <tr>
+          <th
+            class="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_name_0"
+            role="columnheader"
+            scope="col"
           >
-            <EuiFlexGroup
-              alignItems="baseline"
-              justifyContent="spaceBetween"
-              responsive={false}
+            <span
+              class="euiTableCellContent"
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+              <span
+                class="euiTableCellContent__text"
+                title="Name; description"
               >
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  />
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiTableHeaderMobile>
-        <EuiTable
-          id="__table_generated-id"
-          responsive={true}
-          tableLayout="fixed"
+                Name
+              </span>
+              <span
+                class="euiScreenReaderOnly"
+              >
+                description
+              </span>
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          class="euiTableRow"
         >
-          <table
-            className="euiTable euiTable--responsive"
-            id="__table_generated-id"
-            tabIndex={-1}
+          <td
+            class="euiTableRowCell euiTableRowCell--middle"
           >
-            <EuiScreenReaderOnly>
-              <caption
-                className="euiScreenReaderOnly euiTableCaption"
+            <div
+              class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+            >
+              Name
+            </div>
+            <div
+              class="euiTableCellContent"
+            >
+              <span
+                class="euiTableCellContent__text"
               >
-                <EuiDelayRender
-                  delay={500}
-                />
-              </caption>
-            </EuiScreenReaderOnly>
-            <EuiTableHeader>
-              <thead>
-                <tr>
-                  <EuiTableHeaderCell
-                    align="left"
-                    data-test-subj="tableHeaderCell_name_0"
-                    description="description"
-                    key="_data_h_name_0"
-                  >
-                    <th
-                      className="euiTableHeaderCell"
-                      data-test-subj="tableHeaderCell_name_0"
-                      role="columnheader"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
-                        }
-                      }
-                    >
-                      <CellContents
-                        className="euiTableCellContent"
-                        description="description"
-                        showSortMsg={false}
-                      >
-                        <span
-                          className="euiTableCellContent"
-                        >
-                          <EuiInnerText>
-                            <EuiI18n
-                              default="{innerText}; {description}"
-                              token="euiTableHeaderCell.titleTextWithDesc"
-                              values={
-                                Object {
-                                  "description": "description",
-                                  "innerText": "Name",
-                                }
-                              }
-                            >
-                              <span
-                                className="euiTableCellContent__text"
-                                title="Name; description"
-                              >
-                                Name
-                              </span>
-                            </EuiI18n>
-                          </EuiInnerText>
-                          <EuiScreenReaderOnly>
-                            <span
-                              className="euiScreenReaderOnly"
-                            >
-                              description
-                            </span>
-                          </EuiScreenReaderOnly>
-                        </span>
-                      </CellContents>
-                    </th>
-                  </EuiTableHeaderCell>
-                </tr>
-              </thead>
-            </EuiTableHeader>
-            <EuiTableBody
-              bodyRef={[Function]}
+                name3
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="euiTableRow"
+        >
+          <td
+            class="euiTableRowCell euiTableRowCell--middle"
+          >
+            <div
+              class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
             >
-              <tbody>
-                <EuiTableRow
-                  isSelected={false}
-                >
-                  <tr
-                    className="euiTableRow"
-                  >
-                    <EuiTableRowCell
-                      align="left"
-                      key="_data_column_name_2_0"
-                      mobileOptions={
-                        Object {
-                          "header": "Name",
-                          "render": undefined,
-                        }
-                      }
-                      setScopeRow={false}
-                      textOnly={true}
-                    >
-                      <td
-                        className="euiTableRowCell euiTableRowCell--middle"
-                        style={
-                          Object {
-                            "width": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                        >
-                          Name
-                        </div>
-                        <div
-                          className="euiTableCellContent"
-                        >
-                          <span
-                            className="euiTableCellContent__text"
-                          >
-                            name3
-                          </span>
-                        </div>
-                      </td>
-                    </EuiTableRowCell>
-                  </tr>
-                </EuiTableRow>
-                <EuiTableRow
-                  isSelected={false}
+              Name
+            </div>
+            <div
+              class="euiTableCellContent"
+            >
+              <span
+                class="euiTableCellContent__text"
+              >
+                name4
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div>
+    <div
+      class="euiSpacer euiSpacer--m css-hg1jdf-euiSpacer-m"
+    />
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap eui-xScroll"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          class="euiPopover euiPopover--anchorUpRight"
+        >
+          <div
+            class="euiPopover__anchor"
+          >
+            <button
+              class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+              data-test-subj="tablePaginationPopoverButton"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+              >
+                <span
+                  class="euiButtonContent__icon"
+                  color="inherit"
+                  data-euiicon-type="arrowDown"
+                />
+                <span
+                  class="euiButtonEmpty__text"
                 >
-                  <tr
-                    className="euiTableRow"
-                  >
-                    <EuiTableRowCell
-                      align="left"
-                      key="_data_column_name_3_0"
-                      mobileOptions={
-                        Object {
-                          "header": "Name",
-                          "render": undefined,
-                        }
-                      }
-                      setScopeRow={false}
-                      textOnly={true}
-                    >
-                      <td
-                        className="euiTableRowCell euiTableRowCell--middle"
-                        style={
-                          Object {
-                            "width": undefined,
-                          }
-                        }
-                      >
-                        <div
-                          className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                        >
-                          Name
-                        </div>
-                        <div
-                          className="euiTableCellContent"
-                        >
-                          <span
-                            className="euiTableCellContent__text"
-                          >
-                            name4
-                          </span>
-                        </div>
-                      </td>
-                    </EuiTableRowCell>
-                  </tr>
-                </EuiTableRow>
-              </tbody>
-            </EuiTableBody>
-          </table>
-        </EuiTable>
+                  Rows per page: 2
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
-      <EuiI18n
-        default="Pagination for table: {tableCaption}"
-        token="euiBasicTable.tablePagination"
-        values={
-          Object {
-            "tableCaption": undefined,
-          }
-        }
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
       >
-        <PaginationBar
-          aria-controls="__table_generated-id"
+        <nav
           aria-label="Pagination for table: "
-          onPageChange={[Function]}
-          onPageSizeChange={[Function]}
-          pagination={
-            Object {
-              "pageIndex": 1,
-              "pageSize": 2,
-              "pageSizeOptions": Array [
-                2,
-                4,
-                6,
-              ],
-              "showPerPageOptions": undefined,
-              "totalItemCount": 4,
-            }
-          }
+          class="euiPagination"
         >
-          <div>
-            <EuiSpacer
-              size="m"
-            >
-              <div
-                className="euiSpacer euiSpacer--m"
-              />
-            </EuiSpacer>
-            <EuiTablePagination
-              activePage={1}
-              aria-controls="__table_generated-id"
-              aria-label="Pagination for table: "
-              itemsPerPage={2}
-              itemsPerPageOptions={
-                Array [
-                  2,
-                  4,
-                  6,
-                ]
-              }
-              onChangeItemsPerPage={[Function]}
-              onChangePage={[Function]}
-              pageCount={2}
+          <span
+            aria-atomic="true"
+            aria-relevant="additions text"
+            class="euiScreenReaderOnly"
+            role="status"
+          >
+            Page 2 of 2
+          </span>
+          <a
+            aria-controls="__table_generated-id"
+            aria-label="Previous page"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiPaginationArrowButton"
+            data-test-subj="pagination-button-previous"
+            href="#__table_generated-id"
+            rel="noreferrer"
+            title="Previous page"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowLeft"
+            />
+          </a>
+          <ul
+            aria-label="Pagination for table: "
+            class="euiPagination__list"
+          >
+            <li
+              class="euiPagination__item"
             >
-              <EuiFlexGroup
-                alignItems="center"
-                className="eui-xScroll"
-                gutterSize="s"
-                justifyContent="spaceBetween"
-                responsive={false}
-                wrap={true}
+              <a
+                aria-controls="__table_generated-id"
+                aria-label="Page 1 of 2"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+                data-test-subj="pagination-button-0"
+                href="#__table_generated-id"
+                rel="noreferrer"
               >
-                <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap eui-xScroll"
+                <span
+                  class="euiButtonContent euiButtonEmpty__content"
                 >
-                  <EuiFlexItem
-                    grow={false}
+                  <span
+                    class="euiButtonEmpty__text"
                   >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiPopover
-                        anchorPosition="upRight"
-                        button={
-                          <EuiButtonEmpty
-                            color="text"
-                            data-test-subj="tablePaginationPopoverButton"
-                            iconSide="right"
-                            iconType="arrowDown"
-                            onClick={[Function]}
-                            size="xs"
-                          >
-                            <React.Fragment>
-                              <EuiI18n
-                                default="Rows per page"
-                                token="euiTablePagination.rowsPerPage"
-                              />
-                              : 
-                              2
-                            </React.Fragment>
-                          </EuiButtonEmpty>
-                        }
-                        closePopover={[Function]}
-                        display="inlineBlock"
-                        hasArrow={true}
-                        isOpen={false}
-                        ownFocus={true}
-                        panelPaddingSize="none"
-                      >
-                        <div
-                          className="euiPopover euiPopover--anchorUpRight"
-                        >
-                          <div
-                            className="euiPopover__anchor"
-                          >
-                            <EuiButtonEmpty
-                              color="text"
-                              data-test-subj="tablePaginationPopoverButton"
-                              iconSide="right"
-                              iconType="arrowDown"
-                              onClick={[Function]}
-                              size="xs"
-                            >
-                              <button
-                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
-                                data-test-subj="tablePaginationPopoverButton"
-                                disabled={false}
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <EuiButtonContent
-                                  className="euiButtonEmpty__content"
-                                  iconSide="right"
-                                  iconSize="s"
-                                  iconType="arrowDown"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButtonEmpty__text",
-                                    }
-                                  }
-                                >
-                                  <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                  >
-                                    <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
-                                      size="s"
-                                      type="arrowDown"
-                                    >
-                                      <span
-                                        className="euiButtonContent__icon"
-                                        color="inherit"
-                                        data-euiicon-type="arrowDown"
-                                        size="s"
-                                      />
-                                    </EuiIcon>
-                                    <span
-                                      className="euiButtonEmpty__text"
-                                    >
-                                      <EuiI18n
-                                        default="Rows per page"
-                                        token="euiTablePagination.rowsPerPage"
-                                      >
-                                        Rows per page
-                                      </EuiI18n>
-                                      : 
-                                      2
-                                    </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonEmpty>
-                          </div>
-                        </div>
-                      </EuiPopover>
-                    </div>
-                  </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
+                    1
+                  </span>
+                </span>
+              </a>
+            </li>
+            <li
+              class="euiPagination__item"
+            >
+              <button
+                aria-controls="__table_generated-id"
+                aria-current="true"
+                aria-label="Page 2 of 2"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive"
+                data-test-subj="pagination-button-1"
+                disabled=""
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonEmpty__content"
+                >
+                  <span
+                    class="euiButtonEmpty__text"
                   >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiPagination
-                        activePage={1}
-                        aria-controls="__table_generated-id"
-                        aria-label="Pagination for table: "
-                        onPageClick={[Function]}
-                        pageCount={2}
-                      >
-                        <nav
-                          aria-label="Pagination for table: "
-                          className="euiPagination"
-                        >
-                          <EuiScreenReaderOnly>
-                            <span
-                              aria-atomic="true"
-                              aria-relevant="additions text"
-                              className="euiScreenReaderOnly"
-                              role="status"
-                            >
-                              Page 2 of 2
-                            </span>
-                          </EuiScreenReaderOnly>
-                          <EuiPaginationButtonArrow
-                            ariaControls="__table_generated-id"
-                            disabled={false}
-                            onClick={[Function]}
-                            type="previous"
-                          >
-                            <EuiButtonIcon
-                              aria-controls="__table_generated-id"
-                              aria-label="Previous page"
-                              className="euiPaginationArrowButton"
-                              color="text"
-                              data-test-subj="pagination-button-previous"
-                              href="#__table_generated-id"
-                              iconType="arrowLeft"
-                              isDisabled={false}
-                              onClick={[Function]}
-                              title="Previous page"
-                            >
-                              <a
-                                aria-controls="__table_generated-id"
-                                aria-label="Previous page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiPaginationArrowButton"
-                                data-test-subj="pagination-button-previous"
-                                href="#__table_generated-id"
-                                onClick={[Function]}
-                                rel="noreferrer"
-                                title="Previous page"
-                              >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowLeft"
-                                >
-                                  <span
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    data-euiicon-type="arrowLeft"
-                                    size="m"
-                                  />
-                                </EuiIcon>
-                              </a>
-                            </EuiButtonIcon>
-                          </EuiPaginationButtonArrow>
-                          <ul
-                            aria-label="Pagination for table: "
-                            className="euiPagination__list"
-                          >
-                            <PaginationButtonWrapper
-                              activePage={1}
-                              ariaControls="__table_generated-id"
-                              key="0"
-                              pageCount={2}
-                              pageIndex={0}
-                              safeClick={[Function]}
-                            >
-                              <li
-                                className="euiPagination__item"
-                              >
-                                <EuiPaginationButton
-                                  aria-controls="__table_generated-id"
-                                  isActive={false}
-                                  onClick={[Function]}
-                                  pageIndex={0}
-                                  totalPages={2}
-                                >
-                                  <EuiI18n
-                                    default="Page {page} of {totalPages}"
-                                    token="euiPaginationButton.longPageString"
-                                    values={
-                                      Object {
-                                        "page": 1,
-                                        "totalPages": 2,
-                                      }
-                                    }
-                                  >
-                                    <EuiI18n
-                                      default="Page {page}"
-                                      token="euiPaginationButton.shortPageString"
-                                      values={
-                                        Object {
-                                          "page": 1,
-                                        }
-                                      }
-                                    >
-                                      <EuiButtonEmpty
-                                        aria-controls="__table_generated-id"
-                                        aria-label="Page 1 of 2"
-                                        className="euiPaginationButton"
-                                        color="text"
-                                        data-test-subj="pagination-button-0"
-                                        href="#__table_generated-id"
-                                        isDisabled={false}
-                                        onClick={[Function]}
-                                        size="s"
-                                      >
-                                        <a
-                                          aria-controls="__table_generated-id"
-                                          aria-label="Page 1 of 2"
-                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
-                                          data-test-subj="pagination-button-0"
-                                          href="#__table_generated-id"
-                                          onClick={[Function]}
-                                          rel="noreferrer"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="left"
-                                            iconSize="m"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonEmpty__content"
-                                            >
-                                              <span
-                                                className="euiButtonEmpty__text"
-                                              >
-                                                1
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </a>
-                                      </EuiButtonEmpty>
-                                    </EuiI18n>
-                                  </EuiI18n>
-                                </EuiPaginationButton>
-                              </li>
-                            </PaginationButtonWrapper>
-                            <PaginationButtonWrapper
-                              activePage={1}
-                              ariaControls="__table_generated-id"
-                              key="1"
-                              pageCount={2}
-                              pageIndex={1}
-                              safeClick={[Function]}
-                            >
-                              <li
-                                className="euiPagination__item"
-                              >
-                                <EuiPaginationButton
-                                  aria-controls="__table_generated-id"
-                                  isActive={true}
-                                  onClick={[Function]}
-                                  pageIndex={1}
-                                  totalPages={2}
-                                >
-                                  <EuiI18n
-                                    default="Page {page} of {totalPages}"
-                                    token="euiPaginationButton.longPageString"
-                                    values={
-                                      Object {
-                                        "page": 2,
-                                        "totalPages": 2,
-                                      }
-                                    }
-                                  >
-                                    <EuiI18n
-                                      default="Page {page}"
-                                      token="euiPaginationButton.shortPageString"
-                                      values={
-                                        Object {
-                                          "page": 2,
-                                        }
-                                      }
-                                    >
-                                      <EuiButtonEmpty
-                                        aria-controls="__table_generated-id"
-                                        aria-current={true}
-                                        aria-label="Page 2 of 2"
-                                        className="euiPaginationButton euiPaginationButton-isActive"
-                                        color="text"
-                                        data-test-subj="pagination-button-1"
-                                        href="#__table_generated-id"
-                                        isDisabled={true}
-                                        onClick={[Function]}
-                                        size="s"
-                                      >
-                                        <button
-                                          aria-controls="__table_generated-id"
-                                          aria-current={true}
-                                          aria-label="Page 2 of 2"
-                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive"
-                                          data-test-subj="pagination-button-1"
-                                          disabled={true}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButtonEmpty__content"
-                                            iconSide="left"
-                                            iconSize="m"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButtonEmpty__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonEmpty__content"
-                                            >
-                                              <span
-                                                className="euiButtonEmpty__text"
-                                              >
-                                                2
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonEmpty>
-                                    </EuiI18n>
-                                  </EuiI18n>
-                                </EuiPaginationButton>
-                              </li>
-                            </PaginationButtonWrapper>
-                          </ul>
-                          <EuiPaginationButtonArrow
-                            ariaControls="__table_generated-id"
-                            disabled={true}
-                            onClick={[Function]}
-                            type="next"
-                          >
-                            <EuiButtonIcon
-                              aria-label="Next page"
-                              className="euiPaginationArrowButton"
-                              color="text"
-                              data-test-subj="pagination-button-next"
-                              iconType="arrowRight"
-                              isDisabled={true}
-                              onClick={[Function]}
-                            >
-                              <button
-                                aria-label="Next page"
-                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiPaginationArrowButton"
-                                data-test-subj="pagination-button-next"
-                                disabled={true}
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="arrowRight"
-                                >
-                                  <span
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    data-euiicon-type="arrowRight"
-                                    size="m"
-                                  />
-                                </EuiIcon>
-                              </button>
-                            </EuiButtonIcon>
-                          </EuiPaginationButtonArrow>
-                        </nav>
-                      </EuiPagination>
-                    </div>
-                  </EuiFlexItem>
-                </div>
-              </EuiFlexGroup>
-            </EuiTablePagination>
-          </div>
-        </PaginationBar>
-      </EuiI18n>
+                    2
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
+          <button
+            aria-label="Next page"
+            class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiPaginationArrowButton"
+            data-test-subj="pagination-button-next"
+            disabled=""
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowRight"
+            />
+          </button>
+        </nav>
+      </div>
     </div>
-  </EuiBasicTable>
-</EuiInMemoryTable>
+  </div>
+</div>
 `;
 
 exports[`EuiInMemoryTable empty array 1`] = `
@@ -1832,7 +1299,7 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
   </div>
   <div>
     <div
-      class="euiSpacer euiSpacer--m"
+      class="euiSpacer euiSpacer--m css-hg1jdf-euiSpacer-m"
     />
     <div
       class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap eui-xScroll"
diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx
index 0830df32c7a..5c9c7012314 100644
--- a/src/components/basic_table/in_memory_table.test.tsx
+++ b/src/components/basic_table/in_memory_table.test.tsx
@@ -985,7 +985,7 @@ describe('EuiInMemoryTable', () => {
       // this is specifically testing regression against https://github.com/elastic/eui/issues/1007
       component.setProps({});
 
-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
     });
 
     test('pagination with actions column and sorting set to true', async () => {
diff --git a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
index cc265ff7655..d680057508a 100644
--- a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
+++ b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
           class="euiTextColor euiTextColor--subdued"
         >
           <div
-            class="euiSpacer euiSpacer--m"
+            class="euiSpacer euiSpacer--m css-hg1jdf-euiSpacer-m"
           />
           <div
             class="euiText euiText--medium"
@@ -43,7 +43,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
           </div>
         </span>
         <div
-          class="euiSpacer euiSpacer--l"
+          class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
         />
         <div>
           Actions
@@ -68,7 +68,7 @@ exports[`EuiEmptyPrompt props actions renders alone 1`] = `
         class="euiEmptyPrompt__contentInner"
       >
         <div
-          class="euiSpacer euiSpacer--l"
+          class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
         />
         actions
       </div>
@@ -91,7 +91,7 @@ exports[`EuiEmptyPrompt props actions renders an array 1`] = `
         class="euiEmptyPrompt__contentInner"
       >
         <div
-          class="euiSpacer euiSpacer--l"
+          class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
         />
         <div
           class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive euiEmptyPrompt__actions"
diff --git a/src/components/index.scss b/src/components/index.scss
index fe9f3e7cde6..c99fc65d4d3 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -2,7 +2,6 @@
 
 @import 'accessibility/index';
 @import 'accordion/index';
-@import 'aspect_ratio/index';
 @import 'badge/index';
 @import 'basic_table/index';
 @import 'bottom_bar/index';
@@ -51,7 +50,6 @@
 @import 'tree_view/index';
 @import 'resizable_container/index';
 @import 'side_nav/index';
-@import 'spacer/index';
 @import 'search_bar/index';
 @import 'selectable/index';
 @import 'stat/index';
@@ -65,4 +63,4 @@
 @import 'token/index';
 @import 'tool_tip/index';
 @import 'tour/index';
-@import 'text/index';
\ No newline at end of file
+@import 'text/index';
diff --git a/src/components/mark/mark.test.tsx b/src/components/mark/mark.test.tsx
index 49a513db108..cfda11c78fe 100644
--- a/src/components/mark/mark.test.tsx
+++ b/src/components/mark/mark.test.tsx
@@ -8,16 +8,12 @@
 
 import React from 'react';
 import { render } from 'enzyme';
-import {
-  renderWithStyles,
-  shouldRenderCustomStyles,
-} from '../../test/internal';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiMark } from './mark';
 
 describe('EuiMark', () => {
-  renderWithStyles(<EuiMark>Marked</EuiMark>);
   shouldRenderCustomStyles(<EuiMark>Marked</EuiMark>);
 
   test('is rendered', () => {
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index a19608d0acd..86bf351244a 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -1381,2063 +1381,6 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
-<EuiMarkdownEditor
-  aria-label="aria-label"
-  className="testClass1 testClass2"
-  data-test-subj="test subject string"
-  editorId="editorId"
-  onChange={[Function]}
-  value=""
->
-  <div
-    className="euiMarkdownEditor testClass1 testClass2"
-    data-test-subj="test subject string"
-  >
-    <EuiMarkdownEditorToolbar
-      markdownActions={
-        MarkdownActions {
-          "editorID": "editorId",
-          "styles": Object {
-            "mdBold": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "prefix": "**",
-                "suffix": "**",
-                "trimFirst": true,
-              },
-              "name": "mdBold",
-            },
-            "mdCode": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "blockPrefix": "\`\`\`",
-                "blockSuffix": "\`\`\`",
-                "prefix": "\`",
-                "suffix": "\`",
-              },
-              "name": "mdCode",
-            },
-            "mdItalic": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "prefix": "_",
-                "suffix": "_",
-                "trimFirst": true,
-              },
-              "name": "mdItalic",
-            },
-            "mdLink": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "prefix": "[",
-                "replaceNext": "url",
-                "scanFor": "https?://",
-                "suffix": "](url)",
-              },
-              "name": "mdLink",
-            },
-            "mdOl": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "multiline": true,
-                "orderedList": true,
-                "prefix": "1. ",
-              },
-              "name": "mdOl",
-            },
-            "mdQuote": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "multiline": true,
-                "prefix": "> ",
-                "surroundWithNewlines": true,
-              },
-              "name": "mdQuote",
-            },
-            "mdTl": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "multiline": true,
-                "prefix": "- [ ] ",
-                "surroundWithNewlines": true,
-              },
-              "name": "mdTl",
-            },
-            "mdUl": Object {
-              "button": Object {
-                "iconType": "",
-                "label": "",
-              },
-              "formatting": Object {
-                "multiline": true,
-                "prefix": "- ",
-                "surroundWithNewlines": true,
-              },
-              "name": "mdUl",
-            },
-            "tooltipPlugin": Object {
-              "button": Object {
-                "iconType": "editorComment",
-                "label": "Tooltip",
-              },
-              "formatting": Object {
-                "prefix": "!{tooltip[",
-                "suffix": "]()}",
-                "trimFirst": true,
-              },
-              "helpText": <EuiCodeBlock
-                fontSize="l"
-                language="md"
-                paddingSize="s"
-              >
-                !{tooltip[anchor text](helpful description)}
-              </EuiCodeBlock>,
-              "name": "tooltipPlugin",
-            },
-          },
-        }
-      }
-      onClickPreview={[Function]}
-      uiPlugins={
-        Array [
-          Object {
-            "button": Object {
-              "iconType": "editorComment",
-              "label": "Tooltip",
-            },
-            "formatting": Object {
-              "prefix": "!{tooltip[",
-              "suffix": "]()}",
-              "trimFirst": true,
-            },
-            "helpText": <EuiCodeBlock
-              fontSize="l"
-              language="md"
-              paddingSize="s"
-            >
-              !{tooltip[anchor text](helpful description)}
-            </EuiCodeBlock>,
-            "name": "tooltipPlugin",
-          },
-        ]
-      }
-      viewMode="editing"
-    >
-      <div
-        className="euiMarkdownEditorToolbar"
-      >
-        <div
-          className="euiMarkdownEditorToolbar__buttons"
-        >
-          <EuiToolTip
-            content="Bold"
-            delay="long"
-            display="inlineBlock"
-            key="mdBold"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Bold"
-                color="text"
-                iconType="editorBold"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Bold"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorBold"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorBold"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <EuiToolTip
-            content="Italic"
-            delay="long"
-            display="inlineBlock"
-            key="mdItalic"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Italic"
-                color="text"
-                iconType="editorItalic"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Italic"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorItalic"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorItalic"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <span
-            className="euiMarkdownEditorToolbar__divider"
-          />
-          <EuiToolTip
-            content="Unordered list"
-            delay="long"
-            display="inlineBlock"
-            key="mdUl"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Unordered list"
-                color="text"
-                iconType="editorUnorderedList"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Unordered list"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorUnorderedList"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorUnorderedList"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <EuiToolTip
-            content="Ordered list"
-            delay="long"
-            display="inlineBlock"
-            key="mdOl"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Ordered list"
-                color="text"
-                iconType="editorOrderedList"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Ordered list"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorOrderedList"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorOrderedList"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <EuiToolTip
-            content="Task list"
-            delay="long"
-            display="inlineBlock"
-            key="mdTl"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Task list"
-                color="text"
-                iconType="editorChecklist"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Task list"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorChecklist"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorChecklist"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <span
-            className="euiMarkdownEditorToolbar__divider"
-          />
-          <EuiToolTip
-            content="Quote"
-            delay="long"
-            display="inlineBlock"
-            key="mdQuote"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Quote"
-                color="text"
-                iconType="quote"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Quote"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="quote"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="quote"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <EuiToolTip
-            content="Code"
-            delay="long"
-            display="inlineBlock"
-            key="mdCode"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Code"
-                color="text"
-                iconType="editorCodeBlock"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Code"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorCodeBlock"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorCodeBlock"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <EuiToolTip
-            content="Link"
-            delay="long"
-            display="inlineBlock"
-            key="mdLink"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Link"
-                color="text"
-                iconType="editorLink"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Link"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorLink"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorLink"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-          <span
-            className="euiMarkdownEditorToolbar__divider"
-          />
-          <EuiToolTip
-            content="Tooltip"
-            delay="long"
-            display="inlineBlock"
-            key="tooltipPlugin"
-            position="top"
-          >
-            <span
-              className="euiToolTipAnchor"
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-            >
-              <EuiButtonIcon
-                aria-label="Tooltip"
-                color="text"
-                iconType="editorComment"
-                isDisabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-              >
-                <button
-                  aria-label="Tooltip"
-                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  type="button"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButtonIcon__icon"
-                    color="inherit"
-                    size="m"
-                    type="editorComment"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="editorComment"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </button>
-              </EuiButtonIcon>
-            </span>
-          </EuiToolTip>
-        </div>
-        <EuiButtonEmpty
-          color="text"
-          iconType="eye"
-          onClick={[Function]}
-          size="s"
-        >
-          <button
-            className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
-            disabled={false}
-            onClick={[Function]}
-            type="button"
-          >
-            <EuiButtonContent
-              className="euiButtonEmpty__content"
-              iconSide="left"
-              iconSize="m"
-              iconType="eye"
-              textProps={
-                Object {
-                  "className": "euiButtonEmpty__text",
-                }
-              }
-            >
-              <span
-                className="euiButtonContent euiButtonEmpty__content"
-              >
-                <EuiIcon
-                  className="euiButtonContent__icon"
-                  color="inherit"
-                  size="m"
-                  type="eye"
-                >
-                  <span
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    data-euiicon-type="eye"
-                    size="m"
-                  />
-                </EuiIcon>
-                <span
-                  className="euiButtonEmpty__text"
-                >
-                  <EuiI18n
-                    default="Preview"
-                    token="euiMarkdownEditorToolbar.previewMarkdown"
-                  >
-                    Preview
-                  </EuiI18n>
-                </span>
-              </span>
-            </EuiButtonContent>
-          </button>
-        </EuiButtonEmpty>
-      </div>
-    </EuiMarkdownEditorToolbar>
-    <div
-      className="euiMarkdownEditor__toggleContainer"
-      style={
-        Object {
-          "height": "calc(100% - 0px)",
-        }
-      }
-    >
-      <EuiMarkdownEditorDropZone
-        dropHandlers={Array []}
-        errors={Array []}
-        hasUnacceptedItems={false}
-        insertText={[Function]}
-        isEditing={true}
-        setEditorFooterHeight={[Function]}
-        setHasUnacceptedItems={[Function]}
-        uiPlugins={
-          Array [
-            Object {
-              "button": Object {
-                "iconType": "editorComment",
-                "label": "Tooltip",
-              },
-              "formatting": Object {
-                "prefix": "!{tooltip[",
-                "suffix": "]()}",
-                "trimFirst": true,
-              },
-              "helpText": <EuiCodeBlock
-                fontSize="l"
-                language="md"
-                paddingSize="s"
-              >
-                !{tooltip[anchor text](helpful description)}
-              </EuiCodeBlock>,
-              "name": "tooltipPlugin",
-            },
-          ]
-        }
-      >
-        <div
-          className="euiMarkdownEditorDropZone"
-          onBlur={null}
-          onClick={null}
-          onDragEnter={null}
-          onDragLeave={null}
-          onDragOver={null}
-          onDrop={null}
-          onFocus={null}
-          onKeyDown={null}
-        >
-          <EuiResizeObserver
-            onResize={[Function]}
-          >
-            <EuiMarkdownEditorTextArea
-              aria-label="aria-label"
-              height="calc(250px)"
-              id="editorId"
-              maxHeight="500px"
-              onChange={[Function]}
-              onFocus={[Function]}
-              value=""
-            >
-              <textarea
-                aria-label="aria-label"
-                className="euiMarkdownEditorTextArea"
-                id="editorId"
-                onChange={[Function]}
-                onFocus={[Function]}
-                rows={6}
-                style={
-                  Object {
-                    "height": "calc(250px)",
-                    "maxHeight": "500px",
-                  }
-                }
-                value=""
-              />
-            </EuiMarkdownEditorTextArea>
-          </EuiResizeObserver>
-          <EuiMarkdownEditorFooter
-            dropHandlers={Array []}
-            errors={Array []}
-            hasUnacceptedItems={false}
-            isUploadingFiles={false}
-            openFiles={[Function]}
-            uiPlugins={
-              Array [
-                Object {
-                  "button": Object {
-                    "iconType": "editorComment",
-                    "label": "Tooltip",
-                  },
-                  "formatting": Object {
-                    "prefix": "!{tooltip[",
-                    "suffix": "]()}",
-                    "trimFirst": true,
-                  },
-                  "helpText": <EuiCodeBlock
-                    fontSize="l"
-                    language="md"
-                    paddingSize="s"
-                  >
-                    !{tooltip[anchor text](helpful description)}
-                  </EuiCodeBlock>,
-                  "name": "tooltipPlugin",
-                },
-              ]
-            }
-          >
-            <div
-              className="euiMarkdownEditorFooter"
-            >
-              <div
-                className="euiMarkdownEditorFooter__actions"
-              />
-              <EuiToolTip
-                content="Syntax help"
-                delay="regular"
-                display="inlineBlock"
-                position="top"
-              >
-                <span
-                  className="euiToolTipAnchor"
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                >
-                  <EuiButtonIcon
-                    aria-label="Show markdown help"
-                    className="euiMarkdownEditorFooter__helpButton"
-                    color="text"
-                    iconType={[Function]}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    size="s"
-                  >
-                    <button
-                      aria-label="Show markdown help"
-                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small euiMarkdownEditorFooter__helpButton"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      type="button"
-                    >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        color="inherit"
-                        size="m"
-                        type={[Function]}
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          data-euiicon-type="MarkdownLogo"
-                          size="m"
-                        />
-                      </EuiIcon>
-                    </button>
-                  </EuiButtonIcon>
-                </span>
-              </EuiToolTip>
-              <EuiModal
-                onClose={[Function]}
-              >
-                <EuiOverlayMask>
-                  <Portal
-                    containerInfo={
-                      <div
-                        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"
-                        />
-                        <div
-                          data-focus-lock-disabled="false"
-                        >
-                          <div
-                            class="euiModal euiModal--maxWidth-default"
-                            tabindex="0"
-                          >
-                            <button
-                              aria-label="Closes this modal window"
-                              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
-                              type="button"
-                            >
-                              <span
-                                aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                color="inherit"
-                                data-euiicon-type="cross"
-                              />
-                            </button>
-                            <div
-                              class="euiModal__flex"
-                            >
-                              <div
-                                class="euiModalHeader"
-                              >
-                                <h1
-                                  class="euiTitle euiTitle--medium"
-                                >
-                                  Syntax help
-                                </h1>
-                              </div>
-                              <div
-                                class="euiModalBody"
-                              >
-                                <div
-                                  class="euiModalBody__overflow"
-                                >
-                                  <div
-                                    class="euiText euiText--medium"
-                                  >
-                                    <p>
-                                      This editor uses
-                                       
-                                      <a
-                                        class="euiLink euiLink--primary"
-                                        href="https://guides.github.com/features/mastering-markdown/"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                      >
-                                        GitHub flavored markdown
-                                        <span
-                                          class="euiLink__externalIcon"
-                                          data-euiicon-type="popout"
-                                        >
-                                          External link
-                                        </span>
-                                        <span
-                                          class="euiScreenReaderOnly"
-                                        >
-                                          (opens in a new tab or window)
-                                        </span>
-                                      </a>
-                                      .
-                                       
-                                      You can also utilize these additional syntax plugins to add rich content to your text.
-                                    </p>
-                                  </div>
-                                  <hr
-                                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                  />
-                                  <p
-                                    class="euiTitle euiTitle--xxsmall"
-                                  >
-                                    <strong>
-                                      tooltipPlugin
-                                    </strong>
-                                  </p>
-                                  <div
-                                    class="euiSpacer euiSpacer--s"
-                                  />
-                                  <div
-                                    class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingSmall"
-                                  >
-                                    <pre
-                                      class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
-                                      tabindex="-1"
-                                    >
-                                      <code
-                                        class="euiCodeBlock__code"
-                                        data-code-language="md"
-                                      >
-                                        <span
-                                          class="euiCodeBlock__line"
-                                        >
-                                          !{tooltip[anchor text](helpful description)}
-                                        </span>
-                                      </code>
-                                    </pre>
-                                  </div>
-                                  <div
-                                    class="euiSpacer euiSpacer--l"
-                                  />
-                                  <hr
-                                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                  />
-                                </div>
-                              </div>
-                              <div
-                                class="euiModalFooter"
-                              >
-                                <button
-                                  class="euiButton euiButton--primary euiButton--fill"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiButtonContent euiButton__content"
-                                  >
-                                    <span
-                                      class="euiButton__text"
-                                    >
-                                      Close
-                                    </span>
-                                  </span>
-                                </button>
-                              </div>
-                            </div>
-                          </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"
-                        />
-                      </div>
-                    }
-                  >
-                    <EuiFocusTrap
-                      clickOutsideDisables={false}
-                      disabled={false}
-                      noIsolation={true}
-                      returnFocus={true}
-                      scrollLock={false}
-                    >
-                      <ForwardRef
-                        enabled={true}
-                        noIsolation={true}
-                        onClickOutside={[Function]}
-                        returnFocus={true}
-                        scrollLock={false}
-                      >
-                        <ForwardRef
-                          enabled={true}
-                          noIsolation={true}
-                          onClickOutside={[Function]}
-                          returnFocus={true}
-                          scrollLock={false}
-                          sideCar={[Function]}
-                        >
-                          <ForwardRef(FocusLockUI)
-                            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}
-                            lockProps={
-                              Object {
-                                "allowPinchZoom": undefined,
-                                "as": undefined,
-                                "enabled": false,
-                                "inert": undefined,
-                                "onMouseDown": [Function],
-                                "onTouchStart": [Function],
-                                "shards": undefined,
-                                "sideCar": [Function],
-                                "style": undefined,
-                              }
-                            }
-                            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="euiModal euiModal--maxWidth-default"
-                                    tabindex="0"
-                                  >
-                                    <button
-                                      aria-label="Closes this modal window"
-                                      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
-                                      type="button"
-                                    >
-                                      <span
-                                        aria-hidden="true"
-                                        class="euiButtonIcon__icon"
-                                        color="inherit"
-                                        data-euiicon-type="cross"
-                                      />
-                                    </button>
-                                    <div
-                                      class="euiModal__flex"
-                                    >
-                                      <div
-                                        class="euiModalHeader"
-                                      >
-                                        <h1
-                                          class="euiTitle euiTitle--medium"
-                                        >
-                                          Syntax help
-                                        </h1>
-                                      </div>
-                                      <div
-                                        class="euiModalBody"
-                                      >
-                                        <div
-                                          class="euiModalBody__overflow"
-                                        >
-                                          <div
-                                            class="euiText euiText--medium"
-                                          >
-                                            <p>
-                                              This editor uses
-                                               
-                                              <a
-                                                class="euiLink euiLink--primary"
-                                                href="https://guides.github.com/features/mastering-markdown/"
-                                                rel="noopener noreferrer"
-                                                target="_blank"
-                                              >
-                                                GitHub flavored markdown
-                                                <span
-                                                  class="euiLink__externalIcon"
-                                                  data-euiicon-type="popout"
-                                                >
-                                                  External link
-                                                </span>
-                                                <span
-                                                  class="euiScreenReaderOnly"
-                                                >
-                                                  (opens in a new tab or window)
-                                                </span>
-                                              </a>
-                                              .
-                                               
-                                              You can also utilize these additional syntax plugins to add rich content to your text.
-                                            </p>
-                                          </div>
-                                          <hr
-                                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                          />
-                                          <p
-                                            class="euiTitle euiTitle--xxsmall"
-                                          >
-                                            <strong>
-                                              tooltipPlugin
-                                            </strong>
-                                          </p>
-                                          <div
-                                            class="euiSpacer euiSpacer--s"
-                                          />
-                                          <div
-                                            class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingSmall"
-                                          >
-                                            <pre
-                                              class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
-                                              tabindex="-1"
-                                            >
-                                              <code
-                                                class="euiCodeBlock__code"
-                                                data-code-language="md"
-                                              >
-                                                <span
-                                                  class="euiCodeBlock__line"
-                                                >
-                                                  !{tooltip[anchor text](helpful description)}
-                                                </span>
-                                              </code>
-                                            </pre>
-                                          </div>
-                                          <div
-                                            class="euiSpacer euiSpacer--l"
-                                          />
-                                          <hr
-                                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                          />
-                                        </div>
-                                      </div>
-                                      <div
-                                        class="euiModalFooter"
-                                      >
-                                        <button
-                                          class="euiButton euiButton--primary euiButton--fill"
-                                          type="button"
-                                        >
-                                          <span
-                                            class="euiButtonContent euiButton__content"
-                                          >
-                                            <span
-                                              class="euiButton__text"
-                                            >
-                                              Close
-                                            </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],
-                                }
-                              }
-                            >
-                              <SideCar
-                                autoFocus={true}
-                                crossFrame={true}
-                                disabled={false}
-                                id={Object {}}
-                                observed={
-                                  <div
-                                    data-focus-lock-disabled="false"
-                                  >
-                                    <div
-                                      class="euiModal euiModal--maxWidth-default"
-                                      tabindex="0"
-                                    >
-                                      <button
-                                        aria-label="Closes this modal window"
-                                        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
-                                        type="button"
-                                      >
-                                        <span
-                                          aria-hidden="true"
-                                          class="euiButtonIcon__icon"
-                                          color="inherit"
-                                          data-euiicon-type="cross"
-                                        />
-                                      </button>
-                                      <div
-                                        class="euiModal__flex"
-                                      >
-                                        <div
-                                          class="euiModalHeader"
-                                        >
-                                          <h1
-                                            class="euiTitle euiTitle--medium"
-                                          >
-                                            Syntax help
-                                          </h1>
-                                        </div>
-                                        <div
-                                          class="euiModalBody"
-                                        >
-                                          <div
-                                            class="euiModalBody__overflow"
-                                          >
-                                            <div
-                                              class="euiText euiText--medium"
-                                            >
-                                              <p>
-                                                This editor uses
-                                                 
-                                                <a
-                                                  class="euiLink euiLink--primary"
-                                                  href="https://guides.github.com/features/mastering-markdown/"
-                                                  rel="noopener noreferrer"
-                                                  target="_blank"
-                                                >
-                                                  GitHub flavored markdown
-                                                  <span
-                                                    class="euiLink__externalIcon"
-                                                    data-euiicon-type="popout"
-                                                  >
-                                                    External link
-                                                  </span>
-                                                  <span
-                                                    class="euiScreenReaderOnly"
-                                                  >
-                                                    (opens in a new tab or window)
-                                                  </span>
-                                                </a>
-                                                .
-                                                 
-                                                You can also utilize these additional syntax plugins to add rich content to your text.
-                                              </p>
-                                            </div>
-                                            <hr
-                                              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                            />
-                                            <p
-                                              class="euiTitle euiTitle--xxsmall"
-                                            >
-                                              <strong>
-                                                tooltipPlugin
-                                              </strong>
-                                            </p>
-                                            <div
-                                              class="euiSpacer euiSpacer--s"
-                                            />
-                                            <div
-                                              class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingSmall"
-                                            >
-                                              <pre
-                                                class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
-                                                tabindex="-1"
-                                              >
-                                                <code
-                                                  class="euiCodeBlock__code"
-                                                  data-code-language="md"
-                                                >
-                                                  <span
-                                                    class="euiCodeBlock__line"
-                                                  >
-                                                    !{tooltip[anchor text](helpful description)}
-                                                  </span>
-                                                </code>
-                                              </pre>
-                                            </div>
-                                            <div
-                                              class="euiSpacer euiSpacer--l"
-                                            />
-                                            <hr
-                                              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                            />
-                                          </div>
-                                        </div>
-                                        <div
-                                          class="euiModalFooter"
-                                        >
-                                          <button
-                                            class="euiButton euiButton--primary euiButton--fill"
-                                            type="button"
-                                          >
-                                            <span
-                                              class="euiButtonContent euiButton__content"
-                                            >
-                                              <span
-                                                class="euiButton__text"
-                                              >
-                                                Close
-                                              </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
-                                      data-focus-lock-disabled="false"
-                                    >
-                                      <div
-                                        class="euiModal euiModal--maxWidth-default"
-                                        tabindex="0"
-                                      >
-                                        <button
-                                          aria-label="Closes this modal window"
-                                          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
-                                          type="button"
-                                        >
-                                          <span
-                                            aria-hidden="true"
-                                            class="euiButtonIcon__icon"
-                                            color="inherit"
-                                            data-euiicon-type="cross"
-                                          />
-                                        </button>
-                                        <div
-                                          class="euiModal__flex"
-                                        >
-                                          <div
-                                            class="euiModalHeader"
-                                          >
-                                            <h1
-                                              class="euiTitle euiTitle--medium"
-                                            >
-                                              Syntax help
-                                            </h1>
-                                          </div>
-                                          <div
-                                            class="euiModalBody"
-                                          >
-                                            <div
-                                              class="euiModalBody__overflow"
-                                            >
-                                              <div
-                                                class="euiText euiText--medium"
-                                              >
-                                                <p>
-                                                  This editor uses
-                                                   
-                                                  <a
-                                                    class="euiLink euiLink--primary"
-                                                    href="https://guides.github.com/features/mastering-markdown/"
-                                                    rel="noopener noreferrer"
-                                                    target="_blank"
-                                                  >
-                                                    GitHub flavored markdown
-                                                    <span
-                                                      class="euiLink__externalIcon"
-                                                      data-euiicon-type="popout"
-                                                    >
-                                                      External link
-                                                    </span>
-                                                    <span
-                                                      class="euiScreenReaderOnly"
-                                                    >
-                                                      (opens in a new tab or window)
-                                                    </span>
-                                                  </a>
-                                                  .
-                                                   
-                                                  You can also utilize these additional syntax plugins to add rich content to your text.
-                                                </p>
-                                              </div>
-                                              <hr
-                                                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                              />
-                                              <p
-                                                class="euiTitle euiTitle--xxsmall"
-                                              >
-                                                <strong>
-                                                  tooltipPlugin
-                                                </strong>
-                                              </p>
-                                              <div
-                                                class="euiSpacer euiSpacer--s"
-                                              />
-                                              <div
-                                                class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingSmall"
-                                              >
-                                                <pre
-                                                  class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
-                                                  tabindex="-1"
-                                                >
-                                                  <code
-                                                    class="euiCodeBlock__code"
-                                                    data-code-language="md"
-                                                  >
-                                                    <span
-                                                      class="euiCodeBlock__line"
-                                                    >
-                                                      !{tooltip[anchor text](helpful description)}
-                                                    </span>
-                                                  </code>
-                                                </pre>
-                                              </div>
-                                              <div
-                                                class="euiSpacer euiSpacer--l"
-                                              />
-                                              <hr
-                                                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                              />
-                                            </div>
-                                          </div>
-                                          <div
-                                            class="euiModalFooter"
-                                          >
-                                            <button
-                                              class="euiButton euiButton--primary euiButton--fill"
-                                              type="button"
-                                            >
-                                              <span
-                                                class="euiButtonContent euiButton__content"
-                                              >
-                                                <span
-                                                  class="euiButton__text"
-                                                >
-                                                  Close
-                                                </span>
-                                              </span>
-                                            </button>
-                                          </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
-                                          class="euiModal euiModal--maxWidth-default"
-                                          tabindex="0"
-                                        >
-                                          <button
-                                            aria-label="Closes this modal window"
-                                            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
-                                            type="button"
-                                          >
-                                            <span
-                                              aria-hidden="true"
-                                              class="euiButtonIcon__icon"
-                                              color="inherit"
-                                              data-euiicon-type="cross"
-                                            />
-                                          </button>
-                                          <div
-                                            class="euiModal__flex"
-                                          >
-                                            <div
-                                              class="euiModalHeader"
-                                            >
-                                              <h1
-                                                class="euiTitle euiTitle--medium"
-                                              >
-                                                Syntax help
-                                              </h1>
-                                            </div>
-                                            <div
-                                              class="euiModalBody"
-                                            >
-                                              <div
-                                                class="euiModalBody__overflow"
-                                              >
-                                                <div
-                                                  class="euiText euiText--medium"
-                                                >
-                                                  <p>
-                                                    This editor uses
-                                                     
-                                                    <a
-                                                      class="euiLink euiLink--primary"
-                                                      href="https://guides.github.com/features/mastering-markdown/"
-                                                      rel="noopener noreferrer"
-                                                      target="_blank"
-                                                    >
-                                                      GitHub flavored markdown
-                                                      <span
-                                                        class="euiLink__externalIcon"
-                                                        data-euiicon-type="popout"
-                                                      >
-                                                        External link
-                                                      </span>
-                                                      <span
-                                                        class="euiScreenReaderOnly"
-                                                      >
-                                                        (opens in a new tab or window)
-                                                      </span>
-                                                    </a>
-                                                    .
-                                                     
-                                                    You can also utilize these additional syntax plugins to add rich content to your text.
-                                                  </p>
-                                                </div>
-                                                <hr
-                                                  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                                />
-                                                <p
-                                                  class="euiTitle euiTitle--xxsmall"
-                                                >
-                                                  <strong>
-                                                    tooltipPlugin
-                                                  </strong>
-                                                </p>
-                                                <div
-                                                  class="euiSpacer euiSpacer--s"
-                                                />
-                                                <div
-                                                  class="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingSmall"
-                                                >
-                                                  <pre
-                                                    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
-                                                    tabindex="-1"
-                                                  >
-                                                    <code
-                                                      class="euiCodeBlock__code"
-                                                      data-code-language="md"
-                                                    >
-                                                      <span
-                                                        class="euiCodeBlock__line"
-                                                      >
-                                                        !{tooltip[anchor text](helpful description)}
-                                                      </span>
-                                                    </code>
-                                                  </pre>
-                                                </div>
-                                                <div
-                                                  class="euiSpacer euiSpacer--l"
-                                                />
-                                                <hr
-                                                  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                                />
-                                              </div>
-                                            </div>
-                                            <div
-                                              class="euiModalFooter"
-                                            >
-                                              <button
-                                                class="euiButton euiButton--primary euiButton--fill"
-                                                type="button"
-                                              >
-                                                <span
-                                                  class="euiButtonContent euiButton__content"
-                                                >
-                                                  <span
-                                                    class="euiButton__text"
-                                                  >
-                                                    Close
-                                                  </span>
-                                                </span>
-                                              </button>
-                                            </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
-                                data-focus-lock-disabled={false}
-                                onBlur={[Function]}
-                                onFocus={[Function]}
-                                onMouseDown={[Function]}
-                                onScrollCapture={[Function]}
-                                onTouchMoveCapture={[Function]}
-                                onTouchStart={[Function]}
-                                onWheelCapture={[Function]}
-                              >
-                                <div
-                                  className="euiModal euiModal--maxWidth-default"
-                                  onKeyDown={[Function]}
-                                  tabIndex={0}
-                                >
-                                  <EuiI18n
-                                    default="Closes this modal window"
-                                    token="euiModal.closeModal"
-                                  >
-                                    <EuiButtonIcon
-                                      aria-label="Closes this modal window"
-                                      className="euiModal__closeIcon"
-                                      color="text"
-                                      iconType="cross"
-                                      onClick={[Function]}
-                                    >
-                                      <button
-                                        aria-label="Closes this modal window"
-                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <EuiIcon
-                                          aria-hidden="true"
-                                          className="euiButtonIcon__icon"
-                                          color="inherit"
-                                          size="m"
-                                          type="cross"
-                                        >
-                                          <span
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            data-euiicon-type="cross"
-                                            size="m"
-                                          />
-                                        </EuiIcon>
-                                      </button>
-                                    </EuiButtonIcon>
-                                  </EuiI18n>
-                                  <div
-                                    className="euiModal__flex"
-                                  >
-                                    <EuiModalHeader>
-                                      <div
-                                        className="euiModalHeader"
-                                      >
-                                        <EuiTitle>
-                                          <h1
-                                            className="euiTitle euiTitle--medium"
-                                          >
-                                            Syntax help
-                                          </h1>
-                                        </EuiTitle>
-                                      </div>
-                                    </EuiModalHeader>
-                                    <EuiModalBody>
-                                      <div
-                                        className="euiModalBody"
-                                      >
-                                        <div
-                                          className="euiModalBody__overflow"
-                                        >
-                                          <EuiText>
-                                            <div
-                                              className="euiText euiText--medium"
-                                            >
-                                              <EuiI18n
-                                                defaults={
-                                                  Array [
-                                                    "This editor uses",
-                                                    "You can also utilize these additional syntax plugins to add rich content to your text.",
-                                                  ]
-                                                }
-                                                tokens={
-                                                  Array [
-                                                    "euiMarkdownEditorFooter.syntaxModalDescriptionPrefix",
-                                                    "euiMarkdownEditorFooter.syntaxModalDescriptionSuffix",
-                                                  ]
-                                                }
-                                              >
-                                                <p>
-                                                  This editor uses
-                                                   
-                                                  <EuiLink
-                                                    href="https://guides.github.com/features/mastering-markdown/"
-                                                    target="_blank"
-                                                  >
-                                                    <a
-                                                      className="euiLink euiLink--primary"
-                                                      href="https://guides.github.com/features/mastering-markdown/"
-                                                      rel="noopener noreferrer"
-                                                      target="_blank"
-                                                    >
-                                                      <EuiI18n
-                                                        default="GitHub flavored markdown"
-                                                        token="euiMarkdownEditorFooter.mdSyntaxLink"
-                                                      >
-                                                        GitHub flavored markdown
-                                                      </EuiI18n>
-                                                      <EuiIcon
-                                                        aria-label="External link"
-                                                        className="euiLink__externalIcon"
-                                                        size="s"
-                                                        type="popout"
-                                                      >
-                                                        <span
-                                                          className="euiLink__externalIcon"
-                                                          data-euiicon-type="popout"
-                                                          size="s"
-                                                        >
-                                                          External link
-                                                        </span>
-                                                      </EuiIcon>
-                                                      <EuiScreenReaderOnly>
-                                                        <span
-                                                          className="euiScreenReaderOnly"
-                                                        >
-                                                          <EuiI18n
-                                                            default="(opens in a new tab or window)"
-                                                            token="euiLink.newTarget.screenReaderOnlyText"
-                                                          >
-                                                            (opens in a new tab or window)
-                                                          </EuiI18n>
-                                                        </span>
-                                                      </EuiScreenReaderOnly>
-                                                    </a>
-                                                  </EuiLink>
-                                                  .
-                                                   
-                                                  You can also utilize these additional syntax plugins to add rich content to your text.
-                                                </p>
-                                              </EuiI18n>
-                                            </div>
-                                          </EuiText>
-                                          <EuiHorizontalRule>
-                                            <hr
-                                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                            />
-                                          </EuiHorizontalRule>
-                                          <EuiTitle
-                                            size="xxs"
-                                          >
-                                            <p
-                                              className="euiTitle euiTitle--xxsmall"
-                                            >
-                                              <strong>
-                                                tooltipPlugin
-                                              </strong>
-                                            </p>
-                                          </EuiTitle>
-                                          <EuiSpacer
-                                            size="s"
-                                          >
-                                            <div
-                                              className="euiSpacer euiSpacer--s"
-                                            />
-                                          </EuiSpacer>
-                                          <EuiCodeBlock
-                                            fontSize="l"
-                                            language="md"
-                                            paddingSize="s"
-                                          >
-                                            <div
-                                              className="euiCodeBlock euiCodeBlock--fontLarge euiCodeBlock--paddingSmall"
-                                              style={Object {}}
-                                            >
-                                              <pre
-                                                className="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
-                                                style={Object {}}
-                                                tabIndex={-1}
-                                              >
-                                                <code
-                                                  className="euiCodeBlock__code"
-                                                  data-code-language="md"
-                                                >
-                                                  <span
-                                                    className="euiCodeBlock__line"
-                                                    key="node-0-0"
-                                                  >
-                                                    !{tooltip[anchor text](helpful description)}
-                                                  </span>
-                                                </code>
-                                              </pre>
-                                              <FullScreenDisplay
-                                                className="euiCodeBlock"
-                                              />
-                                            </div>
-                                          </EuiCodeBlock>
-                                          <EuiSpacer
-                                            size="l"
-                                          >
-                                            <div
-                                              className="euiSpacer euiSpacer--l"
-                                            />
-                                          </EuiSpacer>
-                                          <EuiHorizontalRule>
-                                            <hr
-                                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-                                            />
-                                          </EuiHorizontalRule>
-                                        </div>
-                                      </div>
-                                    </EuiModalBody>
-                                    <EuiModalFooter>
-                                      <div
-                                        className="euiModalFooter"
-                                      >
-                                        <EuiButton
-                                          fill={true}
-                                          onClick={[Function]}
-                                        >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
-                                            disabled={false}
-                                            element="button"
-                                            fill={true}
-                                            isDisabled={false}
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <button
-                                              className="euiButton euiButton--primary euiButton--fill"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
-                                              type="button"
-                                            >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                textProps={
-                                                  Object {
-                                                    "className": "euiButton__text",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
-                                                >
-                                                  <span
-                                                    className="euiButton__text"
-                                                  >
-                                                    <EuiI18n
-                                                      default="Close"
-                                                      token="euiMarkdownEditorFooter.closeButton"
-                                                    >
-                                                      Close
-                                                    </EuiI18n>
-                                                  </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
-                                      </div>
-                                    </EuiModalFooter>
-                                  </div>
-                                </div>
-                              </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(FocusLockUI)>
-                          <RequireSideCar
-                            noIsolation={true}
-                            onClickOutside={[Function]}
-                            setLockProps={[Function]}
-                            sideCar={
-                              Object {
-                                "assignMedium": [Function],
-                                "assignSyncMedium": [Function],
-                                "options": Object {
-                                  "async": true,
-                                  "ssr": false,
-                                },
-                                "read": [Function],
-                                "useMedium": [Function],
-                              }
-                            }
-                          >
-                            <SideCar
-                              noIsolation={true}
-                              onClickOutside={[Function]}
-                              setLockProps={[Function]}
-                              sideCar={
-                                Object {
-                                  "assignMedium": [Function],
-                                  "assignSyncMedium": [Function],
-                                  "options": Object {
-                                    "async": true,
-                                    "ssr": false,
-                                  },
-                                  "read": [Function],
-                                  "useMedium": [Function],
-                                }
-                              }
-                            >
-                              <Effect
-                                noIsolation={true}
-                                onClickOutside={[Function]}
-                                setLockProps={[Function]}
-                              >
-                                <Component>
-                                  <Sheet
-                                    styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                                  />
-                                </Component>
-                              </Effect>
-                            </SideCar>
-                          </RequireSideCar>
-                        </ForwardRef>
-                      </ForwardRef>
-                    </EuiFocusTrap>
-                  </Portal>
-                </EuiOverlayMask>
-              </EuiModal>
-            </div>
-          </EuiMarkdownEditorFooter>
-          <input
-            autoComplete="off"
-            multiple={true}
-            onChange={null}
-            onClick={null}
-            style={
-              Object {
-                "display": "none",
-              }
-            }
-            tabIndex={-1}
-            type="file"
-          />
-        </div>
-      </EuiMarkdownEditorDropZone>
-    </div>
-  </div>
-</EuiMarkdownEditor>
-`;
-
 exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] = `
 <div
   class="euiMarkdownEditor testClass1 testClass2"
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index 72f262257c8..87e5148a827 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -141,11 +141,13 @@ describe('EuiMarkdownEditor', () => {
         {...requiredProps}
       />
     );
+    expect(component.find('EuiModal').length).toBe(0);
+
     component
       .find('EuiButtonIcon.euiMarkdownEditorFooter__helpButton')
       .simulate('click');
 
-    expect(component).toMatchSnapshot();
+    expect(component.find('EuiModal').length).toBe(1);
   });
 
   test('custom plugins are excluded and popover is rendered', () => {
diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
index 8e2f6a3c8db..4d0e41945f6 100644
--- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
@@ -234,7 +234,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
       </ol>
     </nav>
     <div
-      class="euiSpacer euiSpacer--s"
+      class="euiSpacer euiSpacer--s css-i2qclb-euiSpacer-s"
     />
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
@@ -257,7 +257,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           Page title
         </h1>
         <div
-          class="euiSpacer euiSpacer--l"
+          class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
         />
         <div
           class="euiText euiText--medium euiText--constrainedWidth"
@@ -296,13 +296,13 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
       class="euiPageHeaderContent__bottom"
     >
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
       />
       <p>
         Anything
       </p>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
       />
       <div
         aria-label="aria-label"
diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
index 971999154c4..1086a6c4e5d 100644
--- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
@@ -221,7 +221,7 @@ exports[`EuiPageHeaderContent props breadcrumbs is rendered 1`] = `
     </ol>
   </nav>
   <div
-    class="euiSpacer euiSpacer--s"
+    class="euiSpacer euiSpacer--s css-i2qclb-euiSpacer-s"
   />
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
@@ -248,7 +248,7 @@ exports[`EuiPageHeaderContent props children is rendered 1`] = `
     class="euiPageHeaderContent__bottom"
   >
     <div
-      class="euiSpacer euiSpacer--l"
+      class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
     />
     <p>
       Anything
@@ -272,7 +272,7 @@ exports[`EuiPageHeaderContent props children is rendered 2`] = `
     class="euiPageHeaderContent__bottom"
   >
     <div
-      class="euiSpacer euiSpacer--l"
+      class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
     />
     Child
   </div>
@@ -322,11 +322,11 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
     class="euiPageHeaderContent__bottom"
   >
     <div
-      class="euiSpacer euiSpacer--l"
+      class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
     />
     Child
     <div
-      class="euiSpacer euiSpacer--l"
+      class="euiSpacer euiSpacer--l css-jz428s-euiSpacer-l"
     />
     <div
       class="euiTabs euiTabs--large euiTabs--condensed"
diff --git a/src/components/spacer/__snapshots__/spacer.test.tsx.snap b/src/components/spacer/__snapshots__/spacer.test.tsx.snap
index 3da7698af96..cd1175e67a8 100644
--- a/src/components/spacer/__snapshots__/spacer.test.tsx.snap
+++ b/src/components/spacer/__snapshots__/spacer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiSpacer is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiSpacer euiSpacer--l testClass1 testClass2"
+  class="euiSpacer euiSpacer--l testClass1 testClass2 css-jz428s-euiSpacer-l"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/spacer/_index.scss b/src/components/spacer/_index.scss
deleted file mode 100644
index d772c23b64b..00000000000
--- a/src/components/spacer/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'spacer';
diff --git a/src/components/spacer/_spacer.scss b/src/components/spacer/_spacer.scss
deleted file mode 100644
index 89ebc3be265..00000000000
--- a/src/components/spacer/_spacer.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$spacerSizes: (
-  xs: $euiSizeXS,
-  s: $euiSizeS,
-  m: $euiSize,
-  l: $euiSizeL,
-  xl: $euiSizeXL,
-  xxl: $euiSizeXXL,
-);
-
-.euiSpacer {
-  flex-shrink: 0; // don't ever let this shrink in height if direct descendent of flex
-}
-
-@each $name, $size in $spacerSizes {
-  .euiSpacer--#{$name} {
-    height: $size;
-  }
-}
diff --git a/src/components/spacer/spacer.styles.ts b/src/components/spacer/spacer.styles.ts
new file mode 100644
index 00000000000..86ff154f10c
--- /dev/null
+++ b/src/components/spacer/spacer.styles.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiSpacerStyles = ({ euiTheme }: UseEuiTheme) => ({
+  // base
+  euiSpacer: css`
+    flex-shrink: 0; // don't ever let this shrink in height if direct descendent of flex;
+  `,
+  // variants
+  xs: css`
+    height: ${euiTheme.size.xs};
+  `,
+  s: css`
+    height: ${euiTheme.size.s};
+  `,
+  m: css`
+    height: ${euiTheme.size.base};
+  `,
+  l: css`
+    height: ${euiTheme.size.l};
+  `,
+  xl: css`
+    height: ${euiTheme.size.xl};
+  `,
+  xxl: css`
+    height: ${euiTheme.size.xxl};
+  `,
+});
diff --git a/src/components/spacer/spacer.test.tsx b/src/components/spacer/spacer.test.tsx
index 86e768774dd..7d9564807ac 100644
--- a/src/components/spacer/spacer.test.tsx
+++ b/src/components/spacer/spacer.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiSpacer } from './spacer';
 
@@ -18,4 +19,6 @@ describe('EuiSpacer', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  shouldRenderCustomStyles(<EuiSpacer />);
 });
diff --git a/src/components/spacer/spacer.tsx b/src/components/spacer/spacer.tsx
index 8d700ca94ff..c66f644131c 100644
--- a/src/components/spacer/spacer.tsx
+++ b/src/components/spacer/spacer.tsx
@@ -10,6 +10,9 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services';
+
+import { euiSpacerStyles } from './spacer.styles';
 
 const sizeToClassNameMap = {
   xs: 'euiSpacer--xs',
@@ -34,7 +37,11 @@ export const EuiSpacer: FunctionComponent<EuiSpacerProps> = ({
   size = 'l',
   ...rest
 }) => {
+  const euiTheme = useEuiTheme();
+  const styles = euiSpacerStyles(euiTheme);
   const classes = classNames('euiSpacer', sizeToClassNameMap[size], className);
 
-  return <div className={classes} {...rest} />;
+  const cssStyles = [styles.euiSpacer, styles[size]];
+
+  return <div className={classes} css={cssStyles} {...rest} />;
 };
diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap
index 06c59dd6eda..bc6fcfc1e36 100644
--- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap
+++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap
@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiTimeline is rendered with items 1`] = `
-<div
+<ol
   class="euiTimeline"
+  role="list"
 >
-  <div
+  <li
     class="css-1noe449-euiTimelineItem"
   >
     <div
@@ -38,8 +39,8 @@ exports[`EuiTimeline is rendered with items 1`] = `
          was invited to the project
       </p>
     </div>
-  </div>
-  <div
+  </li>
+  <li
     class="css-1noe449-euiTimelineItem"
   >
     <div
@@ -71,6 +72,6 @@ exports[`EuiTimeline is rendered with items 1`] = `
          was invited to the project
       </p>
     </div>
-  </div>
-</div>
+  </li>
+</ol>
 `;
diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap
index 5d60f1d07cf..f43db14ca1c 100644
--- a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap
+++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiTimelineItem is rendered 1`] = `
-<div
+<li
   class="css-1noe449-euiTimelineItem"
 >
   <div
@@ -30,11 +30,11 @@ exports[`EuiTimelineItem is rendered 1`] = `
       I'm the children
     </p>
   </div>
-</div>
+</li>
 `;
 
 exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `
-<div
+<li
   class="css-1noe449-euiTimelineItem"
 >
   <div
@@ -65,11 +65,11 @@ exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `
       I'm the children
     </p>
   </div>
-</div>
+</li>
 `;
 
 exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `
-<div
+<li
   class="css-1noe449-euiTimelineItem"
 >
   <div
@@ -100,11 +100,11 @@ exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `
       I'm the children
     </p>
   </div>
-</div>
+</li>
 `;
 
 exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
-<div
+<li
   class="css-1noe449-euiTimelineItem"
 >
   <div
@@ -133,11 +133,11 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
       I'm the children
     </p>
   </div>
-</div>
+</li>
 `;
 
 exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `
-<div
+<li
   class="css-1noe449-euiTimelineItem"
 >
   <div
@@ -166,5 +166,5 @@ exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `
       I'm the children
     </p>
   </div>
-</div>
+</li>
 `;
diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
index 8d6e1b87c78..6b58d67bac6 100644
--- a/src/components/timeline/timeline.tsx
+++ b/src/components/timeline/timeline.tsx
@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item';
 
 export interface EuiTimelineProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends HTMLAttributes<HTMLOListElement>,
     CommonProps {
   /**
    * List of timeline items to render. See #EuiTimelineItem
@@ -29,11 +29,12 @@ export const EuiTimeline: FunctionComponent<EuiTimelineProps> = ({
   const classes = classNames('euiTimeline', className);
 
   return (
-    <div className={classes} {...rest}>
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    <ol className={classes} role="list" {...rest}>
       {items.map((item, index) => (
         <EuiTimelineItem key={index} {...item} />
       ))}
       {children}
-    </div>
+    </ol>
   );
 };
diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx
index 0aaf1a7caa3..33db6219525 100644
--- a/src/components/timeline/timeline_item.tsx
+++ b/src/components/timeline/timeline_item.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, ElementType } from 'react';
 import { CommonProps } from '../common';
 import { useEuiTheme } from '../../services';
 
@@ -24,7 +24,7 @@ export const VERTICAL_ALIGN = ['top', 'center'] as const;
 export type EuiTimelineItemVerticalAlign = typeof VERTICAL_ALIGN[number];
 
 export interface EuiTimelineItemProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>,
+  extends Omit<HTMLAttributes<ElementType>, 'children'>,
     CommonProps,
     Omit<EuiTimelineItemIconProps, 'verticalAlign'>,
     Omit<EuiTimelineItemEventProps, 'verticalAlign'> {
@@ -32,6 +32,12 @@ export interface EuiTimelineItemProps
    * Vertical alignment of the event with the icon
    */
   verticalAlign?: EuiTimelineItemVerticalAlign;
+  /**
+   * Sets the HTML element for `EuiTimelineItem`.
+   * By default, the element renders as a `<li/>`.
+   * Only change the HTML element when it is not wrapped in a `EuiTimeline` that renders as a `<ol/>`.
+   */
+  component?: ElementType;
 }
 
 export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
@@ -40,6 +46,7 @@ export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
   icon,
   iconAriaLabel,
   className,
+  component = 'li',
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
@@ -47,8 +54,10 @@ export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
 
   const cssStyles = [styles.euiTimelineItem];
 
+  const Element = component;
+
   return (
-    <div css={cssStyles} {...rest}>
+    <Element css={cssStyles} {...rest}>
       <EuiTimelineItemIcon
         icon={icon}
         iconAriaLabel={iconAriaLabel}
@@ -58,6 +67,6 @@ export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
       <EuiTimelineItemEvent verticalAlign={verticalAlign}>
         {children}
       </EuiTimelineItemEvent>
-    </div>
+    </Element>
   );
 };
diff --git a/src/test/internal/render_with_styles.ts b/src/test/internal/render_with_styles.ts
index 87ee9cad143..3e2623da7c6 100644
--- a/src/test/internal/render_with_styles.ts
+++ b/src/test/internal/render_with_styles.ts
@@ -10,6 +10,9 @@ import { render } from 'enzyme';
 import { ReactElement } from 'react';
 import { createSerializer } from '@emotion/jest';
 
+// NOTE: This helper currently does not work and should not be called.
+// Even when called within an it() block, a stack overflow error occurs.
+
 /**
  * Use this function to add the `@emotion` Jest serializer to a single test.
  * The resulting snapshot will include the styles of elements in the component that use `@emotion` for styling.
@@ -25,6 +28,10 @@ import { createSerializer } from '@emotion/jest';
   ```
  */
 export const renderWithStyles = (component: ReactElement) => {
+  throw new Error(
+    'This helper currently does not work and should not be called.'
+  );
+
   afterAll(() => {
     expect.addSnapshotSerializer(
       createSerializer({
diff --git a/upcoming_changelogs/5791.md b/upcoming_changelogs/5791.md
new file mode 100644
index 00000000000..60b95e06936
--- /dev/null
+++ b/upcoming_changelogs/5791.md
@@ -0,0 +1 @@
+- Improved `EuiTimeline` a11y by using better semantic elements
diff --git a/upcoming_changelogs/5806.md b/upcoming_changelogs/5806.md
new file mode 100644
index 00000000000..f2d829082f4
--- /dev/null
+++ b/upcoming_changelogs/5806.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed layout bug in `EuiAccordion` children that use `position: fixed;`
+
diff --git a/upcoming_changelogs/5812.md b/upcoming_changelogs/5812.md
new file mode 100644
index 00000000000..0358479ff85
--- /dev/null
+++ b/upcoming_changelogs/5812.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiSpacer` to Emotion; Removed `$spacerSizes`
diff --git a/upcoming_changelogs/5818.md b/upcoming_changelogs/5818.md
new file mode 100644
index 00000000000..aca9790d2f1
--- /dev/null
+++ b/upcoming_changelogs/5818.md
@@ -0,0 +1,2 @@
+- Replaced sass usage in `EuiAspectRatio` with inline styles using `aspect-ratio` property of css
+
diff --git a/wiki/consuming.md b/wiki/consuming.md
index ad3ebd13333..2a07d6afd15 100644
--- a/wiki/consuming.md
+++ b/wiki/consuming.md
@@ -48,25 +48,46 @@ Test utilities are published from the `lib/test` directory.
 import { findTestSubject } from '@elastic/eui/lib/test';
 ```
 
-### Reusing the variables in JavaScript
+### Theming
 
-The Sass variables are also made available for consumption as json files. This enables reuse of values in css-in-js systems like [Emotion](https://emotion.sh/). As the following example shows, it can also make the downstream components theme-aware without much extra effort:
+As of April 2022 EUI is in the process of [migrating to Emotion JS for the CSS and theming layer](https://github.com/elastic/eui/issues/3912). Using EUI's theme layer with Emotion is [documented in our docs](https://elastic.github.io/eui/#/theming/theme-provider) and should cover the majority of your theming needs. Until the conversion is complete the components you consume may still contain soon-to-be-removed Sass styling. EUI's distribution also provides both a light and dark JSON token file that exposes these Sass variables (through an automatic process derived from the Sass) to make tokens from the individual Sass components available to consume if you need them. As components continue to convert to Emotion, these Sass-to-JS tokens in these files will degrade, eventually disappearing altogether. We therefor recommend not relying on the JSON dist of these tokens, and convert your applications to utilize EUI's Emotion powered [Theme Provider](https://elastic.github.io/eui/#/theming/theme-provider) and its related tokens instead. The following are provided as basic examples to show what that conversion might look like if you were using the older, legacy systems.
+
+#### A not-recommended, legacy method to consume theming variables from Sass
 
 ```jsx
-import React from 'react';
-import { css } from '@emotion/react';
 import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
 
-const styles = css`
-  color: ${euiVars.euiColorPrimary};
-  border: ${euiVars.euiBorderThin};
-`;
+const styles = {
+  color: euiVars.euiColorPrimary,
+  border: euiVars.euiBorderThin
+  padding: euiVars.euiPanelPaddingModifiers.paddingSmall
+};
 
 export default () => (
-  <div css={styles} />
+  <div style={styles} />
 )
 ```
 
+#### A recommended method to consume theming variables using Emotion
+
+```jsx
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+
+export default () => {
+  const { euiTheme } = useEuiTheme();
+  const styles = css`
+    color: ${euiTheme.colors.primary};
+    border: ${euiTheme.border.thin};
+    padding: ${euiTheme.size.s};
+  `;
+  return (
+  <div css={styles} />
+  );
+};
+```
+
 ### "Module build failed" or "Module parse failed: Unexpected token" error
 
 If you get an error when importing a React component, you might need to configure Webpack's `resolve.mainFields` to `['webpack', 'browser', 'main']` to import the components from `lib` instead of `src`. See the [Webpack docs](https://webpack.js.org/configuration/resolve/#resolve-mainfields) for more info.
diff --git a/yarn.lock b/yarn.lock
index ec86752edc3..6c942761616 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -2400,10 +2400,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@elastic/charts@^45.1.1":
-  version "45.1.1"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-45.1.1.tgz#d65b51ee296138a7e6b3d954fcf9fa41ba379492"
-  integrity sha512-gVk8ZbCBh8fUKxM6Rd61qwhSCgt1zU0wt3y3ZMUe+MdaTFG9I+0SceYrltJR+bf0ycK0wb1yg+WEw0LoN8bEIg==
+"@elastic/charts@^46.0.0":
+  version "46.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-46.0.0.tgz#1714ae3d0cbbaf2d7319170577a429bd1776a190"
+  integrity sha512-saWKUg+UNF47sLw3WFeGppcZwB58qm3hLJzX/dwfI9dxZmba/PsYGSTuQXiGWuDQeHoMPlRXLe1lA+hD1cETzw==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"