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/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 5e9817ddd34..27b94f1e41c 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -52,7 +52,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';
@@ -66,4 +65,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/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/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/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.